/* ============================================================
   ARIEL SHEMESH — PORTFOLIO V2
   Light Liquid Glass system, translated from the Averya quality
   bar into Ariel's own blue/ink identity. Loaded after styles.css.
   ============================================================ */

@font-face {
  font-family: "Heebo Portfolio";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/type/heebo-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Heebo Portfolio";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/type/heebo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Assistant Portfolio";
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url("/assets/type/assistant-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Assistant Portfolio";
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url("/assets/type/assistant-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Hebrew Portfolio";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/type/ibm-plex-sans-hebrew-400-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "IBM Plex Sans Hebrew Portfolio";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/type/ibm-plex-sans-hebrew-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Hebrew Portfolio";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/type/ibm-plex-sans-hebrew-500-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "IBM Plex Sans Hebrew Portfolio";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/type/ibm-plex-sans-hebrew-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Hebrew Portfolio";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/type/ibm-plex-sans-hebrew-600-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "IBM Plex Sans Hebrew Portfolio";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/type/ibm-plex-sans-hebrew-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans Hebrew Portfolio";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/type/ibm-plex-sans-hebrew-700-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "IBM Plex Sans Hebrew Portfolio";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/type/ibm-plex-sans-hebrew-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Serif Hebrew Portfolio";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/type/noto-serif-hebrew-variable-hebrew.woff2") format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Noto Serif Hebrew Portfolio";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/type/noto-serif-hebrew-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --p-canvas: #f7f8fc;
  --p-canvas-soft: #eff2f8;
  --p-paper: rgba(255, 255, 255, 0.82);
  --p-paper-solid: #ffffff;
  --p-ink: #11131a;
  --p-ink-soft: #454954;
  --p-ink-muted: #747985;
  --p-line: rgba(15, 23, 42, 0.10);
  --p-line-strong: rgba(15, 23, 42, 0.16);
  --p-blue: #335cff;
  --p-blue-deep: #1733b7;
  --p-cyan: #0bb9cf;
  --p-ai: #ed641d;
  --p-ai-soft: #ff9a62;
  --p-dark: #0b1020;
  --p-dark-2: #11192d;
  --p-green: #0d9f6e;
  --p-glass: linear-gradient(180deg, rgba(255,255,255,.88), rgba(245,248,255,.70));
  --p-glass-strong: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,248,253,.84));
  --p-glass-border: 1px solid rgba(255,255,255,.72);
  --p-glass-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(15,23,42,.04),
    0 24px 80px -40px rgba(27,43,86,.34),
    0 8px 24px -16px rgba(27,43,86,.22);
  --p-ease: cubic-bezier(.22, 1, .36, 1);
  --p-ease-apple: cubic-bezier(.32, .72, 0, 1);
  --p-ease-story: cubic-bezier(.16, 1, .3, 1);
  --p-radius: 28px;
  --p-radius-sm: 18px;
  --p-pill: 999px;

  --font-display: "Assistant Portfolio", "Heebo Portfolio", Arial, sans-serif;
  --font-sans: "IBM Plex Sans Hebrew Portfolio", "Heebo Portfolio", Arial, sans-serif;
  --font-editorial: "Noto Serif Hebrew Portfolio", Georgia, serif;
  --font-product: "Space Grotesk", "IBM Plex Sans Hebrew Portfolio", Arial, sans-serif;
  --font-code: "JetBrains Mono", ui-monospace, monospace;
}

html:has(body.portfolio-v2) {
  color-scheme: light;
  background: var(--p-canvas);
  scroll-padding-top: 108px;
  scroll-behavior: smooth;
}

body.portfolio-v2 {
  min-height: 100vh;
  color: var(--p-ink);
  background:
    radial-gradient(72% 46% at 7% 4%, rgba(51,92,255,.15), transparent 67%),
    radial-gradient(56% 42% at 94% 12%, rgba(11,185,207,.115), transparent 69%),
    radial-gradient(42% 30% at 74% 54%, rgba(126,87,255,.055), transparent 74%),
    linear-gradient(180deg, #fbfcff 0%, #f6f8fc 38%, #f0f3f9 100%);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: -.016em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  animation: p-page-in .55s var(--p-ease) both;
}

@keyframes p-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.portfolio-v2::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .36;
  background-image:
    linear-gradient(rgba(31,51,94,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,51,94,.035) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 38%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0 38%, transparent 82%);
}

body.portfolio-v2 .site-wrap {
  width: min(100%, 1360px);
  max-width: none;
  padding-inline: clamp(18px, 4vw, 64px);
}

body.portfolio-v2 :where(h1, h2, h3, h4) {
  font-family: var(--font-display);
  color: var(--p-ink);
  text-wrap: balance;
  letter-spacing: -.045em;
  font-synthesis: none;
}

body.portfolio-v2 :where(p, li) {
  text-wrap: pretty;
}

body.portfolio-v2 :where(bdi[dir="ltr"], [dir="ltr"]) {
  unicode-bidi: isolate;
}

body.portfolio-v2 .p-editorial {
  font-family: var(--font-editorial);
  font-weight: 560;
  letter-spacing: -.04em;
}

body.portfolio-v2 ::selection {
  color: #fff;
  background: var(--p-blue);
}

body.portfolio-v2 :where(a, button, input, textarea):focus-visible {
  outline: 3px solid rgba(51,92,255,.95);
  outline-offset: 3px;
}

/* The card overlay is inset:0 inside an `overflow: hidden` card, so an
   OUTLINE — which paints outside the box — is clipped away entirely and the
   keyboard user sees nothing. An inset ring paints within the clip. */
body.portfolio-v2 .project-card > .p-card-hit:focus-visible { outline: none; }
body.portfolio-v2 .project-card:has(> .p-card-hit:focus-visible) {
  outline: 3px solid rgba(51,92,255,.95);
  outline-offset: 3px;
}

/* ───────────────────────────── Navigation */
body.portfolio-v2 .nav {
  top: 10px;
  width: min(calc(100% - 24px), 1280px);
  min-height: 68px;
  padding: 10px 12px;
  border-radius: var(--p-pill);
  background: var(--p-glass);
  color: var(--p-ink);
  border: var(--p-glass-border);
  box-shadow: var(--p-glass-shadow);
  backdrop-filter: saturate(185%) blur(24px);
  -webkit-backdrop-filter: saturate(185%) blur(24px);
  transition:
    top .35s var(--p-ease),
    background .35s var(--p-ease),
    box-shadow .35s var(--p-ease);
}

body.portfolio-v2 .nav.scrolled {
  top: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,248,255,.82));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 28px 70px -36px rgba(24,39,84,.45),
    0 8px 22px -16px rgba(24,39,84,.30);
}

body.portfolio-v2 .nav.over-light,
body.portfolio-v2 .nav.over-light.scrolled {
  color: var(--p-ink);
  border-color: rgba(255,255,255,.76);
}

body.portfolio-v2 .nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--p-ink) !important;
  font-family: "Space Grotesk", var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
  animation: none;
}

body.portfolio-v2 .nav-logo .logo-3d {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: none !important;
}

