:root{
  --bg:#fdf2dd;
  --panel:#f6ead1;
  --elev:#fff6e4;
  --text:#2a251e;
  --muted:#766c5e;
  --accent:#f2b56d;
  --accent-2:#e28b4c;
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(0,0,0,.14);
  --hero-parallax: 0px;
  --hero-parallax-strength: 0.22;
  --lux-ease: cubic-bezier(.19,.7,.3,1);
  --lux-ease-out: cubic-bezier(.22,.61,.36,1);
  --lux-duration: .6s;
  --lux-duration-long: 1.1s;


  --hero-bg-top: 40px;
  --hero-bg-bottom: 150px;

  --role-color: #e98239;   
  --name-color: #CFCF9F;   


  --group-blur: 0.8px;  
  --group-dim: .7;      
}

@keyframes luxGrainShift{
  0%{transform:translate3d(0,0,0) scale(1.02);opacity:.07;}
  50%{transform:translate3d(-1.8%,1.4%,0) scale(1.03);opacity:.075;}
  100%{transform:translate3d(1.2%,-1.6%,0) scale(1.02);opacity:.07;}
}

.role-cycler{
  color: var(--role-color) !important;
  animation: glow-wave 3s ease-in-out infinite;
  position: relative;
  display: inline-block;
  transition: left 0.5s ease, transform 0.3s ease;
}
.role-cycler.role-producer {
  width: 8ch; 
}
.role-cycler.role-mixer {
  width: 6ch; 
}
.role-cycler.role-engineer {
  width: 9ch;
}
.role-cycler.pos-center {
  left: 0;
}
.role-cycler.pos-left {
  left: -200px;
}
.role-cycler.pos-right {
  left: 200px;
}

@keyframes glow-wave {
  0%, 100% { text-shadow: 0 0 5px rgba(226, 139, 76, 0.5), 0 0 10px rgba(226, 139, 76, 0.3), 0 0 15px rgba(226, 139, 76, 0.1); }
  50% { text-shadow: 0 0 10px rgba(226, 139, 76, 0.8), 0 0 20px rgba(226, 139, 76, 0.5), 0 0 30px rgba(226, 139, 76, 0.2); }
}


.display-name{
  color: var(--name-color) !important;
 
  -webkit-text-stroke: 0.35px rgba(0,0,0,.35);
  text-shadow:
    0 1px 0 rgba(255,255,255,.75),
    0 2px 6px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html{
  scroll-behavior: smooth;
}


.section {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition-property: opacity, transform;
  transition-duration: var(--lux-duration-long);
  transition-timing-function: var(--lux-ease);
  transition-delay: var(--section-stagger, 120ms);
  will-change: opacity, transform;
}
.section.fade-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


#about {
  margin-top: 35px;
}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background-color var(--lux-duration-long) var(--lux-ease),color var(--lux-duration) var(--lux-ease);
  scroll-snap-type: y mandatory;
}

.container{max-width:1100px;margin:0 auto;padding:0 24px}
.section{padding:60px 0}
.section-head{margin-bottom:24px}
.section h2{font-family:"Fraunces",serif;font-weight:650;font-size:clamp(28px,4vw,40px);letter-spacing:-.01em;margin:0 0 6px}
.muted{color:var(--muted)}
.small{font-size:.95rem}
.tiny{font-size:.85rem}


.grain{
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:1;
  background-image:url('assets/noise.png');
  opacity:.07;
  mix-blend-mode:soft-light;
  transition:opacity var(--lux-duration-long) var(--lux-ease);
  animation:luxGrainShift 28s var(--lux-ease) infinite alternate;
}

body.js-enabled:not(.lux-ready) .grain{
  opacity:0;
  animation-play-state:paused;
}
body.js-enabled.lux-ready .grain{
  animation-play-state:running;
}


