/* ============================================================
       DESIGN TOKENS — extracted from Framer project (Phase 2)
    ============================================================ */
    :root {
      /* Primary brand */
      --color-brand:        #5B1A2E;
      --color-brand-deep:   #4A1525;
      --color-brand-dark:   #3A1019;

      /* Base */
      --color-black:        #151515;
      --color-jet:          #191919;

      /* Greys */
      --color-dim:          #5C5C5C;
      --color-silver:       #A7A3A2;
      --color-light:        #D1D1D1;
      --color-off-white:    #F6F6F6;
      --color-white:        #FFFFFF;

      /* Transparencies */
      --color-black-10:     rgba(21,21,21,0.10);
      --color-black-30:     rgba(21,21,21,0.30);
      --color-black-60:     rgba(21,21,21,0.60);
      --color-black-85:     rgba(21,21,21,0.85);
      --color-white-30:     rgba(255,255,255,0.30);
      --color-dim-20:       rgba(92,92,92,0.20);
      --color-dim-50:       rgba(92,92,92,0.50);

      /* Typography */
      --font-heading: 'Mona Sans', sans-serif;
      --font-body:    'Geist', sans-serif;
      --font-mono:    'JetBrains Mono', monospace;

      /* Type scale */
      --text-h1:    clamp(44px, 5.5vw, 72px);
      --text-h2:    clamp(32px, 4vw,   58px);
      --text-h2-sm: clamp(24px, 2.8vw, 36px);
      --text-h3:    clamp(28px, 3vw,   42px);
      --text-h5:    clamp(20px, 2.2vw, 32px);
      --text-h6:    clamp(16px, 1.8vw, 28px);
      --text-body:  18px;
      --text-lead:  16px;
      --text-sm:    14px;
      --text-xs:    12px;
      --text-base:  16px;

      /* Layout */
      --container:       1360px;
      --container-wide:  1880px;
      --container-px:    30px;
      --section-pad:     clamp(60px, 6vw, 100px);
      --radius:          6px;
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: auto; } /* Lenis handles smooth scroll */

    body {
      font-family: var(--font-body);
      font-size: var(--text-body);
      line-height: 1.2;
      color: var(--color-black);
      background: var(--color-white);
      overflow-x: hidden;
    }

    img { display: block; max-width: 100%; }
    a   { color: inherit; text-decoration: none; }
    ul  { list-style: none; }

    /* ============================================================
       TYPOGRAPHY UTILITIES
    ============================================================ */
    .h1 { font-family: var(--font-heading); font-size: var(--text-h1); font-weight: 600; line-height: 1em; letter-spacing: 0; }
    .h2 { font-family: var(--font-heading); font-size: var(--text-h2); font-weight: 600; line-height: 1.1em; letter-spacing: -0.04em; }
    .h3 { font-family: var(--font-heading); font-size: var(--text-h3); font-weight: 600; line-height: 1.2em; }
    .h5 { font-family: var(--font-heading); font-size: var(--text-h5); font-weight: 600; line-height: 1.2em; }
    .h6 { font-family: var(--font-heading); font-size: var(--text-h6); font-weight: 600; line-height: 1.1em; letter-spacing: -0.02em; }
    .body  { font-size: var(--text-body);  line-height: 1.2em; }
    .lead  { font-size: var(--text-lead);  line-height: 1.3em; }
    .sm    { font-size: var(--text-sm);    line-height: 1.2em; }
    .mono  { font-family: var(--font-mono); font-size: var(--text-sm); }
    .upper { text-transform: uppercase; letter-spacing: 0.08em; }

    /* ============================================================
       LAYOUT UTILITIES
    ============================================================ */
    .container {
      width: 100%;
      max-width: var(--container);
      margin-inline: auto;
      padding-inline: var(--container-px);
    }
    .container--wide { max-width: var(--container-wide); }

    .section {
      position: relative;
      width: 100%;
      padding-block: var(--section-pad);
      overflow: hidden;
    }
    .section--off-white { background: var(--color-off-white); }
    .section--white     { background: var(--color-white); }
    .section--dark      { background: var(--color-jet); color: var(--color-white); }
    .section--black     { background: var(--color-black); color: var(--color-white); }

    /* Decorative vertical dividers — dashed, opacity 0.12, matching Framer source exactly */
    .has-dividers::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        repeating-linear-gradient(
          90deg,
          transparent 0,
          transparent calc(20% - 0.5px),
          rgba(21,21,21,0.12) calc(20% - 0.5px),
          rgba(21,21,21,0.12) calc(20% + 0.5px)
        );
      /* Dashed effect via mask */
      -webkit-mask-image: repeating-linear-gradient(
        180deg,
        black 0px, black 8px,
        transparent 8px, transparent 14px
      );
      mask-image: repeating-linear-gradient(
        180deg,
        black 0px, black 8px,
        transparent 8px, transparent 14px
      );
      pointer-events: none;
      z-index: 0;
    }
    .has-dividers.section--dark::before,
    .has-dividers.section--black::before {
      background-image:
        repeating-linear-gradient(
          90deg,
          transparent 0,
          transparent calc(20% - 0.5px),
          rgba(246,246,246,0.15) calc(20% - 0.5px),
          rgba(246,246,246,0.15) calc(20% + 0.5px)
        );
    }

    /* Noise texture overlay */
    .noise::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
      background-size: 200px 200px;
      pointer-events: none;
      z-index: 0;
      opacity: 0.6;
    }

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

    /* ============================================================
       COMPONENTS — BADGE
    ============================================================ */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 12px 5px 8px;
      border: 1px solid var(--color-black-30);
      border-radius: 100px;
      font-size: 13px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--color-dim);
      width: fit-content;
      white-space: nowrap;
    }
    .badge::before {
      content: '';
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--color-brand);
      flex-shrink: 0;
    }
    .badge--light {
      border-color: rgba(255,255,255,0.25);
      color: rgba(255,255,255,0.7);
    }
    .badge--light::before { background: var(--color-brand); }

    /* ============================================================
       COMPONENTS — BUTTONS
    ============================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 24px;
      border-radius: var(--radius);
      font-family: var(--font-body);
      font-size: var(--text-sm);
      font-weight: 500;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn:active { transform: translateY(0); }

    .btn--primary {
      background: var(--color-black);
      color: var(--color-white);
      border-color: var(--color-black);
    }
    .btn--primary:hover { background: var(--color-brand); border-color: var(--color-brand); }

    .btn--outline {
      background: transparent;
      color: var(--color-white);
      border-color: rgba(255,255,255,0.3);
    }
    .btn--outline:hover { background: var(--color-white-30); }

    .btn--ghost {
      background: transparent;
      color: var(--color-black);
      border-color: var(--color-black-30);
    }
    .btn--ghost:hover { background: var(--color-black-10); }

    .btn svg { width: 16px; height: 16px; flex-shrink: 0; }

    .btn-scroll {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: var(--text-sm);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-dim);
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
    }
    .btn-scroll::after {
      content: '↓';
      display: inline-block;
      vertical-align: middle;
      position: relative;
      top: -1px;
      line-height: 1;
      animation: bounce 1.5s infinite;
    }
    @keyframes bounce {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(4px); }
    }

    /* ============================================================
       NAVIGATION
    ============================================================ */
    /* ============================================================
       NAV — Full-width mega panel (Pfizer pattern)
    ============================================================ */

    /* ── Header bar ────────────────────────────────────────── */
    .nav-header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1000;
    }

    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 70px;
      max-width: var(--container);
      margin-inline: auto;
      padding: 0 var(--container-px);
      background: rgba(246,246,246,0.0);
      transition: background 0.35s, box-shadow 0.35s, backdrop-filter 0.35s;
      position: relative;
      z-index: 10;
    }

    /* Scrolled state — frosted off-white */
    .nav-header.scrolled {
      background: rgba(246,246,246,0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 1px 0 rgba(0,0,0,0.06);
    }
    .nav-header.scrolled .nav-bar {
      background: transparent;
    }

    /* Logo */
    .nav-bar__logo {
      position: relative;
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .nav-header.scrolled .nav__logo-img--brand { opacity: 1 !important; }
    .nav-header.scrolled .nav__logo-img--white  { opacity: 0 !important; }
    .nav__logo-img--brand { opacity: 1; }
    .nav__logo-img--white { opacity: 0; }

    /* Primary links */
    .nav-bar__links ul {
      display: flex;
      align-items: center;
      gap: 0;
      list-style: none;
      margin: 0; padding: 0;
    }

    .nav-bar__item { position: relative; }

    .nav-bar__link,
    .nav-bar__trigger {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 8px 16px;
      font-size: 15.5px;
      font-weight: 500;
      color: var(--color-black);
      background: none;
      border: none;
      cursor: pointer;
      border-radius: 4px;
      transition: color 0.2s, background 0.2s;
      text-decoration: none;
      white-space: nowrap;
    }
    .nav-bar__link:hover,
    .nav-bar__trigger:hover,
    .nav-bar__trigger.is-open {
      color: var(--color-brand);
      background: rgba(91,26,46,0.06);
    }
    .nav-bar__link.is-active,
    .nav-bar__trigger.is-active { color: var(--color-brand); }

    /* Scrolled — links stay dark on white background */
    .nav-header.scrolled .nav-bar__link,
    .nav-header.scrolled .nav-bar__trigger { color: var(--color-black); }
    .nav-header.scrolled .nav-bar__link:hover,
    .nav-header.scrolled .nav-bar__trigger:hover,
    .nav-header.scrolled .nav-bar__trigger.is-open { color: var(--color-brand); background: rgba(91,26,46,0.06); }

    /* Chevron */
    .nav-bar__trigger svg {
      transition: transform 0.25s;
      flex-shrink: 0;
    }
    .nav-bar__trigger.is-open svg { transform: rotate(180deg); }

    /* Actions */
    .nav-bar__actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* CTA */
    .nav-bar__cta { flex-shrink: 0; }

    /* ── Mega panel ─────────────────────────────────────────── */
    .mega-panel {
      position: absolute;
      top: 70px;
      left: 0; right: 0;
      background: var(--color-jet);
      border-top: 1px solid rgba(255,255,255,0.08);
      z-index: 9;
      /* Animation */
      opacity: 0;
      transform: translateY(-8px);
      pointer-events: none;
      transition: opacity 0.22s cubic-bezier(0.16,1,0.3,1),
                  transform 0.22s cubic-bezier(0.16,1,0.3,1);
    }
    .mega-panel.is-open {
      opacity: 1;
      transform: translateY(0);
      pointer-events: all;
    }
    /* Override hidden attribute — we use .is-open for visibility */
    .mega-panel[hidden] { display: block; }

    .mega-panel__inner {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 0;
      max-width: 1400px;
      margin: 0 auto;
      padding: 40px clamp(20px,4vw,60px) 50px;
    }

    /* Column */
    .mega-col {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding-right: 40px;
    }
    .mega-col:last-child { padding-right: 0; }

    .mega-col__label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(255,255,255,0.35);
      font-family: var(--font-heading);
      font-weight: 600;
      margin-bottom: 10px;
      display: block;
    }

    .mega-col__link {
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.65);
      text-decoration: none;
      padding: 6px 0;
      transition: color 0.15s, padding-left 0.15s;
      border-bottom: none;
    }
    .mega-col__link:hover {
      color: var(--color-white);
      padding-left: 6px;
    }

    /* Featured column */
    .mega-col--featured { border-left: 1px solid rgba(255,255,255,0.06); padding-left: 40px; padding-right: 0; }

    .mega-featured {
      display: flex;
      flex-direction: column;
      gap: 12px;
      text-decoration: none;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      transition: border-color 0.2s;
    }
    .mega-featured:hover { border-color: rgba(91,26,46,0.5); }
    .mega-featured__img {
      width: 100%;
      height: 130px;
      background-size: cover;
      background-position: center;
      filter: brightness(0.75);
    }
    .mega-featured__body {
      padding: 0 14px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .mega-featured__body strong {
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--color-white);
    }
    .mega-featured__body p {
      font-size: 12px;
      color: rgba(255,255,255,0.5);
      line-height: 1.4;
      margin: 0;
    }

    /* Overlay — dims page content when mega is open */
    .mega-overlay {
      position: fixed;
      inset: 70px 0 0 0;
      background: rgba(0,0,0,0.35);
      z-index: 8;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.22s;
    }
    .mega-overlay.is-visible {
      opacity: 1;
      pointer-events: all;
    }

    /* Hamburger */
    .nav__hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
    }
    .nav__hamburger span {
      display: block;
      width: 22px; height: 2px;
      background: var(--color-black);
      transition: background 0.3s;
    }
    .nav-header.scrolled .nav__hamburger span { background: var(--color-black); }

    /* ── Mobile nav ─────────────────────────────────────────── */
    /* ============================================================
       HERO SECTION
    ============================================================ */
    .hero {
      background: var(--color-off-white);
      padding-top: 180px;
      padding-bottom: 50px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* Dark 3D hero variant */
    .hero--3d {
      background: #0d0d0f;
      position: relative;
      overflow: hidden;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      padding-top: 0;
      padding-bottom: 0;
    }

    /* Canvas — fills entire section, sits behind everything */
    .hero__canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }

    /* Gradient — bottom fade so text is readable, top clear for ring */
    .hero__canvas-fade {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(
          to top,
          rgba(13,13,15,0.97) 0%,
          rgba(13,13,15,0.80) 30%,
          rgba(13,13,15,0.20) 60%,
          rgba(13,13,15,0.0) 100%
        ),
        linear-gradient(
          to right,
          rgba(13,13,15,0.50) 0%,
          rgba(13,13,15,0.0) 50%
        );
      pointer-events: none;
      z-index: 1;
    }

    /* Inner container — full height, content pushed to bottom */
    .hero--3d .container.hero__inner {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      flex: 1;
      height: 100%;
      min-height: 100vh;
      padding-top: 100px;
      padding-bottom: clamp(48px, 6vh, 80px);
      gap: 0;
    }

    /* h1 bottom-left, desc+CTA bottom-right */
    .hero--3d .hero__top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px, 5vw, 80px);
      align-items: flex-end;
    }

    .hero--3d .hero__left {
      display: flex;
      flex-direction: column;
      gap: 0;
      align-self: flex-end;
    }

    .hero--3d .hero__left .badge { display: none; }

    .hero--3d .hero__left h1,
    .hero--3d .hero__left .h1 {
      font-size: clamp(36px, 4.2vw, 64px);
      line-height: 1.05;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin: 0;
      color: var(--color-white);
    }

    /* Right column — pinned to right edge */
    .hero--3d .hero__right {
      display: flex;
      flex-direction: column;
      gap: 28px;
      max-width: 360px;
      padding: 0;
      justify-self: end;
      margin-left: auto;
      align-self: flex-end;
    }

    .hero--3d .hero__heritage { display: none; }

    .hero--3d .hero__bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 32px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }

    @media (max-width: 860px) {
      .hero--3d .hero__top {
        grid-template-columns: 1fr;
        gap: 24px;
      }
      .hero--3d .hero__left h1,
      .hero--3d .hero__left .h1 {
        font-size: clamp(40px, 10vw, 64px);
      }
      .hero--3d .hero__right {
        max-width: 100%;
      }
    }

    .hero .container.hero__inner {
      display: flex;
      flex-direction: column;
      gap: 120px;
      flex: 1;
    }

    /* Hero layout: Left=badge+h1, Right=heritage+desc+CTA (matches Framer exactly) */
    .hero__top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 50px;
      align-items: start;
    }

    .hero__left {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* H1 is inside the left column */
    .hero__left h1,
    .hero__left .h1 {
      font-size: clamp(48px, 5.5vw, 72px);
      line-height: 1em;
      letter-spacing: 0px;
      font-weight: 600;
      max-width: 700px;
      margin: 0;
    }

    .hero__right {
      display: flex;
      flex-direction: column;
      gap: 40px;
      max-width: 400px;
      padding-top: 31px;
      padding-bottom: 31px;
      justify-self: end;      /* push to right edge of grid column */
      width: 100%;
    }

    /* Heritage text matches Framer Heading 5 style */
    .hero__heritage {
      font-family: var(--font-heading);
      font-size: 32px;
      font-weight: 600;
      color: var(--color-black);
      line-height: 1.2em;
    }

    .hero__bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      flex-wrap: wrap;
    }

    /* ============================================================
       FOUNDER / VIDEO SECTION
    ============================================================ */
    .founder {
      position: relative;
      padding-block: var(--section-pad);
      background: var(--color-jet);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 60vh;
      overflow: hidden;
    }

    .founder__bg {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg, rgba(91,26,46,0.4) 0%, transparent 60%),
        linear-gradient(to bottom, rgba(21,21,21,0.7), rgba(21,21,21,0.4));
      z-index: 0;
    }

    .founder__inner {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: clamp(80px, 12vw, 160px);
      max-width: 520px;
      padding-top: clamp(80px, 10vw, 160px);
    }

    .founder__card {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .founder__name {
      font-family: var(--font-heading);
      font-size: var(--text-h6);
      font-weight: 600;
      color: var(--color-white);
    }

    .founder__role {
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.5);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .founder__quote {
      font-size: var(--text-body);
      color: rgba(255,255,255,0.85);
      line-height: 1.4;
      font-style: italic;
    }

    /* Cert logos at bottom of video section */
    .founder__certs {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }
    .founder__cert-logo {
      height: 52px;
      width: auto;
      max-width: 66px;
      object-fit: contain;
      opacity: 0.85;
      filter: drop-shadow(0 0 6px rgba(255,255,255,0.25));
      transition: opacity 0.2s, filter 0.2s;
    }
    .founder__cert-logo:hover {
      opacity: 1;
      filter: drop-shadow(0 0 10px rgba(255,255,255,0.45));
    }

    /* ============================================================
       ABOUT SECTION
    ============================================================ */
    .about__top {
      display: grid;
      grid-template-columns: 0.6fr 1fr;
      gap: clamp(40px, 6vw, 80px);
      align-items: start;
      margin-bottom: clamp(60px, 8vw, 100px);
    }

    .about__left { display: flex; flex-direction: column; gap: 30px; }

    .about__avatars {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .avatar {
      width: 36px; height: 36px;
      border-radius: 50%;
      background: var(--color-brand-deep);
      border: 2px solid var(--color-off-white);
      margin-left: -8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 600;
      color: var(--color-white);
      flex-shrink: 0;
    }
    .avatar:first-child { margin-left: 0; }
    .avatar--last {
      background: var(--color-black-60);
      font-size: 10px;
    }

    .about__right {
      display: flex;
      flex-direction: column;
      gap: 24px;
      max-width: 640px;
    }

    .about__ctas {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    /* About circles — 3 in one row, 430px each (Framer exact) */
    .about__cards {
      display: flex;
      gap: 20px;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
    }

    .stat-card {
      width: clamp(260px, 30vw, 430px);
      height: clamp(260px, 30vw, 430px);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 20px;
      padding: clamp(40px, 5vw, 70px) 30px;
      text-align: center;
      flex-shrink: 0;
    }

    .stat-card--border {
      background: var(--color-white);
      border: 1px solid var(--color-black);
    }

    .stat-card--brand {
      background: transparent;
      border: 1px solid var(--color-brand);
      position: relative;
      overflow: clip;
    }

    .stat-card--brand::before { display: none; }

    .stat-card--brand .stat-card__number { color: var(--color-brand); }
    .stat-card--brand .stat-card__label  { color: var(--color-dim); }
    .stat-card--brand .stat-card__year   { color: var(--color-dim); }

    .stat-card--image {
      background: var(--color-black);
      overflow: hidden;
      border: none;
    }

    .stat-card--image img {
      width: 100%; height: 100%;
      object-fit: cover;
      border-radius: 50%;
      filter: brightness(0.8);
    }

    .stat-card__number {
      font-family: var(--font-heading);
      font-size: var(--text-h1);
      font-weight: 600;
      line-height: 1;
      color: var(--color-black);
    }
    .stat-card--brand .stat-card__number { color: var(--color-brand); }

    .stat-card__label {
      font-size: var(--text-lead);
      color: var(--color-dim);
      line-height: 1.3;
      max-width: 200px;
    }

    .stat-card__year {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      color: var(--color-dim);
      letter-spacing: 0.04em;
    }

    .stat-card__rating {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .stat-card__rating-num {
      font-family: var(--font-heading);
      font-size: 22px;
      font-weight: 600;
    }
    .stat-card__rating-max {
      font-size: var(--text-lead);
      color: var(--color-dim);
      padding-top: 4px;
    }

    /* ============================================================
       SERVICES — STICKY SCROLL
    ============================================================ */
    .services__header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 40px;
      margin-bottom: 50px;
    }

    .services__header-left { display: flex; flex-direction: column; gap: 16px; }

    /* Horizontal strip service cards — matches Framer screenshot */
    .services__stack {
      display: flex;
      flex-direction: column;
      gap: 0;
      border-top: 1px solid var(--color-light);
    }

    .service-card {
      display: grid;
      grid-template-columns: 56px 300px 1fr auto auto;
      align-items: center;
      gap: 0 30px;
      padding: 28px 0;
      border-bottom: 1px solid var(--color-light);
      cursor: pointer;
      transition: background 0.2s;
      position: relative;
    }
    .service-card:hover { background: var(--color-off-white); }

    /* Col 1 — Icon/number mark */
    .service-card__icon {
      width: 48px; height: 48px;
      border: 1px solid var(--color-light);
      border-radius: var(--radius);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .service-card__icon svg {
      width: 24px; height: 24px;
      color: var(--color-brand);
    }

    /* Col 2 — Image */
    .service-card__image {
      width: 300px;
      height: 190px;
      border-radius: var(--radius);
      overflow: hidden;
      flex-shrink: 0;
      background: linear-gradient(135deg, var(--color-brand-dark), var(--color-jet));
    }
    .service-card__image img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 0.5s;
    }
    .service-card:hover .service-card__image img { transform: scale(1.04); }
    .service-card__image-placeholder {
      width: 100%; height: 100%;
      background: linear-gradient(135deg, var(--color-brand-dark) 0%, var(--color-jet) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .service-card__image-placeholder span {
      font-family: var(--font-heading);
      font-size: 60px;
      font-weight: 700;
      color: rgba(255,255,255,0.06);
    }

    /* Col 3 — Title + specs */
    .service-card__content {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 8px 0;
    }

    .service-card__title {
      font-family: var(--font-heading);
      font-size: clamp(20px, 2vw, 28px);
      font-weight: 600;
      color: var(--color-black);
      line-height: 1.15;
    }

    .service-card__specs {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .service-card__spec {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: var(--text-sm);
      color: var(--color-dim);
      line-height: 1.3;
    }
    .service-card__spec::before {
      content: '✓';
      color: var(--color-brand);
      flex-shrink: 0;
      font-size: 12px;
      margin-top: 1px;
      font-weight: 700;
    }

    /* Col 4 — "Features" label */
    .service-card__features-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-silver);
      writing-mode: horizontal-tb;
      white-space: nowrap;
      align-self: flex-start;
      padding-top: 8px;
    }

    /* Col 5 — Arrow button */
    .service-card__arrow {
      width: 44px; height: 44px;
      border-radius: var(--radius);
      background: var(--color-brand);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.2s, transform 0.15s;
      color: white;
      text-decoration: none;
    }
    .service-card__arrow:hover { background: var(--color-brand-deep); transform: scale(1.05); }
    .service-card__arrow svg { width: 18px; height: 18px; }

    /* ============================================================
       SERVICES — Sticky scroll stack (Framer pattern)
       Each card is position:sticky with increasing top offset
    ============================================================ */
    .services__sticky-wrap {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .service-card--sticky {
      position: sticky;
      border-radius: var(--radius);
      border: 1px solid var(--color-light);
      margin-bottom: 16px;
      background: var(--color-white);
      transition: box-shadow 0.3s;
    }
    .service-card--sticky:hover {
      box-shadow: 0 8px 40px rgba(0,0,0,0.08);
      background: var(--color-white);
    }
    .service-card--sticky:nth-child(1) { top: 100px; z-index: 1; }
    .service-card--sticky:nth-child(2) { top: 120px; z-index: 2; }
    .service-card--sticky:nth-child(3) { top: 140px; z-index: 3; }
    .service-card--sticky:nth-child(4) { top: 160px; z-index: 4; }

    /* ── CTA equal padding ──────────────────────────────────── */
    .services__cta-section {
      padding-top: clamp(40px, 5vw, 60px);
      padding-bottom: var(--section-pad);
      background: var(--color-white);
    }

    /* ── Product card readability fix ─────────────────────────── */
    .product-card__title { 
      font-size: clamp(13px, 1.2vw, 16px);
      color: var(--color-white);
      padding-bottom: 14px;
    }
    .product-card__label { color: rgba(255,255,255,0.4); }
    .product-card__value { color: rgba(255,255,255,0.8); font-size: 12px; }
    /* Hover expand */
    .product-card {
      transition: flex 0.45s cubic-bezier(0.4,0,0.2,1), background 0.3s;
      cursor: pointer;
    }
    .product-card:hover .product-card__image img { transform: scale(1.06); }
    .product-card__image { transition: height 0.45s cubic-bezier(0.4,0,0.2,1); }
    .product-card:hover .product-card__image { height: 260px; }

    /* ── Industry floating images ─────────────────────────────── */
    .industry-float {
      position: absolute;
      border-radius: 6px;
      overflow: hidden;
      z-index: 1;
      pointer-events: none;
      opacity: 0.9;
      animation: industry-float-bob 6s ease-in-out infinite;
    }
    .industry-float:nth-child(2) { animation-delay: 1.5s; }
    .industry-float:nth-child(3) { animation-delay: 3s; }
    .industry-float:nth-child(4) { animation-delay: 4.5s; }
    .industry-float:nth-child(5) { animation-delay: 2s; }
    @keyframes industry-float-bob {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-10px); }
    }
    .industry-float img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ── Client logo strip ────────────────────────────────────── */
    .clients-section {
      padding-block: clamp(60px,8vw,100px);
      background: var(--color-white);
    }
    .clients__header {
      text-align: center;
      margin-bottom: clamp(40px,5vw,60px);
    }
    .clients__grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border: 1px solid var(--color-light);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .client-card {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 30px;
      border-right: 1px solid var(--color-light);
      border-bottom: 1px solid var(--color-light);
      min-height: 120px;
      transition: background 0.2s;
    }
    .client-card:hover { background: var(--color-off-white); }
    .client-card:nth-child(4n) { border-right: none; }
    .client-card:nth-last-child(-n+4) { border-bottom: none; }
    .client-card__name {
      font-family: var(--font-heading);
      font-size: clamp(14px,1.4vw,18px);
      font-weight: 600;
      color: var(--color-black);
      text-align: center;
      opacity: 0.5;
    }

    /* ── Blog card with background images ─────────────────────── */
    .blog-card__image--photo {
      background: none !important;
    }
    .blog-card__image--photo img {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }

    /* ── Nav nested menus (Level 2 → Level 3 hover) ─────────────── */
    .uNav__sub-group--parent { position: relative; }
    .uNav__sub-group--parent > .uNav__sub-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .uNav__sub-group--parent > .uNav__sub-link::after {
      content: '›';
      font-size: 18px;
      opacity: 0.5;
      flex-shrink: 0;
    }
    .uNav__sub-level3 {
      position: absolute;
      left: calc(100% + 8px);
      top: 0;
      background: #1a1a1a;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.08);
      min-width: 240px;
      padding: 12px 0;
      opacity: 0;
      pointer-events: none;
      transform: translateX(-8px);
      transition: opacity 0.2s, transform 0.2s;
      z-index: 10;
    }
    .uNav__sub-group--parent:hover .uNav__sub-level3 {
      opacity: 1;
      pointer-events: all;
      transform: translateX(0);
    }
    .uNav__sub-level3 .uNav__sub-link {
      padding: 8px 20px;
      font-size: 14px;
    }

    .services__spacer { height: 0; }

    /* Services CTA */
    .services__cta {
      background: var(--color-black);
      border-radius: var(--radius);
      padding: clamp(30px, 4vw, 60px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      flex-wrap: wrap;
      margin-top: 60px;
    }
    .services__cta-text {
      font-family: var(--font-heading);
      font-size: clamp(20px, 2.5vw, 32px);
      font-weight: 600;
      color: var(--color-white);
      max-width: 480px;
    }

    /* ============================================================
       MANUFACTURING — DARK SECTION
    ============================================================ */
    .mfg__header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 40px;
      margin-bottom: clamp(40px, 5vw, 60px);
    }

    .mfg__counter {
      text-align: right;
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 380px;
    }

    .mfg__number {
      font-family: var(--font-heading);
      font-size: var(--text-h1);
      font-weight: 600;
      color: var(--color-white);
    }

    .mfg__image-strip {
      width: 100%;
      height: auto;
      background: var(--color-jet);
      border-radius: var(--radius);
      overflow: hidden;
      margin-bottom: clamp(40px, 5vw, 60px);
    }
    .mfg__image-strip-placeholder {
      font-family: var(--font-heading);
      font-size: clamp(40px, 8vw, 100px);
      font-weight: 700;
      color: rgba(255,255,255,0.06);
      letter-spacing: -0.04em;
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0 30px;
      margin-bottom: 0;
    }

    .product-card {
      border-right: 1px solid rgba(255,255,255,0.08);
      padding: 30px 20px 30px 0;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .product-card:last-child { border-right: none; }

    .product-card__title {
      font-family: var(--font-heading);
      font-size: clamp(16px, 1.6vw, 22px);
      font-weight: 600;
      color: var(--color-white);
      line-height: 1.2;
    }

    .product-card__row { display: flex; flex-direction: column; gap: 4px; }

    .product-card__label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.35);
    }

    .product-card__value {
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.7);
      line-height: 1.3;
    }

    .mfg__split-cta {
      margin-top: 60px;
      border-top: 1px solid rgba(255,255,255,0.1);
      padding-top: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      flex-wrap: wrap;
    }
    .mfg__split-cta-text {
      font-size: var(--text-body);
      color: rgba(255,255,255,0.7);
      max-width: 480px;
    }

    /* ============================================================
       INDUSTRIES — CardShowcase accordion pattern
    ============================================================ */
    .industries__header {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 50px;
    }

    /* Accordion container */
    .industry-showcase {
      display: flex;
      gap: 0;
      width: 100%;
      height: 520px;
      overflow: hidden;
      border-radius: var(--radius);
      border: 1px solid var(--color-light);
    }

    /* Each accordion panel */
    .isc-panel {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
      cursor: pointer;
      transition: flex 0.55s cubic-bezier(0.4, 0, 0.2, 1);
      flex: 1;
      background-color: var(--color-jet);
      background-size: cover;
      background-position: center;
      border-right: 1px solid rgba(255,255,255,0.08);
      min-width: 0;
    }
    .isc-panel:last-child { border-right: none; }

    /* Active panel expands — keep background-image, no bg-color override */
    .isc-panel.active { flex: 4.5; }

    /* Progress bar — left edge, fills upward */
    .isc-progress {
      position: absolute;
      left: 0; bottom: 0;
      width: 2px;
      height: 0%;
      background: var(--color-brand);
      transition: none;
      z-index: 10;
    }
    .isc-panel.active .isc-progress { animation: isc-fill 5s linear forwards; }
    @keyframes isc-fill {
      from { height: 0%; }
      to   { height: 100%; }
    }

    /* Icon at top of panel */
    .isc-icon {
      position: absolute;
      top: 28px; left: 24px;
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      color: var(--color-brand);
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 0.3s 0.15s, transform 0.3s 0.15s;
    }
    .isc-panel.active .isc-icon { opacity: 1; transform: translateY(0); }

    /* Number — top right inactive, top right active */
    .isc-num {
      position: absolute;
      top: 28px; right: 20px;
      font-family: var(--font-mono);
      font-size: 13px;
      color: var(--color-silver);
      letter-spacing: 0.04em;
      transition: opacity 0.25s;
    }

    /* Bottom content area */
    .isc-bottom {
      padding: 24px 24px 28px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: relative;
      z-index: 2;
    }

    /* Vertical title — inactive panels */
    .isc-title-vert {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      transform: rotate(180deg);
      font-family: var(--font-heading);
      font-size: 15px;
      font-weight: 600;
      color: var(--color-black);
      letter-spacing: -0.01em;
      white-space: nowrap;
      transition: opacity 0.25s;
      padding-bottom: 4px;
    }
    .isc-panel.active .isc-title-vert { display: none; }

    /* Horizontal content — active panel only */
    .isc-content {
      display: none;
      flex-direction: column;
      gap: 14px;
    }
    .isc-panel.active .isc-content { display: flex; }

    .isc-title {
      font-family: var(--font-heading);
      font-size: clamp(18px, 1.8vw, 24px);
      font-weight: 600;
      color: var(--color-black);
      line-height: 1.2;
    }

    .isc-tag {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-brand);
    }

    .isc-desc {
      font-size: 14px;
      color: var(--color-dim);
      line-height: 1.45;
      max-width: 340px;
    }

    .isc-specs {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-top: 4px;
    }

    .isc-spec {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 13px;
      color: var(--color-dim);
      line-height: 1.3;
    }
    .isc-spec::before {
      content: '✓';
      color: var(--color-brand);
      font-weight: 700;
      font-size: 11px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .isc-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 500;
      color: var(--color-brand);
      margin-top: 4px;
      transition: gap 0.2s;
    }
    .isc-link:hover { gap: 10px; }
    .isc-link::after { content: '→'; }

    /* Section label dividers between mfg/services */
    .isc-section-label {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--color-silver);
      margin-top: 6px;
      padding-top: 10px;
      border-top: 1px solid var(--color-dim-20);
    }

    .industries__cta {
      text-align: center;
      margin-top: 32px;
    }

    /* Mobile: stack vertically */
    @media (max-width: 768px) {
      .industry-showcase {
        flex-direction: column;
        height: auto;
      }
      .isc-panel { flex: none !important; min-height: 64px; border-right: none; border-bottom: 1px solid var(--color-light); }
      .isc-panel.active { min-height: 320px; }
      .isc-title-vert { writing-mode: horizontal-tb; transform: none; }
      .isc-progress { width: 100%; height: 2px; top: 0; left: 0; bottom: auto; }
      .isc-panel.active .isc-progress { animation: isc-fill-h 5s linear forwards; }
      @keyframes isc-fill-h { from { width: 0%; } to { width: 100%; } }
    }

    /* ============================================================
       WHY CHOOSE
    ============================================================ */
    .ticker-wrap {
      overflow: hidden;
      padding: 20px 0;
      border-top: 1px solid var(--color-light);
      border-bottom: 1px solid var(--color-light);
      margin-bottom: 0;
      background: var(--color-white);
    }

    .ticker-track {
      display: flex;
      gap: 60px;
      width: max-content;
      animation: ticker 30s linear infinite;
    }
    @keyframes ticker {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    .ticker-item {
      display: flex;
      align-items: center;
      gap: 12px;
      white-space: nowrap;
      font-size: var(--text-sm);
      color: var(--color-dim);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .ticker-item::before {
      content: '';
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--color-brand);
      flex-shrink: 0;
    }

    .why-choose__image {
      position: relative;
      background:
        linear-gradient(to right, rgba(21,21,21,0.6), rgba(21,21,21,0.3)),
        var(--color-jet);
      padding-block: clamp(80px, 10vw, 140px);
    }
    .why-choose__image::before { display: none; } /* override section dividers */

    .why-card {
      max-width: 540px;
      background: var(--color-black-60);
      border: 1px solid var(--color-dim-50);
      border-radius: var(--radius);
      padding: clamp(30px, 4vw, 50px);
      display: flex;
      flex-direction: column;
      gap: 24px;
      backdrop-filter: blur(8px);
    }

    .checklist {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .checklist-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.85);
      line-height: 1.3;
    }

    .checklist-item__icon {
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--color-brand);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .checklist-item__icon::after {
      content: '✓';
      font-size: 10px;
      color: white;
      font-weight: 700;
    }

    /* ============================================================
       TESTIMONIALS
    ============================================================ */
    .testimonials__header {
      text-align: center;
      max-width: 700px;
      margin: 0 auto 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .testimonials__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

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

    .testimonial-card {
      background: var(--color-off-white);
      border: 1px solid var(--color-light);
      border-radius: var(--radius);
      padding: 30px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .testimonial-card__quote {
      font-size: var(--text-body);
      color: var(--color-black);
      line-height: 1.5;
      font-style: italic;
    }
    .testimonial-card__quote::before { content: '"'; color: var(--color-brand); }
    .testimonial-card__quote::after  { content: '"'; color: var(--color-brand); }

    .testimonial-card__role {
      font-size: var(--text-sm);
      color: var(--color-dim);
    }

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

    .heritage-card {
      flex: 1;
      border-radius: var(--radius);
      background: var(--color-jet);
      overflow: hidden;
      position: relative;
      min-height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 8px;
    }

    .heritage-card__year {
      font-family: var(--font-mono);
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.5);
      letter-spacing: 0.04em;
    }

    .heritage-card__logo {
      font-family: var(--font-heading);
      font-size: 28px;
      font-weight: 700;
      color: var(--color-white);
      letter-spacing: -0.02em;
    }

    .counter-card {
      background: var(--color-brand-deep);
      border-radius: var(--radius);
      padding: 30px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .counter-card__item { display: flex; flex-direction: column; gap: 8px; }
    .counter-card__number {
      font-family: var(--font-heading);
      font-size: clamp(32px, 4vw, 52px);
      font-weight: 600;
      color: var(--color-white);
    }
    .counter-card__label { font-size: var(--text-sm); color: rgba(255,255,255,0.7); }

    .support-card {
      background: var(--color-black);
      border-radius: var(--radius);
      padding: 30px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      flex: 1;
    }
    .support-card__icon { font-size: 32px; }

    /* ============================================================
       BLOG PREVIEW
    ============================================================ */
    .blog__header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 40px;
    }

    .blog-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      align-items: stretch;
    }

    .blog-card {
      background: var(--color-off-white);
      border: 1px solid var(--color-light);
      border-radius: var(--radius);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: border-color 0.2s, transform 0.2s;
    }
    .blog-card:hover { border-color: var(--color-brand); transform: translateY(-2px); }

    .blog-card__image {
      height: 180px;
      background: linear-gradient(135deg, var(--color-brand-dark), var(--color-jet));
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .blog-card__image-icon {
      font-size: 48px;
      opacity: 0.15;
    }

    .blog-card__content {
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      flex: 1;
    }

    .blog-card__tag {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--color-brand);
      font-weight: 500;
    }

    .blog-card__title {
      font-family: var(--font-heading);
      font-size: 18px;
      font-weight: 600;
      color: var(--color-black);
      line-height: 1.3;
    }

    .blog-card__link {
      margin-top: auto;
      font-size: var(--text-sm);
      font-weight: 500;
      color: var(--color-brand);
      display: flex;
      align-items: center;
      gap: 6px;
      transition: gap 0.2s;
    }
    .blog-card:hover .blog-card__link { gap: 10px; }
    .blog-card__link::after { content: '→'; }

    /* ============================================================
       FOOTER — Framer-matched with gradient glow
    ============================================================ */
    .footer {
      position: relative;
      background: var(--color-black);
      color: var(--color-white);
      padding-top: clamp(60px, 8vw, 100px);
      overflow: hidden;
    }
    /* Warm radial glow bottom-right — matches Framer */
    .footer::before {
      content: '';
      position: absolute;
      bottom: -80px; right: -80px;
      width: 700px; height: 700px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(91,26,46,0.55) 0%, rgba(58,16,25,0.35) 30%, transparent 70%);
      pointer-events: none; z-index: 0;
    }
    .footer::after {
      content: '';
      position: absolute;
      bottom: -120px; left: -120px;
      width: 500px; height: 500px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center, rgba(74,21,37,0.3) 0%, transparent 65%);
      pointer-events: none; z-index: 0;
    }
    .footer .container { position: relative; z-index: 1; }

    /* Top row: brand left, social right */
    .footer__top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 40px;
      padding-bottom: 50px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      flex-wrap: wrap;
    }

    .footer__brand {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    /* Logo and tagline side by side */
    .footer__brand-row {
      display: flex;
      align-items: flex-start;
      gap: 16px;
    }
    .footer__logo-img {
      height: 52px;          /* larger than header — anchors the brand in the footer */
      width: auto;
      object-fit: contain;
      display: block;
      flex-shrink: 0;
      margin-top: 2px;       /* optical alignment with first line of tagline */
    }
    .footer__tagline {
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.45);
      line-height: 1.55;
      max-width: 240px;
    }

    /* Certification logo images */
    .footer__cert-logos {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 20px;
    }
    .footer__cert-logo {
      height: 44px;
      width: auto;
      max-width: 56px;
      object-fit: contain;
      opacity: 0.85;
      filter: drop-shadow(0 0 6px rgba(255,255,255,0.25));
      transition: opacity 0.2s, filter 0.2s;
    }
    .footer__cert-logo:hover {
      opacity: 1;
      filter: drop-shadow(0 0 10px rgba(255,255,255,0.45));
    }


    /* 4-column link grid */
    .footer__links {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 36px;
      padding-top: 50px;
      padding-bottom: 50px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .footer__col {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .footer__col-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(255,255,255,0.35);
      margin-bottom: 8px;
    }

    .footer__link {
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.55);
      transition: color 0.2s;
      line-height: 1.3;
      text-decoration: none;
    }
    .footer__link:hover { color: var(--color-white); }
    .footer__link--active { color: var(--color-brand) !important; }
    .footer__link--contact { color: rgba(255,255,255,0.55); }

    .footer__address {
      font-style: normal;
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.55);
      line-height: 1.6;
      margin-bottom: 4px;
    }

    .footer__social {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .footer__social-link {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.45);
      transition: color 0.2s;
      text-decoration: none;
    }
    .footer__social-link:hover { color: var(--color-white); }

    .footer__certs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 12px;
    }
    .footer__cert {
      font-size: 10px;
      font-weight: 600;
      padding: 4px 8px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 4px;
      color: rgba(255,255,255,0.4);
      letter-spacing: 0.04em;
    }

    .footer__bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 24px 0;
      flex-wrap: wrap;
    }
    .footer__copy {
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.3);
    }
    .footer__legal { display: flex; gap: 20px; }
    .footer__legal-link {
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.3);
      transition: color 0.2s;
      text-decoration: none;
    }
    .footer__legal-link:hover { color: rgba(255,255,255,0.6); }

    /* ============================================================
       REVEAL ANIMATIONS
    ============================================================ */
    .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
    }
    .reveal.in-view {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }

    /* ============================================================
       HOVER REVIEW CARD — Framer component adaptation
       On hover: border appears + burgundy gradient bottom, spring easing
    ============================================================ */
    .hover-review-card {
      transition: background 0.4s cubic-bezier(0.2,0,0,1),
                  box-shadow 0.4s cubic-bezier(0.2,0,0,1),
                  border-color 0.4s cubic-bezier(0.2,0,0,1);
    }
    .hover-review-card:hover {
      background: linear-gradient(
        180deg,
        var(--color-white) 39%,
        rgba(91,26,46,0.1) 100%
      ) !important;
      border-color: rgba(91,26,46,0.25) !important;
      box-shadow:
        0px 0.6px 1.1px -1.4px rgba(0,0,0,0.36),
        0px 2.3px 4.1px -2.8px rgba(0,0,0,0.3),
        0px 10px 18px -4.25px rgba(0,0,0,0.08);
    }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    /* Services section — no background dividers, matches Framer */
    .section--services::before { display: none; }
    .section--services::after  { display: none; }

    /* Service card responsive */
    @media (max-width: 1024px) {
      .service-card {
        grid-template-columns: 48px 220px 1fr auto;
      }
      .service-card__features-label { display: none; }
    }
    @media (max-width: 768px) {
      .service-card {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: 16px;
        padding: 20px 0;
      }
      .service-card__icon  { display: none; }
      .service-card__image { display: none; }
      .service-card__content { grid-column: 1; grid-row: 1; }
      .service-card__features-label { display: none; }
      .service-card__arrow { grid-column: 2; grid-row: 1; align-self: center; }
    }
    @media (max-width: 768px) {
      .hero__right { max-width: 100%; padding-top: 0; }
      .hero__top { grid-template-columns: 1fr; gap: 30px; }
      .hero__left h1, .hero__left .h1 { font-size: clamp(38px, 9vw, 56px); }
      .about__top { grid-template-columns: 1fr; }
      .about__cards { flex-wrap: wrap; }
      .stat-card { width: 72vw; height: 72vw; }
      .product-grid { grid-template-columns: repeat(2, 1fr); }
      .footer__links { grid-template-columns: repeat(2, 1fr); }
      .footer__top { flex-direction: column; gap: 24px; }
      .testimonials__grid { grid-template-columns: 1fr; }
      .blog-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 768px) {
      :root { --container-px: 20px; }
      .nav__links { display: none; }
      .nav__hamburger { display: flex; }
      .service-card { grid-template-columns: 1fr; }
      .service-card__image { min-height: 200px; }
      .service-card:nth-child(n) { top: 80px; }
      .product-grid { grid-template-columns: 1fr; }
      .mfg__header { flex-direction: column; }
      .mfg__counter { text-align: left; max-width: 100%; }
      .about__cards { flex-direction: column; align-items: center; }
      .blog-grid { grid-template-columns: 1fr; }
      .footer__links { grid-template-columns: 1fr; }
      .services__header { flex-direction: column; align-items: flex-start; }
      .services__cta { flex-direction: column; }
      .mfg__split-cta { flex-direction: column; }
      .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
    }

    @media (max-width: 480px) {
      .stat-card { width: 90vw; height: 90vw; }
      .counter-card { grid-template-columns: 1fr; }
    }
  

