@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/lato-latin-400.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: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/lato-latin-700.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: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../fonts/lato-latin-900.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;
}

/* Portfolio styles: base, navigation, projects, about, contact, hero and mobile scroll. */

  :root {
    --bg: #ffffff;
    --fg: #000000;
    --fg-muted: #444444;
    --line: rgba(0, 0, 0, 0.12);
    --dark-surface: #000000;
    --mist: #eeeeee;
    --ash: #dadada;

    --radius-pill: 999px;
    --radius-card: 12px;
    --radius-image: 24px;

    --shadow-card: rgba(0, 0, 0, 0.05) 0px 1px 10px 0px;
    --shadow-cta: rgba(0, 0, 0, 0.3) 0px 1px 30px 0px;

    --container: 1480px;
    --gutter: clamp(1.25rem, 4vw, 3rem);

    --font-display: 'Lato', sans-serif;
    --font-body: 'Lato', sans-serif;
  }

  *, *::before, *::after { box-sizing: border-box; }

  @media (prefers-reduced-motion: no-preference) {
    html:not(.smooth-scroll-ready) {
      scroll-behavior: smooth;
    }
  }

  html { max-width: 100%; overflow-x: hidden; }

  body {
    margin: 0;
    max-width: 100%;
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
    overflow-y: visible;
  }

  a { color: inherit; text-decoration: none; }

  a:focus-visible,
  button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.9rem 1.75rem;
    border-radius: var(--radius-pill);
    transition: transform 0.3s ease;
  }

  .btn:hover {
    transform: translateY(-2px);
  }
  .icon {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
  }

  .icon-brand {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    display: inline-block;
  }
  .site-header {
    left: 0;
    right: 0;
    z-index: 80;
    display: flex;
    justify-content: center;
    padding-inline: var(--gutter);
    pointer-events: none;
  }

  .nav-pill {
    pointer-events: auto;
    display: grid;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    width: 100%;
  }

  @media (prefers-reduced-transparency: reduce) {
    .nav-pill {
      background: #111;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @supports not (backdrop-filter: blur(1px)) {
    .nav-pill { background: rgba(10, 10, 10, 0.96); }
  }

  .nav-pill__mark {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-width: 0;
  }

  .nav-pill__logo {
    display: block;
    height: auto;
  }

  .nav-pill__links {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-pill__links a {
    position: relative;
    padding: 0.55rem 0.1rem;
    font-weight: 700;
    transition: color 0.3s ease, opacity 0.3s ease;
  }

  .nav-pill__links a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0.15rem;
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, 5px) scale(0.6);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .nav-pill__links a:hover,
  .nav-pill__links a.is-active { color: #fff; }

  .nav-pill__links a.is-active::after {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  .nav-pill__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
  }

  .nav-pill__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 3rem;
    padding: 0.65rem 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  }

  .nav-pill__cta:hover {
    transform: translateY(-1px);
  }

  .nav-pill__menu {
    position: relative;
    place-items: center;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
  }

  .nav-pill__menu:hover {
    transform: rotate(5deg) scale(1.04);
    background: rgba(255, 255, 255, 0.13);
  }

  .nav-pill__menu-lines,
  .nav-pill__menu-lines::before {
    display: block;
    width: 1rem;
    height: 1px;
    background: currentColor;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .nav-pill__menu-lines {
    position: relative;
    transform: translateY(3px);
  }

  .nav-pill__menu-lines::before {
    content: '';
    position: absolute;
    left: 0;
    top: -6px;
  }

  body.nav-open .nav-pill__menu-lines { transform: rotate(45deg); }
  body.nav-open .nav-pill__menu-lines::before { top: 0; transform: rotate(90deg); }

  .nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    padding: clamp(7rem, 15vh, 9rem) var(--gutter) clamp(2rem, 6vh, 4rem);
    background:
      radial-gradient(circle at 78% 16%, rgba(9, 124, 217, 0.18), transparent 28%),
      radial-gradient(circle at 20% 82%, rgba(235, 26, 87, 0.12), transparent 30%),
      rgba(7, 7, 7, 0.94);
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.45s ease, visibility 0.45s step-end;
  }

  body.nav-open { overflow: hidden; }
  body.nav-open .nav-drawer {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.45s ease, visibility 0s step-start;
  }

  .nav-drawer__inner {
    width: min(100%, var(--container));
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(240px, 0.75fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: end;
  }

  .nav-drawer__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-drawer__link {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 0.9rem;
    overflow: hidden;
    color: #fff;
    font-size: clamp(2.6rem, 7vw, 6.8rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 0.98;
  }

  .nav-drawer__link + .nav-drawer__link { margin-top: 0.22em; }
  .nav-drawer__link span { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
  .nav-drawer__link:hover span { transform: translateX(0.12em); }

  .nav-drawer__index {
    color: rgba(255,255,255,.38);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }

  .nav-drawer__meta {
    align-self: end;
    padding-bottom: 0.45rem;
    color: rgba(255,255,255,.62);
  }

  .nav-drawer__eyebrow {
    display: block;
    margin-bottom: 0.9rem;
    color: rgba(255,255,255,.4);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .nav-drawer__email {
    display: inline-flex;
    color: #fff;
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,.28);
    padding-bottom: .18rem;
  }

  .nav-drawer__socials {
    display: flex;
    gap: 1rem;
    margin-top: 1.35rem;
    font-size: .78rem;
    font-weight: 700;
  }

  .nav-drawer__socials a { color: rgba(255,255,255,.55); }
  .nav-drawer__socials a:hover { color: #fff; }

  @media (max-width: 860px) {
    .nav-pill {
      grid-template-columns: minmax(0, 1fr) auto;
      min-height: 4rem;
      border-radius: 1.25rem;
    }

    .nav-pill__links,
    .nav-pill__cta { display: none; }

    .nav-drawer__inner {
      grid-template-columns: 1fr;
      align-items: start;
      gap: clamp(2.5rem, 8vh, 5rem);
    }

    .nav-drawer__link {
      font-size: clamp(2.65rem, 12vw, 5rem);
    }
  }

  @media (max-width: 480px) {
    .site-header { padding-inline: 0.75rem; }
    .nav-pill { padding-left: 1rem; padding-right: 0.5rem; }
    .nav-pill__menu { width: 2.8rem; height: 2.8rem; }
    .nav-drawer { padding-inline: 1.15rem; }
  }
  .container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .hero {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .hero__content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
    width: 100%;
    max-width: 1600px;
    padding-top: clamp(6rem, 14vw, 9rem);
    padding-bottom: clamp(3rem, 8vw, 5rem);
  }

  .hero__intro {
    min-width: 0;
    container-type: inline-size;
  }

  .hero__name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    font-size: clamp(2rem, 9.2cqw, 4rem);
    color: #fff;
    text-shadow:
      0 2px 12px rgba(0, 0, 0, 0.5),
      0 0 40px rgba(9, 124, 217, 0.35);
  }

  .hero__name .line {
    display: block;
    overflow: hidden;
  }

  .hero__name .line span {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
  }
  @supports not (container-type: inline-size) {
    .hero__name {
      font-size: clamp(2rem, 4vw, 3.65rem);
    }
  }

  .hero__role {
    margin: 1rem 0 0;
    max-width: 42ch;
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    font-weight: 400;
    color: #fff;
    line-height: 1.55;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  }

  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
  }
  .hero-carousel {
    position: relative;
    min-width: 0;
  }

  .hero-carousel__card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-image);
    overflow: hidden;
    background: var(--mist);
    cursor: pointer;
    transform-style: preserve-3d;
    will-change: transform;
    box-shadow:
      0 30px 60px -24px rgba(0, 0, 0, 0.55),
      inset 0 0 0 1px rgba(255, 255, 255, 0.07);
    transition: box-shadow 0.45s ease, filter 0.45s ease;
  }

  .hero-carousel__card:hover,
  .hero-carousel__card:focus-visible {
    box-shadow:
      0 38px 75px -24px rgba(0, 0, 0, 0.62),
      0 0 0 1px rgba(255, 255, 255, 0.16),
      0 0 55px rgba(9, 124, 217, 0.12);
  }
  @media (max-width: 860px) {
    .hero {
      align-items: flex-start;
      min-height: auto;
    }

    .hero__content {
      grid-template-columns: 1fr;
      gap: 2.75rem;
      padding-bottom: clamp(3rem, 10vw, 4rem);
    }

    .hero-carousel__card {
      aspect-ratio: 4 / 3;
    }
  }
  @media (max-width: 640px) {
    .hero__cta {
      flex-direction: column;
      align-items: stretch;
    }

    .hero__cta .btn {
      width: 100%;
    }
  }
  .preloader {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #0a0a0a;
    overflow: hidden;
    will-change: transform, clip-path;
  }

  .preloader__brand {
    width: min(82vw, 430px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .preloader__kicker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .52em;
    margin: 0 0 1.15rem;
    font-family: var(--font-body);
    font-size: clamp(.6rem, 1.2vw, .72rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: #171717;
    white-space: nowrap;
  }
  .preloader__kicker-blue { color: #2368df; }
  .preloader__kicker-orange { color: #e62359; }

  .preloader__wordmark {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2rem, 7.2vw, 3.65rem);
    font-weight: 900;
    line-height: .95;
    letter-spacing: .24em;
    text-indent: .24em;
    color: #070707;
    white-space: nowrap;
  }

  .preloader__track {
    position: relative;
    width: min(72vw, 330px);
    height: 1px;
    margin-top: 1.6rem;
    background: rgba(0,0,0,.1);
    overflow: visible;
  }
  .preloader__progress {
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, #2368df 0%, #2368df 44%, #e62359 100%);
    will-change: transform;
  }
  .preloader__spark {
    position: absolute;
    top: 50%;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e62359;
    box-shadow: 0 0 0 5px rgba(230,35,89,.08);
    transform: translate(-50%,-50%);
    opacity: 0;
    will-change: transform, opacity;
  }

  body.is-loading { overflow: hidden; }

  @media (prefers-reduced-motion: no-preference) {
    .js .preloader { display: flex; }
    .js .hero__brandline,
    .js .hero__name .line span,
    .js .hero__divider,
    .js .hero__role,
    .js .hero__cta,
    .js .hero__footer-meta {
      opacity: 0;
    }
    .js .hero__name .line span { transform: translateY(112%); }
    .js .hero__brandline,
    .js .hero__divider,
    .js .hero__role,
    .js .hero__cta,
    .js .hero__footer-meta { transform: translateY(14px); }
  }

  @media (max-width: 480px) {
    .preloader__brand { width: 88vw; }
    .preloader__kicker { gap: .42em; letter-spacing: .14em; }
    .preloader__wordmark { font-size: clamp(1.85rem, 10vw, 2.65rem); letter-spacing: .17em; text-indent: .17em; }
    .preloader__track { width: min(76vw, 290px); margin-top: 1.35rem; }
  }
  .eyebrow {
    display: block;
    color: var(--accent);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
  }
  .section-header {
    max-width: 46ch;
    margin-bottom: clamp(3rem, 8vw, 5rem);
  }
  .work {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 100svh;
    color: #fff;
    padding-block: clamp(5rem, 8vw, 7rem);
  }

  .work::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
  }

  .work.is-pointer-active::before { opacity: 1; }

  .work__background,
  .work__background::after {
    position: absolute;
    inset: 0;
  }

  .work__background {
    z-index: -2;
    overflow: hidden;
  }

  .work__background::after {
    content: '';
    z-index: 3;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.62) 35%, rgba(0, 0, 0, 0.24) 66%, rgba(0, 0, 0, 0.42) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0.08) 48%, rgba(0, 0, 0, 0.62) 100%);
  }

  .work__background-image {
    position: absolute;
    inset: -5%;
    z-index: 1;
    width: 110%;
    height: 110%;
    object-fit: cover;
    opacity: 0;
    filter: saturate(0.72) contrast(1.05) brightness(0.58);
    transform: scale(1.04);
    transition: opacity 0.85s ease;
  }

  .work__background-image.is-active { opacity: 1; }

  .work__background-glow {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
  }

  .work__inner {
    position: relative;
    z-index: 1;
    width: min(100%, 1600px);
    min-height: calc(100svh - clamp(10rem, 16vw, 13rem));
    padding-inline: clamp(1.25rem, 3vw, 3.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .work__heading {
    max-width: 58rem;
    margin-bottom: clamp(1.8rem, 3vw, 2.5rem);
  }

  .work__heading .eyebrow {
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 0.7rem;
  }

  .work__heading-title {
    margin: 0 0 0.85rem;
    max-width: 18ch;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.8vw, 4.4rem);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: #fff;
  }

  .work__heading-desc {
    margin: 0;
    max-width: 62ch;
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(0.95rem, 1.4vw, 1.08rem);
    line-height: 1.65;
  }

  .work__filters {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    overflow-x: auto;
    padding: 0.2rem 0.1rem 0.75rem;
    margin-bottom: clamp(2rem, 4vw, 3.2rem);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    isolation: isolate;
  }

  .work__filter-glider {
    position: absolute;
    left: 0;
    top: 0.2rem;
    height: 2.55rem;
    width: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-pill);
    pointer-events: none;
    z-index: 0;
    transform: translate3d(0, 0, 0);
    transition: left 0.42s cubic-bezier(0.65, 0, 0.35, 1), width 0.42s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease;
    opacity: 0;
  }

  .work__filters::-webkit-scrollbar { display: none; }

  .work__filter {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.55rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
    position: relative;
    z-index: 1;
  }

  .work__filter:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
  }

  .work__filter.is-active,
  .work__filter[aria-selected="true"] {
    background: transparent;
    border-color: transparent;
    color: #fff;
  }

  .work__filter-count {
    opacity: 0.68;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
  }

  .work__filter:active,
  .work__info-link:active,
  .work__carousel-btn:active,
  .nav-pill__cta:active,
  .btn:active {
    transform: scale(0.96);
    transition: transform 0.08s ease-out;
  }

  .work__split {
    display: grid;
    grid-template-columns: minmax(360px, 0.58fr) minmax(0, 1.95fr);
    align-items: center;
    gap: clamp(3rem, 6vw, 6rem);
  }

  .work__info {
    min-width: 0;
    max-width: 34rem;
  }

  .work__info-content {
    will-change: transform, opacity;
  }

  .work__info-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.15rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .work__info-dot {
    width: 0.48rem;
    height: 0.48rem;
    flex: 0 0 auto;
    border-radius: 50%;
  }

  .work__info-title {
    margin: 0;
    max-width: 28ch;
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.2vw, 2.1rem);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.04em;
    color: #fff;
  }

  .work__info-desc {
    margin: clamp(1.4rem, 2.6vw, 1.9rem) 0 0;
    max-width: 48ch;
    color: rgba(255, 255, 255, 0.73);
    font-size: clamp(0.98rem, 1.45vw, 1.08rem);
    line-height: 1.7;
  }

  .work__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin: clamp(1.75rem, 3vw, 2.35rem) 0 0;
  }

  .work__detail {
    padding-top: 0.8rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  .work__detail-label {
    display: block;
    margin-bottom: 0.25rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .work__detail-value {
    display: block;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
  }

  .work__info-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: clamp(1.8rem, 3vw, 2.5rem);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    transition: transform 0.3s ease, background 0.3s ease;
  }

  .work__info-link:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.14);
  }

  .work__info-link .icon {
    width: 0.95rem;
    height: 0.95rem;
  }

  .work__visual {
    min-width: 0;
    margin-right: clamp(-5rem, -4vw, -2rem);
  }

  .work__carousel {
    position: relative;
    width: 100%;
    min-width: 0;
  }

  .work__carousel-track {
    display: flex;
    gap: clamp(0.8rem, 1.45vw, 1.2rem);
    overflow-x: auto;
    padding: 0.75rem clamp(0.1rem, 1vw, 0.6rem) 1.25rem;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.5rem;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .work__carousel-track::-webkit-scrollbar { display: none; }

  .work__card {
    position: relative;
    display: block;
    text-decoration: none;
    flex: 0 0 clamp(200px, 17vw, 295px);
    aspect-ratio: 3 / 4;
    padding: 0;
    border: 0;
    border-radius: clamp(1.25rem, 2vw, 1.7rem);
    overflow: hidden;
    scroll-snap-align: center;
    background: #111;
    color: #fff;
    cursor: pointer;
    isolation: isolate;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.36), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    opacity: 0.58;
    transform: translateY(0) scale(0.95);
    transform-origin: center bottom;
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
    text-align: left;
  }

  .work__card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 55%);
    transition: background 0.35s ease;
  }
  @property --work-beam-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
  }

  .work__card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    padding: 1.5px;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    background: conic-gradient(
      from var(--work-beam-angle),
      transparent 0deg 248deg,
      rgba(9, 124, 217, 0.16) 270deg,
      rgba(104, 190, 255, 0.95) 300deg,
      rgba(255, 255, 255, 0.98) 315deg,
      rgba(9, 124, 217, 0.34) 338deg,
      transparent 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: opacity 0.45s ease;
  }

  .work__card.is-active::before {
    opacity: 1;
    animation: work-border-beam 5.5s linear infinite;
  }

  @keyframes work-border-beam {
    to { --work-beam-angle: 360deg; }
  }

  .work__card:hover {
    opacity: 0.88;
    transform: translateY(-5px) scale(0.97);
  }

  .work__card:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 5px;
  }

  .work__card.is-active {
    opacity: 1;
    transform: translateY(-8px) scale(1);
  }

  .work__card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.015);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
  }

  .work__card:hover .work__card-image,
  .work__card.is-active .work__card-image {
    transform: scale(1.045);
  }
  .work__card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.48), transparent);
  }

  .work__card:hover .work__card-body,
  .work__card:focus-visible .work__card-body,
  .work__card.is-active .work__card-body {
    opacity: 1;
    transform: translateY(0);
  }

  .work__card-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }

  .work__card-hint .icon {
    width: 0.8rem;
    height: 0.8rem;
  }

  .work__carousel-controls {
    display: grid;
    grid-template-columns: auto minmax(140px, 1fr) minmax(4.8rem, auto) auto;
    align-items: center;
    gap: 1rem;
    margin-top: 0.55rem;
  }

  .work__carousel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  }

  .work__carousel-btn:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
  }

  .work__carousel-btn:active { transform: translateY(0) scale(0.96); }
  .work__carousel-btn .icon { width: 1rem; height: 1rem; }

  .work__progress {
    position: relative;
    height: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.18);
  }

  .work__progress-fill {
    display: block;
    width: 0;
    height: 100%;
    background: #fff;
    transform-origin: left center;
    transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .work__progress-meta {
    min-width: 4.8rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .work__noscript {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.6;
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  .work__noscript p { margin: 0 0 0.75rem; }
  .work__noscript a { text-decoration: underline; text-underline-offset: 2px; }

  @media (prefers-reduced-transparency: reduce) {
    .work__filter,
    .work__info-link,
    .work__carousel-btn,
    .work__card-hint {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: rgba(0, 0, 0, 0.55);
    }

    .work__filter-glider {
      background: var(--accent);
      border-color: rgba(255, 255, 255, 0.22);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .work__background-image,
    .work__card::before,
    .work__filter,
    .work__filter-glider,
    .hero-carousel__card,
    .work__card,
    .work__card-image,
    .work__card-body,
    .work__carousel-btn,
    .work__info-link,
    .work__progress-fill {
      transition: none;
    }

    .work__card.is-active::before {
      animation: none;
      opacity: 0.7;
    }
  }

  @supports not (backdrop-filter: blur(1px)) {
    .work__filter,
    .work__info-link,
    .work__carousel-btn,
    .work__card-hint {
      background: rgba(0, 0, 0, 0.55);
    }

    .work__filter-glider {
      background: var(--accent);
      border-color: rgba(255, 255, 255, 0.22);
    }
  }

  @media (max-width: 1100px) {
    .work__split {
      grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
      gap: clamp(2.5rem, 5vw, 4rem);
    }

    .work__visual { margin-right: clamp(-3rem, -2vw, -1rem); }
    .work__card { flex-basis: clamp(190px, 21vw, 250px); }
  }

  @media (max-width: 860px) {
    .work { min-height: auto; }
    .work__inner { min-height: auto; }
    .work__heading { margin-bottom: 1.5rem; }

    .work__filters { margin-bottom: 2.2rem; }

    .work__split {
      grid-template-columns: 1fr;
      gap: 2.75rem;
    }

    .work__info { max-width: 42rem; }
    .work__info-title { max-width: 20ch; }
    .work__visual { margin-right: 0; }

    .work__carousel-track {
      padding-inline: 0.5rem;
      scroll-padding-inline: 0.5rem;
    }

    .work__card {
      flex-basis: min(54vw, 290px);
      scroll-snap-align: center;
    }
  }

  @media (max-width: 640px) {
    .work__inner { padding-inline: var(--gutter); }
    .work__heading-title { max-width: 13ch; }
    .work__heading-desc { font-size: 0.94rem; }
    .work__info-title { font-size: clamp(1.5rem, 7vw, 2.2rem); }
    .work__details { grid-template-columns: 1fr 1fr; }
    .work__card { flex-basis: 72vw; max-width: 300px; }
    .work__carousel-controls {
      grid-template-columns: auto minmax(0, 1fr) minmax(4rem, auto) auto;
      gap: 0.7rem;
    }
  }
  .about {
    padding-block: clamp(5rem, 12vw, 9rem);
  }

  .about__grid {
    display: grid;
  }

  .about__media {
    overflow: hidden;
  }

  .about__heading {
    margin: 0 0 1.25rem;
    font-weight: 800;
  }

  .about__heading-line {
    display: block;
  }

  .about__statement-bold {
    margin: 0 0 1rem;
    font-weight: 700;
    line-height: 1.4;
  }

  .about__statement {
    margin: 0;
    max-width: 60ch;
    font-weight: 400;
    line-height: 1.6;
    font-size: clamp(0.92rem, 1.35vw, 1rem);
  }

  .about__skills {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: clamp(1.5rem, 3.5vw, 2rem) 0 0;
    padding: 0;
  }

  .about__skills li {
    background: var(--mist);
    color: var(--fg);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.55rem 1rem;
    border-radius: var(--radius-pill);
  }

  .about__tools {
    margin-top: clamp(1.5rem, 3.5vw, 2rem);
  }

  .about__tools-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
  }

  .about__tools-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
  }

  .about__tools-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--mist);
    color: var(--fg);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.5rem 0.9rem;
    border-radius: var(--radius-pill);
  }

  @media (max-width: 860px) {
    .about__heading-line {
      display: inline;
    }

    .about__heading-line + .about__heading-line::before {
      content: ' ';
    }

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

    .about__media {
      max-width: 360px;
    }
  }
  .magnetic {
    position: relative;
    display: inline-block;
  }

  .magnetic__inner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
    will-change: transform;
  }

  html:not(.gsap-ready) .magnetic:hover .magnetic__inner {
    transform: translateY(-2px);
  }
  .contact {
    padding-block: clamp(5rem, 12vw, 9rem);
  }

  .contact__title {
    margin: 0;
    font-weight: 800;
  }

  .contact__title span {
    display: block;
  }

  .contact__desc {
    margin: 1.25rem 0 0;
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    line-height: 1.6;
  }

  .contact__email {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin-top: clamp(2rem, 5vw, 3rem);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    color: #fff;
    font-weight: 600;
    font-size: clamp(1.05rem, 2.2vw, 1.35rem);
    padding: clamp(0.9rem, 2vw, 1.1rem) clamp(1.75rem, 4vw, 2.25rem);
    border-radius: var(--radius-pill);
    overflow-wrap: anywhere;
  }

  @media (prefers-reduced-transparency: reduce) {
    .contact__email {
      background: var(--accent);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  .contact__social {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: clamp(2.5rem, 6vw, 3.5rem) 0 0;
    padding: 0;
  }

  .contact__social a {
    display: inline-flex;
    align-items: center;
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    color: var(--fg);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-pill);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      inset 0 0 0 1px rgba(255, 255, 255, 0.6),
      0 4px 16px rgba(0, 0, 0, 0.06);
    transition: background 0.3s ease, color 0.3s ease;
  }

  .contact__social a:hover {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
  }

  @media (prefers-reduced-transparency: reduce) {
    .contact__social a {
      background: var(--mist);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }
  .site-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding-block: clamp(2rem, 5vw, 3rem);
    border-top: 1px solid var(--line);
    font-size: 0.8rem;
    color: var(--fg-muted);
  }

  .site-footer__top {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    color: var(--fg-muted);
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-pill);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      inset 0 0 0 1px rgba(255, 255, 255, 0.6),
      0 4px 16px rgba(0, 0, 0, 0.06);
    transition: background 0.3s ease, color 0.3s ease;
  }

  .site-footer__top:hover {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
  }

  @media (prefers-reduced-transparency: reduce) {
    .site-footer__top {
      background: var(--mist);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
  }

  @media (max-width: 640px) {
    .site-footer {
      justify-content: flex-start;
      gap: 0.5rem 1.5rem;
    }
  }
  :root {
    --accent: #2f78ff;
    --accent-blue: #2f78ff;
    --accent-orange: #e62359;
    --surface-warm: #f8f6f3;
    --surface-soft: #f1f3f6;
    --ink-soft: #60656e;
    --hero-bg: #f8f7f5;
  }

  body {
    background: #f8f7f5;
    color: #0a0a0a;
  }
  .site-header { padding-top: 1rem; }
  .nav-pill {
    max-width: 1600px;
    min-height: 4.6rem;
    padding: .5rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    color: #0a0a0a;
    grid-template-columns: minmax(160px,.8fr) auto minmax(160px,.8fr);
  }
  .nav-pill__logo { filter: none; }
  .nav-pill__links { gap: clamp(1.5rem,3.4vw,3.3rem); }
  .nav-pill__links a {
    color: #0a0a0a;
    font-size: .76rem;
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .nav-pill__links a:hover,.nav-pill__links a.is-active { color:#0a0a0a; }
  .nav-pill__links a::after { background: var(--accent-orange); }
  .nav-pill__actions { min-width: 3rem; }
  .nav-pill__cta {
    border-color: rgba(0,0,0,.1);
    background: rgba(255,255,255,.5);
    color:#0a0a0a;
    box-shadow: 0 10px 30px rgba(30,45,70,.06);
  }
  .nav-pill__cta:hover { background:#fff; border-color:rgba(0,0,0,.16); }
  .nav-pill__menu { display:none; }

  .hero--identity .hero__content {
    z-index:2;
    grid-template-columns:minmax(0,.9fr) minmax(440px,1.1fr);
    gap:clamp(1rem,3vw,4rem);
  }
  .hero__brandline {
    display:flex; align-items:center;
  }
  .hero--identity .hero__name {
    text-transform:none;
  }
  .hero--identity .hero__name .line { padding-right:.12em; }
  .hero--identity .hero__name .line span { position:relative; }
  .hero--identity .hero__cta { align-items:center; }
  .hero__footer-meta { position:absolute; z-index:6; left:0; right:0; bottom:1.8rem; max-width:1600px; display:flex; justify-content:space-between; align-items:flex-end; pointer-events:none; }
  .hero__location { display:flex; align-items:center; gap:.7rem; }
  .hero__globe { font-size:1.1rem; }
  .hero__meta-line { width:2rem; height:1px; background:rgba(0,0,0,.25); }
  .hero__scroll { pointer-events:auto; display:flex; flex-direction:column; align-items:center; gap:.7rem; text-transform:uppercase; letter-spacing:.15em; writing-mode:vertical-rl; }
  .hero__scroll-line { width:1px; height:2.8rem; background:rgba(0,0,0,.35); }
  @media (prefers-reduced-motion:no-preference) {
    .js .hero__brandline,.js .hero__divider,.js .hero--identity .hero__role,.js .hero--identity .hero__cta { transform:translateY(16px); opacity:0; }
  }
  .work { background:#08090b; }
  .work__background { background:#08090b; }
  .work__background-glow { background:radial-gradient(circle at 76% 46%,rgba(47,120,255,.2),transparent 34%),radial-gradient(circle at 16% 86%,rgba(230,35,89,.09),transparent 25%); }
  .work::before { background:radial-gradient(circle 280px at var(--work-spot-x,72%) var(--work-spot-y,50%),rgba(47,120,255,.16),transparent 72%); }
  .work__filter-glider { background:linear-gradient(110deg,#327dff,#1663e6); box-shadow:0 8px 28px rgba(47,120,255,.3),inset 0 1px 0 rgba(255,255,255,.22); }
  .work__info-dot { background:var(--accent-orange); box-shadow:0 0 0 5px rgba(230,35,89,.12); }
  .work__card.is-active { box-shadow:0 34px 90px rgba(0,0,0,.46),0 0 0 1px rgba(255,255,255,.14),0 0 0 5px rgba(47,120,255,.13); }
  .about { max-width:none; padding-inline:var(--gutter); background:linear-gradient(180deg,#f8f7f5 0%,#f1f3f6 100%); border-top:0; }
  .about__grid { max-width:var(--container); margin-inline:auto; }
  .about__media { border-radius:2rem; border:1px solid rgba(0,0,0,.06); box-shadow:0 30px 75px rgba(35,43,58,.09); }
  .about__heading { font-size:clamp(2rem,4vw,3.4rem); line-height:1; letter-spacing:-.045em; max-width:22ch; }
  .about__heading-line--accent { color:var(--accent-blue); }
  .about__statement-bold { max-width:44ch; font-size:clamp(1.08rem,1.7vw,1.3rem); }
  .about__statement { color:#5a5f67; }
  .about__skills li,.about__tools-item { background:rgba(255,255,255,.74); border:1px solid rgba(0,0,0,.06); box-shadow:0 7px 22px rgba(30,45,70,.035); }
  .contact { position:relative; isolation:isolate; border-top:0; }
  .contact::before,.contact::after { content:''; position:absolute; z-index:-1; border-radius:50%; filter:blur(60px); pointer-events:none; }
  .contact::before { width:32rem; height:32rem; left:-14rem; bottom:-17rem; background:rgba(47,120,255,.13); }
  .contact::after { width:28rem; height:28rem; right:-12rem; top:-14rem; background:rgba(230,35,89,.12); }
  .contact .eyebrow { color:var(--accent-orange); }
  .contact__desc { color:#5b6068; }
  .contact__email { background:#0b0c0f; box-shadow:0 20px 55px rgba(15,20,30,.17); }
  .contact__email:hover { transform:translateY(-2px); }
  .contact__social a { background:rgba(255,255,255,.74); border:1px solid rgba(0,0,0,.06); }

  .site-footer { background:#faf9f7; }

  @media (max-width:1100px) {
    .hero--identity .hero__content { grid-template-columns:minmax(0,.9fr) minmax(390px,1.05fr); }
  }

  @media (max-width:860px) {
    .site-header { padding-inline:1rem; }
    .nav-pill { grid-template-columns:1fr auto; min-height:3.8rem; padding:.2rem 0; }
    .nav-pill__links,.nav-pill__cta { display:none; }
    .nav-pill__menu { display:inline-grid; color:#0a0a0a; border-color:rgba(0,0,0,.12); background:rgba(255,255,255,.55); }
    .nav-pill__logo { width:3.2rem; }
    .hero.hero--identity { min-height:auto; align-items:flex-start; }
    .hero--identity .hero__content { grid-template-columns:1fr; gap:.5rem; padding-top:7rem; padding-bottom:6rem; }
    .hero--identity .hero__intro { max-width:100%; }
    .hero--identity .hero__name { font-size:clamp(3.15rem,13vw,6rem); line-height:1; }
    .hero--identity .hero__role { max-width:38rem; }
    .hero__footer-meta { position:relative; bottom:auto; margin-top:-4rem; padding-bottom:1.5rem; }
    .hero__scroll { display:none; }
    .about__grid { grid-template-columns:1fr; }
    .about__media { max-width:380px; }
  }

  @media (max-width:560px) {
    .hero--identity .hero__content { padding-top:6.5rem; padding-bottom:4rem; }
    .hero__brandline { font-size:1rem; margin-bottom:1.45rem; }
    .hero--identity .hero__name { font-size:clamp(2.75rem,14.2vw,4.5rem); letter-spacing:-.065em; line-height:1.02; }
    .hero__divider { margin:1.6rem 0 1.3rem; }
    .hero--identity .hero__cta { align-items:flex-start; gap:1.1rem; }
    .hero__footer-meta { margin-top:-3.3rem; font-size:.67rem; }
    .hero__location { gap:.5rem; }
    .hero__meta-line { width:1.2rem; }
    .contact__title { font-size:clamp(2.7rem,14vw,4.4rem); }
  }
  @media (min-width: 901px) {

    .nav-pill__links a {
      color: #080808;
      font-weight: 750;
    }

    .nav-pill__links a:hover,
    .nav-pill__links a.is-active {
      color: #050505;
    }
  }
  .site-header {
    position: absolute;
    top: 0;
  }
  .nav-pill__logo {
    width: clamp(8.75rem, 10.5vw, 11rem);
    max-width: none;
  }

  .about__media {
    align-self: start;
    margin-top: 0;
  }
  .contact {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    overflow: visible;
    background: transparent;
  }

  .contact > * {
    max-width: initial;
    margin-left: 0;
    margin-right: 0;
  }

  .contact__title {
    max-width: 22ch;
    font-size: clamp(2rem, 5.5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -.02em;
  }

  .contact__desc {
    max-width: 58ch;
  }

  @media (max-width: 860px) {
    .nav-pill__logo {
      width: clamp(7.5rem, 28vw, 9rem);
    }

    .hero--identity .hero__name {
      font-size: clamp(3.8rem, 13vw, 6rem);
    }

    .about__media {
      margin-top: 0;
    }
  }

  @media (max-width: 560px) {
    .nav-pill__logo {
      width: clamp(7.1rem, 34vw, 8.25rem);
    }

    .hero__brandline {
      font-size: .92rem;
    }

    .contact__title {
      font-size: clamp(2.6rem, 13vw, 4rem);
    }
  }
  .hero.hero--identity {
    position: relative;
    overflow: hidden;
  }

  .hero__brandline {
    margin-bottom: clamp(1.4rem, 2.2vw, 1.9rem);
  }

  .hero__divider {
    margin-top: clamp(1.8rem,2.6vw,2.5rem);
    margin-bottom: 1.4rem;
  }

  .hero--identity .hero__cta {
    gap: 1.15rem;
  }
  .hero__work-link:hover {
    box-shadow: 0 16px 38px rgba(10,20,38,.24), 0 0 0 3px rgba(47,120,255,.09);
  }

  .hero__footer-meta {
    text-shadow: 0 1px 8px rgba(255,255,255,.65);
  }
  .about__grid {
    grid-template-columns: minmax(0,1.12fr) minmax(320px,.82fr);
    align-items: start;
    gap: clamp(2.5rem,6vw,7rem);
  }
  .about__content { order: 1; }

  .about__media--character {
    order: 2;
    position: relative;
    align-self: start;
    min-height: clamp(31rem, 47vw, 45rem);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    border: 0;
    border-radius: 2rem;
    background:
      radial-gradient(circle at 48% 75%, rgba(47,120,255,.18), transparent 31%),
      radial-gradient(circle at 76% 70%, rgba(230,35,89,.14), transparent 25%),
      linear-gradient(180deg, rgba(255,255,255,.5), rgba(244,245,248,.9));
    box-shadow: none;
  }

  .about__media--character::before {
    content: '';
    position: absolute;
    inset: 8% 7% 5%;
    border: 1px solid rgba(47,120,255,.13);
    border-radius: 50%;
    transform: rotate(-12deg) scaleX(1.08);
    pointer-events: none;
  }

  .about__character-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.055);
    pointer-events: none;
  }
  .about__character-orbit--one {
    width: 76%;
    aspect-ratio: 1.55;
    left: 8%;
    top: 24%;
    border-color: rgba(47,120,255,.18);
    transform: rotate(-13deg);
  }
  .about__character-orbit--two {
    width: 62%;
    aspect-ratio: 1.6;
    right: 2%;
    top: 39%;
    border-color: rgba(230,35,89,.14);
    transform: rotate(16deg);
  }
  .about__character-glow {
    position: absolute;
    left: 15%; right: 4%; bottom: 4%;
    height: 14%;
    border-radius: 50%;
    background: linear-gradient(90deg, rgba(47,120,255,.32), rgba(255,255,255,.1) 48%, rgba(230,35,89,.28));
    filter: blur(28px);
    opacity: .72;
    animation: aboutCharacterGlow 5.8s ease-in-out infinite alternate;
  }
  .about__character-shadow {
    position: absolute;
    left: 22%; right: 7%; bottom: 4.5%;
    height: 5%;
    border-radius: 50%;
    background: rgba(26,31,43,.14);
    filter: blur(13px);
  }
  .about__character {
    position: relative;
    z-index: 2;
    display: block;
    width: min(104%, 640px);
    height: auto;
    margin-bottom: -1.2%;
    transform-origin: 50% 82%;
    filter: drop-shadow(0 25px 28px rgba(35,40,55,.12));
    animation: aboutCharacterIdle 6.4s ease-in-out infinite alternate;
    will-change: transform;
  }

  @keyframes aboutCharacterIdle {
    0%   { transform: translate3d(0,2px,0) rotate(-.08deg); }
    100% { transform: translate3d(0,-7px,0) rotate(.12deg); }
  }
  @keyframes aboutCharacterGlow {
    0%   { transform: scaleX(.95); opacity:.52; }
    100% { transform: scaleX(1.06); opacity:.78; }
  }

  @media (max-width: 980px) {
    .hero--identity .hero__intro { width: min(42rem, 67vw); }
    .about__grid {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
    .about__media--character {
      width: min(100%, 620px);
      min-height: 34rem;
      margin-inline: auto;
    }
  }

  @media (max-width: 680px) {
    .hero.hero--identity { min-height: 100svh; align-items: flex-end; }
    .hero--identity .hero__content {
      padding-top: 7rem;
      padding-bottom: 7rem;
    }
    .hero--identity .hero__intro {
      width: 100%;
      max-width: 100%;
    }
    .hero__brandline { font-size: .83rem; margin-bottom: 1.15rem; }
    .hero--identity .hero__name {
      font-size: clamp(3.6rem, 16vw, 5rem);
      line-height: .93;
      letter-spacing: -.07em;
    }
    .hero--identity .hero__role {
      max-width: 36ch;
      font-size: .97rem;
    }
    .hero--identity .hero__cta {
      align-items: flex-start;
      flex-wrap: wrap;
    }
    .hero__footer-meta { bottom: 1.25rem; }
    .hero__location { display: none; }
    .about__media--character {
      min-height: 28rem;
      border-radius: 1.5rem;
    }
    .about__character { width: min(112%, 520px); }
  }

  @media (prefers-reduced-motion: reduce) {
    
    .about__character,
    .about__character-glow { animation: none !important; }
  }
  .hero.hero--identity {
    min-height: 100svh;
    display: flex;
    align-items: center;
    background: #fff;
    color: #080808;
    isolation: isolate;
    --hero-pointer-x: 50%;
    --hero-pointer-y: 50%;
  }

  .hero.hero--identity::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(circle 36rem at var(--hero-pointer-x) var(--hero-pointer-y), rgba(47,120,255,.045), transparent 64%),
      radial-gradient(circle 28rem at calc(var(--hero-pointer-x) + 10%) calc(var(--hero-pointer-y) + 16%), rgba(230,35,89,.026), transparent 68%);
    opacity: .85;
  }
  .hero.hero--identity::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(6.5rem, 13vh, 8rem);
    z-index: 6;
    pointer-events: none;
    background: linear-gradient(180deg,
      #fff 0%,
      rgba(255,255,255,.99) 62%,
      rgba(255,255,255,.9) 78%,
      rgba(255,255,255,0) 100%);
  }

  .hero--identity .hero__content {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1600px;
    min-height: 100svh;
    padding-top: clamp(7.5rem, 14vh, 10rem);
    padding-bottom: clamp(6.5rem, 12vh, 8rem);
  }

  .hero--identity .hero__intro {
    width: min(92vw, 1380px) !important;
    max-width: none !important;
    margin-inline: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    container-type: normal;
  }

  .hero__brandline {
    justify-content: center;
    gap: .42em;
    margin: 0 0 clamp(1.8rem, 3vw, 2.6rem);
    font-size: clamp(.72rem, .9vw, .92rem) !important;
    font-weight: 750;
    letter-spacing: .15em !important;
    text-transform: uppercase;
    color: #171717;
  }
  .hero__brandline-blue { color: #2368df; }
  .hero__brandline-orange { color: #e62359; }

  .hero--identity .hero__name {
    width: 100%;
    margin: 0;
    color: #050505;
    font-size: clamp(4.6rem, min(10.7vw, 18svh), 10.6rem) !important;
    letter-spacing: -.078em !important;
    font-weight: 900;
    text-align: center;
    text-shadow: none !important;
  }
  .hero--identity .hero__name .line {
    display: block;
    padding: 0 .08em .08em;
    overflow: hidden !important;
  }
  .hero--identity .hero__name .line span { display: inline-block; white-space: nowrap; }

  .hero__divider {
    width: clamp(3.5rem, 6vw, 5.5rem);
    height: 1px;
    margin: clamp(2.4rem, 4vw, 3.4rem) auto clamp(1.4rem, 2.5vw, 1.9rem) !important;
    background: linear-gradient(90deg, #2368df 0 48%, rgba(0,0,0,.12) 48% 52%, #e62359 52% 100%);
    transform-origin: center;
  }

  .hero--identity .hero__role {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55em;
    margin: 0;
    max-width: none !important;
    min-height: 1.8em;
    color: #5d6168 !important;
    font-size: clamp(.98rem, 1.28vw, 1.18rem) !important;
    line-height: 1.4 !important;
    letter-spacing: -.015em;
    text-shadow: none !important;
  }
  .hero__role-separator { color: #b4b6ba; }
  .hero__rotator {
    position: relative;
    display: inline-flex;
    min-width: 5.6em;
    height: 1.45em;
    align-items: center;
    overflow: hidden;
    text-align: left;
    color: #111;
    font-weight: 700;
  }
  .hero__rotator-word { display: inline-block; will-change: transform, opacity; }

  .hero--identity .hero__cta {
    justify-content: center;
    margin-top: clamp(2rem, 3.5vw, 2.8rem) !important;
  }
  .hero__work-link {
    display: inline-flex;
    align-items: center;
    gap: .85rem !important;
    padding: .92rem 1.3rem .92rem 1.45rem !important;
    border: 1px solid #111 !important;
    border-radius: 999px;
    background: #0a0a0a !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: .73rem !important;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .13em !important;
    text-transform: uppercase;
    transition: transform .35s cubic-bezier(.16,1,.3,1), background .3s, color .3s;
  }
  .hero__work-link:hover { transform: translateY(-3px) !important; background: #fff !important; color: #090909 !important; }
  .hero__work-arrow {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    transition: transform .35s cubic-bezier(.16,1,.3,1);
  }
  .hero__work-link:hover .hero__work-arrow { transform: translate(3px,3px); }

  .hero__footer-meta {
    color: #898d94 !important;
    font-size: .64rem !important;
  }
  .hero__meta-line, .hero__scroll-line { background: rgba(0,0,0,.16) !important; }
  @media (min-width: 901px) {
    .nav-pill__links {
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      box-shadow: none !important;
    }
    .nav-pill__links a { text-shadow: none !important; }
    .nav-pill__cta { background: transparent !important; border-color: rgba(0,0,0,.13) !important; box-shadow: none !important; }
    .nav-pill__cta:hover { background: #0a0a0a !important; color: #fff !important; }
  }

  @media (max-width: 900px) {
    .hero.hero--identity::after { height: 5.8rem; }
    .hero--identity .hero__content {
      min-height: 100svh;
      padding-top: 7.5rem !important;
      padding-bottom: 6rem !important;
    }
    .hero--identity .hero__intro { width: 94vw !important; }
    .hero--identity .hero__name {
      font-size: clamp(3.8rem, 15.4vw, 7rem) !important;
      letter-spacing: -.07em !important;
    }
    .hero__brandline { margin-bottom: 1.65rem; }
    .hero--identity .hero__footer-meta {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      padding-inline: var(--gutter) !important;
      bottom: 1rem !important;
    }
  }

  @media (max-width: 560px) {
    .hero--identity .hero__content { padding-top: 6.5rem !important; padding-bottom: 5.25rem !important; }
    .hero--identity .hero__name { font-size: clamp(3.35rem, 16.2vw, 5.2rem) !important; }
    .hero--identity .hero__role { flex-wrap: wrap; gap: .35em .48em; max-width: 21rem !important; }
    .hero__rotator { min-width: 5.2em; }
    .hero__footer-meta { bottom: 1rem !important; }
  }

  @media (max-width: 380px) {
    .hero--identity .hero__content { padding-top: 6rem !important; padding-bottom: 4.75rem !important; }
    .hero--identity .hero__name { font-size: clamp(3rem, 16vw, 4.2rem) !important; }
    .hero__brandline { font-size: .64rem !important; letter-spacing: .11em !important; }
    .hero--identity .hero__role { font-size: .9rem !important; }
    .hero__work-link { padding: .84rem 1.1rem .84rem 1.25rem !important; }
  }

  @media (max-width: 380px) and (max-height: 620px) {
    .hero--identity .hero__footer-meta { display: none !important; }
  }

  @media (max-height: 900px) and (min-width: 901px) {
    .hero--identity .hero__content {
      padding-top: clamp(7.25rem, 15vh, 8.75rem) !important;
      padding-bottom: clamp(4.75rem, 8vh, 6rem) !important;
    }
    .hero--identity .hero__name {
      font-size: clamp(4.5rem, min(9.6vw, 17svh), 8.8rem) !important;
      line-height: .86 !important;
    }
    .hero__brandline { margin-bottom: clamp(1.2rem, 2.5vh, 1.8rem) !important; }
    .hero__divider { margin-top: clamp(1.7rem, 3vh, 2.4rem) !important; }
    .hero--identity .hero__cta { margin-top: clamp(1.45rem, 2.7vh, 2rem) !important; }
  }

  @media (max-height: 700px) and (min-width: 700px) {
    .hero--identity .hero__content { padding-top: 6.25rem; padding-bottom: 4.75rem; }
    .hero--identity .hero__name { font-size: clamp(4.3rem, min(9.2vw, 16svh), 8.2rem) !important; }
    .hero__divider { margin-top: 1.9rem !important; }
    .hero--identity .hero__cta { margin-top: 1.6rem !important; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero.hero--identity::before { display: none; }
    .preloader { display: none !important; }
  }
  .hero--identity .hero__name {
    line-height: .90 !important;
  }
  .hero--identity .hero__name .line:first-child {
    padding-bottom: .18em !important;
  }
  .hero--identity .hero__name .line + .line {
    margin-top: .06em !important;
  }

  @media (max-width: 900px) {
    .hero--identity .hero__name { line-height: .92 !important; }
    .hero--identity .hero__name .line:first-child { padding-bottom: .19em !important; }
    .hero--identity .hero__name .line + .line { margin-top: .08em !important; }
  }

  @media (max-width: 560px) {
    .hero--identity .hero__name { line-height: .94 !important; }
    .hero--identity .hero__name .line:first-child { padding-bottom: .20em !important; }
    .hero--identity .hero__name .line + .line { margin-top: .10em !important; }
  }


  @media (max-width: 900px), (hover: none), (pointer: coarse) {
    html {
      scroll-behavior: auto !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      overscroll-behavior-y: auto;
    }
    body, body.is-loading {
      max-width: 100%;
      overflow-x: clip !important;
      overflow-y: visible !important;
    }
    body.nav-open { overflow: hidden !important; }
    html:has(body.nav-open) { overflow-y: hidden !important; }
    .hero.hero--identity {
      min-height: 100svh;
      height: auto;
      overflow: clip !important;
      touch-action: pan-y pinch-zoom;
    }
    .work__filters, .work__carousel-track {
      touch-action: pan-x pan-y pinch-zoom;
      overscroll-behavior-y: auto;
      scroll-snap-type: x proximity !important;
    }
  }
  @supports not (overflow: clip) {
    @media (max-width: 900px), (hover: none), (pointer: coarse) {
      body, body.is-loading { overflow: visible !important; }
      body.nav-open { overflow: hidden !important; }
      .hero.hero--identity { overflow: hidden !important; }
    }
  }
  .animation-fallback .preloader { display: none !important; }
  .animation-fallback .hero__brandline,
  .animation-fallback .hero__name .line span,
  .animation-fallback .hero__divider,
  .animation-fallback .hero__role,
  .animation-fallback .hero__cta,
  .animation-fallback .hero__footer-meta {
    opacity: 1 !important;
    transform: none !important;
  }

/* Keyboard navigation and explicit carousel controls. */
.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 3000;
  padding: .85rem 1.15rem;
  border-radius: .5rem;
  background: #111;
  color: #fff;
  font-weight: 700;
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }
.nav-drawer { overflow-y: auto; overscroll-behavior: contain; }
.work__autoplay {
  display: block;
  margin: 1rem 0 0 auto;
  padding: .65rem .9rem;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 999px;
  font: inherit;
  font-size: .8rem;
  background: #101010;
  color: #fff;
  cursor: pointer;
}
.work__autoplay[hidden] { display: none; }
.work__autoplay[aria-pressed="true"] { background: #fff; color: #111; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

.projects-ready .work__fallback { display: none; }
html:not(.js) .nav-pill__menu { display: none; }
@media (max-width: 900px) {
  html:not(.js) .nav-pill { grid-template-columns: 1fr; gap: .8rem; }
  html:not(.js) .nav-pill__links { display: flex; justify-content: space-between; }
}

/* Freelance offer: visible immediately, including when animation scripts fail. */
.hero--services {min-height: min(844px, 100svh); height:auto; padding:150px 0 100px; display:flex; align-items:center;}
.hero--services .hero__intro {width:100%; max-width:1100px; margin:auto; text-align:center;}
.hero--services .hero__name {font-size:clamp(42px,6.6vw,94px);line-height:1.08;letter-spacing:-.045em;margin:24px 0;}
.hero--services .hero__name .line {display:block;overflow:visible;}
.js .hero--services .hero__name .line span,.js .hero--services .hero__brandline,.js .hero--services .hero__divider,.js .hero--services .hero__role,.js .hero--services .hero__cta,.js .hero--services .hero__footer-meta {opacity:1;transform:none;}
.hero--services .hero__role {display:block;max-width:590px;margin:24px auto;font-size:20px;line-height:1.55;color:#4a4a4a;}
.hero--services .hero__cta {display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap;}
.service-cta {display:inline-flex;align-items:center;justify-content:center;gap:20px;background:#076ab9;color:white;padding:17px 24px;border-radius:8px;font-weight:700;text-decoration:none;min-height:48px;}
.service-cta:hover {background:#055590;}
.service-cta:focus-visible {outline:3px solid #e62359;outline-offset:5px;}
.services {padding-top:100px;padding-bottom:100px;scroll-margin-top:110px;}
.services h2 {font-size:clamp(32px,4.3vw,60px);line-height:1.1;letter-spacing:-.035em;margin:20px 0;max-width:780px;}
.services-intro {font-size:18px;line-height:1.7;max-width:720px;color:#555;}
.service-list {margin:48px 0;}
.service-list article {display:grid;grid-template-columns:45px 1fr 1fr;gap:25px;border-top:1px solid #d3d3d3;padding:30px 0;}
.service-list article:last-child {border-bottom:1px solid #d3d3d3;}
.service-number {font-size:14px;color:#076ab9;padding-top:5px;}
.services h3 {font-size:25px;margin:0 0 12px;line-height:1.2;}
.services p {line-height:1.65;}
.service-list p,.engagement p {color:#555;margin:0;}
.engagement {display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:36px;max-width:900px;}
.engagement h3 {font-size:21px;}
.work__background {opacity:.16;}
@media(max-width:700px){
.hero--services {padding:130px 0 100px;min-height:100svh;}
.hero--services .hero__name {font-size:clamp(34px,8.8vw,58px);}
.hero--services .hero__role {font-size:17px;max-width:340px;}
.hero--services .hero__cta {gap:20px;flex-direction:column;}
.services {padding-top:70px;padding-bottom:70px;}
.service-list article {grid-template-columns:28px 1fr;gap:14px;}
.service-list article>p {grid-column:2;}
.engagement {grid-template-columns:1fr;gap:28px;}
}
.hero--services .hero__content {display:block;padding-top:0;padding-bottom:0;max-width:1200px;}
.hero--services .hero__name {color:#141414;text-shadow:none;text-transform:none;}
.hero--services .hero__brandline-orange {color:#e62359;}
.services>.eyebrow {color:#076ab9;}
.hero--services .hero__work-link {color:#076ab9;}

.featured {padding-top:80px;padding-bottom:90px;scroll-margin-top:100px;}
.featured>.eyebrow {color:#076ab9;}
.featured h2 {font-size:clamp(32px,4.3vw,60px);line-height:1.12;letter-spacing:-.035em;max-width:800px;margin:20px 0;}
.featured>p {color:#555;max-width:650px;line-height:1.65;}
.featured-grid {display:grid;grid-template-columns:1fr 1fr;gap:36px;margin:40px 0;}

.featured-grid a {color:#151515;text-decoration:none;display:block;}
.featured-grid img {width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:#121212;border-radius:10px;margin-bottom:20px;}

.featured-grid h3 {font-size:clamp(23px,2.4vw,32px);margin:10px 0;line-height:1.2;}
.featured-grid a>span {font-size:14px;color:#555;}
.featured-grid .featured-link {color:#076ab9;display:inline-block;margin-top:6px;}
.all-work-link {display:inline-block;color:#076ab9;margin:20px;}
@media(max-width:700px){.featured-grid {grid-template-columns:1fr;gap:36px;}.featured {padding-top:60px;padding-bottom:60px;}.all-work-link {margin-left:0;}}
.hero--services .hero__role {text-shadow:none;}
.hero--services .hero__footer-meta,.hero--services .hero__scroll {color:#555;}

.mobile-contact {display:none;}
@media(max-width:700px){.mobile-contact {display:block;position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:20px;right:20px;z-index:40;text-align:center;background:#076ab9;color:#fff;padding:15px 20px;border-radius:8px;font-weight:700;text-decoration:none;box-shadow:0 4px 20px #0002;}body {padding-bottom:76px;}body.nav-open .mobile-contact,body.contact-visible .mobile-contact,body.hero-visible .mobile-contact {display:none;}}
.hero--services .hero__location {color:#555;}

.case-story {max-width:780px;margin-top:22px;}
.case-story h4 {font-size:14px;margin:20px 0 7px;color:#151515;}
.case-story p {font-size:16px;line-height:1.65;color:#555;margin:0;}
.case-story .case-brief {font-size:20px;color:#151515;line-height:1.4;}

.featured-grid {align-items:start;}
.featured-grid article {min-width:0;}
.featured-grid h3 {min-height:0;}
.case-story {padding-top:0;margin-top:18px;margin-bottom:20px;}
.case-story summary {cursor:pointer;font-weight:700;color:#076ab9;min-height:32px;}
.case-detail {padding-top:18px;}
.video-examples {margin-top:24px;}
.video-example {margin-top:18px;}
.video-load {width:100%;min-height:70px;border:1px solid #076ab9;border-radius:8px;background:#eef5fa;color:#075591;font:inherit;cursor:pointer;padding:16px;}
.video-example>a {font-size:14px;color:#076ab9;margin-top:10px;}
.video-example iframe {display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:8px;}
.video-load:focus-visible,.case-story summary:focus-visible {outline:3px solid #e62359;outline-offset:4px;}

/* Compact video access; project narrative remains visible. */
.video-examples>summary {display:inline-flex;align-items:center;gap:12px;list-style:none;font-size:14px;font-weight:700;color:#076ab9;cursor:pointer;border:1px solid #c9d4dd;border-radius:6px;padding:9px 12px;min-height:44px;}
.video-examples>summary::-webkit-details-marker {display:none;}
.video-examples[open]>summary>span {transform:rotate(45deg);}
.video-examples>summary:focus-visible {outline:3px solid #e62359;outline-offset:4px;}
.video-options {padding:4px 0 8px;}
.video-load {width:auto;min-height:44px;padding:10px 14px;font-size:14px;}
.video-example>a {display:inline-block;margin:8px 12px;font-size:13px;}
.collaboration-panel {border:1px solid #d3dbe1;border-radius:16px;background:#edf2f5;padding:clamp(24px,4vw,48px);margin-top:48px;}
.collaboration-heading>.eyebrow {color:#076ab9;}
.collaboration-heading h3 {font-size:clamp(26px,3vw,40px);max-width:650px;margin:16px 0 32px;letter-spacing:-.025em;}
.collaboration-panel .engagement {max-width:none;margin-bottom:30px;gap:40px;}
.collaboration-panel h4 {font-size:20px;line-height:1.3;margin:0 0 12px;}
.collaboration-footer {border-top:1px solid #cbd4dc;padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.collaboration-footer p {margin:0;max-width:540px;color:#454545;}
.collaboration-footer .service-cta {flex-shrink:0;}
@media(max-width:700px){.collaboration-panel .engagement {gap:24px;}.collaboration-footer {align-items:flex-start;flex-direction:column;}.collaboration-footer .service-cta {width:100%;}.video-example>a {display:block;margin-left:0;}}
/* Shared alignment for peer content, without clipping text. */
.featured h2,.services h2,.collaboration-heading h3 {text-wrap:balance;}
.featured-grid {column-gap:36px;row-gap:24px;}
.featured-grid article {display:grid;grid-template-rows:subgrid;grid-row:span 3;}
.featured-grid article>a:first-child {align-self:start;}
.featured-grid h3 {min-height:2.4em;text-wrap:balance;}
.featured-grid .case-story {margin:0;}
.featured-grid article>.featured-link {align-self:end;margin:0 0 24px;min-height:44px;display:flex;align-items:center;}
.service-list article>div,.service-list article>p {min-width:0;}
.service-list h3 {text-wrap:balance;}
.service-list article>p {align-self:start;}
.collaboration-panel .engagement>div {min-width:0;}
.collaboration-panel .engagement h4 {text-wrap:balance;}
.about__statement {max-width:65ch;}
.contact a {overflow-wrap:anywhere;}
@media(max-width:700px){
.featured-grid {row-gap:40px;}
.featured-grid article {display:block;grid-row:auto;}
.featured-grid h3 {min-height:0;}
.featured-grid .case-story {margin:18px 0;}
.featured-grid article>.featured-link {margin:0;}
}
.about__statement+.about__statement {margin-top:16px;}
@media(max-width:700px){
.about__skills,.about__tools-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.about__skills li,.about__tools-item {margin:0;min-width:0;justify-content:center;text-align:center;min-height:44px;}
.about__tools-item {font-size:12px;}
}
@media(min-width:701px){
.featured-grid {row-gap:0;}
.featured-grid article {grid-row:span 8;padding-bottom:40px;}
.featured-grid .case-story {display:grid;grid-template-rows:subgrid;grid-row:span 6;padding-top:18px;padding-bottom:20px;}
.case-story>p,.case-story>h4 {align-self:start;}
.featured-grid article>.featured-link {margin-bottom:0;}
}

/* Consistent vector icons on iOS and all other platforms. */
.ui-icon {display:inline-block;width:1.15em;height:1.15em;vertical-align:-.18em;flex-shrink:0;}
.hero__work-arrow .ui-icon {width:20px;height:20px;}
@media(max-width:700px){
.hero--services {box-sizing:border-box;min-height:100svh;padding:112px 0 64px;justify-content:center;}
.hero--services .hero__content {box-sizing:border-box;width:100%;max-width:100%;margin:0;padding:0 22px;}
.hero--services .hero__intro {width:100%;max-width:100%;margin:0;text-align:center;}
.hero--services .hero__brandline {font-size:10px;letter-spacing:.14em;line-height:1.5;margin:0 0 24px;justify-content:center;}
.hero--services .hero__name {width:100%;font-size:clamp(32px,9.4vw,44px);line-height:1.06;letter-spacing:-.045em;margin:0 auto;text-align:center;}
.hero--services .hero__name .line {margin:0;padding:0;text-align:center;}
.hero--services .hero__name .line span {display:inline-block;margin:0;padding:0;}
.hero--services .hero__name .line:last-child {color:#076ab9;}
.hero--services .hero__divider {width:48px;margin:24px auto;}
.hero--services .hero__role {font-size:16px;line-height:1.55;max-width:31ch;margin:0 auto 28px;padding:0;text-align:center;}
.hero--services .hero__cta {width:100%;gap:12px;margin:0;}
.hero--services .hero__cta .service-cta,.hero--services .hero__work-link {box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:min(100%,280px);min-height:52px;padding:14px 18px;gap:12px;font-size:15px;line-height:1.3;}
.hero--services .hero__work-link {font-size:12px;}
.hero--services .hero__work-arrow {display:inline-flex;align-items:center;justify-content:center;}
.nav-pill__logo {width:142px;height:auto;}
}
@media(max-width:700px) and (max-height:700px){.hero--services {padding-top:100px;padding-bottom:40px;}.hero--services .hero__brandline {margin-bottom:18px;}.hero--services .hero__divider {margin:18px auto;}}
@media(max-width:700px){.hero--services .hero__content {flex:0 0 100%;min-width:100%;}.hero--services .hero__footer-meta {display:none;}}
/* Unified glass surfaces: light chrome, blue primary actions, dark gallery. */
:root {--glass-surface:rgba(255,255,255,.72);--glass-border:rgba(110,135,155,.26);--glass-shadow:0 6px 24px rgba(22,44,64,.07),inset 0 1px 0 rgba(255,255,255,.85);}
.nav-pill {background:rgba(250,250,250,.78)!important;border:1px solid rgba(160,178,192,.3)!important;box-shadow:0 8px 30px rgba(20,35,50,.08),inset 0 1px 0 rgba(255,255,255,.9)!important;backdrop-filter:blur(20px) saturate(130%)!important;-webkit-backdrop-filter:blur(20px) saturate(130%)!important;border-radius:24px!important;}
:is(.service-cta,.mobile-contact,.hero__work-link,.nav-pill__cta,.nav-pill__menu,.contact__email,.contact .magnetic,.site-footer__top,.video-load,.video-examples>summary,.work__carousel-btn,.work__info-link,.work__autoplay,.work__filter,.work__card-hint) {background:var(--glass-surface)!important;border:1px solid var(--glass-border)!important;box-shadow:var(--glass-shadow)!important;backdrop-filter:blur(14px) saturate(125%);-webkit-backdrop-filter:blur(14px) saturate(125%);color:#19364b!important;transition:background .2s,border-color .2s,box-shadow .2s;}
:is(.service-cta,.mobile-contact,.contact__email) {background:linear-gradient(135deg,rgba(231,245,255,.84),rgba(130,192,234,.36))!important;border-color:rgba(7,106,185,.32)!important;color:#07518b!important;}
.work :is(.work__carousel-btn,.work__info-link,.work__autoplay,.work__filter,.work__card-hint) {background:rgba(36,43,52,.78)!important;border-color:rgba(255,255,255,.24)!important;color:#fff!important;box-shadow:0 6px 20px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.12)!important;}
.work .work__filter.is-active {background:rgba(10,96,180,.86)!important;border-color:rgba(149,210,255,.7)!important;}
:is(.service-cta,.mobile-contact,.hero__work-link,.nav-pill__cta,.nav-pill__menu,.contact__email,.contact .magnetic,.site-footer__top,.video-load,.video-examples>summary):hover {background:rgba(222,239,250,.92)!important;border-color:rgba(7,106,185,.48)!important;color:#064b80!important;}
.work :is(.work__carousel-btn,.work__info-link,.work__autoplay,.work__filter,.work__card-hint):hover {background:rgba(57,75,95,.94)!important;}
:is(.service-cta,.mobile-contact,.hero__work-link,.nav-pill__cta,.nav-pill__menu,.contact__email,.contact .magnetic,.site-footer__top,.video-load,.video-examples>summary,.work__carousel-btn,.work__info-link,.work__autoplay,.work__filter):focus-visible {outline:3px solid #0878cf;outline-offset:4px;}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {.nav-pill {background:#f6f8fa!important;}:is(.service-cta,.mobile-contact,.hero__work-link,.nav-pill__cta,.nav-pill__menu,.contact__email,.contact .magnetic,.site-footer__top,.video-load,.video-examples>summary) {background:#eaf2f8!important;}}
@media(max-width:700px){.nav-pill {border-radius:20px!important;} }
body :is(.service-cta,.mobile-contact,.contact__email) {background:linear-gradient(135deg,rgba(216,238,255,.9),rgba(117,183,230,.42))!important;border-color:rgba(7,106,185,.35)!important;color:#07518b!important;}
@media(max-width:700px){.nav-pill {padding:8px 10px 8px 16px!important;}}
/* Full viewport hero and visibly translucent glass with breathing room. */
.hero--services {min-height:100vh;min-height:100svh;box-sizing:border-box;background:radial-gradient(ellipse at 13% 14%,rgba(100,179,236,.12),transparent 44%),radial-gradient(ellipse at 90% 80%,rgba(230,35,89,.08),transparent 40%);}
.nav-pill {box-sizing:border-box;padding:12px 26px!important;background:linear-gradient(125deg,rgba(255,255,255,.58),rgba(233,243,250,.24) 52%,rgba(255,255,255,.4))!important;backdrop-filter:blur(24px) saturate(155%)!important;-webkit-backdrop-filter:blur(24px) saturate(155%)!important;border-color:rgba(255,255,255,.7)!important;box-shadow:0 8px 28px rgba(26,57,80,.1),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(109,149,178,.18)!important;}
body :is(.service-cta,.mobile-contact,.hero__work-link,.nav-pill__cta,.nav-pill__menu,.contact__email,.contact .magnetic,.site-footer__top,.video-load,.video-examples>summary) {background:linear-gradient(135deg,rgba(255,255,255,.56),rgba(224,239,249,.2))!important;backdrop-filter:blur(18px) saturate(155%)!important;-webkit-backdrop-filter:blur(18px) saturate(155%)!important;border-color:rgba(133,168,194,.35)!important;box-shadow:0 5px 18px rgba(24,63,91,.08),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.35)!important;}
body :is(.service-cta,.mobile-contact,.contact__email) {background:linear-gradient(130deg,rgba(198,229,252,.58),rgba(79,157,214,.22))!important;}
@media(min-width:901px){.hero--services {padding-top:180px;padding-bottom:100px;}.nav-pill {grid-template-columns:auto minmax(0,1fr) auto;gap:24px!important;}.nav-pill__links {justify-content:center;gap:clamp(18px,2.3vw,36px);}}
@media(max-width:900px){.nav-pill {padding:10px 16px!important;}}
@media(prefers-reduced-transparency:reduce){.nav-pill {background:#f0f5f8!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}}
/* Alternating section surfaces: dark / light, beginning with the hero. */
#hero,#work-gallery,#about {color:#f4f7fa;background-color:#10151b;}
#hero {background:radial-gradient(ellipse at 14% 18%,rgba(22,111,181,.22),transparent 48%),radial-gradient(ellipse at 90% 82%,rgba(230,35,89,.1),transparent 40%),#10151b;}
#work,#services,#contact {background-color:#f8f7f5;color:#151515;}
#about {background:radial-gradient(ellipse at 15% 70%,rgba(26,104,168,.12),transparent 55%),#10151b;}
#hero .hero__name,#hero .hero__brandline {color:#f5f7fa;}
#hero .hero__name .line:last-child,#hero .hero__brandline-blue {color:#79c5ff;}
#hero .hero__brandline-orange {color:#e62359;}
#hero .hero__role,#hero .hero__location,#hero .hero__scroll,#hero .hero__footer-meta {color:#c6d0dc!important;}
#hero .hero__meta-line,#hero .hero__scroll-line {background:rgba(224,239,252,.4)!important;}
body #hero :is(.service-cta,.hero__work-link) {background:linear-gradient(135deg,rgba(137,200,245,.2),rgba(55,93,122,.12))!important;border-color:rgba(166,215,250,.4)!important;color:#e3f3ff!important;box-shadow:0 7px 24px rgba(0,0,0,.18),inset 0 1px 0 rgba(224,245,255,.24)!important;}
body #hero :is(.service-cta,.hero__work-link):hover {background:rgba(90,166,221,.3)!important;}
#about .about__heading,#about .about__statement-bold {color:#f4f7fa;}
#about .eyebrow,#about .about__heading-line--accent {color:#79c5ff;}
#about .about__statement,#about .about__tools-label {color:#c6d0dc;}
#about .about__skills li,#about .about__tools-item {color:#e9f0f7;background:rgba(210,232,250,.07);border-color:rgba(210,232,250,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}
#about .about__media {background:rgba(183,219,249,.04);border-color:rgba(210,232,250,.12);box-shadow:none;}
#about .about__media--character::before {background:radial-gradient(ellipse,rgba(37,136,212,.17),transparent 70%);}
.nav-pill {background:linear-gradient(125deg,rgba(255,255,255,.84),rgba(233,243,250,.7) 52%,rgba(255,255,255,.78))!important;}
#about .about__tools-item .icon-brand {background:#e8eef5;border-radius:3px;}
.site-footer {background:#10151b;color:#c6d0dc;border-top-color:rgba(210,232,250,.16);}
.site-footer p {color:#c6d0dc;}
body .site-footer .site-footer__top {background:rgba(210,232,250,.12)!important;color:#e3f3ff!important;}

/* Brand pink sampled from the supplied logo; slightly stronger hero scale. */
.hero--services .hero__name {font-size:clamp(44px,7vw,100px);}
@media(max-width:700px){.hero--services .hero__name {font-size:clamp(33px,9.8vw,46px);}}
/* Dark mobile menu: a white wordmark and clearly visible close control. */
body.nav-open .nav-pill__logo {filter:brightness(0) invert(1)!important;}
body.nav-open .nav-pill__menu {color:#f2f7fc!important;background:rgba(210,232,250,.12)!important;border-color:rgba(210,232,250,.3)!important;}
body.nav-open .nav-pill__menu-lines,body.nav-open .nav-pill__menu-lines::before {background:currentColor!important;}
/* Transparent program icons; monochrome marks use the text color. */
#about .about__tools-item .icon-brand {background:transparent;border-radius:0;color:#e9f0f7;}
#about .about__tools-item:nth-child(1) .icon-brand path {fill:#8bd2ff;}
#about .about__tools-item:nth-child(2) .icon-brand path {fill:#ffc58a;}
#about .about__tools-item:nth-child(3) .icon-brand path {fill:#c9b8ff;}
body.nav-open .nav-pill {background:rgba(18,27,36,.9)!important;border-color:rgba(210,232,250,.2)!important;}
body.nav-open .nav-pill .nav-pill__menu {color:#f2f7fc!important;background:rgba(210,232,250,.12)!important;}
/* Clean section boundary and framed contact portrait. */
.contact::before,.contact::after {content:none;display:none;}
.contact-layout {display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(32px,5vw,80px);}
.contact-copy {min-width:0;}
.contact-layout .contact__title {font-size:clamp(36px,4.2vw,64px);line-height:1.1;}
.contact-portrait {margin:0;padding:12px;border:1px solid rgba(107,141,165,.24);border-radius:22px;background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(215,231,243,.38));box-shadow:0 14px 40px rgba(28,52,72,.08);}
.contact-portrait img {display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:46% center;border-radius:13px;}
.contact-portrait figcaption {padding:16px 6px 5px;font-size:16px;font-weight:700;color:#19364b;}
.contact-portrait figcaption span {display:block;font-size:13px;font-weight:400;line-height:1.5;color:#555;margin-top:5px;}
@media(max-width:800px){.contact-layout {grid-template-columns:1fr;gap:36px;}.contact-portrait {width:100%;max-width:360px;margin-inline:auto;box-sizing:border-box;}.contact-portrait img {aspect-ratio:1/1;}.contact-layout .contact__title {font-size:clamp(34px,8.8vw,48px);}}
@media(min-width:701px) and (max-width:900px){.hero--services .hero__content {flex:0 0 100%;min-width:100%;box-sizing:border-box;}.hero--services .hero__footer-meta {display:none;}}
/* Editorial closing: real portfolio links, aligned columns and direct contact. */
.portfolio-footer {display:block;max-width:none;margin:0;width:100%;padding:72px 0 28px;border:0;border-radius:36px 36px 0 0;background:#10151b;color:#c6d0dc;}
.footer-main {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:64px;padding-bottom:56px;}
.footer-links {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.footer-column {display:flex;flex-direction:column;gap:18px;min-width:0;}
.footer-column h3 {color:#f4f7fa;font-size:14px;letter-spacing:.03em;margin:0 0 8px;line-height:1.5;}
.footer-column a {font-size:14px;color:#b9c5d1;text-decoration:none;line-height:1.5;min-height:42px;display:flex;align-items:flex-start;transition:color .2s;}
.footer-column a:hover {color:#79c5ff;}
.footer-invitation {min-width:0;}
.footer-invitation .footer-eyebrow {color:#f2789b;font-size:12px;text-transform:uppercase;letter-spacing:.12em;margin:0 0 14px;}
.footer-invitation h2 {font-size:clamp(28px,3vw,42px);font-weight:700;letter-spacing:-.025em;color:#f4f7fa;line-height:1.15;margin:0 0 18px;text-wrap:balance;}
.footer-invitation>p {font-size:16px;line-height:1.6;max-width:360px;margin:0 0 24px;}
.footer-email {display:flex;gap:12px;align-items:center;justify-content:space-between;color:#e1f2ff;background:linear-gradient(130deg,rgba(172,218,251,.16),rgba(172,218,251,.05));border:1px solid rgba(172,218,251,.28);border-radius:12px;padding:16px;font-size:clamp(13px,1.2vw,17px);text-decoration:none;overflow-wrap:anywhere;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.footer-email:hover {background:rgba(172,218,251,.2);}
.footer-bottom {border-top:1px solid rgba(220,236,249,.14);padding-top:28px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.footer-signature {font-size:19px;font-weight:900;color:#f4f7fa;letter-spacing:-.02em;}
.footer-signature>span {display:inline-block;margin-left:8px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#f2789b;}
.footer-bottom p {font-size:12px;margin:8px 0 0;color:#aebbc7;}
.footer-links a:focus-visible,.footer-email:focus-visible {outline:3px solid #79c5ff;outline-offset:4px;}
.service-list h3[id] {scroll-margin-top:140px;}
@media(max-width:1050px){.footer-main {grid-template-columns:1fr;gap:40px;}.footer-invitation {max-width:520px;}.footer-column a {min-height:32px;}}
@media(max-width:600px){.portfolio-footer {padding-top:44px;border-radius:24px 24px 0 0;}.footer-links {gap:12px;}.footer-column a {font-size:12px;min-height:42px;}.footer-column h3 {font-size:13px;}.footer-main {padding-bottom:36px;}.footer-bottom {align-items:flex-start;flex-direction:column;}.footer-email {font-size:14px;}.footer-signature>span {display:block;margin:6px 0 0;}}

/* No persistent mobile contact button or reserved bottom space. */
@media(max-width:700px){body {padding-bottom:0;}}
/* Keep category selection distinct from pointer hover. */
.work .work__filter:not(.is-active):hover {background:rgba(57,75,95,.76)!important;border-color:rgba(210,232,250,.4)!important;color:#fff!important;}
.work .work__filter.is-active,.work .work__filter.is-active:hover {background:rgba(10,96,180,.86)!important;border-color:rgba(149,210,255,.7)!important;color:#fff!important;}
/* Selected cases: quiet editorial slider, distinct from the immersive gallery. */
.case-carousel {margin:36px 0;border-top:1px solid #cdd6df;border-bottom:1px solid #cdd6df;padding:24px 0 32px;}
.case-navigation {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px;}
.case-navigation[hidden],.case-panel[hidden] {display:none;}
.case-selectors {display:flex;flex-wrap:wrap;gap:8px;}
.case-selector,.case-arrows button,.case-resume {font:inherit;font-size:13px;padding:12px 14px;border:1px solid #cbd8e3;border-radius:8px;background:linear-gradient(135deg,#ffffffb3,#dcebf44d);color:#334b5f;cursor:pointer;min-height:44px;}
.case-selector[aria-pressed=true] {background:#ddeefa;color:#07518b;border-color:#6aa8d6;box-shadow:inset 0 -2px #076ab9;}
.case-selector:hover,.case-arrows button:hover {border-color:#076ab9;}
.case-arrows {display:flex;align-items:center;gap:14px;flex-shrink:0;}
.case-counter {font-size:13px;letter-spacing:.08em;color:#526373;}
.case-panel {display:grid;grid-template-columns:minmax(210px,.65fr) minmax(0,1.35fr);gap:clamp(28px,5vw,70px);align-items:start;}
.case-cover {width:100%;max-width:310px;justify-self:center;}
.case-cover img {display:block;width:100%;aspect-ratio:3/4;height:auto;object-fit:cover;border-radius:12px;}
.case-copy {min-width:0;max-width:720px;}
.case-category {font-size:12px;color:#076ab9;letter-spacing:.04em;}
.case-copy h3 {font-size:clamp(25px,2.6vw,38px);line-height:1.15;letter-spacing:-.025em;margin:12px 0 20px;text-wrap:balance;}
.case-copy .case-story {display:block;margin:0 0 20px;padding:0;}
.case-copy .case-brief {font-size:18px;}
.case-copy .case-story p {line-height:1.6;}
.case-copy>.featured-link {color:#076ab9;display:inline-block;padding:10px 0;font-size:14px;text-decoration:none;}
.case-navigation button:focus-visible,.case-resume:focus-visible {outline:3px solid #076ab9;outline-offset:3px;}
@media(max-width:850px){.case-navigation {align-items:flex-start;flex-direction:column;}.case-arrows {align-self:flex-end;}.case-panel {grid-template-columns:minmax(180px,.65fr) minmax(0,1fr);gap:24px;}}
@media(max-width:600px){.case-selector {padding:10px;font-size:12px;}.case-selector span {display:none;}.case-navigation {flex-direction:row;align-items:center;gap:8px;}.case-arrows {gap:8px;}.case-arrows button {padding:10px;}.case-panel {grid-template-columns:1fr;gap:24px;}.case-cover {max-width:195px;}.case-copy h3 {font-size:26px;}.case-copy .case-story p {font-size:15px;}.case-copy .case-brief {font-size:17px;}}

/* Editorial showcase: generous artwork, restrained navigation. */
.case-panel {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;}
.case-panels {overflow:clip;}
.case-cover {max-width:510px;padding-right:52px;box-sizing:border-box;position:relative;isolation:isolate;}
.case-artwork {display:block;position:relative;z-index:2;border-radius:16px;overflow:hidden;cursor:grab;transition:transform .3s ease;}
.case-artwork.is-dragging {cursor:grabbing;transition:none;}
.case-artwork img {border-radius:0;transition:transform .8s cubic-bezier(.22,1,.36,1);}
.case-open {position:absolute;bottom:18px;left:18px;padding:12px 20px;border-radius:30px;background:#ffffffed;color:#15202c;font-size:14px;font-weight:700;box-shadow:0 4px 24px #15202c20;}
.case-preview {position:absolute;right:0;top:7%;width:30%;height:86%;border:0;padding:0;background:none;overflow:hidden;border-radius:12px;cursor:pointer;opacity:.65;transition:opacity .3s,transform .4s;z-index:1;}
.case-preview img {height:100%;width:100%;object-fit:cover;object-position:right;}
.case-preview:hover {opacity:1;transform:translateX(5px);}
.case-copy {max-width:560px;}
.case-copy h3 {font-size:clamp(30px,3.2vw,46px);line-height:1.08;margin:14px 0 24px;}
.case-copy .case-story p {font-size:16px;line-height:1.6;text-wrap:pretty;}
.case-copy .case-brief {font-size:20px;line-height:1.4;}
.case-category {font-size:13px;}
.case-selector,.case-selector[aria-pressed=true] {background:none;border:0;border-radius:0;box-shadow:none;border-bottom:2px solid transparent;padding:14px 10px;color:#66737e;}
.case-selector[aria-pressed=true] {border-bottom-color:#076ab9;color:#07518b;}
.case-selector:hover {color:#151515;}
.case-counter {font-variant-numeric:tabular-nums;}
.case-artwork:focus-visible,.case-preview:focus-visible {outline:3px solid #076ab9;outline-offset:4px;}
@media(hover:hover) and (pointer:fine){.case-artwork:hover img {transform:scale(1.025);}.service-cta:hover .ui-icon,.featured-link:hover .ui-icon {transform:translate(3px,-3px);}.ui-icon {transition:transform .3s ease;}}
@media(max-width:850px){.case-panel {gap:28px;}.case-copy h3 {font-size:32px;}.case-cover {padding-right:32px;}.case-navigation {flex-direction:row;align-items:center;}.case-selector span {display:none;}}
@media(max-width:600px){.case-panel {grid-template-columns:1fr;gap:30px;}.case-cover {max-width:360px;padding-right:36px;}.case-copy h3 {font-size:32px;}.case-copy .case-story p {font-size:16px;}.case-copy .case-brief {font-size:19px;}.case-navigation {margin-bottom:24px;}.case-open {bottom:12px;left:12px;font-size:13px;padding:10px 16px;}}
@media(prefers-reduced-motion:reduce){.case-artwork,.case-artwork img,.case-preview,.ui-icon {transition:none!important;}.case-artwork:hover img {transform:none;}}

.case-panels {position:relative;}
.case-copy .case-story .case-brief {font-size:20px;}

/* Services: a visual studio menu on the existing white canvas. */
.service-showcase {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(48px,8vw,128px);row-gap:64px;margin:56px 0 72px;}
.service-showcase article.service-composition {display:flex;flex-direction:column;gap:0;border:0;padding:0;min-width:0;}
.service-art {position:relative;border-top:1px solid #cdd6df;height:240px;display:flex;align-items:center;justify-content:center;}
.service-art svg {display:block;width:100%;max-width:360px;height:220px;overflow:visible;}
.service-index {position:absolute;left:0;top:20px;font-size:13px;letter-spacing:.08em;color:#076ab9;font-variant-numeric:tabular-nums;}
.service-editorial {display:flex;flex-direction:column;flex:1;padding-top:16px;}
.service-showcase h3 {font-size:clamp(27px,2.6vw,36px);line-height:1.12;letter-spacing:-.035em;margin:0 0 16px;}
.service-showcase p.service-hook {font-size:19px;color:#192c3d;font-weight:700;line-height:1.4;margin:0 0 12px;}
.service-showcase p.service-description {font-size:17px;line-height:1.65;max-width:48ch;color:#59616a;margin:0 0 24px;text-wrap:pretty;}
.service-deliverables {list-style:none;display:flex;gap:10px 20px;flex-wrap:wrap;margin:auto 0 0;padding:0;}
.service-deliverables li {font-size:12px;color:#526879;line-height:1.5;display:flex;align-items:center;gap:8px;}
.service-deliverables li::before {content:'';width:4px;height:4px;border-radius:50%;background:#e62359;}
.service-art .art-playhead,.service-art .art-phone,.service-art .art-orbit,.service-art .art-poster {transform-box:fill-box;transform-origin:center;transition:transform .8s cubic-bezier(.22,1,.36,1);}
@media(hover:hover) and (pointer:fine){.service-composition:hover .art-playhead {transform:translateX(75px);}.service-composition:hover .art-phone {transform:translateY(-8px) rotate(4deg);}.service-composition:hover .art-orbit {transform:rotate(12deg);}.service-composition:hover .art-poster {transform:translate(9px,-6px) rotate(-4deg);}}
@media(max-width:700px){.service-showcase {grid-template-columns:1fr;row-gap:44px;margin:36px 0 48px;}.service-art {height:210px;}.service-art svg {height:195px;}.service-editorial {padding-top:12px;}.service-showcase h3 {font-size:30px;}.service-showcase p.service-description {max-width:100%;font-size:16px;}.service-deliverables {gap:8px 16px;}}
@media(prefers-reduced-motion:reduce){.service-art g {transition:none!important;transform:none!important;}}

/* Accessibility refinements: comfortable controls and explicit surfaces. */
.case-selector,.case-arrows button {min-width:44px;min-height:44px;box-sizing:border-box;}
.service-deliverables li,.case-category,.case-counter {font-size:14px;}
.case-selectors {gap:4px;}
body .nav-pill .nav-pill__cta {background:#16364d!important;color:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important;border-color:transparent!important;}
body .nav-pill .nav-pill__cta:hover {background:#07518b!important;}
@media(max-width:380px){.case-navigation {flex-wrap:wrap;}.case-arrows {margin-left:auto;}}
@media(prefers-reduced-transparency:reduce){
 body :is(.nav-pill,.service-cta,.hero__work-link,.nav-pill__cta,.nav-pill__menu,.contact__email,.contact .magnetic,.site-footer__top,.video-load,.video-examples>summary,.work__carousel-btn,.work__info-link,.work__autoplay,.work__filter,.work__card-hint,.footer-email,.case-selector,.case-arrows button,.about__tools-item) {backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#edf3f7!important;color:#18384e!important;box-shadow:none!important;}
 body #hero :is(.service-cta,.hero__work-link),body #work-gallery :is(.work__carousel-btn,.work__info-link,.work__autoplay,.work__filter,.work__card-hint),body .footer-email,body #about .about__tools-item {background:#203747!important;color:#f4f8fb!important;}
 body #work-gallery .work__filter.is-active {background:#d5eaff!important;color:#15374e!important;}
}
@media(prefers-contrast:more){body :is(.case-category,.case-counter,.service-deliverables li,.service-description,.case-story p) {color:#203747!important;}a:focus-visible,button:focus-visible,summary:focus-visible {outline:3px solid #076ab9!important;outline-offset:4px!important;}}

/* Clear hover contrast and static category selection. */
body .nav-pill .nav-pill__cta:hover,body .nav-pill .nav-pill__cta:focus-visible {background:#07518b!important;color:#fff!important;}
body .nav-pill .nav-pill__cta:hover *,body .nav-pill .nav-pill__cta:focus-visible * {color:inherit!important;}
.work__filter-glider {display:none!important;}
body #work-gallery .work__filter.is-active,body #work-gallery .work__filter.is-active:hover {background:#263744!important;color:#fff!important;border-color:#d4e4ef!important;box-shadow:inset 0 -2px #d4e4ef!important;}

.contact-greeting {display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:108px;max-width:520px;}
.sketch-pet {position:relative;display:block;flex:none;width:108px;height:108px;border:0;padding:0;background:none;cursor:pointer;appearance:none;}
.sketch-pet[hidden] {display:none;}
.pet-pose {display:block;position:relative;width:100%;height:100%;transform-origin:50% 78%;}
.pet-directions,.pet-reactions {position:absolute;inset:0;background-size:300% 300%;background-repeat:no-repeat;background-position:50% 50%;}
.pet-reactions {opacity:0;}.sketch-pet.is-reacting .pet-directions {opacity:0;}.sketch-pet.is-reacting .pet-reactions {opacity:1;}
.sketch-pet:focus-visible {outline:2px solid #076ab9;outline-offset:3px;border-radius:50%;}
@media(max-width:600px){.contact-greeting {min-height:88px;}.sketch-pet {width:88px;height:88px;}}

.personal-pet {width:68px;height:68px;margin:0 0 14px;flex:none;}
.personal-pet .pet-directions {background-image:url('../mascots/alejandro-sketch-directions.webp');}
#hero .personal-pet {align-self:center;margin:0 auto 12px;}
#hero .personal-pet:focus-visible,#about .personal-pet:focus-visible,#work-gallery .personal-pet:focus-visible {outline-color:#79c5ff;}
@media(max-width:600px){.personal-pet {width:56px;height:56px;margin-bottom:10px;}#hero .personal-pet {margin-bottom:8px;}}