.site-header{
  position:sticky;top:0;z-index:50;background:var(--bg);
  border-bottom:1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
  transition: background-color .25s ease, backdrop-filter .25s ease, box-shadow .25s ease;
}
.site-header.scrolled{
  background:rgba(253,242,221,.55);backdrop-filter: blur(10px);box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.site-header.scrolled:hover,.site-header.scrolled:focus-within{
  background:rgba(253,242,221,.98);backdrop-filter: blur(0);
}


.header-inner{display:flex;align-items:center;height:64px;gap:16px;position:relative}
.top-nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap;text-align:center}
.header-actions{display:flex;align-items:center;gap:12px;position:absolute;left:50%;transform:translateX(-50%)}


.nav-link{
  text-decoration:none;color:var(--text);
  font-family:"Fraunces",serif;
  font-weight:650;
  font-size:1.05rem;
  padding:6px 10px;border-radius:10px;
  filter: blur(.25px); opacity:.9;
  transition:
    transform .38s var(--lux-ease-out),
    box-shadow .45s var(--lux-ease),
    color .32s var(--lux-ease-out),
    filter .32s var(--lux-ease-out),
    background-color .32s var(--lux-ease);
}
.nav-link:hover,.nav-link:focus{filter:none;opacity:1;transform:translateY(-2px);background:rgba(0,0,0,.05);box-shadow:0 8px 18px rgba(0,0,0,.10)}


.hero{min-height:72vh;padding-top:0px;margin-top:-45px;display:grid;align-items:center;position:relative;z-index:2}
.hero-inner{position:relative;z-index:3;max-width:900px}


.hero-bg{
  position:absolute;z-index:1;
  top: var(--hero-bg-top);
  bottom: var(--hero-bg-bottom);
  left:50%;transform:translateX(-50%);
  width:100vw;
  background: url('assets/mercerstreet-philedit.jpg?v=5') center center / cover no-repeat;
  filter: saturate(.96);
}
.hero-bg::before{
  content:"";
  position:absolute;
  bottom: -250px;
  left:50%;transform:translateX(-50%);
  width:30vw;
  height:30vh;
  background: url('assets/note.png') center / cover no-repeat;
  z-index:0;
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 55% at 50% 40%, rgba(253,242,221,.65) 0%, rgba(253,242,221,.28) 45%, rgba(253,242,221,.08) 75%, rgba(253,242,221,0) 100%),
    linear-gradient(to bottom, rgba(253,242,221,.55) 0%, rgba(253,242,221,.22) 35%, rgba(253,242,221,.06) 70%, rgba(253,242,221,0) 100%);
  backdrop-filter: blur(1.5px);
}

.hero-name{margin:0 0 4px;display:flex;align-items:baseline;gap:12px;position:relative}
.display-name{
  font-family:"Fraunces",serif;font-weight:700;letter-spacing:-.02em;line-height:1.04;
  font-size:clamp(46px,9vw,96px);
  text-shadow:
    0 1px 0 rgba(255,255,255,.85),
    0 0 8px rgba(0,0,0,.08);
}

.hero-note{font-family:"Caveat", cursive;color:var(--accent-2);font-size:clamp(20px,4vw,36px);margin:0;text-shadow:0 1px 0 #e28b4c}

.hero-roles{margin:6px 0 18px;color:var(--muted);font-size:1.5em;text-shadow:0 1px 0 rgba(255, 255, 255, 0.65)}
.role-cycler{color:var(--text);font-weight:800}

.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}


