/* Final layout continuity layer. Keep this stylesheet after all legacy revisions. */
main{
  display:flex;
  flex-direction:column;
  background-color:#141311;
}
.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}

.sound,.process,.about{
  background-color:#141311!important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0))!important;
}

.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);
}

.process{
  position:relative;
  isolation:isolate;
  margin:0!important;
  padding:clamp(66px,7vw,105px) var(--gutter)!important;
  border: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}
.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}

.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}

.testimonials .testimonial-title h2,
.testimonial-card blockquote,
.testimonial-card p{color:#171513!important}
.testimonial-card p{opacity:.72}

.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;
}

.hero-actions .hero-action{border-radius:var(--radius)!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{padding:58px 26px!important}
  .process::before{inset:10px}
}
@media(prefers-reduced-motion:reduce){
  .process::after,.about::after{animation:none!important}
}

/* 2026-09-17: one continuous dark substrate; light sections stay deliberate cards. */
:root{--continuous-dark:#141311}
html,body,main{background:var(--continuous-dark)!important}
.hero,.sound,.process,.about,.pricing,.contact{
  background-color:var(--continuous-dark)!important;
  background-image:none!important;
}

/* Preserve the complete video composition and blend only its colour into the page. */
.hero-image .hero-background-video{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  transform:none!important;
}
.hero-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(20,19,17,.2),transparent 30%,transparent 70%,rgba(20,19,17,.2)),
    linear-gradient(180deg,rgba(20,19,17,0) 67%,rgba(20,19,17,.18) 76%,rgba(20,19,17,.58) 90%,var(--continuous-dark) 100%)!important;
  pointer-events:none;
}

/* Remove section-specific dark fades; their animated grain can continue uniformly. */
.sound,.about,.pricing{position:relative;isolation:isolate}
.sound::after,.about::after,.pricing::after{
  -webkit-mask-image:none!important;
  mask-image:none!important;
  opacity:.14!important;
  background-size:165px 165px!important;
}
.process::after{opacity:.14!important}

/* The light sections remain distinct rounded cards on the shared dark background. */
.services,.testimonials,.faq{
  background:linear-gradient(180deg,#f2f0ec 0%,#ebe8e3 100%)!important;
}
.process::before{
  background:linear-gradient(180deg,#f2f0ec 0%,#ebe8e3 100%)!important;
}

/* The final image owns the visual page ending; footer content sits inside it. */
.contact{
  min-height:820px!important;
  padding-bottom:190px!important;
  background:var(--continuous-dark)!important;
}
.contact::before{
  background:linear-gradient(180deg,var(--continuous-dark) 0%,rgba(20,19,17,.72) 30%,rgba(20,19,17,.18) 72%,transparent 100%)!important;
}
.contact-backdrop::after{
  background:
    linear-gradient(180deg,rgba(20,19,17,.16) 0%,rgba(20,19,17,0) 30%,rgba(20,19,17,.08) 54%,rgba(20,19,17,.66) 80%,var(--continuous-dark) 100%),
    linear-gradient(90deg,rgba(20,19,17,.58),rgba(20,19,17,.12) 52%,rgba(20,19,17,.48))!important;
}
.footer{
  position:relative!important;
  z-index:5!important;
  min-height:118px!important;
  margin:-118px 0 0!important;
  padding:30px var(--gutter)!important;
  background:transparent!important;
  color:#aaa59e!important;
}

@media(max-width:760px){
  .contact{min-height:760px!important;padding-bottom:180px!important}
  .footer{
    min-height:130px!important;
    margin:-130px 0 0!important;
    padding:24px 20px 28px!important;
  }
}

/* 2026-09-17: one continuous grain plane for every dark page surface.
   Section-local grain restarted at every boundary and created visible seams. */
main{
  position:relative;
  isolation:isolate;
  background-color:var(--continuous-dark)!important;
  background-image:none!important;
}
main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url("assets/film-noise.png");
  background-repeat:repeat;
  background-position:0 0;
  background-size:165px 165px;
  background-attachment:fixed;
  opacity:.14;
  filter:contrast(1.9);
  mix-blend-mode:screen;
  animation:film-noise-shift .24s steps(2,end) infinite;
}
main>section{
  position:relative;
  z-index:1;
}

/* Let the shared substrate show through instead of painting a new rectangle
   for every dark section. Light sections remain opaque cards/areas. */
.sound,.process,.about,.pricing{
  background-color:transparent!important;
  background-image:none!important;
}
.sound::after,.process::after,.about::after,.pricing::after{
  display:none!important;
  content:none!important;
}

/* The hero keeps grain above its video, but uses the same texture scale,
   strength and viewport anchoring as the shared page grain. */
.hero-noise{
  background-position:0 0!important;
  background-size:165px 165px!important;
  background-attachment:fixed!important;
  opacity:.14!important;
  filter:contrast(1.9)!important;
  mix-blend-mode:screen!important;
}

/* The final photograph has its own softly masked grain; it does not create
   a solid tonal strip at the point where the image fades in. */
.contact::after{
  display:block!important;
  background-position:0 0!important;
  background-size:165px 165px!important;
  background-attachment:fixed!important;
  opacity:.2!important;
  filter:contrast(2.1)!important;
  mix-blend-mode:screen!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 90%,transparent 100%)!important;
  mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 90%,transparent 100%)!important;
}

/* The FAQ substrate dissolves into the wallpaper instead of ending as a
   solid grey strip. The longer veil also hides the top edge of the image. */
