/* Shared locks (home + inner pages)
   Loaded before page <style>; page rules may still set local layout. */

/* Opt out of browser “force dark” (Samsung Internet, Chrome Android, etc.) */
html,body{
  color-scheme:only light !important;
}
/* Keep page canvas light even if a UA still tries to invert */
html{background-color:#eef0f2 !important}
/* Logos/SVGs — don’t let auto-dark filters wash out brand marks */
.nav .brand img,
.menu-logo img,
.team-card-mark img,
.logo-primary,
.logo-mono{
  color-scheme:only light;
  forced-color-adjust:none;
  -webkit-filter:none !important;
  filter:none !important;
}

/* Voices — light wash */
.voices,
.voices .vo-head{color:var(--wash-ink)}
.voices .vo-head h2,
.voices h2{color:var(--wash-ink)}
.voices .vo-head h2 em,
.voices h2 em{color:var(--wash-em);font-style:italic}

/* Footer CTA — dark cinematic */
footer.site .foot-cta h2,
.inner footer.site .foot-cta h2,
.inner .foot-cta h2{
  font-family:var(--font-serif);
  font-size:clamp(2.2rem,5.5vw,4.4rem);
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--pearl);
  margin:1.2rem 0 2rem;
  text-shadow:0 2px 24px rgba(22,15,27,.75);
}
footer.site .foot-cta h2 em,
.inner footer.site .foot-cta h2 em,
.inner .foot-cta h2 em{
  color:var(--gold);
  font-style:italic;
}

/* Light-wash sections (ctasec is cinematic dark — excluded) */
.inner .voices h2,
.inner .vo-head h2,
.inner .numbers h2,
.inner .ilist-sec.dark h2{color:var(--wash-ink)}
.inner .voices h2 em,
.inner .vo-head h2 em,
.inner .numbers h2 em,
.inner .ilist-sec.dark h2 em{color:var(--wash-em);font-style:italic}
.inner footer.site h2{color:var(--pearl)}
.inner footer.site h2 em{color:var(--gold);font-style:italic}

/* Work with us — premium cinematic CTA (readable on photo) */
.ctasec,
.inner .ctasec{
  position:relative;
  overflow:hidden;
  background:var(--velvet);
  color:var(--pearl);
  padding:clamp(100px,17vh,200px) 0;
  text-align:center;
}
.ctasec .plate,
.inner .ctasec .plate{
  position:absolute;
  inset:-10% 0;
  z-index:0;
  will-change:transform;
  opacity:.52;
  filter:saturate(1.08) contrast(1.06);
}
.ctasec::before,
.inner .ctasec::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(58% 70% at 50% 42%,rgba(114,49,118,.32),transparent 68%),
    radial-gradient(42% 48% at 82% 18%,rgba(212,175,55,.14),transparent 62%);
}
.ctasec::after,
.inner .ctasec::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(23,21,26,.78) 0%,rgba(23,21,26,.58) 45%,rgba(23,21,26,.84) 100%);
}
.ctasec .wrap,
.inner .ctasec .wrap{
  position:relative;
  z-index:2;
  max-width:820px;
}
.ctasec .eyebrow,
.inner .ctasec .eyebrow{
  color:var(--gold);
  justify-content:center;
  letter-spacing:.34em;
}
.ctasec .eyebrow::before,
.ctasec .eyebrow::after,
.inner .ctasec .eyebrow::before,
.inner .ctasec .eyebrow::after{background:var(--gold)}
.ctasec h2,
.inner .ctasec h2,
.inner .ctasec h2{
  font-family:var(--font-serif);
  font-weight:500;
  font-size:clamp(2.25rem,5.2vw,4.05rem);
  line-height:1.08;
  letter-spacing:-.015em;
  color:var(--pearl);
  margin:1.35rem auto 1.15rem;
  max-width:16ch;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.ctasec h2 em,
.inner .ctasec h2 em{
  color:var(--gold);
  font-style:italic;
}
.ctasec p,
.inner .ctasec p{
  color:rgba(238,240,242,.86);
  max-width:42ch;
  margin:0 auto;
  line-height:1.8;
  font-size:clamp(.95rem,1.35vw,1.08rem);
  text-shadow:0 1px 16px rgba(0,0,0,.35);
}
.ctasec .cta-btns,
.inner .ctasec .cta-btns{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  margin-top:2.5rem;
}
.ctasec .btn-primary,
.inner .ctasec .btn-primary{
  background:rgba(230,207,134,.12);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--gold);
  border-color:var(--gold);
  box-shadow:none;
}
.ctasec .btn-primary:hover,
.inner .ctasec .btn-primary:hover{
  background:var(--gold);
  color:var(--velvet);
  border-color:var(--gold);
}
.ctasec .btn-primary .dot,
.inner .ctasec .btn-primary .dot{background:var(--velvet)}
/* Footer columns / strip — high-contrast pearl on fireworks */
footer.site,
.inner footer.site{color:var(--pearl)}
footer.site .foot-cols h5,
.inner footer.site .foot-cols h5{
  color:var(--gold);
  text-shadow:0 1px 12px rgba(22,15,27,.85);
}
footer.site .foot-cols a,
footer.site .foot-cols .brandcol p,
.inner footer.site .foot-cols a,
.inner footer.site .foot-cols .brandcol p{
  color:rgba(238,240,242,.92);
  text-shadow:0 1px 14px rgba(22,15,27,.9),0 0 2px rgba(22,15,27,.85);
}
footer.site .foot-cols .brandcol img,
.inner footer.site .foot-cols .brandcol img{
  filter:drop-shadow(0 2px 16px rgba(22,15,27,.85));
}
footer.site .foot-cols a:hover,
.inner footer.site .foot-cols a:hover{color:var(--gold)}
footer.site .foot-strip .run,
.inner footer.site .foot-strip .run{color:rgba(238,240,242,.92)}
footer.site .foot-base,
.inner footer.site .foot-base{
  color:rgba(238,240,242,.85);
  text-shadow:0 1px 12px rgba(22,15,27,.95);
}
footer.site .foot-base a,
.inner footer.site .foot-base a{color:rgba(238,240,242,.92)}
footer.site .foot-base a:hover,
.inner footer.site .foot-base a:hover{color:var(--gold)}

