/* ==========================================================================
   gabriel-v2 — mobile.css
   Authoritative mobile / tablet presentation layer. Loaded LAST.

   Desktop (≥1025px) is untouched. All visual redesign lives here.

   Breakpoints
   -----------
   ≤1024px  SaaS hero (no portrait), tablet-safe stacking
   ≤768px   Full mobile design system + section polish
   ≤380px   Narrow-phone adjustments
   ========================================================================== */

/* 0. Visibility — hide mobile-only nodes on desktop */
.mobile-only {
  display: none !important;
}

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --m-space-1: 4px;
    --m-space-2: 8px;
    --m-space-3: 12px;
    --m-space-4: 16px;
    --m-space-5: 20px;
    --m-space-6: 24px;
    --m-space-7: 32px;
    --m-space-8: 40px;
    --m-space-9: 52px;
    --m-radius-sm: 10px;
    --m-radius: 16px;
    --m-radius-lg: 22px;
    --m-radius-pill: 999px;
    --m-shadow-sm: 0 1px 2px rgba(11, 14, 12, 0.04);
    --m-shadow: 0 8px 24px -12px rgba(11, 14, 12, 0.12);
    --m-shadow-lg: 0 18px 40px -20px rgba(11, 14, 12, 0.18);
    --m-surface: #ffffff;
    --m-surface-soft: #f4f7f5;
    --m-surface-tint: linear-gradient(180deg, #f7faf8 0%, #ffffff 100%);
    --m-border: rgba(11, 14, 12, 0.08);
    --m-border-strong: rgba(11, 14, 12, 0.14);
    --m-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --m-duration: 0.45s;
    --header-height: 64px;
  }
}

@media (max-width: 768px) {
  :root {
    --section-pad: 56px;
    --gutter: 22px;
    --radius: var(--m-radius);
    --font-mono: "Manrope", "Inter", system-ui, sans-serif;
    --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  }

  body {
    font-family: var(--font-body);
    letter-spacing: -0.01em;
  }

  code, pre, kbd, samp, .is-code {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }
}

/* ==========================================================================
   2. CONTAINMENT
   ========================================================================== */

@media (max-width: 1024px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .progress {
    width: 100%;
    max-width: 100vw;
  }

  .screen-gallery__viewport,
  .screen-gallery__stage,
  .why-choice__viewport,
  .why-choice__rail {
    overflow-x: hidden;
  }
}

/* ==========================================================================
   3. HEADER + ANCHORS
   ========================================================================== */

@media (max-width: 1024px) {
  html {
    scroll-padding-top: calc(var(--header-height) + 12px);
  }

  section[id],
  [id]:target {
    scroll-margin-top: calc(var(--header-height) + 12px);
  }

  .site-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(1.2) blur(14px);
    -webkit-backdrop-filter: saturate(1.2) blur(14px);
    border-bottom: 1px solid var(--m-border);
    padding-block: 12px;
  }

  .site-header__name {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .site-header__burger {
    width: 44px;
    height: 44px;
    border-radius: var(--m-radius-sm);
    border: 1px solid var(--m-border);
    background: var(--m-surface);
  }
}

/* ==========================================================================
   4. HERO — SaaS rebuild (tablet + phone). No portrait.
   ========================================================================== */