.contact::before{
  display:block!important;
  inset:0 0 auto!important;
  height:clamp(170px,20vw,290px)!important;
  z-index:1!important;
  background:linear-gradient(
    180deg,
    var(--continuous-dark) 0%,
    rgba(20,19,17,.98) 18%,
    rgba(20,19,17,.82) 42%,
    rgba(20,19,17,.46) 68%,
    rgba(20,19,17,.16) 86%,
    transparent 100%
  )!important;
}

@media(prefers-reduced-motion:reduce){
  main::before{animation:none!important}
}

/* 2026-09-17: mobile navigation remains available while scrolling. */
@media(max-width:860px){
  .site-header.is-hidden{transform:none!important}
}

/* Multi-column tablet cards open on tap; mouse and trackpad hover is restored
   below for devices that actually provide a fine pointer. */
@media(min-width:761px) and (max-width:1099px){
  .service-name{
    position:relative;
    padding-right:58px!important;
  }
  .service-name::after{
    content:"";
    position:absolute;
    right:24px;
    top:50%;
    width:0;
    height:0;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-top:9px solid #fff;
    transform:translateY(-38%);
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));
    transition:transform .28s ease;
    pointer-events:none;
  }
  .service-row:hover .service-panel,
  .service-row:focus-within:not(.is-open) .service-panel{
    transform:translateY(calc(100% - 96px));
  }
  .service-row.is-open .service-panel{
    transform:translateY(0);
    animation:none!important;
  }
  .service-row.is-open .service-name::after{
    transform:translateY(-62%) rotate(180deg);
  }
  .service-row:first-child:not(.is-open) .service-panel{
    animation:service-tablet-peek 7s cubic-bezier(.2,.72,.25,1) 1.4s infinite;
  }
  .service-toggle:focus-visible{
    outline:2px solid #fff;
    outline-offset:-6px;
  }
}

@keyframes service-tablet-peek{
  0%,58%,100%{transform:translateY(calc(100% - 96px))}
  68%{transform:translateY(calc(100% - 134px))}
  76%{transform:translateY(calc(100% - 120px))}
  84%{transform:translateY(calc(100% - 134px))}
  92%{transform:translateY(calc(100% - 96px))}
}

/* Fade the contact photograph itself in, so the dark area around the FAQ card
   cannot end as a separate grey strip. The footer treatment stays untouched. */
.contact{
  background-color:transparent!important;
  background-image:none!important;
}
.contact::before{
  background:linear-gradient(
    180deg,
    transparent 0%,
    rgba(20,19,17,.42) 28%,
    rgba(20,19,17,.2) 64%,
    transparent 100%
  )!important;
}
.contact-backdrop{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.12) 8%,rgba(0,0,0,.52) 20%,#000 38%)!important;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.12) 8%,rgba(0,0,0,.52) 20%,#000 38%)!important;
}

@media(prefers-reduced-motion:reduce){
  .service-row:first-child .service-panel{animation:none!important}
}

/* 2026-09-17: unified light surfaces, clearer service affordances and an
   opaque contact card. The palette stays warm without reading as grey. */
:root{
  --surface-white:#f7f6f2;
  --surface-white-shade:#f1f0eb;
  --reference-surface:var(--surface-white);
}

.site-header{
  background:rgba(247,246,242,.96)!important;
}
.site-header .brand img{
  filter:hue-rotate(24deg) saturate(.94) brightness(1.06)!important;
}
.services,.testimonials,.faq,
.process::before{
  background:linear-gradient(180deg,var(--surface-white) 0%,var(--surface-white-shade) 100%)!important;
}
.reference-row .track-card,
.reference-row .track-credit,
.video-info,
.hero-action,
.consent{
  background:var(--surface-white)!important;
}
.contact-form{
  background:var(--surface-white)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.contact-form option{
  background:var(--surface-white)!important;
}

@media(max-width:860px){
  .site-header{background:transparent!important}
  .site-header .brand,
  .site-header .menu-toggle,
  .nav-links,
  .nav-links.is-open,
  .nav-links a{
    background:var(--surface-white)!important;
  }
}

/* Multi-column touch layouts keep the triangle as a discoverability cue.
   The one-column phone layout opens cards automatically and needs no icon. */
@media(min-width:761px) and (max-width:1099px){
  .service-name{
    position:relative;
    padding-right:58px!important;
  }
  .service-name::after{
    content:"";
    position:absolute;
    right:24px;
    top:50%;
    width:0;
    height:0;
    border-left:7px solid transparent;
    border-right:7px solid transparent;
    border-top:0;
    border-bottom:9px solid #fff;
    transform:translateY(-62%);
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.45));
    transition:transform .28s ease;
    pointer-events:none;
  }
  .service-row.is-open .service-name::after{
    transform:translateY(-38%) rotate(180deg);
  }
}

/* A fine pointer always gets direct hover behaviour, including tablets or
   smaller laptops used with a mouse/trackpad. */
@media(min-width:761px) and (max-width:1099px) and (hover:hover) and (pointer:fine){
  .service-row:hover .service-panel{
    transform:translateY(0);
    animation:none!important;
  }
}

@media(min-width:761px) and (max-width:1099px){
  .service-row:first-child:not(.is-open) .service-panel{
    animation:service-tablet-peek 4.6s cubic-bezier(.2,.72,.25,1) .7s infinite;
  }
}

@keyframes service-tablet-peek{
  0%,12%,52%,100%{transform:translateY(calc(100% - 96px))}
  22%{transform:translateY(calc(100% - 134px))}
  31%{transform:translateY(calc(100% - 120px))}
  40%{transform:translateY(calc(100% - 134px))}
}