/* PORTED 1:1 from sketches/4-1/alive.css by wp/generator/port_assets.py - do not edit here, edit the sketch and re-port (or override in sd-wp.css) */
/* 3.4 — scoped copy of 3.3 alive.css (generated by scope34.py): dark rules only under html.dk or .navy-sec */
/* ==========================================================================
   ShimonDesign — sketch 3.3 "חי לגמרי" (Fully Alive)
   Navy-dominant, mint as light. Loaded after style.css + plus.css (the approved
   daylight base): this file flips the tokens to dark, restyles every component
   for navy + glass, and adds the new set-pieces (kinetic hero, 3D mark, logo
   marquee, tilted stats, pinned poster gallery, mask reveal, timeline…).
   Light islands (.is-light) bring the original light tokens back.
   ========================================================================== */
:root {
  --navy-0: #000915;
  --navy-1: #000D20;
  --navy-2: #03193A;
  --navy-3: #082A52;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
html.dk, .navy-sec {
  --navy-0: #000915;
  --navy-1: #000D20;
  --navy-2: #03193A;
  --navy-3: #082A52;
  --ink: #FFFFFF;
  --ink-2: rgba(255, 255, 255, .72);
  --ink-3: rgba(255, 255, 255, .45);
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .17);
  --light: rgba(255, 255, 255, .07);
  --off: rgba(255, 255, 255, .045);
  --mint-tint: rgba(57, 244, 204, .16);
  --on-navy-2: rgba(255, 255, 255, .72);
  --card: linear-gradient(165deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .035) 100%);
  --card-sh: inset 0 1px 0 rgba(255, 255, 255, .13), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 60px -34px rgba(0, 0, 0, .75);
  --card-hov: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(57, 244, 204, .32), 0 40px 80px -34px rgba(0, 0, 0, .85), 0 0 70px -24px rgba(57, 244, 204, .35);
  --sh-1: var(--card-sh);
  --sh-2: var(--card-hov);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