.btn-primary,.btn-ghost{display:inline-block;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:600}
.btn-primary{color:#251e18;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.btn-ghost{color:var(--text);border:1px solid rgba(0,0,0,.14);background:rgba(255,255,255,.4)}


.icon-btn{display:inline-grid;place-items:center;width:auto;height:auto;padding:0;border:none;background:transparent;box-shadow:none;transition:transform .38s var(--lux-ease)}
.icon-btn img{height:49px;width:175px;display:block;border-radius:12px;}
.icon-btn:hover{transform:translateY(-2px) scale(1.05)}


.credits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.credit-card{background:linear-gradient(180deg,#fffaf0,#f6ead1);border:1px solid rgba(0,0,0,.07);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow);position:relative}
.credit-card img{width:100%;height:180px;object-fit:cover;display:block}
.credit-card img::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,.4),rgba(255,255,255,.8));background-size:200% 100%;animation:shimmer 1.5s infinite;opacity:0;pointer-events:none}
.credit-card img:not([src]),.credit-card img[src=""]{animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.credit-meta{padding:12px}
.credit-meta h3{margin:0 0 6px;font-size:1rem;font-family:"Fraunces",serif;font-weight:600}
.credit-links{display:flex;gap:12px}
.tiny-link{font-size:.9rem;color:var(--accent-2);text-decoration:none}
.tiny-link:hover{text-decoration:underline}


.tilt-1{transform:rotate(-.6deg)} .tilt-2{transform:rotate(.5deg)} .tilt-3{transform:rotate(-.2deg)} .tilt-4{transform:rotate(.8deg)}


.audio-list{display:grid;gap:16px}
.audio-item{background:#fff4df;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:14px}
.audio-meta{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tag{background:rgba(242,181,109,.22);color:#7a4b20;padding:2px 8px;border-radius:999px;font-size:.85rem}


.about-grid{display:grid;grid-template-columns:1fr;row-gap:16px}
.about-copy p{margin-top:0}
.stats{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.about-media{width:65%;margin:12px auto 0}
.studio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.studio-grid img{width:100%;height:150px;object-fit:cover;border-radius:var(--radius);box-shadow:0 10px 24px rgba(0,0,0,.18);display:block}


.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:20px}
.service-card{background:linear-gradient(180deg,#fffaf0,#f6ead1);border:1px solid rgba(0,0,0,.07);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow);padding:16px}
.service-card h3{font-family:"Fraunces",serif;font-weight:650;margin:0 0 8px}
.service-card p{color:var(--muted);margin:0 0 8px}


.quotes-grid{display:flex;flex-direction:row;flex-wrap:wrap;gap:24px;margin-top:24px}


.pull-quote{position:relative;margin:0 auto;width:100%;padding:36px 28px 28px 28px;background:linear-gradient(180deg,#fffaf0,#f6ead1);border:1.5px solid rgba(0,0,0,.12);border-radius:14px;box-shadow:0 16px 36px rgba(0,0,0,.18);font-family:"Fraunces",serif;font-size:clamp(18px,2.6vw,22px);line-height:1.55;color:var(--text)}
.pull-quote::before{content:"";position:absolute;inset:0 auto auto 0;height:6px;width:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:14px 14px 0 0}
.pull-quote::after{content:"“";position:absolute;top:-10px;left:16px;font-family:"Fraunces",serif;font-weight:700;font-size:72px;line-height:1;color:rgba(226,139,76,.25)}
.pull-quote cite{display:block;margin-top:12px;color:var(--accent-2);font-size:1rem;font-style:normal;font-weight:600}


.collab-groups{display:grid;gap:26px}
.collab-group h3{margin:0 0 8px;font-family:"Fraunces",serif;font-weight:700;letter-spacing:.1em;font-size:.95rem;color:var(--muted)}
.badge-list{list-style:none;margin:0 auto;padding:0;max-width:1100px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.badge{background:#ffffff;border:1.5px solid rgba(0,0,0,.20);box-shadow:0 6px 16px rgba(0,0,0,.10);border-radius:999px;padding:8px 12px;font-size:.95rem;color:#1f1912;font-weight:600}


.contact-form{display:grid;gap:14px;max-width:720px}
.form-row{display:grid;gap:6px}
label{font-weight:600}
input,textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(0,0,0,.14);background:#fff;color:var(--text);font:inherit}
input:focus,textarea:focus{outline:2px solid var(--accent);border-color:transparent}
.form-actions{display:flex;align-items:center;gap:16px}
.hp{display:none !important}


.site-footer{padding:44px 0;color:var(--muted);text-align:center;border-top:1px solid rgba(0,0,0,.08)}
.site-footer p{margin:0}
.site-footer p + p{margin-top:6px}


.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;background:#fff;color:#000;padding:8px;border-radius:8px}


@media (max-width: 1000px){
  .credits-grid{grid-template-columns:repeat(2,1fr)}
  .service-grid{grid-template-columns:1fr}
  .about-media{width:100%}
}
@media (max-width: 560px){
  .credits-grid{grid-template-columns:1fr}
  .studio-grid{grid-template-columns:1fr}
  .studio-grid img{height:220px}
}


@media (any-hover: hover){
  .btn-primary,.btn-ghost,.nav-link,.credit-card,.service-card,.audio-item,.badge,.pull-quote{
    transition:
      transform .38s var(--lux-ease),
      box-shadow .45s var(--lux-ease),
      background-color .35s var(--lux-ease),
      border-color .35s var(--lux-ease),
      color .28s var(--lux-ease-out),
      filter .32s var(--lux-ease);will-change:transform
  }
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.18),0 0 0 2px rgba(226,139,76,.22);filter:brightness(1.02) saturate(1.02)}
  .btn-ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.55);box-shadow:0 10px 24px rgba(0,0,0,.14)}
  .credit-card:hover,.service-card:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 18px 42px rgba(0,0,0,.22),0 0 0 2px rgba(226,139,76,.18);border-color:rgba(0,0,0,.16)}
  .credit-card img{transition:transform .38s var(--lux-ease)}
  .credit-card:hover img{transform:scale(1.03)}
  .audio-item:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.16),0 0 0 2px rgba(226,139,76,.16);border-color:rgba(0,0,0,.16)}
  .audio-item:hover .tag{background:rgba(242,181,109,.30);color:#5b3413}
  .badge:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.16),0 0 0 2px rgba(242,181,109,.28) inset;border-color:rgba(0,0,0,.26);background:#fff}
  .pull-quote:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(0,0,0,.22);border-color:rgba(0,0,0,.16)}
}
@media (hover: none){
  .credit-card:active,.service-card:active,.audio-item:active,.badge:active,.btn-primary:active,.btn-ghost:active{
    transform:translateY(-2px) scale(.99);box-shadow:0 10px 20px rgba(0,0,0,.14)
  }
}


@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}


.hero-note{
  font-family: "Caveat", cursive !important;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--accent-2);
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}