/* ============================================================
   NAV — mega dropdown + active state
============================================================ */
.nav__link--active {
  color: var(--color-brand) !important;
}
.nav.scrolled .nav__link--active {
  color: var(--color-brand) !important;
}
.nav__cta {
  margin-left: 16px;
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: white;
  flex-shrink: 0;
}
.nav.scrolled .nav__cta {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-black);
}

.nav__dropdown--mega {
  display: none;
  min-width: 640px;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.nav__item:hover .nav__dropdown--mega {
  display: grid;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__mega-col {
  padding: 8px;
  border-right: 1px solid rgba(255,255,255,0.06);
}
.nav__mega-col:last-child { border-right: none; }

/* Footer link active */
.footer__link--active {
  color: var(--color-brand) !important;
}

/* ============================================================
   IMAGE PLACEHOLDER UTILITY
   Use on img slots until real assets are provided.
============================================================ */
.img-placeholder {
  background: linear-gradient(135deg, var(--color-brand-dark) 0%, var(--color-jet) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.15);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.img-placeholder--light {
  background: var(--color-light);
  color: rgba(21,21,21,0.2);
}

/* ============================================================
   PAGE HERO — used on all inner pages
============================================================ */
.page-hero {
  padding-top: clamp(120px, 14vw, 180px);
  padding-bottom: clamp(60px, 8vw, 100px);
}
.page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 800px;
}
.page-hero__image {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
.page-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Spec table — used on service and product pages */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.spec-table tr {
  border-bottom: 1px solid var(--color-light);
}
.spec-table td {
  padding: 14px 0;
  line-height: 1.3;
}
.spec-table td:first-child {
  color: var(--color-dim);
  width: 50%;
}
.spec-table td:last-child {
  font-weight: 500;
  text-align: right;
  color: var(--color-black);
}
.section--dark .spec-table tr { border-color: rgba(255,255,255,0.08); }
.section--dark .spec-table td:first-child { color: rgba(255,255,255,0.5); }
.section--dark .spec-table td:last-child  { color: var(--color-white); }

/* Scope list — used on service pages */
.scope-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.scope-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-sm);
  color: var(--color-dim);
  line-height: 1.35;
}
.scope-item::before {
  content: '—';
  color: var(--color-brand);
  flex-shrink: 0;
  margin-top: 1px;
}

/* Two-column content grid */
.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 768px) {
  .content-grid { grid-template-columns: 1fr; }
}