:is(html.dk, .navy-sec) .is-light {
  --ink: var(--navy);
  --ink-2: rgba(0, 18, 43, .68);
  --ink-3: rgba(0, 18, 43, .46);
  --line: rgba(0, 18, 43, .08);
  --line-2: rgba(0, 18, 43, .14);
  --light: #F4F4F4;
  --off: #FAFAFA;
  --mint-tint: rgba(57, 244, 204, .22);
  --card: #FFFFFF;
  --card-sh: 0 1px 2px rgba(0, 18, 43, .04), 0 4px 12px -4px rgba(0, 18, 43, .05), 0 22px 44px -18px rgba(0, 18, 43, .12);
  --card-hov: 0 2px 4px rgba(0, 18, 43, .05), 0 14px 28px -10px rgba(0, 18, 43, .12), 0 40px 80px -28px rgba(0, 18, 43, .26);
  --sh-1: var(--card-sh);
  --sh-2: var(--card-hov);
  color: var(--navy);
}
/* ---------- base ---------- */
html.dk { background: var(--navy); }
html.dk body { background: var(--navy); color: #fff; }
:is(html.dk, .navy-sec) main { position: relative; z-index: 1; }
:is(html.dk, .navy-sec) :focus-visible { outline-color: var(--mint); }
:is(html.dk, .navy-sec) .is-light :focus-visible { outline-color: var(--navy); }
html.dk ::selection { background: var(--mint); color: var(--navy); }
:is(html.dk, .navy-sec) .h2 { font-size: clamp(38px, 5vw, 78px); line-height: 1; letter-spacing: -.04em; }
:is(html.dk, .navy-sec) .eyebrow .sd-mark { --logo-arrow: #fff; }
:is(html.dk, .navy-sec) .is-light .eyebrow .sd-mark { --logo-arrow: var(--navy); }
:is(html.dk, .navy-sec) .sd-stars { color: var(--mint); }
:is(html.dk, .navy-sec) .is-light .sd-stars { color: var(--navy); }
:is(html.dk, .navy-sec) .muted, :is(html.dk, .navy-sec) .more small { color: var(--ink-2); }
:is(html.dk, .navy-sec) .panel-navy { background: linear-gradient(165deg, var(--navy-3) 0%, var(--navy-1) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .06); }
/* word masks + kinetic letters */
.ww { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em .02em .1em; margin: -.12em -.02em -.1em; }
.wi { display: inline-block; }
.k-h1 .kw { display: inline-block; white-space: nowrap; }
.k-h1 .kc { display: inline-block; }
html.gs .k-h1 .kc { will-change: transform, opacity; }
/* the cursor light (behind the content; navy surfaces and glass let it through) */
.cglow { position: fixed; top: 0; left: 0; z-index: 0; width: 720px; height: 720px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(57, 244, 204, .16), rgba(57, 244, 204, .055) 46%, rgba(57, 244, 204, 0) 74%);
  transition: opacity .7s var(--ease); will-change: transform; }
.cglow.on { opacity: 1; }
/* ---------- buttons, chips, glass ---------- */
:is(html.dk, .navy-sec) .btn-navy, :is(html.dk, .navy-sec) .btn-mint { background: var(--mint); color: var(--navy);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 1px 2px rgba(0, 0, 0, .2), 0 12px 32px -12px rgba(57, 244, 204, .6); }
:is(html.dk, .navy-sec) .is-light .btn-navy { background: var(--navy); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 18, 43, .2), 0 10px 22px -10px rgba(0, 18, 43, .6); }
:is(html.dk, .navy-sec) .btn-line { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .26); }
:is(html.dk, .navy-sec) .is-light .btn-line { color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line-2); }
:is(html.dk, .navy-sec) .btn-glass { color: #fff; }
:is(html.dk, .navy-sec) .btn-white { background: #fff; color: var(--navy); }
@media (hover: hover) and (pointer: fine) {
  :is(html.dk, .navy-sec) .btn-navy:hover, :is(html.dk, .navy-sec) .btn-mint:hover { background: color-mix(in srgb, var(--mint) 82%, #fff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 40px -10px rgba(57, 244, 204, .75); }
  :is(html.dk, .navy-sec) .is-light .btn-navy:hover { background: color-mix(in srgb, var(--navy) 86%, #fff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 14px 26px -10px rgba(0, 18, 43, .6); }
  :is(html.dk, .navy-sec) .btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--mint); color: var(--mint); }
  :is(html.dk, .navy-sec) .is-light .btn-line:hover { box-shadow: inset 0 0 0 1.5px var(--navy); color: var(--navy); }
  :is(html.dk, .navy-sec) .btn-glass:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(57, 244, 204, .4), 0 12px 30px -12px rgba(0, 0, 0, .5); }
}
:is(html.dk, .navy-sec) .chip { background: rgba(255, 255, 255, .08); color: #fff; }
:is(html.dk, .navy-sec) .is-light .chip { background: var(--light); color: var(--navy); }
:is(html.dk, .navy-sec) .chip-white { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
:is(html.dk, .navy-sec) .is-light .chip-white { background: #fff; box-shadow: 0 0 0 .5px var(--line-2); }
:is(html.dk, .navy-sec) .chip-new { background: var(--mint) !important; color: var(--navy) !important; box-shadow: 0 6px 18px -6px rgba(57, 244, 204, .7); }
:is(html.dk, .navy-sec) .rbtn.glass-dark { color: #fff; }
:is(html.dk, .navy-sec) .glass-dark { background: linear-gradient(180deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .05) 100%); }
/* segmented filters (dark glass) */
:is(html.dk, .navy-sec) .seg.glass-dark button { color: rgba(255, 255, 255, .74); }
:is(html.dk, .navy-sec) .seg button .n { background: rgba(255, 255, 255, .1); color: #fff; }
:is(html.dk, .navy-sec) .seg button[aria-pressed="true"] { background: var(--mint); color: var(--navy); box-shadow: 0 8px 22px -8px rgba(57, 244, 204, .7); }
:is(html.dk, .navy-sec) .seg button[aria-pressed="true"] .n { background: var(--navy); color: var(--mint); }
:is(html.dk, .navy-sec) .seg button:focus-visible { outline-color: var(--mint); }
@media (hover: hover) and (pointer: fine) {
  :is(html.dk, .navy-sec) .seg.glass-dark button:not([aria-pressed="true"]):hover { color: #fff; background: rgba(255, 255, 255, .1); }
}
@media (max-width: 820px) {
  :is(html.dk, .navy-sec) .filters .seg, :is(html.dk, .navy-sec) .blog-filters .seg, :is(html.dk, .navy-sec) .ph-extra .seg { background: none !important; box-shadow: none !important; }
  :is(html.dk, .navy-sec) .filters .seg button, :is(html.dk, .navy-sec) .blog-filters .seg button, :is(html.dk, .navy-sec) .ph-extra .seg button { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; }
  :is(html.dk, .navy-sec) .filters .seg button[aria-pressed="true"], :is(html.dk, .navy-sec) .blog-filters .seg button[aria-pressed="true"] { background: var(--mint); color: var(--navy); box-shadow: 0 8px 20px -8px rgba(57, 244, 204, .6); }
}
/* ---------- forms (dark) ---------- */
:is(html.dk, .navy-sec) .fld > span, :is(html.dk, .navy-sec) .topics legend { color: var(--ink); }
:is(html.dk, .navy-sec) .fld input, :is(html.dk, .navy-sec) .fld textarea { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
:is(html.dk, .navy-sec) .fld input::placeholder, :is(html.dk, .navy-sec) .fld textarea::placeholder { color: rgba(255, 255, 255, .42); }
:is(html.dk, .navy-sec) .fld input:focus, :is(html.dk, .navy-sec) .fld textarea:focus { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 2px var(--mint), 0 0 0 5px rgba(57, 244, 204, .14); }
:is(html.dk, .navy-sec) .consent { color: var(--ink-2); }
:is(html.dk, .navy-sec) .consent input { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
:is(html.dk, .navy-sec) .consent input::after { border-color: var(--navy); }
:is(html.dk, .navy-sec) .consent input:checked { background: var(--mint); }
:is(html.dk, .navy-sec) .consent input:focus-visible { outline-color: var(--mint); }
:is(html.dk, .navy-sec) .topics span { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: #fff; }
:is(html.dk, .navy-sec) .topics span::before { background: rgba(255, 255, 255, .3); }
:is(html.dk, .navy-sec) .topics input:checked + span { background: var(--mint); color: var(--navy); }
:is(html.dk, .navy-sec) .topics input:checked + span::before { background: var(--navy); }
:is(html.dk, .navy-sec) .topics input:focus-visible + span { outline-color: var(--mint); }
:is(html.dk, .navy-sec) .thanks p { color: var(--ink-2); }
/* ---------- cards: glass on navy (white again on light islands) ---------- */
:is(html.dk, .navy-sec) .tile, :is(html.dk, .navy-sec) .post-card, :is(html.dk, .navy-sec) .r-card, :is(html.dk, .navy-sec) .svc-card, :is(html.dk, .navy-sec) .inc li, :is(html.dk, .navy-sec) .pn a, :is(html.dk, .navy-sec) .feat-post, :is(html.dk, .navy-sec) .pa-g, :is(html.dk, .navy-sec) .svc-row, :is(html.dk, .navy-sec) .tools li, :is(html.dk, .navy-sec) .seo a, :is(html.dk, .navy-sec) .svc-page .svc-row, :is(html.dk, .navy-sec) .vals li, :is(html.dk, .navy-sec) .vals li:nth-child(1), :is(html.dk, .navy-sec) .c-card.navy, :is(html.dk, .navy-sec) .form-card, :is(html.dk, .navy-sec) .gal button {
  background: var(--card); box-shadow: var(--card-sh); color: var(--ink);
}
:is(html.dk, .navy-sec) .tile, :is(html.dk, .navy-sec) .post-card, :is(html.dk, .navy-sec) .r-card, :is(html.dk, .navy-sec) .svc-card, :is(html.dk, .navy-sec) .inc li, :is(html.dk, .navy-sec) .pn a, :is(html.dk, .navy-sec) .feat-post, :is(html.dk, .navy-sec) .svc-row, :is(html.dk, .navy-sec) .tools li, :is(html.dk, .navy-sec) .vals li { transition: box-shadow .4s var(--ease), transform .45s var(--spring), background-color .3s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  :is(html.dk, .navy-sec) a.tile:hover, :is(html.dk, .navy-sec) .post-card:hover, :is(html.dk, .navy-sec) a.svc-card:hover, :is(html.dk, .navy-sec) .pn a:hover, :is(html.dk, .navy-sec) .feat-post:hover, :is(html.dk, .navy-sec) .vals li:hover, :is(html.dk, .navy-sec) .tools li:hover, :is(html.dk, .navy-sec) .inc li:hover { box-shadow: var(--card-hov); transform: translateY(-6px) scale(1.01); }
  :is(html.dk, .navy-sec) .seo a:hover { box-shadow: inset 0 0 0 1.5px var(--mint); color: var(--mint); }
}
:is(html.dk, .navy-sec) .is-light .post-card { background: #fff; }
:is(html.dk, .navy-sec) .post-card .ph-img, :is(html.dk, .navy-sec) .feat-post .ph-img { background: var(--navy-2); }
:is(html.dk, .navy-sec) .post-card p, :is(html.dk, .navy-sec) .post-meta, :is(html.dk, .navy-sec) .feat-post p { color: var(--ink-2); }
:is(html.dk, .navy-sec) .ic-sq.ghost { background: rgba(255, 255, 255, .08); }
:is(html.dk, .navy-sec) .checks li i { background: rgba(57, 244, 204, .16); color: var(--mint); }
:is(html.dk, .navy-sec) .is-light .checks li i { background: var(--mint-tint); color: var(--navy); }
:is(html.dk, .navy-sec) .pc-go { background: rgba(255, 255, 255, .1); }
/* ---------- mockups on navy ---------- */
html.dk body .mk {
  --mk-shadow: 0 3.2cqw 6cqw -2.6cqw rgba(0, 0, 0, .6), 0 1.2cqw 2.4cqw -1.2cqw rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .04);
  --mk-floor: rgba(0, 0, 0, .55);
}
html.dk body .is-light .mk {
  --mk-shadow: 0 3.2cqw 6cqw -3cqw rgba(0, 18, 43, .30), 0 1.2cqw 2.4cqw -1.2cqw rgba(0, 18, 43, .16), 0 0 0 1px rgba(0, 18, 43, .04);
  --mk-floor: rgba(0, 18, 43, .20);
}
html.dk body .mk-duo-in > .mk-side { filter: drop-shadow(0 2.2cqw 2.6cqw rgba(0, 0, 0, .5)); }
html.dk body .is-light .mk-duo-in > .mk-side { filter: drop-shadow(0 2.2cqw 2.6cqw rgba(0, 18, 43, .26)); }
:is(html.dk, .navy-sec) .stage {
  background: radial-gradient(60% 55% at 50% 30%, rgba(57, 244, 204, .16), rgba(57, 244, 204, 0) 72%), linear-gradient(180deg, var(--navy-3) 0%, var(--navy-2) 52%, var(--navy-1) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
:is(html.dk, .navy-sec) .stage::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(57, 244, 204, .07)); }
:is(html.dk, .navy-sec) .is-light .stage { background: radial-gradient(70% 60% at 50% 38%, #fff 0%, rgba(255, 255, 255, 0) 72%), linear-gradient(180deg, #fff 0%, #f8f8f8 55%, #ececec 100%); box-shadow: inset 0 0 0 1px rgba(0, 18, 43, .04); }
:is(html.dk, .navy-sec) .is-light .stage::after { background: linear-gradient(180deg, rgba(244, 244, 244, 0), rgba(0, 18, 43, .035)); }
/* ---------- light islands (rhythm) ---------- */
:is(html.dk, .navy-sec) .island { position: relative; isolation: isolate; overflow: hidden; margin-inline: clamp(8px, 1.3vw, 20px); border-radius: var(--r-panel); background: #fff; color: var(--navy); }
:is(html.dk, .navy-sec) .island .lead { color: var(--ink-2); }
:is(html.dk, .navy-sec) .island-tile { background: #fff !important; }
/* ==========================================================================
   HEADER (same behaviour as 2.4: glass bar, one-colour logo white over navy)
   ========================================================================== */
:is(html.dk, .navy-sec) .hdr.on-dark .hdr-bar { background: linear-gradient(180deg, rgba(0, 18, 43, .66), rgba(0, 18, 43, .5)); }
@media (max-width: 820px) {
  :is(html.dk, .navy-sec) .wa.glass { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(57, 244, 204, .4), 0 14px 28px -10px rgba(0, 0, 0, .7); }
}
/* ==========================================================================
   HOME · HERO — kinetic slogan, extruded 3D mark, floating marks
   ========================================================================== */
@keyframes spin { to { transform: rotate(360deg); } }
/* the extruded 3D logo mark */
/* floating marks at different depths (parallax: mouse + scroll; depth of field) */
@keyframes fl-bob { from { transform: translate3d(0, -12px, 0) rotate(var(--r)); } to { transform: translate3d(0, 14px, 0) rotate(calc(var(--r) * -.5)); } }
/* ==========================================================================
   HOME · LOGO MARQUEE
   ========================================================================== */
@keyframes mq { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(50%, 0, 0); } }
@keyframes mq-rev { from { transform: translate3d(50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
/* ==========================================================================
   HOME · STATS on tilted glass cards
   ========================================================================== */
/* ==========================================================================
   POSTER CARD (≈3:4) — featured works, portfolio, related projects
   ========================================================================== */
.pst { --rx: 0deg; --ry: 0deg; position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 28px; overflow: hidden; isolation: isolate; container-type: inline-size; color: #fff;
  background: radial-gradient(115% 70% at 50% 16%, var(--c3) 0%, var(--c) 50%, var(--c2) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 60px -32px rgba(0, 0, 0, .8);
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .7s var(--spring), box-shadow .4s var(--ease); }
.pst.is-tilt { transition: transform .14s linear, box-shadow .4s var(--ease); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 50px 80px -34px rgba(0, 0, 0, .9); }
.pst-lt { color: var(--navy); }
.pst-ghost { position: absolute; z-index: 0; top: 5%; inset-inline: 5%; text-align: center; white-space: nowrap; overflow: hidden; padding-bottom: .06em;
  font-size: min(23cqw, calc(140cqw / max(4, var(--n, 6)))); font-weight: 700; line-height: 1.02; letter-spacing: -.035em;
  color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .08) 100%); -webkit-background-clip: text; background-clip: text; transition: transform .8s var(--ease); }
.pst-lt .pst-ghost { background-image: linear-gradient(180deg, rgba(0, 18, 43, .2) 0%, rgba(0, 18, 43, .06) 100%); }

.pm { position: absolute; inset: 23.5% 0 31%; z-index: 1; display: block; overflow: hidden; transition: transform .8s var(--ease); }
.pst-web .pm { -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, #000 74%, transparent 100%); }
.pm .mk { position: absolute; }
.pm-ph .mk-phone { width: 46%; left: 27%; top: 3%; transform: rotate(-4deg); filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .4)); transition: transform .8s var(--spring); }
.pm-dv .mk-browser { width: 100%; top: 5%; left: -16%; transform: rotate(-3deg); filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .35)); transition: transform .8s var(--spring); }
.pm-dv .mk-phone { width: 34%; right: 8%; top: 14%; transform: rotate(5deg); filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .45)); transition: transform .8s var(--spring); }
.pm-cv .pm-front { position: absolute; aspect-ratio: 1; overflow: hidden; display: block; border-radius: 18px; transition: transform .8s var(--spring); }
.pm-cv .pm-front { height: 100%; left: 50%; top: 0; translate: -50% 0; transform: rotate(-2deg); box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); }
.pst-cov .pm { overflow: visible; }
.pm-cv img { width: 100%; height: 100%; object-fit: cover; }
.pst-cap { position: absolute; z-index: 2; inset-inline: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1.4cqw; padding: 0 7cqw 6.5cqw 18cqw; }

.pst-k { display: flex; align-items: center; gap: 2cqw; font-size: max(11.5px, 3.8cqw); font-weight: 500; line-height: 1.3; }
.pst-k > span:first-child { opacity: .8; }
.pst-n { font-size: max(17px, 7.8cqw); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.pst-tags { display: flex; flex-wrap: wrap; gap: 1.6cqw; margin-top: .8cqw; }
.pst-tags i { font-style: normal; font-size: max(11px, 3.5cqw); font-weight: 500; line-height: 1; padding: 1.7cqw 2.8cqw; border-radius: 999px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); white-space: nowrap; }
.pst-lt .pst-tags i { background: rgba(0, 18, 43, .08); box-shadow: inset 0 0 0 1px rgba(0, 18, 43, .1); }
.pst-go { position: absolute; z-index: 3; bottom: 6.5cqw; left: 6cqw; width: max(32px, 10cqw); height: max(32px, 10cqw); border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); transition: background-color .3s var(--ease), color .3s var(--ease), transform .5s var(--spring); }
.pst-go .sd-i { width: 46%; height: 46%; }
.pst-lt .pst-go { background: rgba(0, 18, 43, .08); }
.pst .chip-new { position: static; height: max(20px, 6.4cqw); padding: 0 2.6cqw; font-size: max(11px, 3.4cqw); box-shadow: none; }
.pst-glare { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .4s var(--ease);
  background: radial-gradient(55% 45% at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 72%); }
.is-tilt > .pst-glare { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .pst:hover .pm-ph .mk-phone { transform: rotate(-1deg) translateY(-3%) scale(1.04); }
  .pst:hover .pm-dv .mk-browser { transform: rotate(-1deg) translateX(3%); }
  .pst:hover .pm-dv .mk-phone { transform: rotate(1deg) translateY(-4%) scale(1.04); }
  .pst:hover .pm-cv .pm-front { transform: rotate(0) scale(1.03); }
  .pst:hover .pst-ghost { transform: translateY(-3%); }
  .pst:hover .pst-go { background: var(--mint); color: var(--navy); transform: rotate(-8deg) scale(1.08); }
}
@container (max-width: 250px) {
  .pst-tags { display: none; }
  .pst-cap { padding-bottom: 6cqw; gap: 1cqw; }
}
/* ==========================================================================
   HOME · FEATURED — pinned horizontal gallery (desktop) / swipe rail (phones)
   ========================================================================== */
.fx { position: relative; padding: clamp(40px, 5vw, 80px) 0; overflow: hidden; }
.fx-pin { position: relative; }
.fx-ghost { position: absolute; z-index: 0; inset-inline: 0; bottom: 4%; pointer-events: none; white-space: nowrap; overflow: hidden; }
.fx-ghost span { display: inline-block; font-size: clamp(120px, 22vw, 360px); font-weight: 700; letter-spacing: -.05em; line-height: .9; padding-bottom: .05em; color: transparent; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)); -webkit-background-clip: text; background-clip: text; }
.fx-rail { position: relative; z-index: 1; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 14px max(var(--gut), calc((100% - var(--max)) / 2)) 30px; scroll-padding-inline: max(var(--gut), calc((100% - var(--max)) / 2)); }
.fx-rail::-webkit-scrollbar { display: none; }
.fx-track { display: flex; align-items: center; gap: 22px; width: max-content; }
.fx-intro { flex: none; width: min(380px, 30vw); display: flex; flex-direction: column; align-items: flex-start; gap: 18px; scroll-snap-align: start; }
.fx-intro .eyebrow { margin: 0; }
.fx-intro .lead { color: var(--ink-2); max-width: 24ch; }
.fx-hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; color: var(--ink-3); }
.fx-hint .sd-i { width: 18px; height: 18px; }
.fx-c { flex: none; width: clamp(300px, 27vw, 420px); scroll-snap-align: start; }
.fx-c .pst-ghost { translate: calc(var(--p, 0) * -70px) 0; }

.fx-end { flex: none; width: clamp(280px, 22vw, 340px); aspect-ratio: 3 / 4; border-radius: 28px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 12px; padding: 30px;
  scroll-snap-align: start; background: radial-gradient(90% 60% at 50% 20%, rgba(57, 244, 204, .2), rgba(57, 244, 204, 0) 70%), var(--card); box-shadow: var(--card-sh), inset 0 0 0 1px rgba(57, 244, 204, .2);
  transition: box-shadow .4s var(--ease), transform .5s var(--spring); }
.fx-end-n { font-size: clamp(80px, 8vw, 128px); font-weight: 700; line-height: .85; letter-spacing: -.06em; color: var(--mint); }
.fx-end-k { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.fx-end .btn { margin-top: 10px; }
@media (hover: hover) and (pointer: fine) {
  .fx-end:hover { box-shadow: var(--card-hov); transform: translateY(-6px); }
}
.fx-prog { display: none; }
/* pinned (desktop + GSAP) */
.fx.is-pin { padding: 0; }
.fx.is-pin .fx-pin { height: 100vh; min-height: 640px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.fx.is-pin .fx-rail { overflow: visible; scroll-snap-type: none; padding: calc(var(--hdr-top) + var(--hdr-h) + 40px) 0 0; }
.fx.is-pin .fx-track { padding-inline: max(var(--gut), calc((100vw - var(--max)) / 2)); gap: 30px; will-change: transform; }
.fx.is-pin .fx-c { width: calc(min(64vh, 610px) * .75); }
.fx.is-pin .fx-end { width: calc(min(64vh, 610px) * .62); aspect-ratio: auto; height: min(64vh, 610px); }
.fx.is-pin .fx-prog { display: flex; align-items: center; gap: 18px; position: absolute; inset-inline: 0; top: calc(var(--hdr-top) + var(--hdr-h) + max(18px, 3.2vh)); z-index: 2; font-size: 14px; color: var(--ink-2); }
.fx-num { font-variant-numeric: tabular-nums; direction: ltr; flex: none; }
.fx-num b { color: #fff; font-size: 18px; }
.fx-bar { flex: 1; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.fx-bar i { display: block; height: 100%; background: var(--mint); transform-origin: 100% 50%; transform: scaleX(0); box-shadow: 0 0 12px rgba(57, 244, 204, .7); }
.fx-name { flex: none; min-width: 120px; font-weight: 600; color: #fff; }
.fx-name.swap { animation: hx-swap .5s var(--ease); }
@keyframes hx-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
  .fx { padding: 30px 0 56px; }
  .fx-pin > .wrap .fx-intro { width: auto; gap: 14px; margin-bottom: 18px; }
  .fx-ghost { bottom: auto; top: 0; }
  .fx-ghost span { font-size: 34vw; }
  .fx-rail { padding: 6px var(--gut) 24px; }
  .fx-track { gap: 12px; }
  .fx-c { width: 76vw; }
  .fx-end { width: 64vw; padding: 22px; border-radius: 24px; }
  .fx-end-n { font-size: 84px; }
}
/* ==========================================================================
   HOME · "אתרים שבניתי" — mask expansion (pill → full frame), silk ribbon
   ========================================================================== */
.rib { display: block; pointer-events: none; }
:is(html.dk, .navy-sec) .show .rail { --cw: min(1040px, 84vw); --rg: 20px; }
/* pinned (desktop + GSAP) */
/* ==========================================================================
   HOME · SERVICES (springy cubes on desktop, card-stack on phones)
   ========================================================================== */
:is(html.dk, .navy-sec) .svc-sec .svc-card { position: relative; overflow: hidden; isolation: isolate; background: var(--card); color: #fff; box-shadow: var(--card-sh); padding: 30px 26px 26px; min-height: 380px; border-radius: 30px; }
:is(html.dk, .navy-sec) .svc-card .en, :is(html.dk, .navy-sec) .svc-card p { color: var(--ink-2); }
:is(html.dk, .navy-sec) .svc-card .chip { background: rgba(255, 255, 255, .08); color: #fff; }
:is(html.dk, .navy-sec) .svc-card .link-go { color: #fff; }
:is(html.dk, .navy-sec) .svc-card .ic-sq { transition: transform .6s var(--spring), box-shadow .4s var(--ease); box-shadow: 0 10px 30px -10px rgba(57, 244, 204, .6); }
:is(html.dk, .navy-sec) .svc-card::after { content: ""; position: absolute; z-index: -1; inset: auto -30% -50% auto; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(57, 244, 204, .22), rgba(57, 244, 204, 0)); opacity: 0; transition: opacity .5s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  :is(html.dk, .navy-sec) .svc-sec a.svc-card:hover { background: var(--card); box-shadow: var(--card-hov); transform: translateY(-10px) rotate(-1deg); }
  :is(html.dk, .navy-sec) a.svc-card:hover .ic-sq { transform: rotate(-10deg) scale(1.1); }
  :is(html.dk, .navy-sec) a.svc-card:hover::after { opacity: 1; }
}
:is(html.dk, .navy-sec) .svc4[data-fan] .svc-card { background: linear-gradient(165deg, #0b2b55 0%, #04193a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 40px -24px rgba(0, 0, 0, .8); min-height: 0; padding: 22px; }
/* ==========================================================================
   HOME · "נעים מאוד" (light island)
   ========================================================================== */
/* ==========================================================================
   "שלבי הפעולה" — timeline (pinned + pops on desktop, swipe slider on phones)
   ========================================================================== */
:is(html.dk, .navy-sec) .prx { position: relative; overflow: hidden; }
:is(html.dk, .navy-sec) .prx-head .sh { align-items: flex-end; margin-bottom: clamp(26px, 3vw, 44px); }
:is(html.dk, .navy-sec) .prx-count { display: flex; align-items: baseline; gap: 8px; color: var(--ink-3); font-size: 18px; font-weight: 600; direction: ltr; }
:is(html.dk, .navy-sec) .prx-count b { font-size: clamp(40px, 4vw, 64px); line-height: 1; letter-spacing: -.05em; color: var(--mint); font-variant-numeric: tabular-nums; }
:is(html.dk, .navy-sec) .prx-rail { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gut), calc((100% - var(--max)) / 2)); }
:is(html.dk, .navy-sec) .prx-rail::-webkit-scrollbar { display: none; }
:is(html.dk, .navy-sec) .prx-track { position: relative; width: max-content; min-width: 100%; padding: 6px max(var(--gut), calc((100vw - var(--max)) / 2)) 14px; }
:is(html.dk, .navy-sec) .prx-steps { position: relative; list-style: none; display: flex; gap: 22px; }
:is(html.dk, .navy-sec) .prx-s { flex: none; width: clamp(270px, 26vw, 380px); scroll-snap-align: start; }
:is(html.dk, .navy-sec) .prx-top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
:is(html.dk, .navy-sec) .prx-dot { position: relative; width: 58px; height: 58px; border-radius: 19px; display: grid; place-items: center; flex: none; background: #0a2649; color: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 8px var(--navy); transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease); }
:is(html.dk, .navy-sec) .prx-dot .sd-i { width: 25px; height: 25px; }
:is(html.dk, .navy-sec) .prx-s.on .prx-dot { background: var(--mint); color: var(--navy); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 8px var(--navy), 0 0 46px 4px rgba(57, 244, 204, .5); }
:is(html.dk, .navy-sec) .prx-n { margin-inline-start: auto; font-size: 66px; font-weight: 700; line-height: .85; letter-spacing: -.06em; color: rgba(255, 255, 255, .1); transition: color .45s var(--ease); }
:is(html.dk, .navy-sec) .prx-s.on .prx-n { color: rgba(57, 244, 204, .42); }
:is(html.dk, .navy-sec) .prx-card { padding: 26px 26px 28px; border-radius: 28px; background: var(--card); box-shadow: var(--card-sh); min-height: 200px; }
:is(html.dk, .navy-sec) .prx-card h3 { font-size: clamp(22px, 1.9vw, 27px); letter-spacing: -.02em; }
:is(html.dk, .navy-sec) .prx-card p { margin-top: 10px; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
:is(html.dk, .navy-sec) .prx-foot { display: none; }
html.dk:not(.gs) .prx-s .prx-dot, :is(html.dk, .navy-sec) .prx-s.on .prx-dot { }
@media (min-width: 821px) {
  html.dk:not(.gs) .prx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100vw - var(--gut) * 2, var(--max)); }
  html.dk:not(.gs) .prx-s { width: auto; }
}
/* pinned */
:is(html.dk, .navy-sec) .prx.is-pin { padding-block: 0; }
:is(html.dk, .navy-sec) .prx.is-pin .prx-pin { height: 100vh; min-height: 640px; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--hdr-top) + var(--hdr-h)); }
:is(html.dk, .navy-sec) .prx.is-pin .prx-rail { overflow: visible; scroll-snap-type: none; }
:is(html.dk, .navy-sec) .prx.is-pin .prx-track { will-change: transform; }
:is(html.dk, .navy-sec) .prx.is-pin .prx-s { width: clamp(300px, 28vw, 410px); transform-origin: 50% 100%; }
/* phones: swipe slider, the next card peeks; progress bar + dots */
@media (max-width: 820px) {
  :is(html.dk, .navy-sec) .prx-head .sh { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  :is(html.dk, .navy-sec) .prx-count b { font-size: 40px; }
  :is(html.dk, .navy-sec) .prx-track { padding: 6px var(--gut) 10px; }
  :is(html.dk, .navy-sec) .prx-steps { gap: 12px; }
  :is(html.dk, .navy-sec) .prx-s { width: 78vw; }
  :is(html.dk, .navy-sec) .prx-card { min-height: 0; padding: 22px; border-radius: 24px; }
  :is(html.dk, .navy-sec) .prx-n { font-size: 54px; }
  :is(html.dk, .navy-sec) .prx-foot { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
  :is(html.dk, .navy-sec) .prx-bar { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
  :is(html.dk, .navy-sec) .prx-bar i { display: block; height: 100%; background: var(--mint); transform-origin: 100% 50%; transform: scaleX(.25); transition: transform .3s var(--ease); }
  :is(html.dk, .navy-sec) .prx-dots { display: flex; gap: 6px; }
  :is(html.dk, .navy-sec) .prx-dots i { width: 8px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .22); transition: width .35s var(--ease), background-color .35s var(--ease); }
  :is(html.dk, .navy-sec) .prx-dots i.on { width: 24px; background: var(--mint); }
}
/* ==========================================================================
   HOME · REVIEWS rotator
   ========================================================================== */
:is(html.dk, .navy-sec) .gbadge .sd-stars { color: var(--mint); }
/* ==========================================================================
   HOME · BLOG island + CONTACT
   ========================================================================== */
.cx { position: relative; isolation: isolate; overflow: hidden; }
.cx-glow { position: absolute; z-index: -1; width: 80vw; aspect-ratio: 1; left: 50%; top: -30%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(57, 244, 204, .16), rgba(57, 244, 204, 0)); pointer-events: none; }
.cx-big { font-size: clamp(40px, 6.2vw, 104px); line-height: 1; letter-spacing: -.045em; font-weight: 700; max-width: 14em; margin-bottom: clamp(30px, 4vw, 56px); }
.cx-big .ww:last-child .wi { color: var(--mint); }
:is(html.dk, .navy-sec) .cform-head p { color: var(--ink-2); }
:is(html.dk, .navy-sec) .csoc-logo .sd-logo { --logo-text: #fff; --logo-arrow: #fff; --logo-square: var(--mint); }
:is(html.dk, .navy-sec) .csoc ul a { background: rgba(255, 255, 255, .06); color: #fff; }
:is(html.dk, .navy-sec) .csoc ul a i, :is(html.dk, .navy-sec) .csoc-tel i { background: rgba(255, 255, 255, .09); color: var(--mint); }
:is(html.dk, .navy-sec) .csoc-tel { border-top-color: var(--line); }
:is(html.dk, .navy-sec) .csoc-tel small { color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  :is(html.dk, .navy-sec) .csoc ul a:hover { background: var(--mint); color: var(--navy); }
  :is(html.dk, .navy-sec) .csoc ul a:hover i { background: rgba(0, 18, 43, .1); color: var(--navy); }
}
:is(html.dk, .navy-sec) .cform > .tex .g1 { background: radial-gradient(closest-side, rgba(57, 244, 204, .2), rgba(57, 244, 204, 0)); }
:is(html.dk, .navy-sec) .tex .g2 { background: radial-gradient(closest-side, rgba(60, 120, 210, .18), rgba(60, 120, 210, 0)); }
@media (max-width: 820px) {
  .cx-big { font-size: 40px; }
}
/* ---------- CTA (end of inner pages): navy panel lit by mint ---------- */
:is(html.dk, .navy-sec) .panel-glow { background: radial-gradient(55% 80% at 88% 0%, rgba(57, 244, 204, .26), rgba(57, 244, 204, 0) 70%), radial-gradient(50% 70% at 0% 100%, rgba(60, 120, 210, .22), rgba(60, 120, 210, 0) 70%), linear-gradient(160deg, var(--navy-3) 0%, var(--navy-1) 100%);
  color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .07); }
:is(html.dk, .navy-sec) .cta .lead { color: var(--ink-2); }
:is(html.dk, .navy-sec) .cta .eyebrow { color: var(--ink-2); }
:is(html.dk, .navy-sec) .cta-mark .sd-mark { --logo-square: rgba(57, 244, 204, .08); --logo-arrow: rgba(255, 255, 255, .05); }
:is(html.dk, .navy-sec) .form-card { background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(0, 0, 0, .7); }
/* ==========================================================================
   FOOTER — big signature
   ========================================================================== */
/* ==========================================================================
   INNER PAGES
   ========================================================================== */
:is(html.dk, .navy-sec) .ph { position: relative; isolation: isolate; overflow: hidden; }
:is(html.dk, .navy-sec) .ph h1 { font-size: clamp(56px, 9vw, 148px); line-height: .92; letter-spacing: -.05em; }
:is(html.dk, .navy-sec) .ph-marks { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
:is(html.dk, .navy-sec) .ph-marks .sd-mark { position: absolute; --logo-square: rgba(57, 244, 204, .1); --logo-arrow: rgba(255, 255, 255, .1); }
:is(html.dk, .navy-sec) .ph-marks .sd-mark:nth-child(1) { height: 220px; right: 4%; top: 30%; transform: rotate(-12deg); }
:is(html.dk, .navy-sec) .ph-marks .sd-mark:nth-child(2) { height: 120px; left: 8%; top: 58%; transform: rotate(14deg); --logo-square: rgba(57, 244, 204, .18); }
:is(html.dk, .navy-sec) .tex .g1 { background: radial-gradient(closest-side, rgba(57, 244, 204, .22), rgba(57, 244, 204, 0)); }
:is(html.dk, .navy-sec) .tex .g3 { background: radial-gradient(closest-side, rgba(57, 244, 204, .12), rgba(57, 244, 204, 0)); }
@media (max-width: 820px) {
  :is(html.dk, .navy-sec) .ph h1 { font-size: clamp(48px, 15vw, 66px); }
  :is(html.dk, .navy-sec) .ph-marks .sd-mark:nth-child(1) { height: 120px; right: -20px; top: 18%; }
  :is(html.dk, .navy-sec) .ph-marks .sd-mark:nth-child(2) { height: 70px; left: 2%; top: 64%; }
}
:is(html.dk, .navy-sec) .filters .seg.glass-dark { -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); background: linear-gradient(180deg, rgba(0, 24, 56, .82), rgba(0, 18, 43, .7)); }
/* portfolio poster grid */
:is(html.dk, .navy-sec) .pg-posters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
:is(html.dk, .navy-sec) .pg-posters.pg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:is(html.dk, .navy-sec) .pg-posters > li { min-width: 0; }
:is(html.dk, .navy-sec) .pgrid > li.enter { animation: pop-in .8s var(--spring) both; animation-delay: var(--d, 0ms); }
@keyframes pop-in { from { opacity: 0; transform: translateY(40px) scale(.9); } to { opacity: 1; transform: none; } }
@media (max-width: 1180px) {
  :is(html.dk, .navy-sec) .pg-posters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  :is(html.dk, .navy-sec) .pg-posters, :is(html.dk, .navy-sec) .pg-posters.pg-3 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pg-posters .pst { border-radius: 20px; }
  .pg-posters .pst .chip-new { height: 22px; font-size: 11.5px; padding: 0 8px; }
}
/* website project */
:is(html.dk, .navy-sec) .wh { position: relative; isolation: isolate; }
:is(html.dk, .navy-sec) .wh-client { color: var(--ink-2); }
:is(html.dk, .navy-sec) .w-h1 { font-size: clamp(40px, 5.2vw, 82px); line-height: 1.02; letter-spacing: -.04em; }
:is(html.dk, .navy-sec) .wh .w-h1 { max-width: 20ch; margin: 16px auto 0; }
:is(html.dk, .navy-sec) .wh-stage { position: relative; isolation: isolate; background: radial-gradient(60% 60% at 50% 34%, color-mix(in srgb, var(--c) 70%, #fff 8%) 0%, color-mix(in srgb, var(--c) 55%, var(--navy)) 45%, var(--navy-1) 100%); }
:is(html.dk, .navy-sec) .facts .tile > p { color: var(--ink-2); }
:is(html.dk, .navy-sec) .meta-list li > span:first-child { color: var(--ink-2); }
:is(html.dk, .navy-sec) .desk-sec.island { padding-block: clamp(70px, 8vw, 120px); }
:is(html.dk, .navy-sec) .mob-sec { position: relative; isolation: isolate; overflow: hidden; }
:is(html.dk, .navy-sec) .mob-glow { position: absolute; z-index: -1; width: 70vw; aspect-ratio: 1; left: 50%; top: 40%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(57, 244, 204, .16), rgba(57, 244, 204, 0)); }
:is(html.dk, .navy-sec) .quote-big .by small { color: var(--ink-2); }
:is(html.dk, .navy-sec) .qpanel { position: relative; overflow: hidden; isolation: isolate; }
:is(html.dk, .navy-sec) .q-ghost { position: absolute; z-index: -1; top: -20%; right: 4%; font-size: 520px; line-height: 1; font-family: Georgia, serif; color: rgba(57, 244, 204, .07); pointer-events: none; }
:is(html.dk, .navy-sec) .pn .th { background: var(--c, var(--navy-2)); }
:is(html.dk, .navy-sec) .pn small, :is(html.dk, .navy-sec) .pn .t { color: var(--ink-2); }
:is(html.dk, .navy-sec) .tour { box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08); }
/* brand project */
:is(html.dk, .navy-sec) .bh { position: relative; isolation: isolate; }
:is(html.dk, .navy-sec) .bh-txt .desc { color: var(--ink-2); }
:is(html.dk, .navy-sec) .bh-txt .w-h1 { margin-top: 22px; font-size: clamp(38px, 4.4vw, 68px); }
:is(html.dk, .navy-sec) .tile.bh-cover { background: var(--c, var(--navy-2)); transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .7s var(--spring), box-shadow .4s var(--ease); }
:is(html.dk, .navy-sec) .tile.bh-cover.is-tilt { transition: transform .14s linear; }
:is(html.dk, .navy-sec) .gal button { background: var(--navy-2); }
/* services page */
:is(html.dk, .navy-sec) .svc-page .svc-row { background: var(--card); box-shadow: var(--card-sh); }
:is(html.dk, .navy-sec) .svc-txt .en, :is(html.dk, .navy-sec) .svc-txt .num, :is(html.dk, .navy-sec) .svc-txt > p, :is(html.dk, .navy-sec) .svc-wide-head .en, :is(html.dk, .navy-sec) .svc-wide-head .num, :is(html.dk, .navy-sec) .svc-wide-head .hd p { color: var(--ink-2); }
:is(html.dk, .navy-sec) .svc-vis { background: radial-gradient(60% 60% at 50% 50%, rgba(57, 244, 204, .12), rgba(57, 244, 204, 0) 70%); }
:is(html.dk, .navy-sec) .svc-sub.t-navy { background: linear-gradient(160deg, rgba(57, 244, 204, .2) 0%, rgba(57, 244, 204, .04) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(57, 244, 204, .22); }
:is(html.dk, .navy-sec) .svc-sub.t-off { background: var(--card); color: #fff; box-shadow: var(--card-sh); }
:is(html.dk, .navy-sec) .svc-sub.t-off .svc-sub-txt > p, :is(html.dk, .navy-sec) .svc-sub.t-off .en { color: var(--ink-2); }
:is(html.dk, .navy-sec) .inc li .n { color: var(--ink-3); }
:is(html.dk, .navy-sec) .sys-stage { background: radial-gradient(60% 60% at 50% 40%, rgba(57, 244, 204, .14), rgba(57, 244, 204, 0) 70%), linear-gradient(180deg, var(--navy-3), var(--navy-1)); }
/* about */
:is(html.dk, .navy-sec) .ab-studio.island-tile { color: var(--navy); }
:is(html.dk, .navy-sec) .ab-studio .big { color: var(--navy); }
:is(html.dk, .navy-sec) .ab-me-txt p.me { color: var(--ink-2); }
:is(html.dk, .navy-sec) .ab-sign small { color: var(--ink-2); }
:is(html.dk, .navy-sec) .ab-brand { background: radial-gradient(70% 70% at 30% 20%, rgba(57, 244, 204, .2), rgba(57, 244, 204, 0) 70%), linear-gradient(160deg, var(--navy-3), var(--navy-1)); }
:is(html.dk, .navy-sec) .vals li .ic-sq, :is(html.dk, .navy-sec) .vals li:nth-child(1) .ic-sq { background: var(--mint); color: var(--navy); box-shadow: 0 10px 26px -10px rgba(57, 244, 204, .6); }
@media (hover: hover) and (pointer: fine) {
  :is(html.dk, .navy-sec) .vals li:hover { background: var(--card); color: #fff; }
  :is(html.dk, .navy-sec) .vals li:hover .ic-sq { background: var(--mint); color: var(--navy); }
}
:is(html.dk, .navy-sec) .tools .ab { background: rgba(255, 255, 255, .08); color: #fff; }
:is(html.dk, .navy-sec) .tools li:nth-child(odd) .ab { background: var(--mint); color: var(--navy); }
:is(html.dk, .navy-sec) .t-stat .k { color: var(--ink-2); }
:is(html.dk, .navy-sec) .t-stat.mint { background: linear-gradient(160deg, #6ff8dc, var(--mint) 60%); color: var(--navy); }
:is(html.dk, .navy-sec) .t-stat.mint .k { color: rgba(0, 18, 43, .78); }
:is(html.dk, .navy-sec) .t-stat.g .gi { background: #fff; }
@media (max-width: 820px) {
  :is(html.dk, .navy-sec) .vals { grid-template-columns: 1fr 1fr; gap: 10px; }
  :is(html.dk, .navy-sec) .vals li { min-height: 150px; padding: 18px; gap: 18px; border-radius: 22px; }
  :is(html.dk, .navy-sec) .vals li h3 { font-size: 17px; }
}
/* reviews page */
:is(html.dk, .navy-sec) .r-card blockquote { color: #fff; }
:is(html.dk, .navy-sec) .r-card .by { border-top-color: var(--line); }
:is(html.dk, .navy-sec) .r-card .by small { color: var(--ink-2); }
:is(html.dk, .navy-sec) .r-card .av { background: rgba(57, 244, 204, .14); color: var(--mint); }
:is(html.dk, .navy-sec) .r-card .proj { background: rgba(255, 255, 255, .08); }
@media (hover: hover) and (pointer: fine) {
  :is(html.dk, .navy-sec) .r-card .proj:hover { background: var(--mint); color: var(--navy); }
}
:is(html.dk, .navy-sec) .r-google { background: radial-gradient(80% 60% at 80% 0%, rgba(57, 244, 204, .35), rgba(57, 244, 204, 0) 70%), linear-gradient(160deg, var(--navy-3), var(--navy-1)) !important; box-shadow: inset 0 0 0 1px rgba(57, 244, 204, .25), var(--card-sh) !important; }
/* blog + post */
:is(html.dk, .navy-sec) .feat-post .bd p { color: var(--ink-2); }
:is(html.dk, .navy-sec) .post-hd { position: relative; isolation: isolate; }
:is(html.dk, .navy-sec) .post-hd > .tex { inset: -40% 0 0; }
:is(html.dk, .navy-sec) article.post { overflow-x: clip; }
:is(html.dk, .navy-sec) .post-g { border-top-color: var(--line-2); }
:is(html.dk, .navy-sec) .post-k { color: var(--ink-2); }
:is(html.dk, .navy-sec) .post-tx .w-h1 { font-size: clamp(36px, 4.4vw, 66px); line-height: 1.06; }
:is(html.dk, .navy-sec) .byline small { color: var(--ink-2); }
:is(html.dk, .navy-sec) .post-cover { box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .08); background: var(--navy-2); }
:is(html.dk, .navy-sec) .post-author .pa-g { color: #fff; }
:is(html.dk, .navy-sec) .pa-tx p:not(.eyebrow):not(.role), :is(html.dk, .navy-sec) .pa-tx .role { color: var(--ink-2) !important; }
/* contact page */
:is(html.dk, .navy-sec) .c-card.navy { background: var(--card); box-shadow: var(--card-sh); }
:is(html.dk, .navy-sec) .c-card.navy .ic-sq { background: rgba(57, 244, 204, .14); color: var(--mint); box-shadow: inset 0 0 0 1px rgba(57, 244, 204, .2); }
@media (hover: hover) and (pointer: fine) {
  :is(html.dk, .navy-sec) .c-card.navy:hover { background: #fff; color: var(--navy); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 50px -16px rgba(57, 244, 204, .5); }
}
/* ---------- brand cursor: white arrow over navy ---------- */
:is(html.dk, .navy-sec) .bcur.dark b { background: var(--mint); color: var(--navy); }
/* ---------- springy entrances: hidden only while GSAP is about to run them ---------- */
html.dk.gs [data-pop], html.dk.gs [data-spring] { will-change: auto; }
/* ---------- reduced motion: everything static ---------- */
@media (prefers-reduced-motion: reduce) {
  .pst { transition: none; }
}