.hero-bg::after{
  content:"";
  position:absolute; inset:0;
 
  background:
    radial-gradient(60% 55% at 50% 40%,
      rgba(253,242,221,.70) 0%,
      rgba(253,242,221,.30) 48%,
      rgba(253,242,221,.10) 72%,
      rgba(253,242,221,0) 100%),
    linear-gradient(to bottom,
      rgba(253,242,221,.50) 0%,
      rgba(253,242,221,.18) 36%,
      rgba(253,242,221,.06) 70%,
      rgba(253,242,221,0) 100%);
  backdrop-filter: blur(1.2px);
}


.hero-inner{ position: relative; z-index: 3; }
.hero-inner::before{
  content:"";
  position:absolute;
 
  top: -10px; left: -24px; right: -24px;
  height: clamp(160px, 34vw, 320px);
  pointer-events:none;
  z-index: 0;
  background:
    radial-gradient(50% 60% at 35% 40%,
      rgba(253,242,221,.85) 0%,
      rgba(253,242,221,.38) 55%,
      rgba(253,242,221,0) 100%);
  filter: blur(10px);
}


.display-name{
 
  text-shadow:
    0 1px 0 rgba(255,255,255,.85),
    0 0 8px rgba(0,0,0,.08),
    0 0 2px rgba(255,255,255,.5);
  -webkit-text-stroke: .4px rgba(255,255,255,.55);
}
.hero-roles, .role-cycler{
  text-shadow:
    0 1px 0 rgba(255,255,255,.7),
    0 0 3px rgba(253,242,221,.5);
}