/* Wordmark readability over fireworks */
footer.site .wordmark,
.inner footer.site .wordmark{
  mix-blend-mode:normal;
  filter:drop-shadow(0 2px 18px rgba(22,15,27,.7));
}
footer.site .wordmark .wm-l,
.inner footer.site .wordmark .wm-l{
  -webkit-text-stroke:1.35px rgba(238,240,242,.62);
}

/* Inner pages that already have .ctasec — compact shared footer */
footer.site.no-cta{padding-top:clamp(2.5rem,5vh,3.5rem)}
footer.site.no-cta .foot-strip{margin-top:0}

/* Mega menu — brand mark over the right-hand plate. Printed straight onto the
   photograph in pearl rather than sitting on a cream card, which read as a
   sticker patched over the image. Legibility comes from the soft pool of
   shade below and the drop shadow, so there is no hard edge anywhere. */
.menu .right .menu-logo{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  padding:2rem;
  pointer-events:none;
}
.menu .right .menu-logo::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(78%,420px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(22,15,27,.5),transparent 72%);
}
.menu .right .menu-logo img{
  position:relative;
  width:min(46%,230px);
  height:auto;
  display:block;
  /* Brand SVG is purple and gold; on a dark plate it has to go pearl. */
  filter:brightness(0) invert(1) drop-shadow(0 3px 18px rgba(0,0,0,.55));
  opacity:.94;
}
@media(max-width:1024px){
  .menu .right{display:none}
}

/* Nav + menu above sticky cinematic heroes (portfolio zoom, etc.) */
header.nav{z-index:1300!important;pointer-events:auto}
.menu{z-index:1250!important}
.menu.open{z-index:1250!important;pointer-events:auto!important}
.burger{position:relative;z-index:1301!important}

/* Sticky full-viewport heroes must not eat header / menu clicks */
.pz-hero,
.pz-pin,
.pz-stage,
.pz-scene,
.pz-outer,
.pz-portal,
.pz-veil{
  pointer-events:none!important;
}
.pz-copy,
.pz-copy a,
.pz-actions,
.pz-actions a{
  pointer-events:auto!important;
}

/* Mega menu — the fixed header sits above the overlay (z 1100 vs 1090) and its
   box runs ~180px down the full width, right over the first nav links. Hiding
   the brand isn't enough: the header element itself still takes the hit, so
   Home was unclickable. Let clicks fall through and keep only the burger live. */
header.nav.menu-open{pointer-events:none}
header.nav.menu-open .burger{pointer-events:auto}