/* Three-column card grid */
.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1024px) {
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .card-grid-3 { grid-template-columns: 1fr; }
}

/* Card base used on hub pages */
.hub-card {
  background: var(--color-white);
  border: 1px solid var(--color-light);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.hub-card:hover {
  border-color: var(--color-brand);
  transform: translateY(-2px);
  box-shadow: 0 4px 24px rgba(91,26,46,0.10);
}
.hub-card__title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-black);
  line-height: 1.2;
}
.hub-card__desc {
  font-size: var(--text-sm);
  color: var(--color-dim);
  line-height: 1.45;
}
.hub-card__link {
  margin-top: auto;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-brand);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
  text-decoration: none;
}
.hub-card:hover .hub-card__link { gap: 10px; }
.hub-card__link::after { content: '→'; }

/* Dark card variant */
.hub-card--dark {
  background: var(--color-jet);
  border-color: rgba(255,255,255,0.08);
  color: var(--color-white);
}
.hub-card--dark .hub-card__title { color: var(--color-white); }
.hub-card--dark .hub-card__desc  { color: rgba(255,255,255,0.6); }
.hub-card--dark:hover { border-color: var(--color-brand); }

/* ============================================================
   INDUSTRY ACCORDION — background images per panel
============================================================ */
.isc-panel {
  background-size: cover;
  background-position: center;
  transition: flex 0.55s cubic-bezier(0.4,0,0.2,1);
}
/* Dark overlay on inactive panels */
.isc-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(21,21,21,0.65);
  transition: background 0.4s;
  z-index: 0;
  pointer-events: none;
}
/* Lighter overlay on active panel so image shows */
.isc-panel.active::before {
  background: rgba(21,21,21,0.45);
}
.isc-panel > * { position: relative; z-index: 1; }
/* The background image sits at z-index 0 */
.isc-panel > img { position: absolute !important; z-index: 0 !important; }