.btn-primary{ box-shadow: 0 10px 24px rgba(0,0,0,.14) }
.btn-ghost{ background: rgba(255,255,255,.55); }


.hero-bg::after,
.hero-inner::before{
  content: none !important;
  background: none !important;
  display: none !important;
}


.display-name{
  position: relative !important;
  -webkit-text-stroke: 0.35px rgba(20,13,4,.35);
  text-shadow:
    0 2px 8px rgba(0,0,0,.24),
    0 0 18px rgba(255,255,255,.28),
    0 0 38px rgba(240,214,164,.22);
  letter-spacing: -0.015em;
  overflow: visible;
}
.display-name::before,
.display-name::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:12px;
  transition:opacity var(--lux-duration) var(--lux-ease);
}
.display-name::before{
  background: radial-gradient(ellipse at 45% 15%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 60%);
  opacity:.6;
  mix-blend-mode: screen;
  filter: blur(14px);
}
.display-name::after{
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 45%, rgba(255,255,255,0) 90%);
  opacity:.42;
  transform: none;
  mix-blend-mode: screen;
}
.display-name:hover::before,
.display-name:hover::after{
  opacity:.78;
}

.hero-roles,
.role-cycler{
  text-shadow:
    0 1px 0 rgba(255,255,255,.8),
    0 1px 5px rgba(0,0,0,.24),
    0 0 14px rgba(232,184,118,.32),
    0 0 30px rgba(253,242,221,.18);
  position: relative;
  overflow: visible;
}
.role-cycler::after{
  content:"";
  position:absolute;
  inset:-6px -12px -6px -12px;
  border-radius:999px;
  pointer-events:none;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 65%);
  opacity:.4;
  mix-blend-mode: screen;
  filter: blur(12px);
}


.hero-note{
  font-family: "Caveat", cursive !important;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255,255,255,.55);

  
}






.credits-grid .credit-card,
.service-grid .service-card,
.audio-list .audio-item,
.badge-list .badge {
  filter: none;
  opacity: 1;
}



.credits-grid:hover .credit-card,
.credits-grid:focus-within .credit-card {
  filter: blur(var(--group-blur)) saturate(.95) brightness(.98) !important;
  opacity: var(--group-dim) !important;
}
.credits-grid:hover .credit-card:hover,
.credits-grid:focus-within .credit-card:focus-within {
  filter: none !important;
  opacity: 1 !important;
}


.service-grid:hover .service-card,
.service-grid:focus-within .service-card {
  filter: blur(var(--group-blur)) saturate(.95) brightness(.98) !important;
  opacity: var(--group-dim) !important;
}
.service-grid:hover .service-card:hover,
.service-grid:focus-within .service-card:focus-within {
  filter: none !important;
  opacity: 1 !important;
}


.audio-list:hover .audio-item,
.audio-list:focus-within .audio-item {
  filter: blur(var(--group-blur)) saturate(.95) brightness(.98) !important;
  opacity: var(--group-dim) !important;
}
.audio-list:hover .audio-item:hover,
.audio-list:focus-within .audio-item:focus-within {
  filter: none !important;
  opacity: 1 !important;
}


.collab-groups:hover .badge,
.collab-groups:focus-within .badge {
  filter: blur(var(--group-blur)) saturate(.95) brightness(.98) !important;
  opacity: var(--group-dim) !important;
}
.collab-groups:hover .badge:hover,
.collab-groups:focus-within .badge:focus-visible {
  filter: none !important;
  opacity: 1 !important;
}


#email-me,
.header-actions a[href^="mailto:"],
a[href^="mailto:"],
.nav-link.email,
.btn-ghost.email,
.btn-ghost[href^="mailto:"] {
  color: var(--accent-2) !important;
  text-decoration-color: color-mix(in oklab, var(--accent-2) 55%, transparent);
  text-underline-offset: 3px;
}


