:root{--sync-board-line:rgba(225,218,239,.052);--sync-board-bright:rgba(197,255,75,.075);--sync-board-violet:rgba(114,76,166,.16);--sync-board-cyan:rgba(92,196,226,.085);--sync-chess-ease:cubic-bezier(.22,.72,.2,1)}

/* The canonical shell gets a quiet strategic texture without changing its layout. */
.sync-header-v18 .sync-header-glass{background-image:linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(135deg,rgba(31,26,40,.96),rgba(14,15,22,.94));background-size:34px 34px,34px 34px,auto;background-position:center;box-shadow:0 18px 70px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.18)}
.sync-header-v18 .brand{height:2.65rem;display:flex;align-items:center;overflow:visible}
.sync-header-v18 .brand img{width:8.5rem;height:auto;max-width:none;object-fit:contain;flex:none;margin-left:-.18rem}
.sync-header-v18 .sync-nav-trigger:before,.sync-header-v18 .sync-primary-nav>a:before{content:"";position:absolute;left:50%;bottom:.38rem;width:4px;height:4px;border-radius:50%;background:var(--lime);opacity:0;transform:translate(-50%,6px);transition:opacity .22s ease,transform .35s var(--sync-chess-ease)}
.sync-header-v18 .sync-nav-trigger:hover:before,.sync-header-v18 .sync-primary-nav>a:hover:before,.sync-header-v18 .sync-primary-nav .is-active:before{opacity:.8;transform:translate(-50%,0)}

/* A shared board material, varied through position and geometry per page. */
.v14-hero,.sv2-hero,.workx-hero,.academy-hero,.av2-hero,.fv1-hero,.contact-v2-hero,.tools-hero,.sd-hero,.casex-hero,.academy-track-hero,.academy-simple-hero,.article-hero,.inner-hero{position:relative;isolation:isolate;overflow:hidden}
.sv2-hero:after,.workx-hero:after,.academy-hero:after,.av2-hero:after,.fv1-hero:after,.contact-v2-hero:after,.tools-hero:after,.sd-hero:after,.casex-hero:after,.academy-track-hero:after,.academy-simple-hero:after,.article-hero:after,.inner-hero:after{content:"";position:absolute;z-index:-1;pointer-events:none;opacity:.82}

