/* ══════════════════════════════════════════════════════════════
         WORK PAGE — matching Figma node 88:152 + work.pdf design
         ══════════════════════════════════════════════════════════════ */

      :root {
        --animation-fade: 0.1s linear;
        --animation-fast: 0.35s cubic-bezier(0.62, 0.05, 0.01, 0.99);
        --animation-primary: 0.735s cubic-bezier(0.62, 0.05, 0.01, 0.99);
        --size-unit: 16;
        --size-container-ideal: 1920;
        --size-container-min: 992px;
        --size-container-max: 2160px;
        --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
        --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
      }
      @media screen and (max-width: 991px) {
        .work-faq-typewriter { max-width: 600px; height: 550px; }
        .typewriter-paper { width: 290px; height: 290px; padding: 1.8em; }
        .paper-q { font-size: 16px; }
        .paper-a { font-size: 12px; }
        .typewriter-key.normal-key { width: 4.3%; }
        .typewriter-key.arrow-key { width: 9.4%; }
        
        
        .typewriter-faq-tag { font-size: 16px; }
        .faq-sparked-curiosity { top: -5%; left: 0; }
        .sparked-curiosity-arrow { width: 90px; }
        .sparked-curiosity-text { font-size: 18px; }
        :root {
          --size-container-ideal: 1384;
          --size-container-min: 768px;
          --size-container-max: 991px;
        }
      }
      @media screen and (max-width: 767px) {
        :root {
          --size-container-ideal: 377;
          --size-container-min: 320px;
          --size-container-max: 767px;
          --container-left-padding: 0em;
          --container-right-padding: 0em;
        }
      }

      /* Tighter side padding on the Work page's own sections only —
         scoped here (not :root) so it doesn't affect the shared Footer/Navbar .container. */
      [class^="work-"],
      [class*=" work-"] {
        --container-padding: 5em;
      }
      @media screen and (max-width: 991px) {
        [class^="work-"],
        [class*=" work-"] {
          --container-padding: 2.5em;
        }
      }
      @media screen and (max-width: 767px) {
        [class^="work-"],
        [class*=" work-"] {
          --container-padding: 1.25em;
        }
      }

      /* ── SHARED ANIMATION PRIMITIVES (ported from index-inline.css) ── */

      /* Sprite hover (icon frame-swap) */
      @keyframes sprite {
        to { transform: translateX(-100%); }
      }
      [data-hover-sprite]:hover .filled-arrow__svg,
      [data-hover-sprite]:hover .work-play-icon,
      [data-always-sprite] .sprite-element__svg {
        animation: sprite 0.45s steps(3, end) infinite;
      }

      /* Wiggle on hover */
      [data-hover-wiggle]:hover [data-wiggle-target],
      [data-always-wiggle] [data-wiggle-target] {
        animation: wiggle 0.3s steps(2, end) infinite;
      }
      @keyframes wiggle {
        from { transform: rotate(-1.25deg); }
        to   { transform: rotate(1.25deg); }
      }
      [data-hover-wiggle="2"]:hover [data-wiggle-target],
      [data-always-wiggle="2"] [data-wiggle-target] {
        animation: wiggle2 0.3s steps(2, end) infinite;
      }
      @keyframes wiggle2 {
        from { transform: rotate(1.25deg); }
        to   { transform: rotate(-0.5deg); }
      }
      [data-hover-wiggle="3"]:hover [data-wiggle-target],
      [data-always-wiggle="3"] [data-wiggle-target] {
        animation: wiggle3 0.3s steps(2, end) infinite;
      }
      @keyframes wiggle3 {
        from { transform: rotate(2deg); }
        to   { transform: rotate(-4deg); }
      }
      [data-hover-wiggle="4"]:hover [data-wiggle-target],
      [data-always-wiggle="4"] [data-wiggle-target] {
        animation: wiggle4 0.3s steps(2, end) infinite;
      }
      @keyframes wiggle4 {
        from { transform: rotate(0.75deg); }
        to   { transform: rotate(-0.75deg); }
      }

      /* Draw-line / draw-arrow reveal targets need overflow hidden on the wrapper */
      [data-draw-line] { display: inline-block; }
      [data-draw-arrow] { display: block; }

      /* Accordion (FAQ) */
      [data-accordion-status] .work-faq-a-wrap {
        display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;
        transition: grid-template-rows var(--animation-primary);
      }
      [data-accordion-status="active"] .work-faq-a-wrap {
        grid-template-rows: 1fr;
      }
      [data-accordion-status] .work-faq-a-inner {
        min-height: 0;
        padding-top: 1em;
      }
      [data-accordion-status] .work-faq-toggle-icon {
        transition: transform var(--animation-fast);
        transform: rotate(0deg);
      }
      [data-accordion-status="active"] .work-faq-toggle-icon {
        transform: rotate(45deg);
      }

      /* ── 1. TOP HEADER ───────────────────────────────────────────── */
      .work-top-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 7em 4em 1.5em 4em;
      }
      .work-stamp-group {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        transform: rotate(-6deg);
      }
      .work-stamp-icon { width: 52px; height: 40px; object-fit: contain; }
      .work-stamp-text {
        font-family: Comedik, Arial, sans-serif;
        font-size: 40px;
        line-height: 0.81;
        color: #748370;
        text-transform: uppercase;
      }

      /* ── 2. HERO / TAGLINES ───────────────────────────────────────── */
      .work-hero-section {
        padding: 2em 0 5em;
      }
      .work-hero-grid {
        display: grid;
        grid-template-columns: 0.7fr 1.3fr;
        gap: 0em;
        align-items: start;
      }
      .work-hero-left {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
      }
      .work-clipboard-img {
        width: 100%;
        max-width: 203px;
        height: auto;
      }
      .work-hero-right {
        display: flex;
      }
      .work-hero-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 24px !important;
        width: 100%;
      }
      .work-hero-item {
        display: flex;
        align-items: center;
        gap: 20px !important;
      }
      .work-hero-check {
        flex: none;
        width: 40px !important;
        height: 43px !important;
        object-fit: contain;
      }
      .work-hero-tagline {
        font-family: Comedik, Arial, sans-serif;
        font-size: 34px !important;
        line-height: 1.08;
        color: #FF6316;
        margin: 0;
        text-transform: uppercase;
      }
      .work-hero-subtext {
        font-family: Comedik, Arial, sans-serif;
        font-size: 34px !important;
        line-height: 1.08;
        color: #FF6316;
        margin: 0;
        text-transform: uppercase;
      }

      /* ── 3. PORTFOLIO SHOWCASE CAROUSEL ───────────────────────────── */
      .work-portfolio-section {
        padding: 5em 0 6em;
        overflow: hidden;
      }
      .work-carousel {
        --slide-slot: 880px;
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        padding: 2em 0 0;
      }
      .work-carousel-viewport {
        position: relative;
        overflow: visible;
        height: calc(var(--slide-slot) * 9 / 16 * 1.1 + 80px);
      }
      .work-carousel-track {
        position: absolute;
        top: 0;
        left: 50%;
        display: flex;
        align-items: center;
        height: 100%;
        transition: transform var(--animation-primary);
        will-change: transform;
      }
      .work-carousel-track.is-jumping {
        transition: none;
      }

      .work-port-img-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        aspect-ratio: 16 / 9;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 20px;
        overflow: hidden;
      }
 
      /* Each slot in the track: fixed width, tilt/scale/fade based on distance from center */
      .work-carousel-slot {
        position: relative;
        flex: 0 0 var(--slide-slot);
        width: var(--slide-slot);
        padding: 0 20px;
        box-sizing: border-box;
        opacity: 0.55;
        filter: blur(0.5px);
        transform: scale(0.78) rotate(3deg);
        transition: transform var(--animation-primary), opacity var(--animation-primary), filter var(--animation-primary);
      }
      .work-carousel-slot:nth-child(odd) { transform: scale(0.78) rotate(-3deg); }
      .work-carousel-slot.is-active {
        opacity: 1;
        filter: none;
        z-index: 2;
        cursor: pointer;
        transform: scale(1.1) rotate(-4deg);
      }
      .work-carousel-slot.is-active:hover {
        transform: scale(1.1) rotate(-4deg) translateY(-8px);
      }
      .work-port-overlay {
        position: absolute;
        inset: 0;
        background: none;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s;
      }
      .work-carousel-slot.is-active:hover .work-port-overlay { opacity: 1; }
      .work-port-play-badge {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #1B1B1B;
        font-family: Comedik, Arial, sans-serif;
        font-size: 24px;
        text-transform: uppercase;
        background: #E2F533;
        border-radius: 999px;
        padding: 10px 24px 10px 16px;
      }
      .work-play-icon {
        width: 28px;
        height: 28px;
        flex: none;
      }
      .work-play-icon path { fill: #1B1B1B; }
 
      /* Nav + meta row below the stage */
      .work-carousel-footer {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        margin-top: 2.5em;
      }
      .work-carousel-nav {
        display: flex;
        justify-content: center;
        gap: 20px;
      }
      .work-carousel-arrow {
        width: 84px;
        height: 84px;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        display: inline-block;
        transition: transform 0.2s var(--animation-fast);
      }
      .work-carousel-arrow .filled-arrow {
        width: 100%;
        height: 100%;
        --filled-arrow-size: 84px;
        position: relative;
        overflow: hidden;
      }
      .work-carousel-arrow:hover { transform: scale(1.08); }
      .work-carousel-arrow.is--flipped { transform: scaleX(-1); }
      .work-carousel-arrow.is--flipped:hover { transform: scaleX(-1) scale(1.08); }
      .work-carousel-arrow:disabled { opacity: 0.5; cursor: default; }
      .work-carousel-arrow:disabled:hover { transform: none; }
 
      /* Client logo + quote */
      @keyframes work-meta-in {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
      }
      .work-carousel-meta {
        position: absolute;
        right: 0;
        top: 0;
        width: 320px;
        text-align: left;
        animation: work-meta-in var(--animation-primary) forwards;
      }
      .work-client-logo {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1;
        margin: 0 0 20px;
        font-family: Arial, sans-serif;
        font-weight: 800;
        font-size: 26px;
        text-transform: capitalize;
      }
      .work-client-logo-top { color: #9AA39A; }
      .work-client-logo-bottom { color: #E8394A; }
      .work-carousel-quote-wrap {
        position: relative;
        display: inline-block;
        max-width: 360px;
      }
      .work-carousel-quote {
        font-family: Comedik, Arial, sans-serif;
        font-size: 26px;
        color: #E2F533;
        margin: 0;
        line-height: 1.2;
        display: inline-block;
        max-width: 360px;
        transform: rotate(-2.5deg);
        transform-origin: left center;
      }
      .work-quote-underline {
        display: block !important;
        width: 170px !important;
        height: auto !important;
        margin-top: 6px !important;
        margin-left: 20px !important;
        transform: rotate(-2.5deg) !important;
        transform-origin: left center !important;
        opacity: 1 !important;
        visibility: visible !important;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        animation: draw-underline 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
      }
      @keyframes draw-underline {
        from {
          clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
        }
        to {
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }
      }
      .work-client-logo {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        line-height: 1;
        margin: 0 0 20px;
        font-family: Arial, sans-serif;
        font-weight: 800;
        font-size: 26px;
        text-transform: capitalize;
      }
      .work-client-logo-top { color: #9AA39A; }
      .work-client-logo-bottom { color: #E8394A; }

      /* ── 4. ARE WE WHAT YOU NEED? ───────────────────────────────── */
      .work-need-section {
        position: relative;
        padding: 6em 0 9em;
        overflow: hidden;
      }
      .work-need-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 5em;
        align-items: center;
      }
      .work-need-left {
        display: flex;
        flex-direction: column;
        gap: 2.5em;
        max-width: 900px;
      }
      .work-need-intro {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .work-need-intro-line {
        font-family: Comedik, Arial, sans-serif;
        font-size: 30px;
        color: #FF6316;
        line-height: 1.2;
        margin: 0;
      }
      .work-need-intro-highlight {
        color: #E2F533;
      }
      .work-need-title-row {
        display: flex;
        align-items: center;
        gap: 24px;
      }
      .work-need-title {
        font-family: 'Schabo Condensed', Arial, sans-serif;
        font-size: 115px;
        font-weight: 400;
        text-transform: uppercase;
        color: #FCFFDB;
        margin: 0;
        line-height: 1;
      }
      .work-need-title-mic {
        width: 90px;
        height: auto;
        flex: none;
      }
      .work-need-subtext {
        font-family: 'Object Sans', Arial, sans-serif;
        font-size: 22px;
        line-height: 1.4;
        color: #F7FFB0;
        text-transform: capitalize;
        
        text-align: start;
        max-width: 557px;
        margin: 0 101px 0 auto;
      }
      .work-need-right {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
      }
      .work-need-clapper {
        position: absolute;
        top: 2.5em;
        right: -60px;
        width: 224px;
        height: 224px;
        display: block;
      }
      @keyframes reporter-mic-wiggle {
        0%, 100% {
          transform: translateY(0) rotate(0deg);
        }
        20% {
          transform: translateY(-14px) rotate(-1.5deg);
        }
        40% {
          transform: translateY(-4px) rotate(1deg);
        }
        60% {
          transform: translateY(-16px) rotate(-1deg);
        }
        80% {
          transform: translateY(-6px) rotate(1.5deg);
        }
      }
      .work-need-hand-mic {
        position: absolute;
        bottom: 1.5em;
        right: 0;
        width: 270px;
        height: auto;
        display: block;
        transform-origin: bottom right;
        animation: reporter-mic-wiggle 5s ease-in-out infinite;
      }

      /* ── 5. AGENCY CHECKLIST ─────────────────────────────────────── */
      .work-checklist-section {
        padding: 4em 0;
      }

      /* Row 1: Title + camera icon */
      .work-checklist-row {
        display: flex;
        align-items: center;
        gap: 2em;
        margin-bottom: 2em;
      }
      .work-checklist-title-block {
        display: flex;
        flex-direction: column;
      }
      .work-checklist-camera-col {
        flex: 1;
        display: flex;
        justify-content: center;
      }
      .work-checklist-title {
        font-family: Comedik, Arial, sans-serif;
        font-size: 40px;
        color: #fff;
        margin: 0 0 20px;
        font-weight: 400;
      }
      .work-highlight-txt {
        font-family: 'Schabo Condensed', Arial, sans-serif;
        font-size: 120px;
        text-transform: uppercase;
        color: #fff;
        line-height: 0.9;
        margin: 0;
        display: flex;
        align-items: baseline;
        gap: 12px;
      }
      .work-highlight-punct-img {
        width: 100px;
        height: auto;
        align-self: center;
      }
      @keyframes camera-float-tilt {
        0%, 100% {
          transform: translateY(0) rotate(0deg);
        }
        25% {
          transform: translateY(-8px) rotate(-1.5deg);
        }
        50% {
          transform: translateY(2px) rotate(1deg);
        }
        75% {
          transform: translateY(-6px) rotate(-1deg);
        }
      }
      .work-checklist-camera-icon {
        width: 291px;
        height: auto;
        flex: none;
        animation: camera-float-tilt 6s ease-in-out infinite;
      }

      /* Row 2: Full-width policy bullets */
      .work-policy-bullets {
        list-style: none;
        padding: 0;
        margin: 4.5em 0 4.5em;
        display: flex;
        flex-direction: column;
        gap: 5px;
      }
      .work-policy-bullets li {
        font-family: Comedik, Arial, sans-serif;
        font-size: 46px;
        line-height: 1.2;
        color: #fff;
        padding-left: 36px;
        position: relative;
      }
      .work-policy-bullets li::before {
        content: "•";
        position: absolute;
        left: 0;
        color: #fff;
        font-size: 1.2em;
        line-height: 1;
        top: -0.05em;
      }

      /* Row 3: Checklist list + callout text */
      .work-checklist-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5em;
        align-items: stretch;
      }

      /* Left List col */
      .work-list-col {
        display: flex;
        flex-direction: column;
        gap: 2em;
      }
      .work-list-intro-label {
        font-family: Comedik, Arial, sans-serif;
        font-size: 30px;
        color: #E2F533;
        margin: 0;
      }
      .work-list-items {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 24px;
      }
      .work-list-item {
        display: flex;
        align-items: center;
        gap: 20px;
      }
      .work-list-icon {
        width: 54px;
        height: 58px;
        object-fit: contain;
      }
      .work-list-item span {
        font-family: Comedik, Arial, sans-serif;
        font-size: 40px;
        color: #FF6316;
        line-height: 1;
      }

      /* Right Callout col: plain text */
      .work-callout-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        height: 100%;
        padding-bottom: 1em;
      }
      .work-callout-desc {
        font-family: Comedik, Arial, sans-serif;
        font-size: 32px;
        color: #E2F533;
        line-height: 1.25;
        max-width: 300px;
        margin: 0;
        text-align: start;
        transform: rotate(-4deg);
      }
      .work-callout-underline {
        width: 260px;
        height: auto;
        margin-top: 0px;
      }

      /* Row 4: Centered CTA */
      .work-cta-row {
        display: flex;
        justify-content: center;
        margin-top: 6em;
      }
      .work-cta-btn {
        position: relative;
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        text-decoration: none !important;
        width: 28em;
        height: var(--btn-height);
        cursor: pointer;
        white-space: nowrap;
        display: inline-block;
        transform: rotate(-1deg) !important;
      }
      .work-cta-btn .btn-text-p {
        font-family: Comedik, Arial, sans-serif;
        font-size: 20px;
        color: #552200 !important;
        text-transform: uppercase;
        margin: 0;
        line-height: 1.1 !important;
        z-index: 2;
        position: relative;
        transform: rotate(-1deg) !important;
      }
      .work-cta-btn:hover {
        transform: rotate(-1deg) !important;
      }

      /* ── 7. FAQ (Typewriter Redesign) ───────────────────────────── */
      .work-faq-section {
        padding: 2em 0 8em;
        background: transparent;
        overflow: hidden;
      }
      .work-faq-wrapper {
        position: relative;
        max-width: 980px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .faq-sparked-curiosity {
        position: absolute;
        top: 2%;
        left: 2%;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 5;
        transform: rotate(-10deg);
      }
      .sparked-curiosity-text {
        font-family: Comedik, Arial, sans-serif;
        font-size: 24px;
        color: #b6ba90;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .sparked-curiosity-arrow {
        width: 140px;
        height: auto;
        margin-top: 8px;
      }
      .work-faq-typewriter {
        position: relative;
        width: 100%;
        max-width: 800px;
        height: 720px;
        margin: 0 auto;
      }
      .typewriter-paper {
        position: absolute;
        top: 0%;
        left: 50%;
        width: 380px;
        height: 380px;
        background: #fefefe;
        border-radius: 12px;
        z-index: 4;
        transform: translateX(-50%);
        padding: 2.5em;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        overflow: hidden;
        animation: paperWobble 6s ease-in-out infinite alternate;
        transform-origin: bottom center;
      }
      .paper-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 1.2em;
        text-align: left;
      }
      .paper-q {
        font-family: Comedik, Arial, sans-serif;
        font-size: 21px;
        line-height: 1.25;
        color: #ff6316;
        margin: 0;
        font-weight: 700;
        text-transform: uppercase;
      }
      .paper-a {
        font-family: Arial, sans-serif;
        font-size: 15px;
        line-height: 1.45;
        color: #2b2d29;
        margin: 0;
        font-weight: 500;
      }
      @keyframes paperWobble {
        0% {
          transform: translateX(-50%) rotate(0.8deg) translateY(0);
        }
        50% {
          transform: translateX(-50%) rotate(-0.8deg) translateY(-2px);
        }
        100% {
          transform: translateX(-50%) rotate(0.8deg) translateY(0);
        }
      }
      .typewriter-body-img {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        display: block;
        z-index: 2;
        pointer-events: none;
      }
      .typewriter-keys-overlay {
        position: absolute;
        bottom: 1%;
        left: 0;
        width: 100%;
        height: 40%;
        z-index: 3;
      }
      .typewriter-key {
        position: absolute;
        cursor: pointer;
        border: none;
        outline: none;
        background: none;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      .typewriter-key img {
        width: 100%;
        height: auto;
        display: block;
      }
      .typewriter-key:hover {
        transform: translateY(-8px);
      }
      .typewriter-key:active {
        transform: translateY(2px) scale(0.96);
      }
      .typewriter-key.normal-key {
        width: 4.8%;
      }
      .typewriter-key.arrow-key {
        width: 9%;
        z-index: 10;
      }
      /* 3-row layout: top full row, middle arrow row, bottom flanking row */
      .typewriter-key.row-1 { top: 26%; }      /* Top full row */
      .typewriter-key.row-2 { top: 37%; }      /* Arrow row — 11% gap from row 1 */
      .typewriter-key.row-3 { top: 48%; }      /* Bottom flanking — 11% gap from row 2 */
      .typewriter-key.arrow-key.row-2 {
        top: 33.7%; /* Shift arrow keys up slightly to align their keycaps vertically with normal keys */
      }

      /* Flip right arrow key horizontally */
      .typewriter-key.arrow-key.next {
        transform: scaleX(-1);
      }
      .typewriter-key.arrow-key.next:hover {
        transform: scaleX(-1) translateY(-8px);
      }
      .typewriter-key.arrow-key.next:active {
        transform: scaleX(-1) translateY(2px) scale(0.96);
      }
      /* Space bar — inside the keyboard overlay, bottom row, animates on hover */
      .typewriter-spacebar {
        position: absolute;
        bottom: 15%;
        left: 50%;
        transform: translateX(-50%);
        width: 50%;
        background: #e2f533;
        border-radius: 10px 10px 6px 6px;
        z-index: 5;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.3em 1em 0.22em;
        box-shadow: 0 4px 0 0 #a0aa20, 0 6px 16px rgba(0,0,0,0.25);
        cursor: pointer;
        transition: transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      .typewriter-spacebar:hover {
        transform: translateX(-50%) translateY(-8px);
      }
      .typewriter-spacebar:active {
        transform: translateX(-50%) translateY(2px);
      }
      .typewriter-spacebar-text {
        color: #141d11;
        font-family: Comedik, Arial, sans-serif;
        font-size: 17px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        white-space: nowrap;
        line-height: 1.2;
        pointer-events: none;
      }

      /* ── RESPONSIVE ──────────────────────────────────────────────── */
      @media screen and (max-width: 1200px) {
        .work-portfolio-section {
          padding-top: 0 !important;
          padding-bottom: 0 !important;
        }
        .work-carousel { --slide-slot: 480px; }
        .work-carousel-viewport {
          height: calc(var(--slide-slot) * 9 / 16 + 10px) !important;
        }
        .work-carousel-slot { opacity: 0; pointer-events: none; }
        .work-carousel-slot.is-active { opacity: 1; pointer-events: auto; transform: scale(1) rotate(0deg); }
        .work-carousel-slot.is-active:hover { transform: translateY(-8px); }
        .work-carousel-footer {
          margin-top: 0.5em !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: stretch !important;
          gap: 1.5em !important;
        }
        .work-carousel-meta {
          order: 1 !important;
          position: static !important;
          text-align: left !important;
          width: 100% !important;
        }
        .work-carousel-nav {
          order: 2 !important;
          display: flex !important;
          justify-content: center !important;
          align-items: center !important;
          width: 100% !important;
        }
        .work-carousel-arrow {
          width: 56px !important;
          height: 56px !important;
        }
        .work-carousel-arrow .filled-arrow {
          --filled-arrow-size: 56px !important;
        }
        .work-hero-grid { grid-template-columns: 1fr; gap: 3em; }
        .work-need-grid { grid-template-columns: 1fr; gap: 3em; }
        .work-checklist-grid { grid-template-columns: 1fr; gap: 3em; }
        .work-checklist-row { flex-direction: column; align-items: flex-start; gap: 1em; }
      }

      @media screen and (max-width: 991px) {
        .work-carousel { --slide-slot: 380px; }
        .work-top-header { padding: 6em 2em 1.5em; }
        .work-hero-tagline { font-size: 32px; }
        .work-hero-subtext { font-size: 32px; }
        .work-hero-check { width: 38px; height: 41px; }
        .work-clipboard-img { max-width: 120px; }
        .work-need-title { font-size: 90px; }
        .work-need-clapper { width: 160px; height: 160px; top: 1.5em; right: -45px; }
        .work-need-hand-mic { width: 180px; bottom: 1em; right: 0; }
        .work-list-item span { font-size: 30px; }
        .work-highlight-txt { font-size: 80px; }
        .work-highlight-punct-img { width: 48px; }
        .work-checklist-camera-icon { width: 130px; }
        .work-policy-bullets li { font-size: 39px; }
        .typewriter-key.normal-key { width: 4.8%; }
        .typewriter-key.arrow-key { width: 9%; }
        .typewriter-key.arrow-key.next { transform: scaleX(-1); }
        .typewriter-key.arrow-key.next:hover { transform: scaleX(-1) translateY(-8px); }
        .typewriter-key.arrow-key.next:active { transform: scaleX(-1) translateY(2px) scale(0.96); }
        .typewriter-keys-overlay { height: 38%; bottom: 1%; }
        .typewriter-spacebar { bottom: 12%; }
      }

      @media screen and (max-width: 767px) {
        .work-hero-section {
          padding-bottom: 0 !important;
        }
        .work-carousel { --slide-slot: calc(100vw - 3em); }
        .work-top-header {
          flex-direction: column;
          align-items: flex-start;
          gap: 1em;
          padding: 5em 1.5em 1em;
        }
        .work-stamp-text { font-size: 28px; }
        .work-hero-list { gap: 10px !important; }
        .work-hero-tagline { font-size: 19px !important; }
        .work-hero-subtext { font-size: 19px !important; }
        .work-hero-check { width: 30px; height: 32px; }
        .work-hero-left { width: 100%; display: flex; justify-content: center; align-items: center; }
        .work-clipboard-img { max-width: 126px !important; margin: 0 auto; display: block; }
        .work-need-section { padding-bottom: 0em !important; }
        .work-need-left { gap: 1em !important; }
        .work-need-intro { max-width: 58%; }
        .work-need-intro-line { font-size: 15px !important; }
        .work-need-title { font-size: 60px; }
        .work-need-title-mic { width: 50px; }
        .work-need-clapper { display: none !important; }
        .work-need-subtext { font-size: 18px !important; max-width: 100%; margin: 0 0 0 70px !important; }
        .work-need-hand-mic { width: 155px; top: 3.8em; bottom: auto; right: -15px; }
        .work-highlight-txt { font-size: 75px; }
        .work-checklist-title { font-size: 27px !important; }
        .work-highlight-punct-img { width: 70px; }
        .work-checklist-camera-col { width: 100%; display: flex; justify-content: center; }
        .work-checklist-camera-icon { width: 215px !important; display: block; margin: 0 auto; }
        .work-list-item span { font-size: 22px; }
        .work-callout-desc { font-size: 22px !important; }
        .work-list-icon { width: 36px; height: 39px; }
        .work-carousel-footer {
          margin-top: 1em !important;
          display: flex !important;
          flex-direction: row !important;
          justify-content: space-between !important;
          align-items: center !important;
          width: 100% !important;
        }
        .work-carousel-nav {
          order: 1 !important;
          display: flex !important;
          justify-content: flex-start !important;
          align-items: center !important;
          width: auto !important;
          gap: 12px !important;
        }
        .work-carousel-arrow {
          width: 52px !important;
          height: 52px !important;
        }
        .work-carousel-arrow .filled-arrow {
          --filled-arrow-size: 52px !important;
        }
        .work-carousel-meta {
          order: 2 !important;
          position: static !important;
          display: flex !important;
          flex-direction: column !important;
          align-items: flex-start !important;
          text-align: start !important;
          width: auto !important;
          max-width: 60% !important;
        }
        .work-client-logo {
          align-items: flex-start !important;
          text-align: start !important;
          margin: 0 0 6px !important;
          font-size: 18px !important;
        }
        .work-carousel-quote {
          font-size: 15px !important;
          text-align: start !important;
          transform-origin: left center !important;
        }
        .work-quote-underline {
          margin-left: 0 !important;
          margin-right: auto !important;
          width: 110px !important;
        }
        .work-policy-bullets {
          margin-top: 1.35em !important;
          margin-bottom: 1.35em !important;
        }
        .work-policy-bullets li { font-size: 29px; }
        .work-faq-typewriter { max-width: 450px; height: 420px; }
        .typewriter-paper { width: 186px; height: 256px; padding: 1.2em; top: 2%; }
        .paper-q { font-size: 13px; gap: 0.5em; }
        .paper-a { font-size: 10px; line-height: 1.35; }
        .typewriter-key.normal-key { width: 4.8%; }
        .typewriter-key.arrow-key { width: 10.5%; }
        .typewriter-key.arrow-key.next { transform: scaleX(-1); }
        .typewriter-key.arrow-key.next:hover { transform: scaleX(-1) translateY(-8px); }
        .typewriter-key.arrow-key.next:active { transform: scaleX(-1) translateY(2px) scale(0.96); }
        .typewriter-keys-overlay { height: 36%; bottom: 1%; }
        .typewriter-spacebar { bottom: 10%; width: 58%; }
        .typewriter-spacebar-text { font-size: 11px; letter-spacing: 0.04em; }
        .faq-sparked-curiosity { display: none; }
        .work-cta-btn span { font-size: 18px; }
        .work-cta-row { margin-top: 0em !important; }
      }