/* Mega menu — Services hover submenu (wraps in left column, pushes 04–06 down) */
.menu #menuNav .menu-item.has-sub{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-width:0;
  max-width:100%;
}
.menu #menuNav{
  min-width:0;
  max-width:100%;
}
.menu .left{
  overflow-x:hidden;
  min-width:0;
}
.menu #menuNav .menu-sub{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:clamp(.65rem,1.4vw,1.25rem);
  row-gap:.45rem;
  max-height:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;
  scrollbar-width:none;
  -ms-overflow-style:none;
  transition:
    max-height .45s cubic-bezier(.22,1,.36,1),
    opacity .35s ease,
    margin .35s ease,
    padding .35s ease;
}
.menu #menuNav .menu-sub::-webkit-scrollbar{display:none;width:0;height:0}
.menu #menuNav .menu-item.has-sub:hover .menu-sub,
.menu #menuNav .menu-item.has-sub:focus-within .menu-sub,
.menu #menuNav .menu-item.has-sub.is-open .menu-sub{
  max-height:9rem;
  opacity:1;
  pointer-events:auto;
  margin:.15rem 0 .55rem;
  padding:.15rem .75rem .5rem 0;
  overflow:visible;
}
.menu #menuNav .menu-sub a{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 1 auto;
  max-width:100%;
  font-family:var(--font-sans);
  font-size:clamp(.62rem,.9vw,.76rem);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.25;
  color:rgba(238,240,242,.72);
  padding:.28rem 0;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
  outline:none;
  box-shadow:none;
  border:0;
  gap:0;
}
.menu #menuNav .menu-sub a + a::before{
  content:"·";
  display:inline-block;
  margin:0 clamp(.55rem,1vw,.9rem) 0 0;
  color:var(--gold);
  font-size:1.7em;
  font-weight:700;
  line-height:1;
  opacity:.9;
  pointer-events:none;
}
.menu #menuNav .menu-sub a .idx,
.menu #menuNav .menu-sub a .mtxt{display:none}
.menu #menuNav .menu-sub a::after{content:none}
.menu #menuNav .menu-sub .menu-sub-label{
  position:relative;
  display:inline-block;
}
.menu #menuNav .menu-sub .menu-sub-label::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:.08em;
  height:1px;width:0;
  background:var(--gold);
  transition:width .35s ease;
}
.menu #menuNav .menu-sub a:hover,
.menu #menuNav .menu-sub a:focus-visible{
  color:var(--gold);
}
.menu #menuNav .menu-sub a:hover .menu-sub-label::after,
.menu #menuNav .menu-sub a:focus-visible .menu-sub-label::after{width:100%}
.menu #menuNav .menu-sub a:hover .mtxt{transform:none}

/* Mobile / narrow menu — submenu always visible (no hover on touch) */
@media(max-width:1024px){
  .menu #menuNav .menu-item.has-sub .menu-sub{
    max-height:none;
    opacity:1;
    pointer-events:auto;
    margin:.2rem 0 .65rem;
    padding:.2rem .85rem .55rem 0;
    overflow:visible;
  }
}

@media(max-width:980px){
  .menu #menuNav .menu-item.has-sub:hover .menu-sub,
  .menu #menuNav .menu-item.has-sub:focus-within .menu-sub,
  .menu #menuNav .menu-item.has-sub.is-open .menu-sub{
    max-height:11rem;
    padding-right:1rem;
  }
}

@media(max-width:720px){
  .menu #menuNav .menu-item.has-sub:hover .menu-sub,
  .menu #menuNav .menu-item.has-sub:focus-within .menu-sub,
  .menu #menuNav .menu-item.has-sub.is-open .menu-sub{
    max-height:12rem;
    padding-right:.85rem;
  }
  .menu #menuNav .menu-sub{
    column-gap:.7rem;
    row-gap:.4rem;
  }
  .menu #menuNav .menu-sub a{
    font-size:.6rem;
    letter-spacing:.1em;
  }
  footer.site .foot-cta h2,
  .inner footer.site .foot-cta h2,
  .inner .foot-cta h2{font-size:clamp(1.8rem,4.4vw,3.2rem)}
  .ctasec,
  .inner .ctasec{padding:clamp(80px,14vh,120px) 0}
}

/* Footer — social icon row inside the Connect column.
   Beats the per-page `.foot-cols a{display:block}` rule. */
footer.site .foot-cols .foot-social{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1rem;
}
footer.site .foot-cols .foot-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin:0;
  padding:0;
  border:1px solid var(--gold,#d4af37);
  border-radius:6px;
  background:var(--gold,#d4af37);
  color:var(--velvet,#17151a);
  text-shadow:none;
  transition:color .3s ease,background .3s ease,border-color .3s ease,transform .3s ease;
}
footer.site .foot-cols .foot-social a:hover,
footer.site .foot-cols .foot-social a:focus-visible{
  color:var(--velvet,#17151a);
  background:var(--gold,#d4af37);
  border-color:var(--gold,#d4af37);
  transform:translateY(-2px);
}
footer.site .foot-cols .foot-social svg{
  width:16px;
  height:16px;
  display:block;
}
@media(prefers-reduced-motion:reduce){
  footer.site .foot-cols .foot-social a{transition:none}
  footer.site .foot-cols .foot-social a:hover{transform:none}
}

/* Site-wide floating WhatsApp */
.koz-wa-fab{
  position:fixed;
  right:max(1rem, env(safe-area-inset-right, 0px));
  bottom:max(1rem, env(safe-area-inset-bottom, 0px));
  z-index:1200;
  width:3.35rem;
  height:3.35rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  box-shadow:0 10px 28px rgba(23,21,26,.28);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.koz-wa-fab:hover,
.koz-wa-fab:focus-visible{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 16px 34px rgba(23,21,26,.34);
  background:#1ebe57;
  color:#fff;
}
.koz-wa-fab svg{width:1.55rem;height:1.55rem;display:block}
@media(prefers-reduced-motion:reduce){
  .koz-wa-fab{transition:none}
  .koz-wa-fab:hover{transform:none}
}