@media (max-width: 1024px) {
  /* Hero-scoped visibility so tablet gets condensed copy without
     flipping every section's desktop-only blocks early. */
  .hero .desktop-only {
    display: none !important;
  }

  .hero .mobile-only {
    display: initial !important;
  }

  .hero__proof.mobile-only,
  .hero__wordmark.mobile-only,
  .hero__peek.mobile-only {
    display: block !important;
  }

  .hero__ambiance.mobile-only {
    display: block !important;
  }

  .hero__statement-motion.mobile-only {
    display: flex !important;
    flex-direction: column;
  }

  .hero__statblocks.mobile-only {
    display: grid !important;
  }

  .hero .hero__chips.mobile-only {
    display: none !important;
  }

  .hero {
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    overflow: visible;
    isolation: isolate;
    padding:
      calc(18px + env(safe-area-inset-top, 0px))
      0
      0;
    gap: 0;
    background:
      linear-gradient(180deg, #f4f8f6 0%, #ffffff 38%, #f7faf8 100%);
  }

  .hero::before {
    display: none;
  }

  .hero__ambiance {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .hero__ambiance-grid {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image: radial-gradient(circle at 1px 1px, rgba(11, 14, 12, 0.08) 1px, transparent 0);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 20%, #000 20%, transparent 75%);
  }

  .hero__side,
  .hero__cards,
  .hero__scroll,
  .hero__name,
  .hero__portrait {
    display: none !important;
  }

  .hero__left {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 0;
    overflow: visible;
    padding: var(--m-space-5) var(--gutter) 0;
    padding-left: var(--gutter);
  }

  /* Flatten nesting so we can order a true SaaS flow */
  .hero__top,
  .hero__lower,
  .hero__intro {
    display: contents;
  }

  .hero__chip {
    order: 1;
    align-self: flex-start;
    max-width: 100%;
    margin: 0 0 var(--m-space-5);
    padding: 9px 14px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--green-ink);
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.22);
    box-shadow: var(--m-shadow-sm);
  }

  /* Stacked brand wordmark — hero-level signal */
  .hero__wordmark {
    order: 2;
    margin: 0 0 var(--m-space-5);
    font-family: var(--font-display);
    font-size: clamp(3.35rem, 15vw, 4.5rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.055em;
    text-transform: uppercase;
    color: var(--ink);
  }

  .hero__wordmark-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.04em;
  }

  .hero__wordmark-word {
    display: block;
    color: var(--ink);
  }

  .hero__wordmark-line:first-child .hero__wordmark-word {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ink);
  }

  /* One supporting line under the brand */
  .hero__statement {
    order: 3;
    margin: 0 0 var(--m-space-4);
    max-width: 28ch;
    font-size: clamp(1.08rem, 3.8vw, 1.28rem);
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -0.025em;
    color: var(--ink-soft);
  }

  .hero__statement-motion {
    gap: 0.12em;
  }

  /* Tagline + typewriter stay desktop — too noisy for mobile fold */
  .hero__tagline {
    display: none !important;
  }

  .hero__line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.06em;
  }

  .hero__word {
    display: inline-block;
  }

  .hero__word--brand {
    color: var(--green-ink);
    -webkit-text-fill-color: var(--green-ink);
  }

  .hero__sub {
    order: 4;
    margin: 0 0 var(--m-space-7);
    max-width: 32ch;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--gray-600);
  }

  /* Capability pills live in About — drop from hero */
  .hero__chips {
    display: none !important;
  }

  /* CTAs side by side */
  .hero__actions {
    order: 5;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 10px;
    width: 100%;
    margin: 0 0 var(--m-space-6);
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    padding-inline: 12px;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: var(--m-radius-pill);
    white-space: nowrap;
    transition:
      transform 0.2s var(--m-ease),
      box-shadow 0.2s var(--m-ease),
      border-color 0.2s var(--m-ease);
  }

  .hero__actions .btn svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }

  .hero__actions .btn--brand {
    box-shadow: 0 14px 32px -12px rgba(16, 185, 129, 0.55);
  }

  .hero__actions .btn--ghost {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--m-border-strong);
  }

  /* Product peek — CSS MacBook with Live Ops dashboard (full chassis) */
  .hero__peek {
    --hm-lid: #c8ccd1;
    --hm-lid-edge: #aeb4bb;
    --hm-base: #b8bdc4;
    --hm-bezel: #1a1d21;
    order: 6;
    position: relative;
    width: min(100%, 360px);
    margin: 12px auto calc(var(--m-space-6) + 18px);
    padding: 4px 0 36px;
    overflow: visible;
    pointer-events: none;
    isolation: isolate;
  }

  /* Color wash under the Mac — must stay readable on white */
  .hero__peek-glow {
    position: absolute;
    left: 50%;
    bottom: -22%;
    z-index: 0;
    width: 150%;
    height: 72%;
    transform: translateX(-50%);
    pointer-events: none;
    overflow: visible;
  }

  .hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(34px);
    will-change: transform;
  }

  .hero__orb--a {
    width: 96%;
    height: 86%;
    left: 50%;
    bottom: -6%;
    transform: translateX(-50%);
    opacity: 0.78;
    background: radial-gradient(
      ellipse at 50% 40%,
      rgba(110, 231, 183, 0.55) 0%,
      rgba(167, 243, 208, 0.28) 38%,
      rgba(236, 253, 245, 0) 72%
    );
  }

  .hero__orb--b {
    width: 54%;
    height: 70%;
    left: -4%;
    bottom: -8%;
    opacity: 0.7;
    background: radial-gradient(
      circle at 40% 45%,
      rgba(253, 186, 116, 0.42) 0%,
      rgba(254, 215, 170, 0.2) 45%,
      rgba(255, 247, 237, 0) 74%
    );
  }

  .hero__orb--c {
    width: 52%;
    height: 68%;
    right: -4%;
    bottom: -6%;
    opacity: 0.68;
    background: radial-gradient(
      circle at 60% 45%,
      rgba(165, 180, 252, 0.4) 0%,
      rgba(199, 210, 254, 0.2) 45%,
      rgba(238, 242, 255, 0) 74%
    );
  }

  .hero__mac {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: visible;
    filter:
      drop-shadow(0 18px 28px rgba(11, 14, 12, 0.18))
      drop-shadow(0 4px 10px rgba(11, 14, 12, 0.08));
  }

  .hero__mac-lid {
    position: relative;
    background: linear-gradient(180deg, #d5d8dd 0%, var(--hm-lid) 40%, var(--hm-lid-edge) 100%);
    border-radius: 12px 12px 8px 8px;
    padding: 9px;
    padding-top: 14px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.65),
      inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  }

  .hero__mac-lid::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #3a4048, #111417 70%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    z-index: 2;
  }

  .hero__mac-bezel {
    background: var(--hm-bezel);
    border-radius: 5px;
    padding: 6px;
    overflow: hidden;
  }

  .hero__mac-screen {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #f3f4f6;
    border-radius: 2px;
    overflow: hidden;
  }

  .hero__mac-ui {
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: calc(100% - 18px);
    object-fit: contain;
    object-position: top center;
    background: #f3f4f6;
  }

  .hero__mac-menubar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 18px;
    padding: 0 8px;
    background: linear-gradient(
      180deg,
      rgba(246, 246, 248, 0.94) 0%,
      rgba(232, 232, 237, 0.9) 100%
    );
    color: #1d1d1f;
    font-family:
      -apple-system,
      BlinkMacSystemFont,
      "SF Pro Text",
      "Segoe UI",
      sans-serif;
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.12);
    user-select: none;
  }

  .hero__mac-menubar-left,
  .hero__mac-menubar-right {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
  }

  .hero__mac-menubar-left span:nth-child(n + 4) {
    display: none;
  }

  .hero__mac-apple {
    display: inline-flex;
    width: 0.95em;
    height: 0.95em;
  }

  .hero__mac-apple svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .hero__mac-clock {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .hero__mac-base {
    position: relative;
    height: 12px;
    margin-top: -1px;
    background: linear-gradient(180deg, #c5cad0 0%, var(--hm-base) 45%, #9aa1aa 100%);
    border-radius: 0 0 14px 14px / 0 0 8px 8px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      0 2px 0 rgba(0, 0, 0, 0.06);
  }

  .hero__mac-base::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(30%, 120px);
    height: 55%;
    background: linear-gradient(180deg, #8e959e, #a8afb8);
    border-radius: 0 0 6px 6px;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.25);
  }

  /* Stats + proof sit below the Mac */
  .hero__statblocks {
    order: 7;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin: 0 0 var(--m-space-5);
    padding-top: var(--m-space-5);
    border-top: 1px solid var(--m-border);
  }

  .statblock {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    padding: 16px 14px;
    border-left: 0;
    border-radius: var(--m-radius-lg);
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    box-shadow: var(--m-shadow-sm);
  }

  .statblock:first-child {
    border-left: 0;
    background:
      linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, #fff 70%);
    border-color: rgba(16, 185, 129, 0.2);
  }

  .statblock .stat__num {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 5.6vw, 1.8rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    color: var(--ink);
  }

  .statblock__label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-transform: none;
    line-height: 1.35;
    color: var(--gray-500);
    padding-top: 0;
  }

  .hero__proof {
    order: 8;
    margin: 0 0 var(--m-space-8);
    padding: 16px 18px;
    border-radius: var(--m-radius-lg);
    border: 1px solid var(--m-border);
    background:
      linear-gradient(135deg, rgba(16, 185, 129, 0.07) 0%, rgba(255, 255, 255, 0.95) 45%, rgba(236, 72, 153, 0.04) 100%);
    box-shadow: var(--m-shadow);
  }

  .hero__proof-kicker {
    display: block;
    margin-bottom: 8px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--green-ink);
  }

  .hero__proof-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
  }

  .hero__proof-steps span[aria-hidden="true"] {
    color: var(--gray-500);
    font-weight: 500;
  }

  .hero__proof-meta {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--gray-500);
  }
}

@media (max-width: 1024px) and (hover: hover) and (pointer: fine) {
  .hero__chips li:hover {
    transform: translateY(-1px);
    border-color: rgba(16, 185, 129, 0.35);
    box-shadow: var(--m-shadow);
  }

  .hero__actions .btn:hover {
    transform: translateY(-2px);
  }
}

@media (max-width: 1024px) {
  .hero__actions .btn:active {
    transform: translateY(1px) scale(0.985);
  }

  .hero__chips li:active {
    transform: scale(0.98);
  }
}

/* ==========================================================================
   5. FULL MOBILE DESIGN SYSTEM (phones)
   ========================================================================== */

