/* flex-direction: column;
    gap: 24px;
    padding: 28px 24px;
    }

    .nf-card {
      padding: 24px;
    }
    } */

    /* ── Red card: BOTH SIDES slanted (parallelogram shape) ── */
    /* Overrides earlier single-side clip-path */
    .nf-card-wrap {
      clip-path: polygon(0% 0%, 100% 0%, 82% 100%, 0% 100%);
    }

    /* ── Red card: true parallelogram — BOTH left and right edges diagonal ── */
    .nf-card-wrap {
      clip-path: polygon(18% 0%, 100% 0%, 82% 100%, 0% 100%);
    }

    /* Widen the card wrapper so clipped parallelogram still looks full */
    .nf-footer {
      grid-template-columns: 400px 1fr;
    }

    /* Prevent the card content from sitting in the clipped-off zones */
    .nf-card {
      padding: 36px 64px 28px 48px;
    }

    /* ══════════════════════════════════════════
   RAPID TACTICAL — PRODUCTS.CSS
   Products page layout, matching Figma
   References: HOME SCREEN LIGHT Figma
══════════════════════════════════════════ */

    /* ────────────────────────────
   PRODUCTS HERO BANNER
   Full-bleed real image, cover fit,
   subtle bottom gradient like Figma
──────────────────────────── */
    .about-card-warpper {
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-50%);
      width: 710px;
      height: 260px;
      background: #9e1613;
      border-radius: 16px;
      padding: 30px 26px 30px 30px;
      display: flex;
      align-items: center;
      gap: 18px;
      z-index: 2;
    }

    .card-text {
      flex: 1;
      min-width: 0;
    }

    .about-card-title {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: 26px;
      color: #fff !important;
      padding: 15px;

    }

    .about-card-desc {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: 16px;
      color: #fff !important;
      line-height: 1.7;
      flex: 1;
      margin-top: 20px;
      padding: 10px;
      color: #fff !important;
    }

    .deploy-bottom {
      /* position: relative;
    height: 713px;
    overflow: hidden;
    isolation: isolate; */
    }

    .soldier-wrapper {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .soldier-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 18%;
    }


    /* ────────────────────────────
   DEPLOYMENT CAPABILITY ROW
   Two-column: left card + right text
──────────────────────────── */
    .about-deploy-section {
      display: flex;
      align-items: stretch;
      gap: 0;
      padding: 64px 64px 48px 64px;
      background: transparent;
    }

    /* Left card: "Rapid Tactical Kits" */
    .about-deploy-left {
      flex: 0 0 500px;
      background: #ffffff;
      border-radius: 14px;
      overflow: hidden;
      padding: 20px 20px 20px 20px;
      display: flex;
      flex-direction: column;
      gap: 0px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
      margin-right: 48px;
      align-self: flex-start;
      height: 320px;
      width: 450px;
    }

    .about-deploy-kit-label {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: var(--content-size);
      color: #0d0d0d;
      letter-spacing: 0.2px;
    }

    .about-deploy-kit-label {
      font-family: Inter;
      font-weight: 800;
      font-style: Extra Bold;
      font-size: var(--heading-size);
      leading-trim: CAP_HEIGHT;
      line-height: 100%;
      letter-spacing: 0px;
      vertical-align: middle;
      text-transform: capitalize;
      color: #fff;
      padding: 120px;
    }

    .about-deploy-kit-img-wrap {
      width: 100%;
      flex: 1;
      overflow: hidden;
      border-radius: 8px;
      background-image: url('../../images/product_kit-type.png');
    }

    .about-deploy-kit-img {
      width: 100%;
      height: 160px;
      object-fit: cover;
      object-position: center center;
      display: block;
      border-radius: 8px;
    }

    .about-deploy-kit-placeholder {
      width: 100%;
      height: 140px;
      border-radius: 10px;
      /* background: linear-gradient(135deg, #e8e0d0 0%, #c8bca4 100%); */
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: var(--content-size);
      color: #666;
      border: 1.5px dashed #b0a090;
      letter-spacing: 0.5px;
      background-image: url("../../images/product_kit-type.png");
    }

    /* Right: text panel */
    .about-deploy-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 560px;
    }

    .about-deploy-heading {
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: var(--heading-size);
      color: #0d0d0d;
      line-height: 1.18;
      letter-spacing: -0.4px;
      margin-bottom: 16px;
      text-shadow: none;
      /* no text shadow needed here */
    }

    .about-deploy-desc {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: 14.5px;
      color: #444;
      line-height: 1.75;
      max-width: 520px;
    }

    /* ────────────────────────────
   PRODUCTS GRID SECTION
──────────────────────────── */
    .about-grid-section {
      padding: 0 64px 64px 64px;
    }

    /* Filter + sort toolbar */
    .about-filter-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;
      margin-bottom: 32px;
      border-top: 1px solid #e8e8e8;
      border-bottom: 1px solid #e8e8e8;
    }

    .about-filter-btn,
    .about-sort-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: transparent;
      border: 1.5px solid #d0d0d0;
      border-radius: 8px;
      padding: 9px 18px;
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      font-weight: 500;
      color: #333;
      cursor: pointer;
      transition: border-color 0.15s ease, background 0.15s ease;
    }

    .about-filter-btn:hover,
    .about-sort-btn:hover {
      border-color: #8b1a1a;
      color: #8b1a1a;
      background: rgba(139, 26, 26, 0.04);
    }

    .about-showing-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      text-align: center;
    }

    .about-showing-title {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: var(--content-size);
      color: #1a1a1a;
    }

    .about-showing-count {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: 12px;
      color: #888;
      letter-spacing: 0.3px;
    }

    /* Product cards 3-column grid */
    .about-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    /* Individual Product Card */
    .about-card {
      position: absolute;
      right: -20px;
      top: 30%;
      width: 903px;
      height: 350px;
      background: #9E1613;
      display: flex;
      align-items: center;
    }

    /* .about-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
} */

    /* Card image wrapper — the placeholder image area */
    .about-card-img-wrap {
      width: 100%;
      height: 560px;
      overflow: hidden;
      position: relative;
    }

    .about-card-img-placeholder {
      width: 100%;
      /* height: 100%; */
      /* background: linear-gradient(145deg, #e8e0d2 0%, #d4c8b6 100%); */
      display: flex;
      /* align-items: center; */
      justify-content: center;
    }

    .about-card-img-placeholder--dark {
      background: linear-gradient(145deg, #3a3530 0%, #2a2520 100%);
    }

    .about-card-img-placeholder--red {
      background: linear-gradient(145deg, #8b1a1a 0%, #6a1212 100%);
    }

    .about-card-placeholder-content {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 24px;
    }

    .about-placeholder-box {
      width: 120px;
      height: 160px;
      border-radius: 12px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 12px 8px;
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: var(--content-size);
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    /* CFAK backpack shape — olive/military green */
    .about-placeholder-cfak {
      background: linear-gradient(160deg, #7a7a50 0%, #5a5a38 60%, #4a4a2a 100%);
      color: rgba(255, 255, 255, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: inset 0 -2px 8px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(0, 0, 0, 0.15);
      position: relative;
    }

    .about-placeholder-cfak::before {
      content: '';
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 50px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.10);
      border: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* IFAK Medium — darker tactical bag */
    .about-placeholder-ifak-m {
      background: linear-gradient(160deg, #4a4a38 0%, #3a3a28 60%, #2a2a18 100%);
      color: rgba(255, 255, 255, 0.80);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: inset 0 -2px 8px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.25);
      width: 100px;
      height: 140px;
      position: relative;
    }

    .about-placeholder-ifak-m::before {
      content: '';
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 32px;
      height: 40px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.10);
    }

    /* IFAK Small — red accent bag */
    .about-placeholder-ifak-s {
      background: linear-gradient(160deg, #c0302a 0%, #8b1a1a 60%, #6a1212 100%);
      color: rgba(255, 255, 255, 0.90);
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: inset 0 -2px 8px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(139, 26, 26, 0.3);
      width: 90px;
      height: 120px;
      position: relative;
    }

    .about-placeholder-ifak-s::before {
      content: '';
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 28px;
      height: 32px;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* Card body — title, description, link */
    .about-card-body {
      padding: 20px 22px 24px 22px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .about-card-title {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: var(--subheading-size);
      color: #0d0d0d;
      letter-spacing: 0.1px;
      line-height: 1.2;
    }

    .about-card-desc {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: var(--content-size);
      color: #555;
      line-height: 1.7;
      flex: 1;
    }

    .about-card-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      font-weight: 600;
      color: #0d0d0d;
      text-decoration: none;
      transition: color 0.15s ease;
      margin-top: 4px;
      width: fit-content;
    }

    .about-card-link:hover {
      color: #8b1a1a;
    }

    /* Featured card subtle top border accent */
    .about-card--featured {
      border-top: 3px solid #8b1a1a;
    }

    .about-card--accent {
      border-top: 3px solid #c0302a;
    }

    /* ────────────────────────────
   MOBILE APP SECTION
   Left: phone placeholder
   Right: description
──────────────────────────── */
    .about-app-section {
      display: flex;
      align-items: center;
      gap: 52px;
      padding: 32px 64px 72px 64px;
    }

    /* Phone placeholder */
    .about-app-img-wrap {
      flex: 0 0 220px;
    }

    .about-app-phone-placeholder {
      width: 160px;
      height: 260px;
      background: #0d0d0d;
      border-radius: 28px;
      border: 8px solid #232323;
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);
      display: flex;
      align-items: stretch;
      overflow: hidden;
      position: relative;
    }

    .about-app-phone-screen {
      flex: 1;
      background: #f2f2f2;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 10px 16px 10px;
      gap: 8px;
      overflow: hidden;
    }

    .about-app-phone-notch {
      width: 48px;
      height: 6px;
      background: #d0d0d0;
      border-radius: 3px;
      margin-bottom: 4px;
      flex-shrink: 0;
    }

    .about-app-phone-content {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: center;
    }

    .about-app-screen-bar {
      width: 100%;
      height: 8px;
      background: #d8d8d8;
      border-radius: 4px;
    }

    .about-app-screen-bar--short {
      width: 65%;
      align-self: flex-start;
    }

    .about-app-screen-bar--medium {
      width: 80%;
      align-self: flex-start;
    }

    .about-app-screen-icon {
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(139, 26, 26, 0.08);
      border-radius: 10px;
      width: 52px;
      height: 52px;
    }

    /* App section body text */
    .about-app-body {
      flex: 1;
      max-width: 480px;
    }

    .about-app-title {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: var(--subheading-size);
      color: #0d0d0d;
      letter-spacing: 0.1px;
      margin-bottom: 12px;
    }

    .about-app-desc {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: var(--content-size);
      color: #555;
      line-height: 1.75;
      margin-bottom: 18px;
    }

    .about-app-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: 'Inter', sans-serif;
      font-size: var(--content-size);
      font-weight: 600;
      color: #0d0d0d;
      text-decoration: none;
      transition: color 0.15s ease;
    }

    .about-app-link:hover {
      color: #8b1a1a;
    }

    /* ────────────────────────────
   BRAND STATEMENT SECTION
   Large centred logo + tagline
   Matches Figma "RAPID TACTICAL"
   wordmark with TM + tagline below
──────────────────────────── */
    .about-brand-section {
      padding: 80px 64px 60px 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .about-brand-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 22px;
    }

    .about-brand-logo-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .about-brand-logo-link {
      display: inline-flex;
      text-decoration: none;
    }

    .about-brand-logo-img {
      width: 480px;
      max-width: 100%;
      height: auto;
      display: block;
    }

    .about-brand-tagline {
      display: none;
      /* tagline is already embedded in the SVG logo */
    }

    /* ────────────────────────────
   DARK MODE OVERRIDES
   Products page sections
──────────────────────────── */

    /* Deploy section */
    body.dark .about-deploy-left {
      background: #1e1e1e;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    }

    body.dark .about-deploy-kit-label {
      color: #f0f0f0;
    }

    body.dark .about-deploy-kit-placeholder {
      background: linear-gradient(135deg, #2a2520 0%, #1e1a14 100%);
      border-color: #4a3a28;
      color: #888;
    }

    body.dark .about-deploy-heading {
      color: #f0f0f0;
    }

    body.dark .about-deploy-desc {
      color: #888;
    }

    /* Filter bar */
    body.dark .about-filter-bar {
      border-color: #2a2a2a;
    }

    body.dark .about-filter-btn,
    body.dark .about-sort-btn {
      border-color: #333;
      color: #ccc;
    }

    body.dark .about-filter-btn:hover,
    body.dark .about-sort-btn:hover {
      border-color: #8b1a1a;
      color: #8b1a1a;
      background: rgba(139, 26, 26, 0.08);
    }

    body.dark .about-showing-title {
      color: #e0e0e0;
    }

    body.dark .about-showing-count {
      color: #666;
    }

    /* Product cards */
    body.dark .about-card {
      background: #1e1e1e;
      border-color: #2a2a2a;
      box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
    }

    body.dark .about-card:hover {
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }

    body.dark .about-card-title {
      color: #f0f0f0;
    }

    body.dark .about-card-desc {
      color: #888;
    }

    body.dark .about-card-link {
      color: #ddd;
    }

    body.dark .about-card-link:hover {
      color: #e03030;
    }

    /* App section */
    body.dark .about-app-phone-placeholder {
      border-color: #1e1e1e;
    }

    body.dark .about-app-phone-screen {
      background: #2a2a2a;
    }

    body.dark .about-app-phone-notch {
      background: #1a1a1a;
    }

    body.dark .about-app-screen-bar {
      background: #3a3a3a;
    }

    body.dark .about-app-title {
      color: #f0f0f0;
    }

    body.dark .about-app-desc {
      color: #888;
    }

    body.dark .about-app-link {
      color: #ddd;
    }

    body.dark .about-app-link:hover {
      color: #e03030;
    }

    /* Brand section */
    body.dark .about-brand-tagline {
      color: #444;
    }

    /* ────────────────────────────
   RESPONSIVE — compact at 768px
──────────────────────────── */
    @media (max-width: 900px) {

      .about-hero {
        height: 340px;
      }

      .about-deploy-section {
        flex-direction: column;
        padding: 40px 32px 32px 32px;
        gap: 28px;
      }

      .about-deploy-left {
        margin-right: 0;
        flex: unset;
        width: 100%;
      }

      .about-grid-section {
        padding: 0 32px 48px 32px;
      }

      .about-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .about-app-section {
        flex-direction: column;
        padding: 32px 32px 48px 32px;
        gap: 32px;
      }

      .about-brand-section {
        padding: 48px 32px 40px 32px;
      }

      .about-brand-logo-img {
        width: 280px;
      }

      .kit-medium-left,
      .kit-medium-right,
      .kit-tiny {
        display: none;
      }
    }

    @media (min-width: 901px) and (max-width: 1100px) {
      .about-cards-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* ══════════════════════════════════════════
   OUR STORY SECTION
   Figma: "CONTACT SCREEN LIGHT" / About page
   – Centred label + large heading + 2 cards
══════════════════════════════════════════ */

    /* ── Section wrapper ── */
    .story-section {
      padding: 80px 80px 88px 80px;
      text-align: center;
      position: relative;
    }

    /* ── "OUR STORY" label row ── */
    .story-label {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      margin-bottom: 28px;
    }

    .story-label-dash {
      width: 24px;
      height: 1.5px;
      background: #8b1a1a;
      flex-shrink: 0;
    }

    .story-label-text {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 3px;
      color: #8b1a1a;
      text-transform: uppercase;
    }

    /* ── Large headline ── */
    .story-heading {
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: 36px;
      line-height: 1.25;
      letter-spacing: -0.4px;
      color: #0d0d0d;
      max-width: 780px;
      margin: 0 auto 60px auto;
    }

    /* ── Cards row: two equal columns ── */
    .story-cards-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      text-align: left;
      max-width: 1100px;
      margin: 0 auto;
    }

    /* ── Individual story card ── */
    .story-card {
      position: relative;
      background: #f0f0f0;
      border-radius: 16px;
      padding: 32px 32px 36px 32px;
      overflow: hidden;
      transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .story-card:hover {
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
      transform: translateY(-2px);
    }

    /* ── Card title ── */
    .story-card-title {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: var(--content-size);
      color: #0d0d0d;
      letter-spacing: 0.1px;
      margin-bottom: 16px;
    }

    /* ── Thin divider line below title ── */
    .story-card-divider {
      width: 100%;
      height: 1px;
      background: #d8d8d8;
      margin-bottom: 14px;
    }

    /* ── Bold sub-heading ── */
    .story-card-subtitle {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: var(--content-size);
      color: #1a1a1a;
      margin-bottom: 10px;
      line-height: 1.4;
    }

    /* ── Body text ── */
    .story-card-body {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: 16px;
      color: #555;
      line-height: 1.75;
    }

    /* ── Shield watermark on Vision card ── */
    .story-card--vision {
      /* Vision card uses same background */
    }

    /* ── Mission: image watermark (bottom-right) ── */
    .our-missoin-story-card-watermark {
      position: absolute;
      bottom: 121px;
      left: 0px;
      width: 87px;
      height: 92px;
      pointer-events: none;
      z-index: 0;
    }

    .mission-icon-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 0.5;
      display: block;
    }



    /* ── Vision: SVG shield watermark (bottom-right) ── */
    .our-vision-story-card-watermark {
      position: absolute;
      bottom: 0px;
      right: -8px;
      width: 87px;
      height: 140px;
      pointer-events: none;
      z-index: 0;
    }

    .vision-icon-img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      opacity: 0.5;
      display: block;
    }

    .story-shield-svg {
      width: 100%;
      height: 100%;
    }

    /* ────────────────────────────
   DARK MODE — Our Story
──────────────────────────── */
    body.dark .story-heading {
      color: #f0f0f0;
    }

    body.dark .story-label-text,
    body.dark .story-label-dash {
      color: #e03030;
      background: #e03030;
    }

    body.dark .story-label-text {
      background: transparent;
    }

    body.dark .story-card {
      background: #1e1e1e;
    }

    body.dark .story-card:hover {
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }

    body.dark .story-card-title {
      color: #f0f0f0;
    }

    body.dark .story-card-divider {
      background: #2e2e2e;
    }

    body.dark .story-card-subtitle {
      color: #ddd;
    }

    body.dark .story-card-body {
      color: #888;
    }

    body.dark .story-card-watermark {
      color: #888;
      opacity: 0.12;
    }

    /* ── Responsive ── */
    @media (max-width: 900px) {
      .story-section {
        padding: 56px 32px 64px 32px;
      }

      .story-heading {
        font-size: var(--subheading-size);
        margin-bottom: 40px;
      }

      .story-cards-row {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }

    /* Make sure card content sits on top of the watermarks */
    .story-card .story-card-title,
    .story-card .story-card-divider,
    .story-card .story-card-subtitle,
    .story-card .story-card-body {
      position: relative;
      z-index: 1;
    }

    /* Dark mode */
    body.dark .mission-icon-img {
      opacity: 0.12;
      filter: invert(1);
    }

    body.dark .our-vision-story-card-watermark {
      color: #aaa;
      opacity: 0.14;
    }

    /* ══════════════════════════════════════════
   LEADERSHIP SLIDER SECTION
   Figma: "About Page — Leadership"
   • Full-width overflow clip viewport
   • Cards: photo left + content right
   • Peek of next card visible on right
   • Prev/Next chevron buttons + dot dots
══════════════════════════════════════════ */

    /* ── Section wrapper ── */
    .leadership-section {
      padding: 72px 0 80px 0;
      text-align: center;
      overflow: hidden;
    }

    .leadership-heading {
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: var(--heading-size);
      color: #0d0d0d;
      letter-spacing: -0.3px;
      margin-bottom: 44px;
    }

    /* ── Slider viewport ── */
    .leadership-slider-wrap {
      width: 100%;
      overflow: hidden;
      padding: 0 80px;
      /* side padding creates the "peek" effect */
      box-sizing: border-box;
      cursor: grab;
    }

    .leadership-slider-wrap:active {
      cursor: grabbing;
    }

    /* ── Track: all cards in a row ── */
    .leadership-track {
      display: flex;
      gap: 24px;
      will-change: transform;
      /* transition set by JS */
    }

    /* ── Individual card ── */
    .leader-card {
      display: flex;
      flex-direction: row;
      flex-shrink: 0;
      width: 650px;
      /*calc(50% - 80px);   /* fills viewport minus right-peek gap */
      background: #ffffff;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 4px 28px rgba(0, 0, 0, 0.08);
    }

    /* Apply fixed height only on desktop */
    @media (min-width: 901px) {
      .leader-card {
        height: 280px !important;
      }

      .leader-photo {
        height: 100% !important;
      }
    }

    /* ── Left: portrait photo ── */
    .leader-photo-wrap {
      flex: 0 0 300px;
      overflow: hidden;
      position: relative;
    }

    .leader-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
      transition: transform 0.4s ease;
    }

    .leader-card:hover .leader-photo {
      transform: scale(1.03);
    }

    /* ── Right: content ── */
    .leader-content {
      flex: 1;
      padding: 36px 40px 32px 40px;
      display: flex;
      flex-direction: column;
      gap: 0;
      text-align: left;
      overflow-y: auto;
    }

    /* Role label */
    .leader-role {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: 0.4px;
      color: #8b1a1a;
      text-transform: uppercase;
      margin-bottom: 6px;
      display: block;
    }

    /* Name */
    .leader-name {
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: var(--subheading-size);
      color: #0d0d0d;
      letter-spacing: -0.3px;
      line-height: 1.15;
      margin-bottom: 6px;
    }

    /* Specialty / background line */
    .leader-specialty {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: 12px;
      color: #666;
      margin-bottom: 18px;
    }

    /* Bio paragraph */
    .leader-bio {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: var(--content-size);
      color: #444;
      line-height: 1.75;
      margin-bottom: 24px;
      flex: 1;
    }

    /* Pull quote */
    .leader-quote {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      background: rgba(139, 26, 26, 0.06);
      border-radius: 12px;
      padding: 16px 20px;
      margin: 0;
    }

    .leader-quote-icon {
      flex-shrink: 0;
      margin-top: 2px;
    }

    .leader-quote p {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: var(--content-size);
      color: #3a1010;
      line-height: 1.6;
      margin: 0;
    }

    /* ── Navigation arrows ── */
    .leadership-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 55px;
      margin-top: 45px;
    }

    .leader-nav-btn {
      width: 50px;
      height: 58px;
      border-radius: 10%;
      border: 1.5px solid #d0d0d0;
      background: #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      /* color: #333; */
      transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    }

    .leader-nav-btn:hover:not(:disabled) {
      border-color: #8b1a1a;
      color: #8b1a1a;
      background: rgba(139, 26, 26, 0.05);
    }

    .leader-nav-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    /* ── Dot indicators ── */
    .leader-dots {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 16px;
    }

    .leader-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #ccc;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
    }

    .leader-dot--active {
      background: #8b1a1a;
      width: 24px;
      border-radius: 4px;
      transform: none;
    }

    /* ── Dark mode ── */
    body.dark .leadership-heading {
      color: #f0f0f0;
    }

    body.dark .leader-card {
      background: #1e1e1e;
      box-shadow: 0 4px 28px rgba(0, 0, 0, 0.35);
    }

    body.dark .leader-name {
      color: #f0f0f0;
    }

    body.dark .leader-specialty {
      color: #888;
    }

    body.dark .leader-bio {
      color: #aaa;
    }

    body.dark .leader-quote {
      background: rgba(139, 26, 26, 0.12);
    }

    body.dark .leader-quote p {
      color: #e8c0c0;
    }

    body.dark .leader-nav-btn {
      border-color: #333;
      background: #1e1e1e;
      color: #ccc;
    }

    body.dark .leader-nav-btn:hover:not(:disabled) {
      border-color: #8b1a1a;
      color: #e03030;
    }

    body.dark .leader-dot {
      background: #444;
    }

    body.dark .leader-dot--active {
      background: #e03030;
    }

    /* ── Responsive ── */
    @media (max-width: 900px) {
      .leadership-slider-wrap {
        padding: 0 20px;
      }

      .leader-card {
        flex-direction: column;
        width: calc(100% - 40px);
        height: auto !important;
        min-height: unset;
      }

      /* Tablet: taller photo, face centered */
      .leader-photo-wrap {
        flex: none !important;
        width: 100%;
        height: 300px;
      }

      .leader-photo {
        object-position: center center;
      }

      .leader-content {
        padding: 24px 24px 28px 24px;
      }

      .leader-name {
        font-size: var(--subheading-size);
      }

      .leadership-heading {
        font-size: 26px;
      }
    }

    /* ══════════════════════════════════════════
   CTA SECTION
   Floating white card on bg-texture,
   centred heading + subtext + red button
══════════════════════════════════════════ */
    .about-cta-section {
      padding: 64px 80px 72px 80px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* The white floating card */
    .about-cta-card {
      background: #ffffff;
      border-radius: 20px;
      padding: 60px 80px 64px 80px;
      text-align: center;
      max-width: 780px;
      width: 100%;
      box-shadow: 0 4px 32px rgba(0, 0, 0, 0.07);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }

    /* Heading */
    .about-cta-heading {
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: 36px;
      line-height: 1.2;
      letter-spacing: -0.5px;
      color: #0d0d0d;
      margin-bottom: 18px;
    }

    /* Sub-text */
    .about-cta-subtext {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: var(--content-size);
      color: #666;
      line-height: 1.65;
      margin-bottom: 36px;
    }

    /* Red CTA button */
    .about-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #8b1a1a;
      color: #ffffff;
      text-decoration: none;
      padding: 16px 36px;
      border-radius: 8px;
      font-family: 'Inter', sans-serif;
      font-size: var(--content-size);
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
      box-shadow: 0 4px 16px rgba(139, 26, 26, 0.30);
    }

    .about-cta-btn:hover {
      background: #7a1616;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(139, 26, 26, 0.38);
    }

    .about-cta-btn:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(139, 26, 26, 0.22);
    }

    /* Dark mode */
    body.dark .about-cta-card {
      background: #1e1e1e;
      box-shadow: 0 4px 32px rgba(0, 0, 0, 0.40);
    }

    body.dark .about-cta-heading {
      color: #f0f0f0;
    }

    body.dark .about-cta-subtext {
      color: #888;
    }

    /* Responsive */
    @media (max-width: 900px) {
      .about-cta-section {
        padding: 48px 24px 56px 24px;
      }

      .about-cta-card {
        padding: 40px 28px 44px 28px;
        border-radius: 16px;
      }

      .about-cta-heading {
        font-size: 26px;
      }
    }

    /* ── About page: 768px tablet ─────────────────────── */
    @media (max-width: 768px) {

      /* Hero: pull red card out of absolute, stack below soldier */
      .deploy-section .deploy-bottom {
        display: flex;
        flex-direction: column;
        height: auto;
        overflow: visible;
      }

      .deploy-section .soldier-wrapper {
        position: relative !important;
        width: 100%;
        height: 320px;
        order: 1;
        flex-shrink: 0;
      }

      .about-card-warpper {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        border-radius: 0 0 14px 14px;
        padding: 28px 24px;
        flex-direction: column;
        order: 2;
        box-sizing: border-box;
      }

      .about-card-title {
        font-size: var(--subheading-size);
        padding: 0;
      }

      .about-card-desc {
        font-size: var(--content-size);
        padding: 0;
        margin-top: 8px;
      }

      /* Our Story */
      .story-section {
        padding: 48px 24px 56px;
      }

      .story-heading {
        font-size: var(--subheading-size);
        margin-bottom: 32px;
      }

      .story-cards-row {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .story-card {
        padding: 26px 22px 30px;
      }

      /* Leadership Slider */
      .leadership-section {
        padding: 48px 0 56px;
      }

      .leadership-heading {
        font-size: 28px;
        margin-bottom: 32px;
        padding: 0 24px;
      }

      .leadership-slider-wrap {
        padding: 0 24px;
      }

      .leader-card {
        flex-direction: column;
        width: calc(100vw - 48px);
        min-height: unset;
        overflow: visible;
      }

      .leader-photo-wrap {
        flex: none;
        width: 100%;
        height: 280px;
        overflow: hidden;
      }

      /* Center face in landscape-oriented stacked card */
      .leader-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
      }

      .leader-content {
        padding: 28px 28px 32px;
      }

      .leader-name {
        font-size: var(--subheading-size);
      }

      .leader-bio {
        font-size: var(--content-size);
      }

      .leader-quote p {
        font-size: 12.5px;
      }

      /* CTA */
      .about-cta-section {
        padding: 40px 20px 48px;
      }

      .about-cta-card {
        padding: 40px 28px 44px;
      }

      .about-cta-heading {
        font-size: 26px;
      }
    }


    /* ══════════════════════════════════════════
   RAPID TACTICAL — CONTACT.CSS
   "Contact Screen Light" — pixel-perfect
   Figma match
══════════════════════════════════════════ */

    /* ────────────────────────────
   CONTACT SECTION
   Full layout wrapper that sits
   inside .bg-img (textured bg).
   Two-column split: left copy +
   right form.
──────────────────────────── */
    .contact-section {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: start;
      gap: 0;
      min-height: 480px;
      padding: 88px 80px 80px 80px;
      position: relative;
    }

    /* ── Left column: headline + subtext + email ── */
    .contact-left {
      padding-right: 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: 16px;
    }

    .contact-heading {
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: var(--heading-size);
      line-height: 1.18;
      letter-spacing: -0.5px;
      color: #0d0d0d;
      margin-bottom: 20px;
    }

    .contact-subtext {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: var(--content-size);
      color: #555;
      line-height: 1.7;
      max-width: 340px;
      margin-bottom: 36px;
    }

    /* Email link with globe icon */
    .contact-email-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'Inter', sans-serif;
      font-size: var(--content-size);
      font-weight: 500;
      color: #444;
      text-decoration: none;
      transition: color 0.15s ease;
    }

    .contact-email-link:hover {
      color: #8b1a1a;
    }

    /* ── Right column: the form panel ── */
    .contact-right {
      background: transparent;
    }

    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    /* ── Form group ── */
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .form-label {
      font-family: 'Inter', sans-serif;
      font-size: var(--content-size);
      font-weight: 600;
      color: #222;
      letter-spacing: 0.1px;
    }

    .form-required {
      color: #8b1a1a;
      margin-left: 2px;
    }

    /* Base input / textarea */
    .form-input {
      width: 100%;
      padding: 13px 16px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      font-weight: 400;
      color: #222;
      background: #ffffff;
      outline: none;
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
      -webkit-appearance: none;
    }

    .form-input::placeholder {
      color: #aaa;
      font-weight: 400;
    }

    .form-input:focus {
      border-color: #8b1a1a;
      box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.10);
    }

    /* Textarea */
    .form-textarea {
      resize: vertical;
      min-height: 100px;
      line-height: 1.6;
    }

    /* ── Phone row: flag + code + number ── */
    .phone-input-wrap {
      display: flex;
      align-items: stretch;
      gap: 0;
      border: 1px solid #ddd;
      border-radius: 8px;
      overflow: hidden;
      background: #ffffff;
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }

    .phone-input-wrap:focus-within {
      border-color: #8b1a1a;
      box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.10);
    }

    /* Country selector pill */
    .phone-country {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 0 12px;
      border-right: 1px solid #e8e8e8;
      cursor: pointer;
      user-select: none;
      flex-shrink: 0;
      white-space: nowrap;
      transition: background 0.15s ease;
    }

    .phone-country:hover {
      background: #fafafa;
    }

    .phone-flag {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }

    .phone-code {
      font-family: 'Inter', sans-serif;
      font-size: var(--content-size);
      font-weight: 500;
      color: #333;
    }

    .phone-chevron {
      color: #999;
      flex-shrink: 0;
    }

    /* Phone number input — no individual border (parent has it) */
    .phone-number-input {
      border: none;
      border-radius: 0;
      flex: 1;
      padding: 13px 14px;
      box-shadow: none !important;
    }

    .phone-number-input:focus {
      border-color: transparent;
      box-shadow: none;
    }

    /* ── Submit button ── */
    .form-submit-wrap {
      display: flex;
      justify-content: flex-start;
      margin-top: 4px;
    }

    .contact-submit-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #8b1a1a;
      color: #ffffff;
      border: none;
      padding: 15px 32px;
      border-radius: 8px;
      font-family: 'Inter', sans-serif;
      font-size: var(--content-size);
      font-weight: 700;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
      box-shadow: 0 4px 16px rgba(139, 26, 26, 0.30);
    }

    .contact-submit-btn:hover {
      background: #7a1616;
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(139, 26, 26, 0.40);
    }

    .contact-submit-btn:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(139, 26, 26, 0.25);
    }

    /* ────────────────────────────
   BRAND SECTION
   Large centered RAPID TACTICAL
   wordmark (SVG logo) above footer
──────────────────────────── */
    .contact-brand-section {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 64px 80px 48px 80px;
    }

    .contact-brand-logo-link {
      display: inline-flex;
      text-decoration: none;
    }

    .contact-brand-logo-img {
      width: 560px;
      max-width: 100%;
      height: auto;
      display: block;
    }

    /* ────────────────────────────
   DARK MODE OVERRIDES
──────────────────────────── */
    body.dark .contact-heading {
      color: #f0f0f0;
    }

    body.dark .contact-subtext {
      color: #888;
    }

    body.dark .contact-email-link {
      color: #999;
    }

    body.dark .contact-email-link:hover {
      color: #e03030;
    }

    body.dark .form-label {
      color: #d0d0d0;
    }

    body.dark .form-input {
      background: #1e1e1e;
      border-color: #2e2e2e;
      color: #e8e8e8;
    }

    body.dark .form-input::placeholder {
      color: #555;
    }

    body.dark .form-input:focus {
      border-color: #8b1a1a;
      box-shadow: 0 0 0 3px rgba(139, 26, 26, 0.15);
    }

    body.dark .phone-input-wrap {
      background: #1e1e1e;
      border-color: #2e2e2e;
    }

    body.dark .phone-input-wrap:focus-within {
      border-color: #8b1a1a;
    }

    body.dark .phone-country {
      border-right-color: #333;
    }

    body.dark .phone-country:hover {
      background: #252525;
    }

    body.dark .phone-code {
      color: #ccc;
    }

    body.dark .phone-number-input {
      background: #1e1e1e;
      color: #e8e8e8;
    }

    /* ────────────────────────────
   RESPONSIVE
──────────────────────────── */
    @media (max-width: 900px) {
      .contact-section {
        grid-template-columns: 1fr;
        padding: 56px 32px 48px 32px;
        gap: 40px;
      }

      .contact-left {
        padding-right: 0;
      }

      .contact-heading {
        font-size: 28px;
      }

      .contact-brand-section {
        padding: 48px 32px 36px 32px;
      }

      .contact-brand-logo-img {
        width: 280px;
      }

      .form-submit-wrap {
        justify-content: stretch;
      }

      .contact-submit-btn {
        width: 100%;
        justify-content: center;
      }
    }

    /* ══════════════════════════════════════════
   RAPID TACTICAL — PRODUCTS.CSS
   Products page layout, matching Figma
   References: HOME SCREEN LIGHT Figma
══════════════════════════════════════════ */

    /* ────────────────────────────
   PRODUCTS HERO BANNER
   Full-bleed real image, cover fit,
   subtle bottom gradient like Figma
──────────────────────────── */
    .prod-hero {
      position: relative;
      width: 100%;
      height: 500px;
      overflow: hidden;
      background: #111;
      /* fallback while image loads */
    }

    /* The actual image — fills the section and crops cleanly */
    .prod-hero-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
      z-index: 0;
    }

    /* Gradient overlay — darkens bottom edge like Figma */
    .prod-hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom,
          rgba(0, 0, 0, 0.08) 0%,
          rgba(0, 0, 0, 0.10) 45%,
          rgba(0, 0, 0, 0.55) 85%,
          rgba(0, 0, 0, 0.75) 100%);
      z-index: 1;
      pointer-events: none;
    }

    /* ────────────────────────────
   DEPLOYMENT CAPABILITY ROW
   Two-column: left card + right text
──────────────────────────── */
    .prod-deploy-section {
      display: flex;
      align-items: stretch;
      gap: 0;
      padding: 64px 64px 48px 64px;
      background: transparent;
    }

    /* Left card: kit image + brand label */
    .prod-deploy-left {
      flex: 0 0 auto;
      background: #ffffff;
      border-radius: 14px;
      overflow: visible;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 0;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
      margin-right: 48px;
      align-self: flex-start;
      height: auto;
      width: 515px;
      min-height: 191px;
    }

    /* Single authoritative .prod-deploy-kit-label rule */
    .prod-deploy-kit-label {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: 16px;
      color: #0d0d0d;
      letter-spacing: 0.2px;
      margin-top: 12px;
      padding: 0;
    }

    /* Kit image wrapper — fixed height so label always has room below */
    .prod-deploy-kit-img-wrap {
      width: 100%;
      flex: 0 0 220px;
      height: 220px;
      overflow: hidden;
      border-radius: 8px;
      position: relative;
    }

    .prod-deploy-kit-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
      border-radius: 8px;
    }


    .prod-deploy-kit-placeholder {
      width: 100%;
      height: 140px;
      border-radius: 10px;
      /* background: linear-gradient(135deg, #e8e0d0 0%, #c8bca4 100%); */
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: var(--content-size);
      color: #666;
      border: 1.5px dashed #b0a090;
      letter-spacing: 0.5px;
      background-image: url("../../images/product_kit-type.png");
    }

    /* Right: text panel */
    .prod-deploy-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 560px;
    }

    .prod-deploy-heading {
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: var(--heading-size);
      color: #0d0d0d;
      line-height: 1.18;
      letter-spacing: -0.4px;
      margin-bottom: 16px;
      text-shadow: none;
      /* no text shadow needed here */
    }

    .prod-deploy-desc {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: 14.5px;
      color: #444;
      line-height: 1.75;
      max-width: 520px;
    }

    /* ────────────────────────────
   PRODUCTS GRID SECTION
──────────────────────────── */
    .prod-grid-section {
      padding: 0 64px 64px 64px;
    }

    /* Filter + sort toolbar */
    .prod-filter-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;
      margin-bottom: 32px;
      border-top: 1px solid #e8e8e8;
      border-bottom: 1px solid #e8e8e8;
    }

    .prod-filter-btn,
    .prod-sort-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: transparent;
      border: 1.5px solid #d0d0d0;
      border-radius: 8px;
      padding: 9px 18px;
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      font-weight: 500;
      color: #333;
      cursor: pointer;
      transition: border-color 0.15s ease, background 0.15s ease;
    }

    .prod-filter-btn:hover,
    .prod-sort-btn:hover {
      border-color: #8b1a1a;
      color: #8b1a1a;
      background: rgba(139, 26, 26, 0.04);
    }

    .prod-showing-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      text-align: center;
    }

    .prod-showing-title {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: var(--content-size);
      color: #1a1a1a;
    }

    .prod-showing-count {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: 12px;
      color: #888;
      letter-spacing: 0.3px;
    }

    /* Product cards 3-column grid */
    .prod-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    /* Individual Product Card */
    .prod-card {
      background: #ffffff;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
      border: 1px solid #f0f0f0;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      display: flex;
      flex-direction: column;
      height: auto;
      /* was 652px — fixed height caused dead white space */
    }

    .prod-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
    }

    /* Card image wrapper */
    .prod-card-img-wrap {
      width: 100%;
      height: 300px;
      /* was 560px — far too tall */
      overflow: hidden;
      position: relative;
    }

    /* Image placeholder fills the wrapper */
    .prod-card-img-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* Actual product image fills the wrap fully */
    .prod-card-img-placeholder img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
    }

    .prod-card-img-placeholder--dark {
      background: linear-gradient(145deg, #3a3530 0%, #2a2520 100%);
    }

    .prod-card-img-placeholder--red {
      background: linear-gradient(145deg, #8b1a1a 0%, #6a1212 100%);
    }

    .prod-card-placeholder-content {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 24px;
    }

    .prod-placeholder-box {
      width: 120px;
      height: 160px;
      border-radius: 12px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 12px 8px;
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: var(--content-size);
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    /* CFAK backpack shape — olive/military green */
    .prod-placeholder-cfak {
      background: linear-gradient(160deg, #7a7a50 0%, #5a5a38 60%, #4a4a2a 100%);
      color: rgba(255, 255, 255, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: inset 0 -2px 8px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(0, 0, 0, 0.15);
      position: relative;
    }

    .prod-placeholder-cfak::before {
      content: '';
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 50px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.10);
      border: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* IFAK Medium — darker tactical bag */
    .prod-placeholder-ifak-m {
      background: linear-gradient(160deg, #4a4a38 0%, #3a3a28 60%, #2a2a18 100%);
      color: rgba(255, 255, 255, 0.80);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: inset 0 -2px 8px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.25);
      width: 100px;
      height: 140px;
      position: relative;
    }

    .prod-placeholder-ifak-m::before {
      content: '';
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 32px;
      height: 40px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.10);
    }

    /* IFAK Small — red accent bag */
    .prod-placeholder-ifak-s {
      background: linear-gradient(160deg, #c0302a 0%, #8b1a1a 60%, #6a1212 100%);
      color: rgba(255, 255, 255, 0.90);
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: inset 0 -2px 8px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(139, 26, 26, 0.3);
      width: 90px;
      height: 120px;
      position: relative;
    }

    .prod-placeholder-ifak-s::before {
      content: '';
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 28px;
      height: 32px;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* Card body — title, description, link */
    .prod-card-body {
      padding: 20px 22px 24px 22px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .prod-card-title {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: var(--subheading-size);
      color: #0d0d0d;
      letter-spacing: 0.1px;
      line-height: 1.2;
    }

    .prod-card-desc {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: var(--content-size);
      color: #555;
      line-height: 1.7;
      flex: 1;
    }

    .prod-card-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      font-weight: 600;
      color: #0d0d0d;
      text-decoration: none;
      transition: color 0.15s ease;
      margin-top: 4px;
      width: fit-content;
    }

    .prod-card-link:hover {
      color: #8b1a1a;
    }

    /* Featured card subtle top border accent */
    .prod-card--featured {
      border-top: 3px solid #8b1a1a;
    }

    .prod-card--accent {
      border-top: 3px solid #c0302a;
    }

    /* ────────────────────────────
   MOBILE APP SECTION
   Left: phone placeholder
   Right: description
──────────────────────────── */
    .prod-app-section {
      display: flex;
      align-items: center;
      gap: 52px;
      padding: 32px 64px 72px 64px;
    }

    /* Phone placeholder */
    .prod-app-img-wrap {
      flex: 0 0 220px;
    }

    .prod-app-phone-placeholder {
      width: 160px;
      height: 260px;
      background: #0d0d0d;
      border-radius: 28px;
      border: 8px solid #232323;
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);
      display: flex;
      align-items: stretch;
      overflow: hidden;
      position: relative;
    }

    .prod-app-phone-screen {
      flex: 1;
      background: #f2f2f2;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 10px 16px 10px;
      gap: 8px;
      overflow: hidden;
    }

    .prod-app-phone-notch {
      width: 48px;
      height: 6px;
      background: #d0d0d0;
      border-radius: 3px;
      margin-bottom: 4px;
      flex-shrink: 0;
    }

    .prod-app-phone-content {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: center;
    }

    .prod-app-screen-bar {
      width: 100%;
      height: 8px;
      background: #d8d8d8;
      border-radius: 4px;
    }

    .prod-app-screen-bar--short {
      width: 65%;
      align-self: flex-start;
    }

    .prod-app-screen-bar--medium {
      width: 80%;
      align-self: flex-start;
    }

    .prod-app-screen-icon {
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(139, 26, 26, 0.08);
      border-radius: 10px;
      width: 52px;
      height: 52px;
    }

    /* App section body text */
    .prod-app-body {
      flex: 1;
      max-width: 480px;
    }

    .prod-app-title {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: var(--subheading-size);
      color: #0d0d0d;
      letter-spacing: 0.1px;
      margin-bottom: 12px;
    }

    .prod-app-desc {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: var(--content-size);
      color: #555;
      line-height: 1.75;
      margin-bottom: 18px;
    }

    .prod-app-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: 'Inter', sans-serif;
      font-size: var(--content-size);
      font-weight: 600;
      color: #0d0d0d;
      text-decoration: none;
      transition: color 0.15s ease;
    }

    .prod-app-link:hover {
      color: #8b1a1a;
    }

    /* ────────────────────────────
   BRAND STATEMENT SECTION
   Large centred logo + tagline
   Matches Figma "RAPID TACTICAL"
   wordmark with TM + tagline below
──────────────────────────── */
    .prod-brand-section {
      padding: 80px 64px 60px 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .prod-brand-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 22px;
    }

    .prod-brand-logo-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .prod-brand-logo-link {
      display: inline-flex;
      text-decoration: none;
    }

    .prod-brand-logo-img {
      width: 480px;
      max-width: 100%;
      height: auto;
      display: block;
    }

    .prod-brand-tagline {
      display: none;
      /* tagline is already embedded in the SVG logo */
    }

    /* ────────────────────────────
   DARK MODE OVERRIDES
   Products page sections
──────────────────────────── */

    /* Deploy section */
    body.dark .prod-deploy-left {
      background: #1e1e1e;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    }

    body.dark .prod-deploy-kit-label {
      color: #f0f0f0;
    }

    body.dark .prod-deploy-kit-placeholder {
      background: linear-gradient(135deg, #2a2520 0%, #1e1a14 100%);
      border-color: #4a3a28;
      color: #888;
    }

    body.dark .prod-deploy-heading {
      color: #f0f0f0;
    }

    body.dark .prod-deploy-desc {
      color: #888;
    }

    /* Filter bar */
    body.dark .prod-filter-bar {
      border-color: #2a2a2a;
    }

    body.dark .prod-filter-btn,
    body.dark .prod-sort-btn {
      border-color: #333;
      color: #ccc;
    }

    body.dark .prod-filter-btn:hover,
    body.dark .prod-sort-btn:hover {
      border-color: #8b1a1a;
      color: #8b1a1a;
      background: rgba(139, 26, 26, 0.08);
    }

    body.dark .prod-showing-title {
      color: #e0e0e0;
    }

    body.dark .prod-showing-count {
      color: #666;
    }

    /* Product cards */
    body.dark .prod-card {
      background: #1e1e1e;
      border-color: #2a2a2a;
      box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
    }

    body.dark .prod-card:hover {
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }

    body.dark .prod-card-title {
      color: #f0f0f0;
    }

    body.dark .prod-card-desc {
      color: #888;
    }

    body.dark .prod-card-link {
      color: #ddd;
    }

    body.dark .prod-card-link:hover {
      color: #e03030;
    }

    /* App section */
    body.dark .prod-app-phone-placeholder {
      border-color: #1e1e1e;
    }

    body.dark .prod-app-phone-screen {
      background: #2a2a2a;
    }

    body.dark .prod-app-phone-notch {
      background: #1a1a1a;
    }

    body.dark .prod-app-screen-bar {
      background: #3a3a3a;
    }

    body.dark .prod-app-title {
      color: #f0f0f0;
    }

    body.dark .prod-app-desc {
      color: #888;
    }

    body.dark .prod-app-link {
      color: #ddd;
    }

    body.dark .prod-app-link:hover {
      color: #e03030;
    }

    /* Brand section */
    body.dark .prod-brand-tagline {
      color: #444;
    }

    /* ────────────────────────────
   RESPONSIVE — compact at 768px
──────────────────────────── */
    @media (max-width: 900px) {

      .prod-hero {
        height: 340px;
      }

      .prod-deploy-section {
        flex-direction: column;
        padding: 32px 24px 28px;
        gap: 24px;
      }

      .prod-deploy-left {
        margin-right: 0;
        flex: none;
        width: 100%;
        height: auto;
        min-height: 0;
      }

      .prod-deploy-kit-img-wrap {
        flex: 0 0 200px;
        height: 200px;
        width: 100%;
      }

      .prod-deploy-kit-label {
        font-size: var(--content-size);
        margin-top: 10px;
      }

      .prod-deploy-right {
        max-width: 100%;
      }

      .prod-deploy-heading {
        font-size: 26px;
      }

      .prod-deploy-desc {
        font-size: var(--content-size);
      }


      .prod-grid-section {
        padding: 0 32px 48px 32px;
      }

      .prod-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .prod-app-section {
        flex-direction: column;
        padding: 32px 32px 48px 32px;
        gap: 32px;
      }

      .prod-brand-section {
        padding: 48px 32px 40px 32px;
      }

      .prod-brand-logo-img {
        width: 280px;
      }

      .kit-medium-left,
      .kit-medium-right,
      .kit-tiny {
        display: none;
      }
    }

    @media (min-width: 901px) and (max-width: 1100px) {
      .prod-cards-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* ══════════════════════════════════════════
   ECOSYSTEM.CSS
   Matches "ECO SYSTEM LIGHT" Figma screen
   • Split hero (text-left / image-right)
   • 3-column module cards
   • 4-step process flow
   • CTA band
══════════════════════════════════════════ */

    /* ─────────────────────────────────────────
   HERO
───────────────────────────────────────── */


    /* ─────────────────────────────────────────
   LABEL ROW (shared utility)
───────────────────────────────────────── */
    .eco-label-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 48px 0 0 0;
    }

    .eco-label-dash {
      display: block;
      width: 24px;
      height: 1.5px;
      background: #8b1a1a;
      flex-shrink: 0;
    }

    .eco-label-text {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 3px;
      color: #8b1a1a;
      text-transform: uppercase;
    }

    /* ─────────────────────────────────────────
   MODULE CARDS
───────────────────────────────────────── */
    .eco-modules {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      padding: 40px 80px 80px 80px;
    }

    .eco-module-card {
      background: #ffffff;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
      display: flex;
      flex-direction: column;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .eco-module-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 36px rgba(0, 0, 0, 0.12);
    }

    /* Featured card: subtle top accent */
    .eco-module-card--featured {
      border-top: 3px solid #8b1a1a;
    }

    /* Module image */
    .eco-module-img-wrap {
      width: 100%;
      height: 220px;
      overflow: hidden;
      background: #f0ede8;
    }

    .eco-module-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
      transition: transform 0.35s ease;
    }

    .eco-module-card:hover .eco-module-img {
      transform: scale(1.04);
    }

    /* Module body */
    .eco-module-body {
      padding: 24px 28px 28px 28px;
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 0;
    }

    .eco-module-tag {
      font-family: 'Inter', sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: #8b1a1a;
      text-transform: uppercase;
      margin-bottom: 8px;
      display: block;
    }

    .eco-module-title {
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: var(--content-size);
      color: #0d0d0d;
      letter-spacing: -0.2px;
      line-height: 1.2;
      margin: 0 0 10px 0;
    }

    .eco-module-desc {
      font-family: 'Inter', sans-serif;
      font-size: var(--content-size);
      color: #555;
      line-height: 1.75;
      margin-bottom: 16px;
    }

    .eco-module-features {
      list-style: none;
      padding: 0;
      margin: 0 0 20px 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
    }

    .eco-module-features li {
      font-family: 'Inter', sans-serif;
      font-size: 12.5px;
      color: #444;
      padding-left: 16px;
      position: relative;
      line-height: 1.5;
    }

    .eco-module-features li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 7px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #8b1a1a;
    }

    .eco-module-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: 'Inter', sans-serif;
      font-size: var(--content-size);
      font-weight: 700;
      color: #0d0d0d;
      text-decoration: none;
      transition: color 0.15s ease;
      margin-top: auto;
    }

    .eco-module-link:hover {
      color: #8b1a1a;
    }

    /* ─────────────────────────────────────────
   HOW IT WORKS — 4-step process
───────────────────────────────────────── */
    .eco-how {
      padding: 0 80px 80px 80px;
    }

    .eco-how-header {
      text-align: center;
      margin-bottom: 52px;
    }

    .eco-how-heading {
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: var(--heading-size);
      color: #0d0d0d;
      letter-spacing: -0.3px;
      line-height: 1.25;
      margin: 20px auto 0 auto;
      max-width: 560px;
    }

    /* Steps row */
    .eco-steps {
      display: flex;
      align-items: flex-start;
      gap: 0;
    }

    .eco-step {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 28px 24px;
      background: #ffffff;
      border-radius: 14px;
      box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
      transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .eco-step:hover {
      box-shadow: 0 6px 28px rgba(0, 0, 0, 0.10);
      transform: translateY(-2px);
    }

    .eco-step-num {
      font-family: 'Inter', sans-serif;
      font-weight: 900;
      font-size: 28px;
      color: rgba(139, 26, 26, 0.15);
      line-height: 1;
      letter-spacing: -1px;
    }

    .eco-step-title {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: var(--content-size);
      color: #0d0d0d;
      margin: 0;
      line-height: 1.2;
    }

    .eco-step-desc {
      font-family: 'Inter', sans-serif;
      font-size: 12.5px;
      color: #666;
      line-height: 1.7;
      margin: 0;
    }

    /* Connector arrows between steps */
    .eco-step-connector {
      flex: 0 0 32px;
      align-self: center;
      height: 2px;
      background: linear-gradient(90deg, #8b1a1a 0%, rgba(139, 26, 26, 0.2) 100%);
      position: relative;
      margin-top: -20px;
    }

    .eco-step-connector::after {
      content: '';
      position: absolute;
      right: -1px;
      top: 50%;
      transform: translateY(-50%);
      border-left: 6px solid #8b1a1a;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
    }

    /* ─────────────────────────────────────────
   CTA BAND
───────────────────────────────────────── */
    .eco-cta {
      margin: 0 80px 80px 80px;
      background: #0d0d0d;
      border-radius: 20px;
      padding: 60px 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .eco-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 30% 50%, rgba(139, 26, 26, 0.25) 0%, transparent 70%);
      pointer-events: none;
    }

    .eco-cta-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }

    .eco-cta-heading {
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: var(--heading-size);
      color: #ffffff;
      letter-spacing: -0.4px;
      line-height: 1.2;
      margin: 0 0 12px 0;
    }

    .eco-cta-subtext {
      font-family: 'Inter', sans-serif;
      font-size: var(--content-size);
      color: rgba(255, 255, 255, 0.55);
      margin-bottom: 32px;
    }

    .eco-cta-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #8b1a1a;
      color: #ffffff;
      text-decoration: none;
      padding: 15px 36px;
      border-radius: 8px;
      font-family: 'Inter', sans-serif;
      font-size: var(--content-size);
      font-weight: 700;
      letter-spacing: 0.3px;
      transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
      box-shadow: 0 4px 20px rgba(139, 26, 26, 0.4);
    }

    .eco-cta-btn:hover {
      background: #7a1616;
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(139, 26, 26, 0.5);
    }

    /* ─────────────────────────────────────────
   DARK MODE
───────────────────────────────────────── */
    body.dark .eco-hero-left {
      background: #1a1a1a;
      border-color: #2a3a6a;
    }

    body.dark .eco-hero-heading {
      color: #f0f0f0;
    }

    body.dark .eco-hero-desc {
      color: #888;
    }

    body.dark .eco-how-heading {
      color: #f0f0f0;
    }

    body.dark .eco-module-card {
      background: #1e1e1e;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    }

    body.dark .eco-module-title {
      color: #f0f0f0;
    }

    body.dark .eco-module-desc {
      color: #888;
    }

    body.dark .eco-module-features li {
      color: #888;
    }

    body.dark .eco-module-link {
      color: #ddd;
    }

    body.dark .eco-module-link:hover {
      color: #e03030;
    }

    body.dark .eco-module-img-wrap {
      background: #2a2a2a;
    }

    body.dark .eco-step {
      background: #1e1e1e;
      box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
    }

    body.dark .eco-step-title {
      color: #e8e8e8;
    }

    body.dark .eco-step-desc {
      color: #777;
    }

    /* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
    @media (max-width: 1024px) {
      .eco-hero-heading {
        font-size: 32px;
      }

      .eco-modules {
        grid-template-columns: 1fr 1fr;
        padding: 40px 40px 60px 40px;
      }

      .eco-how {
        padding: 0 40px 60px 40px;
      }

      .eco-cta {
        margin: 0 40px 60px 40px;
        padding: 48px 40px;
      }
    }

    @media (max-width: 768px) {
      .eco-hero {
        grid-template-columns: 1fr;
        min-height: unset;
      }

      .eco-hero-left {
        padding: 48px 28px;
        border: 1.5px dashed #c0d0f0;
      }

      .eco-hero-right {
        height: 280px;
      }

      .eco-hero-heading {
        font-size: 26px;
      }

      .eco-modules {
        grid-template-columns: 1fr;
        padding: 32px 24px 48px 24px;
      }

      .eco-steps {
        flex-direction: column;
        gap: 16px;
      }

      .eco-step-connector {
        width: 2px;
        height: 24px;
        flex: 0 0 24px;
        align-self: center;
        background: linear-gradient(180deg, #8b1a1a 0%, rgba(139, 26, 26, 0.2) 100%);
        margin-top: 0;
      }

      .eco-step-connector::after {
        right: 50%;
        top: auto;
        bottom: -1px;
        transform: translateX(50%);
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 6px solid #8b1a1a;
        border-bottom: none;
      }

      .eco-how {
        padding: 0 24px 48px 24px;
      }

      .eco-cta {
        margin: 0 24px 48px 24px;
        padding: 40px 24px;
        border-radius: 16px;
      }

      .eco-cta-heading {
        font-size: var(--subheading-size);
      }
    }

    /* ══════════════════════════════════════════
   THREE PILLARS SECTION
   Figma: tech-pattern bg, dashed blue border
   container, 3 image cards + red title footer
══════════════════════════════════════════ */
    /* .eco-pillars {
      position: relative;
      padding: 72px 80px 80px 80px;
      overflow: hidden;
    } */

    /* ── Tech-pattern watermark background ── */
    .eco-pillars-bg {
      position: absolute;
      inset: 0;
      /* background-color: #f4f6fb; */
      /* Subtle gear/wrench icon pattern via SVG data URI */
      /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23c8d4e8' stroke-width='1'%3E%3Cpath d='M30 10a20 20 0 1 0 .001 40A20 20 0 0 0 30 10zm0 4a16 16 0 1 1-.001 32A16 16 0 0 1 30 14z'/%3E%3Ccircle cx='30' cy='30' r='5'/%3E%3Cpath d='M30 10v4M30 46v4M10 30h4M46 30h4M16.86 16.86l2.83 2.83M40.31 40.31l2.83 2.83M43.14 16.86l-2.83 2.83M19.69 40.31l-2.83 2.83'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 60px 60px; */
      z-index: 0;
    }

    .eco-pillars-inner {
      position: relative;
      z-index: 1;
      /* Dashed blue border container — as per Figma */
      /* border: 1.5px dashed #a0b4d8; */
      border-radius: 4px;
      padding: 48px 48px 56px 48px;
      background: transparent;
    }

    /* ── Section header ── */
    .eco-pillars-header {
      margin-bottom: 44px;
    }

    .eco-pillars-label-row {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px;
    }

    .eco-pillars-dash {
      display: block;
      width: 52px;
      height: 1.5px;
      background: #333;
      flex-shrink: 0;
    }

    .eco-pillars-label-text {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 3px;
      color: #555;
      text-transform: uppercase;
    }

    .eco-pillars-heading {
      font-family: 'Inter', sans-serif;
      font-weight: 900;
      font-size: 36px;
      color: #0d0d0d;
      letter-spacing: -0.5px;
      line-height: 1.15;
      margin: 0 0 14px 0;
    }

    .eco-pillars-subtext {
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      color: #555;
      line-height: 1.75;
      max-width: 520px;
    }

    /* ── Card row ── */
    .eco-pillar-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    /* Individual card */
    .eco-pillar-card {
      background: #ffffff;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
      display: flex;
      flex-direction: column;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .eco-pillar-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);
    }

    /* Image wrapper — fills most of the card */
    .eco-pillar-img-wrap {
      width: 100%;
      height: 320px;
      overflow: hidden;
      background: #f0ede8;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Middle card: lighter bg for app mockup */
    .eco-pillar-img-wrap--mid {
      background: #f7f7fa;
      padding: 20px 0 0 0;
    }

    .eco-pillar-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform 0.4s ease;
    }

    /* App mockup — contain rather than cover */
    .eco-pillar-img--app {
      object-fit: contain;
      padding: 0 12px;
    }

    .eco-pillar-card:hover .eco-pillar-img {
      transform: scale(1.04);
    }

    /* Card title footer */
    .eco-pillar-footer {
      padding: 18px 20px 20px 20px;
      text-align: center;
    }

    .eco-pillar-title {
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: var(--content-size);
      color: #8b1a1a;
      margin: 0;
      letter-spacing: 0.2px;
    }

    /* ── Dark mode ── */
    body.dark .eco-pillars-bg {
      /* background-color: #141414; */
      /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23253045' stroke-width='1'%3E%3Cpath d='M30 10a20 20 0 1 0 .001 40A20 20 0 0 0 30 10zm0 4a16 16 0 1 1-.001 32A16 16 0 0 1 30 14z'/%3E%3Ccircle cx='30' cy='30' r='5'/%3E%3Cpath d='M30 10v4M30 46v4M10 30h4M46 30h4M16.86 16.86l2.83 2.83M40.31 40.31l2.83 2.83M43.14 16.86l-2.83 2.83M19.69 40.31l-2.83 2.83'/%3E%3C/g%3E%3C/svg%3E"); */
    }

    body.dark .eco-pillars-inner {
      border-color: #2a3a6a;
    }

    body.dark .eco-pillars-heading {
      color: #f0f0f0;
    }

    body.dark .eco-pillars-subtext {
      color: #888;
    }

    body.dark .eco-pillars-label-text {
      color: #888;
    }

    body.dark .eco-pillars-dash {
      background: #666;
    }

    body.dark .eco-pillar-card {
      background: #1e1e1e;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    }

    body.dark .eco-pillar-img-wrap {
      background: #2a2a2a;
    }

    body.dark .eco-pillar-img-wrap--mid {
      background: #242430;
    }

    /* ── Responsive ── */
    @media (max-width: 1024px) {
      .eco-pillars {
        padding: 56px 40px 64px 40px;
      }

      .eco-pillars-inner {
        padding: 36px 32px 44px 32px;
      }

      .eco-pillars-heading {
        font-size: 28px;
      }
    }

    @media (max-width: 768px) {
      .eco-pillars {
        padding: 40px 20px 48px 20px;
      }

      .eco-pillars-inner {
        padding: 28px 20px 32px 20px;
      }

      .eco-pillar-cards {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .eco-pillar-img-wrap {
        height: 240px;
      }

      .eco-pillars-heading {
        font-size: var(--subheading-size);
      }
    }

    /* ══════════════════════════════════════════
   DEPLOYMENT CAPABILITY SECTION
   Figma: left = label+heading+orbit diagram
          right = Deploy card with image
══════════════════════════════════════════ */
    .eco-deploy {
      position: relative;
      padding: 0 80px 80px 80px;
      overflow: hidden;
    }

    /* Reuse Three-Pillars bg — already defined as .eco-pillars-bg */

    .eco-deploy-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    /* ── Left column ── */
    .eco-deploy-left {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .eco-deploy-heading {
      font-family: 'Inter', sans-serif;
      font-weight: 900;
      font-size: 32px;
      color: #0d0d0d;
      letter-spacing: -0.4px;
      line-height: 1.2;
      margin: 0 0 14px 0;
    }

    .eco-deploy-subtext {
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      color: #555;
      line-height: 1.75;
      max-width: 420px;
      margin-bottom: 36px;
    }

    /* ── Orbit diagram ── */
    .eco-orbit {
      position: relative;
      width: 320px;
      height: 320px;
      flex-shrink: 0;
    }

    /* Dashed orbital ring SVG — fills container */
    .eco-orbit-ring {
      position: absolute;
      inset: 10px;
      width: calc(100% - 20px);
      height: calc(100% - 20px);
      pointer-events: none;
    }

    /* Centre caduceus circle */
    .eco-orbit-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 88px;
      height: 88px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }

    .eco-orbit-caduceus {
      width: 80px;
      height: auto;
      display: block;
    }

    /* Generic orbit icon bubble */
    .eco-orbit-icon {
      position: absolute;
      width: 62px;
      height: 62px;
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 3px 14px rgba(0, 0, 0, 0.10);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      cursor: default;
    }

    .eco-orbit-icon:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
    }

    /* 5 positions on a 300px orbit (matching SVG dots) */
    /* top    → (150,30) in SVG coords, orbit container is 320px */
    .eco-orbit-icon--top {
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }

    .eco-orbit-icon--right {
      top: 30%;
      right: 0;
    }

    .eco-orbit-icon--bottom-right {
      bottom: 5%;
      right: 10%;
    }

    .eco-orbit-icon--bottom-left {
      bottom: 5%;
      left: 10%;
    }

    .eco-orbit-icon--left {
      top: 30%;
      left: 0;
    }

    /* hover re-applies since transform is overridden on non-top */
    .eco-orbit-icon--top:hover {
      transform: translateX(-50%) scale(1.1);
    }

    .eco-orbit-icon--right:hover {
      transform: scale(1.1);
    }

    .eco-orbit-icon--bottom-right:hover {
      transform: scale(1.1);
    }

    .eco-orbit-icon--bottom-left:hover {
      transform: scale(1.1);
    }

    .eco-orbit-icon--left:hover {
      transform: scale(1.1);
    }

    /* ── Right column: deploy card ── */
    .eco-deploy-right {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .eco-deploy-card {
      background: #ffffff;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
      max-width: 420px;
      width: 100%;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .eco-deploy-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 16px 44px rgba(0, 0, 0, 0.16);
    }

    .eco-deploy-card-img-wrap {
      width: 100%;
      height: 280px;
      overflow: hidden;
    }

    .eco-deploy-card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform 0.4s ease;
    }

    .eco-deploy-card:hover .eco-deploy-card-img {
      transform: scale(1.04);
    }

    .eco-deploy-card-body {
      padding: 22px 24px 24px 24px;
      text-align: center;
    }

    .eco-deploy-card-title {
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: var(--subheading-size);
      color: #8b1a1a;
      margin: 0 0 6px 0;
    }

    .eco-deploy-card-desc {
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      color: #555;
      margin: 0;
      line-height: 1.6;
    }

    /* ── Dark mode ── */
    body.dark .eco-deploy-heading {
      color: #f0f0f0;
    }

    body.dark .eco-deploy-subtext {
      color: #888;
    }

    body.dark .eco-orbit-center,
    body.dark .eco-orbit-icon {
      background: #1e1e1e;
      box-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
    }

    body.dark .eco-orbit-icon svg path,
    body.dark .eco-orbit-icon svg rect,
    body.dark .eco-orbit-icon svg polyline {
      stroke: #ccc;
    }

    body.dark .eco-orbit-ring circle[stroke="#ccc"] {
      stroke: #2a2a2a;
    }

    body.dark .eco-deploy-card {
      background: #1e1e1e;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }

    body.dark .eco-deploy-card-desc {
      color: #888;
    }

    /* ── Responsive ── */
    @media (max-width: 1024px) {
      .eco-deploy {
        padding: 0 40px 64px 40px;
      }

      .eco-deploy-inner {
        gap: 36px;
      }

      .eco-deploy-heading {
        font-size: 26px;
      }

      .eco-orbit {
        width: 260px;
        height: 260px;
      }

      .eco-orbit-center {
        width: 72px;
        height: 72px;
      }

      .eco-orbit-caduceus {
        width: 32px;
      }

      .eco-orbit-icon {
        width: 52px;
        height: 52px;
        border-radius: 12px;
      }
    }

    @media (max-width: 768px) {
      .eco-deploy {
        padding: 0 24px 48px 24px;
      }

      .eco-deploy-inner {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .eco-orbit {
        width: 240px;
        height: 240px;
        align-self: center;
        margin: 0 auto;
      }

      .eco-deploy-card {
        max-width: 100%;
      }

      .eco-deploy-card-img-wrap {
        height: 220px;
      }
    }

    /* ══════════════════════════════════════════
   LIFECYCLE STAGES — Deploy Treat Record Review Replenish
   Figma: alternating image-left / text-right rows
   with A-badge, vertical spacing, tech-bg
══════════════════════════════════════════ */
    .eco-lifecycle {
      position: relative;
      padding: 0 80px 80px 80px;
      overflow: hidden;
    }

    .eco-lifecycle-inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    /* ── Single row ── */
    .eco-lc-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      padding: 56px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .eco-lc-row:last-child {
      border-bottom: none;
    }

    /* Reversed layout: text left, image right */
    .eco-lc-row--reverse {
      direction: rtl;
      /* flip column order */
    }

    .eco-lc-row--reverse>* {
      direction: ltr;
      /* restore text direction inside */
    }

    /* ── Image cell ── */
    .eco-lc-img-wrap {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 6px 28px rgba(0, 0, 0, 0.12);
      aspect-ratio: 4 / 3;
      background: #e8e4df;
    }

    /* "A" badge — orange map-pin style as in Figma */
    .eco-lc-badge {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 3;
      width: 34px;
      height: 34px;
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
      background: #e05a20;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    }

    .eco-lc-badge::after {
      content: attr(aria-label);
      /* fallback */
      display: none;
    }

    /* Inner letter — counter-rotate so "A" reads correctly */
    /* .eco-lc-badge::before {
  content: 'A';
  display: block;
  transform: rotate(45deg);
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: var(--content-size);
  color: #ffffff;
  line-height: 1;
} */

    .eco-lc-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform 0.45s ease;
    }

    /* Mirror image for Review (reuse same asset) */
    .eco-lc-img--flip {
      transform: scaleX(-1);
    }

    .eco-lc-img-wrap:hover .eco-lc-img {
      transform: scale(1.04);
    }

    .eco-lc-img-wrap:hover .eco-lc-img--flip {
      transform: scaleX(-1) scale(1.04);
    }

    /* ── Text cell ── */
    .eco-lc-text {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .eco-lc-title {
      font-family: 'Inter', sans-serif;
      font-weight: 900;
      font-size: var(--heading-size);
      color: #8b1a1a;
      margin: 0 0 6px 0;
      letter-spacing: -0.5px;
      line-height: 1.1;
    }

    .eco-lc-subtitle {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: 16px;
      color: #0d0d0d;
      margin: 0 0 16px 0;
      line-height: 1.35;
    }

    .eco-lc-desc {
      font-family: 'Inter', sans-serif;
      font-size: var(--content-size);
      color: #555;
      line-height: 1.9;
      margin: 0;
    }

    /* ── Dark mode ── */
    body.dark .eco-lc-row {
      border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    body.dark .eco-lc-img-wrap {
      background: #2a2a2a;
      box-shadow: 0 6px 28px rgba(0, 0, 0, 0.4);
    }

    body.dark .eco-lc-subtitle {
      color: #e0e0e0;
    }

    body.dark .eco-lc-desc {
      color: #888;
    }

    /* ── Responsive ── */
    @media (max-width: 1024px) {
      .eco-lifecycle {
        padding: 0 40px 64px 40px;
      }

      .eco-lc-row {
        gap: 36px;
        padding: 44px 0;
      }

      .eco-lc-title {
        font-size: var(--heading-size);
      }
    }

    @media (max-width: 768px) {
      .eco-lifecycle {
        padding: 0 24px 48px 24px;
      }

      .eco-lc-row,
      .eco-lc-row--reverse {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: 24px;
        padding: 36px 0;
      }

      /* Image always on top on mobile */
      .eco-lc-row--reverse .eco-lc-img-wrap {
        order: -1;
      }

      .eco-lc-title {
        font-size: 26px;
      }

      .eco-lc-desc {
        max-width: 100%;
      }
    }

    /* ══════════════════════════════════════════
   RAPID TACTICAL — PRODUCTS.CSS
   Products page layout, matching Figma
   References: HOME SCREEN LIGHT Figma
══════════════════════════════════════════ */

    /* ────────────────────────────
   PRODUCTS HERO BANNER
   Full-bleed real image, cover fit,
   subtle bottom gradient like Figma
──────────────────────────── */
    .prod-hero {
      position: relative;
      width: 100%;
      height: 500px;
      overflow: hidden;
      background: #111;
      /* fallback while image loads */
    }

    /* The actual image — fills the section and crops cleanly */
    .prod-hero-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
      z-index: 0;
    }

    /* Gradient overlay — darkens bottom edge like Figma */
    .prod-hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom,
          rgba(0, 0, 0, 0.08) 0%,
          rgba(0, 0, 0, 0.10) 45%,
          rgba(0, 0, 0, 0.55) 85%,
          rgba(0, 0, 0, 0.75) 100%);
      z-index: 1;
      pointer-events: none;
    }

    /* ────────────────────────────
   DEPLOYMENT CAPABILITY ROW
   Two-column: left card + right text
──────────────────────────── */
    .prod-deploy-section {
      display: flex;
      align-items: stretch;
      gap: 0;
      padding: 64px 64px 48px 64px;
      background: transparent;
    }

    /* Left card */
    .prod-deploy-left {
      flex: 0 0 auto;
      background: #ffffff;
      border-radius: 14px;
      overflow: visible;
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 0;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
      margin-right: 48px;
      align-self: flex-start;
      height: auto;
      width: 450px;
      min-height: 280px;
    }

    /* Kit label — visible below the image */
    .prod-deploy-kit-label {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: var(--heading-size);
      color: #0d0d0d;
      letter-spacing: 0.2px;
      margin-top: 12px;
      padding: 0;
      flex-shrink: 0;
      z-index: 100;
      margin-top: -121px;
      color: #fff;
      margin-left: 65px;
    }

    /* Kit image wrapper — fixed height so label is never squeezed out */
    .prod-deploy-kit-img-wrap {
      width: 100%;
      flex: 0 0 220px;
      height: 220px;
      overflow: hidden;
      border-radius: 8px;
      position: relative;
      /* background-image removed: rendered as <img> via get_theme_mod */
    }

    /* Kit image fills the wrapper absolutely */
    .prod-deploy-kit-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
      border-radius: 8px;
    }

    .prod-deploy-kit-placeholder {
      width: 100%;
      height: 140px;
      border-radius: 10px;
      /* background: linear-gradient(135deg, #e8e0d0 0%, #c8bca4 100%); */
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: var(--content-size);
      color: #666;
      border: 1.5px dashed #b0a090;
      letter-spacing: 0.5px;
      background-image: url("images/product_kit-type.png");
    }

    /* Right: text panel */
    .prod-deploy-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      max-width: 850px;
    }

    .prod-deploy-heading {
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: var(--heading-size);
      color: #0d0d0d;
      line-height: 1.18;
      letter-spacing: -0.4px;
      margin-bottom: 16px;
      text-shadow: none;
      /* no text shadow needed here */
    }

    .prod-deploy-desc {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: 14.5px;
      color: #444;
      line-height: 1.75;
      /* max-width: 520px; */
    }

    /* ────────────────────────────
   PRODUCTS GRID SECTION
──────────────────────────── */
    .prod-grid-section {
      padding: 0 64px 64px 64px;
    }

    /* Filter + sort toolbar */
    .prod-filter-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 0;
      margin-bottom: 32px;
      border-top: 1px solid #e8e8e8;
      border-bottom: 1px solid #e8e8e8;
    }

    .prod-filter-btn,
    .prod-sort-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: transparent;
      border: 1.5px solid #d0d0d0;
      border-radius: 8px;
      padding: 9px 18px;
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      font-weight: 500;
      color: #333;
      cursor: pointer;
      transition: border-color 0.15s ease, background 0.15s ease;
    }

    .prod-filter-btn:hover,
    .prod-sort-btn:hover {
      border-color: #8b1a1a;
      color: #8b1a1a;
      background: rgba(139, 26, 26, 0.04);
    }

    .prod-showing-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      text-align: center;
    }

    .prod-showing-title {
      font-family: 'Inter', sans-serif;
      font-weight: 600;
      font-size: var(--content-size);
      color: #1a1a1a;
    }

    .prod-showing-count {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: 12px;
      color: #888;
      letter-spacing: 0.3px;
    }

    /* Product cards 3-column grid */
    .prod-cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    /* Individual Product Card */
    .prod-card {
      background: #ffffff;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
      border: 1px solid #f0f0f0;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      display: flex;
      flex-direction: column;
      height: auto;
    }

    .prod-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
    }

    /* Card image wrapper */
    .prod-card-img-wrap {
      width: 100%;
      height: 300px;
      overflow: hidden;
      position: relative;
    }

    /* Image placeholder fills the wrapper */
    .prod-card-img-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    /* Actual product image fills the wrap fully */
    .prod-card-img-placeholder img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
    }

    .prod-card-img-placeholder--dark {
      background: linear-gradient(145deg, #3a3530 0%, #2a2520 100%);
    }

    .prod-card-img-placeholder--red {
      background: linear-gradient(145deg, #8b1a1a 0%, #6a1212 100%);
    }

    .prod-card-placeholder-content {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 24px;
    }

    .prod-placeholder-box {
      width: 120px;
      height: 160px;
      border-radius: 12px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 12px 8px;
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: var(--content-size);
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    /* CFAK backpack shape — olive/military green */
    .prod-placeholder-cfak {
      background: linear-gradient(160deg, #7a7a50 0%, #5a5a38 60%, #4a4a2a 100%);
      color: rgba(255, 255, 255, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: inset 0 -2px 8px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(0, 0, 0, 0.15);
      position: relative;
    }

    .prod-placeholder-cfak::before {
      content: '';
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 50px;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.10);
      border: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* IFAK Medium — darker tactical bag */
    .prod-placeholder-ifak-m {
      background: linear-gradient(160deg, #4a4a38 0%, #3a3a28 60%, #2a2a18 100%);
      color: rgba(255, 255, 255, 0.80);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: inset 0 -2px 8px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.25);
      width: 100px;
      height: 140px;
      position: relative;
    }

    .prod-placeholder-ifak-m::before {
      content: '';
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 32px;
      height: 40px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.10);
    }

    /* IFAK Small — red accent bag */
    .prod-placeholder-ifak-s {
      background: linear-gradient(160deg, #c0302a 0%, #8b1a1a 60%, #6a1212 100%);
      color: rgba(255, 255, 255, 0.90);
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: inset 0 -2px 8px rgba(0, 0, 0, 0.25), 0 8px 20px rgba(139, 26, 26, 0.3);
      width: 90px;
      height: 120px;
      position: relative;
    }

    .prod-placeholder-ifak-s::before {
      content: '';
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 28px;
      height: 32px;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* Card body — title, description, link */
    .prod-card-body {
      padding: 20px 22px 24px 22px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
    }

    .prod-card-title {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: var(--subheading-size);
      color: #0d0d0d;
      letter-spacing: 0.1px;
      line-height: 1.2;
    }

    .prod-card-desc {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: var(--content-size);
      color: #555;
      line-height: 1.7;
      flex: 1;
    }

    .prod-card-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      font-weight: 600;
      color: #0d0d0d;
      text-decoration: none;
      transition: color 0.15s ease;
      margin-top: 4px;
      width: fit-content;
    }

    .prod-card-link:hover {
      color: #8b1a1a;
    }

    /* Featured card subtle top border accent */
    .prod-card--featured {
      border-top: 3px solid #8b1a1a;
    }

    .prod-card--accent {
      border-top: 3px solid #c0302a;
    }

    /* ────────────────────────────
   MOBILE APP SECTION
   Left: phone placeholder
   Right: description
──────────────────────────── */
    .prod-app-section {
      display: flex;
      align-items: center;
      gap: 52px;
      padding: 32px 64px 72px 64px;
    }

    /* Phone placeholder */
    .prod-app-img-wrap {
      flex: 0 0 220px;
    }

    .prod-app-phone-placeholder {
      width: 160px;
      height: 260px;
      background: #0d0d0d;
      border-radius: 28px;
      border: 8px solid #232323;
      box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.05);
      display: flex;
      align-items: stretch;
      overflow: hidden;
      position: relative;
    }

    .prod-app-phone-screen {
      flex: 1;
      background: #f2f2f2;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 10px 16px 10px;
      gap: 8px;
      overflow: hidden;
    }

    .prod-app-phone-notch {
      width: 48px;
      height: 6px;
      background: #d0d0d0;
      border-radius: 3px;
      margin-bottom: 4px;
      flex-shrink: 0;
    }

    .prod-app-phone-content {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: center;
    }

    .prod-app-screen-bar {
      width: 100%;
      height: 8px;
      background: #d8d8d8;
      border-radius: 4px;
    }

    .prod-app-screen-bar--short {
      width: 65%;
      align-self: flex-start;
    }

    .prod-app-screen-bar--medium {
      width: 80%;
      align-self: flex-start;
    }

    .prod-app-screen-icon {
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(139, 26, 26, 0.08);
      border-radius: 10px;
      width: 52px;
      height: 52px;
    }

    /* App section body text */
    .prod-app-body {
      flex: 1;
      max-width: 480px;
    }

    .prod-app-title {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: var(--subheading-size);
      color: #0d0d0d;
      letter-spacing: 0.1px;
      margin-bottom: 12px;
    }

    .prod-app-desc {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: var(--content-size);
      color: #555;
      line-height: 1.75;
      margin-bottom: 18px;
    }

    .prod-app-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: 'Inter', sans-serif;
      font-size: var(--content-size);
      font-weight: 600;
      color: #0d0d0d;
      text-decoration: none;
      transition: color 0.15s ease;
    }

    .prod-app-link:hover {
      color: #8b1a1a;
    }

    /* ────────────────────────────
   BRAND STATEMENT SECTION
   Large centred logo + tagline
   Matches Figma "RAPID TACTICAL"
   wordmark with TM + tagline below
──────────────────────────── */
    .prod-brand-section {
      padding: 80px 64px 60px 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .prod-brand-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 22px;
    }

    .prod-brand-logo-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .prod-brand-logo-link {
      display: inline-flex;
      text-decoration: none;
    }

    .prod-brand-logo-img {
      width: 480px;
      max-width: 100%;
      height: auto;
      display: block;
    }

    .prod-brand-tagline {
      display: none;
      /* tagline is already embedded in the SVG logo */
    }

    /* ────────────────────────────
   DARK MODE OVERRIDES
   Products page sections
──────────────────────────── */

    /* Deploy section */
    body.dark .prod-deploy-left {
      background: #1e1e1e;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    }

    body.dark .prod-deploy-kit-label {
      color: #f0f0f0;
    }

    body.dark .prod-deploy-kit-placeholder {
      background: linear-gradient(135deg, #2a2520 0%, #1e1a14 100%);
      border-color: #4a3a28;
      color: #888;
    }

    body.dark .prod-deploy-heading {
      color: #f0f0f0;
    }

    body.dark .prod-deploy-desc {
      color: #888;
    }

    /* Filter bar */
    body.dark .prod-filter-bar {
      border-color: #2a2a2a;
    }

    body.dark .prod-filter-btn,
    body.dark .prod-sort-btn {
      border-color: #333;
      color: #ccc;
    }

    body.dark .prod-filter-btn:hover,
    body.dark .prod-sort-btn:hover {
      border-color: #8b1a1a;
      color: #8b1a1a;
      background: rgba(139, 26, 26, 0.08);
    }

    body.dark .prod-showing-title {
      color: #e0e0e0;
    }

    body.dark .prod-showing-count {
      color: #666;
    }

    /* Product cards */
    body.dark .prod-card {
      background: #1e1e1e;
      border-color: #2a2a2a;
      box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
    }

    body.dark .prod-card:hover {
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }

    body.dark .prod-card-title {
      color: #f0f0f0;
    }

    body.dark .prod-card-desc {
      color: #888;
    }

    body.dark .prod-card-link {
      color: #ddd;
    }

    body.dark .prod-card-link:hover {
      color: #e03030;
    }

    /* App section */
    body.dark .prod-app-phone-placeholder {
      border-color: #1e1e1e;
    }

    body.dark .prod-app-phone-screen {
      background: #2a2a2a;
    }

    body.dark .prod-app-phone-notch {
      background: #1a1a1a;
    }

    body.dark .prod-app-screen-bar {
      background: #3a3a3a;
    }

    body.dark .prod-app-title {
      color: #f0f0f0;
    }

    body.dark .prod-app-desc {
      color: #888;
    }

    body.dark .prod-app-link {
      color: #ddd;
    }

    body.dark .prod-app-link:hover {
      color: #e03030;
    }

    /* Brand section */
    body.dark .prod-brand-tagline {
      color: #444;
    }

    /* ────────────────────────────
   RESPONSIVE — compact at 768px
──────────────────────────── */
    @media (max-width: 900px) {

      .prod-hero {
        height: 340px;
      }

      .prod-deploy-section {
        flex-direction: column;
        padding: 40px 32px 32px 32px;
        gap: 28px;
      }

      .prod-deploy-left {
        margin-right: 0;
        flex: unset;
        width: 100%;
      }

      .prod-grid-section {
        padding: 0 32px 48px 32px;
      }

      .prod-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }

      .prod-app-section {
        flex-direction: column;
        padding: 32px 32px 48px 32px;
        gap: 32px;
      }

      .prod-brand-section {
        padding: 48px 32px 40px 32px;
      }

      .prod-brand-logo-img {
        width: 280px;
      }

      .kit-medium-left,
      .kit-medium-right,
      .kit-tiny {
        display: none;
      }
    }

    @media (min-width: 901px) and (max-width: 1100px) {
      .prod-cards-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* ══════════════════════════════════════════
   LEGAL.CSS — Shared: Terms & Privacy pages
   Clean, readable legal document layout
══════════════════════════════════════════ */

    /* Page wrapper */
    .legal-page {
      max-width: 860px;
      margin: 0 auto;
      padding: 0 48px 80px 48px;
    }

    /* Page hero title block */
    .legal-hero {
      padding: 52px 0 44px 0;
      border-bottom: 1px solid #e8e8e8;
      margin-bottom: 48px;
    }

    .legal-label {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 3px;
      color: #8b1a1a;
      text-transform: uppercase;
      display: block;
      margin-bottom: 12px;
    }

    .legal-title {
      font-family: 'Inter', sans-serif;
      font-weight: 900;
      font-size: var(--heading-size);
      color: #0d0d0d;
      letter-spacing: -0.8px;
      line-height: 1.1;
      margin: 0 0 16px 0;
    }

    .legal-meta {
      font-family: 'Inter', sans-serif;
      font-size: var(--content-size);
      color: #888;
      line-height: 1.6;
    }

    .legal-meta strong {
      color: #555;
      font-weight: 600;
    }

    /* Intro paragraph */
    .legal-intro {
      font-family: 'Inter', sans-serif;
      font-size: var(--content-size);
      color: #555;
      line-height: 1.8;
      margin-bottom: 40px;
      padding: 20px 24px;
      background: rgba(139, 26, 26, 0.04);
      border-left: 3px solid #8b1a1a;
      border-radius: 0 8px 8px 0;
    }

    /* Individual section */
    .legal-section {
      margin-bottom: 40px;
    }

    .legal-section-heading {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: var(--subheading-size);
      color: #0d0d0d;
      margin: 0 0 12px 0;
      display: flex;
      align-items: baseline;
      gap: 10px;
    }

    .legal-section-num {
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: 12px;
      color: #8b1a1a;
      letter-spacing: 0.5px;
      min-width: 20px;
    }

    .legal-section p {
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      color: #444;
      line-height: 1.85;
      margin: 0 0 10px 0;
    }

    .legal-section ul,
    .legal-section ol {
      margin: 8px 0 10px 0;
      padding-left: 22px;
    }

    .legal-section li {
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      color: #444;
      line-height: 1.75;
      margin-bottom: 4px;
    }

    .legal-section a {
      color: #8b1a1a;
      text-decoration: none;
      font-weight: 500;
    }

    .legal-section a:hover {
      text-decoration: underline;
    }

    /* Divider between sections */
    .legal-divider {
      width: 100%;
      height: 1px;
      background: #f0f0f0;
      margin: 0 0 40px 0;
    }

    /* Brand section */
    .legal-brand-section {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 64px 0 48px 0;
    }

    .legal-brand-link {
      display: inline-flex;
      text-decoration: none;
    }

    .legal-brand-img {
      width: 480px;
      max-width: 100%;
      height: auto;
      display: block;
    }

    /* ── Dark mode ── */
    body.dark .legal-hero {
      border-bottom-color: #2a2a2a;
    }

    body.dark .legal-title {
      color: #f0f0f0;
    }

    body.dark .legal-meta {
      color: #666;
    }

    body.dark .legal-meta strong {
      color: #aaa;
    }

    body.dark .legal-intro {
      background: rgba(139, 26, 26, 0.08);
      color: #aaa;
    }

    body.dark .legal-section-heading {
      color: #e8e8e8;
    }

    body.dark .legal-section p,
    body.dark .legal-section li {
      color: #888;
    }

    body.dark .legal-divider {
      background: #2a2a2a;
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {
      .legal-page {
        padding: 0 24px 60px 24px;
      }

      .legal-title {
        font-size: 28px;
      }

      .legal-hero {
        padding: 36px 0 32px 0;
      }
    }

    /* ══════════════════════════════════════════
   CFAK.CSS — Product Detail Page
   Matches "CFAK LIGHT" Figma screen
══════════════════════════════════════════ */

    /* ── Page wrapper ── */
    .cfak-page {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 48px;
    }

    /* ── Breadcrumb ── */
    .cfak-breadcrumb {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 20px 0 24px 0;
      font-family: 'Inter', sans-serif;
      font-size: 12.5px;
      color: #888;
    }

    .breadcrumb-link {
      color: #888;
      text-decoration: none;
      transition: color 0.15s ease;
    }

    .breadcrumb-link:hover {
      color: #8b1a1a;
    }

    .breadcrumb-sep {
      color: #bbb;
    }

    .breadcrumb-current {
      color: #333;
      font-weight: 600;
    }

    /* ══════════════════════════════════════════
   PRODUCT LAYOUT
   Left: gallery (sticky)  Right: details
══════════════════════════════════════════ */
    .cfak-layout {
      display: grid;
      grid-template-columns: 420px 1fr;
      gap: 60px;
      align-items: start;
      padding-bottom: 80px;
    }

    /* ────────────────────────────
   LEFT COLUMN — Gallery
──────────────────────────── */
    .cfak-gallery {
      position: sticky;
      top: 90px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Main image box */
    .cfak-main-img-wrap {
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 16px;
      overflow: hidden;
      background: #f0ede8;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cfak-main-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      transition: transform 0.35s ease;
    }

    .cfak-main-img-wrap:hover .cfak-main-img {
      transform: scale(1.04);
    }

    /* Thumbnail strip */
    .cfak-thumbs {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .cfak-thumb {
      width: 64px;
      height: 64px;
      border-radius: 10px;
      overflow: hidden;
      border: 2px solid transparent;
      padding: 0;
      cursor: pointer;
      background: #f0ede8;
      transition: border-color 0.15s ease, transform 0.15s ease;
      flex-shrink: 0;
    }

    .cfak-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .cfak-thumb:hover {
      border-color: #bbb;
      transform: translateY(-1px);
    }

    .cfak-thumb--active {
      border-color: #8b1a1a !important;
    }

    /* Colour selector */
    .cfak-colors,
    .cfak-sizes {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .cfak-option-label {
      font-family: 'Inter', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: #999;
      text-transform: uppercase;
    }

    .cfak-color-swatches {
      display: flex;
      gap: 10px;
    }

    .cfak-swatch {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2.5px solid transparent;
      cursor: pointer;
      padding: 0;
      transition: transform 0.15s ease, border-color 0.15s ease;
      outline: none;
    }

    .cfak-swatch:hover {
      transform: scale(1.15);
    }

    .cfak-swatch--active {
      border-color: #8b1a1a !important;
      box-shadow: 0 0 0 2px rgba(139, 26, 26, 0.20);
    }

    .cfak-swatch--olive {
      background: #6b7a4a;
    }

    .cfak-swatch--black {
      background: #1a1a1a;
    }

    .cfak-swatch--coyote {
      background: #b89b6a;
    }

    /* Size buttons */
    .cfak-size-btns {
      display: flex;
      gap: 8px;
    }

    .cfak-size-btn {
      min-width: 40px;
      height: 40px;
      padding: 0 14px;
      border-radius: 8px;
      border: 1.5px solid #d0d0d0;
      background: transparent;
      font-family: 'Inter', sans-serif;
      font-size: var(--content-size);
      font-weight: 600;
      color: #333;
      cursor: pointer;
      transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    }

    .cfak-size-btn:hover {
      border-color: #8b1a1a;
      color: #8b1a1a;
    }

    .cfak-size-btn--active {
      border-color: #8b1a1a;
      background: #8b1a1a;
      color: #ffffff;
    }

    /* ────────────────────────────
   RIGHT COLUMN — Details
──────────────────────────── */
    .cfak-details {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    /* Title block */
    .cfak-title-block {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .cfak-subtitle {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.5px;
      color: #c0302a;
      text-transform: uppercase;
      margin: 0;
    }

    .cfak-name {
      font-family: 'Inter', sans-serif;
      font-weight: 900;
      font-size: var(--heading-size);
      color: #0d0d0d;
      letter-spacing: -1px;
      line-height: 1.05;
      margin: 4px 0 6px 0;
    }

    /* Star rating */
    .cfak-rating {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .cfak-stars {
      color: #f5a623;
      font-size: 16px;
      letter-spacing: 1px;
      line-height: 1;
    }

    .cfak-star-empty {
      color: #d0d0d0;
    }

    .cfak-review-count {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      color: #888;
    }

    /* Product description */
    .cfak-desc {
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      color: #444;
      line-height: 1.75;
    }

    /* ── Specs block ── */
    .cfak-specs-block {
      border-top: 1px solid #e8e8e8;
      padding-top: 20px;
    }

    .cfak-specs-heading {
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: var(--content-size);
      color: #0d0d0d;
      letter-spacing: 0.2px;
      margin: 0 0 16px 0;
    }

    /* 2-column spec grid */
    .cfak-specs-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px 24px;
      margin: 0;
    }

    .cfak-spec-item {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .cfak-spec-item--wide {
      grid-column: 1 / -1;
    }

    .cfak-spec-item dt {
      font-family: 'Inter', sans-serif;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.8px;
      color: #999;
      text-transform: uppercase;
    }

    .cfak-spec-item dd {
      font-family: 'Inter', sans-serif;
      font-size: var(--content-size);
      color: #333;
      line-height: 1.5;
      margin: 0;
    }

    /* ── Action buttons ── */
    .cfak-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      padding-top: 8px;
    }

    .cfak-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 32px;
      border-radius: 8px;
      font-family: 'Inter', sans-serif;
      font-size: 13.5px;
      font-weight: 700;
      text-decoration: none;
      transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
      letter-spacing: 0.3px;
    }

    .cfak-btn--primary {
      background: #8b1a1a;
      color: #ffffff;
      box-shadow: 0 4px 16px rgba(139, 26, 26, 0.28);
    }

    .cfak-btn--primary:hover {
      background: #7a1616;
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(139, 26, 26, 0.38);
    }

    .cfak-btn--secondary {
      background: transparent;
      color: #555;
      border: 1.5px solid #d0d0d0;
    }

    .cfak-btn--secondary:hover {
      border-color: #8b1a1a;
      color: #8b1a1a;
    }

    /* ══════════════════════════════════════════
   BRAND SECTION
══════════════════════════════════════════ */
    .cfak-brand-section {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 64px 0 48px 0;
    }

    .cfak-brand-link {
      display: inline-flex;
      text-decoration: none;
    }

    .cfak-brand-img {
      width: 520px;
      max-width: 100%;
      height: auto;
      display: block;
    }

    /* ══════════════════════════════════════════
   DARK MODE
══════════════════════════════════════════ */
    body.dark .cfak-main-img-wrap {
      background: #2a2a2a;
    }

    body.dark .cfak-thumb {
      background: #2a2a2a;
    }

    body.dark .cfak-name {
      color: #f0f0f0;
    }

    body.dark .cfak-desc {
      color: #aaa;
    }

    body.dark .cfak-specs-heading {
      color: #e0e0e0;
    }

    body.dark .cfak-specs-block {
      border-top-color: #2a2a2a;
    }

    body.dark .cfak-spec-item dt {
      color: #666;
    }

    body.dark .cfak-spec-item dd {
      color: #ccc;
    }

    body.dark .cfak-size-btn {
      border-color: #333;
      color: #ccc;
    }

    body.dark .cfak-size-btn--active {
      background: #8b1a1a;
      color: #fff;
      border-color: #8b1a1a;
    }

    body.dark .breadcrumb-current {
      color: #ddd;
    }

    body.dark .cfak-btn--secondary {
      border-color: #333;
      color: #aaa;
    }

    body.dark .cfak-btn--secondary:hover {
      border-color: #8b1a1a;
      color: #e03030;
    }

    /* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
    @media (max-width: 960px) {
      .cfak-layout {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .cfak-gallery {
        position: static;
      }

      .cfak-page {
        padding: 0 24px;
      }

      .cfak-name {
        font-size: 32px;
      }

      .cfak-brand-img {
        width: 280px;
      }
    }

    .cfak-specs-grid {
      grid-template-columns: 1fr;
    }

    /* ────────────────────────────
    REQUEST DEMO SECTION
    ──────────────────────────── */
    .demo-section {
      padding: 80px 0 100px;
      position: relative;
      width: 100%;
    }

    .demo-container {
      max-width: 100%;
      margin: 0;
      padding: 0 40px;
    }

    .demo-header {
      text-align: center;
      margin-bottom: 60px;
    }

    .demo-heading {
      font-family: 'Inter', sans-serif;
      font-weight: 800;
      font-size: var(--heading-size);
      line-height: 1.1;
      letter-spacing: -1px;
      color: #0d0d0d;
      margin-bottom: 24px;
    }

    .demo-subtext {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: 16px;
      color: #666;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.6;
    }

    .demo-grid {
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 60px;
      align-items: center;
    }

    .demo-visual {
      width: 100%;
    }

    .demo-img-card {
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    .demo-img-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .demo-form-wrap {
      background: #f9f9f9;
      padding: 60px;
      border-radius: 24px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }

    .demo-form .form-group {
      margin-bottom: 24px;
    }

    .demo-form .form-label {
      font-weight: 600;
      font-size: var(--content-size);
      margin-bottom: 8px;
    }

    .demo-form .form-input {
      background: #fff;
      border: 1.5px solid #e0e0e0;
      border-radius: 8px;
      padding: 12px 16px;
      width: 100%;
      box-sizing: border-box;
    }

    .demo-form .form-input:focus {
      border-color: #8b1a1a;
      outline: none;
    }

    /* Responsive Demo */
    @media (max-width: 900px) {
      .demo-section {
        padding: 60px 24px;
      }

      .demo-heading {
        font-size: 32px;
      }

      .demo-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .demo-visual {
        order: 2;
      }

      .demo-form-wrap {
        order: 1;
        padding: 30px 20px;
      }
    }

    /* ── Dark mode Demo ── */
    body.dark .demo-section {
      background: transparent !important;
    }

    body.dark .demo-heading {
      color: #f0f0f0 !important;
    }

    body.dark .demo-subtext {
      color: #aaa !important;
    }

    body.dark .demo-form-wrap {
      background: #1e1e1e !important;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
    }

    body.dark .demo-form .form-label {
      color: #fff !important;
    }

    body.dark .demo-form .form-input {
      background: #2a2a2a !important;
      border: 1px solid #3d3d3d !important;
      color: #f0f0f0 !important;
    }

    body.dark .demo-form .form-input:focus {
      border-color: #e03030 !important;
    }

    button#show-form-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #8b1a1a;
      color: #ffffff;
      border: none;
      padding: 15px 32px;
      border-radius: 8px;
      font-family: 'Inter', sans-serif;
      /* font-size: var(--content-size); */
      font-weight: 700;
      /* letter-spacing: 1.8px; */
      text-transform: uppercase;
      cursor: pointer;
      /* transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; */
      box-shadow: 0 4px 16px rgba(139, 26, 26, 0.30);
    }