body.portfolio-v2 .nav-logo .brand-name {
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

body.portfolio-v2 .nav-links {
  align-items: center;
  gap: 3px;
}

body.portfolio-v2 .nav-item {
  padding: 0;
  margin: 0;
}

body.portfolio-v2 .nav-trigger,
body.portfolio-v2 .nav.over-light .nav-trigger {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: var(--p-pill);
  color: var(--p-ink-soft);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}

body.portfolio-v2 .nav-trigger:hover,
body.portfolio-v2 .nav-item:hover .nav-trigger,
body.portfolio-v2 .nav.over-light .nav-item:hover .nav-trigger {
  color: var(--p-ink);
  background: rgba(25,38,77,.06);
}

body.portfolio-v2 .nav-trigger.active {
  color: var(--p-ink);
  background: rgba(51,92,255,.09);
}

body.portfolio-v2 .nav-cta,
body.portfolio-v2 .nav.over-light .nav-cta {
  min-height: 46px;
  padding: 10px 18px;
  border-radius: var(--p-pill);
  border: 0;
  color: #fff;
  background: var(--p-ink);
  box-shadow: 0 12px 24px -15px rgba(10,15,28,.65);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  transition: transform .22s var(--p-ease), background .22s ease, box-shadow .22s ease;
}

body.portfolio-v2 .nav-cta:hover,
body.portfolio-v2 .nav.over-light .nav-cta:hover {
  color: #fff;
  background: var(--p-blue-deep);
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -16px rgba(23,51,183,.72);
}

body.portfolio-v2 .nav-burger,
body.portfolio-v2 .nav.over-light .nav-burger {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--p-ink);
  background: rgba(15,23,42,.055);
}

body.portfolio-v2 .drawer {
  display: none;
  background:
    radial-gradient(80% 54% at 12% 8%, rgba(51,92,255,.18), transparent 70%),
    #f7f9fd;
  color: var(--p-ink);
}

body.portfolio-v2 .drawer.open { display: flex; }
body.portfolio-v2 .drawer-close {
  color: var(--p-ink);
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.08);
}
body.portfolio-v2 .drawer ul a {
  color: var(--p-ink);
  border-color: rgba(15,23,42,.10);
  font-family: var(--font-display);
  font-weight: 750;
  letter-spacing: -.035em;
}
body.portfolio-v2 .drawer ul a::after { color: var(--p-blue); }

/* ───────────────────────────── Shared actions and labels */
body.portfolio-v2 .eyebrow,
body.portfolio-v2 .project-cat,
body.portfolio-v2 .article-tag {
  color: var(--p-blue);
  opacity: 1;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}
/* The same blue clears AA on the white cards (.project-cat) but measured
   4.16:1 on the case-study hero's warm paper, so only that instance darkens. */
body.portfolio-v2 .page-hero .article-tag { color: #2648d6; }

.p-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: var(--p-pill);
  color: var(--p-blue-deep);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(51,92,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.p-kicker:has(bdi[dir="ltr"]) {
  font-family: var(--font-code);
  font-size: 10px;
  letter-spacing: .09em;
}
.p-kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--p-green);
  box-shadow: 0 0 0 5px rgba(13,159,110,.10);
}

body.portfolio-v2 :is(.btn-apple, .cta-pill, .p-btn-primary) {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--p-pill);
  color: #fff;
  background: var(--p-blue);
  border: 1px solid rgba(23,51,183,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 16px 28px -18px rgba(51,92,255,.72);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: transform .25s var(--p-ease), background .25s ease, box-shadow .25s ease;
}

body.portfolio-v2 :is(.btn-apple, .cta-pill, .p-btn-primary):hover {
  color: #fff;
  background: var(--p-blue-deep);
  transform: translateY(-2px);
  box-shadow: 0 20px 34px -18px rgba(23,51,183,.78);
}

body.portfolio-v2 :is(.btn-apple, .cta-pill, .p-btn-primary):active {
  transform: scale(.975);
  transition-duration: .08s;
}

body.portfolio-v2 :is(.btn-apple-ghost-light, .btn-cream-ghost, .p-btn-secondary) {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--p-pill);
  color: var(--p-ink);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(15,23,42,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  transition: transform .25s var(--p-ease), border-color .25s ease, background .25s ease;
}

body.portfolio-v2 :is(.btn-apple-ghost-light, .btn-cream-ghost, .p-btn-secondary):hover {
  color: var(--p-blue-deep);
  border-color: rgba(51,92,255,.28);
  background: rgba(255,255,255,.88);
  transform: translateY(-2px);
}

/* ───────────────────────────── Home hero */
body.portfolio-home .hero {
  min-height: 100svh;
  overflow: clip;
  padding: 136px 0 72px;
  color: var(--p-ink);
  background:
    radial-gradient(58% 62% at 12% 26%, rgba(51,92,255,.17), transparent 64%),
    radial-gradient(44% 54% at 90% 14%, rgba(11,185,207,.14), transparent 66%),
    radial-gradient(36% 44% at 72% 88%, rgba(125,80,255,.10), transparent 70%),
    radial-gradient(28% 32% at 24% 97%, rgba(255,158,102,.08), transparent 74%),
    linear-gradient(180deg, #ffffff, rgba(246,249,255,.55) 52%, rgba(243,247,255,.2));
}

/* Living aurora: a pre-blurred tint layer that drifts very slowly. Decorative
   only — transform-driven so it stays on the compositor, desktop-only so
   mobile paint never pays for it, and frozen under reduced motion. */
body.portfolio-home .hero::before {
  content: "";
  position: absolute;
  inset: -24% -16% auto;
  height: 92%;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
  filter: blur(72px);
  background:
    radial-gradient(34% 42% at 30% 38%, rgba(51,92,255,.15), transparent 62%),
    radial-gradient(30% 38% at 74% 26%, rgba(11,185,207,.12), transparent 62%),
    radial-gradient(26% 34% at 56% 72%, rgba(125,80,255,.10), transparent 64%);
}


body.portfolio-home .hero::after {
  content: "";
  position: absolute;
  inset: auto 4vw 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.14), transparent);
}

body.portfolio-home .hero .orb {
  opacity: .18;
  filter: blur(100px);
}

body.portfolio-home .hero .grid-dark {
  opacity: .38 !important;
  background-image:
    linear-gradient(rgba(30,54,110,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,54,110,.045) 1px, transparent 1px);
  background-size: 72px 72px;
}

body.portfolio-home .hero .noise { opacity: .016; mix-blend-mode: multiply; }

/* ───────────────────────────── Hero mantis (גמל שלמה)
   The silhouette that walks the hero. Its motion is NOT here — assets/mantis.js
   owns the gait, because planted feet and IK-solved joints are not something
   keyframes can express. CSS owns placement, scale and the still states.

   The element's CSS position is its RESTING spot, and the walk is a transform
   away from it. That way the two states with no engine running — no JS, and
   prefers-reduced-motion — both leave a mantis sitting sensibly in the hero
   rather than parked off-screen where nobody sees it. */
.p-mantis {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.p-mantis-walk {
  position: absolute;
  /* Physical `left`, not `inset-inline-start`: a decorative absolute overlay
     must not flip with the RTL writing direction. */
  left: 8vw;
  bottom: clamp(58px, 11vh, 128px);
  width: clamp(88px, 8.6vw, 132px);
}

.p-mantis svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--p-ink);
  opacity: .3;
}

.p-hero-grid {
  position: relative;
  z-index: 3;
  min-height: calc(100svh - 208px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  align-items: center;
  gap: clamp(42px, 7vw, 96px);
}

.p-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: translate3d(0, var(--hero-copy-y, 0), 0);
}

/* The hero title is the owner's name in English — a Latin run inside an RTL
   page, isolated with `<bdi dir="ltr">` and broken onto two deliberate lines by
   a <br>. Deliberately NO rule on that bdi: as a block its own LTR direction
   would resolve the inherited `text-align: start` to LEFT, pulling the first
   line off the right-hand spine every other element in the column sits on. */
.p-hero-title {
  max-width: 11.4ch;
  margin: 22px 0 24px;
  font-size: clamp(62px, 7.3vw, 112px);
  font-weight: 800;
  line-height: .91;
  letter-spacing: -.067em !important;
}