/* Text colours on image background */
.isc-panel .isc-title-vert { color: rgba(255,255,255,0.9); font-weight:600; }
.isc-panel .isc-title       { color: var(--color-white); font-weight:700; }
.isc-panel .isc-desc        { color: rgba(255,255,255,0.9); line-height:1.5; }
.isc-panel .isc-spec        { color: rgba(255,255,255,0.75); }
.isc-panel .isc-section-label { color: rgba(255,255,255,0.4); border-color: rgba(255,255,255,0.15); }
.isc-panel .isc-num         { color: rgba(255,255,255,0.4); }
.isc-panel .isc-tag         { color: rgba(255,255,255,0.6); }
.isc-panel .isc-link        { color: var(--color-white); }
.isc-panel .isc-link::after { content: '→'; }
.isc-panel .isc-progress    { background: var(--color-white); }
.isc-panel .badge           { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); }
.isc-panel .badge::before   { background: var(--color-white); }

/* Manufacturing product cards — Framer-accurate dark columns */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.product-card {
  border-right: 1px solid rgba(255,255,255,0.1);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.product-card:last-child { border-right: none; }

.product-card__image {
  width: 100%;
  height: 220px;
  overflow: hidden;
  flex-shrink: 0;
}
.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
  transition: transform 0.5s;
}
/* product-card hover — defined in the sticky/animation block above */