@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: initial !important;
  }

  p.mobile-only,
  details.mobile-only,
  .sec-head__desc.mobile-only,
  aside.mobile-only,
  .hero__proof.mobile-only,
  .hero__peek.mobile-only,
  .portfolio-showcase__mac-glow.mobile-only {
    display: block !important;
  }

  ul.mobile-only.about-me__feature-chips,
  .about-me__feature-chips.mobile-only {
    display: flex !important;
  }

  button.mobile-only {
    display: inline-flex !important;
  }

  .trust__rails.mobile-only:not([hidden]) {
    display: block !important;
  }

  body.nav-open {
    overflow: hidden;
    touch-action: none;
  }

  /* ---- Typography ---- */
  .eyebrow,
  .sec-head__eyebrow,
  .about-me__eyebrow,
  .bento__eyebrow,
  .impact__label,
  .statblock__label,
  .training__tile-kicker,
  .portfolio-showcase__note-label,
  .portfolio-showcase__note-index,
  .sw-dash__label,
  .about-me__service-cue-label,
  .about-me__pick,
  .p-card__tag,
  .p-card__stat,
  .tl__year {
    letter-spacing: 0.04em;
    font-size: 0.6875rem;
    font-weight: 600;
  }

  .sec-head__eyebrow,
  .about-me__eyebrow,
  .bento__eyebrow {
    text-transform: none;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--coral);
  }

  .sec-head__eyebrow::before,
  .about-me__sec-head .sec-head__eyebrow::before {
    content: none;
  }

  h1, h2, h3 {
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .section-title,
  .sec-head__title {
    font-size: clamp(1.65rem, 6.8vw, 2.05rem);
    line-height: 1.15;
    max-width: 18ch;
    letter-spacing: -0.035em;
  }

  .section-sub,
  .sec-head__sub,
  .sec-head__desc {
    font-size: 0.975rem;
    line-height: 1.6;
    max-width: 38ch;
    color: var(--gray-600);
  }

  .section-title br,
  .sec-head__title br {
    display: none;
  }

  body {
    line-height: 1.62;
  }

  /* ---- Decoration / quieter surfaces ---- */
  .hero__portrait::before,
  .about-me::before,
  .about-me::after,
  .portfolio-showcase__lid::before,
  .why-choice__mesh,
  .training__glow {
    display: none;
  }

  .caps,
  .why-choice__card {
    background-image: none;
  }

  .section--dark {
    background-image: none;
    background-color: #0b0e0c;
  }

  /* ---- Section rhythm ---- */
  .section,
  .about-me,
  .impact,
  .trust,
  .why-choice,
  .training,
  .portfolio-showcase,
  .caps,
  .contact {
    padding-block: var(--section-pad);
  }

  .screen-gallery {
    padding-block: 28px 36px;
  }

  .section-head,
  .sec-head {
    margin-bottom: var(--m-space-7);
  }

  .sec-head__title + .sec-head__sub,
  .sec-head__title + .sec-head__desc,
  .section-title + .section-sub {
    margin-top: 12px;
  }

  /* Premium section label accent */
  .sec-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }

  .sec-head__eyebrow::after {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--coral), transparent);
  }

  /* ---- Menu (fly-out from burger) ---- */
  .mobile-menu {
    top: 0;
    inset: 0;
    max-height: none;
    padding: calc(80px + env(safe-area-inset-top, 0px)) var(--gutter) 40px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translate3d(12%, -8px, 0) scale(0.96);
    transform-origin: top right;
  }

  .mobile-menu.is-open {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .mobile-menu a {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    padding: 18px 0;
    min-height: 56px;
    border-bottom: 1px solid var(--m-border);
    transform: translate3d(28px, 0, 0);
  }

  .mobile-menu.is-open a {
    transform: translate3d(0, 0, 0);
  }

  .mobile-menu a[href="#why"] {
    display: none !important;
  }

  /* ---- About (mobile bells) ---- */
  .about-me {
    padding-block: var(--m-space-9);
  }

  .about-me__panels,
  .about-me__panel,
  .about-me__copy,
  .about-me__services {
    max-width: 100%;
    min-width: 0;
  }

  .about-me__pick {
    letter-spacing: 0.12em;
  }

  .about-me__services {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .about-me__service {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    transform: none;
    min-height: 64px;
    padding: 14px 16px;
    border-radius: var(--m-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    opacity: 0.72;
    transition:
      background 0.28s var(--m-ease),
      border-color 0.28s var(--m-ease),
      transform 0.28s var(--m-ease),
      opacity 0.28s var(--m-ease),
      box-shadow 0.28s var(--m-ease);
  }

  .about-me__service:active {
    transform: scale(0.985);
  }

  .about-me__service.is-active,
  .about-me__service[aria-selected="true"] {
    opacity: 1;
    transform: scale(1.015);
    background:
      linear-gradient(135deg, rgba(var(--am-accent-rgb), 0.18) 0%, rgba(var(--am-accent-rgb), 0.07) 55%, rgba(255, 255, 255, 0.03) 100%);
    border-color: rgba(var(--am-accent-rgb), 0.45);
    box-shadow:
      0 0 0 1px rgba(var(--am-accent-rgb), 0.12),
      0 14px 28px -18px rgba(var(--am-accent-rgb), 0.55);
  }

  .about-me__service.is-active:active {
    transform: scale(1.005);
  }

  .about-me__service.is-active .about-me__service-icon {
    color: var(--am-accent);
    filter: drop-shadow(0 0 10px rgba(var(--am-accent-rgb), 0.55));
  }

  .about-me__service-cue {
    opacity: 0.85;
    transform: none;
  }

  .about-me__service.is-active .about-me__service-cue {
    color: var(--am-accent);
  }

  .about-me__service.is-active .about-me__service-cue-label {
    display: inline !important;
    font-size: 0;
  }

  .about-me__service.is-active .about-me__service-cue-label::after {
    content: "Selected";
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .about-me__service-title {
    font-size: 1rem;
  }

  .about-me__service-sub {
    font-size: 0.78rem;
  }

  /* Panel swap — slide + fade (restarts each tab change) */
  .about-me__panel {
    transition: none;
  }

  .about-me__panel.is-active {
    animation: m-about-panel-in 0.48s var(--m-ease) both;
  }

  .about-me__panel.is-active .about-me__eyebrow,
  .about-me__panel.is-active .about-me__title,
  .about-me__panel.is-active .about-me__bio.mobile-only {
    animation: m-about-copy-in 0.5s var(--m-ease) both;
  }

  .about-me__panel.is-active .about-me__eyebrow { animation-delay: 0.04s; }
  .about-me__panel.is-active .about-me__title { animation-delay: 0.1s; }
  .about-me__panel.is-active .about-me__bio.mobile-only { animation-delay: 0.16s; }

  .about-me__title {
    font-size: clamp(1.6rem, 7vw, 2.05rem);
    margin-bottom: 12px;
  }

  .about-me__bio {
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: none;
  }

  .about-me__feature-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
  }

  .about-me__feature-chips li {
    padding: 8px 12px;
    border-radius: var(--m-radius-pill);
    border: 1px solid rgba(var(--am-accent-rgb), 0.22);
    background: rgba(var(--am-accent-rgb), 0.075);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    transform: translateY(10px);
  }

  .about-me.is-inview .about-me__panel.is-active .about-me__feature-chips li {
    animation: m-about-chip-in 0.42s var(--m-ease) both;
  }

  .about-me.is-inview .about-me__panel.is-active .about-me__feature-chips li:nth-child(1) { animation-delay: 0.2s; }
  .about-me.is-inview .about-me__panel.is-active .about-me__feature-chips li:nth-child(2) { animation-delay: 0.26s; }
  .about-me.is-inview .about-me__panel.is-active .about-me__feature-chips li:nth-child(3) { animation-delay: 0.32s; }
  .about-me.is-inview .about-me__panel.is-active .about-me__feature-chips li:nth-child(4) { animation-delay: 0.38s; }
  .about-me.is-inview .about-me__panel.is-active .about-me__feature-chips li:nth-child(5) { animation-delay: 0.44s; }
  .about-me.is-inview .about-me__panel.is-active .about-me__feature-chips li:nth-child(6) { animation-delay: 0.5s; }

  .about-me__stats {
    margin-top: 24px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    border-radius: 0;
    background: transparent;
    border: 0;
    transition:
      border-color 0.3s var(--m-ease),
      box-shadow 0.3s var(--m-ease);
  }

  .about-me__stats .about-me__stat {
    padding: 14px 12px;
    border-radius: var(--m-radius);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 28px -22px rgba(0, 0, 0, 0.45);
  }

  .about-me__stats .about-me__stat:first-child {
    background:
      linear-gradient(165deg, rgba(16, 185, 129, 0.16) 0%, rgba(255, 255, 255, 0.04) 70%);
    border-color: rgba(16, 185, 129, 0.28);
  }

  .about-me__stats.is-swapping .about-me__stat {
    border-color: rgba(16, 185, 129, 0.32);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.1);
  }

  @keyframes m-about-panel-in {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes m-about-copy-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes m-about-chip-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  .about-me:not(.is-inview) .about-me__sec-head > *,
  .about-me:not(.is-inview) .about-me__pick {
    opacity: 0;
    transform: translateY(14px);
  }

  .about-me.is-inview .about-me__sec-head > *,
  .about-me.is-inview .about-me__pick {
    animation: m-fade-up 0.65s var(--m-ease) both;
  }

  .about-me.is-inview .about-me__sec-head > *:nth-child(1) { animation-delay: 0.02s; }
  .about-me.is-inview .about-me__sec-head > *:nth-child(2) { animation-delay: 0.08s; }
  .about-me.is-inview .about-me__sec-head > *:nth-child(3) { animation-delay: 0.14s; }
  .about-me.is-inview .about-me__pick { animation-delay: 0.2s; }

  .about-me:not(.is-inview) .about-me__service {
    opacity: 0;
    transform: translateY(14px);
  }

  .about-me.is-inview .about-me__service {
    opacity: 0.72;
    transform: none;
    transition:
      background 0.28s var(--m-ease),
      border-color 0.28s var(--m-ease),
      transform 0.28s var(--m-ease),
      opacity 0.45s var(--m-ease),
      box-shadow 0.28s var(--m-ease);
  }

  .about-me.is-inview:not(.is-revealed) .about-me__service:nth-child(1) { transition-delay: 0.22s; }
  .about-me.is-inview:not(.is-revealed) .about-me__service:nth-child(2) { transition-delay: 0.28s; }
  .about-me.is-inview:not(.is-revealed) .about-me__service:nth-child(3) { transition-delay: 0.34s; }
  .about-me.is-inview:not(.is-revealed) .about-me__service:nth-child(4) { transition-delay: 0.4s; }

  .about-me.is-inview .about-me__service.is-active,
  .about-me.is-inview .about-me__service[aria-selected="true"] {
    opacity: 1;
  }

  .about-me.is-revealed .about-me__service {
    transition-delay: 0s;
  }

  .about-me__stat + .about-me__stat {
    margin-top: 0;
    padding-top: 14px;
    border-top: 0;
    padding-left: 12px;
    border-left: 0;
  }

  .about-me__stat-value {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 5.6vw, 1.6rem);
    font-weight: 800;
    letter-spacing: -0.045em;
  }

  .about-me__stat.is-text-stat .about-me__stat-value {
    font-size: clamp(0.95rem, 3.6vw, 1.15rem);
    letter-spacing: -0.02em;
    line-height: 1.1;
  }

  .about-me__stats .about-me__stat:first-child .about-me__stat-value {
    color: #86efac;
  }

  .about-me__stat-label {
    font-size: 0.68rem;
    font-weight: 600;
    margin-top: 6px;
    max-width: none;
    letter-spacing: 0.005em;
    color: rgba(255, 255, 255, 0.62);
  }

  /* ---- Platforms (hero-matched atmosphere, mobile only) ---- */
  .portfolio-showcase {
    position: relative;
    isolation: isolate;
    overflow: visible;
    padding-block: var(--m-space-9);
    background:
      linear-gradient(180deg, #f4f8f6 0%, #ffffff 42%, #f7faf8 100%);
  }

  .portfolio-showcase__bg {
    z-index: 0;
    opacity: 0.9;
    background-image: radial-gradient(
      circle at 1px 1px,
      rgba(11, 14, 12, 0.07) 1px,
      transparent 0
    );
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(
      ellipse 80% 65% at 50% 28%,
      #000 18%,
      transparent 78%
    );
    mask-image: radial-gradient(
      ellipse 80% 65% at 50% 28%,
      #000 18%,
      transparent 78%
    );
  }

  .portfolio-showcase__inner {
    position: relative;
    z-index: 1;
  }

  .portfolio-showcase__rail {
    display: none !important;
  }

  .portfolio-showcase__composition {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .portfolio-showcase__macbook-wrap {
    position: relative;
    isolation: isolate;
    max-width: min(100%, 340px);
    margin-inline: auto;
    margin-bottom: 8px;
    padding: 4px 0 36px;
    overflow: visible;
    filter: drop-shadow(0 14px 24px rgba(11, 14, 12, 0.12));
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }

  .portfolio-showcase__mac-glow {
    position: absolute;
    left: 50%;
    bottom: -18%;
    z-index: 0;
    width: 150%;
    height: 70%;
    transform: translateX(-50%);
    pointer-events: none;
    overflow: visible;
  }

  .portfolio-showcase__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(34px);
  }

  .portfolio-showcase__orb--a {
    width: 96%;
    height: 86%;
    left: 50%;
    bottom: -6%;
    transform: translateX(-50%);
    opacity: 0.78;
    background: radial-gradient(
      ellipse at 50% 40%,
      rgba(110, 231, 183, 0.55) 0%,
      rgba(167, 243, 208, 0.28) 38%,
      rgba(236, 253, 245, 0) 72%
    );
  }

  .portfolio-showcase__orb--b {
    width: 54%;
    height: 70%;
    left: -4%;
    bottom: -8%;
    opacity: 0.7;
    background: radial-gradient(
      circle at 40% 45%,
      rgba(253, 186, 116, 0.42) 0%,
      rgba(254, 215, 170, 0.2) 45%,
      rgba(255, 247, 237, 0) 74%
    );
  }

  .portfolio-showcase__orb--c {
    width: 52%;
    height: 68%;
    right: -4%;
    bottom: -6%;
    opacity: 0.68;
    background: radial-gradient(
      circle at 60% 45%,
      rgba(165, 180, 252, 0.4) 0%,
      rgba(199, 210, 254, 0.2) 45%,
      rgba(238, 242, 255, 0) 74%
    );
  }

  .portfolio-showcase__macbook {
    position: relative;
    z-index: 1;
  }

  .portfolio-showcase__macbook-wrap.is-swipeable::after {
    content: "Swipe for more screens";
    display: block;
    position: relative;
    z-index: 1;
    margin-top: 10px;
    text-align: center;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--gray-500);
  }

  .portfolio-showcase__tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    width: auto;
    max-width: none;
    margin-inline: calc(-1 * var(--gutter));
    margin-bottom: 20px;
    padding: 2px var(--gutter) 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent);
  }

  .portfolio-showcase__tabs::-webkit-scrollbar {
    display: none;
  }

  .portfolio-showcase__tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 999px;
    background: #fff;
    color: var(--ps-ink, #0b0e0c);
    box-shadow: 0 1px 2px rgba(11, 14, 12, 0.04);
    transition:
      background 0.2s var(--m-ease),
      color 0.2s var(--m-ease),
      border-color 0.2s var(--m-ease);
  }

  .portfolio-showcase__tab.is-active {
    background: var(--ps-ink, #0b0e0c);
    border-color: var(--ps-ink, #0b0e0c);
    color: #fff;
    box-shadow: 0 6px 16px rgba(11, 14, 12, 0.16);
  }

  .portfolio-showcase__meta {
    margin-top: 4px;
  }

  .portfolio-showcase__caption {
    color: var(--gray-600);
  }

  .portfolio-showcase__mobile-meta {
    width: min(100%, 920px);
    margin: 12px 0 0;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
    background: var(--m-surface);
    padding: 0 16px;
    box-shadow: var(--m-shadow-sm);
  }

  .portfolio-showcase__mobile-meta summary {
    cursor: pointer;
    list-style: none;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.9375rem;
  }

  .portfolio-showcase__mobile-meta summary::-webkit-details-marker {
    display: none;
  }

  .portfolio-showcase__mobile-meta summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--gray-500);
    border-bottom: 2px solid var(--gray-500);
    transform: rotate(45deg);
    transition: transform 0.25s var(--m-ease);
  }

  .portfolio-showcase__mobile-meta[open] summary {
    border-bottom: 1px solid var(--m-border);
  }

  .portfolio-showcase__mobile-meta[open] summary::after {
    transform: rotate(-135deg);
  }

  .portfolio-showcase__mobile-meta-body {
    display: grid;
    gap: 14px;
    padding: 14px 0 18px;
  }

  .portfolio-showcase__mobile-note {
    display: grid;
    gap: 4px;
  }

  .portfolio-showcase__mobile-note strong {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
  }

  .portfolio-showcase__mobile-note span {
    font-size: 0.925rem;
    color: var(--ink);
    line-height: 1.5;
  }

  .portfolio-showcase__disclaimer {
    padding: 12px 14px;
    font-size: 0.8125rem;
    border-radius: var(--m-radius);
  }

  .portfolio-showcase__disclaimer-short {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .portfolio-showcase__disclaimer-more {
    color: #9a3412;
    font-weight: 700;
    text-decoration: underline;
    font-size: 0.8rem;
  }

  .portfolio-showcase__disclaimer-full {
    display: none;
    margin-top: 8px;
  }

  .portfolio-showcase__disclaimer-full.is-open {
    display: block;
  }

  .portfolio-showcase__note-index {
    display: none;
  }

  .portfolio-showcase__controls {
    gap: 10px 12px;
  }

  .portfolio-showcase__dots {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 14px;
    max-width: none;
    padding: 0 4px;
  }

  .portfolio-showcase__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(11, 14, 12, 0.28);
    flex: 0 0 auto;
  }

  .portfolio-showcase__dot.is-active {
    width: 30px;
    height: 9px;
    border-radius: 999px;
    background: var(--ps-accent, #ff705a);
  }

  .portfolio-showcase__meta {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 8px 12px;
    margin-top: 8px;
    text-align: left;
  }

  .portfolio-showcase__caption {
    grid-column: 1;
    min-width: 0;
  }

  .portfolio-showcase__counter {
    grid-column: 2;
    justify-self: end;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.92);
    color: var(--ps-ink, #0b0e0c);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: var(--m-shadow-sm);
  }

  .portfolio-showcase__note {
    padding-block: 12px;
  }

  .portfolio-showcase__note-label {
    font-size: 0.6875rem;
  }

  .portfolio-showcase__note-body {
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .portfolio-showcase__arrow {
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--m-radius-pill);
    box-shadow: var(--m-shadow-sm);
  }

  /* ---- Impact ---- */
  .impact {
    padding-block: var(--m-space-9);
  }

  .impact__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .impact__header {
    text-align: left;
  }

  .impact__header .sec-head__eyebrow {
    justify-content: flex-start;
  }

  .impact__header .sec-head__title {
    font-family: var(--font-display);
    letter-spacing: -0.035em;
  }

  .impact__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    border-top: 0;
  }

  .impact__metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    min-height: 148px;
    padding: 18px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--m-radius-lg);
    background:
      linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow: 0 14px 32px -24px rgba(0, 0, 0, 0.55);
    opacity: 1;
    color: #fff;
  }

  .impact__metric:nth-child(1) {
    background:
      linear-gradient(165deg, rgba(16, 185, 129, 0.18) 0%, rgba(255, 255, 255, 0.04) 72%);
    border-color: rgba(16, 185, 129, 0.28);
    box-shadow: 0 16px 36px -22px rgba(16, 185, 129, 0.2);
  }

  .impact__metric:nth-child(even) {
    border-left-color: rgba(255, 255, 255, 0.1);
  }

  .impact__num {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 8.2vw, 2.45rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    color: #fff;
    line-height: 1;
  }

  .impact__metric:nth-child(1) .impact__num {
    color: #a7f3d0;
  }

  .impact__label {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
    margin-top: 0;
    max-width: none;
    color: rgba(255, 255, 255, 0.62);
    text-transform: none;
    letter-spacing: 0.005em;
  }

  /* ---- App gallery ---- */
  .screen-gallery__head {
    margin-bottom: 18px;
  }

  .screen-gallery__scroller,
  .screen-gallery__scroller.is-static,
  .screen-gallery__scroller--marquee {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-inline: var(--gutter);
    mask-image: none;
    -webkit-mask-image: none;
    cursor: grab;
  }

  .screen-gallery__track {
    gap: 18px;
    padding-inline: 0;
    animation: none !important;
    will-change: auto;
  }

  .screen-gallery__item {
    width: min(210px, 64vw);
    scroll-snap-align: center;
    transition: transform 0.3s var(--m-ease);
  }

  .screen-gallery__arrow {
    min-width: 44px;
    min-height: 44px;
  }

  /* ---- Clients / trust: dual swipe rails ---- */
  .trust {
    padding-block: var(--m-space-9);
    background: var(--m-surface-tint);
    overflow: hidden;
  }

  .trust__inner {
    gap: 22px;
    max-width: 100%;
    padding-inline: 0;
  }

  .trust__inner .sec-head {
    padding-inline: var(--gutter);
  }

  .trust__grid,
  .trust__grid--mobile-hidden {
    display: none !important;
  }

  .trust__rails {
    width: 100%;
    margin: 0;
    opacity: 0;
    transform: translate3d(40px, 0, 0);
    transition:
      opacity 1.15s var(--m-ease),
      transform 1.35s var(--m-ease);
  }

  .trust__rails.is-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .trust__rails-scroller {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    padding-block: 4px 2px;
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 20px,
      #000 calc(100% - 20px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      #000 20px,
      #000 calc(100% - 20px),
      transparent 100%
    );
    cursor: grab;
    touch-action: pan-x;
    scroll-behavior: auto;
  }

  .trust__rails-scroller::-webkit-scrollbar {
    display: none;
  }

  .trust__rails.is-paused .trust__rails-scroller {
    cursor: grabbing;
  }

  .trust__rails-track {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: max-content;
    min-width: 100%;
    padding-inline: var(--gutter);
  }

  .trust__rail {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    width: max-content;
  }

  .trust__rail--offset {
    padding-left: 36px;
  }

  .trust__rail-card,
  .trust__rail li {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    height: 76px;
    padding: 14px 16px;
    margin: 0;
    border: 1px solid var(--m-border);
    border-radius: 18px;
    background: var(--m-surface);
    box-shadow: var(--m-shadow-sm);
  }

  .trust__rail img {
    display: block;
    max-height: 40px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: none;
    opacity: 0.94;
    mix-blend-mode: normal;
  }

  .trust__rail img.trust__logo--on-dark {
    mix-blend-mode: normal;
    filter: none;
    opacity: 0.95;
    border-radius: 8px;
  }

  .trust__rails-hint {
    margin: 14px var(--gutter) 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--gray-500);
    text-align: center;
  }

  /* ---- Training / capabilities ---- */
  .training {
    padding-block: var(--m-space-9);
  }

  .training__stack {
    display: none;
  }

  .training__bento {
    gap: 12px;
  }

  .training__tile,
  .training__bento > * {
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow-sm);
    border: 1px solid var(--m-border);
    background: var(--m-surface);
  }

  .training__bento > *:first-child {
    background:
      linear-gradient(165deg, rgba(16, 185, 129, 0.08) 0%, #fff 70%);
    border-color: rgba(16, 185, 129, 0.2);
  }

  .training__stat-value {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.045em;
  }

  .caps {
    padding-block: var(--m-space-9);
  }

  .bento__card--flow,
  .bento__card--tenx,
  .bento__card--screens,
  .bento__card--type {
    display: none;
  }

  .bento {
    grid-template-columns: 1fr;
    grid-template-areas:
      "core"
      "reports"
      "portals";
    gap: 14px;
  }

  .bento__card,
  .why-choice__card,
  .p-card {
    padding: 20px 18px;
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
  }

  .bento__card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background:
      linear-gradient(165deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 100%);
  }

  .bento__card:first-child {
    background:
      linear-gradient(165deg, rgba(16, 185, 129, 0.16) 0%, rgba(255, 255, 255, 0.04) 70%);
    border-color: rgba(16, 185, 129, 0.28);
  }

  .p-card {
    border: 1px solid var(--m-border);
    background: var(--m-surface);
    box-shadow: var(--m-shadow-sm);
  }

  .p-card:first-child {
    background:
      linear-gradient(165deg, rgba(16, 185, 129, 0.07) 0%, #fff 72%);
    border-color: rgba(16, 185, 129, 0.18);
  }

  .bento__card h3,
  .bento__card h4 {
    font-size: 1.1rem;
  }

  .bento__card p,
  .training__tile p {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .caps__grid,
  .stack__list {
    gap: 8px;
  }

  .sw-chip,
  .stack__item,
  .bento__flow-pill {
    font-size: 0.75rem;
    padding: 7px 12px;
    letter-spacing: 0;
    border-radius: var(--m-radius-pill);
  }

  /* ---- Contact ---- */
  .contact {
    padding-block: var(--m-space-9);
    background:
      radial-gradient(ellipse 80% 50% at 50% 0%, rgba(16, 185, 129, 0.07) 0%, transparent 55%),
      var(--paper-tint);
  }

  .contact__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .contact__email {
    display: inline-block;
    margin-top: 18px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    border-bottom: 2px solid rgba(16, 185, 129, 0.45);
    padding-bottom: 2px;
  }

  .contact__form {
    padding: 22px 18px;
    border-radius: var(--m-radius-lg);
    background: var(--m-surface);
    border: 1px solid var(--m-border);
    box-shadow: var(--m-shadow-lg);
  }

  .contact__form .field {
    margin-bottom: 14px;
  }

  .contact__form label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 6px;
  }

  .contact__form input,
  .contact__form textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border-radius: var(--m-radius-sm);
    border: 1px solid var(--m-border-strong);
    background: var(--m-surface-soft);
    font-size: 1rem;
    transition:
      border-color 0.2s var(--m-ease),
      box-shadow 0.2s var(--m-ease),
      background 0.2s var(--m-ease);
  }

  .contact__form textarea {
    min-height: 120px;
    resize: vertical;
  }

  .contact__form input:focus,
  .contact__form textarea:focus {
    outline: none;
    border-color: rgba(16, 185, 129, 0.55);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
  }

  .contact__form .btn {
    min-height: 52px;
    margin-top: 6px;
    border-radius: var(--m-radius-pill);
    font-weight: 700;
  }

  .contact__note {
    margin-top: 12px;
    font-size: 0.78rem;
    color: var(--gray-500);
    text-align: center;
  }

  /* ---- Footer ---- */
  .footer__top {
    gap: 28px;
    padding-block: 44px 28px;
  }

  .footer__nav-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer__nav a[href="#why"] {
    display: none;
  }

  .footer__meta {
    font-size: 0.7rem;
    line-height: 1.45;
  }

  .footer__cta {
    min-height: 46px;
    border-radius: var(--m-radius-pill);
  }

  /* ---- Floating UI ---- */
  .back-to-top {
    right: max(14px, env(safe-area-inset-right, 0px));
    bottom: max(18px, env(safe-area-inset-bottom, 0px));
    min-width: 46px;
    min-height: 46px;
    padding: 10px;
    opacity: 0.86;
    z-index: 40;
    border-radius: var(--m-radius-pill);
    box-shadow: var(--m-shadow);
    transition:
      opacity 0.25s var(--m-ease),
      transform 0.25s var(--m-ease),
      visibility 0.25s;
  }

  .back-to-top__icon {
    width: 22px;
    height: 22px;
  }

  .back-to-top__label {
    display: none;
  }

  body.nav-open .back-to-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* ---- Tap targets ---- */
  .site-header__brand {
    min-height: 44px;
    align-items: center;
  }

  .why-choice__dots,
  .about-me__dots,
  .screen-gallery__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .portfolio-showcase__dot,
  .why-choice__dot,
  .about-me__dot,
  .screen-gallery__dot {
    position: relative;
  }

  .portfolio-showcase__dot::after,
  .why-choice__dot::after,
  .about-me__dot::after,
  .screen-gallery__dot::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 28px;
    height: 28px;
    translate: -50% -50%;
  }

  .why-choice__arrow {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ==========================================================================
   6. MOTION — subtle SaaS reveals (mobile/tablet)
   ========================================================================== */

@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .site-header__status .dot {
    animation: none;
  }

  .hero__orb--a {
    animation: hero-orb-drift-a 18s ease-in-out infinite alternate;
  }

  .hero__orb--b {
    animation: hero-orb-drift-b 22s ease-in-out infinite alternate;
  }

  .hero__orb--c {
    animation: hero-orb-drift-c 16s ease-in-out infinite alternate;
  }

  /* Soft idle float — begins at rest so it doesn't snap after entrance */
  .hero__mac {
    animation: hero-mac-float 7s ease-in-out 1.85s infinite;
    transform-origin: 50% 90%;
  }

  @keyframes hero-mac-float {
    0%,
    100% {
      transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
      transform: translate3d(0, -5px, 0) rotate(0.25deg);
    }
  }

  .hero__typed.is-typing {
    animation: hero-typed-shimmer 5.5s linear infinite;
  }

  .hero__typed-caret {
    animation: hero-caret-blink 1.05s steps(1, end) infinite;
  }

  @keyframes hero-typed-shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 220% 50%; }
  }

  @keyframes hero-caret-blink {
    0%, 45% { opacity: 0.55; }
    50%, 100% { opacity: 0; }
  }

  @keyframes hero-orb-drift-a {
    from { transform: translate3d(-50%, 0, 0) scale(1); }
    to { transform: translate3d(calc(-50% - 10px), 8px, 0) scale(1.06); }
  }

  @keyframes hero-orb-drift-b {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(10px, -6px, 0) scale(1.08); }
  }

  @keyframes hero-orb-drift-c {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-8px, -8px, 0) scale(0.96); }
  }

  /* Masked word rises — Pixel-style hero type */
  .hero__wordmark-word,
  .hero__statement-motion .hero__word,
  .hero__tagline-motion .hero__word {
    transform: translate3d(0, 108%, 0);
    animation: hero-word-up 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .hero__wordmark-line:nth-child(1) .hero__wordmark-word { animation-delay: 0.08s; }
  .hero__wordmark-line:nth-child(2) .hero__wordmark-word { animation-delay: 0.2s; }

  .hero__statement-motion .hero__line:nth-child(1) .hero__word { animation-delay: 0.34s; }
  .hero__statement-motion .hero__line:nth-child(2) .hero__word { animation-delay: 0.42s; }
  .hero__statement-motion .hero__line:nth-child(3) .hero__word { animation-delay: 0.5s; }

  .hero__tagline-lead,
  .hero__tagline-typed {
    opacity: 0;
    transform: translateY(12px);
    animation: m-fade-up 0.65s var(--m-ease) forwards;
  }

  .hero__tagline-lead:nth-child(1) { animation-delay: 0.58s; }
  .hero__tagline-lead:nth-child(2) { animation-delay: 0.66s; }
  .hero__tagline-typed { animation-delay: 0.76s; }

  @keyframes hero-word-up {
    to {
      transform: translate3d(0, 0, 0);
    }
  }

  .hero__chip,
  .hero__sub,
  .hero__actions,
  .hero__peek,
  .hero__statblocks,
  .hero__proof {
    opacity: 0;
    transform: translateY(14px);
    animation: m-fade-up 0.7s var(--m-ease) forwards;
  }

  .hero__chip { animation-delay: 0.02s; }
  .hero__sub { animation-delay: 0.58s; }
  .hero__actions { animation-delay: 0.72s; }
  .hero__peek { animation-delay: 0.86s; }
  .hero__statblocks { animation-delay: 1.02s; }
  .hero__proof { animation-delay: 1.12s; }

  @keyframes m-fade-up {
    to {
      opacity: 1;
      transform: none;
    }
  }

  .statblock {
    transition:
      transform 0.25s var(--m-ease),
      box-shadow 0.25s var(--m-ease);
  }

  .bento__card,
  .trust__grid li,
  .contact__form {
    transition:
      transform 0.3s var(--m-ease),
      box-shadow 0.3s var(--m-ease),
      border-color 0.3s var(--m-ease);
  }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .hero__chip,
  .hero__sub,
  .hero__actions,
  .hero__peek,
  .hero__statblocks,
  .hero__proof,
  .hero__wordmark-word,
  .hero__statement-motion .hero__word,
  .hero__orb,
  .hero__mac {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .trust__rails {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .about-me__service,
  .about-me__panel.is-active,
  .about-me__panel.is-active .about-me__eyebrow,
  .about-me__panel.is-active .about-me__title,
  .about-me__panel.is-active .about-me__bio.mobile-only,
  .about-me__panel.is-active .about-me__feature-chips li,
  .about-me.is-inview .about-me__sec-head > *,
  .about-me.is-inview .about-me__pick,
  .about-me.is-inview .about-me__service {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   7. NARROW PHONES
   ========================================================================== */

@media (max-width: 380px) {
  .hero__actions {
    gap: 8px;
  }

  .hero__actions .btn {
    min-height: 46px;
    padding-inline: 10px;
    font-size: 0.8rem;
    gap: 6px;
  }

  .hero__statblocks {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .statblock {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
  }

  .about-me__stats {
    grid-template-columns: 1fr;
  }

  .about-me__stat + .about-me__stat {
    border-left: 0;
    padding-left: 12px;
    padding-top: 14px;
    margin-top: 0;
    border-top: 0;
  }

  .impact__metrics {
    gap: 10px;
  }

  .impact__metric {
    min-height: 136px;
    gap: 14px;
    padding: 16px 14px;
  }

  .impact__num {
    font-size: clamp(1.75rem, 9vw, 2.15rem);
  }

  .trust__rail-card,
  .trust__rail li {
    width: 118px;
    height: 70px;
  }

  .trust__rail--offset {
    padding-left: 28px;
  }
}

/* Final mobile polish: field-app showroom and capability system */
@media (max-width: 768px) {
  .screen-gallery {
    --sg-fade: 22px;
    margin: 0;
    padding-block: 48px 42px;
  }

  .screen-gallery::after {
    display: none;
  }

  .screen-gallery__head {
    display: grid;
    gap: 20px;
    margin-bottom: 14px;
  }

  .screen-gallery__brief {
    height: 400px;
    min-height: 400px;
    padding: 18px;
    border-radius: 18px;
  }

  .screen-gallery__brief-top,
  .screen-gallery__brief-foot {
    font-size: 0.52rem;
    letter-spacing: 0.07em;
  }

  .screen-gallery__brief-category {
    margin-top: 18px;
  }

  .screen-gallery__brief h3 {
    font-size: 1.75rem;
  }

  .screen-gallery__brief-copy {
    min-height: 5.2em;
    font-size: 0.84rem;
  }

  .screen-gallery__brief-tags {
    min-height: 94px;
    margin-bottom: 18px;
  }

  .screen-gallery__selection-note {
    align-items: flex-start;
    gap: 8px;
    font-size: 0.64rem;
    line-height: 1.5;
  }

  .screen-gallery__selection-note::before {
    margin-top: 0.72em;
  }

  .screen-gallery__brief-foot > span:first-child {
    display: none;
  }

  .screen-gallery__brief-foot {
    justify-content: flex-start;
  }

  .screen-gallery__scroller,
  .screen-gallery__scroller.is-static,
  .screen-gallery__scroller--marquee {
    padding-block: 22px 34px;
  }

  .screen-gallery__scroller.is-static .screen-gallery__item--clone {
    display: none;
  }

  .screen-gallery__track {
    gap: 16px;
    padding-inline: max(var(--gutter), calc((100vw - min(228px, 72vw)) / 2));
  }

  .screen-gallery__item {
    width: min(228px, 72vw);
  }

  .screen-gallery__label {
    min-height: 44px;
  }

  .screen-gallery__item:hover,
  .screen-gallery__item:focus-visible,
  .screen-gallery__item.is-active {
    transform: translate3d(0, -7px, 0) scale(1.015);
  }

  .caps .sec-head {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "title"
      "description"
      "phases";
    gap: 0;
  }

  .caps .caps__phases {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 18px;
  }

  .caps .caps__phases li {
    padding: 7px 5px;
    font-size: 0.52rem;
    text-align: center;
  }

  .bento__card--tenx,
  .bento__card--type {
    display: flex;
  }

  .bento {
    grid-template-areas:
      "core"
      "tenx"
      "reports"
      "type"
      "portals";
  }

  .bento__card,
  .bento__card:hover {
    transform: none;
  }

  .bento__stat-label {
    max-width: none;
  }

  .bento__training-stat {
    font-size: 3.1rem;
  }
}

/* ==========================================================================
   8. PRODUCT SHOWROOM — responsive presentation layer
   ========================================================================== */

@media (max-width: 1024px) {
  .portfolio-showcase__header-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin-bottom: 24px;
  }

  .portfolio-showcase__section-head {
    margin-bottom: 0;
  }

  .portfolio-showcase__project-intro {
    padding: 2px 0 6px 18px;
  }

  .portfolio-showcase__project-intro::before {
    top: 5px;
  }

  .portfolio-showcase__project-kicker {
    gap: 8px 10px;
    margin-bottom: 9px;
    font-size: 0.62rem;
  }

  .portfolio-showcase__industry {
    min-height: 24px;
    padding: 4px 8px;
  }

  .portfolio-showcase__project-title {
    font-size: clamp(1.75rem, 8vw, 2.35rem);
    max-width: 16ch;
  }

  .portfolio-showcase__project-outcome {
    margin-top: 10px;
    max-width: 42ch;
    font-size: 0.925rem;
    line-height: 1.55;
  }

  .portfolio-showcase__project-actions {
    gap: 10px 12px;
    margin-top: 14px;
  }

  .portfolio-showcase__view-project {
    min-height: 42px;
    padding: 9px 14px;
  }

  .portfolio-showcase__data-badge {
    font-size: 0.61rem;
  }

  .portfolio-showcase__project-progress {
    margin-top: 15px;
  }

  .portfolio-showcase__tabs {
    gap: 9px;
    margin-bottom: 22px;
  }

  .portfolio-showcase__tab {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-width: 168px;
    min-height: 58px;
    padding: 9px 11px;
    border-radius: 14px;
    text-align: left;
  }

  .portfolio-showcase__tab.is-active {
    border-color: rgba(var(--tab-accent-rgb), 0.42);
    background:
      linear-gradient(135deg, rgba(var(--tab-accent-rgb), 0.17), rgba(255, 255, 255, 0.98) 74%);
    color: var(--ps-ink, #0b0e0c);
    box-shadow: 0 10px 24px rgba(var(--tab-accent-rgb), 0.12);
  }

  .portfolio-showcase__tab-index {
    color: rgba(11, 14, 12, 0.38);
    font-family: var(--font-mono);
    font-size: 0.58rem;
  }

  .portfolio-showcase__tab.is-active .portfolio-showcase__tab-index {
    color: var(--tab-accent);
  }

  .portfolio-showcase__tab-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .portfolio-showcase__tab-name {
    overflow: hidden;
    color: inherit;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.1;
    text-overflow: ellipsis;
  }

  .portfolio-showcase__tab-cat {
    display: block;
    overflow: hidden;
    color: var(--gray-500);
    font-family: var(--font-mono);
    font-size: 0.54rem;
    line-height: 1.15;
    text-overflow: ellipsis;
  }

  .portfolio-showcase__tab-state {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(11, 14, 12, 0.16);
  }

  .portfolio-showcase__tab.is-active .portfolio-showcase__tab-state {
    background: var(--tab-accent);
    box-shadow: 0 0 0 4px rgba(var(--tab-accent-rgb), 0.11);
  }

  .portfolio-showcase__macbook-wrap {
    max-width: min(100%, 380px);
  }

  .portfolio-showcase__controls {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--m-shadow-sm);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .portfolio-showcase__control-center {
    min-width: 0;
    display: grid;
    gap: 6px;
  }

  .portfolio-showcase__nav {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .portfolio-showcase__dots {
    min-height: 12px;
  }

  .portfolio-showcase__meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
    margin: 0;
  }

  .portfolio-showcase__caption {
    overflow: hidden;
    font-size: 0.78rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .portfolio-showcase__counter {
    padding: 3px 7px;
    font-size: 0.67rem;
  }

  .portfolio-showcase__screen-frame[data-data-label]::after {
    bottom: auto;
    max-width: none;
    padding: 4px 7px;
    border-radius: 0;
    font-size: 0.48rem;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  .portfolio-showcase__disclaimer,
  .portfolio-showcase__mobile-meta {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .portfolio-showcase__project-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .portfolio-showcase__tab {
    min-width: 158px;
  }

  .portfolio-showcase__controls {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    padding: 7px;
  }

  .portfolio-showcase__nav {
    width: 40px;
    height: 40px;
  }
}