.p-hero-title .p-gradient-word {
  display: inline-block;
  color: transparent;
  background:
    linear-gradient(108deg, var(--p-blue-deep) 0%, var(--p-blue) 36%, #5b4bf0 62%, #0e8299 100%);
  background-size: 165% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: p-gradient-settle 1.45s var(--p-ease-story) .42s both;
}

@keyframes p-gradient-settle {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

.p-hero-lede {
  max-width: 630px;
  margin: 0 0 28px;
  color: var(--p-ink-soft);
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.58;
  letter-spacing: -.022em;
}

.p-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11px;
}

.p-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}

.p-meta-chip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: var(--p-pill);
  color: var(--p-ink-soft);
  background: rgba(255,255,255,.54);
  border: 1px solid rgba(15,23,42,.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
  font-size: 13px;
  font-weight: 600;
}

.p-hero-stage {
  position: relative;
  max-width: 610px;
  margin-inline-start: auto;
  isolation: isolate;
}

.p-hero-stage::before {
  content: "";
  position: absolute;
  inset: 11% -8% -10% 12%;
  z-index: -1;
  border-radius: 44%;
  filter: blur(52px);
  background:
    radial-gradient(circle at 22% 22%, rgba(51,92,255,.32), transparent 48%),
    radial-gradient(circle at 78% 70%, rgba(11,185,207,.26), transparent 48%);
}

.p-device {
  position: relative;
  padding: 12px;
  overflow: hidden;
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(229,235,248,.68));
  border: 1px solid rgba(255,255,255,.86);
  box-shadow:
    inset 0 1px 0 #fff,
    0 48px 90px -46px rgba(30,48,100,.62),
    0 18px 40px -28px rgba(30,48,100,.44);
  transform: perspective(1100px) translate3d(0, var(--hero-device-y, 0), 0) rotateY(-3deg) rotateX(1deg);
}

.p-device-bar {
  height: 42px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: 9px;
  color: var(--p-ink-muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .06em;
}

.p-device-dots {
  direction: ltr;
  justify-self: start;
  display: flex;
  gap: 6px;
}
.p-device-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(15,23,42,.14); }
.p-device-dots i:first-child { background: #ff7065; }
.p-device-dots i:nth-child(2) { background: #ffc04f; }
.p-device-dots i:nth-child(3) { background: #3fd78b; }
.p-device-url { direction: ltr; unicode-bidi: isolate; }
.p-device-live {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0a7350;
}
.p-device-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.p-device-screen {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 23px;
  background: var(--p-dark);
}
.p-device-screen video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-identity-card {
  position: absolute;
  inset-inline-end: -22px;
  inset-block-end: -30px;
  width: min(330px, 76%);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: var(--p-glass-shadow);
  backdrop-filter: saturate(170%) blur(22px);
  -webkit-backdrop-filter: saturate(170%) blur(22px);
  transform: translate3d(0, var(--hero-identity-y, 0), 0);
}
.p-identity-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  border: 2px solid rgba(255,255,255,.92);
  box-shadow: 0 10px 22px -12px rgba(30,48,100,.7);
}
.p-identity-text {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.p-identity-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.1;
}
.p-identity-card .p-credential { font-size: 13px; }

/* ───────────────────────────── Sections */
body.portfolio-v2 .section {
  padding: clamp(76px, 9vw, 132px) 0;
}

body.portfolio-v2 .section-header {
  margin-bottom: clamp(28px, 4vw, 48px);
  align-items: flex-end;
}

body.portfolio-v2 .section h2 {
  color: var(--p-ink);
  font-size: clamp(42px, 5.6vw, 78px);
  font-weight: 800;
  line-height: 1.01;
  letter-spacing: -.052em;
}

body.portfolio-v2 .section h2 .accent { color: var(--p-blue); }
body.portfolio-v2 .section .lede {
  max-width: 620px;
  color: var(--p-ink-soft);
  font-size: 18px;
  line-height: 1.65;
}

.p-section-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 520px);
  gap: 32px;
  align-items: end;
  margin-bottom: clamp(30px, 5vw, 58px);
}
.p-section-intro > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.p-section-intro p { color: var(--p-ink-soft); font-size: 18px; line-height: 1.65; }