.product-card__body {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.product-card__title {
  font-family: var(--font-heading);
  font-size: clamp(15px,1.4vw,18px);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.2;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 16px;
}
.product-card__row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.product-card__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.35);
}
.product-card__value {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.35;
}

/* Services CTA — Framer CtaBg design */
.services__cta {
  background: var(--color-black);
  border-radius: var(--radius);
  padding: clamp(30px,4vw,50px) clamp(30px,4vw,60px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 60px;
  position: relative;
  overflow: hidden;
}
/* Warm glow element inside CTA — matches Framer orange asset */
.services__cta::before {
  content: '';
  position: absolute;
  top: -60px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(91,26,46,0.6) 0%,
    rgba(58,16,25,0.3) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
/* Second glow bottom-left */
.services__cta::after {
  content: '';
  position: absolute;
  bottom: -40px; left: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(74,21,37,0.4) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}
.services__cta > * { position: relative; z-index: 1; }
.services__cta-text {
  font-family: var(--font-heading);
  font-size: clamp(18px,2.2vw,28px);
  font-weight: 600;
  color: var(--color-white);
  max-width: 480px;
}

/* ============================================================
   OSMO UNDERLAY NAV — Two-panel with sub-menus
   Adapted for Santoo's IA. Burgundy accent, Mona Sans type.
============================================================ */
:root {
  --uNav-width: 34em;
  --uNav-bg: #111111;
  --uNav-accent: #5B1A2E;
}

/* ── Bar ───────────────────────────────────────────────────── */
.unav__header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  color: #fff;
  pointer-events: none;
}
.uNav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
  pointer-events: all;
}

/* Logo */
.uNav__logo {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.uNav__logo-img {
  transition: opacity 0.35s;
}

/* Toggle button */
.uNav__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 8px;
  margin: -8px;
  font-family: var(--font-body);
}
.uNav__toggle-text {
  display: flex;
  flex-direction: column;
  height: 1.4em;
  overflow: hidden;
  flex-shrink: 0;
}
.uNav__toggle-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
}
.uNav__toggle-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 20px;
}
.uNav__toggle-bar {
  display: block;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform-origin: center;
}

/* Bar scroll state: transparent → dark */
.uNav__bar {
  transition: background 0.35s, box-shadow 0.35s;
}
body.uNav--scrolled .uNav__bar {
  background: rgba(17,17,17,0.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}
/* Logo swap on scroll */
body:not(.uNav--scrolled) .uNav__logo-img--brand { opacity: 1; }
body:not(.uNav--scrolled) .uNav__logo-img--white  { opacity: 0; }
body.uNav--scrolled     .uNav__logo-img--brand { opacity: 0; }
body.uNav--scrolled     .uNav__logo-img--white  { opacity: 1; }

/* ── Panel ──────────────────────────────────────────────────── */
[data-uNav-menu] {
  position: fixed;
  top: 0; bottom: 0; right: 0;
  width: var(--uNav-width);
  background: var(--uNav-bg);
  z-index: 1;
  overflow: hidden;
  color: #fff;
}

/* ── States: parents vs sub-panel ──────────────────────────── */
.uNav__state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 100px 0 32px;
  overflow: hidden;
}
.uNav__state--sub {
  pointer-events: none;
}
body[data-uNav-sub] .uNav__state--sub { pointer-events: all; }

/* ── Parent list ───────────────────────────────────────────── */
.uNav__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0;
  flex: 1;
}
.uNav__link-lg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 32px;
  background: none;
  border: none;
  color: #fff;
  font-family: var(--font-heading);
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: color 0.2s;
}
.uNav__link-lg:hover { color: var(--uNav-accent); }
.uNav__link-lg.is--active { color: var(--uNav-accent); }
.uNav__link-lg--direct { display: flex; }
.uNav__link-arrow {
  font-size: 20px;
  opacity: 0.4;
  transition: opacity 0.2s, transform 0.2s;
}
.uNav__link-lg:hover .uNav__link-arrow {
  opacity: 1;
  transform: translateX(4px);
  color: var(--uNav-accent);
}

