/* =====================================================
           WORK PAGE
        ====================================================== */

      .work-page {
        padding-top: 80px;
      }

      /* =====================================================
           WORK HERO
        ====================================================== */

      .work-hero {
        padding: 72px 16px 48px;
        background: var(--paper);
      }

      .work-hero-inner {
        max-width: 1140px;
        margin: 0 auto;
      }

      .work-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;

        margin-bottom: 16px;
        padding: 7px 12px;

        border-radius: 999px;

        background: rgba(211, 47, 47, 0.08);
        color: var(--red);

        font-size: 11px;
        font-weight: 700;

        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .work-kicker::before {
        content: "";
        width: 7px;
        height: 7px;

        border-radius: 50%;

        background: var(--red);
      }

      .work-hero h1 {
        max-width: 760px;

        margin: 0;

        font-family: var(--font-display);
        font-size: clamp(38px, 6vw, 64px);
        line-height: 1.05;

        letter-spacing: -0.035em;

        color: var(--ink);
      }

      .work-hero h1 .accent {
        color: var(--red);
      }

      .work-intro {
        max-width: 720px;

        margin: 20px 0 0;

        color: var(--ink-soft);

        font-size: 17px;
        line-height: 1.7;
      }

      /* =====================================================
           WORK TRUST STRIP
        ====================================================== */

      .work-trust {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        margin-top: 28px;
      }

      .work-trust span {
        display: inline-flex;
        align-items: center;
        gap: 6px;

        padding: 8px 11px;

        border: 1px solid var(--rule);
        border-radius: 999px;

        background: #ffffff;

        color: var(--ink-soft);

        font-size: 11px;
        font-weight: 600;
      }

      .work-trust .material-symbols-outlined {
        font-size: 15px;
        color: var(--red);
      }

      /* =====================================================
           FILTER AREA
        ====================================================== */

      .work-content {
        max-width: 1140px;

        margin: 0 auto;
        padding: 0 16px 70px;
      }

      .work-toolbar {
        display: flex;
        flex-direction: column;
        gap: 16px;

        margin-bottom: 28px;
      }

      .work-section-heading {
        margin: 0;

        font-family: var(--font-display);
        font-size: 24px;
        line-height: 1.2;

        color: var(--ink);
      }

      .work-section-desc {
        margin: 7px 0 0;

        color: var(--ink-soft);

        font-size: 14px;
        line-height: 1.6;
      }

      .work-filters {
        display: flex;
        gap: 8px;

        overflow-x: auto;

        padding: 4px 0 8px;

        scrollbar-width: none;
      }

      .work-filters::-webkit-scrollbar {
        display: none;
      }

      .work-filter {
        flex-shrink: 0;

        display: inline-flex;
        align-items: center;
        gap: 7px;

        padding: 9px 14px;

        border: 1px solid var(--rule);
        border-radius: 999px;

        background: #ffffff;

        color: var(--ink-soft);

        font-family: var(--font-body);
        font-size: 12px;
        font-weight: 600;

        cursor: pointer;

        transition:
          background 0.2s ease,
          color 0.2s ease,
          border-color 0.2s ease,
          transform 0.2s ease;
      }

      .work-filter:hover {
        border-color: rgba(211, 47, 47, 0.35);
        color: var(--red);
        transform: translateY(-1px);
      }

      .work-filter.active {
        border-color: var(--red);

        background: var(--red);
        color: #ffffff;
      }

      .work-filter .material-symbols-outlined {
        font-size: 16px;
      }

      /* =====================================================
           PROJECT GRID
        ====================================================== */

      .project-grid {
        display: grid;
        grid-template-columns: 1fr;

        gap: 22px;
      }

      /* =====================================================
           PROJECT CARD
        ====================================================== */

      .project-card {
        display: flex;
        flex-direction: column;

        overflow: hidden;

        border: 1px solid var(--rule);
        border-radius: 14px;

        background: #ffffff;

        box-shadow: 0 8px 24px rgba(28, 18, 17, 0.05);

        transition:
          transform 0.25s ease,
          box-shadow 0.25s ease,
          border-color 0.25s ease;
      }

      .project-card:hover {
        transform: translateY(-4px);

        border-color: rgba(211, 47, 47, 0.25);

        box-shadow: 0 18px 38px rgba(28, 18, 17, 0.1);
      }

      /* =====================================================
           PROJECT VISUAL
        ====================================================== */

      .project-visual {
        position: relative;

        min-height: 230px;

        display: flex;
        align-items: center;
        justify-content: center;

        overflow: hidden;

        background: linear-gradient(
          135deg,
          #271816 0%,
          #3e2c2a 55%,
          #af101a 100%
        );
      }

      .project-visual::after {
        content: "";

        position: absolute;
        inset: 0;

        background: linear-gradient(
          135deg,
          transparent 0%,
          rgba(255, 255, 255, 0.04) 50%,
          transparent 100%
        );
      }

      .project-visual-content {
        position: relative;
        z-index: 1;

        width: 82%;
        padding: 24px;

        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;

        background: rgba(255, 255, 255, 0.06);

        backdrop-filter: blur(10px);

        color: #ffffff;
      }

      .project-visual-icon {
        width: 42px;
        height: 42px;

        display: flex;
        align-items: center;
        justify-content: center;

        margin-bottom: 18px;

        border-radius: 10px;

        background: rgba(255, 255, 255, 0.1);
      }

      .project-visual-icon .material-symbols-outlined {
        font-size: 22px;
      }

      .project-visual-label {
        display: block;

        margin-bottom: 6px;

        color: rgba(255, 255, 255, 0.65);

        font-size: 10px;
        font-weight: 700;

        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .project-visual-title {
        margin: 0;

        font-family: var(--font-display);
        font-size: 21px;
        line-height: 1.2;
      }

      .project-status {
        position: absolute;
        top: 16px;
        right: 16px;
        z-index: 2;

        padding: 6px 10px;

        border-radius: 999px;

        background: rgba(255, 255, 255, 0.1);

        color: #ffffff;

        font-size: 10px;
        font-weight: 700;

        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      /* =====================================================
           PROJECT BODY
        ====================================================== */

      .project-body {
        display: flex;
        flex-direction: column;

        padding: 22px;
      }

      .project-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        margin-bottom: 12px;
      }

      .project-meta span {
        padding: 5px 8px;

        border-radius: 5px;

        background: var(--paper);

        color: var(--ink-soft);

        font-size: 10px;
        font-weight: 700;

        letter-spacing: 0.04em;
        text-transform: uppercase;
      }

      .project-body h3 {
        margin: 0;

        font-family: var(--font-display);
        font-size: 23px;
        line-height: 1.2;

        color: var(--ink);
      }

      .project-summary {
        margin: 12px 0 20px;

        color: var(--ink-soft);

        font-size: 14px;
        line-height: 1.7;
      }

      /* =====================================================
           PROJECT DETAILS
        ====================================================== */

      .project-details {
        display: grid;
        grid-template-columns: 1fr;

        gap: 14px;

        margin-bottom: 20px;
      }

      .project-detail {
        padding: 13px;

        border-radius: 9px;

        background: var(--paper);
      }

      .project-detail-label {
        display: block;

        margin-bottom: 5px;

        color: var(--ink-soft);

        font-size: 9px;
        font-weight: 700;

        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .project-detail p {
        margin: 0;

        color: var(--ink);

        font-size: 12px;
        line-height: 1.55;
      }

      /* =====================================================
           PROJECT SERVICES
        ====================================================== */

      .project-services {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;

        padding-top: 2px;
      }

      .project-services span {
        padding: 6px 9px;

        border: 1px solid var(--rule);
        border-radius: 5px;

        color: var(--ink-soft);

        font-size: 10px;
        font-weight: 600;
      }

      /* =====================================================
           PROJECT FOOTER
        ====================================================== */

      .project-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;

        margin-top: 20px;
        padding-top: 16px;

        border-top: 1px solid var(--rule);
      }

      .project-timeline {
        display: inline-flex;
        align-items: center;
        gap: 5px;

        color: var(--ink-soft);

        font-size: 11px;
        font-weight: 600;
      }

      .project-timeline .material-symbols-outlined {
        font-size: 15px;
        color: var(--red);
      }

      .project-link {
        display: inline-flex;
        align-items: center;
        gap: 4px;

        color: var(--red);

        font-size: 12px;
        font-weight: 700;

        text-decoration: none;
      }

      .project-link:hover {
        color: #b71c1c;
      }

      .project-link .material-symbols-outlined {
        font-size: 16px;

        transition: transform 0.2s ease;
      }

      .project-link:hover .material-symbols-outlined {
        transform: translateX(3px);
      }

      /* =====================================================
           REAL DATA NOTICE
        ====================================================== */

      .work-data-note {
        margin-top: 28px;
        padding: 16px 18px;

        border-left: 3px solid var(--red);

        background: rgba(211, 47, 47, 0.05);
      }

      .work-data-note strong {
        display: block;

        margin-bottom: 5px;

        color: var(--ink);

        font-size: 12px;
      }

      .work-data-note p {
        margin: 0;

        color: var(--ink-soft);

        font-size: 11px;
        line-height: 1.6;
      }

      /* =====================================================
           CTA
        ====================================================== */

      .work-cta {
        max-width: 1140px;

        margin: 0 auto 70px;
        padding: 0 16px;
      }

      .work-cta-inner {
        padding: 38px 26px;

        border-radius: 14px;

        background: var(--ink);

        color: #ffffff;

        text-align: center;
      }

      .work-cta-icon {
        width: 44px;
        height: 44px;

        display: flex;
        align-items: center;
        justify-content: center;

        margin: 0 auto 16px;

        border-radius: 10px;

        background: rgba(211, 47, 47, 0.18);

        color: #ffb3ac;
      }

      .work-cta h2 {
        max-width: 650px;

        margin: 0 auto;

        font-family: var(--font-display);
        font-size: clamp(27px, 5vw, 40px);
        line-height: 1.15;
      }

      .work-cta p {
        max-width: 600px;

        margin: 13px auto 22px;

        color: rgba(255, 255, 255, 0.68);

        font-size: 14px;
        line-height: 1.65;
      }

      .work-cta .btn {
        display: inline-flex;
      }

      /* =====================================================
           DESKTOP
        ====================================================== */

      @media (min-width: 768px) {
        .work-page {
          padding-top: 80px;
        }

        .work-hero {
          padding: 92px 32px 58px;
        }

        .work-content {
          padding: 0 32px 80px;
        }

        .work-toolbar {
          flex-direction: row;
          align-items: flex-end;
          justify-content: space-between;
        }

        .work-filters {
          justify-content: flex-end;
        }

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

        .project-details {
          grid-template-columns: repeat(2, 1fr);
        }

        .work-cta {
          padding: 0 32px;
        }

        .work-cta-inner {
          padding: 55px 40px;
        }
      }

      @media (min-width: 1024px) {
        .work-hero {
          padding-top: 105px;
        }

        .project-visual {
          min-height: 250px;
        }
      }

      /* =====================================================
           ACCESSIBILITY
        ====================================================== */

      @media (prefers-reduced-motion: reduce) {
        .project-card,
        .work-filter,
        .project-link .material-symbols-outlined {
          transition: none;
        }
      }