/* ───────────────────────────── About */
.p-about {
  position: relative;
}
.p-about::before {
  content: "";
  position: absolute;
  inset: 5% 0 auto;
  height: 70%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(255,255,255,0));
}
.p-about-grid {
  position: relative;
  display: grid;
  /* Single column: the portrait now lives as the round avatar in the hero
     identity card, so the copy owns the full width here. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: stretch;
}
.p-about-copy {
  border-radius: 34px;
  background: var(--p-glass);
  border: var(--p-glass-border);
  box-shadow: var(--p-glass-shadow);
}
.p-credential {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--p-ink-soft);
  font-size: 14px;
  font-weight: 600;
}
.p-credential i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--p-blue);
  box-shadow: 0 0 0 5px rgba(51,92,255,.08);
}
.p-about-copy {
  padding: clamp(28px, 5vw, 62px);
}
.p-about-copy h2 {
  max-width: 12ch;
  margin: 18px 0 24px;
}
.p-about-copy > p {
  max-width: 680px;
  color: var(--p-ink-soft);
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.72;
}
/* With the portrait gone the copy card owns the full width, so the heading and
   the paragraph split into the same editorial two-column rhythm the section
   intros already use, instead of leaving half the card empty. Must stay BELOW
   the two rules above — same specificity, so source order decides. */
@media (min-width: 1021px) {
  .p-about-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    column-gap: clamp(34px, 5vw, 76px);
  }
  .p-about-copy .p-kicker { grid-area: 1 / 1; justify-self: start; }
  .p-about-copy h2 { grid-area: 2 / 1; margin-bottom: 0; }
  .p-about-copy > p { grid-area: 2 / 2; align-self: end; max-width: none; }
  .p-about-copy .p-capability-grid { grid-area: 3 / 1 / auto / -1; }
}
.p-capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 36px;
}
.p-capability {
  min-height: 170px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.56);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  transition:
    transform .42s var(--p-ease-story),
    border-color .42s ease,
    background .42s ease;
}
.p-capability:hover {
  transform: translateY(-4px);
  border-color: rgba(51,92,255,.16);
  background: rgba(255,255,255,.80);
}
.p-capability svg {
  width: 28px;
  height: 28px;
  color: var(--p-blue);
}
.p-capability h3 {
  margin-top: 30px;
  font-size: 19px;
  font-weight: 750;
  line-height: 1.15;
}
.p-capability p {
  margin-top: 7px;
  color: var(--p-ink-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* The compact process rail completes the home-page story without adding a
   separate content destination: who I am → how I work → what I built. */
.p-process-story {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(26px, 4vw, 48px);
  border-radius: 34px;
  color: var(--p-ink);
  background:
    radial-gradient(62% 150% at 100% 0%, rgba(51,92,255,.13), transparent 64%),
    radial-gradient(54% 130% at 0 100%, rgba(11,185,207,.11), transparent 68%),
    linear-gradient(155deg, rgba(255,255,255,.96), rgba(243,247,255,.82));
  border: var(--p-glass-border);
  box-shadow: var(--p-glass-shadow);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}
.p-process-story::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(30,54,110,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,54,110,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(100deg, #000, transparent 72%);
  mask-image: linear-gradient(100deg, #000, transparent 72%);
}
.p-process-story > * { position: relative; z-index: 1; }
.p-process-intro h3 {
  max-width: 11ch;
  margin-top: 18px;
  color: var(--p-ink);
  font-family: var(--font-editorial);
  font-size: clamp(32px, 4.2vw, 55px);
  font-weight: 560;
  line-height: 1.05;
  letter-spacing: -.045em;
}
.p-process-intro p {
  max-width: 430px;
  margin-top: 16px;
  color: var(--p-ink-soft);
  font-size: 15px;
  line-height: 1.7;
}
.p-process-story .p-kicker {
  color: var(--p-blue-deep);
  background: rgba(255,255,255,.78);
  border-color: rgba(51,92,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.p-process-track {
  --process-progress: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-process-track::before,
.p-process-track::after {
  content: "";
  position: absolute;
  inset-inline: 10%;
  inset-block-start: 20px;
  height: 1px;
}
.p-process-track::before { background: rgba(15,23,42,.13); }
.p-process-track::after {
  inset-inline-end: auto;
  width: calc(80% * var(--process-progress));
  background: linear-gradient(90deg, var(--p-cyan), var(--p-blue));
  box-shadow: 0 0 18px rgba(51,92,255,.35);
}
.p-process-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding-inline: 10px;
  transition: opacity .62s ease, transform .78s var(--p-ease-story);
}
html.js .p-process-step {
  opacity: .9;
  transform: translateY(8px);
}
.p-process-step.is-active {
  opacity: 1;
  transform: none;
}
.p-process-num {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(15,23,42,.12);
  border-radius: 13px;
  color: var(--p-ink-soft);
  background: rgba(255,255,255,.86);
  box-shadow: inset 0 1px 0 #fff;
  font: 600 10px/1 var(--font-code);
}
.p-process-step.is-active .p-process-num {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, var(--p-blue), var(--p-blue-deep));
}
.p-process-step strong {
  display: block;
  color: var(--p-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
}
.p-process-step small {
  display: block;
  margin-top: 5px;
  /* Darker than --p-ink-muted on purpose: at 12px, and behind the .9 dim of
     an inactive step, the muted token lands under 4.5:1 on this light band. */
  color: #5b6070;
  font-size: 12px;
  line-height: 1.5;
}
.p-process-step.is-active small { color: var(--p-ink-soft); }

/* ───────────────────────────── Project cards */
body.portfolio-v2 .projects-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
}

/* Eleven featured cards. Eleven divides into neither 3 nor 2, so the trailing
   partial row would leave an orphan cell at every wide breakpoint. Both ranges
   solve it the same way: the leftover cards lay out SIDEWAYS (media beside
   copy) and share the last row, which also keeps their height in family with
   the upright cards instead of scaling up with their extra width.
   Wide: a 6-track grid where a normal card spans 2 (=3 per row) and the last
   two span 3 (=2 per row). Mid: 2 columns, so only the eleventh is left over.
   The .02 bounds close the fractional-zoom seam at exactly 760/1240px. */
@media (min-width: 1240px) {
  body.portfolio-v2 .projects-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.portfolio-v2 .projects-wall .project-card { grid-column: span 2; }
  body.portfolio-v2 .projects-wall .project-card:nth-child(10),
  body.portfolio-v2 .projects-wall .project-card:nth-child(11) {
    grid-column: span 3;
    flex-direction: row;
  }
  body.portfolio-v2 .projects-wall .project-card:nth-child(10) .project-card-media,
  body.portfolio-v2 .projects-wall .project-card:nth-child(11) .project-card-media {
    flex: 1 1 54%;
    min-width: 0;
    border-bottom: 0;
    border-inline-start: 1px solid rgba(15,23,42,.08);
  }
  body.portfolio-v2 .projects-wall .project-card:nth-child(10) .shot,
  body.portfolio-v2 .projects-wall .project-card:nth-child(11) .shot {
    aspect-ratio: auto;
    min-height: 0;
  }
  body.portfolio-v2 .projects-wall .project-card:nth-child(10) .project-card-body,
  body.portfolio-v2 .projects-wall .project-card:nth-child(11) .project-card-body {
    flex: 1 1 46%;
    min-width: 0;
    justify-content: center;
  }
}
@media (min-width: 760.02px) and (max-width: 1239.98px) {
  body.portfolio-v2 .projects-wall .project-card:nth-child(11) {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  body.portfolio-v2 .projects-wall .project-card:nth-child(11) .project-card-media {
    flex: 1 1 54%;
    min-width: 0;
    border-bottom: 0;
    border-inline-start: 1px solid rgba(15,23,42,.08);
  }
  body.portfolio-v2 .projects-wall .project-card:nth-child(11) .shot {
    aspect-ratio: auto;
    min-height: 0;
  }
  body.portfolio-v2 .projects-wall .project-card:nth-child(11) .project-card-body {
    flex: 1 1 46%;
    min-width: 0;
    justify-content: center;
  }
}

body.portfolio-v2 .project-card {
  position: relative;
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-radius: var(--p-radius);
  color: var(--p-ink);
  background:
    linear-gradient(155deg, rgba(255,255,255,.94), rgba(244,247,253,.72));
  border: var(--p-glass-border);
  box-shadow: var(--p-glass-shadow);
  backdrop-filter: saturate(150%) blur(18px);
  -webkit-backdrop-filter: saturate(150%) blur(18px);
  transform: translateZ(0);
  transition:
    transform .5s var(--p-ease-story),
    box-shadow .5s var(--p-ease-story),
    border-color .4s ease;
}

body.portfolio-v2 .project-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  z-index: 3;
  opacity: .9;
  background: linear-gradient(90deg, var(--c1, var(--p-blue)), var(--c2, var(--p-cyan)));
}

body.portfolio-v2 .project-card:hover {
  transform: translateY(-7px) scale(1.006);
  border-color: rgba(51,92,255,.18);
  box-shadow:
    inset 0 1px 0 #fff,
    0 46px 90px -48px rgba(20,38,88,.52),
    0 18px 38px -28px rgba(20,38,88,.38);
}

body.portfolio-v2 .project-card::after {
  content: "";
  position: absolute;
  inset: auto -12% -32% 45%;
  height: 48%;
  z-index: 0;
  pointer-events: none;
  opacity: .14;
  filter: blur(34px);
  background: var(--c2, var(--p-cyan));
}

body.portfolio-v2 .project-card > * { position: relative; z-index: 1; }

/* Two entry points per card. `.p-card-hit` is an EMPTY overlay anchor that
   carries the card-wide click to the case study; the media and the body are
   painted ABOVE it and forward their own clicks straight down (they hold no
   text a visitor would try to select), so the only things that swallow a
   click are the real links inside them — today, the live-demo pill. A nested
   <a> inside <a> would be invalid markup, which is why the hit is a sibling. */
/* Selector matches the generic `> *` rule above, which would otherwise force
   this overlay back to `position: relative` and collapse it to zero area —
   leaving the card surface unclickable and keyboard users with no link. */
body.portfolio-v2 .project-card > .p-card-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
body.portfolio-v2 .project-card .project-card-media,
body.portfolio-v2 .project-card .project-card-body {
  z-index: 3;
  pointer-events: none;
}
body.portfolio-v2 .project-card :is(.project-card-media, .project-card-body) :is(a, button) {
  pointer-events: auto;
}
body.portfolio-v2 .project-card-media {
  min-height: 0;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: #eef2f8;
}
body.portfolio-v2 .browser-bar {
  min-height: 42px;
  padding: 9px 12px;
  color: var(--p-ink-muted);
  background: rgba(255,255,255,.80);
  border-bottom-color: rgba(15,23,42,.075);
}
body.portfolio-v2 .browser-bar .burl {
  color: var(--p-ink-muted);
  background: rgba(15,23,42,.045);
  border-color: rgba(15,23,42,.06);
}
body.portfolio-v2 .project-live {
  color: #0a7350;
}
body.portfolio-v2 .project-live .live-dot {
  background: var(--p-green);
  box-shadow: 0 0 0 4px rgba(13,159,110,.09);
}
body.portfolio-v2 .project-card-media .shot {
  aspect-ratio: 16 / 9.65;
  min-height: 0;
}
body.portfolio-v2 .project-card-media .shot::after {
  background: linear-gradient(to top, rgba(5,9,18,.10), transparent 34%);
}
body.portfolio-v2 .project-card-media .shot img {
  object-position: top center;
  transition: transform .7s var(--p-ease);
}
body.portfolio-v2 .project-card.has-cover:hover .shot img { transform: scale(1.025); }
body.portfolio-v2 .project-card.has-cover .project-card-body {
  min-height: 248px;
  padding: 24px 25px 26px;
  gap: 10px;
  background: transparent;
}
body.portfolio-v2 .project-card h3 {
  color: var(--p-ink);
  font-family: var(--font-product);
  font-size: clamp(27px, 2.5vw, 38px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.05em;
}
body.portfolio-v2 .project-card p {
  color: var(--p-ink-soft);
  font-size: 15px;
  line-height: 1.7;
}
body.portfolio-v2 .project-card .project-cat {
  color: var(--c1, var(--p-blue));
}
body.portfolio-v2 .project-chips { margin-top: auto; gap: 6px; }
body.portfolio-v2 .svc-tool {
  color: var(--p-ink-soft);
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}
body.portfolio-v2 .project-card-arrow {
  width: 38px;
  height: 38px;
  color: #fff;
  background: rgba(9,14,28,.70);
  border: 1px solid rgba(255,255,255,.32);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.portfolio-v2 .project-card:hover .project-card-arrow {
  color: #fff;
  background: var(--p-blue);
  border-color: transparent;
  transform: rotate(45deg);
}
/* A text-shadow alone loses the numeral on the light product shots (Click PDF,
   Prompt Engineer, just-skill). Same smoked plate the arrow chip uses, so the
   index reads on every cover. */
body.portfolio-v2 .project-card-media .shot .project-num {
  padding: 3px 8px;
  border-radius: var(--p-pill);
  color: #fff;
  background: rgba(9,14,28,.62);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 10px;
  text-shadow: none;
}

.p-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* Action row: the case-study affordance is a SPAN — the card-wide overlay
   anchor already performs that navigation, so a second link to the same
   place would only add a duplicate stop for keyboard and screen readers. */
.p-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,.08);
}
.p-case-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--p-pill);
  color: var(--p-blue-deep);
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(51,92,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  font-size: 12.5px;
  font-weight: 700;
  transition: background .22s var(--p-ease), border-color .22s ease;
}
.project-card:hover .p-case-link {
  background: #fff;
  border-color: rgba(51,92,255,.36);
}
.p-card-demo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--p-pill);
  color: #fff;
  background: var(--p-blue);
  box-shadow: 0 12px 26px -14px rgba(51,92,255,.85);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .22s var(--p-ease), background .22s ease, box-shadow .22s ease;
}
.p-card-demo:hover {
  color: #fff;
  background: var(--p-blue-deep);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -14px rgba(23,51,183,.9);
}
.p-card-demo:active { transform: scale(.97); }
.p-card-demo svg { width: 14px; height: 14px; }

.p-all-projects {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}

/* Visible media control — no hidden autoplay. */
.p-device,
.project-video-wrap { position: relative; }
.media-toggle {
  position: absolute;
  inset-inline-end: 22px;
  inset-block-end: 22px;
  z-index: 6;
  min-width: 94px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: var(--p-pill);
  color: #fff;
  background: rgba(7,12,24,.70);
  box-shadow: 0 12px 28px -18px rgba(0,0,0,.65);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s var(--p-ease), background .2s ease;
}
/* Above 760px the identity card overlaps the hero device's inline-end corner
   and swallowed every click on the pause button — so the hero's own control
   moves to the opposite corner. Project pages keep the default corner. */
@media (min-width: 761px) {
  .p-device .media-toggle {
    inset-inline-end: auto;
    inset-inline-start: 22px;
  }
}
.media-toggle:hover {
  color: #fff;
  background: rgba(23,51,183,.88);
  transform: translateY(-1px);
}
.media-toggle-icon {
  min-width: 13px;
  direction: ltr;
  font-family: Arial, sans-serif;
  font-size: 11px;
  text-align: center;
}

/* ───────────────────────────── CTA and footer */
.p-contact-band {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto;
  align-items: center;
  gap: 30px;
  padding: clamp(30px, 5vw, 62px);
  border-radius: 36px;
  color: #fff;
  background:
    radial-gradient(62% 130% at 8% 0%, rgba(93,140,255,.55), transparent 66%),
    radial-gradient(58% 110% at 96% 100%, rgba(11,185,207,.5), transparent 68%),
    linear-gradient(145deg, #2a49e8 0%, #1733b7 62%, #12228d 100%);
  box-shadow: 0 40px 90px -50px rgba(23,51,183,.7);
}
.p-contact-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 44px 44px;
}
.p-contact-band > * { position: relative; z-index: 1; }
.p-contact-band h2 {
  max-width: 12ch;
  color: #fff !important;
  font-size: clamp(38px, 5vw, 72px) !important;
}
.p-contact-band p {
  max-width: 650px;
  margin-top: 15px;
  color: rgba(255,255,255,.9);
  font-size: 17px;
}
/* Scoped with `body.portfolio-v2` to out-specify the base button rule
   `body.portfolio-v2 :is(.btn-apple, .cta-pill, .p-btn-primary)`; without it
   the CTA keeps the system blue and vanishes into the blue band. */
body.portfolio-v2 .p-contact-band .p-btn-primary {
  color: var(--p-ink);
  background: #fff;
  border-color: #fff;
  box-shadow: 0 18px 40px -20px rgba(6, 18, 74, .55);
}
body.portfolio-v2 .p-contact-band .p-btn-primary:hover {
  color: var(--p-blue-deep);
  background: #fff;
  box-shadow: 0 22px 46px -20px rgba(6, 18, 74, .65);
}

/* ───────────────────────────── Story motion
   One motion grammar: copy settles first, evidence follows, then the work.
   Every effect is progressive enhancement and is removed for reduced motion. */
@keyframes p-hero-copy-in {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

html.js body.portfolio-home .p-hero-copy > * {
  opacity: 0;
  animation: p-hero-copy-in .82s var(--p-ease-story) both;
}
html.js body.portfolio-home .p-hero-copy > :nth-child(1) { animation-delay: .08s; }
html.js body.portfolio-home .p-hero-copy > :nth-child(2) { animation-delay: .16s; }
html.js body.portfolio-home .p-hero-copy > :nth-child(3) { animation-delay: .26s; }
html.js body.portfolio-home .p-hero-copy > :nth-child(4) { animation-delay: .36s; }
html.js body.portfolio-home .p-hero-copy > :nth-child(5) { animation-delay: .44s; }

html.js body.portfolio-v2 .page-hero .site-wrap > * {
  opacity: 0;
  animation: p-hero-copy-in .78s var(--p-ease-story) both;
}
html.js body.portfolio-v2 .page-hero .site-wrap > :nth-child(1) { animation-delay: .08s; }
html.js body.portfolio-v2 .page-hero .site-wrap > :nth-child(2) { animation-delay: .16s; }
html.js body.portfolio-v2 .page-hero .site-wrap > :nth-child(3) { animation-delay: .26s; }
html.js body.portfolio-v2 .page-hero .site-wrap > :nth-child(4) { animation-delay: .34s; }
html.js body.portfolio-v2 .page-hero .site-wrap > :nth-child(5) { animation-delay: .42s; }

html.js body.portfolio-v2 .reveal {
  --reveal-x: 0px;
  --reveal-y: 34px;
  --reveal-scale: .988;
  opacity: 0;
  transform:
    translate3d(var(--reveal-x), var(--reveal-y), 0)
    scale(var(--reveal-scale));
  transition:
    opacity .82s var(--p-ease-story),
    transform .9s var(--p-ease-story);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}
html.js body.portfolio-v2 .reveal.in {
  opacity: 1;
  transform: none;
  will-change: auto;
}
html.js body.portfolio-v2 .project-card.reveal { --reveal-y: 42px; --reveal-scale: .98; }
html.js body.portfolio-v2 .project-card.reveal:nth-child(even) { --reveal-y: 54px; }

/* `.reveal.in { transform: none }` above lands at the same specificity as the
   card's hover rule but later in the file, so the designed hover lift never
   fired on a revealed card. Restate it here, after the reveal. */
html.js body.portfolio-v2 .project-card.reveal.in:hover {
  transform: translateY(-7px) scale(1.006);
}
@media (hover: none) {
  html.js body.portfolio-v2 .project-card.reveal.in:hover { transform: none; }
}

.p-section-intro h2,
.page-hero h1 {
  position: relative;
}

.p-section-intro h2::after,
body.portfolio-projects .page-hero h1::after,
body.portfolio-v2.contact-page .page-hero h1::after {
  content: "";
  display: block;
  width: clamp(66px, 10vw, 132px);
  height: 3px;
  margin-top: 24px;
  border-radius: var(--p-pill);
  background: linear-gradient(90deg, var(--p-blue), var(--p-cyan));
  transform-origin: right center;
}
html.js .p-section-intro.reveal h2::after {
  transform: scaleX(0);
  transition: transform .9s var(--p-ease-story) .24s;
}
html.js .p-section-intro.reveal.in h2::after { transform: scaleX(1); }

body.portfolio-v2 .footer,
body.portfolio-v2.article-detail .footer {
  padding: 64px 0 32px;
  color: var(--p-ink-soft);
  background: rgba(244,246,251,.78);
  border-top: 1px solid rgba(15,23,42,.08);
}
body.portfolio-v2 .footer-grid {
  grid-template-columns: 1.7fr .8fr 1fr;
  gap: 34px;
}
body.portfolio-v2 .footer h4,
body.portfolio-v2.article-detail .footer h4 { color: var(--p-ink); }
body.portfolio-v2 .footer a,
body.portfolio-v2.article-detail .footer a { color: var(--p-ink-soft); }
body.portfolio-v2 .footer a:hover,
body.portfolio-v2.article-detail .footer a:hover { color: var(--p-blue); }
body.portfolio-v2 .footer-brand p,
body.portfolio-v2.article-detail .footer-grid > div p { color: var(--p-ink-muted); }
body.portfolio-v2 .footer-base,
body.portfolio-v2.article-detail .footer-base {
  color: var(--p-ink-muted);
  border-top-color: rgba(15,23,42,.09);
}
body.portfolio-v2 .footer-base a,
body.portfolio-v2.article-detail .footer-base a { color: var(--p-ink-soft); }

/* ───────────────────────────── Projects hub */
body.portfolio-projects .page-hero {
  min-height: 660px;
  display: flex;
  align-items: center;
  padding: 154px 0 88px;
  color: var(--p-ink);
  background:
    radial-gradient(58% 85% at 12% 12%, rgba(51,92,255,.20), transparent 68%),
    radial-gradient(52% 84% at 94% 70%, rgba(11,185,207,.145), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.30), transparent);
}
body.portfolio-projects .page-hero::after {
  content: "";
  position: absolute;
  inset: auto 5vw 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.14), transparent);
}
body.portfolio-projects .page-hero h1 {
  max-width: 10ch;
  margin-top: 16px;
  color: var(--p-ink);
  font-size: clamp(64px, 9vw, 132px);
  font-weight: 800;
  line-height: .93;
  letter-spacing: -.06em;
}
body.portfolio-projects .page-hero p {
  max-width: 680px;
  margin-top: 25px;
  color: var(--p-ink-soft);
  font-size: clamp(18px, 1.8vw, 24px);
}
body.portfolio-projects .section { padding-top: 80px; }