/* Services: bishop diagonals crossing a modular digital field. */
.sv2-hero:after,.sd-hero:after{inset:5% -8% -18% 42%;background:repeating-linear-gradient(135deg,transparent 0 67px,var(--sync-board-line) 68px 69px,transparent 70px 136px),repeating-linear-gradient(45deg,transparent 0 67px,rgba(114,76,166,.07) 68px 69px,transparent 70px 136px);transform:skewY(-4deg);mask-image:radial-gradient(ellipse at center,#000,transparent 72%)}

/* Work and case studies: rook-like stepped frames supporting real project imagery. */
.workx-hero:after,.casex-hero:after{right:-5%;top:16%;width:47%;height:72%;border:1px solid var(--sync-board-line);background:linear-gradient(90deg,transparent 0 24%,var(--sync-board-line) 24% 24.5%,transparent 24.5% 75%,var(--sync-board-line) 75% 75.5%,transparent 75.5%),linear-gradient(transparent 0 22%,var(--sync-board-line) 22% 22.5%,transparent 22.5% 76%,var(--sync-board-line) 76% 76.5%,transparent 76.5%);clip-path:polygon(0 22%,22% 22%,22% 0,78% 0,78% 22%,100% 22%,100% 100%,0 100%);box-shadow:inset 0 0 90px rgba(73,48,105,.12)}

/* Academy: measured learning progression across ranks. */
.academy-hero:after,.academy-track-hero:after,.academy-simple-hero:after{inset:10% -8% 0 50%;background:linear-gradient(90deg,var(--sync-board-line) 1px,transparent 1px),linear-gradient(var(--sync-board-line) 1px,transparent 1px),linear-gradient(135deg,transparent 47%,var(--sync-board-cyan) 48% 49%,transparent 50%);background-size:54px 54px,54px 54px,216px 216px;mask-image:linear-gradient(90deg,transparent,#000 22%,#000 70%,transparent)}

/* About: a portrait stage with softened aligned squares. */
.av2-hero:after{inset:8% -5% 0 48%;background:conic-gradient(from 90deg at 1px 1px,rgba(255,255,255,.042) 25%,transparent 0) 0 0/88px 88px;transform:rotate(-3deg);filter:blur(.1px);mask-image:radial-gradient(ellipse at center,#000,transparent 68%)}

/* Founder: an abstract knight move, expressed as light and position rather than a literal piece. */
.fv1-hero:after{right:5%;top:13%;width:42%;height:66%;border-top:1px solid rgba(255,255,255,.09);border-right:1px solid rgba(255,255,255,.09);background:radial-gradient(circle at 0 100%,rgba(255,120,0,.32) 0 3px,transparent 4px),radial-gradient(circle at 100% 0,rgba(255,255,255,.2) 0 3px,transparent 4px),linear-gradient(90deg,transparent 49.7%,rgba(255,255,255,.045) 50%,transparent 50.3%),linear-gradient(transparent 49.7%,rgba(255,255,255,.045) 50%,transparent 50.3%);background-size:auto,auto,25% 100%,100% 25%;clip-path:polygon(0 70%,56% 70%,56% 0,100% 0,100% 100%,0 100%)}

/* Contact: precise signals converge toward a single response point. */
.contact-v2-hero:after{inset:5% -5% 0 46%;background:linear-gradient(32deg,transparent 49.7%,rgba(255,120,0,.09) 50%,transparent 50.3%),linear-gradient(-27deg,transparent 49.7%,rgba(112,77,162,.16) 50%,transparent 50.3%),radial-gradient(circle at 63% 54%,rgba(255,120,0,.28) 0 3px,transparent 4px);background-size:100% 100%;mask-image:radial-gradient(ellipse at center,#000,transparent 72%)}

/* Tools: precise workshop grid; individual app interfaces remain the visual focus. */
.tools-hero:after{inset:8% -8% -20% 45%;background:linear-gradient(90deg,var(--sync-board-line) 1px,transparent 1px),linear-gradient(var(--sync-board-line) 1px,transparent 1px),linear-gradient(90deg,transparent 0 74%,var(--sync-board-bright) 74% 75%,transparent 75%);background-size:64px 64px,64px 64px,256px 256px;transform:perspective(700px) rotateY(-15deg);mask-image:linear-gradient(90deg,transparent,#000 18%,#000)}

/* The canonical footer owns its stage. Page atmosphere must not bleed into it. */
.sync-footer-calm,.home .site-footer.sync-footer-calm{isolation:isolate;background-image:none}
.sync-footer-calm:before{content:none}

@media(max-width:900px){.sync-header-v18 .brand{height:2.45rem}.sync-header-v18 .brand img{width:7.6rem}.sv2-hero:after,.workx-hero:after,.academy-hero:after,.av2-hero:after,.fv1-hero:after,.contact-v2-hero:after,.tools-hero:after,.sd-hero:after,.casex-hero:after{left:35%;right:-35%;top:48%;bottom:-10%;width:auto;height:auto;opacity:.55;transform:none}.workx-hero:after,.casex-hero:after{clip-path:polygon(0 18%,20% 18%,20% 0,80% 0,80% 18%,100% 18%,100% 100%,0 100%)}}
@media(max-width:520px){.sync-header-v18 .brand img{margin-left:-.35rem}.sv2-hero:after,.workx-hero:after,.academy-hero:after,.av2-hero:after,.fv1-hero:after,.contact-v2-hero:after,.tools-hero:after,.sd-hero:after,.casex-hero:after{left:16%;right:-48%;top:55%;opacity:.42}}
@media(prefers-reduced-motion:reduce){.sync-header-v18 .sync-nav-trigger:before,.sync-header-v18 .sync-primary-nav>a:before{transition:none}.sv2-hero:after,.workx-hero:after,.academy-hero:after,.av2-hero:after,.fv1-hero:after,.contact-v2-hero:after,.tools-hero:after,.sd-hero:after,.casex-hero:after{animation:none!important;transform:none!important}}