#email-me:hover,
.header-actions a[href^="mailto:"]:hover,
a[href^="mailto:"]:hover,
.nav-link.email:hover,
.btn-ghost.email:hover,
.btn-ghost[href^="mailto:"]:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent-2);
  filter: saturate(1.05) brightness(1.02);
}


.btn-ghost.email,
.btn-ghost[href^="mailto:"] {
  border-color: rgba(226,139,76,.5);
  background: rgba(255,255,255,.55);
}



.site-footer .btn-ghost[href^="mailto:"],
.site-footer a[href^="mailto:"].btn-ghost,
.site-footer a[href^="mailto:"].btn,
.site-footer .email-cta[href^="mailto:"],
.site-footer .btn-primary[href^="mailto:"],
.site-footer a[href^="mailto:"] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #251e18 !important;
  border-color: transparent !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

@media (any-hover: hover){
  .site-footer a[href^="mailto:"].btn-ghost:hover,
  .site-footer a[href^="mailto:"].btn:hover,
  .site-footer .email-cta[href^="mailto:"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,.18), 0 0 0 2px rgba(226,139,76,.22);
    filter: brightness(1.02) saturate(1.02);
  }
}




.site-footer :is(a,button).btn-primary,
.site-footer :is(a,button).btn,
.site-footer :is(a,button)[data-cta="email"],
.site-footer :is(a,button)[aria-label*="Email" i],
.site-footer a[href^="mailto:"],
.site-footer a[href*="contact" i],
.site-footer .email-cta,
footer :is(a,button)[href^="mailto:"],
footer .email-cta {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #251e18 !important;
  border-color: transparent !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.14) !important;
}


.site-footer :is(a,button).btn-ghost,
footer :is(a,button).btn-ghost {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  border-color: transparent !important;
  color: #251e18 !important;
}


@media (any-hover: hover){
  .site-footer :is(a,button):hover.email-cta,
  .site-footer :is(a,button)[href^="mailto:"]:hover,
  .site-footer :is(a,button).btn-primary:hover,
  .site-footer :is(a,button).btn:hover,
  footer :is(a,button)[href^="mailto:"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0,0,0,.18), 0 0 0 2px rgba(226,139,76,.22);
    filter: brightness(1.02) saturate(1.02);
  }
}

.site-footer .email-cta {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important;
  color: #e28b4c !important;
  border-color: transparent !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.14) !important;
}




.hero.container {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}


.hero {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden !important;
}


@supports (width: 100dvw) {
  .hero {
    width: 100dvw !important;
    margin-left: calc(50% - 50dvw) !important;
    margin-right: calc(50% - 50dvw) !important;
  }
}


.hero-bg {
  position: absolute !important;
  inset: 0 !important;
  background: url('assets/mercerstreet-philedit.jpg?v=6') center center / cover no-repeat !important;
  background-attachment: scroll !important;
  transform: translate3d(0, var(--hero-parallax), 0) !important;
  will-change: transform !important;
  filter: saturate(1.05) contrast(1.05) brightness(0.95) blur(1.2px) !important;
  z-index: 1 !important;
}


.hero-inner {
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 24px !important;
  max-width: 900px !important;
}


@media (max-width: 900px) {
  .hero {
    min-height: 88vh !important;
    --hero-parallax: 0px !important;
  }
  .hero-bg { background-attachment: scroll !important; background-position: center 40% !important; }
}



.hero,
.hero.container {
  position: relative !important;
  width: 100vw !important;
  min-height: 100vh !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
}


.hero-bg {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: url('assets/mercerstreet-philedit.jpg?v=6') center center / cover no-repeat !important;
  background-attachment: scroll !important;
  transform: translate3d(0, var(--hero-parallax), 0) !important;
  will-change: transform !important;
  filter: saturate(1.05) contrast(1.05) brightness(0.95) blur(1.2px) !important;
  z-index: 1 !important;
}


