:root {
        --ink: #242424;
        --muted: #73706b;
        --line: rgba(255, 255, 255, 0.56);
        --glass: rgba(255, 255, 255, 0.45);
        --glass-strong: rgba(255, 255, 255, 0.68);
        --shadow: 0 24px 70px rgba(40, 38, 34, 0.18);
        --gold: #b99850;
        --dark: #171717;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        margin: 0;
        color: var(--ink);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background: #edeae2;
        min-height: 100vh;
      }

      body::before {
        content: "";
        position: fixed;
        inset: -32px;
        z-index: -1;
        background:
          linear-gradient(120deg, rgba(255, 255, 255, 0.72), rgba(238, 235, 226, 0.72)),
          url("assets/recognition-background.jpg") center / cover;
        filter: blur(14px) saturate(1.04) brightness(1.08);
        transform: scale(1.06);
      }

      body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
          radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.78), transparent 24rem),
          radial-gradient(circle at 90% 36%, rgba(190, 184, 168, 0.24), transparent 28rem),
          rgba(245, 243, 238, 0.5);
      }

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

      img {
        display: block;
        max-width: 100%;
      }

      .page {
        width: min(1120px, calc(100% - 28px));
        margin: 28px auto;
        padding: 104px 24px 24px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.34);
        box-shadow: var(--shadow);
        backdrop-filter: blur(28px) saturate(1.05);
      }

      .nav {
        position: fixed;
        top: 28px;
        left: 50%;
        width: min(1040px, calc(100% - 78px));
        z-index: 20;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 14px;
        min-height: 44px;
        padding: 7px 8px;
        border: 1px solid rgba(255, 255, 255, 0.24);
        border-radius: 999px;
        background:
          linear-gradient(135deg, rgba(18, 29, 42, 0.64), rgba(11, 15, 20, 0.34)),
          rgba(18, 24, 32, 0.34);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.24),
          0 18px 42px rgba(15, 22, 28, 0.18);
        backdrop-filter: blur(20px) saturate(1.28);
        transform-origin: center top;
        transform: translateX(-50%);
      }

      .nav::before {
        content: "";
        position: absolute;
        inset: 4px;
        z-index: -1;
        border-radius: inherit;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
        opacity: 0;
        transform: translateX(-18%);
        transition: opacity 0.35s ease, transform 0.55s ease;
      }

      .nav:hover::before {
        opacity: 1;
        transform: translateX(18%);
      }

      .brand {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
        padding-left: 10px;
      }

      .brand strong {
        color: rgba(255, 255, 255, 0.96);
      }

      .brand p {
        color: rgba(255, 255, 255, 0.62);
      }

      .mark {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        color: rgba(255, 255, 255, 0.92);
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid rgba(255, 255, 255, 0.22);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
        overflow: hidden;
      }

      .mark img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .brand strong,
      .eyebrow,
      .metric span,
      .small-title {
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 11px;
      }

      .brand p,
      .card p,
      .service p,
      .quote p,
      .contact p {
        color: var(--muted);
        margin: 0;
        line-height: 1.55;
      }

      .nav .brand p {
        display: none;
      }

      .links {
        display: flex;
        gap: 3px;
        padding: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
      }

      .links a,
      .pill {
        position: relative;
        isolation: isolate;
        padding: 9px 13px;
        border-radius: 999px;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.86);
        white-space: nowrap;
        transition:
          color 0.22s ease,
          background 0.22s ease,
          border-color 0.22s ease,
          box-shadow 0.22s ease,
          transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .miniwood-link {
        width: auto;
        padding-inline: 13px;
        font-size: 11px;
        font-weight: 750;
      }

      .links a::after,
      .pill::after {
        content: "";
        position: absolute;
        inset: 2px;
        z-index: -1;
        border-radius: inherit;
        background: radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.08) 55%, transparent 76%);
        opacity: 0;
        transform: scale(0.82);
        transition: opacity 0.22s ease, transform 0.22s ease;
      }

      .links a:hover,
      .links a:focus-visible,
      .pill:hover,
      .pill:focus-visible {
        color: #fff;
        background: rgba(255, 255, 255, 0.22);
        border-color: rgba(255, 255, 255, 0.34);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.26),
          0 12px 26px rgba(0, 0, 0, 0.14);
        transform: translateY(-1px);
      }

      .links a:hover::after,
      .links a:focus-visible::after,
      .pill:hover::after,
      .pill:focus-visible::after {
        opacity: 1;
        transform: scale(1);
      }

      .links a.is-active,
      .pill {
        color: #fff;
        background: rgba(255, 255, 255, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.2),
          0 10px 24px rgba(0, 0, 0, 0.1);
      }

      .nav-cta {
        justify-self: end;
        margin-right: 2px;
      }

      .section {
        margin-top: 18px;
        padding: 24px;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--glass);
        backdrop-filter: blur(18px);
        perspective: 1100px;
      }

      .hero {
        position: relative;
        display: grid;
        grid-template-columns: minmax(280px, 0.78fr) minmax(420px, 1.22fr);
        gap: 26px;
        align-items: center;
        min-height: 520px;
        overflow: hidden;
      }

      p {
        overflow-wrap: anywhere;
      }

      h1 {
        position: relative;
        margin: 18px 0 10px;
        font-size: clamp(42px, 5.7vw, 72px);
        line-height: 0.96;
        font-weight: 650;
        letter-spacing: 0;
        color: #151515;
        transform: perspective(900px) rotateX(4deg) rotateY(-3deg);
        transform-origin: left center;
        text-shadow:
          0 1px 0 #ffffff,
          0 2px 0 rgba(214, 210, 200, 0.95),
          0 4px 0 rgba(184, 178, 165, 0.42),
          0 14px 24px rgba(31, 29, 25, 0.18),
          0 28px 54px rgba(31, 29, 25, 0.16);
        transition: transform 420ms ease, text-shadow 420ms ease;
      }

      h2 {
        position: relative;
        margin: 8px 0 20px;
        font-size: clamp(32px, 4.6vw, 64px);
        line-height: 0.95;
        font-weight: 620;
        letter-spacing: 0;
        color: #171717;
        transform: perspective(850px) rotateX(3deg);
        transform-origin: left center;
        text-shadow:
          0 1px 0 rgba(255, 255, 255, 0.96),
          0 3px 0 rgba(215, 211, 201, 0.78),
          0 13px 25px rgba(47, 43, 36, 0.13);
      }

      h3 {
        margin: 0 0 8px;
        font-size: 18px;
        font-weight: 750;
        letter-spacing: 0;
        text-shadow:
          0 1px 0 rgba(255, 255, 255, 0.95),
          0 7px 18px rgba(36, 34, 30, 0.1);
      }

      h1::after,
      h2::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0.06em;
        width: min(72%, 560px);
        height: 0.92em;
        pointer-events: none;
        border-radius: 50%;
        background: linear-gradient(100deg, rgba(255, 255, 255, 0.64), transparent 56%);
        mix-blend-mode: screen;
        opacity: 0.5;
        transform: translate3d(0.06em, -0.02em, 0) skewX(-10deg);
      }

      .hero:hover h1,
      .section:hover > h2,
      .section:hover .section-head h2,
      .studio:hover h2,
      .contact:hover h2 {
        transform: perspective(900px) rotateX(1deg) rotateY(1.5deg) translateY(-2px);
        text-shadow:
          0 1px 0 #ffffff,
          0 3px 0 rgba(214, 210, 200, 0.9),
          0 8px 0 rgba(184, 178, 165, 0.28),
          0 18px 30px rgba(31, 29, 25, 0.2),
          0 34px 62px rgba(31, 29, 25, 0.18);
      }

      .lead {
        max-width: 470px;
        color: #5d5b56;
        line-height: 1.8;
        margin: 0 0 26px;
      }

      .actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }

      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 44px;
        padding: 0 18px;
        border-radius: 999px;
        background: #f8f7f2;
        border: 1px solid rgba(255, 255, 255, 0.8);
        font-size: 13px;
        box-shadow: 0 10px 24px rgba(54, 51, 46, 0.08);
      }

      .icon-button {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.78);
        background: rgba(255, 255, 255, 0.62);
        display: grid;
        place-items: center;
      }

      .socials {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.48);
        border: 1px solid rgba(255, 255, 255, 0.72);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 14px 28px rgba(54, 51, 46, 0.08);
      }

      .social-link {
        position: relative;
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        color: #3f3a33;
        background: rgba(255, 255, 255, 0.58);
        border: 1px solid rgba(255, 255, 255, 0.9);
        font-size: 10px;
        font-weight: 850;
        letter-spacing: 0;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.82),
          0 12px 22px rgba(34, 31, 28, 0.08);
        backdrop-filter: blur(12px);
        transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
      }

      .social-link:hover,
      .social-link:focus-visible {
        color: #2a2621;
        background: rgba(255, 255, 255, 0.9);
        transform: translateY(-2px) scale(1.06);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.92),
          0 16px 28px rgba(34, 31, 28, 0.12);
      }

      .social-link svg {
        width: 17px;
        height: 17px;
        fill: currentColor;
        stroke: currentColor;
        stroke-width: 0;
      }

      .instagram-icon,
      .contact-icon .instagram-icon {
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      .instagram-icon path,
      .instagram-icon circle {
        fill: none;
        stroke: currentColor;
      }

      .hero-photo {
        align-self: end;
        position: relative;
        transform-style: preserve-3d;
        animation: portraitFloat 7s ease-in-out infinite;
        min-height: 430px;
      }

      .hero-photo .hero-fallback,
      .hero-sequence {
        width: 100%;
        min-height: 430px;
        object-fit: cover;
        object-position: center;
        border-radius: 18px;
        filter: saturate(1.02) contrast(1.02);
        box-shadow:
          0 28px 72px rgba(34, 31, 28, 0.22),
          inset 0 1px 0 rgba(255, 255, 255, 0.62);
      }

      .hero-sequence {
        display: none;
        aspect-ratio: 16 / 9;
        background: rgba(255, 255, 255, 0.34);
      }

      .hero-photo.sequence-ready .hero-sequence {
        display: block;
      }

      .hero-photo.sequence-ready .hero-fallback {
        display: none;
      }

      .hero-photo::before,
      .hero-photo::after {
        content: "";
        position: absolute;
        pointer-events: none;
        border-radius: 18px;
      }

      .hero-photo::before {
        inset: 8% -2% 4% 2%;
        background: linear-gradient(105deg, transparent 18%, rgba(255, 255, 255, 0.48) 42%, transparent 64%);
        mix-blend-mode: screen;
        opacity: 0.58;
        transform: translateX(-42%);
        animation: portraitShine 5.6s ease-in-out infinite;
        z-index: 2;
      }

      .hero-photo::after {
        inset: 14% 6% -5% 10%;
        background: rgba(185, 152, 80, 0.16);
        filter: blur(26px);
        transform: translateZ(-40px);
        animation: portraitGlow 7s ease-in-out infinite;
        z-index: -1;
      }

      .side-stats {
        display: grid;
        gap: 12px;
        position: absolute;
        right: 38px;
        top: 50%;
        width: 150px;
        transform: translateY(-50%);
        z-index: 3;
      }

      .stat {
        backdrop-filter: blur(18px) saturate(1.2);
      }

      .stat {
        min-height: 74px;
        padding: 14px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.42);
        border: 1px solid rgba(255, 255, 255, 0.58);
      }

      .stat b {
        display: block;
        font-size: 20px;
        margin-top: 4px;
      }

      .metrics {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
      }

      .metric {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 80px;
        padding: 14px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.42);
        border: 1px solid rgba(255, 255, 255, 0.58);
      }

      .symbol {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, 0.72);
        color: var(--gold);
        font-weight: 700;
      }

      .metric b {
        display: block;
        font-size: 20px;
      }

      .section-head {
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: 16px;
        margin-bottom: 16px;
      }

      .work-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
      }

      .film-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .film {
        position: relative;
        display: grid;
        grid-template-columns: 170px 1fr;
        gap: 16px;
        padding: 14px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.48);
        border: 1px solid rgba(255, 255, 255, 0.62);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.35),
          0 16px 34px rgba(34, 31, 28, 0.1);
        transform: perspective(950px) rotateX(0deg) rotateY(0deg) translateZ(0);
        transition: transform 420ms ease, box-shadow 420ms ease, border-color 420ms ease, background 420ms ease;
        overflow: hidden;
        isolation: isolate;
      }

      .film img {
        width: 100%;
        height: 100%;
        min-height: 190px;
        object-fit: cover;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.45);
        box-shadow: 0 12px 24px rgba(28, 26, 23, 0.13);
        transition: transform 650ms ease, filter 650ms ease;
      }

      .film::before {
        content: "";
        position: absolute;
        inset: 10px;
        z-index: 2;
        pointer-events: none;
        border-radius: 11px;
        border: 1px solid rgba(255, 255, 255, 0.36);
        box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.16);
      }

      .film::after {
        content: "";
        position: absolute;
        inset: -40% -30%;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(110deg, transparent 34%, rgba(255, 255, 255, 0.4) 48%, transparent 62%);
        transform: translateX(-65%) rotate(8deg);
        opacity: 0;
        transition: transform 720ms ease, opacity 720ms ease;
      }

      .film:hover {
        background: rgba(255, 255, 255, 0.62);
        border-color: rgba(255, 255, 255, 0.86);
        transform: perspective(950px) rotateX(3deg) rotateY(-3deg) translateY(-7px) translateZ(16px);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.48),
          0 26px 48px rgba(34, 31, 28, 0.19),
          0 0 0 8px rgba(255, 255, 255, 0.12);
      }

      .film:nth-child(even):hover {
        transform: perspective(950px) rotateX(3deg) rotateY(3deg) translateY(-7px) translateZ(16px);
      }

      .film:hover img {
        transform: scale(1.055);
        filter: saturate(1.08) contrast(1.04);
      }

      .film:hover::after {
        opacity: 0.72;
        transform: translateX(62%) rotate(8deg);
      }

      .film p,
      .text-panel p,
      .reason p {
        color: #68645d;
        line-height: 1.65;
        margin: 0;
      }

      .film-meta {
        display: inline-flex;
        margin-bottom: 10px;
        padding: 7px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.68);
        color: #5b5751;
        font-size: 12px;
      }

      .direction-showcase,
      .ad-film-showcase,
      .portfolio-showcase {
        overflow: hidden;
        padding-bottom: 20px;
      }

      .direction-grid,
      .ad-film-grid,
      .portfolio-grid {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: clamp(170px, 22vw, 260px);
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px 2px 14px;
        scroll-padding-inline: 2px;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        scrollbar-color: rgba(54, 51, 46, 0.26) rgba(255, 255, 255, 0.24);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
      }

      .direction-card,
      .ad-card,
      .portfolio-card {
        position: relative;
        min-height: 185px;
        overflow: hidden;
        border-radius: 14px;
        background: #111;
        border: 1px solid rgba(255, 255, 255, 0.72);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.28),
          0 18px 36px rgba(32, 29, 25, 0.14);
        isolation: isolate;
        scroll-snap-align: start;
        transition: transform 420ms ease, box-shadow 420ms ease, border-color 420ms ease;
      }

      .direction-card:nth-child(3n + 1),
      .ad-card:nth-child(5n + 1),
      .portfolio-card:nth-child(5n + 1) {
        grid-column: auto;
        grid-row: auto;
        min-height: 185px;
      }

      .direction-card img,
      .ad-card img,
      .portfolio-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 700ms ease, filter 700ms ease;
      }

      .direction-card::after,
      .ad-card::after,
      .portfolio-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.72)),
          linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.18), transparent 62%);
        opacity: 0.95;
        pointer-events: none;
      }

      .direction-card:hover,
      .ad-card:hover,
      .portfolio-card:hover {
        transform: perspective(900px) rotateX(4deg) rotateY(-3deg) translateY(-8px);
        border-color: rgba(255, 255, 255, 0.9);
        box-shadow: 0 26px 48px rgba(34, 31, 28, 0.2);
      }

      .direction-card:hover img,
      .ad-card:hover img,
      .portfolio-card:hover img {
        transform: scale(1.08);
        filter: saturate(1.08) contrast(1.05);
      }

      .portfolio-card h3 {
        margin: 0;
        font-size: clamp(15px, 1.5vw, 19px);
        line-height: 1.02;
      }

      .direction-info,
      .ad-info,
      .portfolio-info {
        position: absolute;
        z-index: 1;
        left: 14px;
        right: 14px;
        bottom: 14px;
        display: grid;
        gap: 5px;
        color: white;
        text-shadow: 0 10px 22px rgba(0, 0, 0, 0.46);
      }

      .direction-info span,
      .ad-info span,
      .portfolio-info span {
        width: fit-content;
        padding: 6px 9px;
        border-radius: 999px;
        color: rgba(255, 255, 255, 0.86);
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.2);
        font-size: 10px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        backdrop-filter: blur(10px);
      }

      .direction-card h3,
      .ad-card h3,
      .portfolio-card h3 {
        margin: 0;
      }

      .work {
        min-height: 220px;
        position: relative;
        overflow: hidden;
        border-radius: 12px;
        background: #111;
        border: 1px solid rgba(255, 255, 255, 0.72);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.28),
          0 18px 36px rgba(32, 29, 25, 0.14);
        transform: perspective(900px) rotateX(0deg) rotateY(0deg) translateZ(0);
        transition: transform 420ms ease, box-shadow 420ms ease, border-color 420ms ease;
        isolation: isolate;
      }

      .work img,
      .showreel img,
      .craft img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .work img {
        transform: scale(1.01);
        transition: transform 650ms ease, filter 650ms ease;
      }

      .work::before {
        content: "";
        position: absolute;
        inset: 8px;
        z-index: 2;
        pointer-events: none;
        border-radius: 9px;
        border: 1px solid rgba(255, 255, 255, 0.38);
        box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.12);
      }

      .work::after,
      .showreel::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 34%, rgba(0, 0, 0, 0.72));
      }

      .work:hover {
        transform: perspective(900px) rotateX(4deg) rotateY(-4deg) translateY(-8px) translateZ(18px);
        border-color: rgba(255, 255, 255, 0.9);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.42),
          0 26px 48px rgba(32, 29, 25, 0.24),
          0 0 0 8px rgba(255, 255, 255, 0.14);
      }

      .work:hover img {
        transform: scale(1.08);
        filter: saturate(1.08) contrast(1.05);
      }

      .work:nth-child(even):hover {
        transform: perspective(900px) rotateX(4deg) rotateY(4deg) translateY(-8px) translateZ(18px);
      }

      .work-info {
        position: absolute;
        z-index: 1;
        left: 14px;
        right: 14px;
        bottom: 12px;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: 10px;
      }

      .work-info small {
        display: block;
        color: rgba(255, 255, 255, 0.68);
        margin-bottom: 4px;
      }

      .work-info strong {
        display: block;
        text-shadow:
          0 1px 0 rgba(255, 255, 255, 0.18),
          0 8px 18px rgba(0, 0, 0, 0.55);
      }

      .about {
        display: grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.72fr) minmax(210px, 0.5fr);
        gap: 22px;
        align-items: center;
      }

      .about-copy p,
      .studio-copy p {
        color: #68645d;
        line-height: 1.75;
      }

      .about-photo img,
      .studio-photo img {
        width: 100%;
        border-radius: 14px;
        object-fit: cover;
        box-shadow:
          0 18px 40px rgba(31, 30, 28, 0.16),
          inset 0 1px 0 rgba(255, 255, 255, 0.4);
        transform: perspective(900px) rotateY(0deg) translateZ(0);
        transition: transform 520ms ease, filter 520ms ease, box-shadow 520ms ease;
      }

      .about-photo img {
        aspect-ratio: 4 / 5;
        object-position: center top;
      }

      .about-photo,
      .studio-photo {
        position: relative;
        transform-style: preserve-3d;
        animation: imageFloat 8s ease-in-out infinite;
      }

      .studio-photo {
        animation-delay: -2.5s;
      }

      .about-photo::after,
      .studio-photo::after {
        content: "";
        position: absolute;
        inset: 12%;
        z-index: -1;
        border-radius: 20px;
        background: rgba(185, 152, 80, 0.18);
        filter: blur(26px);
        animation: imageGlow 8s ease-in-out infinite;
      }

      .about-photo:hover img,
      .studio-photo:hover img {
        transform: perspective(900px) rotateY(-4deg) rotateX(2deg) translateY(-8px) translateZ(20px);
        filter: saturate(1.06) contrast(1.04);
        box-shadow:
          0 28px 54px rgba(31, 30, 28, 0.22),
          0 0 0 8px rgba(255, 255, 255, 0.14);
      }

      .timeline {
        display: grid;
        gap: 14px;
        padding-left: 8px;
      }

      .time {
        display: grid;
        grid-template-columns: 22px 1fr;
        gap: 10px;
        align-items: start;
      }

      .dot {
        width: 10px;
        height: 10px;
        margin-top: 5px;
        border-radius: 50%;
        background: var(--gold);
        box-shadow: 0 0 0 6px rgba(185, 152, 80, 0.13);
      }

      .showreel {
        min-height: 260px;
        position: relative;
        overflow: hidden;
        border-radius: 14px;
        background: #111;
        box-shadow: 0 22px 46px rgba(29, 27, 24, 0.18);
        display: block;
      }

      .showreel img {
        animation: showreelPan 12s ease-in-out infinite alternate;
        transform-origin: center;
      }

      .showreel-content {
        position: absolute;
        z-index: 2;
        left: 50%;
        right: auto;
        bottom: 24px;
        transform: translateX(-50%);
        width: min(320px, calc(100% - 40px));
        display: grid;
        place-items: center;
        gap: 4px;
        color: white;
        text-align: center;
        pointer-events: none;
      }

      .showreel-content h3 {
        margin: 4px 0 0;
        text-align: center;
      }

      .showreel-content .small-title {
        text-align: center;
      }

      .play {
        position: absolute;
        z-index: 3;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 72px;
        height: 72px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.72);
        background: rgba(255, 255, 255, 0.2);
        color: white;
        display: grid;
        place-items: center;
        font-size: 26px;
        animation: playPulse 2.4s ease-in-out infinite;
      }

      .studio {
        display: grid;
        grid-template-columns: minmax(260px, 0.86fr) minmax(320px, 1.2fr);
        gap: 24px;
        align-items: center;
      }

      .studio h2 {
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(42px, 7vw, 82px);
        font-weight: 500;
      }

      .studio-socials {
        width: fit-content;
        margin-top: 14px;
      }

      .studio-socials .social-link {
        background: rgba(255, 255, 255, 0.68);
        color: #2c2924;
      }

      .brand-strip {
        position: relative;
        overflow: hidden;
        padding: 28px 0 30px;
        border-radius: 16px;
        background:
          radial-gradient(circle at 12% 50%, rgba(255, 255, 255, 0.9), transparent 22rem),
          linear-gradient(120deg, rgba(255, 255, 255, 0.76), rgba(238, 235, 226, 0.62));
        border-color: rgba(255, 255, 255, 0.72);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.78),
          0 22px 48px rgba(31, 29, 26, 0.1);
      }

      .brand-strip::before,
      .brand-strip::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        z-index: 2;
        width: 130px;
        pointer-events: none;
      }

      .brand-strip::before {
        left: 0;
        background: linear-gradient(90deg, rgba(245, 243, 238, 0.98), transparent);
      }

      .brand-strip::after {
        right: 0;
        background: linear-gradient(270deg, rgba(245, 243, 238, 0.98), transparent);
      }

      .brand-strip-head {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12px;
        margin-bottom: 24px;
        color: rgba(31, 31, 31, 0.56);
        font-size: 11px;
        letter-spacing: 0.46em;
        text-transform: uppercase;
      }

      .brand-strip-head::before {
        content: "";
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--gold);
        box-shadow: 0 0 18px rgba(185, 152, 80, 0.45);
      }

      .logo-marquee {
        display: flex;
        overflow: hidden;
        gap: 0;
      }

      .logo-track {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: max-content;
        flex-shrink: 0;
        padding-right: 8px;
        animation: logoScroll 58s linear infinite;
        will-change: transform;
      }

      .logo-item {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: clamp(120px, 12vw, 168px);
        height: 76px;
        padding: 8px 8px;
        border-radius: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        opacity: 1;
        overflow: hidden;
        white-space: nowrap;
      }

      .logo-item img {
        display: block;
        width: 100%;
        height: 100%;
        max-width: 174px;
        max-height: 58px;
        object-fit: contain;
        opacity: 1;
        filter: none;
        mix-blend-mode: multiply;
        transform: translateZ(0);
        transition: transform 0.25s ease;
      }

      .logo-item:hover img {
        transform: translateY(-2px) scale(1.04);
      }

      .logo-marquee:hover .logo-track {
        animation-play-state: paused;
      }

      @keyframes logoScroll {
        from { transform: translate3d(0, 0, 0); }
        to { transform: translate3d(-100%, 0, 0); }
      }

      .process {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
      }

      .process-item,
      .award,
      .quote,
      .contact-method,
      .text-panel,
      .reason {
        position: relative;
        padding: 18px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.48);
        border: 1px solid rgba(255, 255, 255, 0.62);
      }

      .text-panel {
        display: grid;
        gap: 14px;
      }

      .marquee {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 14px;
      }

      .marquee span {
        padding: 8px 11px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.58);
        border: 1px solid rgba(255, 255, 255, 0.6);
        color: #5d5952;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

      .craft-list {
        display: grid;
        gap: 12px;
      }

      .service {
        position: relative;
        display: grid;
        grid-template-columns: 220px 54px 1fr 44px;
        gap: 18px;
        align-items: center;
        padding: 14px;
        min-height: 150px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.48);
        border: 1px solid rgba(255, 255, 255, 0.62);
        transition: transform 420ms ease, box-shadow 420ms ease, background 420ms ease;
        overflow: hidden;
      }

      .service:hover {
        transform: translateY(-6px);
        background: rgba(255, 255, 255, 0.62);
        box-shadow: 0 22px 42px rgba(34, 31, 28, 0.14);
      }

      .craft {
        position: relative;
        height: 122px;
        border-radius: 10px;
        overflow: hidden;
        background: #111;
        box-shadow: 0 12px 26px rgba(31, 29, 26, 0.16);
      }

      .craft img {
        transform: scale(1.04);
        animation: craftDrift 9s ease-in-out infinite alternate;
        transition: transform 520ms ease, filter 520ms ease;
      }

      .service:nth-child(even) .craft img {
        animation-delay: -3s;
      }

      .craft::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.24), transparent 66%);
        transform: translateX(-70%);
        opacity: 0;
        transition: transform 620ms ease, opacity 620ms ease;
      }

      .service:hover .craft img {
        transform: scale(1.12);
        filter: saturate(1.1) contrast(1.06);
        animation-play-state: paused;
      }

      .service:hover .craft::after {
        opacity: 1;
        transform: translateX(70%);
      }

      .stills {
        overflow: hidden;
        background:
          linear-gradient(120deg, rgba(255, 255, 255, 0.72), rgba(236, 233, 225, 0.58)),
          url("assets/working-stills/still-01.jpg") center / cover;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.72),
          0 24px 54px rgba(31, 29, 26, 0.13);
      }

      .stills-grid {
        display: grid;
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: clamp(150px, 18vw, 210px);
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 2px 2px 12px;
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
        scrollbar-color: rgba(54, 51, 46, 0.22) rgba(255, 255, 255, 0.22);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
      }

      .still {
        position: relative;
        min-height: 145px;
        overflow: hidden;
        border-radius: 14px;
        background: #111;
        border: 1px solid rgba(255, 255, 255, 0.7);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.26),
          0 18px 34px rgba(34, 31, 28, 0.12);
        scroll-snap-align: start;
        transition: transform 420ms ease, box-shadow 420ms ease, border-color 420ms ease;
      }

      .still:nth-child(1),
      .still:nth-child(6) {
        grid-column: auto;
      }

      .still:nth-child(4),
      .still:nth-child(8) {
        min-height: 145px;
      }

      .still img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.04);
        transition: transform 650ms ease, filter 650ms ease;
      }

      .still::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, 0.48)),
          linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.2), transparent 66%);
        opacity: 0.75;
        transform: translateX(-18%);
        transition: transform 650ms ease, opacity 650ms ease;
      }

      .still-label {
        position: absolute;
        z-index: 1;
        left: 12px;
        right: 12px;
        bottom: 12px;
        color: white;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        text-shadow: 0 10px 22px rgba(0, 0, 0, 0.42);
      }

      .still:hover {
        transform: translateY(-7px) perspective(900px) rotateX(4deg);
        border-color: rgba(255, 255, 255, 0.9);
        box-shadow: 0 26px 48px rgba(34, 31, 28, 0.18);
      }

      .still:hover img {
        transform: scale(1.12);
        filter: saturate(1.08) contrast(1.05);
      }

      .still:hover::after {
        opacity: 0.95;
        transform: translateX(24%);
      }

      .number {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.68);
        color: #77716a;
        font-weight: 700;
      }

      .quotes,
      .contact-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
      }

      .recognition {
        overflow: hidden;
        background:
          linear-gradient(120deg, rgba(255, 255, 255, 0.72), rgba(236, 233, 225, 0.58)),
          url("assets/recognition-background.jpg") center / cover;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.72),
          0 24px 54px rgba(31, 29, 26, 0.13);
      }

      .awards {
        display: grid;
        grid-template-columns: minmax(240px, 0.42fr) minmax(0, 1fr);
        gap: 16px;
        align-items: stretch;
      }

      .award-summary {
        position: relative;
        overflow: hidden;
        min-height: 360px;
        display: grid;
        align-content: space-between;
        padding: 24px;
        border-radius: 14px;
        color: var(--ink);
        background:
          linear-gradient(120deg, rgba(255, 255, 255, 0.78), rgba(236, 233, 225, 0.5)),
          url("assets/best-editor-awards.jpg") center / cover;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.72),
          0 18px 34px rgba(34, 31, 28, 0.08);
      }

      .award-summary::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(90deg, rgba(255, 255, 255, 0.38) 1px, transparent 1px) 0 0 / 78px 100%,
          radial-gradient(circle at 18% 12%, rgba(185, 152, 80, 0.18), transparent 22rem),
          rgba(255, 255, 255, 0.42);
        pointer-events: none;
      }

      .award-summary > * {
        position: relative;
        z-index: 1;
      }

      .award-summary b {
        display: block;
        font-size: clamp(72px, 10vw, 128px);
        line-height: 0.8;
        color: var(--gold);
        text-shadow: 0 18px 38px rgba(31, 29, 26, 0.16);
      }

      .award-summary h3 {
        color: #272521;
        font-size: 26px;
      }

      .award-list {
        display: grid;
        gap: 10px;
        counter-reset: award;
      }

      .award {
        display: grid;
        grid-template-columns: 92px 1fr auto;
        gap: 16px;
        align-items: center;
        text-align: left;
        min-height: 92px;
        overflow: hidden;
        transition: transform 420ms ease, box-shadow 420ms ease, background 420ms ease;
      }

      .award::before {
        counter-increment: award;
        content: "";
        width: 84px;
        height: 64px;
        display: grid;
        place-items: center;
        border-radius: 0;
        color: #3e3931;
        background: url("assets/best-editor-laurel.png") center / contain no-repeat;
        border: 0;
        box-shadow: none;
        backdrop-filter: none;
        font-weight: 800;
      }

      .award::after {
        content: "";
        position: absolute;
        inset: -50% -30%;
        background: linear-gradient(105deg, transparent 34%, rgba(185, 152, 80, 0.24), transparent 62%);
        transform: translateX(-70%) rotate(8deg);
        opacity: 0;
        transition: transform 720ms ease, opacity 720ms ease;
      }

      .award:hover {
        transform: translateY(-7px) perspective(800px) rotateX(4deg);
        background: rgba(255, 255, 255, 0.62);
        box-shadow: 0 22px 42px rgba(34, 31, 28, 0.14);
      }

      .award:hover::after {
        opacity: 1;
        transform: translateX(68%) rotate(8deg);
      }

      .trophy {
        color: var(--gold);
        font-size: 13px;
        font-family: Georgia, serif;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 8px 10px;
        border-radius: 999px;
        background: rgba(185, 152, 80, 0.12);
        animation: awardPulse 3.2s ease-in-out infinite;
      }

      .testimonials {
        position: relative;
        overflow: hidden;
        display: grid;
        gap: 16px;
        padding: 18px;
        border-radius: 16px;
        background:
          linear-gradient(120deg, rgba(255, 255, 255, 0.72), rgba(236, 233, 225, 0.58)),
          url("assets/showreel.jpg") center / cover;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.72),
          0 24px 54px rgba(31, 29, 26, 0.13);
        color: var(--ink);
      }

      .testimonials::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(90deg, rgba(255, 255, 255, 0.38) 1px, transparent 1px) 0 0 / 78px 100%,
          radial-gradient(circle at 18% 12%, rgba(185, 152, 80, 0.18), transparent 22rem),
          rgba(255, 255, 255, 0.42);
        pointer-events: none;
      }

      .testimonial-lead {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 18px;
        align-items: center;
        padding: 20px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.58);
        border: 1px solid rgba(255, 255, 255, 0.68);
        backdrop-filter: blur(16px);
      }

      .quote-mark {
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: var(--gold);
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(255, 255, 255, 0.78);
        font-family: Georgia, serif;
        font-size: 36px;
        line-height: 1;
      }

      .testimonial-lead p {
        margin: 0;
        max-width: 680px;
        font-size: clamp(19px, 2.1vw, 30px);
        line-height: 1.22;
        font-weight: 650;
        color: #272521;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76);
      }

      .voice-grid {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
      }

      .voice-card {
        min-height: 220px;
        display: grid;
        align-content: space-between;
        gap: 18px;
        padding: 18px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.54);
        border: 1px solid rgba(255, 255, 255, 0.68);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.62),
          0 18px 34px rgba(34, 31, 28, 0.08);
        backdrop-filter: blur(16px);
        transition: transform 420ms ease, background 420ms ease, box-shadow 420ms ease;
      }

      .voice-photo {
        height: 124px;
        margin: -6px -6px 2px;
        overflow: hidden;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.45);
      }

      .voice-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: saturate(0.96) contrast(1.03);
        transition: transform 650ms ease;
      }

      .voice-card:hover {
        transform: translateY(-7px) perspective(850px) rotateX(4deg);
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 24px 42px rgba(34, 31, 28, 0.13);
      }

      .voice-card:hover .voice-photo img {
        transform: scale(1.06);
      }

      .voice-card p {
        margin: 0;
        color: #4f4a43;
        line-height: 1.56;
      }

      .voice-person {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .avatar {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        border-radius: 50%;
        color: white;
        background: linear-gradient(145deg, #181817, #b99850);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
        font-weight: 800;
      }

      .voice-person .avatar {
        display: none;
      }

      .voice-card h3,
      .testimonial-lead h3 {
        color: #1f1e1b;
        margin-bottom: 2px;
      }

      .voice-card .small-title,
      .testimonial-lead .small-title {
        color: #777168;
      }

      .stars {
        color: var(--gold);
        letter-spacing: 0.12em;
        white-space: nowrap;
      }

      .social-showcase,
      .press-room {
        position: relative;
        overflow: hidden;
        background:
          linear-gradient(120deg, rgba(255, 255, 255, 0.74), rgba(236, 233, 225, 0.6)),
          var(--section-bg, url("assets/working-stills/still-05.jpg")) center / cover;
      }

      .social-showcase::before,
      .press-room::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          linear-gradient(90deg, rgba(255, 255, 255, 0.36) 1px, transparent 1px) 0 0 / 78px 100%,
          rgba(255, 255, 255, 0.44);
      }

      .social-showcase > *,
      .press-room > * {
        position: relative;
        z-index: 1;
      }

      .social-grid,
      .press-grid,
      .hire-photos {
        display: grid;
        gap: 12px;
      }

      .social-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .social-showcase .section-head h2,
      .stills .section-head h2 {
        font-size: clamp(30px, 5vw, 58px);
        line-height: 0.95;
      }

      .social-card,
      .press-card,
      .hire-photo-tile {
        position: relative;
        overflow: hidden;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.58);
        border: 1px solid rgba(255, 255, 255, 0.72);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.62),
          0 18px 34px rgba(34, 31, 28, 0.1);
        backdrop-filter: blur(14px);
      }

      .social-card {
        min-height: 230px;
        display: grid;
        grid-template-rows: 126px auto;
      }

      .social-card img,
      .social-card iframe,
      .hire-photo-tile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 700ms ease, filter 700ms ease;
      }

      .social-card iframe {
        display: block;
        border: 0;
        background: rgba(255, 255, 255, 0.72);
      }

      .social-card:hover img,
      .hire-photo-tile:hover img {
        transform: scale(1.06);
        filter: saturate(1.06) contrast(1.04);
      }

      .social-live {
        position: relative;
      }

      .social-live::after {
        content: attr(data-live);
        position: absolute;
        left: 10px;
        bottom: 10px;
        padding: 7px 10px;
        border-radius: 999px;
        color: #22201c;
        background: rgba(255, 255, 255, 0.78);
        border: 1px solid rgba(255, 255, 255, 0.86);
        backdrop-filter: blur(12px);
        font-size: 10px;
        font-weight: 850;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .social-card-body {
        display: grid;
        gap: 6px;
        padding: 12px;
      }

      .social-card-body h3 {
        font-size: 18px;
      }

      .social-card-body h3,
      .press-card h3 {
        color: #1f1e1b;
      }

      .social-card-body p,
      .press-card p {
        margin: 0;
        color: #5f5a52;
        line-height: 1.45;
        font-size: 14px;
      }

      .social-card-body a,
      .press-card a {
        width: fit-content;
        color: #1f1e1b;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

      .press-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
      }

      .press-share {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.38);
        border: 1px solid rgba(255, 255, 255, 0.62);
      }

      .press-share .social-link {
        width: 30px;
        height: 30px;
      }

      .press-share .social-link svg {
        width: 15px;
        height: 15px;
      }

      .profile-link-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
        gap: 10px;
        margin-top: 14px;
      }

      .profile-chip {
        display: grid;
        place-items: center;
        min-height: 48px;
        border-radius: 999px;
        color: #272521;
        background: rgba(255, 255, 255, 0.62);
        border: 1px solid rgba(255, 255, 255, 0.72);
        font-size: 12px;
        font-weight: 850;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        box-shadow: 0 12px 22px rgba(34, 31, 28, 0.08);
        transition: transform 0.24s ease, background 0.24s ease;
      }

      .profile-chip:hover,
      .profile-chip:focus-visible {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 0.88);
      }

      .press-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .news-window {
        margin-top: 16px;
        overflow: hidden;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.54);
        border: 1px solid rgba(255, 255, 255, 0.72);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.72),
          0 18px 34px rgba(34, 31, 28, 0.08);
        backdrop-filter: blur(14px);
      }

      .news-window-head {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        padding: 16px 18px 0;
        color: #302d28;
      }

      .news-window-head p {
        margin: 0;
        color: #68645d;
      }

      .news-slider {
        overflow: hidden;
        padding: 16px 0 18px;
      }

      .news-track {
        display: flex;
        gap: 12px;
        width: max-content;
        animation: newsSlide 92s linear infinite;
      }

      .news-window:hover .news-track {
        animation-play-state: paused;
      }

      .news-card {
        display: grid;
        align-content: space-between;
        gap: 14px;
        width: 240px;
        min-height: 156px;
        padding: 16px;
        border-radius: 12px;
        color: #2a2621;
        background: rgba(255, 255, 255, 0.66);
        border: 1px solid rgba(255, 255, 255, 0.8);
        box-shadow: 0 12px 24px rgba(34, 31, 28, 0.08);
      }

      .news-card:first-child {
        margin-left: 18px;
      }

      .news-card time {
        color: #8d7650;
        font-size: 11px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.1em;
      }

      .news-card h3 {
        font-size: 18px;
      }

      .news-card span {
        font-size: 12px;
        font-weight: 850;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

      @keyframes newsSlide {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
      }

      .press-card {
        min-height: 230px;
        display: grid;
        align-content: space-between;
        gap: 18px;
        padding: 18px;
      }

      .press-card time {
        color: var(--gold);
        font-weight: 800;
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .contact {
        display: grid;
        gap: 18px;
        position: relative;
        overflow: hidden;
        color: var(--ink);
        background:
          linear-gradient(120deg, rgba(255, 255, 255, 0.72), rgba(236, 233, 225, 0.58)),
          url("assets/showreel.jpg") center / cover;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.72),
          0 24px 54px rgba(31, 29, 26, 0.13);
      }

      .contact::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
          linear-gradient(90deg, rgba(255, 255, 255, 0.38) 1px, transparent 1px) 0 0 / 78px 100%,
          radial-gradient(circle at 18% 12%, rgba(185, 152, 80, 0.18), transparent 22rem),
          rgba(255, 255, 255, 0.42);
      }

      .contact > * {
        position: relative;
        z-index: 1;
      }

      .contact-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 18px;
        align-items: end;
        padding: 8px 6px 0;
      }

      .contact h2 {
        max-width: 760px;
        color: #272521;
        text-shadow:
          0 1px 0 rgba(255, 255, 255, 0.76),
          0 18px 38px rgba(31, 29, 26, 0.12);
      }

      .contact p {
        max-width: 660px;
        color: #4f4a43;
      }

      .contact-badge {
        display: grid;
        gap: 6px;
        min-width: 170px;
        padding: 16px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.58);
        border: 1px solid rgba(255, 255, 255, 0.68);
        backdrop-filter: blur(16px);
      }

      .contact-plan-icon {
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        margin-bottom: 4px;
        border-radius: 50%;
        color: #3e3931;
        background: rgba(255, 255, 255, 0.74);
        border: 1px solid rgba(255, 255, 255, 0.86);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.86),
          0 12px 24px rgba(34, 31, 28, 0.1);
        transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
      }

      .contact-plan-icon:hover,
      .contact-plan-icon:focus-visible {
        background: rgba(255, 255, 255, 0.96);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.92),
          0 16px 28px rgba(34, 31, 28, 0.14);
        transform: translateY(-2px) scale(1.04);
      }

      .contact-plan-icon svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
      }

      .contact-badge b {
        font-size: 26px;
      }

      .contact-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 22px;
      }

      .contact .button {
        background: rgba(255, 255, 255, 0.92);
        color: #181817;
      }

      .contact-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }

      .contact-method {
        display: grid;
        gap: 12px;
        min-height: 158px;
        background: rgba(255, 255, 255, 0.54);
        border-color: rgba(255, 255, 255, 0.68);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.62),
          0 18px 34px rgba(34, 31, 28, 0.08);
        backdrop-filter: blur(16px);
        transition: transform 420ms ease, background 420ms ease, box-shadow 420ms ease;
      }

      .contact-method:hover {
        transform: translateY(-6px);
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 24px 42px rgba(34, 31, 28, 0.13);
      }

      .contact-icon {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #3e3931;
        background: rgba(255, 255, 255, 0.58);
        border: 1px solid rgba(255, 255, 255, 0.86);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.82),
          0 12px 22px rgba(34, 31, 28, 0.08);
        backdrop-filter: blur(12px);
        font-weight: 800;
      }

      .contact-icon svg {
        width: 20px;
        height: 20px;
        fill: currentColor;
      }

      .contact-method h3 {
        color: #1f1e1b;
      }

      .contact-method p {
        color: #4f4a43;
        line-height: 1.45;
      }

      .hire-section {
        overflow: hidden;
        --section-bg: url("assets/working-stills/still-04.jpg");
        background:
          linear-gradient(120deg, rgba(255, 255, 255, 0.72), rgba(236, 233, 225, 0.58)),
          var(--section-bg) center / cover;
      }

      .hire-wrap {
        display: grid;
        grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1fr);
        gap: 18px;
        align-items: stretch;
      }

      .hire-intro {
        position: relative;
        min-height: 430px;
        display: grid;
        align-content: space-between;
        padding: 24px;
        border-radius: 14px;
        overflow: hidden;
        color: var(--ink);
        background:
          linear-gradient(120deg, rgba(255, 255, 255, 0.82), rgba(236, 233, 225, 0.7));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.72),
          0 24px 54px rgba(31, 29, 26, 0.13);
        animation: hireIntroFloat 8s ease-in-out infinite;
      }

      .hire-intro::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
          linear-gradient(90deg, rgba(255, 255, 255, 0.38) 1px, transparent 1px) 0 0 / 78px 100%,
          radial-gradient(circle at 18% 12%, rgba(185, 152, 80, 0.18), transparent 22rem),
          rgba(255, 255, 255, 0.42);
        pointer-events: none;
        animation: hireLightSweep 6.5s ease-in-out infinite;
      }

      .hire-intro > * {
        position: relative;
        z-index: 1;
      }

      .hire-intro h2 {
        color: #272521;
        text-shadow:
          0 1px 0 rgba(255, 255, 255, 0.76),
          0 18px 38px rgba(31, 29, 26, 0.12);
      }

      .hire-intro p {
        color: #4f4a43;
        line-height: 1.65;
        margin: 0;
      }

      .hire-photos {
        grid-template-columns: 1fr 1fr;
      }

      .hire-photo-tile {
        min-height: 142px;
      }

      .hire-photo-tile:nth-child(1) {
        grid-column: 1 / -1;
        min-height: 180px;
      }

      .hire-list {
        display: grid;
        gap: 10px;
        counter-reset: hire;
      }

      .reason {
        min-height: 0;
        display: grid;
        grid-template-columns: 58px 1fr;
        gap: 16px;
        align-items: start;
        padding: 16px;
        opacity: 0;
        transform: translateY(18px);
        animation: reasonRise 720ms ease forwards;
        transition: transform 420ms ease, box-shadow 420ms ease, background 420ms ease;
      }

      .reason:nth-child(1) { animation-delay: 80ms; }
      .reason:nth-child(2) { animation-delay: 160ms; }
      .reason:nth-child(3) { animation-delay: 240ms; }
      .reason:nth-child(4) { animation-delay: 320ms; }
      .reason:nth-child(5) { animation-delay: 400ms; }
      .reason:nth-child(6) { animation-delay: 480ms; }
      .reason:nth-child(7) { animation-delay: 560ms; }

      .reason::before {
        counter-increment: hire;
        content: counter(hire, decimal-leading-zero);
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #3a352c;
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.78);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.78),
          0 12px 22px rgba(34, 31, 28, 0.1);
        backdrop-filter: blur(12px);
        font-weight: 800;
        animation: numberPulse 3.4s ease-in-out infinite;
      }

      .reason:hover {
        transform: translateY(-5px);
        background: rgba(255, 255, 255, 0.66);
        box-shadow: 0 22px 42px rgba(34, 31, 28, 0.12);
      }

      .hire-close {
        grid-column: 1 / -1;
        padding: 18px 20px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.62);
        border: 1px solid rgba(255, 255, 255, 0.72);
        color: #3e3a34;
        font-weight: 650;
        line-height: 1.6;
        opacity: 0;
        transform: translateY(16px);
        animation: reasonRise 720ms ease forwards 680ms;
      }

      footer {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        color: #7b7770;
        font-size: 12px;
        padding: 18px 6px 0;
      }

      @media (max-width: 980px) {
        .hero,
        .about,
        .studio,
        .contact-top,
        .contact {
          grid-template-columns: 1fr;
        }

        .links {
          order: 3;
          grid-column: 1 / -1;
          justify-content: center;
          overflow-x: auto;
        }

        .nav-cta {
          justify-self: end;
        }

        .side-stats,
        .metrics,
        .work-grid,
        .film-grid,
        .process,
        .awards,
        .contact-grid,
        .social-grid,
        .press-grid,
        .profile-link-grid,
        .hire-wrap {
          grid-template-columns: 1fr;
        }

        .hero {
          min-height: auto;
        }

        .hero-photo,
        .hero-photo .hero-fallback,
        .hero-sequence {
          min-height: 360px;
        }

        .side-stats {
          position: static;
          width: auto;
          transform: none;
        }
      }

      @media (min-width: 721px) and (max-width: 980px) {
        .nav {
          grid-template-columns: 1fr auto 1fr;
        }

        .links {
          order: 0;
          grid-column: auto;
        }
      }

      @media (max-width: 720px) {
        .page {
          width: min(100% - 16px, 560px);
          padding: 92px 12px 12px;
          margin: 8px auto;
          border-radius: 16px;
        }

        .nav {
          top: 10px;
          width: calc(100% - 24px);
          padding: 6px;
        }

        .section {
          padding: 18px;
        }

        .nav {
          gap: 10px;
        }

        .brand p,
        .nav-cta {
          display: none;
        }

        .links {
          justify-content: start;
        }

        h1 {
          font-size: 46px;
          transform: perspective(700px) rotateX(2deg);
        }

        .metrics,
        .work-grid,
        .film-grid,
        .process,
        .awards,
        .award,
        .contact-grid,
        .social-grid,
        .press-grid,
        .profile-link-grid,
        .hire-wrap,
        .hire-list {
          grid-template-columns: 1fr;
        }

        .hire-intro {
          min-height: 320px;
        }

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

        .voice-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .testimonial-lead {
          grid-template-columns: auto 1fr;
        }

        .testimonial-lead .stars {
          grid-column: 2;
        }

        .quote-feature-footer {
          align-items: start;
          display: grid;
        }

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

        .direction-grid,
        .ad-film-grid,
        .portfolio-grid,
        .stills-grid {
          grid-template-columns: none;
          grid-auto-columns: minmax(190px, 76vw);
        }

        .direction-card,
        .direction-card:nth-child(3n + 1),
        .ad-card,
        .ad-card:nth-child(5n + 1),
        .portfolio-card,
        .portfolio-card:nth-child(5n + 1) {
          min-height: 210px;
        }

        .still,
        .still:nth-child(4),
        .still:nth-child(8) {
          min-height: 170px;
        }

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

        .voice-grid,
        .testimonial-lead {
          grid-template-columns: 1fr;
        }

        .craft {
          height: 170px;
        }

        .showreel-content,
        footer {
          display: grid;
        }
      }

      @keyframes portraitFloat {
        0%,
        100% {
          transform: perspective(900px) rotateY(-3deg) rotateX(1deg) translate3d(0, 0, 0);
        }
        50% {
          transform: perspective(900px) rotateY(3deg) rotateX(-1deg) translate3d(0, -10px, 18px);
        }
      }

      @keyframes portraitShine {
        0%,
        22% {
          transform: translateX(-58%) skewX(-12deg);
          opacity: 0;
        }
        45% {
          opacity: 0.58;
        }
        68%,
        100% {
          transform: translateX(62%) skewX(-12deg);
          opacity: 0;
        }
      }

      @keyframes portraitGlow {
        0%,
        100% {
          opacity: 0.42;
          transform: translate3d(-8px, 4px, -40px) scale(0.96);
        }
        50% {
          opacity: 0.72;
          transform: translate3d(8px, -4px, -40px) scale(1.04);
        }
      }

      @keyframes imageFloat {
        0%,
        100% {
          transform: perspective(900px) rotateY(0deg) translate3d(0, 0, 0);
        }
        50% {
          transform: perspective(900px) rotateY(2.5deg) translate3d(0, -8px, 14px);
        }
      }

      @keyframes imageGlow {
        0%,
        100% {
          opacity: 0.34;
          transform: scale(0.96);
        }
        50% {
          opacity: 0.72;
          transform: scale(1.08);
        }
      }

      @keyframes showreelPan {
        0% {
          transform: scale(1.04) translateX(-1.5%);
          filter: saturate(0.98) contrast(1);
        }
        100% {
          transform: scale(1.12) translateX(1.5%);
          filter: saturate(1.08) contrast(1.05);
        }
      }

      @keyframes playPulse {
        0%,
        100% {
          box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.28);
          transform: translate(-50%, -50%) scale(1);
        }
        50% {
          box-shadow: 0 0 0 18px rgba(255, 255, 255, 0);
          transform: translate(-50%, -50%) scale(1.06);
        }
      }

      @keyframes craftDrift {
        0% {
          transform: scale(1.04) translateX(-2%);
        }
        100% {
          transform: scale(1.1) translateX(2%);
        }
      }

      @keyframes awardPulse {
        0%,
        100% {
          transform: translateY(0) scale(1);
          text-shadow: 0 8px 18px rgba(185, 152, 80, 0.18);
        }
        50% {
          transform: translateY(-3px) scale(1.04);
          text-shadow: 0 14px 26px rgba(185, 152, 80, 0.34);
        }
      }

      @keyframes hireIntroFloat {
        0%,
        100% {
          background-position: center center;
          transform: perspective(900px) rotateY(0deg) translateY(0);
        }
        50% {
          background-position: 54% center;
          transform: perspective(900px) rotateY(-2deg) translateY(-6px);
        }
      }

      @keyframes hireLightSweep {
        0%,
        100% {
          opacity: 0.66;
          transform: translateX(-2%);
        }
        50% {
          opacity: 1;
          transform: translateX(2%);
        }
      }

      @keyframes reasonRise {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes numberPulse {
        0%,
        100% {
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.82),
            0 12px 22px rgba(34, 31, 28, 0.08),
            0 0 0 0 rgba(255, 255, 255, 0.42);
        }
        50% {
          box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            0 16px 28px rgba(34, 31, 28, 0.1),
            0 0 0 8px rgba(255, 255, 255, 0);
        }
      }

      .reveal {
        opacity: 0;
        transform: perspective(1000px) translateY(48px) rotateX(10deg);
        transform-origin: center bottom;
        transition:
          opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
      }

      .reveal.visible {
        opacity: 1;
        transform: perspective(1000px) translateY(0) rotateX(0deg);
      }

      .reveal-scale {
        opacity: 0;
        transform: perspective(1000px) scale(0.88) rotateX(6deg);
        transform-origin: center center;
        transition:
          opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
          transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
      }

      .reveal-scale.visible {
        opacity: 1;
        transform: perspective(1000px) scale(1) rotateX(0deg);
      }

      .stagger > *:nth-child(1) { transition-delay: 0ms; }
      .stagger > *:nth-child(2) { transition-delay: 80ms; }
      .stagger > *:nth-child(3) { transition-delay: 160ms; }
      .stagger > *:nth-child(4) { transition-delay: 240ms; }
      .stagger > *:nth-child(5) { transition-delay: 320ms; }
      .stagger > *:nth-child(6) { transition-delay: 400ms; }
      .stagger > *:nth-child(7) { transition-delay: 480ms; }

      .tilt-card {
        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        will-change: transform;
        transform-style: preserve-3d;
      }

      .section:not(.hero) {
        content-visibility: auto;
        contain-intrinsic-size: 760px;
        transition: box-shadow 0.45s ease, backdrop-filter 0.45s ease;
      }

      .section.visible {
        opacity: 1;
        transform: none;
      }

      .eyebrow-animated .char {
        display: inline-block;
        opacity: 0;
        transform: translateY(12px) rotateX(-40deg);
        transform-origin: bottom center;
        transition: opacity 0.4s ease, transform 0.4s ease;
      }

      .eyebrow-animated.visible .char {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
      }

      .count-up {
        font-variant-numeric: tabular-nums;
      }

      @keyframes navSlideDown {
        from { opacity: 0; transform: translateX(-50%) translateY(-18px) scale(0.98); }
        to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
      }

      .nav {
        animation: navSlideDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
      }

      @keyframes heroFadeUp {
        from { opacity: 0; transform: perspective(900px) translateY(32px) rotateX(8deg); }
        to { opacity: 1; transform: perspective(900px) translateY(0) rotateX(4deg); }
      }

      .hero > *:nth-child(1) {
        animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
      }

      .hero > *:nth-child(2) {
        animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
      }

      .hero > *:nth-child(3) {
        animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.44s both;
      }

      .button,
      .pill {
        transition:
          transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
          box-shadow 0.22s ease,
          background 0.22s ease;
      }

      .marquee {
        overflow: hidden;
        flex-wrap: nowrap;
      }

      .marquee-inner {
        display: flex;
        gap: 8px;
        width: max-content;
        animation: marqueeScroll 22s linear infinite;
      }

      @keyframes marqueeScroll {
        from { transform: translateX(0); }
        to { transform: translateX(-50%); }
      }

      .marquee-inner span {
        white-space: nowrap;
        flex-shrink: 0;
      }

      .cursor-glow {
        position: fixed;
        width: 340px;
        height: 340px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(185, 152, 80, 0.12) 0%, transparent 70%);
        pointer-events: none;
        z-index: 0;
        transform: translate(-50%, -50%);
        transition: opacity 0.4s ease;
      }

      @media (prefers-reduced-motion: reduce) {
        h1,
        h2,
        .hero-photo,
        .hero-photo::before,
        .hero-photo::after,
        .about-photo,
        .studio-photo,
        .about-photo::after,
        .studio-photo::after,
        .showreel img,
        .play,
        .craft img,
        .trophy,
        .hire-intro,
        .hire-intro::after,
        .reason,
        .reason::before,
        .hire-close,
        .reveal,
        .reveal-scale,
        .section,
        .hero > *,
        .hero:hover h1,
        .section:hover > h2,
        .section:hover .section-head h2,
        .studio:hover h2,
        .contact:hover h2 {
          transition: none;
          animation: none;
          transform: none;
          opacity: 1;
        }
      }