/*
  VIZSITE exp01 | Signal / Substance
  Isolated visual-experiment layer on top of Bigmouth + Andrew V36.2.
  Important: no changes to audio, splash video, SEO, routing, theme persistence,
  forms, original hero artwork or private editor. Delete this link and the
  vz-hero-signal / vz-card-image spans to restore the exact V36.2 design.
*/
:root{
  --vz-red:#E11120;
  --vz-orange:#FE750F;
  --vz-accent:linear-gradient(96deg,#BB0127 0%,#E11120 34%,#FC3B14 69%,#FE750F 100%);
  --vz-background:#ffffff;
  --vz-paper:#f8f7f4;
  --vz-ink:#141317;
  --vz-dim:#655f64;
  --vz-border:#dfdcd9;
  --vz-card:#fff;
  --vz-accent-bg:#fff2ea;
  --vz-shadow:0 24px 74px rgba(14,10,16,.055);
  --vz-display:Manrope,'DM Sans',Arial,sans-serif;
}
html[data-theme="dark"]{
  --vz-background:#101013;
  --vz-paper:#17171b;
  --vz-ink:#f6f4f3;
  --vz-dim:#b7b0b7;
  --vz-border:#38353b;
  --vz-card:#1e1e23;
  --vz-accent-bg:#302123;
  --vz-shadow:0 24px 74px rgba(0,0,0,.24);
}
body[data-vizsite="exp01"]{font-feature-settings:'kern' 1;color:var(--vz-ink)}
body[data-vizsite="exp01"] main{overflow:clip}
body[data-vizsite="exp01"] ::selection{background:#e84925;color:white}

/* Signature typography and editorial system, applied to all page families. */
body[data-vizsite="exp01"] h1,
body[data-vizsite="exp01"] h2,
body[data-vizsite="exp01"] h3{
  font-family:var(--vz-display);
  text-wrap:balance;
}
body[data-vizsite="exp01"] .hero h1,
body[data-vizsite="exp01"] .genre-hero h1,
body[data-vizsite="exp01"] .consult-hero h1{
  font-weight:850;
  letter-spacing:-.088em;
  line-height:.985;
}
body[data-vizsite="exp01"] .section-header h2,
body[data-vizsite="exp01"] .contact-section h2,
body[data-vizsite="exp01"] .genre-main h2,
body[data-vizsite="exp01"] .approaches-section h2,
body[data-vizsite="exp01"] .detail-feature h2,
body[data-vizsite="exp01"] .genre-cta h2{
  font-weight:830;
  letter-spacing:-.072em;
  line-height:1.075;
}
body[data-vizsite="exp01"] .section-label,
body[data-vizsite="exp01"] .eyebrow,
body[data-vizsite="exp01"] .section-mini{
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}
body[data-vizsite="exp01"] .section-label::before{
  content:'';
  display:inline-block;
  vertical-align:middle;
  width:23px;
  height:2px;
  background:var(--vz-accent);
  margin-right:13px;
  transform:translateY(-1px);
}
body[data-vizsite="exp01"] .section-header{padding-bottom:23px}
body[data-vizsite="exp01"] .section-header p,
body[data-vizsite="exp01"] .lead,
body[data-vizsite="exp01"] .hero-lead{font-size:clamp(15px,1.25vw,17px);line-height:1.78}

/* Header: fine architectural stroke, premium interaction finish. */
body[data-vizsite="exp01"] .site-header{
  border-bottom:1px solid var(--vz-border);
  box-shadow:0 3px 26px rgba(0,0,0,.025);
}
body[data-vizsite="exp01"] .site-header::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(225,17,32,.42) 50%,transparent 100%);
  opacity:.44;pointer-events:none;
}
body[data-vizsite="exp01"] .nav-links{letter-spacing:.095em}
body[data-vizsite="exp01"] .nav-links>a:not(.header-cta)::after{
  content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;
  background:var(--vz-accent);transform:scaleX(0);transform-origin:left;
  transition:transform .24s ease;
}
body[data-vizsite="exp01"] .nav-links>a:not(.header-cta):hover::after,
body[data-vizsite="exp01"] .nav-links>a[aria-current="page"]::after{transform:scaleX(1)}
body[data-vizsite="exp01"] .theme-toggle{box-shadow:0 0 0 3px rgba(225,17,32,.045)}
body[data-vizsite="exp01"] .header-cta{border-radius:3px;letter-spacing:.09em}