.hero-inner {
  position: relative !important;
  z-index: 2 !important;
  text-align: center !important;
  color: #fff !important;
  margin: 0 !important;
  padding: 0 24px !important;
  max-width: 900px !important;
}


@media (max-width: 900px) {
  .hero-bg {
    background-attachment: scroll !important;
    background-position: center 40% !important;
  }
  .hero {
    min-height: 90vh !important;
    --hero-parallax: 0px !important;
  }
}/* === FINAL ALIGNMENT FIX: Center role text under name === */
.hero-name {
  display: block !important;
  text-align: center !important;
}

.display-name {
  display: block !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.hero-roles {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0.25rem auto 0 !important;
  line-height: 1.2 !important;
}

.role-cycler {
  display: inline-block !important;
  position: static !important;
  left: auto !important;
  transform: none !important;
  text-align: center !important;
}




.hero-name {
  display: block !important;
  text-align: center !important;
}

.display-name {
  display: inline-block !important;
  text-align: center !important;
  margin: 0 auto !important;
  position: relative !important;
}


.hero-roles {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0.35rem auto 0 !important;
  line-height: 1.2 !important;
}


.role-cycler {
  position: relative !important;
  display: inline-block !important;
  text-align: center !important;
  transition: left 0.5s ease, transform 0.3s ease;
}

.role-cycler.pos-center { left: 0 !important; }
.role-cycler.pos-left   { left: -190px !important; }
.role-cycler.pos-right  { left: 190px !important; }


.icon-btn img {
  height: 49px !important;
  width: 175px !important;
  display: block !important;
  border-radius: 12px !important;
  object-fit: contain !important;
  content: url('assets/insta.png') !important;
}


@media (max-width: 640px) {
  body{
    scroll-snap-type: none !important;
  }

  .container{
    padding: 0 18px !important;
  }

  .section{
    padding: 44px 0 !important;
  }

  #alwaysNavBar{
    padding: 12px 16px !important;
    gap: 10px !important;
  }
  #alwaysNavBar .top-nav{
    width: 100% !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    margin: 0 -8px !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
  }
  #alwaysNavBar .top-nav::-webkit-scrollbar{
    display: none !important;
  }
  #alwaysNavBar .nav-link{
    font-size: 0.9rem !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }
  #alwaysNavBar .center-btn{
    display: none !important;
  }

  .hero,
  .hero.container{
    min-height: 88vh !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 110px 16px 72px !important;
    justify-content: flex-end !important;
    text-align: center !important;
  }
  .hero-bg{
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  .hero-inner{
    padding: 0 !important;
  }
  .hero-name{
    gap: 8px !important;
  }
  .display-name{
    font-size: clamp(40px, 15vw, 60px) !important;
    line-height: 1.05 !important;
  }
  .hero-roles{
    font-size: clamp(18px, 5vw, 22px) !important;
    margin-top: 0.25rem !important;
  }
  .role-cycler{
    position: static !important;
    transform: none !important;
    display: inline-block !important;
  }
  .role-cycler.pos-left,
  .role-cycler.pos-right{
    left: 0 !important;
  }

  .hero-ctas{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .credits-grid{
    grid-template-columns: 1fr !important;
  }
  .service-grid{
    grid-template-columns: 1fr !important;
  }
  .audio-list{
    grid-template-columns: 1fr !important;
  }

  .quotes-grid{
    flex-direction: column !important;
  }

  .badge-list{
    justify-content: flex-start !important;
  }

  .pull-quote{
    padding: 28px 22px !important;
    font-size: clamp(18px, 5vw, 20px) !important;
  }

  .header-inner,
  .top-nav{
    width: 100% !important;
  }
  .top-nav{
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    scrollbar-width: none !important;
  }
  .top-nav::-webkit-scrollbar{
    display: none !important;
  }

  .site-footer{
    padding: 36px 0 !important;
  }
}