/* ══════════════════════════════════════════════════════════════
         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) {
        :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: 4em;
        align-items: start;
      }
      .work-hero-left {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
      }
      .work-clipboard-img {
        width: 100%;
        max-width: 156px;
        height: auto;
      }
      .work-hero-right {
        display: flex;
      }
      .work-hero-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 28px;
        width: 100%;
      }
      .work-hero-item {
        display: flex;
        align-items: center;
        gap: 24px;
      }
      .work-hero-check {
        flex: none;
        width: 48px;
        height: 51px;
        object-fit: contain;
      }
      .work-hero-tagline {
        font-family: Comedik, Arial, sans-serif;
        font-size: 40px;
        line-height: 1.08;
        color: #FF6316;
        margin: 0;
        text-transform: uppercase;
      }
      .work-hero-subtext {
        font-family: Comedik, Arial, sans-serif;
        font-size: 40px;
        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: 760px;
        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: cover;
        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: rgba(0,0,0,0.4);
        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: 56px;
        height: 56px;
        border-radius: 50%;
        background: #2E7060;
        border: 2px solid #FF8FA3;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.2s var(--animation-fast);
      }
      .work-carousel-arrow:hover { transform: 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 {
        font-family: Comedik, Arial, sans-serif;
        font-size: 26px;
        color: #E2F533;
        margin: 0;
        line-height: 1.2;
      }

      /* ── 4. ARE WE WHAT YOU NEED? ───────────────────────────────── */
      .work-need-section {
        position: relative;
        padding: 6em 0 4em;
        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;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        z-index: 1;
        pointer-events: none;
      }
      .work-need-right-img {
        width: 260px;
        height: auto;
        display: block;
      }

      /* ── 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;
      }
      .work-checklist-camera-icon {
        width: 224px;
        height: auto;
        flex: none;
      }

      /* 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: 35px;
        line-height: 1.2;
        color: #FCFFDB;
        padding-left: 28px;
        position: relative;
      }
      .work-policy-bullets li::before {
        content: "•";
        position: absolute;
        left: 0;
        color: #FF6316;
      }

      /* 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 {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        background: #EEE0C6;
        border-radius: 60px;
        padding: 14px 28px 14px 14px;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: transform 0.25s var(--animation-fast), box-shadow 0.25s var(--animation-fast);
        white-space: nowrap;
      }
      .work-cta-btn span {
        font-family: Comedik, Arial, sans-serif;
        font-size: 22px;
        color: #552200;
        text-transform: uppercase;
      }
      .work-cta-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 28px rgba(0,0,0,0.35);
      }

      /* ── 7. FAQ ──────────────────────────────────────────────────── */
      .work-faq-section { padding: 0 0 8em; }
      .work-faq-inner {
        position: relative;
        max-width: 980px;
        margin: 0 auto;
      }
      .work-faq-bg {
        width: 100%;
        height: auto;
        display: block;
        opacity: 0.85;
      }
      .work-faq-content {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 4em 5em;
        text-align: center;
        gap: 1em;
      }
      .work-faq-label {
        font-family: Comedik, Arial, sans-serif;
        font-size: 30px;
        color: #141D11;
        margin: 0;
        text-transform: uppercase;
        font-weight: 400;
      }
      .work-faq-q-row {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 16px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        width: 100%;
        text-align: center;
      }
      .work-faq-q {
        font-family: Comedik, Arial, sans-serif;
        font-size: 22px;
        line-height: 1.4;
        color: #FF6316;
        margin: 0;
        font-weight: 400;
      }
      .work-faq-toggle-icon {
        flex: none;
        margin-top: 4px;
      }
      .work-faq-a {
        font-family: Comedik, Arial, sans-serif;
        font-size: 18px;
        line-height: 1.45;
        color: #292929;
        margin: 0;
        font-weight: 400;
      }

      /* ── RESPONSIVE ──────────────────────────────────────────────── */
      @media screen and (max-width: 1200px) {
        .work-carousel { --slide-slot: 480px; }
        .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 { flex-direction: column; align-items: flex-start; gap: 1.5em; }
        .work-carousel-meta { position: static; text-align: left; }
        .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-right-img { width: 180px; }
        .work-need-right { top: 50%; 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: 100px; }
        .work-policy-bullets li { font-size: 30px; }
      }

      @media screen and (max-width: 767px) {
        .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-hero-tagline { font-size: 24px; }
        .work-hero-subtext { font-size: 24px; }
        .work-hero-check { width: 30px; height: 32px; }
        .work-clipboard-img { max-width: 84px; }
        .work-hero-grid { align-items: flex-start; gap: 2em; }
        .work-need-title { font-size: 60px; }
        .work-need-title-mic { width: 50px; }
        .work-need-right-img { width: 120px; }
        .work-need-subtext { max-width: 100%; }
        .work-need-right { top: 50%; right: 0; }
        .work-highlight-txt { font-size: 55px; }
        .work-highlight-punct-img { width: 36px; }
        .work-checklist-camera-icon { width: 70px; }
        .work-list-item span { font-size: 22px; }
        .work-list-icon { width: 36px; height: 39px; }
        .work-carousel-quote { font-size: 20px; }
        .work-client-logo { font-size: 20px; }
        .work-policy-bullets li { font-size: 22px; }
        .work-faq-content { padding: 2.5em 1.5em; }
        .work-faq-q, .work-faq-a { font-size: 15px; }
        .work-faq-label { font-size: 18px; }
        .work-cta-btn span { font-size: 18px; }
      }