/* ── Bottom strip ───────────────────────────────────────────── */
.uNav__bottom {
  padding: 24px 32px 0;
  position: relative;
}
.uNav__contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  background: var(--uNav-accent);
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 24px;
  transition: background 0.2s;
}
.uNav__contact-btn:hover { background: #4A1525; }
.uNav__bottom-row {
  display: flex;
  gap: 40px;
  margin-top: 8px;
}
.uNav__bottom-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.uNav__bottom-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
}
.uNav__bottom-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.uNav__link-sm {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.2s;
}
.uNav__link-sm:hover { color: #fff; }
.uNav__bottom-border {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: rgba(255,255,255,0.1);
  transform-origin: left;
}

/* ── Sub-panel ──────────────────────────────────────────────── */
.uNav__subpanel {
  position: absolute;
  inset: 0;
  background: var(--uNav-bg);
  display: flex;
  flex-direction: column;
  padding: 80px 0 32px;
}
.uNav__back {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 12px 32px;
  transition: color 0.2s;
}
.uNav__back:hover { color: #fff; }
.uNav__sub-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.uNav__sub-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 32px 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.uNav__sub-group:first-child { border-top: none; }
.uNav__sub-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 8px;
  font-family: var(--font-mono);
}
.uNav__sub-link {
  display: block;
  padding: 7px 0;
  font-family: var(--font-heading);
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  transition: color 0.2s, padding-left 0.2s;
}
.uNav__sub-link:hover { color: #fff; padding-left: 6px; }
.uNav__sub-all {
  display: block;
  margin: 16px 32px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--uNav-accent);
  text-decoration: none;
  transition: opacity 0.2s;
}
.uNav__sub-all:hover { opacity: 0.8; }

/* ── Overlay ────────────────────────────────────────────────── */
.uNav__overlay {
  position: fixed;
  inset: 0 -1px 0 0;
  z-index: 100;
  pointer-events: none;
  visibility: hidden;
  overflow: clip;
}
.uNav__dark {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
}
.uNav__borders {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.uNav__border-row {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.uNav__border {
  width: 100%;
  height: 1em;
  background: #fff;
}
.uNav__corner {
  width: 2em; height: 2em;
  transform-origin: 100% 0;
  background-image: radial-gradient(circle farthest-side at 0 100%, transparent 99%, #fff);
}
.uNav__corner.is--bottom {
  transform-origin: 100% 100%;
  background-image: radial-gradient(circle farthest-side at 0 0, transparent 99%, #fff);
}

/* ── Page wrapper (Osmo's [data-main]) ──────────────────────── */
[data-main] {
  position: relative;
  z-index: 2;
  transform: translateX(0);
  will-change: transform;
}

/* ── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --uNav-width: 85vw; }
  .uNav__bar { padding: 16px 20px; }
  .uNav__link-lg { font-size: 26px; padding: 12px 24px; }
  .uNav__state { padding-top: 80px; }
  .uNav__bottom { padding: 20px 24px 0; }
  .uNav__sub-group { padding: 12px 24px 6px; }
  .uNav__back { padding: 10px 24px; }
  .uNav__sub-all { margin: 12px 24px 0; }
}

/* ============================================================
   GSAP SPLITTEXT — FOUC prevention
   Headings hidden in CSS, revealed by gsap.set autoAlpha:1
   before animation starts.
============================================================ */
[data-split="heading"] {
  visibility: hidden;
}

/* SplitText line wrapper — ensure overflow clip works */
.line {
  overflow: hidden;
  display: block;
}

/* ============================================================
   TESTIMONIALS — Infinite marquee with alpha edge masks
============================================================ */
.testimonials-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: var(--section-pad);
  padding-bottom: clamp(40px, 5vw, 60px);
  background: var(--color-white);
}

/* Alpha fade masks on left and right edges */
.testimonials-marquee::before,
.testimonials-marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(80px, 12vw, 200px);
  z-index: 2;
  pointer-events: none;
}
.testimonials-marquee::before {
  left: 0;
  background: linear-gradient(to right, var(--color-white) 0%, transparent 100%);
}
.testimonials-marquee::after {
  right: 0;
  background: linear-gradient(to left, var(--color-white) 0%, transparent 100%);
}

/* Header above the marquee */
.testimonials-marquee__header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 60px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 3;
}

/* Two-track container */
.marquee-tracks {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Single track */
.marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  will-change: transform;
}
.marquee-track--forward  { animation: marquee-left  40s linear infinite; }
.marquee-track--backward { animation: marquee-right 46s linear infinite; }

.marquee-track:hover,
.marquee-track--forward:hover,
.marquee-track--backward:hover {
  animation-play-state: paused;
}

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

/* Individual testimonial card */
.marquee-card {
  flex-shrink: 0;
  width: clamp(280px, 30vw, 400px);
  background: var(--color-off-white);
  border: 1px solid var(--color-light);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
  cursor: default;
}
.marquee-card:hover {
  border-color: rgba(91,26,46,0.2);
  box-shadow: 0 4px 24px rgba(91,26,46,0.08);
}

/* Star rating inside card */
.marquee-card__stars {
  display: flex;
  gap: 3px;
}
.marquee-card__stars svg {
  width: 14px;
  height: 14px;
}

/* Quote text */
.marquee-card__quote {
  font-size: var(--text-sm);
  color: var(--color-black);
  line-height: 1.55;
  flex: 1;
}

/* Attribution */
.marquee-card__attr {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 12px;
  border-top: 1px solid var(--color-light);
}
.marquee-card__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-black);
}
.marquee-card__role {
  font-size: 12px;
  color: var(--color-dim);
}

/* Counter row below the marquee */
.testimonials-marquee__stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: clamp(30px, 4vw, 50px);
  border-top: 1px solid var(--color-light);
  position: relative;
  z-index: 3;
  flex-wrap: wrap;
}
.marquee-stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.marquee-stat__number {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1;
}
.marquee-stat__label {
  font-size: var(--text-sm);
  color: var(--color-dim);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none !important;
  }
}

    /* ── Nested L2→L3 manufacturing dropdown ─────────────────── */
    .nav__dropdown--nested {
      min-width: 220px;
      padding: 8px 0;
    }

    /* L2 item — full-width row with chevron, reveals L3 on hover */
    .nav__l2-item {
      position: relative;
    }
    .nav__l2-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      font-size: var(--text-sm);
      font-weight: 500;
      color: rgba(255,255,255,0.75);
      text-decoration: none;
      transition: background 0.15s, color 0.15s;
      border-radius: 4px;
      gap: 8px;
    }
    .nav__l2-link:hover,
    .nav__l2-item:hover > .nav__l2-link {
      background: rgba(255,255,255,0.08);
      color: var(--color-white);
    }
    .nav__l2-link svg {
      opacity: 0.4;
      flex-shrink: 0;
      transition: opacity 0.15s;
      color: rgba(255,255,255,0.6);
    }
    .nav__l2-item:hover .nav__l2-link svg { opacity: 1; color: white; }

    /* L3 panel — fly-out to the right, same dark background */
    .nav__l3-panel {
      position: absolute;
      top: -8px;
      left: calc(100% + 4px);
      background: var(--color-jet);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--radius);
      box-shadow: 0 8px 32px rgba(0,0,0,0.35);
      min-width: 220px;
      padding: 8px;
      opacity: 0;
      visibility: hidden;
      transform: translateX(-6px);
      transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
      z-index: 200;
    }
    .nav__l2-item:hover .nav__l3-panel {
      opacity: 1;
      visibility: visible;
      transform: translateX(0);
    }
    /* L3 items — same style as other dropdown items */
    .nav__l3-panel .nav__dropdown-item {
      color: rgba(255,255,255,0.7);
    }
    .nav__l3-panel .nav__dropdown-item:hover {
      background: rgba(255,255,255,0.08);
      color: var(--color-white);
    }


    .nav-bar__cta.btn--primary,
    .nav-header .btn--primary {
      background: var(--color-brand) !important;
      border-color: var(--color-brand) !important;
      color: var(--color-white) !important;
    }

    .nav__mobile {
      display: none;
      position: fixed;
      top: 70px; left: 0; right: 0; bottom: 0;
      background: var(--color-black);
      z-index: 999;
      flex-direction: column;
      padding: 30px 24px;
      gap: 4px;
      overflow-y: auto;
    }
    .nav__mobile.open { display: flex; }

/* ============================================================
   PRODUCT PAGE TEMPLATE — o-rings reference pattern
   Applied across all sealing solution and service leaf pages
============================================================ */

/* ── Shared two-column row: text one side, image other ──────
   Used for hero, overview, process+spec, applications.
   align-items: start = top-aligns both columns.
   Image never stretches to match text height — it sits at top.
─────────────────────────────────────────────────────────────*/
.product-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
/* Reverse column order (image left, text right) */
.product-row--reverse .product-row__image { order: -1; }

/* Text column */
.product-row__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Image column */
.product-row__image {
  border-radius: var(--radius);
  overflow: hidden;
  width: 100%;
  background: var(--color-light);
}
.product-row__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* Portrait ratio for hero image */
.product-row__image--portrait  { aspect-ratio: 4 / 3; }
/* Landscape ratio for inline images */
.product-row__image--landscape { aspect-ratio: 4 / 3; }

/* Contain — must come AFTER portrait/landscape to override aspect-ratio.
   Product-on-white images: no fixed height, no grey box, image drives container. */
.product-row__image--contain {
  aspect-ratio: unset;
  background: transparent;
}
.product-row__image--contain img {
  object-fit: contain;
  height: auto;
  width: 100%;
}

/* Mobile: single column, image always below text */
@media (max-width: 860px) {
  .product-row {
    grid-template-columns: 1fr;
  }
  /* Reset reverse so image stays below on mobile */
  .product-row--reverse .product-row__image { order: 1; }
  .product-row__image--portrait  { aspect-ratio: 16 / 9; }
  .product-row__image--landscape { aspect-ratio: 16 / 9; }
  /* Contain override must come after on mobile too */
  .product-row__image--contain   { aspect-ratio: unset; }
}

/* ── Hero wrapper ───────────────────────────────────────────── */
.product-hero {
  padding-top: clamp(100px, 12vw, 160px);
  padding-bottom: clamp(40px, 5vw, 60px);
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.product-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.product-hero__breadcrumb a {
  color: var(--color-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.product-hero__breadcrumb a:hover { color: var(--color-brand); }
.product-hero__breadcrumb span   { opacity: 0.4; }

/* ── Function sentence ──────────────────────────────────────── */
.product-hero__function {
  font-size: var(--text-body);
  color: var(--color-dim);
  line-height: 1.65;
}

/* ── Cert tags ──────────────────────────────────────────────── */
.product-hero__certs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.product-cert-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--color-light);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-dim);
  letter-spacing: 0.04em;
  background: var(--color-white);
}

/* ── Materials grid ─────────────────────────────────────────── */
.materials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .materials-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .materials-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .materials-grid { grid-template-columns: 1fr; } }

.material-card {
  background: var(--color-white);
  border: 1px solid var(--color-light);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.material-card:hover {
  border-color: var(--color-brand);
  box-shadow: 0 2px 16px rgba(91,26,46,0.08);
}
.material-card__header { display: flex; flex-direction: column; gap: 4px; }
.material-card__abbr {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-brand);
  line-height: 1;
}
.material-card__name {
  font-size: 11px;
  color: var(--color-dim);
  line-height: 1.3;
}
.material-card__props { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.material-card__props > div { display: flex; flex-direction: column; gap: 2px; }
.material-card__props dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0,0,0,0.35);
  font-weight: 600;
}
.material-card__props dd {
  font-size: 12px;
  color: var(--color-black);
  line-height: 1.35;
  margin: 0;
}

/* ── Application tags ───────────────────────────────────────── */
.application-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.application-tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 24px;
  border: 1px solid var(--color-light);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-black);
  text-decoration: none;
  background: var(--color-white);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.application-tag:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-white);
}

/* ── Related product cards — with image ─────────────────────── */
.related-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid var(--color-light);
  overflow: hidden;
  background: var(--color-white);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.related-card:hover {
  border-color: var(--color-brand);
  transform: translateY(-3px);
  box-shadow: 0 6px 28px rgba(91,26,46,0.10);
}
.related-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-off-white);
  flex-shrink: 0;
}
.related-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
.related-card:hover .related-card__image img { transform: scale(1.04); }
/* Placeholder state when image not yet available */
.related-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}
.related-card__image--placeholder::after {
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-light);
}
.related-card__body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.related-card__category {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-brand);
  font-weight: 600;
}
.related-card__title {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-black);
  line-height: 1.25;
}
.related-card__desc {
  font-size: var(--text-sm);
  color: var(--color-dim);
  line-height: 1.5;
  flex: 1;
}
.related-card__arrow {
  margin-top: 12px;
  font-size: 18px;
  color: var(--color-brand);
  transition: transform 0.2s;
  align-self: flex-start;
}
.related-card:hover .related-card__arrow { transform: translateX(4px); }

/* ── Inline CTA ─────────────────────────────────────────────── */
.inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(30px, 4vw, 50px) clamp(30px, 4vw, 60px);
  background: var(--color-black);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
/* Warm burgundy glow — top right */
.inline-cta::before {
  content: '';
  position: absolute;
  top: -60px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(91,26,46,0.6) 0%,
    rgba(58,16,25,0.3) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
/* Second glow — bottom left */
.inline-cta::after {
  content: '';
  position: absolute;
  bottom: -40px; left: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(74,21,37,0.4) 0%,
    transparent 65%
  );
  pointer-events: none;
  z-index: 0;
}
.inline-cta > * { position: relative; z-index: 1; }
.inline-cta__text { flex: 1; }
.inline-cta__text h2 { color: var(--color-white); }
.inline-cta__text p  { color: rgba(255,255,255,0.75); }
@media (max-width: 768px) {
  .inline-cta { flex-direction: column; align-items: flex-start; }
}