/* ───────────────────────────── Contact */
body.portfolio-v2.contact-page .page-hero {
  padding: 154px 0 38px;
  color: var(--p-ink);
  background: transparent;
}
body.portfolio-v2.contact-page .page-hero h1 {
  margin-top: 12px;
  color: var(--p-ink);
  font-size: clamp(58px, 8vw, 112px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.055em;
}
body.portfolio-v2.contact-page .page-hero p {
  max-width: 630px;
  color: var(--p-ink-soft);
  font-size: 20px;
}
body.portfolio-v2.contact-page .section { padding: 24px 0 110px; }
body.portfolio-v2 .contact-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(310px, .8fr);
  gap: 18px;
  max-width: 1160px;
  margin-inline: auto;
}
body.portfolio-v2 .contact-form,
body.portfolio-v2 .contact-aside {
  border-radius: 30px;
  color: var(--p-ink);
  background:
    radial-gradient(85% 80% at 100% 0%, rgba(51,92,255,.055), transparent 58%),
    var(--p-glass);
  border: var(--p-glass-border);
  box-shadow: var(--p-glass-shadow);
  backdrop-filter: saturate(155%) blur(22px);
  -webkit-backdrop-filter: saturate(155%) blur(22px);
}
body.portfolio-v2 .contact-form { padding: clamp(22px, 4vw, 42px); }
body.portfolio-v2 .contact-form label {
  gap: 7px;
  color: var(--p-ink-soft);
  font-size: 14px;
  font-weight: 700;
}
body.portfolio-v2 .contact-form :is(input, textarea) {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  border-radius: 16px;
  color: var(--p-ink);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
body.portfolio-v2 .contact-form textarea { min-height: 130px; }
body.portfolio-v2 .contact-form :is(input, textarea)::placeholder { color: #969ba6; }
body.portfolio-v2 .contact-form :is(input, textarea):hover { background: rgba(255,255,255,.9); }
body.portfolio-v2 .contact-form :is(input, textarea):focus {
  outline: none;
  border-color: rgba(51,92,255,.48);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(51,92,255,.09), inset 0 1px 0 #fff;
}
body.portfolio-v2 .contact-aside {
  padding: clamp(24px, 4vw, 38px);
  gap: 8px;
}
body.portfolio-v2 .contact-aside::before { display: none; }
body.portfolio-v2 .contact-aside h3 {
  color: var(--p-ink);
  font-family: var(--font-editorial);
  font-size: 25px;
  font-weight: 600;
}
body.portfolio-v2 .contact-row {
  min-height: 58px;
  color: var(--p-ink-soft);
  border-bottom-color: rgba(15,23,42,.09);
}
body.portfolio-v2 .contact-row a { color: var(--p-ink-soft); font-weight: 600; }
body.portfolio-v2 .contact-row a:hover { color: var(--p-blue); }
body.portfolio-v2 .lg-chip {
  color: var(--p-blue);
  background: rgba(51,92,255,.08);
  border: 1px solid rgba(51,92,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82);
}
body.portfolio-v2 .contact-based-in {
  margin-top: auto;
  padding: 18px;
  border-radius: 18px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.06);
}
body.portfolio-v2 .contact-based-in p { color: var(--p-ink-soft); }
body.portfolio-v2 .contact-form .contact-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
body.portfolio-v2 #contact-status {
  min-height: 1.5em;
  margin-top: 12px;
  color: var(--p-ink-soft);
  font-size: 14px;
  font-weight: 650;
}
body.portfolio-v2 .field-error {
  display: block;
  margin-top: -5px;
  color: #b42318;
  font-size: 13px;
}