/* Site-wide CTAs: signature gradient sliver and firm architectural geometry. */
body[data-vizsite="exp01"] .button,
body[data-vizsite="exp01"] .header-cta{
  border-radius:3px;
  box-shadow:none;
  position:relative;
  overflow:hidden;
  transition:transform .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
body[data-vizsite="exp01"] .button:not(.ghost):not(.outline-white):not(.light):not(.secondary):hover,
body[data-vizsite="exp01"] .header-cta:hover{
  box-shadow:0 10px 28px rgba(225,17,32,.17);
}
body[data-vizsite="exp01"] .button:focus-visible,
body[data-vizsite="exp01"] .header-cta:focus-visible{outline:3px solid var(--vz-orange);outline-offset:4px}

/* Homepage and detail heroes: the approved original or V36 dark derivative
   remains untouched, including existing light/dark image switching. */
body[data-vizsite="exp01"] .hero.v20-hero,
body[data-vizsite="exp01"] .genre-hero.v20-hero,
body[data-vizsite="exp01"] .consult-hero.v20-hero{
  position:relative;
  border-bottom:1px solid var(--vz-border);
}
body[data-vizsite="exp01"] .hero.v20-hero::after,
body[data-vizsite="exp01"] .genre-hero.v20-hero::after,
body[data-vizsite="exp01"] .consult-hero.v20-hero::after{
  content:'';
  position:absolute;
  z-index:3;
  pointer-events:none;
  bottom:0;
  left:0;
  width:clamp(85px,19vw,320px);
  height:3px;
  background:var(--vz-accent);
}
body[data-vizsite="exp01"] .hero.v20-hero .hero-copy,
body[data-vizsite="exp01"] .genre-hero.v20-hero .genre-hero-grid>div:first-child{position:relative;z-index:2}
body[data-vizsite="exp01"] .hero.v20-hero h1{
  font-size:clamp(69px,7.8vw,118px);
  margin-bottom:14px;
}
body[data-vizsite="exp01"] .hero.v20-hero h1 em:after{height:4px;bottom:-7px;opacity:.85}
body[data-vizsite="exp01"] .genre-hero.v20-hero h1{
  font-size:clamp(54px,6.4vw,92px);
  max-width:750px;
}
body[data-vizsite="exp01"] .vz-hero-signal{
  display:block;
  position:relative;
  z-index:2;
  width:clamp(245px,35vw,420px);
  max-width:100%;
  margin:14px 0 6px;
  pointer-events:none;
}
body[data-vizsite="exp01"] .vz-hero-signal img{width:100%;height:auto;max-width:100%;display:block}
body[data-vizsite="exp01"] .hero.v20-hero .hero-lead{max-width:490px;margin-top:11px}
body[data-vizsite="exp01"] .hero.v20-hero .hero-bottom{
  border-top:1px solid var(--vz-border);
  padding-top:16px;
  letter-spacing:.13em;
}
body[data-vizsite="exp01"] .genre-hero.v20-hero .vz-hero-signal{
  width:clamp(215px,26vw,355px);
  margin:6px 0 14px;
}
body[data-vizsite="exp01"] .genre-hero.v20-hero .breadcrumbs,
body[data-vizsite="exp01"] .genre-hero.v20-hero .eyebrow{letter-spacing:.12em}
body[data-vizsite="exp01"] .genre-hero.v20-hero .lead{max-width:580px}
body[data-vizsite="exp01"] .consult-hero.v20-hero .vz-hero-signal{width:min(380px,80vw)}

/* Signal / Substance first-impression rhythm below the hero. */
body[data-vizsite="exp01"] .demo-section{
  background:#121215;
  position:relative;
  isolation:isolate;
}
body[data-vizsite="exp01"] .demo-section>.container{position:relative;z-index:2}
body[data-vizsite="exp01"] .demo-section::after{
  content:'';
  position:absolute;
  pointer-events:none;
  width:min(46vw,650px);
  height:220px;
  right:-6%;
  top:4%;
  background:url('viz-signal-ribbon-wide.svg') center / contain no-repeat;
  opacity:.17;
  z-index:0;
}
body[data-vizsite="exp01"] .studio-feature{
  border:1px solid #37333a;
  background:#1a191e;
  box-shadow:0 32px 85px rgba(0,0,0,.16);
  position:relative;
  overflow:hidden;
}
body[data-vizsite="exp01"] .studio-feature-graphic{position:relative}
body[data-vizsite="exp01"] .studio-feature-graphic::after{
  content:'';
  position:absolute;
  z-index:3;
  pointer-events:none;
  inset:auto 0 0;
  height:85px;
  background:url('viz-signal-ribbon.svg') center bottom / 100% auto no-repeat;
  opacity:.72;
}
body[data-vizsite="exp01"] .audio-panel{
  border:1px solid #3a373d;
  border-radius:7px;
  overflow:hidden;
  box-shadow:0 30px 75px #0003;
}
body[data-vizsite="exp01"] .audio-main{position:relative}
body[data-vizsite="exp01"] .audio-main::after{
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:3px;
  pointer-events:none;
  background:var(--vz-accent);
}
body[data-vizsite="exp01"] .demo-tab[aria-selected="true"],
body[data-vizsite="exp01"] .demo-tab.active{border-color:#ee6035}
body[data-vizsite="exp01"] .play-button{
  border-radius:50%;
  box-shadow:0 12px 24px rgba(240,57,29,.16);
}
body[data-vizsite="exp01"] .audition-callout{border:1px solid #494048;position:relative;overflow:hidden}
body[data-vizsite="exp01"] .audition-callout::before{
  content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--vz-accent);
}

/* Service and genre directory become visual editorial cards, using only
   existing, already-approved site images. Other cards remain intact. */
body[data-vizsite="exp01"] .genre-showcase{
  background:var(--vz-background);
  position:relative;
}
body[data-vizsite="exp01"] .genre-showcase>.container{position:relative;z-index:1}
body[data-vizsite="exp01"] .genre-showcase::before{
  content:'';position:absolute;right:0;top:0;width:min(32vw,440px);height:1px;
  background:var(--vz-accent);
}
body[data-vizsite="exp01"] .genre-grid{gap:16px}
body[data-vizsite="exp01"] .genre-grid>.genre-card:has(>.vz-card-image){
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:0;
  min-width:0;
  min-height:415px;
  background:var(--vz-card);
  border:1px solid var(--vz-border);
  border-radius:4px;
  box-shadow:var(--vz-shadow);
  overflow:hidden;
  isolation:isolate;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
body[data-vizsite="exp01"] .genre-grid>.genre-card:has(>.vz-card-image):hover{
  transform:translateY(-5px);
  border-color:#e86e42;
  box-shadow:0 25px 65px rgba(0,0,0,.13);
}
body[data-vizsite="exp01"] .genre-grid>.genre-card:has(>.vz-card-image)::after{
  top:170px;bottom:auto;
  width:100%;height:3px;
  background:var(--vz-accent);
  transform:none;
}
body[data-vizsite="exp01"] .vz-card-image{
  order:-2;
  display:block;
  position:relative;
  width:100%;
  height:173px;
  flex:0 0 173px;
  overflow:hidden;
  background:#1d1a1d;
}
body[data-vizsite="exp01"] .vz-card-image img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) contrast(1.03);
  transition:transform .5s cubic-bezier(.2,.75,.1,1),filter .5s;
}
body[data-vizsite="exp01"] .genre-grid>.genre-card:hover .vz-card-image img{transform:scale(1.05);filter:saturate(1.07) contrast(1.05)}
body[data-vizsite="exp01"] .genre-grid>.genre-card:has(>.vz-card-image)>.count{
  display:block;
  order:-1;
  margin:21px 23px 15px;
  color:#d64a29;
  font-size:10px;
  letter-spacing:.12em;
}
body[data-vizsite="exp01"] .genre-grid>.genre-card:has(>.vz-card-image)>div{
  padding:0 23px;
  flex:1;
  width:100%;
}
body[data-vizsite="exp01"] .genre-grid>.genre-card:has(>.vz-card-image) h3{
  font-size:clamp(22px,2.4vw,31px);
  line-height:1.17;
  letter-spacing:-.063em;
  color:var(--vz-ink);
}
body[data-vizsite="exp01"] .genre-grid>.genre-card:has(>.vz-card-image) p{color:var(--vz-dim);font-size:13px;line-height:1.65}
body[data-vizsite="exp01"] .genre-grid>.genre-card:has(>.vz-card-image)>.card-footer{
  margin:27px 23px 0;
  padding:13px 0 20px;
  border-top:1px solid var(--vz-border);
  color:var(--vz-ink);
}
body[data-vizsite="exp01"] .genre-grid>.genre-card:has(>.vz-card-image) .card-footer b{color:#ef552b}
body[data-vizsite="exp01"][data-brand="andrew"] .genre-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
body[data-vizsite="exp01"][data-brand="bigmouth"] .genre-grid:has(>.service-card){grid-template-columns:repeat(4,minmax(0,1fr))}

/* More tactile service architecture and audio-specific detail pages. */
body[data-vizsite="exp01"] .genre-main,
body[data-vizsite="exp01"] .value-section,
body[data-vizsite="exp01"] .process-section{background:var(--vz-background)}
body[data-vizsite="exp01"] .genre-main-grid{gap:9%}
body[data-vizsite="exp01"] .genre-main h2{position:relative}
body[data-vizsite="exp01"] .genre-main h2::after{
  content:'';display:block;margin:19px 0 0;width:96px;height:3px;background:var(--vz-accent)
}
body[data-vizsite="exp01"] .value-grid{gap:18px}
body[data-vizsite="exp01"] .value-item{
  border-top:2px solid var(--vz-border);
  padding-top:30px;
  position:relative;
}
body[data-vizsite="exp01"] .value-item::before{
  content:'';position:absolute;left:0;top:-2px;width:55px;height:2px;background:var(--vz-accent);
}
body[data-vizsite="exp01"] .value-item .number{color:#e75631;font-size:11px;letter-spacing:.16em}
body[data-vizsite="exp01"] .value-item h3{font-weight:850;letter-spacing:-.055em}
body[data-vizsite="exp01"] .process-section{position:relative}
body[data-vizsite="exp01"] .process-section::before{
  content:'';position:absolute;left:0;top:0;width:min(24vw,280px);height:1px;background:var(--vz-accent)
}
body[data-vizsite="exp01"] .approaches-section,
body[data-vizsite="exp01"] .studio-section{
  isolation:isolate;
  position:relative;
}
body[data-vizsite="exp01"] .approaches-section::after{
  content:'';position:absolute;z-index:0;pointer-events:none;right:-80px;bottom:-110px;
  width:min(56vw,650px);height:210px;
  background:url('viz-signal-ribbon-wide.svg') center/contain no-repeat;
  opacity:.12;
}
body[data-vizsite="exp01"] .approaches-section>.container,
body[data-vizsite="exp01"] .studio-section>.container{position:relative;z-index:1}
body[data-vizsite="exp01"] .detail-feature{border-top:1px solid var(--vz-border);border-bottom:1px solid var(--vz-border)}
body[data-vizsite="exp01"] .genre-faq,
body[data-vizsite="exp01"] .faq-section{background:var(--vz-paper)}
body[data-vizsite="exp01"] .faq-list details{border-color:var(--vz-border)}
body[data-vizsite="exp01"] .faq-list details[open]{border-left:2px solid #f45c30;padding-left:16px}
body[data-vizsite="exp01"] .testimonial-card,
body[data-vizsite="exp01"] .package-card,
body[data-vizsite="exp01"] .spec-card,
body[data-vizsite="exp01"] .partner-card,
body[data-vizsite="exp01"] .consult-topic{
  border:1px solid var(--vz-border);
  border-radius:4px;
  box-shadow:var(--vz-shadow);
  position:relative;
}
body[data-vizsite="exp01"] .testimonial-card::before,
body[data-vizsite="exp01"] .package-card::before{
  content:'';position:absolute;inset:0 auto auto 0;width:80px;height:3px;background:var(--vz-accent)
}

/* Conversion modules become recognisable destinations rather than plain bars. */
body[data-vizsite="exp01"] .genre-cta{
  isolation:isolate;
  position:relative;
  overflow:hidden;
  background:#131317;
  border-top:1px solid #38353b;
  border-bottom:3px solid #e84628;
}
body[data-vizsite="exp01"] .genre-cta::before{
  content:'';
  pointer-events:none;
  position:absolute;
  z-index:0;
  left:0;right:0;top:50%;
  height:min(25vw,250px);
  background:url('viz-signal-ribbon-wide.svg') center / min(1280px,100%) auto no-repeat;
  transform:translateY(-50%);
  opacity:.3;
}
body[data-vizsite="exp01"] .genre-cta>.container{position:relative;z-index:1}
body[data-vizsite="exp01"] .genre-cta h2{max-width:850px;text-shadow:0 1px 20px rgba(0,0,0,.55)}
body[data-vizsite="exp01"] .genre-cta .button{border:1px solid #fb552d;background:#f14222;color:white}
body[data-vizsite="exp01"] .contact-section{
  isolation:isolate;
  position:relative;
  border-top:1px solid var(--vz-border);
  background:var(--vz-background);
}
body[data-vizsite="exp01"] .contact-section::after{
  content:'';position:absolute;pointer-events:none;z-index:0;
  left:-8%;bottom:1%;width:min(52vw,670px);height:220px;
  background:url('viz-signal-ribbon-wide.svg') center/contain no-repeat;
  opacity:.10;
}
body[data-vizsite="exp01"] .contact-section>.container{position:relative;z-index:1}
body[data-vizsite="exp01"] .contact-form{
  border:1px solid var(--vz-border);
  border-top:3px solid #f05a2d;
  background:var(--vz-card);
  border-radius:5px;
  box-shadow:var(--vz-shadow);
}
body[data-vizsite="exp01"] .contact-form input,
body[data-vizsite="exp01"] .contact-form select,
body[data-vizsite="exp01"] .contact-form textarea{border-radius:3px}
body[data-vizsite="exp01"] .site-footer{border-top:1px solid var(--vz-border)}

/* Error pages retain their exact existing copy, drawings and response behaviour;
   these are visually subtle upgrades only. */
body[data-vizsite="exp01"] .err-shell{position:relative}
body[data-vizsite="exp01"] .err-shell::before{
  content:'';position:absolute;pointer-events:none;left:0;top:-13px;
  height:3px;width:100px;background:var(--vz-accent)
}

/* Small screens: keep the V36.2 responsive navigation and theme switch working. */
@media(max-width:1100px){
  body[data-vizsite="exp01"][data-brand="bigmouth"] .genre-grid:has(>.service-card){grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-vizsite="exp01"][data-brand="andrew"] .genre-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-vizsite="exp01"] .genre-grid>.genre-card:has(>.vz-card-image){min-height:395px}
}
@media(max-width:760px){
  body[data-vizsite="exp01"] .hero.v20-hero h1{font-size:clamp(52px,10.8vw,79px);line-height:1}
  body[data-vizsite="exp01"] .genre-hero.v20-hero h1{font-size:clamp(44px,10vw,70px)}
  body[data-vizsite="exp01"] .hero.v20-hero .hero-grid{min-height:0}
  body[data-vizsite="exp01"] .hero.v20-hero .hero-copy{padding:43px 0 48px}
  body[data-vizsite="exp01"] .vz-hero-signal{width:min(78vw,350px);margin-top:10px}
  body[data-vizsite="exp01"] .genre-hero.v20-hero .vz-hero-signal{width:min(70vw,310px)}
  body[data-vizsite="exp01"] .demo-section::after{width:80vw;opacity:.1}
  body[data-vizsite="exp01"] .section-header{padding-bottom:8px}
  body[data-vizsite="exp01"] .genre-cta::before{height:190px;opacity:.17}
  body[data-vizsite="exp01"] .contact-section::after{opacity:.06;width:90vw}
  body[data-vizsite="exp01"] .genre-grid>.genre-card:has(>.vz-card-image){min-height:370px}
}
@media(max-width:650px){
  body[data-vizsite="exp01"][data-brand="bigmouth"] .genre-grid:has(>.service-card),
  body[data-vizsite="exp01"][data-brand="andrew"] .genre-grid{grid-template-columns:1fr}
  body[data-vizsite="exp01"] .genre-grid>.genre-card:has(>.vz-card-image){min-height:0}
  body[data-vizsite="exp01"] .vz-card-image{height:188px;flex-basis:188px}
  body[data-vizsite="exp01"] .genre-grid>.genre-card:has(>.vz-card-image)::after{top:186px}
  body[data-vizsite="exp01"] .genre-grid>.genre-card:has(>.vz-card-image) h3{font-size:27px}
  body[data-vizsite="exp01"] .studio-feature-graphic::after{height:60px}
  body[data-vizsite="exp01"] .section-label::before{width:16px;margin-right:9px}
}
@media(prefers-reduced-motion:reduce){
  body[data-vizsite="exp01"] *,body[data-vizsite="exp01"] *::before,body[data-vizsite="exp01"] *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{
  body[data-vizsite="exp01"] .genre-cta::before,
  body[data-vizsite="exp01"] .contact-section::after,
  body[data-vizsite="exp01"] .demo-section::after{display:none}
  body[data-vizsite="exp01"] .genre-grid>.genre-card:has(>.vz-card-image){box-shadow:none;break-inside:avoid}
}