/* ── Hub card link variant (keep for hub pages) ─────────────── */
.hub-card--link { text-decoration: none; position: relative; }
.hub-card__category {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-brand);
  font-weight: 600;
}
.hub-card__arrow { margin-top: auto; color: var(--color-brand); font-size: 18px; transition: transform 0.2s; }
.hub-card--link:hover .hub-card__arrow { transform: translateX(4px); }

/* ═══════════════════════════════════════════════════════════════════════════
   SERVICE & CAPABILITY PAGE COMPONENTS
   Append to end of main.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-dim);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--color-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumb a:hover { color: var(--color-black); }
.breadcrumb span[aria-hidden] { color: var(--color-light); }
.breadcrumb span[aria-current] { color: var(--color-black); }

/* ── Spec table ──────────────────────────────────────────────────────────── */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.spec-table th,
.spec-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-light);
}
.spec-table thead th {
  background: var(--color-off-white);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-dim);
}
.spec-table tbody tr:last-child td { border-bottom: none; }
.spec-table tbody tr:hover td { background: var(--color-off-white); }

/* ── Scope list ──────────────────────────────────────────────────────────── */
.scope-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.scope-list li {
  padding-left: 20px;
  position: relative;
  font-size: var(--text-base);
  color: var(--color-dim);
  line-height: 1.5;
}
.scope-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand);
}
.scope-list--two-col {
  columns: 2;
  gap: 40px;
  display: block;
}
.scope-list--two-col li {
  break-inside: avoid;
  margin-bottom: 10px;
}

/* ── FAQ list ────────────────────────────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq-item {
  border-top: 1px solid var(--color-light);
}
.faq-item:last-child { border-bottom: 1px solid var(--color-light); }
.faq-question {
  list-style: none;
  padding: 20px 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-black);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  font-size: 20px;
  font-weight: 300;
  color: var(--color-dim);
  flex-shrink: 0;
  transition: transform 0.25s;
}
details[open] .faq-question::after {
  content: '−';
}
.faq-answer {
  padding: 0 0 20px;
}
.faq-answer p {
  color: var(--color-dim);
  line-height: 1.7;
}

/* ── Related grid ────────────────────────────────────────────────────────── */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.related-card {
  display: block;
  padding: 24px;
  border: 1px solid var(--color-light);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.related-card:hover {
  border-color: var(--color-brand);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.related-card strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-black);
  margin-bottom: 6px;
}
.related-card p {
  font-size: var(--text-sm);
  color: var(--color-dim);
  line-height: 1.5;
  margin: 0;
}

/* ── Inline CTA (dark section) ───────────────────────────────────────────── */
.inline-cta .inline-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

/* ── Stats grid (services hub) ───────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-card__number {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  color: var(--color-black);
  line-height: 1;
}
.stat-card__label {
  font-size: var(--text-sm);
  color: var(--color-dim);
}

/* ── btn--outline-white (dark section CTA) ──────────────────────────────── */
.btn--outline-white {
  border: 1.5px solid rgba(255,255,255,0.4);
  color: white;
  background: transparent;
  padding: var(--btn-padding, 12px 24px);
  border-radius: var(--radius-full, 999px);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.2s, background 0.2s;
  white-space: nowrap;
}
.btn--outline-white:hover {
  border-color: white;
  background: rgba(255,255,255,0.08);
}

/* ── Responsive: service pages ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .related-grid {
    grid-template-columns: 1fr;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .scope-list--two-col {
    columns: 1;
  }
  .inline-cta .inline-cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ── btn--secondary ────────────────────────────────────────────────────── */
.btn--secondary {
  background: transparent;
  color: var(--color-black);
  border-color: var(--color-black);
  border: 1.5px solid var(--color-black);
  padding: 12px 22px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.btn--secondary:hover {
  background: var(--color-black);
  color: var(--color-white);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HUB PAGE PRODUCT CARD GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.product-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.product-card-grid--narrow {
  grid-template-columns: repeat(2, 1fr);
  max-width: 700px;
}
/* hub product cards — override the dark mfg card styles for light-bg pages */
.product-card-grid .product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-light);
  border-right: none;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  background: var(--color-white);
  transition: border-color 0.2s, box-shadow 0.2s;
  padding: 0;
  gap: 0;
}
.product-card-grid .product-card:hover {
  border-color: var(--color-brand);
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}
.product-card-grid .product-card .product-card__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-off-white);
}
.product-card-grid .product-card .product-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.product-card-grid .product-card:hover .product-card__img img {
  transform: scale(1.04);
}
.product-card-grid .product-card .product-card__body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--color-white);
}
.product-card-grid .product-card .product-card__body strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-black);
}
.product-card-grid .product-card .product-card__body p {
  font-size: var(--text-sm);
  color: var(--color-dim);
  line-height: 1.5;
  margin: 0;
}
.product-card-grid .product-card .product-card__body .product-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-black);
  border-bottom: none;
  padding-bottom: 0;
}
.product-card__link {
  margin-top: auto;
  padding-top: 12px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-brand);
}

@media (max-width: 960px) {
  .product-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .product-card-grid,
  .product-card-grid--narrow { grid-template-columns: 1fr; }
}

/* ── img-cover utilities (used on inner pages) ─────────────────────────── */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.img-cover--landscape {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  display: block;
}

/* ============================================================
   RESPONSIVE — single authoritative block
   Desktop >1024 · Tablet 768–1024 · Mobile <768 · Small <480
============================================================ */

/* ── Token scale-down ──────────────────────────────────────── */
@media (max-width: 1024px) {
  :root {
    --container-px: 24px;
    --section-pad:  clamp(48px, 6vw, 80px);
    --text-h1:      clamp(36px, 5vw, 52px);
    --text-h2:      clamp(26px, 3.5vw, 40px);
  }
}
@media (max-width: 768px) {
  :root {
    --container-px: 20px;
    --section-pad:  clamp(40px, 8vw, 60px);
    --text-h1:      clamp(30px, 8vw, 44px);
    --text-h2:      clamp(22px, 6vw, 32px);
    --text-h3:      clamp(20px, 5vw, 28px);
    --text-body:    16px;
  }
}
@media (max-width: 480px) {
  :root {
    --container-px: 16px;
    --section-pad:  40px;
    --text-h1:      clamp(26px, 9vw, 36px);
    --text-h2:      clamp(20px, 7vw, 28px);
  }
}

/* ── NAV ───────────────────────────────────────────────────── */

/* Align nav to container width */
.nav-bar {
  max-width: var(--container, 1360px);
  margin-inline: auto;
  padding-left: var(--container-px);
  padding-right: var(--container-px);
  width: 100%;
  box-sizing: border-box;
}

/* Bump link font size */
.nav-bar__trigger,
.nav-bar__link { font-size: 15.5px; }

/* Tablet + mobile: show hamburger, collapse links */
@media (max-width: 1024px) {
  .nav-bar__links  { display: none !important; }
  .nav__hamburger  { display: flex !important; }
  .mega-panel      { display: none !important; }
  .mega-overlay    { display: none !important; }
}

/* Mobile nav drawer */
.nav__mobile {
  display: none;
  position: fixed;
  top: 70px; left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.07);
  z-index: 998;
  flex-direction: column;
  padding: 8px var(--container-px) 32px;
  gap: 0;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}
.nav__mobile.open { display: flex; }

.nav__mobile-link {
  display: block;
  font-size: 18px;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-black);
  padding: 16px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  letter-spacing: -0.02em;
  transition: color 0.15s;
}
.nav__mobile-link:hover,
.nav__mobile-link:active { color: var(--color-brand); }

.nav__mobile-cta {
  margin-top: 24px;
}
.nav__mobile-cta .btn {
  width: 100%;
  justify-content: center;
}

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

/* Tablet: tighten gap, keep two columns */
@media (max-width: 1024px) {
  .hc__inner { gap: clamp(20px, 3vw, 40px); }
}

/* Mobile: single column stack */
@media (max-width: 768px) {
  .hero-carousel        { min-height: unset; min-height: unset; }
  .hero-carousel .container {
    padding-top: 28px;
    padding-bottom: 36px;
  }
  .hc__inner {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 24px;
  }
  .hc__text             { height: auto; }
  .hc__text-top         { gap: 14px; }
  .hc__sub              { max-width: 100%; font-size: 16px; }
  .hc__actions          { flex-direction: column; align-items: stretch; }
  .hc__actions .btn     { width: 100%; justify-content: center; }
  .hc__brands           { margin-top: 20px; }
  .hc__brand-logo       { height: 22px; }
  .hc__track            { aspect-ratio: 4 / 3; }
  .hc__location         { margin-top: 12px; padding-top: 12px; }
}

@media (max-width: 480px) {
  .hc__track { aspect-ratio: 16 / 9; }
}