/* ───────────────────────────── Project detail pages */
body.portfolio-v2.article-detail {
  color: var(--p-ink);
  background:
    radial-gradient(70% 38% at 10% 0%, rgba(51,92,255,.13), transparent 72%),
    radial-gradient(58% 32% at 96% 4%, rgba(11,185,207,.10), transparent 72%),
    var(--p-canvas);
}
body.portfolio-v2.article-detail .nav {
  color: var(--p-ink);
  background: var(--p-glass);
  border: var(--p-glass-border);
}
body.portfolio-v2.article-detail .page-hero {
  min-height: 560px;
  display: flex;
  align-items: flex-end;
  padding: 158px 0 78px;
  color: var(--p-ink);
  background:
    radial-gradient(62% 98% at 7% 8%, color-mix(in srgb, var(--project-accent, var(--p-blue)) 18%, transparent), transparent 70%),
    transparent;
}
body.portfolio-v2.article-detail .page-hero::after {
  content: "";
  position: absolute;
  inset: auto 5vw 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.14), transparent);
}
body.portfolio-v2.article-detail .page-hero h1 {
  max-width: 12ch;
  margin-top: 13px !important;
  color: var(--p-ink);
  font-family: var(--font-product);
  font-size: clamp(58px, 8.5vw, 116px);
  font-weight: 650;
  line-height: .9;
  letter-spacing: -.06em;
}
body.portfolio-v2.article-detail .page-hero p {
  max-width: 820px;
  color: var(--p-ink-soft);
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.64;
}
body.portfolio-v2.article-detail .back-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: var(--p-pill);
  color: var(--p-ink-soft);
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.08);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-transform: none;
}
body.portfolio-v2.article-detail .back-link:hover { color: var(--p-blue); }
body.portfolio-v2.article-detail .article-meta { color: var(--p-ink-muted); }
body.portfolio-v2.article-detail .section { padding: 42px 0 110px; }
body.portfolio-v2.article-detail .article-paper {
  width: min(100%, 1120px);
  max-width: none;
  margin-inline: auto;
  padding: clamp(20px, 4vw, 56px);
  border-radius: 34px;
  color: var(--p-ink);
  background:
    radial-gradient(90% 22% at 92% 0%, color-mix(in srgb, var(--project-accent, var(--p-blue)) 6%, transparent), transparent 68%),
    rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: var(--p-glass-shadow);
  backdrop-filter: saturate(145%) blur(20px);
  -webkit-backdrop-filter: saturate(145%) blur(20px);
}
body.portfolio-v2.article-detail .article-paper h2 {
  max-width: 18ch;
  margin-top: clamp(58px, 7vw, 92px);
  color: var(--p-ink);
  font-family: var(--font-editorial);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 590;
  line-height: 1.08;
  letter-spacing: -.04em;
}
body.portfolio-v2.article-detail .article-paper p {
  max-width: 780px;
  margin-inline: 0;
  color: var(--p-ink-soft);
  font-family: var(--font-sans);
  font-size: 18.5px;
  line-height: 1.88;
}
body.portfolio-v2.article-detail .article-paper strong { color: var(--p-ink); }
body.portfolio-v2.article-detail .article-paper a { color: var(--p-blue-deep); }
body.portfolio-v2.article-detail .article-paper a:hover { color: var(--p-blue); }
body.portfolio-v2 .project-video-wrap {
  margin-bottom: 22px;
  border-radius: 24px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 28px 70px -40px rgba(15,23,42,.48);
}
body.portfolio-v2 .project-metrics {
  gap: 10px;
  margin-bottom: 20px;
}
body.portfolio-v2 .metric-tile {
  min-height: 104px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(245,247,252,.86);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: inset 0 1px 0 #fff;
}
body.portfolio-v2 .metric-val {
  color: var(--p-ink);
  font-family: var(--font-product);
  font-size: 30px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
body.portfolio-v2 .metric-label {
  /* --p-ink-muted measured 4.10:1 on the metric tile's own fill at 11px, just
     under the AA floor. Darkened here only — the token itself is used on many
     larger surfaces where it already clears. */
  color: #666b78;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -.01em;
}
body.portfolio-v2 .paper-actions { margin-bottom: 32px; }
.p-status-strip {
  margin: 0 0 18px;
  padding: 13px 15px;
  border-radius: 15px;
  color: var(--p-ink-soft);
  background: rgba(51,92,255,.055);
  border: 1px solid rgba(51,92,255,.10);
  font-size: 14px;
  line-height: 1.55;
}
.p-status-strip strong { color: var(--p-ink); }
body.portfolio-v2 .how-fig {
  margin: 48px 0;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 26px;
  color: #fff;
  background:
    radial-gradient(90% 100% at 100% 0%, color-mix(in srgb, var(--pc, var(--p-blue)) 32%, transparent), transparent 58%),
    linear-gradient(155deg, #151c31, #090e1c);
  box-shadow: 0 34px 80px -44px rgba(4,8,20,.72);
}
body.portfolio-v2 .how-fig .how-eyebrow { color: color-mix(in srgb, var(--pc, #7a8cff) 76%, #fff); }
body.portfolio-v2 .how-fig .how-title,
body.portfolio-v2 .how-fig .flow-label { color: #fff; }
body.portfolio-v2 .how-fig .flow-sub { color: rgba(255,255,255,.62); }
body.portfolio-v2 .how-fig .flow-arrow { color: color-mix(in srgb, var(--pc, #7a8cff) 72%, #fff); }
body.portfolio-v2.article-detail .article-paper .how-fig .how-note { color: rgba(255,255,255,.70); }
body.portfolio-v2 .flow-stage,
body.portfolio-v2 .sm-card,
body.portfolio-v2 .stk-layer,
body.portfolio-v2 .cmp2-cell {
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
}
body.portfolio-v2 .article-tags .tag {
  color: var(--p-ink-soft);
  background: rgba(51,92,255,.07);
  border-color: rgba(51,92,255,.12);
}
/* Legacy proportional bars compared unrelated units. Keep the verified
   evidence tiles and diagrams; remove the misleading visual ratios. */
body.portfolio-v2 .how-chart { display: none; }
.p-case-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 64px;
  padding: 22px;
  border-radius: 22px;
  background: rgba(51,92,255,.055);
  border: 1px solid rgba(51,92,255,.10);
}
.p-case-cta strong {
  font-family: var(--font-editorial);
  font-size: 20px;
  font-weight: 600;
}

/* ───────────────────────────── Archived legacy content */
.archive-notice {
  margin: 110px auto 0;
  width: min(calc(100% - 32px), 980px);
  padding: 14px 18px;
  border-radius: 16px;
  color: #2d3340;
  background: #fff7e8;
  border: 1px solid rgba(181,113,18,.20);
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}
.archive-notice a {
  color: #1733b7;
  font-weight: 700;
}

/* ───────────────────────────── Responsive */
@media (max-width: 1020px) {
  body.portfolio-v2 .nav { min-height: 60px; padding: 8px; }
  body.portfolio-v2 .nav-links,
  body.portfolio-v2 .nav-cta { display: none; }
  body.portfolio-v2 .nav-burger { display: grid; }

  .p-hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 52px;
  }
  /* Stacked hero: the name is a Latin run in an RTL column, so pinning it to the
     right spine reads wrong — but flush left leaves it hanging off the edge of a
     full-width column. Centred sits it under the nav as its own nameplate, and
     centring the box (align-self) AND the two lines inside it (text-align) is what
     keeps "Ariel" and "Shemesh" stacked on a shared axis. Only the h1 moves; the
     lede, buttons and chips keep the RTL spine, which is correct for Hebrew. */
  .p-hero-title {
    max-width: 11.4ch;
    align-self: center;
    text-align: center;
  }
  /* Stacked hero: the bottom of the section is now far below the fold, so the
     mantis moves off `bottom` and onto the open band between the role chips and
     the device card — the one gap in the stack, and it holds its ratio across
     this whole range because the column scales proportionally. */
  .p-mantis-walk {
    bottom: auto;
    top: 51.5%;
    margin-top: -22px;
    width: 66px;
  }
  .p-hero-stage { width: min(100%, 720px); margin-inline: auto; }
  .p-device { transform: none; }
  .p-process-story {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .p-process-intro h3 { max-width: 16ch; }
  body.portfolio-v2 .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body.portfolio-v2 {
    font-size: 16px;
    background:
      radial-gradient(95% 35% at 5% 3%, rgba(51,92,255,.12), transparent 72%),
      linear-gradient(180deg, #f9fbff, #f2f5fa);
  }
  body.portfolio-v2::before { position: absolute; background-size: 48px 48px; opacity: .26; }
  body.portfolio-v2 .nav {
    top: 6px;
    width: calc(100% - 12px);
    border-radius: 21px;
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
  }
  body.portfolio-v2 .nav-logo .brand-name { display: none; }

  body.portfolio-home .hero {
    min-height: auto;
    padding: 112px 0 68px;
  }
  /* Smaller body on the phone; the engine derives its own pace from the
     viewport width, so nothing about the walk needs restating here. */
  .p-mantis-walk {
    width: 58px;
    margin-top: -19px;
  }
  .p-hero-title {
    margin: 17px 0 20px;
    font-size: clamp(51px, 15vw, 76px);
    line-height: .92;
  }
  .p-hero-lede { font-size: 18px; }
  .p-hero-actions { width: 100%; }
  .p-hero-actions > * { flex: 1 1 150px; }
  .p-hero-meta { margin-top: 23px; }
  .p-meta-chip { font-size: 12px; }
  .p-device { padding: 8px; border-radius: 24px; }
  .p-device-bar { height: 36px; }
  .p-device-screen { border-radius: 18px; }
  .p-identity-card {
    position: relative;
    inset: auto;
    width: calc(100% - 20px);
    margin: -20px auto 0;
  }
  .media-toggle {
    inset-inline-end: 15px;
    inset-block-end: 15px;
    min-width: 44px;
  }

  body.portfolio-v2 .section { padding: 72px 0; }
  body.portfolio-v2 .section h2 { font-size: clamp(42px, 13vw, 64px); }
  .p-section-intro { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .p-about-copy { padding: 26px 22px; }
  .p-capability-grid { grid-template-columns: 1fr; }
  .p-capability { min-height: 0; }
  .p-capability h3 { margin-top: 22px; }
  .p-process-story {
    padding: 25px 21px;
    border-radius: 28px;
  }
  .p-process-track {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .p-process-track::before,
  .p-process-track::after {
    inset-inline-start: 20px;
    inset-inline-end: auto;
    inset-block-start: 20px;
    width: 1px;
    height: calc(100% - 40px);
  }
  .p-process-track::after {
    height: calc((100% - 40px) * var(--process-progress));
    background: linear-gradient(180deg, var(--p-cyan), var(--p-blue));
  }
  .p-process-step {
    min-height: 72px;
    padding-inline-start: 62px;
    padding-inline-end: 0;
  }
  .p-process-num {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    margin: 0;
  }

  body.portfolio-v2 .projects-wall { grid-template-columns: 1fr; }
  body.portfolio-v2 .project-card.has-cover .project-card-body { min-height: 0; padding: 20px; }
  .p-card-actions { gap: 10px; }
  .p-case-link,
  .p-card-demo { min-height: 44px; padding-inline: 16px; }
  body.portfolio-v2 .project-card h3 { font-size: 30px; }
  body.portfolio-v2 .project-card p { font-size: 14.5px; }

  .p-contact-band {
    grid-template-columns: 1fr;
    padding: 28px 22px;
    border-radius: 28px;
  }
  .p-contact-band .p-btn-primary { width: 100%; }

  body.portfolio-projects .page-hero {
    min-height: 550px;
    padding: 128px 0 70px;
  }
  body.portfolio-projects .page-hero h1 { font-size: clamp(58px, 17vw, 86px); }

  body.portfolio-v2.article-detail .page-hero {
    min-height: 500px;
    padding: 126px 0 54px;
  }
  body.portfolio-v2.article-detail .page-hero h1 { font-size: clamp(54px, 16vw, 82px); }
  body.portfolio-v2.article-detail .page-hero p { font-size: 17px; }
  body.portfolio-v2.article-detail .section { padding: 26px 0 80px; }
  body.portfolio-v2.article-detail .article-paper {
    padding: 16px;
    border-radius: 24px;
  }
  body.portfolio-v2.article-detail .article-paper h2 { font-size: 36px; margin-top: 58px; }
  body.portfolio-v2.article-detail .article-paper p { font-size: 17px; line-height: 1.75; }
  body.portfolio-v2 .project-video-wrap { border-radius: 18px; }
  body.portfolio-v2 .project-metrics { display: grid; grid-template-columns: repeat(3, 1fr); }
  body.portfolio-v2 .metric-tile { min-width: 0; min-height: 88px; padding: 13px; }
  body.portfolio-v2 .metric-val { font-size: 24px; }

  body.portfolio-v2.contact-page .page-hero { padding: 126px 0 24px; }
  body.portfolio-v2.contact-page .page-hero h1 { font-size: 64px; }
  body.portfolio-v2.contact-page .section { padding: 14px 0 78px; }
  body.portfolio-v2 .contact-form,
  body.portfolio-v2 .contact-aside { border-radius: 24px; }

  body.portfolio-v2 .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 440px) {
  body.portfolio-v2 .site-wrap { padding-inline: 14px; }
  .p-hero-title { font-size: 50px; }
  .p-hero-actions { flex-direction: column; align-items: stretch; }
  .p-hero-actions > * { flex-basis: auto; width: 100%; }
  .p-hero-meta { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .p-meta-chip { justify-content: center; text-align: center; }
  .p-identity-card { width: calc(100% - 12px); }
  body.portfolio-v2 .project-metrics { grid-template-columns: 1fr; }
  .p-case-cta { align-items: stretch; flex-direction: column; }
  .p-case-cta .p-btn-primary { width: 100%; }
}

@media (hover: none) {
  body.portfolio-v2 .project-card:hover { transform: none; }
  body.portfolio-v2 .project-card.has-cover:hover .shot img { transform: none; }
  .p-capability:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.portfolio-v2) { scroll-behavior: auto; }
  body.portfolio-v2 { animation: none; }
  body.portfolio-v2 .p-gradient-word { animation: none; }
  html.js body.portfolio-home .p-hero-copy > *,
  html.js body.portfolio-v2 .page-hero .site-wrap > *,
  html.js body.portfolio-v2 .reveal,
  html.js body.portfolio-v2 .reveal.in {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none;
    transition: none;
  }
  /* The mantis stays, parked and still — a background detail, not motion. The
     gait engine never starts, so it simply sits at its CSS resting spot in the
     authored pose; this only undoes a transform left by a live-toggled setting. */
  .p-mantis-walk { transform: none; }
  .p-process-track::after { transition: none; }
  html.js .p-process-step { opacity: 1; transform: none; transition: none; }
  body.portfolio-v2 .project-card,
  body.portfolio-v2 .project-card-media .shot img,
  body.portfolio-v2 :is(.btn-apple, .cta-pill, .p-btn-primary, .p-btn-secondary),
  body.portfolio-v2 .p-capability {
    transition: none;
  }
}

/* Two-column hero: the resting spot on the left would sit under the identity
   card, so the parked mantis drops to the clear strip below it. */
@media (prefers-reduced-motion: reduce) and (min-width: 1021px) {
  .p-mantis-walk { bottom: clamp(26px, 4.5vh, 58px); }
}

@media (forced-colors: active) {
  body.portfolio-v2 .nav,
  .p-about-copy,
  body.portfolio-v2 .project-card,
  .p-device,
  .p-identity-card,
  body.portfolio-v2 .contact-form,
  body.portfolio-v2 .contact-aside {
    border: 1px solid CanvasText;
    box-shadow: none;
  }
}

/* The pause button's focus ring paints over the video, whose frames swing
   light — a dark backing plate keeps the ring ≥3:1 on every frame. */
.media-toggle:focus-visible {
  box-shadow:
    0 0 0 3px rgba(9, 14, 34, .85),
    0 12px 28px -18px rgba(0, 0, 0, .65);
}