/* DDE (DesignX) shared site layer
   Design tokens + the rules that are byte-identical on all six pages AND safe to hoist
   (no page rule sits above them that relied on them winning a same-specificity tie).
   Kept inline on purpose: .wa-fab / .back-top base rules, the max-width:500px
   .footer-top collapse, and the prefers-reduced-motion block -- hoisting those would
   flip the cascade. Linked before each page's inline <style>. */
:root{
  --ink:#0a0a0a;
  --bg:#f5f3ef;
  --bg-dark:#0b0907;
  --bg-dark-2:#111110;
  --red:#CC0000;
  --red-bright:#f0665a;
  --amber:#c17817;
  --teal:#42858C;
  --teal-text:#35707a;
  --green:#047857;
  --muted:#6b6560;
  --muted-dark:rgba(255,255,255,.42);
  --border:rgba(10,10,10,.09);
  --border-dark:rgba(255,255,255,.08);
  --sans:'Quicksand',system-ui,sans-serif;
  --display:'Fauna One',Georgia,serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --bg-dark-3:#1a1918;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
button{font-family:var(--sans);cursor:pointer;border:none;background:none}
.nav-links{display:flex;gap:2rem}
.nav-link{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.65);transition:color .25s var(--ease);white-space:nowrap;position:relative;padding:.2rem 0}
.nav-link::after{content:'';position:absolute;bottom:-3px;left:50%;right:50%;height:1.5px;background:var(--red);border-radius:2px;transition:left .3s var(--ease),right .3s var(--ease)}
.nav-link:hover{color:#fff}
.nav-right{display:flex;align-items:center;gap:1rem}
.nav-cta:hover{background:#a50000;box-shadow:0 4px 22px rgba(204,0,0,.5)}
.nav-burger svg{width:22px;height:22px}
.nav-burger .ic-x{display:none}
.nav-burger.open .ic-menu{display:none}
.nav-burger.open .ic-x{display:block}
.mobile-menu{display:none;position:fixed;inset:0;z-index:890;background:var(--bg-dark);flex-direction:column;align-items:center;justify-content:center;gap:2rem;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.mobile-menu.open{display:flex}
.mobile-menu a{font-family:var(--display);font-size:clamp(2rem,7vw,3rem);font-weight:800;color:rgba(255,255,255,.6);letter-spacing:-.03em;transition:.3s;line-height:1}
.mobile-menu a:hover{color:var(--amber)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.visible{opacity:1;transform:none}
.rd1{transition-delay:.08s}
.rd2{transition-delay:.16s}
.footer-logo img{height:22px;width:auto;object-fit:contain;filter:brightness(10)}
.footer-col h5{font-size:.56rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:1rem}
.footer-col a{display:block;font-size:.78rem;color:rgba(255,255,255,.68);margin-bottom:.55rem;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.06);flex-wrap:wrap;gap:1rem}
.footer-copy{font-size:.68rem;color:rgba(255,255,255,.66);letter-spacing:.04em}
.footer-socials{display:flex;gap:.6rem}
.footer-socials a:hover{border-color:var(--red);background:var(--red);color:#fff}
.wa-fab::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(37,211,102,.3);animation:waPulse 2.8s ease-out infinite;pointer-events:none}
.wa-fab:hover{transform:scale(1.08);box-shadow:0 8px 32px rgba(37,211,102,.35),0 4px 12px rgba(0,0,0,.35)}
@keyframes waPulse{0%{transform:scale(1);opacity:.6}70%{transform:scale(1.35);opacity:0}100%{transform:scale(1.35);opacity:0}}
.back-top.show{opacity:1;pointer-events:auto}
.back-top:hover{background:var(--red);border-color:var(--red)}
.skip-link{position:absolute;left:1rem;top:-5rem;z-index:2000;padding:.7rem 1.3rem;font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--red);border-radius:0 0 6px 6px;transition:top .18s ease}
.skip-link:focus{top:0}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
#mainNav :focus-visible,.hero :focus-visible,.hero-inner :focus-visible,.mobile-menu :focus-visible,.work-hero :focus-visible,.about-hero :focus-visible,.services-hero :focus-visible,.duo-card :focus-visible,.section-dark :focus-visible,.section-dark-2 :focus-visible,.sim :focus-visible,.flow :focus-visible,.surface :focus-visible,footer :focus-visible,.contact :focus-visible,.sticky-cta :focus-visible,.tech-studio-dark :focus-visible,.cta-band :focus-visible,.btn-primary:focus-visible,.form-submit:focus-visible{outline-color:#fff}