:root{--reference-surface:#f0efe9;--media-outline:2px solid rgba(255,255,255,.58)}

/* Final site identity: solid white navigation on every viewport. */
.site-header{background:#fff!important;border-color:rgba(0,0,0,.12)!important;color:#111!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.site-header .brand img{filter:none!important}
.nav-links a{color:#171717!important}
.nav-links a:hover,.nav-links a:focus-visible{background:rgba(0,0,0,.07)!important;color:#050505!important}
.menu-toggle{color:var(--gold)!important}
@media(max-width:860px){
  .nav-links,.nav-links.is-open{background:#fff!important;border-color:rgba(0,0,0,.12)!important;backdrop-filter:none!important}
  .nav-links a{background:#fff!important;color:#111!important}
  .nav-links .nav-cta{background:var(--gold)!important;color:#fff!important}
}

.sound-inner,
.services>.section-title,.services>.service-list,
.process>.section-title,.process>.process-grid,
.testimonials>.testimonial-title,.testimonials>.testimonial-stage,.testimonials>.testimonial-controls,
.pricing>.section-title,.pricing>.pricing-ledger,
.faq>.faq-layout,.contact>.contact-layout{width:min(100%,var(--content-max));margin-left:auto;margin-right:auto}
.services,.testimonials,.faq,.contact{padding-left:var(--gutter)!important;padding-right:var(--gutter)!important}
.sound,.process,.pricing{padding-left:calc(var(--gutter) + 14px)!important;padding-right:calc(var(--gutter) + 14px)!important}
.sound-head,.section-title,.testimonial-title{display:block!important;text-align:left!important}
.sound-head,.section-title,.testimonial-title{width:100%!important;max-width:none!important}
.sound-head h2,.section-title h2,.testimonial-title h2{margin-left:0!important;margin-right:0!important;text-align:left!important}
.sound-head>span{display:block;margin-top:22px!important}

.reference-row .track-card{position:relative;isolation:isolate;overflow:hidden!important;clip-path:none!important;border:var(--media-outline)!important;border-radius:var(--radius)!important;background:var(--reference-surface)!important;box-shadow:none!important}
.reference-row .track-card::after{display:none!important}
.reference-row .track-player{overflow:visible!important;border:0!important;border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0!important;background:#111!important}
.reference-row .track-cover{left:0!important;right:0!important;width:100%!important;border:0!important;border-radius:calc(var(--radius) - 1px)!important;background:#111!important}
.reference-row .track-credit{min-height:58px;margin:-1px 0 0!important;padding:17px 21px!important;border:0!important;border-radius:0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px)!important;background:var(--reference-surface)!important;color:#161615!important}
.reference-row .spotify-embed{inset:0!important;overflow:hidden!important;border:0!important;border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0!important;background:#111!important}
.reference-row .spotify-embed::after{display:none!important}
.reference-row .spotify-embed iframe{inset:-3px!important;width:calc(100% + 6px)!important;height:calc(100% + 6px)!important}
.spotify-consent-prompt{position:absolute;inset:0;z-index:24;display:none;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;background:rgba(8,8,8,.82);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.track-card.needs-spotify-consent .spotify-consent-prompt{display:grid}
.spotify-consent-prompt p{max-width:25ch;margin:0;font-size:.84rem;line-height:1.45}
.spotify-consent-prompt button{min-height:42px;padding:10px 16px;border:1px solid var(--gold);border-radius:var(--radius);background:var(--gold);color:#fff;font:inherit;font-size:.72rem;font-weight:750;cursor:pointer}
.spotify-consent-prompt button:hover,.spotify-consent-prompt button:focus-visible{background:#fff;border-color:#fff;color:#111}
.reference-more{width:max-content!important;min-width:12.5rem;min-height:44px;margin:26px auto 0!important;padding:10px 18px;border-radius:var(--radius)!important}

.reference-carousel,.video-carousel{width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}
.reference-carousel{gap:var(--reference-gap);overflow:hidden}
.reference-row-shell{width:100%;max-height:520px;overflow:clip;opacity:1;transform:translateY(0);contain:layout paint;will-change:max-height,opacity,transform;transition:max-height .36s cubic-bezier(.2,.8,.2,1),opacity .22s ease,transform .32s cubic-bezier(.2,.8,.2,1),margin .36s cubic-bezier(.2,.8,.2,1)}
.reference-row-shell.is-row-transitioning{max-height:0;opacity:0;transform:translateY(-28px);margin-top:calc(-1 * var(--reference-gap));pointer-events:none}
.reference-row-shell.is-row-entering{animation:reference-row-enter .36s cubic-bezier(.2,.8,.2,1) both}
@keyframes reference-row-enter{from{max-height:0;opacity:0;transform:translateY(-28px);margin-top:calc(-1 * var(--reference-gap))}to{max-height:520px;opacity:1;transform:translateY(0);margin-top:0}}
.reference-row-shell[hidden]{display:none!important}
.reference-row{padding-left:0!important;padding-right:0!important}
.video-carousel{position:relative;margin-top:clamp(52px,6vw,82px);overflow:hidden}
.video-grid{width:100%;display:grid!important;grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:calc((100% - 18px)/2);gap:18px!important;padding:2px 0 6px!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-behavior:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom;cursor:grab;background:transparent!important}
.video-grid::-webkit-scrollbar{display:none}
.video-grid.is-dragging{cursor:grabbing;user-select:none}
.video-card{position:relative;width:100%;min-width:0;overflow:hidden;border:var(--media-outline)!important;border-radius:var(--radius)!important;background:#0d0d0d!important;box-shadow:none!important}
.video-card::after{content:"";position:absolute;inset:0;z-index:8;border-radius:inherit;box-shadow:inset 0 0 0 0 transparent;pointer-events:none}
.video-preview{border-radius:calc(var(--radius) - 1px)!important}
.video-preview>button span{display:none!important}
.video-preview>button::before{content:""!important;width:52px!important;height:52px!important;border:1px solid rgba(255,255,255,.55)!important;border-radius:50%!important;background:rgba(12,12,12,.58)!important;backdrop-filter:blur(8px)}
.video-preview>button::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:15px solid #fff;transform:translate(-38%,-50%);pointer-events:none}
.video-carousel:is(:hover,:focus-within) .video-arrow{opacity:1;pointer-events:auto}
.reference-arrow{width:42px!important;height:76px!important;background:rgba(10,10,10,.58)!important;border:1px solid rgba(255,255,255,.4)!important;font-size:0!important;backdrop-filter:blur(10px);box-shadow:none!important;display:grid!important;place-items:center!important;padding:0!important}
.reference-arrow::before{content:"";position:absolute;left:50%;top:50%;display:block;width:11px;height:11px;border-top:2px solid currentColor;border-right:2px solid currentColor;margin:0!important;transform-origin:center}
.reference-arrow-prev,.video-arrow-prev{left:8px!important;border-radius:0 var(--radius) var(--radius) 0!important}
.reference-arrow-next,.video-arrow-next{right:8px!important;border-radius:var(--radius) 0 0 var(--radius)!important}
.reference-arrow-prev::before,.video-arrow-prev::before{transform:translate(-42%,-50%) rotate(-135deg)!important}
.reference-arrow-next::before,.video-arrow-next::before{transform:translate(-58%,-50%) rotate(45deg)!important}
.reference-arrow:hover,.reference-arrow:focus-visible{background:rgba(213,29,38,.88)!important;border-color:rgba(255,255,255,.72)!important}

.video-card--party .video-preview img{animation:none!important;transform:scale(1.54)!important}
.video-card--morelo .video-preview img{animation:none!important;transform:scale(1.44)!important}
.video-card--party .video-preview{background:#090909 url("assets/video-reference-1.jpg") center/cover no-repeat}
.video-card--morelo .video-preview{background:#090909 url("assets/video-reference-2.jpg") center/cover no-repeat}

.service-row:nth-child(3) img{object-position:center 86%!important;transform:scale(1.13)!important}
.service-row:nth-child(4) img{object-position:center 67%!important}

.about{padding-left:var(--gutter)!important;padding-right:var(--gutter)!important}
.about-layout{width:min(100%,var(--content-max));margin-left:auto;margin-right:auto}

@media(min-width:861px){.hero-image img{transform:translateX(calc(-12.9% + 19px))!important}}
@media(max-width:860px){
  .hero-image picture{overflow:hidden!important}
  .hero-image img{width:calc(100% + 44px)!important;max-width:none!important;margin-left:-22px!important;transform:translateX(7px)!important}
}

.faq-layout,.faq-layout:has(.faq-list[hidden]){display:block!important}
.faq-heading,.faq-layout:has(.faq-list[hidden])>.faq-heading{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:18px!important;text-align:center!important}
.faq-heading>h2,.faq-layout:has(.faq-list[hidden])>.faq-heading>h2{margin:0!important;text-align:center!important}
.faq-heading .faq-toggle,.faq-layout:has(.faq-list[hidden])>.faq-heading .faq-toggle{position:relative!important;align-self:center!important;width:132px!important;min-height:46px;margin:0 auto!important;padding:11px 33px 11px 17px!important}
.faq-list{width:100%!important;margin:28px 0 0!important}

/* Cookie choices must read as controls before hover, not as plain text. */
.consent{border:1px solid rgba(0,0,0,.16)!important;border-right:0!important;border-bottom:0!important;background:#fff!important;color:#111!important;box-shadow:0 18px 60px rgba(0,0,0,.26)!important}
.consent-close{color:#111!important;cursor:pointer}
.consent>div{gap:10px;flex-wrap:wrap}
.consent>div .text-button{min-width:160px;border:1px solid rgba(0,0,0,.25)!important;border-radius:var(--radius)!important;background:#eee!important;color:#151515!important;opacity:1!important}
.consent>div .text-button[data-consent="media"]{border-color:var(--gold)!important;background:var(--gold)!important;color:#fff!important}
.consent>div .text-button:hover,.consent>div .text-button:focus-visible{border-color:#111!important;background:#111!important;color:#fff!important}

@media(max-width:1099px){
  .video-grid{grid-auto-columns:min(74vw,620px)}
}
@media(max-width:599px){
  .sound,.process,.pricing{padding-left:32px!important;padding-right:32px!important}
  .reference-row{grid-auto-columns:min(78vw,292px)}
  .reference-row .track-credit{min-height:46px;padding:13px 17px!important}
  .reference-more{min-width:12.5rem}
  .video-carousel{margin-top:42px}
  .video-grid{grid-auto-columns:min(84vw,360px);gap:12px!important}
  .reference-arrow,.video-arrow{display:none!important}
  .faq-heading,.faq-layout:has(.faq-list[hidden])>.faq-heading{display:flex!important;flex-direction:column!important;align-items:center!important;gap:16px!important;text-align:center!important}
  .faq-heading>h2,.faq-layout:has(.faq-list[hidden])>.faq-heading>h2{font-size:clamp(2.05rem,10vw,2.8rem)!important;white-space:nowrap;text-align:center!important}
  .faq-heading .faq-toggle,.faq-layout:has(.faq-list[hidden])>.faq-heading .faq-toggle{position:relative!important;align-self:center!important;width:112px!important;min-height:42px;margin:0 auto!important;padding:9px 29px 9px 14px!important}
  .consent{width:calc(100% - 20px)!important;right:10px!important;bottom:10px!important;padding:28px 20px 20px!important;border:1px solid rgba(0,0,0,.16)!important;border-radius:var(--radius)!important}
  .consent>div{display:grid;grid-template-columns:1fr!important}
  .consent>div .text-button{width:100%;min-width:0}
}

@media(max-width:860px){
  .site-header{grid-template-columns:58px 58px!important;justify-content:space-between!important;width:calc(100% - 20px)!important;min-height:58px!important;padding:0!important;background:transparent!important;border:0!important}
  .site-header .brand,.site-header .menu-toggle{width:58px!important;height:58px!important;min-height:58px!important;padding:0!important;display:grid!important;place-items:center!important;border:1px solid rgba(0,0,0,.12)!important;border-radius:var(--radius)!important;background:#fff!important}
  .site-header .brand{display:flex!important;align-items:center!important;justify-content:center!important}
  .site-header .brand img{width:34px!important;min-width:34px!important;margin:0!important;transform:translate(.5px,-1px)!important}
  .site-header .menu-toggle{color:var(--gold)!important}
  .site-header .menu-toggle span,.site-header .menu-toggle span::after{width:26px!important;height:2px!important;margin:0!important;border-radius:2px;background:currentColor!important;transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .16s ease!important}
  .site-header .menu-toggle span{position:relative!important;transform:translateY(-4px)!important}
  .site-header .menu-toggle span::after{position:absolute!important;left:0!important;top:0!important;transform:translateY(8px)!important}
  .site-header .menu-toggle[aria-expanded="true"] span{transform:translateY(0) rotate(45deg)!important}
  .site-header .menu-toggle[aria-expanded="true"] span::after{transform:rotate(-90deg)!important}
  .nav-links,.nav-links.is-open{top:78px!important}
}

@media(hover:none),(pointer:coarse){
  .reference-arrow,.video-arrow{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  .reference-row-shell,.reference-row-shell.is-row-entering{animation:none!important;transition:none!important}
}

/* 2026-09-14: wärmere Neutralpalette, kompakte Hero-CTAs und neue Testimonial-Steuerung */
:root{
  --gold:#e4512e;
  --black:#0e0d0c;
  --graphite:#171513;
  --paper:#f2f0ec;
  --muted:#aaa59e;
  --line:rgba(242,240,236,.14);
}

html,body{background:#0e0d0c;color:#f2f0ec}
body{color-scheme:dark}
.hero{background:#0e0d0c}
.sound{background:linear-gradient(180deg,#0e0d0c 0%,#161311 52%,#0f0e0d 100%)!important}
.process{background:linear-gradient(180deg,#11100f 0%,#181513 52%,#100f0e 100%)!important}
.about{background:linear-gradient(180deg,#171513 0%,#11100f 100%)!important}
.pricing{background:linear-gradient(180deg,#100f0e 0%,#181513 52%,#0f0e0d 100%)!important}
.footer{background:#0e0d0c!important}
.services,.testimonials,.faq{background:linear-gradient(180deg,#f2f0ec 0%,#ebe8e3 100%)!important;color:#171513!important}
.contact-form,.consent{background:rgba(242,240,236,.94)!important;color:#171513!important}

.hero h1,.hero-identity>p,
.sound h2,.process h2,.about h2,.pricing h2,.contact h2,
.service-panel h3,.process-grid h3,.mix-heading h3,.price-list strong,
.testimonial-card blockquote{color:#f2f0ec}
.services h2,.testimonials h2,.faq h2,
.services .service-name h3,.faq-list summary,.faq-list summary b{color:#171513!important}
.intro .accent,.services .accent,.process .accent,.testimonial-title span,
.pricing .accent,.faq .accent,.service-name span,.eyebrow,.process-grid li>span,
.price-list h3,.testimonial-card strong{color:var(--gold)!important}

.brand img,.hero-logo-glitch>img{
  filter:hue-rotate(-13deg) saturate(.96) brightness(1.08)!important;
}
.nav-links .nav-cta,.submit-button,.spotify-consent-prompt button{
  border-color:var(--gold)!important;
  background:var(--gold)!important;
}

.hero-actions{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:clamp(22px,4.2vh,48px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,190px));
  gap:10px;
  width:min(calc(100% - 32px),390px);
  transform:translateX(-50%);
  opacity:0;
  animation:hero-actions-arrive .8s cubic-bezier(.2,.75,.2,1) 2.15s forwards;
}
.hero-action{
  min-width:0;
  min-height:38px;
  padding:8px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(242,240,236,.62);
  border-radius:var(--radius);
  background:rgba(242,240,236,.94);
  color:#171513;
  font-size:clamp(.58rem,.72vw,.68rem);
  font-weight:750;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.hero-action:hover,.hero-action:focus-visible{
  border-color:var(--gold);
  background:var(--gold);
  color:#f2f0ec;
  transform:translateY(-1px);
}

.testimonial-controls{justify-content:center!important;gap:10px}
.testimonial-arrow{
  width:40px!important;
  height:40px!important;
  min-width:40px;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(23,21,19,.18)!important;
  border-radius:12px!important;
  background:rgba(23,21,19,.08)!important;
  color:#171513!important;
  font-size:1rem!important;
  line-height:1!important;
  box-shadow:none!important;
}
.testimonial-arrow:hover,.testimonial-arrow:focus-visible{
  border-color:var(--gold)!important;
  background:var(--gold)!important;
  color:#f2f0ec!important;
}

@keyframes hero-actions-arrive{
  from{opacity:0;transform:translate(-50%,10px);filter:blur(3px)}
  to{opacity:1;transform:translate(-50%,0);filter:none}
}

@media(max-width:560px){
  .hero-actions{
    bottom:max(18px,env(safe-area-inset-bottom));
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    width:calc(100% - 28px);
  }
  .hero-action{min-height:36px;padding:7px 8px;font-size:clamp(.52rem,2.5vw,.62rem);white-space:normal}
  .testimonial-arrow{width:36px!important;height:36px!important;min-width:36px}
}

@media(prefers-reduced-motion:reduce){
  .hero-actions{opacity:1;animation:none!important}
}

/* 2026-09-14 section order, compact hero and continuous page ending. */
main{display:flex;flex-direction:column}
.hero{order:1;margin-bottom:0!important}
.services{order:2}
.sound{order:3}
.process{order:4}
.about{order:5}
.testimonials{order:6}
.pricing{order:7}
.faq{order:8}
.contact{order:9}

/* The hero ends decisively; the next section starts without a transitional rule. */
.hero+.sound{border:0!important}
.hero-actions .hero-action{border-radius:var(--radius)!important}

/* Leistungen retain their dark image overlays and therefore need light titles. */
.services .service-name h3{color:#f2f0ec!important}

/* Ablauf now uses the same light editorial container language as Leistungen. */
.process{
  margin:14px!important;
  padding:clamp(66px,7vw,105px) var(--gutter)!important;
  border:0!important;
  border-radius:var(--radius)!important;
  background:linear-gradient(180deg,#f2f0ec 0%,#ebe8e3 100%)!important;
  color:#171513!important;
  overflow:hidden;
}
.process::before,.process::after{display:none!important}
.process .section-title h2,.process-grid h3{color:#171513!important}
.process .accent,.process-grid li>span{color:var(--gold)!important}
.process-grid li{
  border:1px solid rgba(23,21,19,.1)!important;
  background:#dfdcd7!important;
  color:#171513!important;
  box-shadow:none!important;
}
.process-grid p{color:#5f5b56!important}

/* Testimonials live on a light surface; all quote copy stays dark. */
.testimonials .testimonial-title h2,
.testimonial-card blockquote,
.testimonial-card p{color:#171513!important}
.testimonial-card p{opacity:.72}

/* The wallpaper dissolves into the footer instead of ending on a visible edge. */
.contact{
  margin-bottom:0!important;
  border-radius:var(--radius) var(--radius) 0 0!important;
  background:#0e0d0c!important;
}
.contact-backdrop{border-radius:var(--radius) var(--radius) 0 0!important}
.contact-backdrop::after{
  background:
    linear-gradient(180deg,rgba(14,13,12,0) 54%,rgba(14,13,12,.42) 74%,#0e0d0c 100%),
    linear-gradient(90deg,rgba(14,13,12,.8),rgba(14,13,12,.2) 54%,rgba(14,13,12,.45))!important;
}
.footer{margin:0!important;border:0!important;background:#0e0d0c!important}

@media(min-width:1100px){
  .hero-logo-glitch{width:clamp(138px,14.5vw,225px);margin-bottom:18px}
  .hero h1{font-size:clamp(2.1rem,5.55vw,5.65rem)}
  .hero-identity>p{margin-top:14px}
  .hero-identity>span{margin-top:20px}
}

@media(max-width:760px){
  .process{margin:10px!important;padding:58px 16px!important}
}

/* 2026-09-14 continuous references/process/about backdrop. */
main{
  background-color:#141311;
}
.sound,.process,.about{
  background-color:#141311!important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0))!important;
}

/* The white Ablauf card sits on the same noisy substrate as the neighbouring sections. */
.process{
  position:relative;
  isolation:isolate;
  margin:0!important;
  border-radius:0!important;
  color:#171513!important;
  overflow:hidden;
}
.process::before{
  content:"";
  display:block!important;
  position:absolute;
  inset:14px;
  z-index:1;
  border-radius:var(--radius);
  background:linear-gradient(180deg,#f2f0ec 0%,#ebe8e3 100%);
  pointer-events:none;
}
.process::after{
  content:"";
  display:block!important;
  position:absolute;
  inset:0;
  z-index:0!important;
  background-image:url("assets/film-noise.png")!important;
  background-repeat:repeat!important;
  background-size:165px 165px!important;
  opacity:.18!important;
  filter:contrast(1.9)!important;
  mix-blend-mode:screen!important;
  pointer-events:none;
  animation:film-noise-shift .24s steps(2,end) infinite;
}
.process>.section-title,.process>.process-grid{position:relative;z-index:2}

/* Continue the same texture through the About section without a colour seam. */
.about::after{
  content:"";
  display:block!important;
  position:absolute;
  inset:0;
  z-index:1;
  background-image:url("assets/film-noise.png")!important;
  background-repeat:repeat!important;
  background-size:165px 165px!important;
  opacity:.18!important;
  filter:contrast(1.9)!important;
  mix-blend-mode:screen!important;
  pointer-events:none;
  animation:film-noise-shift .24s steps(2,end) infinite;
}
.about>*{position:relative;z-index:2}

/* Force readable titles over every service image, including WebKit text fill. */
.services .service-row .service-panel .service-name h3{
  color:#f2f0ec!important;
  -webkit-text-fill-color:#f2f0ec!important;
  text-shadow:0 1px 16px rgba(0,0,0,.28);
}

@media(max-width:760px){
  .process{margin:0!important;padding:58px 26px!important}
  .process::before{inset:10px}
}

@media(prefers-reduced-motion:reduce){
  .process::after,.about::after{animation:none!important}
}

/* Full-bleed contact image: soft entrance below FAQ and complete fade into footer. */
.contact{
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:#0e0d0c!important;
  overflow:hidden;
}
.contact::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0 0 auto;
  height:clamp(80px,9vw,132px);
  pointer-events:none;
  background:linear-gradient(180deg,#141311 0%,rgba(20,19,17,.84) 22%,rgba(20,19,17,.32) 67%,transparent 100%)!important;
}
.contact-backdrop{
  inset:0!important;
  border-radius:0!important;
  background-color:#0e0d0c!important;
  background-size:cover!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
}
.contact-backdrop::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(14,13,12,.12) 0%,rgba(14,13,12,0) 32%,rgba(14,13,12,.12) 58%,rgba(14,13,12,.68) 82%,#0e0d0c 100%),
    linear-gradient(90deg,rgba(14,13,12,.7),rgba(14,13,12,.16) 52%,rgba(14,13,12,.55))!important;
}
.footer{
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:#0e0d0c!important;
}

/* Responsive editorial rhythm: iPad-sized screens must never inherit the
   wide two-column intro or unbreakable pricing headline. */
.intro-copy,
.pricing>.section-title{
  box-sizing:border-box;
  width:min(100%,var(--content-max));
  margin-left:auto;
  margin-right:auto;
}
.intro-copy>*{min-width:0}
.pricing .section-title .accent{
  display:inline!important;
  white-space:normal!important;
}

@media(max-width:900px){
  :root{--compact-section-heading:clamp(2.7rem,7.3vw,4.1rem)}
  .intro-copy{
    grid-template-columns:minmax(0,1fr)!important;
    gap:clamp(26px,5vw,42px)!important;
    align-items:start!important;
  }
  .intro h2,
  .sound h2,
  .services .section-title h2,
  .process .section-title h2,
  .about h2,
  .testimonial-title h2,
  .pricing .section-title h2,
  .faq-layout h2,
  .contact h2{
    max-width:100%;
    font-size:var(--compact-section-heading)!important;
    line-height:.94!important;
    overflow-wrap:normal;
    text-wrap:balance;
  }
  .intro-copy>div{min-width:0;max-width:680px}
  .intro-copy>div>p{max-width:58ch}
  .intro-actions{
    width:min(100%,560px)!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  .intro .text-button{
    box-sizing:border-box;
    width:100%;
    min-width:0!important;
    padding-inline:14px!important;
    white-space:normal;
    text-align:center;
  }
  .pricing>.section-title{max-width:var(--content-max)!important}
  .pricing .section-title h2{width:100%;max-width:100%}
}

@media(max-width:540px){
  :root{--compact-section-heading:clamp(2.15rem,10.4vw,3.15rem)}
  .intro-actions{grid-template-columns:minmax(0,1fr)!important}
}

/* One continuous-looking grain language for every genuinely dark surface.
   The edge mask dissolves the texture before a neighbouring light section,
   avoiding a visible rectangular seam. */
.sound::after,
.process::after,
.about::after,
.pricing::after,
.contact::after,
.footer::after{
  opacity:.18!important;
  background-size:165px 165px!important;
  filter:contrast(1.9)!important;
  mix-blend-mode:screen!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 42px,#000 calc(100% - 42px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 42px,#000 calc(100% - 42px),transparent 100%);
}
.about{position:relative;isolation:isolate}
.about>*{position:relative;z-index:2}
.hero-noise{opacity:.18!important;background-size:165px 165px!important;filter:contrast(1.9)!important}

@media(max-width:700px){
  .sound::after,.process::after,.about::after,.pricing::after,.contact::after,.footer::after{
    opacity:.2!important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
  }
}

/* Full-bleed, silent hero loop. The existing overlay remains above the video. */
.hero-image .hero-background-video{
  width:100%!important;
  height:100%!important;
  min-width:100%;
  min-height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  margin:0!important;
  transform:none!important;
  filter:none!important;
}

/* Hero identity: a strong one-time signal acquisition followed by a restrained logo-only loop. */
.hero-brand-animation{opacity:1!important;transform:none!important}
.hero-logo-glitch{
  position:relative;
  width:clamp(150px,17vw,265px);
  margin:0 auto 22px;
  aspect-ratio:211/203;
  isolation:isolate;
}
.hero-logo-glitch>img{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  max-width:none;
  margin:0!important;
  object-fit:contain;
  pointer-events:none;
}
.hero-logo-intro{z-index:2;opacity:1;animation:hero-logo-intro-finish .01s steps(1,end) 1.2s forwards}
.hero-logo-loop{z-index:1;opacity:0;animation:hero-logo-loop-begin .01s steps(1,end) 1.2s forwards}

.hero-text-glitch{position:relative;opacity:0;will-change:transform,opacity,clip-path,filter}
.hero-text-glitch::before,.hero-text-glitch::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  opacity:0;
  color:inherit;
  pointer-events:none;
}
.hero-name-glitch{animation:hero-copy-arrive-name .78s steps(1,end) 1.03s forwards}
.hero-name-glitch::before{animation:hero-copy-echo-left .78s steps(1,end) 1.03s both}
.hero-name-glitch::after{animation:hero-copy-echo-right .78s steps(1,end) 1.03s both}
.hero-role-glitch{animation:hero-copy-arrive-role .66s steps(1,end) 1.34s forwards}
.hero-role-glitch::before{animation:hero-copy-echo-left .66s steps(1,end) 1.34s both}
.hero-role-glitch::after{animation:hero-copy-echo-right .66s steps(1,end) 1.34s both}
.hero-services-glitch{animation:hero-copy-arrive-services .7s steps(1,end) 1.56s forwards}
.hero-services-glitch::before{animation:hero-copy-echo-left .7s steps(1,end) 1.56s both}
.hero-services-glitch::after{animation:hero-copy-echo-right .7s steps(1,end) 1.56s both}

/* Fine moving television grain above dark surfaces, but below their content. */
.hero-noise,
.sound::after,.process::after,.pricing::after,.contact::after,.footer::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background-image:url("assets/film-noise.png");
  background-repeat:repeat;
  background-size:190px 190px;
  opacity:.13;
  filter:contrast(1.65);
  mix-blend-mode:screen;
  pointer-events:none;
  animation:film-noise-shift .24s steps(2,end) infinite;
}
.hero-noise{z-index:1;opacity:.18}
.hero-identity{z-index:2}
.sound,.process,.pricing,.contact,.footer{position:relative;isolation:isolate}
.sound>*:not(.hero-noise),.process>*,.pricing>*,.contact>*,.footer>*{position:relative;z-index:2}
.contact-backdrop{position:absolute!important;z-index:0!important}

@keyframes hero-logo-intro-finish{to{opacity:0;visibility:hidden}}
@keyframes hero-logo-loop-begin{to{opacity:1}}

@keyframes hero-logo-lock-in{
  0%,58%{opacity:0;transform:translate3d(0,0,0)}
  59%{opacity:.22;transform:translate3d(-13px,2px,0)}
  66%{opacity:.58;transform:translate3d(8px,-1px,0)}
  73%{opacity:.18;transform:translate3d(-5px,0,0)}
  78%{opacity:.84;transform:translate3d(3px,0,0)}
  84%{opacity:.42;transform:translate3d(-2px,1px,0)}
  89%,100%{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes hero-logo-build-a{
  0%,5%{opacity:0;clip-path:inset(0 0 100% 0);transform:translate3d(90px,0,0) skewX(13deg)}
  9%{opacity:.7;clip-path:polygon(0 8%,100% 8%,100% 12%,0 12%,0 30%,100% 30%,100% 34%,0 34%,0 67%,100% 67%,100% 71%,0 71%);transform:translate3d(-72px,0,0)}
  16%{opacity:.36;clip-path:inset(18% 0 58% 0);transform:translate3d(106px,-3px,0)}
  25%{opacity:.9;clip-path:polygon(0 2%,100% 2%,100% 18%,0 18%,0 43%,100% 43%,100% 49%,0 49%,0 78%,100% 78%,100% 86%,0 86%);transform:translate3d(-47px,1px,0)}
  34%{opacity:.55;clip-path:inset(60% 0 17% 0);transform:translate3d(69px,0,0)}
  46%{opacity:.95;clip-path:polygon(0 0,100% 0,100% 7%,0 7%,0 14%,100% 14%,100% 24%,0 24%,0 39%,100% 39%,100% 51%,0 51%,0 64%,100% 64%,100% 82%,0 82%);transform:translate3d(-25px,0,0)}
  60%{opacity:.68;clip-path:inset(7% 0 4% 0);transform:translate3d(14px,0,0)}
  72%{opacity:.9;clip-path:inset(0);transform:translate3d(-5px,0,0)}
  82%{opacity:.25;clip-path:inset(31% 0 48% 0);transform:translate3d(21px,0,0)}
  89%,100%{opacity:0;clip-path:inset(0);transform:none}
}
@keyframes hero-logo-build-b{
  0%,11%{opacity:0;clip-path:inset(100% 0 0 0)}
  15%{opacity:.52;clip-path:polygon(0 20%,100% 20%,100% 22%,0 22%,0 51%,100% 51%,100% 54%,0 54%,0 90%,100% 90%,100% 93%,0 93%);transform:translate3d(82px,2px,0);filter:brightness(1.8)}
  22%{opacity:.18;clip-path:inset(3% 0 72% 0);transform:translate3d(-117px,0,0)}
  31%{opacity:.72;clip-path:polygon(0 10%,100% 10%,100% 28%,0 28%,0 55%,100% 55%,100% 62%,0 62%,0 88%,100% 88%,100% 96%,0 96%);transform:translate3d(42px,-2px,0)}
  43%{opacity:.38;clip-path:inset(72% 0 4% 0);transform:translate3d(-65px,0,0)}
  55%{opacity:.82;clip-path:inset(12% 0 7% 0);transform:translate3d(11px,0,0)}
  69%{opacity:.45;clip-path:inset(44% 0 34% 0);transform:translate3d(-17px,1px,0)}
  79%{opacity:.7;clip-path:inset(0);transform:translate3d(4px,0,0)}
  88%,100%{opacity:0;transform:none}
}
@keyframes hero-logo-build-c{
  0%,18%{opacity:0}
  21%{opacity:.5;clip-path:inset(45% 0 50% 0);transform:translate3d(-128px,0,0) scaleX(1.08)}
  29%{opacity:.85;clip-path:inset(8% 0 86% 0);transform:translate3d(74px,0,0)}
  37%{opacity:.3;clip-path:inset(83% 0 10% 0);transform:translate3d(-88px,0,0)}
  49%{opacity:.74;clip-path:polygon(0 27%,100% 27%,100% 31%,0 31%,0 58%,100% 58%,100% 62%,0 62%,0 74%,100% 74%,100% 77%,0 77%);transform:translate3d(36px,0,0)}
  62%{opacity:.26;clip-path:inset(0 0 92% 0);transform:translate3d(-42px,0,0)}
  77%{opacity:.65;clip-path:inset(52% 0 37% 0);transform:translate3d(9px,0,0)}
  87%,100%{opacity:0;transform:none}
}
@keyframes hero-logo-drift{
  0%,19%,21%,47%,49%,73%,75%,100%{transform:translate3d(0,0,0);filter:none}
  19.2%{transform:translate3d(-1px,0,0);filter:brightness(1.08)}
  19.6%{transform:translate3d(2px,0,0)}
  47.3%{transform:translate3d(1px,-1px,0)}
  73.4%{transform:translate3d(-2px,0,0);filter:brightness(1.12)}
}
@keyframes hero-logo-loop-a{
  0%,31%,31.8%,64%,64.7%,87%,87.8%,100%{opacity:0;transform:none}
  31.2%{opacity:.5;clip-path:inset(19% 0 70% 0);transform:translate3d(10px,0,0)}
  31.5%{opacity:.24;clip-path:inset(64% 0 27% 0);transform:translate3d(-7px,0,0)}
  64.2%{opacity:.42;clip-path:polygon(0 34%,100% 34%,100% 38%,0 38%,0 61%,100% 61%,100% 65%,0 65%);transform:translate3d(-9px,0,0)}
  87.3%{opacity:.34;clip-path:inset(77% 0 16% 0);transform:translate3d(7px,0,0)}
}
@keyframes hero-logo-loop-b{
  0%,23%,23.7%,56%,56.8%,91%,91.6%,100%{opacity:0;transform:none}
  23.2%{opacity:.32;clip-path:inset(4% 0 89% 0);transform:translate3d(-12px,0,0)}
  56.3%{opacity:.38;clip-path:inset(46% 0 43% 0);transform:translate3d(8px,1px,0)}
  91.2%{opacity:.25;clip-path:inset(26% 0 67% 0);transform:translate3d(-6px,0,0)}
}
@keyframes hero-logo-loop-c{
  0%,39%,39.8%,78%,78.7%,100%{opacity:0;transform:none}
  39.2%{opacity:.28;clip-path:polygon(0 18%,100% 18%,100% 20%,0 20%,0 70%,100% 70%,100% 72%,0 72%);transform:translate3d(6px,0,0)}
  78.3%{opacity:.3;clip-path:inset(83% 0 11% 0);transform:translate3d(-8px,0,0)}
}
@keyframes hero-copy-arrive-name{
  0%,8%{opacity:0;transform:translate3d(34px,0,0);clip-path:inset(0 100% 0 0);filter:blur(4px)}
  18%{opacity:.45;transform:translate3d(-17px,0,0);clip-path:inset(0 38% 0 0)}
  29%{opacity:.12;transform:translate3d(12px,0,0);clip-path:inset(43% 0 35% 0)}
  42%{opacity:.82;transform:translate3d(-5px,0,0);clip-path:inset(0 8% 0 0);filter:blur(0)}
  55%{opacity:.35;transform:translate3d(3px,0,0);clip-path:inset(67% 0 18% 0)}
  68%,100%{opacity:1;transform:none;clip-path:inset(0);filter:none}
}
@keyframes hero-copy-arrive-role{
  0%,14%{opacity:0;transform:translate3d(-22px,0,0);clip-path:inset(0 0 0 100%)}
  25%{opacity:.6;transform:translate3d(9px,0,0);clip-path:inset(0 0 0 28%)}
  39%{opacity:.18;transform:translate3d(-5px,0,0);clip-path:inset(37% 0 42% 0)}
  55%{opacity:.86;transform:translate3d(2px,0,0);clip-path:inset(0)}
  69%,100%{opacity:1;transform:none;clip-path:inset(0)}
}
@keyframes hero-copy-arrive-services{
  0%,10%{opacity:0;transform:translate3d(0,8px,0);clip-path:inset(100% 0 0)}
  24%{opacity:.32;transform:translate3d(15px,-2px,0);clip-path:inset(0 55% 0 0)}
  40%{opacity:.78;transform:translate3d(-7px,0,0);clip-path:inset(0 12% 0 0)}
  53%{opacity:.24;transform:translate3d(3px,0,0);clip-path:inset(48% 0 39% 0)}
  68%,100%{opacity:1;transform:none;clip-path:inset(0)}
}
@keyframes hero-copy-echo-left{
  0%,12%,74%,100%{opacity:0}
  18%{opacity:.3;transform:translate3d(-13px,0,0);clip-path:inset(14% 0 65% 0)}
  34%{opacity:.2;transform:translate3d(8px,0,0);clip-path:inset(58% 0 24% 0)}
  52%{opacity:.26;transform:translate3d(-5px,0,0);clip-path:inset(36% 0 48% 0)}
}
@keyframes hero-copy-echo-right{
  0%,20%,78%,100%{opacity:0}
  25%{opacity:.22;transform:translate3d(11px,0,0);clip-path:inset(72% 0 15% 0)}
  45%{opacity:.18;transform:translate3d(-7px,0,0);clip-path:inset(7% 0 81% 0)}
  62%{opacity:.2;transform:translate3d(4px,0,0);clip-path:inset(47% 0 39% 0)}
}
@keyframes film-noise-shift{
  0%{background-position:0 0}
  20%{background-position:-37px 19px}
  40%{background-position:23px -41px}
  60%{background-position:51px 27px}
  80%{background-position:-18px -53px}
  100%{background-position:0 0}
}

@media(max-width:680px){
  .hero-logo-glitch{width:clamp(120px,35vw,170px)}
}
@media(prefers-reduced-motion:reduce){
  .hero-logo-intro,.hero-logo-loop,.hero-text-glitch,.hero-text-glitch::before,.hero-text-glitch::after,.hero-noise,.sound::after,.process::after,.about::after,.pricing::after,.contact::after,.footer::after{animation:none!important}
  .hero-logo-intro{display:none!important}
  .hero-logo-loop,.hero-text-glitch{opacity:1!important;transform:none!important;clip-path:none!important}
  .hero-text-glitch::before,.hero-text-glitch::after{display:none!important}
}

/* 2026-09-14 final palette and hero action pass. Kept last deliberately. */
:root{
  --gold:#e4512e;
  --black:#0e0d0c;
  --graphite:#171513;
  --paper:#f2f0ec;
  --muted:#aaa59e;
  --line:rgba(242,240,236,.14);
}

html,body{background:#0e0d0c;color:#f2f0ec}
body{color-scheme:dark}
.hero{background:#0e0d0c}
.sound{background:linear-gradient(180deg,#0e0d0c 0%,#161311 52%,#0f0e0d 100%)!important}
.process{background:linear-gradient(180deg,#11100f 0%,#181513 52%,#100f0e 100%)!important}
.about{background:linear-gradient(180deg,#171513 0%,#11100f 100%)!important}
.pricing{background:linear-gradient(180deg,#100f0e 0%,#181513 52%,#0f0e0d 100%)!important}
.footer{background:#0e0d0c!important}
.services,.testimonials,.faq{
  background:linear-gradient(180deg,#f2f0ec 0%,#ebe8e3 100%)!important;
  color:#171513!important;
}
.contact-form,.consent{background:rgba(242,240,236,.94)!important;color:#171513!important}

.hero h1,.hero-identity>p,
.sound h2,.process h2,.about h2,.pricing h2,.contact h2,
.service-panel h3,.process-grid h3,.mix-heading h3,.price-list strong,
.testimonial-card blockquote{color:#f2f0ec}
.services h2,.testimonials h2,.faq h2,
.services .service-name h3,.faq-list summary,.faq-list summary b{color:#171513!important}
.services .accent,.process .accent,.testimonial-title span,
.pricing .accent,.faq .accent,.service-name span,.eyebrow,.process-grid li>span,
.price-list h3,.testimonial-card strong,.sound-head .accent,.about .accent,.contact .accent{
  color:var(--gold)!important;
}

/* The source assets stay untouched; this rotates their original red only slightly toward orange. */
.brand img,.hero-logo-glitch>img{
  filter:hue-rotate(24deg) saturate(.94) brightness(1.06)!important;
}
.nav-links .nav-cta,.submit-button,.spotify-consent-prompt button,
.consent .text-button[data-consent="media"]{
  border-color:var(--gold)!important;
  background:var(--gold)!important;
  color:#f2f0ec!important;
}
.gallery-more{
  border-color:rgba(228,81,46,.72)!important;
  background:rgba(228,81,46,.08)!important;
  color:var(--gold)!important;
}
.gallery-more:hover,.gallery-more:focus-visible,
.reference-arrow:hover,.reference-arrow:focus-visible,
.video-arrow:hover,.video-arrow:focus-visible{
  border-color:var(--gold)!important;
  background:var(--gold)!important;
  color:#f2f0ec!important;
}

.hero-actions{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:clamp(22px,4.2vh,48px);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,190px));
  gap:10px;
  width:min(calc(100% - 32px),390px);
  transform:translateX(-50%);
  opacity:0;
  animation:hero-actions-arrive .8s cubic-bezier(.2,.75,.2,1) 2.15s forwards;
}
.hero-action{
  min-width:0;
  min-height:38px;
  padding:8px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(242,240,236,.62);
  border-radius:var(--radius);
  background:rgba(242,240,236,.94);
  color:#171513;
  font-size:clamp(.58rem,.72vw,.68rem);
  font-weight:750;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.hero-action:hover,.hero-action:focus-visible{
  border-color:var(--gold);
  background:var(--gold);
  color:#f2f0ec;
  transform:translateY(-1px);
}

.testimonial-controls{justify-content:center!important;gap:10px}
.testimonial-arrow{
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(23,21,19,.18)!important;
  border-radius:12px!important;
  background:rgba(23,21,19,.08)!important;
  color:#171513!important;
  font-size:1rem!important;
  line-height:1!important;
  box-shadow:none!important;
}
.testimonial-arrow:hover,.testimonial-arrow:focus-visible{
  border-color:var(--gold)!important;
  background:var(--gold)!important;
  color:#f2f0ec!important;
}

@keyframes hero-actions-arrive{
  from{opacity:0;transform:translate(-50%,10px);filter:blur(3px)}
  to{opacity:1;transform:translate(-50%,0);filter:none}
}

@media(max-width:560px){
  .hero-actions{
    bottom:max(18px,env(safe-area-inset-bottom));
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    width:calc(100% - 28px);
  }
  .hero-action{min-height:36px;padding:7px 8px;font-size:clamp(.52rem,2.5vw,.62rem);white-space:normal}
  .testimonial-arrow{width:36px!important;height:36px!important;min-width:36px!important}
}

@media(prefers-reduced-motion:reduce){
  .hero-actions{opacity:1;animation:none!important}
}