/* ── HOMEPAGE — ABOUT / WHY / INDUSTRIES ──────────────────── */
@media (max-width: 1024px) {
  .about__top       { grid-template-columns: 1fr; gap: 24px; }
  .why-grid         { grid-template-columns: repeat(2, 1fr); }
  .industry-cards   { grid-template-columns: repeat(3, 1fr); }
  .services-grid    { grid-template-columns: repeat(2, 1fr); }
  .card-grid-3      { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .about__top       { grid-template-columns: 1fr; }
  .about__cards     { flex-wrap: wrap; gap: 16px; }
  .stat-card        { width: calc(50vw - 28px); height: calc(50vw - 28px); min-width: unset; }
  .industry-cards   { grid-template-columns: repeat(2, 1fr); }
  .stats-grid       { grid-template-columns: repeat(2, 1fr); gap: 2px; }
  .founder          { padding: 80px 0 !important; min-height: unset !important; }
  .founder__inner   { flex-direction: column; gap: 24px; }
  .founder__quote   { font-size: clamp(18px, 5vw, 26px); }
  .founder__cert-logo { height: 36px; }
}
@media (max-width: 600px) {
  .why-grid         { grid-template-columns: 1fr; }
  .services-grid    { grid-template-columns: 1fr; }
  .card-grid-3      { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .stat-card        { width: calc(100vw - 40px); height: calc(100vw - 40px); }
  .industry-cards   { grid-template-columns: 1fr; }
  .stats-grid       { grid-template-columns: 1fr; }
}

/* ── FOOTER ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .footer__links    { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
@media (max-width: 768px) {
  .footer__top      { flex-direction: column; gap: 24px; padding-bottom: 28px; }
  .footer__links    { grid-template-columns: repeat(2, 1fr); gap: 20px; padding-top: 28px; padding-bottom: 28px; }
  .footer__bottom   { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer__logo-img { height: 40px; }
  .footer__tagline  { max-width: 100%; }
}
@media (max-width: 480px) {
  .footer__links    { grid-template-columns: 1fr; gap: 16px; }
  .footer__cert-logo { height: 36px; }
}

/* ── PRODUCT / SERVICE LEAF PAGES ─────────────────────────── */
@media (max-width: 860px) {
  .product-row            { grid-template-columns: 1fr; }
  .product-row--reverse .product-row__image { order: 1; }
  .product-row__image--portrait  { aspect-ratio: 16 / 9; }
  .product-row__image--landscape { aspect-ratio: 16 / 9; }
  .product-row__image--contain   { aspect-ratio: unset; }
}
@media (max-width: 768px) {
  .spec-table       { font-size: 13px; }
  .faq-question     { font-size: 15px; }
  .application-tags { gap: 6px; }
  .application-tag  { font-size: 11px; padding: 5px 10px; }
}

/* ── REVEAL ANIMATION — disable on mobile for perf ────────── */
@media (max-width: 768px) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ── UTILITIES ─────────────────────────────────────────────── */
@media (max-width: 768px)  { .hide-mobile  { display: none !important; } }
@media (min-width: 769px)  { .hide-desktop { display: none !important; } }


/* ============================================================
   HOMEPAGE — MOBILE RESPONSIVE PASS  v2 — 2026-06-12
   Append to the END of main.css. Do not replace main.css.

   v2 changes (QA round 1):
   - Services: position relative, not static — static removed the
     card as containing block, letting the image and overlay escape
     and wash the whole section dark.
   - Manufacturing cards: solid background (section dividers no
     longer show through); title underline divider removed.
   - New: hero section mobile stack. Hero base CSS lives in an
     inline style block in index.php that loads AFTER main.css,
     so these rules are scoped to .hero-carousel to win on
     specificity. The older hero mobile rules in main.css were
     dead code for the same reason.
   - New: about stat circles become full-width rounded cards.

   Scope: six homepage sections at the mobile breakpoint only.
   Breakpoint: 768px (Decision 15 — matches the existing
   convention already used throughout main.css, including the
   .hide-mobile / .hide-desktop utilities).

   Sections covered:
   1. Services ("What we do")        — image-background cards,
                                       sticky stacking disabled
   2. Manufacturing ("What we
      manufacture")                  — horizontal scroll-snap cards
   3. Industries                     — floating images hidden,
                                       2-column grid cards
   4. Case studies ("Real-world
      success")                      — restacked: text block on
                                       page background, underlined
                                       link, full-width image below

   Companion change: index.php carries nine class-name additions
   in the case-study section (case-grid, case-card--text,
   case-overlay, case-title, case-desc, case-stat-num,
   case-stat-label, case-link, case-card--img). Classes only —
   no markup restructure. Desktop rendering unchanged.

   !important is used only where inline styles in index.php must
   be overridden at mobile. Nothing here applies above 768px.
============================================================ */

@media (max-width: 768px) {

  /* ------------------------------------------------------------
     1. SERVICES — "What we do"
     Each card: its own image as full background, dark gradient
     overlay, badge pill top, title + specs + pill button bottom.
     Sticky stacking disabled — cards flow normally.
  ------------------------------------------------------------ */

  .services__sticky-wrap .service-card--sticky {
    position: relative;   /* not static — card must stay the containing
                             block for the absolute image and overlay */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 16px;
    min-height: 520px;
    border: none;
    border-radius: 14px;
    overflow: hidden;
    background: var(--color-jet);
    margin-bottom: 16px;
  }
  .services__sticky-wrap .service-card--sticky:nth-child(1),
  .services__sticky-wrap .service-card--sticky:nth-child(2),
  .services__sticky-wrap .service-card--sticky:nth-child(3),
  .services__sticky-wrap .service-card--sticky:nth-child(4) {
    top: auto;
  }
  .services__sticky-wrap .service-card--sticky:hover {
    background: var(--color-jet);
    box-shadow: none;
  }

  /* Image becomes the card background */
  .services__sticky-wrap .service-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    z-index: 0;
  }

  /* Legibility gradient over the image */
  .services__sticky-wrap .service-card--sticky::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(21, 21, 21, 0.25) 0%,
      rgba(21, 21, 21, 0.50) 45%,
      rgba(21, 21, 21, 0.88) 100%
    );
    z-index: 1;
    pointer-events: none;
  }

  /* Icon not part of the mobile card language */
  .services__sticky-wrap .service-card__icon { display: none; }

  /* Stack order: badge top, content + button at bottom */
  .services__sticky-wrap .service-card__features-label,
  .services__sticky-wrap .service-card__content,
  .services__sticky-wrap .service-card__arrow {
    position: relative;
    z-index: 2;
  }

  /* "Features" label restyled as the badge pill */
  .services__sticky-wrap .service-card__features-label {
    order: 1;
    align-self: flex-start;
    margin-bottom: auto;       /* pushes content + button to bottom */
    background: rgba(246, 246, 246, 0.92);
    color: var(--color-black);
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 8px 14px;
    border-radius: 8px;
  }

  .services__sticky-wrap .service-card__content {
    order: 2;
    gap: 14px;
    padding: 0;
  }
  .services__sticky-wrap .service-card__title {
    color: var(--color-white);
    font-size: clamp(26px, 7vw, 32px);
  }
  .services__sticky-wrap .service-card__spec {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-base);
  }
  .services__sticky-wrap .service-card__spec::before {
    color: var(--color-white);
  }

  /* Arrow restyled as outlined pill button with label */
  .services__sticky-wrap .service-card__arrow {
    order: 3;
    width: auto;
    height: auto;
    align-self: flex-start;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    padding: 12px 22px;
    gap: 10px;
    color: var(--color-white);
    font-size: var(--text-sm);
    font-weight: 500;
    margin-top: 4px;
  }
  .services__sticky-wrap .service-card__arrow::before {
    content: 'View service';
  }
  .services__sticky-wrap .service-card__arrow:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: none;
  }
  .services__sticky-wrap .service-card__arrow svg {
    width: 14px;
    height: 14px;
  }

  /* ------------------------------------------------------------
     2. MANUFACTURING — "What we manufacture"
     Four columns become a horizontal scroll-snap card row.
     Cards bleed to the viewport edge; scrollbar hidden.
     Spec rows stay below the image inside each card.
  ------------------------------------------------------------ */

  .product-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin-inline: calc(var(--container-px) * -1);
    padding-inline: var(--container-px);
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .product-grid::-webkit-scrollbar { display: none; }

  .product-card {
    flex: 0 0 min(78vw, 320px);
    scroll-snap-align: start;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
    gap: 0;
    background: #1E1E1E;   /* solid — section dashed dividers must not
                              show through the card (QA v1) */
  }
  .product-card:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }

  .product-card__image {
    height: 180px;
    overflow: hidden;
  }
  .product-card:hover .product-card__image { height: 180px; }
  .product-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-card__body {
    padding: 18px 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* No underline divider beneath the card title at mobile */
  .product-card__title {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* ------------------------------------------------------------
     3. INDUSTRIES — "Built for every industry"
     Floating decorative images hidden. Accordion panels become
     a static 2-column grid of rounded image cards: badge pill,
     title, link. Detail content hidden at mobile only.
     The accordion JS keeps toggling .active — these rules make
     active and inactive panels render identically, so it has
     no visual effect. No JS change required.
  ------------------------------------------------------------ */

  .industry-float { display: none; }

  .industry-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    height: auto;
    overflow: visible;
    border: none;
    border-radius: 0;
  }

  .industry-showcase .isc-panel,
  .industry-showcase .isc-panel.active {
    flex: none;
    min-height: 0;
    aspect-ratio: 4 / 5;
    border-right: none !important;
    border-bottom: none;
    border-radius: 14px;
    overflow: hidden;
    cursor: default;
  }

  /* Uniform legibility gradient, both states */
  .industry-showcase .isc-panel::before,
  .industry-showcase .isc-panel.active::before {
    background: linear-gradient(
      180deg,
      rgba(21, 21, 21, 0.18) 0%,
      rgba(21, 21, 21, 0.78) 100%
    );
  }

  /* Accordion chrome off */
  .industry-showcase .isc-progress,
  .industry-showcase .isc-icon,
  .industry-showcase .isc-num,
  .industry-showcase .isc-title-vert { display: none; }

  /* Content visible on every card, trimmed to badge + title + link */
  .industry-showcase .isc-content,
  .industry-showcase .isc-panel.active .isc-content {
    display: flex;
    gap: 10px;
  }
  .industry-showcase .isc-desc,
  .industry-showcase .isc-specs,
  .industry-showcase .isc-section-label { display: none; }

  .industry-showcase .isc-bottom { padding: 14px 14px 16px; }

  /* "Manufacturing · Services" tag restyled as the badge pill */
  .industry-showcase .isc-panel .isc-tag {
    align-self: flex-start;
    background: rgba(246, 246, 246, 0.92);
    color: var(--color-black);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 9px;
  }

  .industry-showcase .isc-panel .isc-title {
    font-size: clamp(16px, 4.4vw, 20px);
    line-height: 1.2;
  }

  .industry-showcase .isc-panel .isc-link {
    font-size: 12px;
    margin-top: 0;
  }

  /* ------------------------------------------------------------
     4. CASE STUDIES — "Real-world success"
     Burgundy panel treatment dropped at mobile: title,
     description, and stat sit as a plain text block on the
     page background; "Talk to us" becomes an underlined text
     link; photo goes full-width below. Carousel arrows stay.
     Targets classes added to index.php; !important required
     to override the inline styles that drive desktop.
  ------------------------------------------------------------ */

  .case-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .case-card--text {
    background: none !important;
    padding: 0 !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    gap: 0;
  }
  .case-overlay { display: none !important; }

  .case-title {
    color: var(--color-black) !important;
    max-width: none !important;
    font-size: clamp(22px, 6vw, 28px) !important;
  }
  .case-desc {
    color: var(--color-dim) !important;
    max-width: none !important;
    font-size: var(--text-base) !important;
  }

  .case-stat-num   { color: var(--color-brand) !important; }
  .case-stat-label { color: var(--color-dim) !important; }

  .case-link {
    background: none !important;
    padding: 0 0 4px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--color-black);
    color: var(--color-black) !important;
  }

  .case-card--img {
    min-height: 0 !important;
    aspect-ratio: 16 / 10;
  }
  .case-card--img img { opacity: 1 !important; }

  /* ------------------------------------------------------------
     5. HERO — single-column stack
     The hero's base CSS is an inline style block in index.php
     that loads after main.css. Every selector here is scoped to
     .hero-carousel so it wins on specificity (0,2,0) regardless
     of stylesheet order.
  ------------------------------------------------------------ */

  .hero-carousel {
    min-height: unset;
  }
  .hero-carousel .container {
    padding-top: 24px;
    padding-bottom: 36px;
  }
  .hero-carousel .hc__inner {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
  }
  .hero-carousel .hc__text {
    height: auto;
    gap: 18px;
  }
  .hero-carousel .hc__text .badge {
    white-space: normal;
    line-height: 1.4;
    font-size: 11px;
    padding: 6px 12px 6px 9px;
  }
  .hero-carousel .hc__text .h1 {
    margin-top: 4px;
  }
  .hero-carousel .hc__sub {
    max-width: 100%;
  }
  .hero-carousel .hc__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-carousel .hc__actions .btn {
    width: 100%;
    justify-content: center;
  }
  .hero-carousel .hc__brands {
    margin-top: 8px;
  }
  .hero-carousel .hc__brand-logo {
    height: 22px;
  }
  .hero-carousel .hc__track {
    aspect-ratio: 16 / 10;
  }
  .hero-carousel .hc__location {
    margin-top: 16px;
    padding-top: 14px;
  }

  /* ------------------------------------------------------------
     6. ABOUT — stat circles become full-width rounded cards
     The circle geometry does not survive phone widths: the 100+
     card's text cannot fit a circle small enough for the
     viewport. Cards stack, rounded rectangles, image card 16:10.
     The image's inline border-radius:50% requires !important.
  ------------------------------------------------------------ */

  .about__cards {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .stat-card {
    width: 100%;
    height: auto;
    border-radius: 16px;
    padding: 28px 24px;
    gap: 12px;
  }
  .stat-card--image {
    aspect-ratio: 16 / 10;
    padding: 0;
  }
  .stat-card--image img {
    border-radius: 0 !important;
  }

} /* end @media (max-width: 768px) */