:root {
    --blue: #0054A6;
    --blue-dark: #003E7A;
    --blue-light: #1E7BC8;
    --red: #D71920;
    --red-dark: #A61015;
    --dark: #0F172A;
    --gray-900: #111827;
    --gray-700: #374151;
    --gray-600: #4B5563;
    --gray-500: #6B7280;
    --gray-400: #9CA3AF;
    --gray-300: #D1D5DB;
    --gray-200: #E5E7EB;
    --gray-100: #F3F4F6;
    --gray-50: #F9FAFB;
    --white: #FFFFFF;
    --canvas: #F5F7FB;
    --topbar-h: 36px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--gray-900);
    background: var(--canvas);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
  }
  /* Page canvas — faded offshore rig on right, blue swoosh on top-left */
  body::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    width: 50vw;
    height: 100vh;
    background-image:
      linear-gradient(rgba(0, 84, 166, 0.25), rgba(0, 84, 166, 0.25)),
      url('https://images.unsplash.com/photo-1605001011156-cbf0b0f67a51?w=1400&q=70');
    background-blend-mode: multiply;
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.1;
    filter: grayscale(0.6) sepia(0.2) hue-rotate(180deg);
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to left, black 0%, transparent 85%);
    -webkit-mask-image: linear-gradient(to left, black 0%, transparent 85%);
  }
  body::after {
    content: "";
    position: fixed;
    top: -30vh;
    left: -15vw;
    width: 60vw;
    height: 80vh;
    background: radial-gradient(ellipse at center,
      rgba(0, 84, 166, 0.06) 0%,
      rgba(0, 84, 166, 0.03) 40%,
      transparent 70%);
    border-radius: 50% 50% 40% 60% / 60% 50% 50% 40%;
    pointer-events: none;
    z-index: 0;
    transform: rotate(-20deg);
  }
  /* ensure all content is above canvas */
  .site-header, section, footer, .stats-bar, .logo-overhang, .scroll-progress {
    position: relative;
    z-index: 1;
  }
  .site-header { z-index: 100; }
  .logo-overhang { z-index: 5; }
  .scroll-progress { z-index: 250; }
  a { text-decoration: none; color: inherit; }

  /* ========== CUSTOM ARROW ========== */
  .ico-arrow {
    width: 20px;
    height: 12px;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
  }
  .ico-arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 1.5px;
    background: currentColor;
    transform: translateY(-50%);
    transition: width .3s ease, left .3s ease;
  }
  .ico-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 7px;
    height: 7px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    transition: right .3s ease;
  }
  .btn:hover .ico-arrow::before,
  a:hover .ico-arrow::before,
  .case-link:hover .ico-arrow::before,
  .view-all:hover .ico-arrow::before { width: 18px; }
  .btn:hover .ico-arrow::after,
  a:hover .ico-arrow::after,
  .case-link:hover .ico-arrow::after,
  .view-all:hover .ico-arrow::after { right: -4px; }

  /* ========== OVERHANG LOGO — transitional, breaks below header into hero ========== */
  .logo-overhang {
    position: absolute;
    left: 60px;
    top: 50%;
    z-index: 5;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
    transform: translateY(calc(-50% + 18px));
  }
  .logo-overhang img {
    height: 104px;
    width: auto;
    display: block;
    transition: height .35s cubic-bezier(.2,.8,.2,1);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.04));
  }
  .site-header.scrolled .logo-overhang {
    transform: translateY(-50%);
  }
  .site-header.scrolled .logo-overhang img {
    height: 52px;
  }

  /* ========== HEADER ========== */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
    box-shadow: 0 1px 0 var(--gray-100);
    transition: box-shadow .3s;
  }
  .site-header.scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.05); }

  /* TOP UTILITY STRIP */
  .topbar {
    background: var(--blue-dark);
    color: white;
    padding: 0 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--topbar-h);
    font-size: 0.76rem;
    transition: height .35s ease, padding .35s ease;
    overflow: hidden;
  }
  .site-header.scrolled .topbar { height: 0; padding-top: 0; padding-bottom: 0; }
  .topbar-left {
    display: flex;
    align-items: center;
    gap: 20px;
    color: rgba(255,255,255,0.85);
    font-size: 0.74rem;
  }
  .topbar-left .tk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .topbar-left .tk strong { color: white; font-weight: 600; }
  .topbar-left .tk .dot {
    width: 6px;
    height: 6px;
    background: #4ADE80;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(74,222,128,0.2);
    animation: pulse 2s infinite;
  }
  @keyframes pulse { 50% { opacity: 0.5; } }
  .topbar-left .sep { opacity: 0.3; }
  .topbar-right {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
  }

  /* MAIN NAV */
  nav {
    padding: 0 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    height: 100px;
    gap: 32px;
    position: relative;
    transition: height .35s ease;
  }
  .site-header.scrolled nav { height: 70px; }

  .nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
    margin-left: 160px; /* clear the overhang logo space */
  }
  .nav-links {
    display: flex;
    list-style: none;
    gap: 2px;
  }
  .nav-links > li { position: relative; }
  .nav-links a {
    padding: 12px 18px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gray-700);
    transition: color .2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    letter-spacing: 0.01em;
    position: relative;
  }
  .nav-links a:hover { color: var(--blue); }
  .nav-links a.active { color: var(--blue); font-weight: 600; }
  .nav-links a.active::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -2px;
    height: 2px;
    background: var(--red);
  }
  .nav-links .caret {
    font-size: 0.5rem;
    transition: transform .25s;
    opacity: 0.55;
  }
  .nav-links li:hover .caret,
  .nav-links li.open .caret { transform: rotate(180deg); opacity: 1; }

  /* ========== MEGA MENU ========== */
  .mega {
    position: fixed;
    top: calc(var(--topbar-h) + 100px);
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 24px 60px rgba(0, 84, 166, 0.15), 0 2px 8px rgba(0,0,0,0.04);
    border-top: 3px solid var(--blue);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all .3s cubic-bezier(.2,.8,.2,1);
    z-index: 99;
  }
  .site-header.scrolled .mega { top: 70px; }
  .nav-links li:hover .mega,
  .nav-links li.open .mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .mega-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 320px 1fr;
    min-height: 440px;
  }

  /* Featured left panel */
  .mega-featured {
    background: linear-gradient(160deg, var(--blue-dark) 0%, var(--blue) 100%);
    color: white;
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .mega-featured::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(215, 25, 32, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }
  .mega-featured::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    background-image: url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?w=800&q=70');
    background-size: cover;
    background-position: center;
    opacity: 0.08;
    pointer-events: none;
    mask-image: linear-gradient(to top, black, transparent);
    -webkit-mask-image: linear-gradient(to top, black, transparent);
  }
  .mega-featured-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    margin-bottom: 14px;
  }
  .mega-featured-tag::before {
    content: "";
    width: 20px; height: 1px;
    background: var(--red);
  }
  .mega-featured h3 {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
  }
  .mega-featured h3 .red { color: #FF7A80; }
  .mega-featured p {
    font-size: 0.88rem;
    line-height: 1.6;
    opacity: 0.85;
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
  }
  .mega-featured-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.15);
    margin-bottom: 22px;
    position: relative;
    z-index: 1;
  }
  .mega-featured-stats .num {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 4px;
  }
  .mega-featured-stats .lbl {
    font-size: 0.72rem;
    opacity: 0.7;
    line-height: 1.3;
  }
  .mega-featured a.cta-explore {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--red);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    align-self: flex-start;
    transition: background .2s;
    position: relative;
    z-index: 1;
  }
  .mega-featured a.cta-explore:hover { background: var(--red-dark); }

  /* Right columns panel */
  .mega-body {
    padding: 32px 40px 24px;
    display: flex;
    flex-direction: column;
  }
  .mega-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 16px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--gray-100);
  }
  .mega-head .title {
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    color: var(--blue);
    font-weight: 700;
    text-transform: uppercase;
  }
  .mega-head .sub {
    font-size: 0.8rem;
    color: var(--gray-500);
    font-style: italic;
  }
  .mega-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 28px;
    flex: 1;
  }
  .mega-col {
    display: flex;
    flex-direction: column;
  }
  .mega-col h4 {
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 800;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .mega-col h4 .col-ico {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
  }
  .mega-col ul { list-style: none; }
  .mega-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--gray-700);
    transition: color .2s, transform .2s;
    line-height: 1.3;
    border-left: 2px solid transparent;
    padding-left: 8px;
    margin-left: -8px;
  }
  .mega-item::before {
    content: "";
    width: 4px;
    height: 4px;
    background: var(--gray-300);
    flex-shrink: 0;
    transition: background .2s;
  }
  .mega-item:hover {
    color: var(--blue);
    transform: translateX(2px);
    border-left-color: var(--red);
  }
  .mega-item:hover::before { background: var(--red); }

  .mega-foot {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-100);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
  .mega-quick-links {
    display: flex;
    gap: 18px;
  }
  .mega-quick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-700);
    padding: 6px 0;
    transition: color .2s;
  }
  .mega-quick svg { color: var(--blue); }
  .mega-quick:hover { color: var(--blue); }
  .mega-viewall {
    color: var(--blue);
    font-weight: 700;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.01em;
  }
  .mega-viewall:hover { color: var(--red); }


  .nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }

  /* ========== MOBILE MENU TOGGLE + DRAWER ========== */
  .menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1.5px solid var(--gray-200);
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    transition: all .2s;
  }
  .menu-toggle:hover { border-color: var(--blue); }
  .menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--gray-900);
    transition: all .3s cubic-bezier(.2,.8,.2,1);
    transform-origin: center;
  }
  body.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .menu-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  body.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 62, 122, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
    z-index: 190;
  }
  body.menu-open .drawer-backdrop {
    opacity: 1;
    visibility: visible;
  }

  .mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 88vw);
    background: white;
    z-index: 200;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
    display: flex;
    flex-direction: column;
    box-shadow: -20px 0 60px rgba(0, 62, 122, 0.15);
  }
  body.menu-open .mobile-drawer { transform: translateX(0); }

  .drawer-head {
    background: var(--blue-dark);
    color: white;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 74px;
  }
  .drawer-head .drawer-logo img {
    height: 48px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
  }
  .drawer-close {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.12);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: background .2s;
  }
  .drawer-close:hover { background: var(--red); }

  .drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
  }

  .drawer-search {
    padding: 16px 22px;
    background: var(--canvas);
    border-bottom: 1px solid var(--gray-100);
  }
  .drawer-search-input {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    border: 1.5px solid var(--gray-200);
    padding: 10px 14px;
    transition: border-color .2s;
  }
  .drawer-search-input:focus-within { border-color: var(--blue); }
  .drawer-search-input input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.92rem;
    font-family: inherit;
    background: transparent;
  }
  .drawer-search-input input::placeholder { color: var(--gray-400); }
  .drawer-search-input .ico { color: var(--gray-400); display: flex; }

  .drawer-links {
    list-style: none;
    padding: 8px 0;
  }
  .drawer-links li {
    border-bottom: 1px solid var(--gray-100);
  }
  .drawer-links > li > a,
  .drawer-links > li > button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--gray-900);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: color .2s, background .2s;
  }
  .drawer-links > li > a:hover,
  .drawer-links > li > button:hover {
    color: var(--blue);
    background: var(--gray-50);
  }
  .drawer-links > li > a.active {
    color: var(--blue);
    font-weight: 700;
    border-left: 3px solid var(--red);
    padding-left: 19px;
  }
  .drawer-links .drawer-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s;
    color: var(--gray-400);
  }
  .drawer-links li.open .drawer-caret { transform: rotate(180deg); color: var(--blue); }

  .drawer-submenu {
    max-height: 0;
    overflow: hidden;
    background: var(--canvas);
    transition: max-height .4s cubic-bezier(.2,.8,.2,1);
  }
  .drawer-links li.open .drawer-submenu { max-height: 1400px; }
  .drawer-submenu-head {
    padding: 14px 22px 10px;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 700;
  }
  .drawer-submenu ul { list-style: none; }
  .drawer-submenu ul li { border-bottom: 1px solid var(--gray-100); }
  .drawer-submenu ul li:last-child { border-bottom: none; }
  .drawer-submenu a {
    display: block;
    padding: 12px 22px;
    font-size: 0.85rem;
    color: var(--gray-700);
    line-height: 1.35;
  }
  .drawer-submenu a:hover { color: var(--blue); background: white; }

  .drawer-foot {
    padding: 22px;
    border-top: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .drawer-foot .btn-primary {
    justify-content: center;
    padding: 14px 22px;
    font-size: 0.9rem;
  }
  .drawer-foot-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid var(--gray-100);
  }
  .drawer-foot-row .lang-label {
    font-size: 0.72rem;
    color: var(--gray-500);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .drawer-langs {
    display: flex;
    gap: 6px;
  }
  .drawer-lang-btn {
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-700);
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
  }
  .drawer-lang-btn:hover, .drawer-lang-btn.active {
    background: var(--blue);
    color: white;
    border-color: var(--blue);
  }
  .drawer-contact {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.6;
  }
  .drawer-contact a { color: var(--blue); font-weight: 600; }

  /* LANGUAGE + SEARCH */
  .lang-wrapper, .search-wrapper { position: relative; }
  .lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.85);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: color .2s;
  }
  .lang-btn:hover, .lang-wrapper.open .lang-btn { color: white; }
  .lang-btn .chev { font-size: 0.55rem; transition: transform .2s; opacity: 0.7; }
  .lang-wrapper.open .lang-btn .chev { transform: rotate(180deg); }
  .lang-dropdown {
    position: fixed;
    top: calc(var(--topbar-h) + 4px);
    right: 60px;
    min-width: 200px;
    background: white;
    box-shadow: 0 20px 60px rgba(0, 84, 166, 0.18), 0 4px 12px rgba(0,0,0,0.06);
    border-top: 3px solid var(--blue);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all .25s cubic-bezier(.2,.8,.2,1);
    z-index: 150;
  }
  .site-header.scrolled .lang-dropdown { top: 4px; }
  .lang-wrapper.open .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .lang-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 0.88rem;
    color: var(--gray-700);
    cursor: pointer;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--gray-100);
    width: 100%;
    text-align: left;
    font-family: inherit;
  }
  .lang-option:last-child { border-bottom: none; }
  .lang-option:hover { background: var(--gray-50); color: var(--blue); }
  .lang-option.active { color: var(--blue); font-weight: 600; background: var(--gray-50); }
  .lang-flag {
    width: 22px;
    height: 16px;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  }
  .flag-en { background: linear-gradient(180deg, #012169 33%, #fff 33% 66%, #C8102E 66%); }
  .flag-fr { background: linear-gradient(90deg, #0055A4 33%, #fff 33% 66%, #EF4135 66%); }
  .flag-pt { background: linear-gradient(90deg, #046A38 40%, #DA291C 40%); }
  .flag-ar { background: linear-gradient(180deg, #CE1126 33%, #fff 33% 66%, #000 66%); }
  .flag-es { background: linear-gradient(180deg, #AA151B 25%, #F1BF00 25% 75%, #AA151B 75%); }

  .search-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    background: transparent;
    border: none;
    transition: color .2s;
  }
  .search-btn:hover, .search-wrapper.open .search-btn { color: white; }
  .search-dropdown {
    position: fixed;
    top: calc(var(--topbar-h) + 4px);
    right: 60px;
    width: 440px;
    background: white;
    box-shadow: 0 20px 60px rgba(0, 84, 166, 0.18), 0 4px 12px rgba(0,0,0,0.06);
    border-top: 3px solid var(--blue);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all .25s cubic-bezier(.2,.8,.2,1);
    z-index: 150;
    padding: 20px;
  }
  .site-header.scrolled .search-dropdown { top: 4px; }
  .search-wrapper.open .search-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .search-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 2px solid var(--gray-100);
    padding: 10px 14px;
  }
  .search-input-wrap:focus-within { border-color: var(--blue); }
  .search-input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--gray-900);
    background: transparent;
  }
  .search-input-wrap input::placeholder { color: var(--gray-400); }
  .search-input-wrap .ico { color: var(--gray-400); display: flex; }
  .search-hint {
    font-size: 0.7rem;
    color: var(--gray-500);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    margin: 14px 0 10px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-100);
  }
  .search-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .search-tag {
    background: var(--gray-50);
    color: var(--gray-700);
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid var(--gray-100);
  }
  .search-tag:hover { background: var(--blue); color: white; border-color: var(--blue); }

  .topbar-right a {
    color: rgba(255,255,255,0.8);
    padding: 8px 12px;
    font-size: 0.76rem;
    font-weight: 500;
  }
  .topbar-right a:hover { color: white; }
  .topbar-right .divider {
    width: 1px;
    height: 12px;
    background: rgba(255,255,255,0.15);
    margin: 0 4px;
  }

  /* BUTTONS */
  .btn {
    padding: 12px 22px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all .25s;
    border: none;
    font-family: inherit;
  }
  .btn-outline {
    background: white;
    color: var(--blue);
    border: 1.5px solid var(--blue);
  }
  .btn-outline:hover { background: var(--blue); color: white; }
  .btn-primary { background: var(--red); color: white; }
  .btn-primary:hover { background: var(--red-dark); }

  /* SCROLL PROGRESS */
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--red), var(--blue));
    z-index: 250;
  }

  /* SCROLL REVEALS */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
  }
  .reveal-stagger.visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
  .reveal-stagger.visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 100ms; }
  .reveal-stagger.visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 200ms; }
  .reveal-stagger.visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 300ms; }
  .reveal-stagger.visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
  .reveal-stagger.visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 500ms; }
  .reveal-stagger.visible > *:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 600ms; }
  .reveal-stagger.visible > *:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: 700ms; }

  /* ========== HERO ========== */
  .hero {
    padding: 32px 60px 60px;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 0;
    align-items: center;
    position: relative;
    background: white;
    min-height: 560px;
  }
  .hero-left { padding-right: 40px; }
  .hero-frost {
    position: relative;
    padding: 36px 40px;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 20px 60px rgba(0, 84, 166, 0.06);
  }
  .hero-frost::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 4px;
    height: 60px;
    background: var(--red);
  }
  .eyebrow {
    color: var(--blue);
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    font-weight: 700;
    margin-bottom: 22px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 1px;
    background: var(--red);
  }
  .hero-content {
    min-height: 320px;
    transition: opacity .4s, transform .4s;
  }
  .hero-content.swapping { opacity: 0; transform: translateY(10px); }
  .hero h1 {
    font-size: clamp(2.8rem, 5.2vw, 4.6rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--gray-900);
    margin-bottom: 24px;
  }
  .hero h1 .red { color: var(--red); }
  .hero p {
    font-size: 0.98rem;
    color: var(--gray-600);
    line-height: 1.65;
    max-width: 420px;
    margin-bottom: 32px;
  }
  .hero-cta { display: flex; gap: 12px; }

  .hero-right {
    position: relative;
    height: 540px;
    perspective: 1200px;
  }
  .hero-slide {
    position: absolute;
    top: 0;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    transition: filter .4s ease, transform .6s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
  }
  .hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
  }
  .hero-slide:hover img { transform: scale(1.06); }
  .hero-slide.dimmed { filter: brightness(0.55) saturate(0.8); }
  .hero-slide.active { z-index: 2; }
  .hero-slide.active::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid var(--red);
    pointer-events: none;
    z-index: 3;
    animation: activeBorder .5s ease;
  }
  @keyframes activeBorder { from { opacity: 0; } to { opacity: 1; } }
  .hero-slide-1 { left: 0; width: 42%; clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%); }
  .hero-slide-2 { left: 30%; width: 42%; clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%); }
  .hero-slide-3 { left: 60%; width: 42%; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%); }
  .hero-slide-label {
    position: absolute;
    top: 22px;
    padding: 8px 16px;
    background: rgba(0, 62, 122, 0.9);
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    z-index: 4;
    border-left: 3px solid var(--red);
    pointer-events: none;
  }
  .hero-slide-1 .hero-slide-label { left: 30px; }
  .hero-slide-2 .hero-slide-label { left: 50%; transform: translateX(-50%); }
  .hero-slide-3 .hero-slide-label { right: 30px; }
  .hero-slide.active .hero-slide-label {
    background: var(--red);
    border-left-color: white;
  }
  .hero-pagination {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 5;
  }
  .hero-dot {
    width: 28px;
    height: 3px;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: background .2s;
  }
  .hero-dot.active { background: var(--red); }

  /* ========== STATS ========== */
  .stats-bar {
    margin: 0 60px;
    background: white;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--gray-100);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: -20px;
    position: relative;
    z-index: 5;
  }
  .stat-cell {
    padding: 26px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-right: 1px solid var(--gray-100);
    transition: background .2s;
  }
  .stat-cell:last-child { border-right: none; }
  .stat-cell:hover { background: var(--gray-50); }
  .stat-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, rgba(0,84,166,0.08), rgba(215,25,32,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--blue);
    transition: transform .3s ease;
  }
  .stat-cell:hover .stat-icon { transform: scale(1.08) rotate(-3deg); }
  .stat-text { flex: 1; }
  .stat-value {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--blue);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
  }
  .stat-label {
    font-size: 0.78rem;
    color: var(--gray-600);
    font-weight: 500;
  }
  .stat-cell.iso .stat-value { font-size: 1.25rem; }

  section { padding: 80px 60px; }

  /* ========== DIVISIONS PREVIEW (4 from 12) ========== */
  .what-we-do .section-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 40px;
  }
  .what-we-do .eyebrow { margin-bottom: 16px; }
  .what-we-do h2 {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
  .section-top-right p {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin-bottom: 16px;
    max-width: 480px;
  }
  .view-all {
    color: var(--red);
    font-weight: 600;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .divisions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .division-card {
    position: relative;
    aspect-ratio: 1/1.05;
    overflow: hidden;
    cursor: pointer;
    background: var(--gray-900);
  }
  .division-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
  }
  .division-card:hover img { transform: scale(1.06); }
  .division-card::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 60%;
    background: linear-gradient(180deg, rgba(0,62,122,0) 0%, rgba(0,62,122,0.45) 40%, rgba(0,62,122,0.96) 100%);
    pointer-events: none;
    transition: height .3s ease;
  }
  .division-card:hover::after { height: 70%; }
  .division-inner {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: white;
    z-index: 2;
  }
  .division-title {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,62,122,0.5);
  }
  .division-desc {
    font-size: 0.82rem;
    opacity: 0.92;
    text-shadow: 0 1px 6px rgba(0,62,122,0.6);
  }
  .division-arrow-btn {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all .25s;
    margin-top: 4px;
    align-self: flex-start;
    border: 1px solid rgba(255,255,255,0.2);
  }
  .division-card:hover .division-arrow-btn {
    background: var(--red);
    border-color: var(--red);
    transform: translateX(4px);
  }

  /* ========== FEATURED PROJECT ========== */
  .featured {
    background: var(--blue-dark);
    color: white;
    position: relative;
    overflow: hidden;
    padding: 0;
  }
  .featured-bg {
    position: absolute;
    inset: 0;
    background: url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?w=1600&q=85') center/cover;
    opacity: 0.25;
  }
  .featured-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,62,122,0.96) 0%, rgba(0,62,122,0.5) 60%, rgba(0,62,122,0.88) 100%);
  }
  .featured-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    min-height: 280px;
    align-items: center;
    padding: 60px;
  }
  .featured-eyebrow {
    color: var(--red);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  .featured h3 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    line-height: 1.15;
  }
  .featured-desc {
    font-size: 0.95rem;
    opacity: 0.8;
    line-height: 1.65;
    max-width: 480px;
    margin-bottom: 28px;
  }
  .case-link {
    color: var(--red);
    font-weight: 600;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .featured-meta { display: flex; flex-direction: column; gap: 18px; }
  .meta-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 16px;
    font-size: 0.88rem;
  }
  .meta-label {
    color: var(--blue-light);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding-top: 2px;
  }
  .meta-value { color: rgba(255,255,255,0.9); line-height: 1.4; }

  /* Featured section outer wrapper with hero + list */
  .featured-wrap {
    background: white;
  }
  .featured-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    padding: 80px 60px 40px;
    max-width: 1600px;
    margin: 0 auto;
  }
  .featured-head h2 {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--gray-900);
    margin-top: 16px;
  }
  .featured-head h2 .red { color: var(--red); }
  .featured-head .featured-sub {
    font-size: 0.95rem;
    color: var(--gray-600);
    line-height: 1.6;
    max-width: 500px;
  }
  .featured-head .view-all-proj {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--blue);
    font-weight: 700;
    font-size: 0.88rem;
    margin-top: 16px;
  }
  .featured-head .view-all-proj:hover { color: var(--red); }

  .featured-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0;
    padding: 0 60px 80px;
    max-width: 1600px;
    margin: 0 auto;
  }

  /* Hero case card — large left */
  .featured-hero {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    background: var(--blue-dark);
    color: white;
    display: flex;
    align-items: flex-end;
  }
  .featured-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?w=1600&q=85') center/cover;
    opacity: 0.55;
    transition: transform .7s ease;
  }
  .featured-hero:hover::before { transform: scale(1.03); }
  .featured-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(0,62,122,0.2) 0%,
      rgba(0,62,122,0.55) 50%,
      rgba(0,62,122,0.95) 100%);
  }
  .featured-hero-inner {
    position: relative;
    z-index: 2;
    padding: 48px 44px 40px;
    width: 100%;
  }
  .featured-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--red);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  .featured-hero-inner h3 {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 14px;
    max-width: 560px;
  }
  .featured-hero-inner .client {
    font-size: 0.92rem;
    opacity: 0.85;
    font-style: italic;
    margin-bottom: 24px;
  }
  .featured-hero-specs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 20px 0;
    margin-bottom: 22px;
    border-top: 1px solid rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.15);
  }
  .featured-hero-specs .spec .s-label {
    font-size: 0.62rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 4px;
    font-weight: 600;
  }
  .featured-hero-specs .spec .s-val {
    font-size: 0.95rem;
    font-weight: 700;
    color: white;
  }
  .featured-hero-inner .case-link {
    color: white;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .featured-hero-inner .case-link:hover { color: var(--red); }

  /* List of secondary projects on right */
  .featured-list {
    display: flex;
    flex-direction: column;
    background: var(--canvas);
    border-left: 1px solid var(--gray-100);
  }
  .featured-item {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0;
    border-bottom: 1px solid var(--gray-100);
    background: white;
    cursor: pointer;
    transition: background .25s, transform .25s;
    overflow: hidden;
    min-height: 186px;
  }
  .featured-item:last-child { border-bottom: none; }
  .featured-item:hover { background: var(--canvas); }
  .featured-item:hover .fi-img img { transform: scale(1.06); }
  .fi-img {
    position: relative;
    overflow: hidden;
    background: var(--gray-900);
  }
  .fi-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
    opacity: 0.9;
  }
  .fi-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 3px 8px;
    background: rgba(0, 62, 122, 0.9);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .fi-tag.complete { background: var(--blue); }
  .fi-tag.active { background: var(--red); }
  .fi-body {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
  }
  .fi-country {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 700;
  }
  .fi-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.3;
    letter-spacing: -0.01em;
  }
  .fi-meta {
    display: flex;
    gap: 14px;
    font-size: 0.76rem;
    color: var(--gray-500);
    margin-top: 2px;
  }
  .fi-meta .dot {
    color: var(--gray-300);
  }

  /* ========== LOCATIONS + OEMs TABBED SECTION ========== */
  .global-presence {
    background: linear-gradient(180deg, #F8FAFC 0%, #EFF3F8 100%);
    padding: 100px 60px;
  }
  .gp-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 40px;
  }
  .gp-head h2 {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--gray-900);
    margin-top: 16px;
  }
  .gp-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
  .gp-head-right p {
    color: var(--gray-600);
    font-size: 0.95rem;
    line-height: 1.65;
    max-width: 440px;
    text-align: right;
  }
  .tabs {
    display: inline-flex;
    background: white;
    border: 1px solid var(--gray-200);
    padding: 4px;
  }
  .tab-btn {
    padding: 10px 22px;
    font-size: 0.88rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--gray-600);
    cursor: pointer;
    font-family: inherit;
    transition: all .2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .tab-btn.active {
    background: var(--blue);
    color: white;
  }
  .tab-btn:not(.active):hover { color: var(--blue); }
  .tab-btn .count {
    font-size: 0.72rem;
    padding: 2px 7px;
    background: rgba(0,0,0,0.08);
    border-radius: 10px;
    font-weight: 700;
  }
  .tab-btn.active .count { background: rgba(255,255,255,0.25); }

  .tab-panel { display: none; }
  .tab-panel.active { display: block; animation: fadeUp .4s ease; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* LOCATIONS (map + panel) */
  .loc-shell {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0;
    background: white;
    border: 1px solid var(--gray-100);
    box-shadow: 0 20px 60px rgba(0, 84, 166, 0.08);
    overflow: hidden;
    min-height: 560px;
  }
  .map-canvas {
    position: relative;
    background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
    overflow: hidden;
  }
  .map-canvas::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
  }
  .map-svg { width: 100%; height: 100%; display: block; }
  .map-country {
    fill: rgba(255,255,255,0.06);
    stroke: rgba(255,255,255,0.2);
    stroke-width: 1;
    transition: fill .3s;
  }
  .map-country:hover { fill: rgba(255,255,255,0.12); }
  .map-country-label {
    fill: rgba(255,255,255,0.35);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
  }
  .map-water-label {
    fill: rgba(255,255,255,0.2);
    font-size: 10px;
    font-style: italic;
    letter-spacing: 0.08em;
    pointer-events: none;
    user-select: none;
  }
  .map-pin { cursor: pointer; transform-origin: center; }
  .map-pin-pulse {
    fill: var(--red);
    opacity: 0.4;
    animation: pinPulse 2.2s infinite ease-out;
  }
  @keyframes pinPulse {
    0% { r: 6; opacity: 0.6; }
    100% { r: 24; opacity: 0; }
  }
  .map-pin-dot { fill: var(--red); }
  .map-pin-ring {
    fill: none;
    stroke: white;
    stroke-width: 1.5;
    opacity: 0;
    transition: opacity .2s;
  }
  .map-pin.active .map-pin-ring,
  .map-pin:hover .map-pin-ring { opacity: 1; }
  .map-pin.active .map-pin-dot { r: 8; }

  .map-hud {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 10px 14px;
    color: white;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    z-index: 5;
  }
  .map-hud .hud-row { display: flex; gap: 10px; align-items: center; margin-bottom: 3px; }
  .map-hud .hud-row:last-child { margin-bottom: 0; }
  .map-hud .hud-label { color: rgba(255,255,255,0.5); text-transform: uppercase; font-weight: 600; font-size: 0.65rem; }
  .map-hud .hud-val { color: white; font-weight: 700; }

  .loc-panel {
    padding: 40px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: white;
    overflow: hidden;
  }
  .panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
  }
  .panel-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--blue);
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .panel-tag.hq { background: var(--red); }
  .panel-tag.satellite { background: var(--gray-600); }
  .panel-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 12px 0 4px;
  }
  .panel-country-label {
    color: var(--gray-500);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 22px;
  }
  .loc-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--gray-100);
    font-size: 0.88rem;
    color: var(--gray-700);
    line-height: 1.55;
  }
  .loc-detail-row:last-of-type { border-bottom: 1px solid var(--gray-100); }
  .loc-detail-row .icon {
    color: var(--blue);
    flex-shrink: 0;
    margin-top: 2px;
    display: flex;
  }
  .loc-detail-row a { color: var(--gray-700); transition: color .2s; }
  .loc-detail-row a:hover { color: var(--blue); }
  .loc-divisions {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--gray-100);
  }
  .loc-divisions-label {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-500);
    font-weight: 700;
    margin-bottom: 10px;
  }
  .loc-division-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .loc-chip {
    font-size: 0.72rem;
    padding: 5px 10px;
    background: var(--gray-50);
    color: var(--gray-700);
    border: 1px solid var(--gray-100);
    font-weight: 500;
  }
  .panel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--gray-100);
    font-size: 0.78rem;
    color: var(--gray-500);
  }
  .panel-footer a {
    color: var(--blue);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .panel-nav { display: flex; gap: 6px; }
  .panel-nav button {
    width: 32px;
    height: 32px;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    color: var(--gray-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    transition: all .2s;
  }
  .panel-nav button:hover { background: var(--blue); color: white; border-color: var(--blue); }
  .panel-counter {
    font-size: 0.72rem;
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
  }
  .panel-counter strong { color: var(--gray-900); }

  .map-tooltip {
    position: absolute;
    background: white;
    padding: 10px 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    pointer-events: none;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gray-900);
    opacity: 0;
    transition: opacity .15s;
    z-index: 10;
    white-space: nowrap;
    transform: translate(-50%, -140%);
  }
  .map-tooltip.show { opacity: 1; }
  .map-tooltip .tip-label {
    font-size: 0.62rem;
    color: var(--red);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 3px;
    display: block;
  }

  /* ========== OEMs GRID ========== */
  .oem-bar {
    background: white;
    border: 1px solid var(--gray-100);
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-size: 0.85rem;
    color: var(--gray-600);
  }
  .oem-bar strong { color: var(--gray-900); font-weight: 700; }
  .oem-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .oem-filter {
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    background: var(--gray-50);
    color: var(--gray-700);
    border: 1px solid var(--gray-100);
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
  }
  .oem-filter.active { background: var(--blue); color: white; border-color: var(--blue); }
  .oem-filter:not(.active):hover { border-color: var(--blue); color: var(--blue); }

  .oem-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .oem-card {
    background: white;
    border: 1px solid var(--gray-100);
    padding: 24px 22px;
    cursor: pointer;
    transition: all .3s;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 220px;
  }
  .oem-card:hover {
    border-color: var(--blue);
    box-shadow: 0 12px 30px rgba(0, 84, 166, 0.08);
    transform: translateY(-3px);
  }
  .oem-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gray-100);
  }
  .oem-logo-box {
    width: 64px;
    height: 44px;
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: -0.02em;
    flex-shrink: 0;
  }
  .oem-country {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-500);
    font-weight: 600;
    text-align: right;
    line-height: 1.3;
  }
  .oem-country-flag {
    font-size: 1rem;
    display: block;
    margin-bottom: 3px;
  }
  .oem-name {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.01em;
    line-height: 1.25;
  }
  .oem-desc {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.55;
    flex: 1;
  }
  .oem-divisions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-100);
  }
  .oem-division-chip {
    font-size: 0.68rem;
    padding: 3px 8px;
    background: rgba(0, 84, 166, 0.06);
    color: var(--blue);
    font-weight: 600;
  }

  /* ========== HOW WE OPERATE (commitments) ========== */
  .operate {
    background: white;
    padding: 100px 60px;
    position: relative;
  }
  .operate-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 50px;
  }
  .operate-head h2 {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--gray-900);
    margin-top: 16px;
  }
  .operate-head h2 .red { color: var(--red); }
  .operate-head-right p {
    font-size: 0.98rem;
    color: var(--gray-600);
    line-height: 1.65;
    max-width: 540px;
  }
  .commit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--gray-100);
    border: 1px solid var(--gray-100);
  }
  .commit-card {
    background: white;
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: background .3s, transform .3s;
    min-height: 290px;
    position: relative;
  }
  .commit-card:hover {
    background: #FAFBFD;
  }
  .commit-card::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 30px;
    width: 0;
    height: 2px;
    background: var(--red);
    transition: width .4s cubic-bezier(.2,.8,.2,1);
  }
  .commit-card:hover::before { width: calc(100% - 60px); }
  .commit-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    background: linear-gradient(135deg, rgba(0,84,166,0.08), rgba(215,25,32,0.06));
    flex-shrink: 0;
  }
  .commit-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.015em;
    line-height: 1.25;
  }
  .commit-principle {
    font-size: 0.92rem;
    color: var(--gray-700);
    line-height: 1.55;
    font-style: italic;
    padding-left: 14px;
    border-left: 2px solid var(--gray-200);
  }
  .commit-proofs {
    list-style: none;
    padding: 0;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .commit-proofs li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.82rem;
    color: var(--gray-700);
    line-height: 1.4;
  }
  .commit-proofs li svg {
    color: var(--red);
    flex-shrink: 0;
    margin-top: 2px;
  }
  .commit-link {
    color: var(--blue);
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--gray-100);
    transition: color .2s;
  }
  .commit-link:hover { color: var(--red); }

  /* ========== ACCREDITATIONS — Proof Wall ========== */
  .certs-wall {
    margin-top: 60px;
    padding: 48px 50px;
    background: white;
    border: 1px solid var(--gray-100);
    position: relative;
    overflow: hidden;
  }
  .certs-wall::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--blue), var(--red));
  }
  .certs-wall-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--gray-100);
  }
  .certs-wall-head .eyebrow {
    margin-bottom: 12px;
  }
  .certs-wall-head h3 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--gray-900);
  }
  .certs-wall-head h3 .red { color: var(--red); }
  .certs-wall-head p {
    font-size: 0.9rem;
    color: var(--gray-600);
    line-height: 1.6;
    max-width: 440px;
    justify-self: end;
    text-align: right;
  }

  .certs-wall-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    border-top: 1px solid var(--gray-100);
    border-left: 1px solid var(--gray-100);
  }
  .cert-seal {
    position: relative;
    padding: 28px 22px 24px;
    border-right: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    transition: background .25s;
    cursor: default;
  }
  .cert-seal:hover { background: var(--canvas); }
  .cert-seal::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .cert-seal:hover::after { transform: scaleX(1); }
  .cert-seal.red-accent::after { background: var(--red); }
  .cert-seal.green-accent::after { background: #16A34A; }

  .cert-seal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 12px;
    background: var(--blue);
    color: white;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    position: relative;
  }
  .cert-seal-badge.red { background: var(--red); }
  .cert-seal-badge.green { background: #16A34A; }
  .cert-seal-badge::before {
    content: "";
    position: absolute;
    top: 0;
    right: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-top: 6px solid rgba(0,0,0,0.15);
    border-right: 0;
  }
  .cert-seal-code {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
  }
  .cert-seal-year {
    font-size: 0.7rem;
    color: var(--gray-500);
    font-weight: 600;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
  }
  .cert-seal-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-900);
    letter-spacing: -0.005em;
    line-height: 1.3;
    margin-bottom: 4px;
  }
  .cert-seal-desc {
    font-size: 0.72rem;
    color: var(--gray-500);
    line-height: 1.45;
  }
  .cert-seal-status {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-100);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #16A34A;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .cert-seal-status::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #16A34A;
    border-radius: 50%;
  }

  /* ========== TRUST ========== */
  .trust { background: white; padding: 70px 60px; }
  .trust-inner {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.5fr;
    gap: 50px;
    align-items: center;
  }
  .trust-left .eyebrow { color: var(--red); margin-bottom: 14px; }
  .trust-left h3 {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }
  .trust-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  .trust-metric .value {
    color: var(--blue);
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
  }
  .trust-metric .label {
    font-size: 0.78rem;
    color: var(--gray-600);
    line-height: 1.3;
  }
  .trust-right { display: flex; flex-direction: column; gap: 14px; }
  .trusted-by {
    font-size: 0.7rem;
    color: var(--blue);
    letter-spacing: 0.2em;
    font-weight: 700;
    text-transform: uppercase;
  }
  .logos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: center;
  }
  .client-logo {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
  }
  .logo-nnpc { color: #059669; }
  .logo-total { color: #DC2626; font-size: 0.95rem; }
  .logo-seplat { color: #DC2626; font-size: 1.1rem; font-style: italic; }
  .logo-nlng { color: #059669; font-size: 0.8rem; line-height: 1.2; }
  .logo-snepco { color: var(--gray-900); font-size: 0.85rem; line-height: 1.2; }

  /* ========== CTA BAND ========== */
  .cta-band {
    background: linear-gradient(90deg, var(--blue-dark) 0%, var(--blue) 100%);
    color: white;
    padding: 40px 60px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?w=1600&q=75') center/cover;
    opacity: 0.15;
    mix-blend-mode: overlay;
  }
  .cta-content { position: relative; z-index: 1; }
  .cta-content h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
  }
  .cta-content p { font-size: 0.9rem; opacity: 0.85; max-width: 500px; }
  .cta-actions { display: flex; gap: 12px; position: relative; z-index: 1; }
  .btn-white-outline {
    background: transparent;
    color: white;
    border: 1.5px solid white;
  }
  .btn-white-outline:hover { background: white; color: var(--blue); }

  /* ========== SERVICES + INSIGHTS (pre-footer) ========== */
  .pre-footer {
    background: white;
    padding: 0;
    border-top: 1px solid var(--gray-100);
  }
  .services-row,
  .insights-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    padding: 50px 60px;
    align-items: center;
  }
  .services-row { border-bottom: 1px solid var(--gray-100); }

  .pre-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .pre-side .label {
    font-size: 0.78rem;
    letter-spacing: 0.2em;
    color: var(--blue);
    font-weight: 700;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .pre-side .label::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--red);
  }
  .pre-side .desc {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.55;
  }
  .pre-side .side-btn {
    align-self: flex-start;
    padding: 10px 18px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--blue);
    border: 1.5px solid var(--blue);
    background: white;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all .2s;
    font-family: inherit;
    cursor: pointer;
    margin-top: 4px;
  }
  .pre-side .side-btn:hover { background: var(--blue); color: white; }

  /* Services tile row */
  .service-tiles {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    border-left: 1px solid var(--gray-100);
  }
  .service-tile {
    padding: 28px 18px;
    text-align: center;
    border-right: 1px solid var(--gray-100);
    cursor: pointer;
    transition: background .25s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  .service-tile:last-child { border-right: none; }
  .service-tile:hover { background: var(--gray-50); }
  .service-tile .tile-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    transition: transform .3s;
  }
  .service-tile:hover .tile-icon { transform: translateY(-3px); }
  .service-tile .tile-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.35;
    letter-spacing: -0.01em;
  }

  /* Insights row */
  .insights-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    border-left: 1px solid var(--gray-100);
    padding-left: 30px;
  }
  .insight-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 18px;
    align-items: center;
    cursor: pointer;
  }
  .insight-card .thumb {
    width: 120px;
    height: 100px;
    overflow: hidden;
    background: var(--gray-100);
  }
  .insight-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
  }
  .insight-card:hover .thumb img { transform: scale(1.08); }
  .insight-card .text .cat {
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 700;
    margin-bottom: 6px;
    display: block;
  }
  .insight-card .text .headline {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.3;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
    transition: color .2s;
  }
  .insight-card:hover .text .headline { color: var(--blue); }
  .insight-card .text .date {
    font-size: 0.78rem;
    color: var(--gray-500);
  }

  /* ========== FOOTER ========== */
  footer { background: var(--blue-dark); color: white; padding: 60px 60px 24px; }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr 1.3fr;
    gap: 50px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 20px;
  }
  .footer-brand img {
    height: 80px;
    width: auto;
    display: block;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
    opacity: 0.95;
  }
  .footer-brand p {
    color: rgba(255,255,255,0.65);
    font-size: 0.88rem;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 280px;
  }
  .footer-social { display: flex; gap: 10px; }
  .footer-social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    color: white;
    transition: background .2s;
  }
  .footer-social a:hover { background: var(--red); }
  .footer-col h5 {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    margin-bottom: 20px;
  }
  .footer-col ul { list-style: none; }
  .footer-col li { margin-bottom: 10px; }
  .footer-col a {
    color: rgba(255,255,255,0.8);
    font-size: 0.88rem;
    transition: color .2s;
  }
  .footer-col a:hover { color: var(--red); }
  .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.5;
  }
  .contact-icon { color: var(--red); flex-shrink: 0; margin-top: 2px; display: flex; }
  .newsletter-text {
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
    margin-bottom: 16px;
    line-height: 1.5;
  }
  .newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .newsletter-field {
    display: flex;
    align-items: center;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.04);
    transition: border-color .2s, background .2s;
    min-width: 0;
    width: 100%;
  }
  .newsletter-field:focus-within {
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.08);
  }
  .newsletter-field .field-ico {
    color: rgba(255,255,255,0.4);
    padding: 0 0 0 12px;
    display: flex;
    flex-shrink: 0;
  }
  .newsletter-field input {
    flex: 1;
    min-width: 0;
    width: 100%;
    background: transparent;
    border: none;
    padding: 11px 12px;
    color: white;
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
  }
  .newsletter-field input::placeholder { color: rgba(255,255,255,0.4); }
  .newsletter-submit {
    background: var(--red);
    border: none;
    color: white;
    padding: 12px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    transition: background .2s;
    margin-top: 2px;
  }
  .newsletter-submit:hover { background: var(--red-dark); }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
  }
  .footer-bottom-links { display: flex; gap: 24px; }
  .footer-bottom a { color: rgba(255,255,255,0.5); }
  .footer-bottom a:hover { color: white; }

  /* Google Translate */
  .goog-te-banner-frame.skiptranslate { display: none !important; }
  body { top: 0 !important; }
  .goog-logo-link, .goog-te-gadget span { display: none !important; }
  .goog-te-gadget { color: transparent !important; font-size: 0 !important; }
  #google_translate_element { display: none; }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 1100px) {
    .mega-columns { grid-template-columns: repeat(3, 1fr); }
    .oem-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 1024px) {
    .logo-overhang {
      position: relative;
      left: auto;
      top: auto;
      transform: none !important;
    }
    .logo-overhang img {
      height: 56px !important;
    }
    .topbar { padding: 8px 20px; height: auto; flex-wrap: wrap; gap: 8px; }
    .topbar-left { font-size: 0.68rem; gap: 12px; }
    .topbar-left .tk:nth-child(n+3) { display: none; }
    .site-header.scrolled .topbar { height: auto; padding: 6px 20px; }
    nav { padding: 14px 20px; height: auto !important; flex-wrap: wrap; gap: 16px; }
    .site-header.scrolled nav { height: auto !important; }
    .nav-center { display: none; margin-left: 0; }
    .menu-toggle { display: inline-flex; }
    .nav-right .btn-primary { padding: 10px 16px; font-size: 0.82rem; }
    .topbar-right { display: none; }
    .topbar-left { justify-content: center; width: 100%; }
    section, .hero, .trust, .cta-band, footer, .global-presence, .operate { padding-left: 20px; padding-right: 20px; }
    .stats-bar { margin: -20px 20px 0; grid-template-columns: repeat(2, 1fr); }
    .stat-cell { border-bottom: 1px solid var(--gray-100); }
    .hero { grid-template-columns: 1fr; padding-top: 40px; }
    .hero-left { padding-right: 0; }
    .hero-right { height: 320px; margin-top: 40px; }
    .divisions-grid { grid-template-columns: repeat(2, 1fr); }
    .what-we-do .section-top { grid-template-columns: 1fr; gap: 24px; }
    .featured-inner { grid-template-columns: 1fr; padding: 40px 24px; }
    .gp-head { grid-template-columns: 1fr; gap: 20px; }
    .gp-head-right { align-items: flex-start; }
    .gp-head-right p { text-align: left; }
    .loc-shell { grid-template-columns: 1fr; min-height: auto; }
    .map-canvas { min-height: 380px; }
    .oem-grid { grid-template-columns: repeat(2, 1fr); }
    .oem-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .operate { padding: 60px 20px; }
    .operate-head { grid-template-columns: 1fr; gap: 20px; }
    .commit-grid { grid-template-columns: 1fr; }
    .commit-card { min-height: auto; padding: 28px 24px; }

    /* Accreditations proof wall — mobile */
    .certs-wall { padding: 32px 24px; margin-top: 40px; }
    .certs-wall-head { grid-template-columns: 1fr; gap: 16px; }
    .certs-wall-head p { justify-self: start; text-align: left; }
    .certs-wall-grid { grid-template-columns: repeat(2, 1fr); }
    .cert-seal { padding: 22px 18px; }
    .cert-seal-code { font-size: 1.15rem; }

    /* Featured Projects — hero + list — mobile */
    .featured-head {
      grid-template-columns: 1fr;
      gap: 20px;
      padding: 60px 20px 30px;
    }
    .featured-grid {
      grid-template-columns: 1fr;
      padding: 0 20px 60px;
    }
    .featured-hero { min-height: 420px; }
    .featured-hero-inner { padding: 32px 24px 28px; }
    .featured-hero-inner h3 { font-size: 1.6rem; }
    .featured-hero-specs { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .featured-list { border-left: none; border-top: 1px solid var(--gray-100); }
    .featured-item { grid-template-columns: 110px 1fr; min-height: 140px; }

    /* Mega menu — mobile (stack featured + body) */
    .mega-inner { grid-template-columns: 1fr; min-height: auto; }
    .mega-featured { padding: 24px; }
    .mega-featured h3 { font-size: 1.3rem; }
    .mega-body { padding: 24px; }
    .mega-columns { grid-template-columns: 1fr; gap: 20px; }
    .mega-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
    .mega-quick-links { flex-wrap: wrap; gap: 14px; }

    .trust-inner { grid-template-columns: 1fr; gap: 32px; }
    .cta-band { grid-template-columns: 1fr; padding: 32px 24px; }

    /* Pre-footer services + insights mobile */
    .services-row, .insights-row {
      grid-template-columns: 1fr;
      gap: 24px;
      padding: 40px 20px;
    }
    .service-tiles { grid-template-columns: repeat(3, 1fr); border-left: none; border-top: 1px solid var(--gray-100); }
    .service-tile { border-bottom: 1px solid var(--gray-100); }
    .service-tile:nth-child(3n) { border-right: none; }
    .insights-cards { grid-template-columns: 1fr; border-left: none; padding-left: 0; gap: 20px; }

    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer-bottom { flex-direction: column; gap: 12px; }

    /* Mobile search + lang dropdowns */
    .search-dropdown {
      position: fixed;
      top: 72px;
      left: 12px;
      right: 12px;
      width: auto;
    }
    .lang-dropdown { right: 12px; }

    /* Hide page canvas decorations on mobile (cleaner) */
    body::before, body::after { opacity: 0.04; }
  }
  @media (max-width: 640px) {
    .oem-grid { grid-template-columns: 1fr; }
    .service-tiles { grid-template-columns: repeat(2, 1fr); }
    .service-tile:nth-child(2n) { border-right: none; }
    .certs-wall-grid { grid-template-columns: 1fr; }
    .featured-item { grid-template-columns: 90px 1fr; }
    .featured-hero-inner h3 { font-size: 1.4rem; }
    .featured-hero-specs { grid-template-columns: 1fr 1fr; }
  }

/* ====================================================== */
/* ==========   DIVISION PAGE TEMPLATE   ================ */
/* ====================================================== */

/* Breadcrumb */
.breadcrumb {
  background: white;
  padding: 18px 60px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.82rem;
  color: var(--gray-500);
}
.breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1600px;
  margin: 0 auto;
}
.breadcrumb a {
  color: var(--gray-500);
  transition: color .2s;
}
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb .sep {
  color: var(--gray-300);
  font-size: 0.7rem;
}
.breadcrumb .current {
  color: var(--gray-900);
  font-weight: 600;
}

/* Division hero (compact, split layout) */
.div-hero {
  background: white;
  padding: 50px 60px 40px;
  position: relative;
}
.div-hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
}
.div-hero-left .category-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(0, 84, 166, 0.08);
  color: var(--blue);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.div-hero-left h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 18px;
}
.div-hero-left h1 .red { color: var(--red); }
.div-hero-left .lead {
  font-size: 1.05rem;
  color: var(--gray-700);
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 520px;
}
.div-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.div-hero-image {
  position: relative;
  height: 400px;
  overflow: hidden;
  background: var(--gray-900);
}
.div-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.div-hero-image:hover img { transform: scale(1.04); }
.div-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(0,62,122,0.2) 0%,
    transparent 40%,
    rgba(0,62,122,0.5) 100%);
  pointer-events: none;
}
.div-hero-image-tag {
  position: absolute;
  bottom: 22px;
  left: 22px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  color: var(--gray-900);
  font-size: 0.76rem;
  font-weight: 600;
  z-index: 2;
  border-left: 3px solid var(--red);
}

/* Division stats band */
.div-stats {
  background: var(--canvas);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  padding: 32px 60px;
}
.div-stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  max-width: 1600px;
  margin: 0 auto;
}
.div-stat {
  padding-left: 18px;
  border-left: 3px solid var(--red);
}
.div-stat .val {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.div-stat .lbl {
  font-size: 0.78rem;
  color: var(--gray-600);
  line-height: 1.35;
}

/* Overview section */
.div-overview {
  background: white;
  padding: 80px 60px;
}
.div-overview-inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  max-width: 1600px;
  margin: 0 auto;
  align-items: start;
}
.div-overview-left h2 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 12px;
}
.div-overview-left h2 .red { color: var(--red); }
.div-overview-right {
  font-size: 1rem;
  color: var(--gray-700);
  line-height: 1.75;
}
.div-overview-right p { margin-bottom: 18px; }
.div-overview-right p:last-child { margin-bottom: 0; }

/* Core services grid */
.div-services {
  background: var(--canvas);
  padding: 80px 60px;
}
.div-services-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  max-width: 1600px;
  margin: 0 auto 40px;
}
.div-services-head h2 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 12px;
}
.div-services-head p {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.6;
}
.service-line-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1600px;
  margin: 0 auto;
}
.service-line {
  background: white;
  border: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.service-line:hover {
  border-color: var(--blue);
  box-shadow: 0 12px 30px rgba(0, 84, 166, 0.08);
  transform: translateY(-3px);
}
.service-line:hover .service-line-img img {
  transform: scale(1.06);
}
.service-line-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--gray-900);
}
.service-line-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.service-line-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 62, 122, 0) 50%,
    rgba(0, 62, 122, 0.3) 100%);
  pointer-events: none;
}
.service-line-img-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 10px;
  background: rgba(0, 62, 122, 0.88);
  backdrop-filter: blur(6px);
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 2;
}
.service-line-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  position: relative;
}
.service-line-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.service-line:hover .service-line-body::before { width: 40px; }
.service-line h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-top: 6px;
}
.service-line p {
  font-size: 0.86rem;
  color: var(--gray-600);
  line-height: 1.55;
  flex: 1;
}
.service-line-link {
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--gray-100);
}
.service-line:hover .service-line-link { color: var(--red); }

/* Fallback: icon-only variant when no image is available */
.service-line.no-image {
  padding: 30px 28px;
  gap: 14px;
}
.service-line.no-image .service-line-body::before { display: none; }
.service-line.no-image .service-line-body {
  padding: 0;
}
.service-line-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  background: linear-gradient(135deg, rgba(0,84,166,0.08), rgba(215,25,32,0.05));
  flex-shrink: 0;
}

/* Equipment & Technology section */
.div-equipment {
  background: white;
  padding: 80px 60px;
}
.div-equipment-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.div-equipment-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 40px;
}
.div-equipment-head h2 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 12px;
}
.div-equipment-head h2 .red { color: var(--red); }
.div-equipment-head p {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.6;
}
.equip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.equip-card {
  background: var(--canvas);
  padding: 24px 22px;
  border: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all .25s;
}
.equip-card:hover {
  background: white;
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 84, 166, 0.08);
}
.equip-card .equip-type {
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
}
.equip-card .equip-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.equip-card .equip-desc {
  font-size: 0.78rem;
  color: var(--gray-600);
  line-height: 1.5;
  margin-top: 4px;
}

/* Standards & compliance — division-specific */
.div-standards {
  background: var(--canvas);
  padding: 80px 60px;
}
.div-standards-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.div-standards-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 40px;
}
.div-standards-head h2 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 12px;
}
.div-standards-head h2 .red { color: var(--red); }
.div-standards-head p {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.6;
}
.standards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: white;
  border: 1px solid var(--gray-100);
}
.standard-item {
  padding: 24px 22px;
  border-right: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background .25s;
}
.standard-item:hover { background: var(--canvas); }
.standard-item .std-body {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 800;
}
.standard-item .std-code {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.standard-item .std-title {
  font-size: 0.78rem;
  color: var(--gray-600);
  line-height: 1.4;
}

/* Representative projects — reuse featured-item classes from home */
.div-projects {
  background: white;
  padding: 80px 60px;
}
.div-projects-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.div-projects-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 40px;
}
.div-projects-head h2 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 12px;
}
.div-projects-head h2 .red { color: var(--red); }
.div-projects-head .view-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.88rem;
  margin-top: 12px;
}
.div-projects-head .view-all:hover { color: var(--red); }
.div-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.div-project-card {
  background: white;
  border: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all .3s;
  overflow: hidden;
}
.div-project-card:hover {
  border-color: var(--blue);
  box-shadow: 0 12px 30px rgba(0, 84, 166, 0.08);
  transform: translateY(-3px);
}
.div-project-card:hover .dpc-img img { transform: scale(1.06); }
.dpc-img {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--gray-900);
}
.dpc-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.dpc-status {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 10px;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: white;
}
.dpc-status.active { background: var(--red); }
.dpc-status.complete { background: var(--blue); }
.dpc-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.dpc-country {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
}
.dpc-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.dpc-meta {
  display: flex;
  gap: 14px;
  font-size: 0.78rem;
  color: var(--gray-500);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}
.dpc-meta .dot { color: var(--gray-300); }

/* OEMs relevant to this division */
.div-oems {
  background: var(--canvas);
  padding: 80px 60px;
}
.div-oems-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.div-oems-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 40px;
}
.div-oems-head h2 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 12px;
}
.div-oems-head h2 .red { color: var(--red); }
.div-oems-head .view-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--blue);
  font-weight: 700;
  font-size: 0.88rem;
  margin-top: 12px;
}
.div-oems-head .view-all:hover { color: var(--red); }

/* Related divisions */
.div-related {
  background: white;
  padding: 80px 60px;
  border-top: 1px solid var(--gray-100);
}
.div-related-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.div-related h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 10px;
  margin-bottom: 28px;
}
.div-related h2 .red { color: var(--red); }
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.related-card {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  transition: all .25s;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.related-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.related-card:hover {
  border-color: var(--blue);
  background: var(--canvas);
}
.related-card:hover::after { transform: scaleY(1); }
.related-card .rc-cat {
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
}
.related-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.related-card p {
  font-size: 0.82rem;
  color: var(--gray-600);
  line-height: 1.5;
  flex: 1;
}
.related-card .rc-link {
  color: var(--blue);
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

/* Division CTA band (white variant to differentiate from home CTA) */
.div-cta {
  background: linear-gradient(90deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: white;
  padding: 60px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.div-cta::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(215, 25, 32, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.div-cta-content { position: relative; z-index: 1; }
.div-cta-content .cta-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  font-weight: 700;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.div-cta-content .cta-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--red);
}
.div-cta-content h3 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 10px;
}
.div-cta-content p {
  font-size: 0.95rem;
  opacity: 0.85;
  max-width: 540px;
}
.div-cta-actions {
  display: flex;
  gap: 12px;
  position: relative;
  z-index: 1;
}

/* Division page responsive */
@media (max-width: 1100px) {
  .service-line-grid { grid-template-columns: repeat(2, 1fr); }
  .equip-grid, .standards-grid { grid-template-columns: repeat(2, 1fr); }
  .div-projects-grid, .related-grid { grid-template-columns: repeat(2, 1fr); }
  .div-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 1024px) {
  .breadcrumb { padding: 14px 20px; }
  .div-hero,
  .div-overview,
  .div-services,
  .div-equipment,
  .div-standards,
  .div-projects,
  .div-oems,
  .div-related { padding: 50px 20px; }
  .div-stats { padding: 28px 20px; }
  .div-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .div-hero-image { height: 280px; }
  .div-overview-inner,
  .div-services-head,
  .div-equipment-head,
  .div-standards-head,
  .div-projects-head,
  .div-oems-head { grid-template-columns: 1fr; gap: 20px; }
  .div-cta { grid-template-columns: 1fr; padding: 40px 20px; gap: 24px; }
  .service-line-grid,
  .equip-grid,
  .standards-grid,
  .div-projects-grid,
  .related-grid { grid-template-columns: 1fr; }
}

/* ====================================================== */
/* ==========   SERVICE PAGE TEMPLATE   ================== */
/* ====================================================== */

/* Compact service hero */
.svc-hero {
  background: white;
  padding: 40px 60px 40px;
  position: relative;
}
.svc-hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
}
.svc-hero-left .svc-parent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 18px;
}
.svc-hero-left .svc-parent::before {
  content: "";
  width: 20px;
  height: 1px;
  background: var(--red);
}
.svc-hero-left h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 14px;
}
.svc-hero-left h1 .red { color: var(--red); }
.svc-hero-left .svc-tagline {
  font-size: 1rem;
  color: var(--gray-700);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 520px;
}
.svc-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.svc-hero-image {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--gray-900);
}
.svc-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.svc-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    transparent 50%,
    rgba(0, 62, 122, 0.3) 100%);
  pointer-events: none;
}

/* Quick specs bar */
.svc-specs {
  background: var(--canvas);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  padding: 20px 60px;
}
.svc-specs-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.svc-spec {
  padding: 8px 24px;
  border-right: 1px solid var(--gray-200);
}
.svc-spec:first-child { padding-left: 0; }
.svc-spec:last-child { border-right: none; padding-right: 0; }
.svc-spec .sp-label {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}
.svc-spec .sp-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
  line-height: 1.25;
}

/* Sticky in-page nav */
.svc-anchor-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: white;
  border-bottom: 1px solid var(--gray-100);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.site-header.scrolled ~ main .svc-anchor-nav,
body.scrolled .svc-anchor-nav { top: 70px; }
.svc-anchor-nav-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.svc-anchor-nav-inner::-webkit-scrollbar { display: none; }
.svc-anchor-nav a {
  padding: 14px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-600);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all .2s;
  position: relative;
  top: 1px;
}
.svc-anchor-nav a:hover,
.svc-anchor-nav a.active {
  color: var(--blue);
  border-bottom-color: var(--red);
}

/* Main content area — two column with prose + aside */
.svc-main {
  background: white;
  padding: 70px 60px 80px;
  scroll-margin-top: 140px;
}
.svc-main-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 60px;
  align-items: start;
}
.svc-prose-wrap {
  min-width: 0;  /* prevents grid overflow on long words */
}

/* Prose styling — WYSIWYG content */
.prose {
  color: var(--gray-700);
  font-size: 1rem;
  line-height: 1.75;
}
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose h2 {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--gray-900);
  margin-top: 2.2em;
  margin-bottom: 0.8em;
  scroll-margin-top: 140px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--gray-900);
  margin-top: 2em;
  margin-bottom: 0.6em;
}
.prose h4 {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue);
  margin-top: 1.8em;
  margin-bottom: 0.5em;
}
.prose p {
  margin-bottom: 1.2em;
  max-width: 70ch;
}
.prose p strong, .prose li strong { color: var(--gray-900); font-weight: 700; }
.prose a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s;
}
.prose a:hover { color: var(--red); }
.prose ul, .prose ol {
  margin: 0 0 1.4em;
  padding-left: 1.4em;
  max-width: 70ch;
}
.prose li {
  margin-bottom: 0.5em;
  line-height: 1.65;
}
.prose ul > li::marker { color: var(--red); }
.prose ol > li::marker { color: var(--red); font-weight: 700; }
.prose blockquote {
  margin: 2em 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--red);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--gray-900);
  line-height: 1.55;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr {
  border: none;
  border-top: 1px solid var(--gray-200);
  margin: 2em 0;
}
.prose code {
  background: var(--canvas);
  padding: 2px 6px;
  font-size: 0.88em;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  color: var(--blue-dark);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.92rem;
}
.prose th {
  background: var(--canvas);
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  color: var(--gray-900);
  border-bottom: 2px solid var(--gray-200);
}
.prose td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-100);
}
.prose img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5em auto;
}

/* Editor widget: .callout box */
.prose .callout {
  background: var(--canvas);
  border-left: 3px solid var(--blue);
  padding: 20px 24px;
  margin: 1.8em 0;
  display: block;
  font-style: normal;
}
.prose .callout p { margin-bottom: 0.7em; }
.prose .callout p:last-child { margin-bottom: 0; }
.prose .callout strong { color: var(--blue); }

/* Editor widget: .key-takeaways */
.prose .key-takeaways {
  background: linear-gradient(135deg, rgba(0, 84, 166, 0.04), rgba(215, 25, 32, 0.02));
  border: 1px solid var(--gray-100);
  padding: 24px 28px;
  margin: 2em 0;
}
.prose .key-takeaways h4 {
  margin-top: 0;
  margin-bottom: 14px;
  color: var(--red);
}
.prose .key-takeaways ul {
  margin-bottom: 0;
  padding-left: 1.2em;
}

/* Right aside (sticky) */
.svc-aside {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.svc-aside-card {
  background: var(--canvas);
  border: 1px solid var(--gray-100);
  padding: 22px 22px 24px;
}
.svc-aside-card h4 {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 800;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-200);
}
.svc-aside-card ul { list-style: none; }
.svc-aside-card li {
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.86rem;
  color: var(--gray-700);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}
.svc-aside-card li:last-child { border-bottom: none; padding-bottom: 0; }
.svc-aside-card li strong {
  color: var(--gray-900);
  font-weight: 600;
}
.svc-aside-card li .val {
  color: var(--gray-900);
  font-weight: 700;
  font-size: 0.84rem;
  text-align: right;
  flex-shrink: 0;
}
.svc-aside-card .ac-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--red);
  color: white;
  font-size: 0.84rem;
  font-weight: 600;
  margin-top: 16px;
  transition: background .2s;
  width: 100%;
}
.svc-aside-card .ac-btn:hover { background: var(--red-dark); }
.svc-aside-card .ac-btn-outline {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue);
}
.svc-aside-card .ac-btn-outline:hover {
  background: var(--blue);
  color: white;
}

/* Methodology — 5-step horizontal cards */
.svc-methodology {
  background: var(--canvas);
  padding: 80px 60px;
  scroll-margin-top: 140px;
}
.svc-methodology-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.svc-methodology-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 40px;
}
.svc-methodology-head h2 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 12px;
}
.svc-methodology-head h2 .red { color: var(--red); }
.svc-methodology-head p {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.6;
}
.steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  position: relative;
}
.steps-grid::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 4%;
  right: 4%;
  height: 2px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--red) 100%);
  opacity: 0.3;
  z-index: 0;
}
.step-card {
  background: white;
  padding: 24px 22px 26px;
  border: 1px solid var(--gray-100);
  position: relative;
  z-index: 1;
  transition: all .25s;
}
.step-card:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 84, 166, 0.08);
}
.step-num {
  width: 44px;
  height: 44px;
  background: white;
  border: 2px solid var(--blue);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.step-card:hover .step-num {
  background: var(--red);
  border-color: var(--red);
  color: white;
}
.step-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.25;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.step-card p {
  font-size: 0.82rem;
  color: var(--gray-600);
  line-height: 1.55;
}

/* Inline CTA break */
.svc-cta-break {
  background: linear-gradient(90deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: white;
  padding: 32px 60px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}
.svc-cta-break-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  width: 100%;
}
.svc-cta-break h3 {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.svc-cta-break h3 .accent { color: #FF9AA0; }
.svc-cta-break .actions {
  display: flex;
  gap: 12px;
}

/* Equipment used (compact) */
.svc-equipment {
  background: white;
  padding: 80px 60px;
  scroll-margin-top: 140px;
}
.svc-equipment-inner { max-width: 1600px; margin: 0 auto; }
.svc-section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 36px;
}
.svc-section-head h2 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--gray-900);
  margin-top: 10px;
}
.svc-section-head h2 .red { color: var(--red); }
.svc-section-head p {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.6;
}
.svc-equip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* Applicable standards (compact list) */
.svc-standards {
  background: var(--canvas);
  padding: 80px 60px;
  scroll-margin-top: 140px;
}
.svc-standards-inner { max-width: 1600px; margin: 0 auto; }
.svc-std-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
}
.svc-std-item {
  background: white;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
}
.svc-std-item .std-left {
  min-width: 64px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.svc-std-item .std-body {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 800;
}
.svc-std-item .std-code {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.svc-std-item .std-title {
  font-size: 0.82rem;
  color: var(--gray-600);
  line-height: 1.4;
}

/* Deliverables */
.svc-deliverables {
  background: white;
  padding: 80px 60px;
  scroll-margin-top: 140px;
}
.svc-deliverables-inner { max-width: 1600px; margin: 0 auto; }
.deliverables-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.deliverable-card {
  background: var(--canvas);
  padding: 28px 24px;
  border: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all .25s;
}
.deliverable-card:hover {
  background: white;
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 84, 166, 0.06);
}
.deliverable-card .d-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  background: rgba(0, 84, 166, 0.08);
}
.deliverable-card h3 {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.deliverable-card p {
  font-size: 0.82rem;
  color: var(--gray-600);
  line-height: 1.55;
}

/* Case studies (reuses div-project-card styles from division page) */
.svc-cases {
  background: var(--canvas);
  padding: 80px 60px;
  scroll-margin-top: 140px;
}
.svc-cases-inner { max-width: 1600px; margin: 0 auto; }
.svc-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* FAQ — native details accordion */
.svc-faq {
  background: white;
  padding: 80px 60px;
  scroll-margin-top: 140px;
}
.svc-faq-inner { max-width: 1200px; margin: 0 auto; }
.faq-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--gray-200);
}
.faq-item {
  border-bottom: 1px solid var(--gray-200);
  padding: 0;
}
.faq-item summary {
  padding: 20px 0;
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.35;
  letter-spacing: -0.01em;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230054A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform .3s;
  flex-shrink: 0;
}
.faq-item[open] summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23D71920' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}
.faq-item:hover summary { color: var(--blue); }
.faq-item[open] summary { color: var(--blue); }
.faq-answer {
  padding: 0 0 24px 0;
  font-size: 0.94rem;
  color: var(--gray-700);
  line-height: 1.7;
}
.faq-answer p { margin-bottom: 0.9em; max-width: 70ch; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq-answer ul, .faq-answer ol {
  margin: 0 0 0.9em;
  padding-left: 1.4em;
}
.faq-answer li { margin-bottom: 0.3em; }

/* Related services */
.svc-related {
  background: white;
  padding: 80px 60px;
  border-top: 1px solid var(--gray-100);
}
.svc-related-inner { max-width: 1600px; margin: 0 auto; }
.svc-related h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 10px;
  margin-bottom: 28px;
}
.svc-related h2 .red { color: var(--red); }

/* Service responsive */
@media (max-width: 1100px) {
  .svc-main-inner { grid-template-columns: 1fr; }
  .svc-aside { position: static; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid::before { display: none; }
  .svc-equip-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-std-list { grid-template-columns: repeat(2, 1fr); }
  .deliverables-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-specs-inner { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .svc-spec {
    border-right: none;
    border-bottom: 1px solid var(--gray-200);
    padding: 10px 0;
  }
  .svc-spec:nth-child(2n) { padding-left: 16px; }
}
@media (max-width: 1024px) {
  .svc-hero { padding: 32px 20px; }
  .svc-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .svc-specs { padding: 16px 20px; }
  .svc-anchor-nav-inner { padding: 0 20px; }
  .svc-main { padding: 50px 20px; }
  .svc-methodology,
  .svc-equipment,
  .svc-standards,
  .svc-deliverables,
  .svc-cases,
  .svc-faq,
  .svc-related { padding: 50px 20px; }
  .svc-cta-break { padding: 28px 20px; }
  .svc-cta-break-inner { grid-template-columns: 1fr; gap: 20px; }
  .svc-methodology-head,
  .svc-section-head { grid-template-columns: 1fr; gap: 16px; }
  .svc-cases-grid { grid-template-columns: 1fr; }
  .steps-grid,
  .svc-equip-grid,
  .svc-std-list,
  .deliverables-grid { grid-template-columns: 1fr; }
}

/* ====================================================== */
/* ==========   DIVISIONS INDEX PAGE   =================== */
/* ====================================================== */

/* Index hero — compact utility hero */
.divx-hero {
  background: white;
  padding: 60px 60px 50px;
  position: relative;
}
.divx-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.divx-hero .eyebrow {
  justify-content: center;
  display: inline-flex;
  margin-bottom: 20px;
}
.divx-hero h1 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  max-width: 900px;
  margin: 0 auto 22px;
}
.divx-hero h1 .red { color: var(--red); }
.divx-hero p.divx-lead {
  font-size: 1.1rem;
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 680px;
  margin: 0 auto 36px;
}

/* Hero summary stats strip */
.divx-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: 24px 0;
}
.divx-summary-cell {
  text-align: center;
  padding: 0 20px;
  border-right: 1px solid var(--gray-200);
}
.divx-summary-cell:last-child { border-right: none; }
.divx-summary-cell .val {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.divx-summary-cell .lbl {
  font-size: 0.75rem;
  color: var(--gray-600);
  letter-spacing: 0.05em;
  line-height: 1.3;
}

/* Intro band — "How we're organized" */
.divx-intro {
  background: var(--canvas);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  padding: 30px 60px;
}
.divx-intro-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: center;
}
.divx-intro-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}
.divx-intro-label::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--red);
}
.divx-intro p {
  font-size: 0.95rem;
  color: var(--gray-700);
  line-height: 1.65;
  max-width: 780px;
}

/* Category section */
.divx-category {
  background: white;
  padding: 70px 60px 40px;
  scroll-margin-top: 100px;
}
.divx-category:nth-child(even) { background: var(--canvas); }
.divx-category-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.divx-category-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--gray-100);
}
.divx-category-head .eyebrow { margin-bottom: 10px; }
.divx-category-head h2 {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--gray-900);
}
.divx-category-head h2 .red { color: var(--red); }
.divx-category-head .cat-count {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--gray-500);
}
.divx-category-head .cat-count strong {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}

/* Division card grid */
.divx-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.divx-card {
  background: white;
  border: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all .3s;
  cursor: pointer;
  position: relative;
}
.divx-card:hover {
  border-color: var(--blue);
  box-shadow: 0 14px 32px rgba(0, 84, 166, 0.1);
  transform: translateY(-4px);
}
.divx-card:hover .divx-card-img img {
  transform: scale(1.06);
}
.divx-card-img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--gray-900);
}
.divx-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.divx-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 62, 122, 0) 50%, rgba(0, 62, 122, 0.35) 100%);
  pointer-events: none;
}
.divx-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  background: rgba(0, 62, 122, 0.92);
  backdrop-filter: blur(6px);
  color: white;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
}
.divx-card-num {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all .25s;
}
.divx-card:hover .divx-card-num {
  background: var(--red);
  color: white;
  transform: scale(1.08);
}
.divx-card-body {
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  position: relative;
}
.divx-card-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.divx-card:hover .divx-card-body::before { width: 40px; }
.divx-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.divx-card p {
  font-size: 0.84rem;
  color: var(--gray-600);
  line-height: 1.55;
  flex: 1;
}
.divx-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-top: 4px;
}
.divx-card-chip {
  font-size: 0.66rem;
  padding: 3px 8px;
  background: var(--canvas);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.divx-card-link {
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-100);
  margin-top: 4px;
  transition: color .2s;
}
.divx-card:hover .divx-card-link { color: var(--red); }

/* Integrated Delivery feature block */
.divx-integrated {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: white;
  padding: 70px 60px;
  position: relative;
  overflow: hidden;
}
.divx-integrated::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(215, 25, 32, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
.divx-integrated::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?w=1200&q=70');
  background-size: cover;
  background-position: center;
  opacity: 0.08;
  pointer-events: none;
  mask-image: linear-gradient(to left, black, transparent);
  -webkit-mask-image: linear-gradient(to left, black, transparent);
}
.divx-integrated-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.divx-integrated-left .eyebrow {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 16px;
}
.divx-integrated-left .eyebrow::before {
  background: var(--red);
}
.divx-integrated-left h2 {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin-bottom: 20px;
  max-width: 560px;
}
.divx-integrated-left h2 .accent {
  color: #FF9AA0;
}
.divx-integrated-left p {
  font-size: 1rem;
  opacity: 0.85;
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 520px;
}
.divx-integrated-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.divx-integrated-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.divx-int-stat {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 22px 22px 24px;
  backdrop-filter: blur(8px);
  transition: background .25s;
}
.divx-int-stat:hover {
  background: rgba(255, 255, 255, 0.1);
}
.divx-int-stat .n {
  font-size: 2rem;
  font-weight: 800;
  color: white;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.divx-int-stat .lbl {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
}

/* "Not sure which fits?" helper block */
.divx-helper {
  background: white;
  padding: 70px 60px;
  border-top: 1px solid var(--gray-100);
}
.divx-helper-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  padding: 36px 40px;
  background: var(--canvas);
  border-left: 4px solid var(--red);
}
.divx-helper-left h3 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  line-height: 1.25;
  margin-bottom: 10px;
}
.divx-helper-left p {
  font-size: 0.92rem;
  color: var(--gray-600);
  line-height: 1.6;
}
.divx-helper-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.divx-helper-actions .btn {
  justify-content: flex-start;
  width: 100%;
}

/* Divisions index responsive */
@media (max-width: 1200px) {
  .divx-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .divx-grid { grid-template-columns: repeat(2, 1fr); }
  .divx-summary { grid-template-columns: repeat(2, 1fr); gap: 20px 0; }
  .divx-summary-cell:nth-child(2n) { border-right: none; }
  .divx-integrated-inner { grid-template-columns: 1fr; gap: 40px; }
  .divx-intro-inner { grid-template-columns: 1fr; gap: 16px; }
  .divx-category-head { grid-template-columns: 1fr; gap: 14px; }
  .divx-category-head .cat-count { justify-content: flex-start; }
}
@media (max-width: 1024px) {
  .divx-hero { padding: 40px 20px; }
  .divx-intro { padding: 24px 20px; }
  .divx-category { padding: 50px 20px 30px; }
  .divx-integrated { padding: 50px 20px; }
  .divx-helper { padding: 50px 20px; }
  .divx-helper-inner { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
  .divx-integrated-right { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .divx-grid { grid-template-columns: 1fr; }
  .divx-integrated-right { grid-template-columns: 1fr; }
}

/* ====================================================== */
/* ==========   PROJECTS INDEX PAGE   ==================== */
/* ====================================================== */

/* Projects hero */
.px-hero {
  background: white;
  padding: 50px 60px 40px;
}
.px-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: end;
}
.px-hero-left .eyebrow { margin-bottom: 16px; }
.px-hero-left h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 18px;
}
.px-hero-left h1 .red { color: var(--red); }
.px-hero-left p {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 540px;
}
.px-hero-right {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
}
.px-hero-stat {
  background: white;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.px-hero-stat .n {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.px-hero-stat .lbl {
  font-size: 0.75rem;
  color: var(--gray-600);
  line-height: 1.3;
}

/* Filter bar (sticky under header) */
.px-filterbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--canvas);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  padding: 18px 60px;
  transition: box-shadow .2s;
}
.px-filterbar.is-stuck {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.site-header.scrolled ~ main .px-filterbar,
body.scrolled .px-filterbar { top: 70px; }

.px-filter-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
.px-filter-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.px-filter-label::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--red);
}
.px-filter-groups {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}
.px-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.px-filter-group-label {
  font-size: 0.72rem;
  color: var(--gray-500);
  font-weight: 600;
  white-space: nowrap;
}
.px-filter-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.px-chip {
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 500;
  background: white;
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  white-space: nowrap;
}
.px-chip:hover { border-color: var(--blue); color: var(--blue); }
.px-chip.active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
  font-weight: 600;
}

.px-filter-right {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
}
.px-result-count {
  font-size: 0.82rem;
  color: var(--gray-600);
}
.px-result-count strong {
  color: var(--gray-900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.px-clear {
  background: transparent;
  border: none;
  color: var(--red);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  transition: color .2s;
  opacity: 0;
  pointer-events: none;
}
.px-clear.visible { opacity: 1; pointer-events: auto; }
.px-clear:hover { color: var(--red-dark); }

/* Results grid */
.px-results {
  background: white;
  padding: 50px 60px 70px;
}
.px-results-inner {
  max-width: 1600px;
  margin: 0 auto;
}
.px-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Project card (enhanced over div-project-card) */
.px-card {
  background: white;
  border: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all .3s;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.px-card:hover {
  border-color: var(--blue);
  box-shadow: 0 14px 32px rgba(0, 84, 166, 0.1);
  transform: translateY(-4px);
}
.px-card:hover .px-card-img img { transform: scale(1.06); }

.px-card-img {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--gray-900);
}
.px-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.px-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 62, 122, 0) 50%, rgba(0, 62, 122, 0.4) 100%);
  pointer-events: none;
}
.px-status {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 4px 10px;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
.px-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.px-status.active { background: var(--red); }
.px-status.complete { background: var(--blue); }
.px-status.complete::before { background: white; }
.px-status.active::before { background: white; }

.px-card-client {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  z-index: 2;
  color: white;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0, 62, 122, 0.6);
}
.px-card-client .px-card-client-label {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
}

.px-card-body {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  position: relative;
}
.px-card-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.px-card:hover .px-card-body::before { width: 40px; }

.px-card-country {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.px-card-country .flag { font-size: 0.85rem; }
.px-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.px-card-desc {
  font-size: 0.84rem;
  color: var(--gray-600);
  line-height: 1.55;
  flex: 1;
}
.px-card-divisions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.px-card-div-chip {
  font-size: 0.64rem;
  padding: 3px 7px;
  background: rgba(0, 84, 166, 0.06);
  color: var(--blue);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.px-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  color: var(--gray-500);
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}
.px-card-meta .meta-left {
  display: flex;
  gap: 10px;
}
.px-card-meta .meta-left .dot { color: var(--gray-300); }
.px-card-meta .meta-year {
  color: var(--gray-900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Empty state */
.px-empty {
  grid-column: 1 / -1;
  padding: 80px 40px;
  text-align: center;
  background: var(--canvas);
  border: 1px dashed var(--gray-200);
}
.px-empty-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  background: white;
  border: 1px solid var(--gray-200);
}
.px-empty h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.px-empty p {
  font-size: 0.9rem;
  color: var(--gray-600);
  margin-bottom: 20px;
}

/* Pagination */
.px-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 50px;
}
.px-page-btn {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  font-variant-numeric: tabular-nums;
}
.px-page-btn:hover:not(:disabled):not(.active) {
  border-color: var(--blue);
  color: var(--blue);
}
.px-page-btn.active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.px-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.px-page-btn.ellipsis {
  border: none;
  cursor: default;
  background: transparent;
}

/* Portfolio CTA */
.px-portfolio-cta {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: white;
  padding: 50px 60px;
  position: relative;
  overflow: hidden;
}
.px-portfolio-cta::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(215, 25, 32, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
.px-portfolio-cta-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.px-portfolio-cta h3 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 10px;
}
.px-portfolio-cta h3 .accent { color: #FF9AA0; }
.px-portfolio-cta p {
  font-size: 0.94rem;
  opacity: 0.85;
  max-width: 560px;
}
.px-portfolio-cta .actions { display: flex; gap: 12px; }

/* Projects responsive */
@media (max-width: 1100px) {
  .px-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .px-hero { padding: 40px 20px 30px; }
  .px-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .px-filterbar { padding: 14px 20px; }
  .px-filter-inner { grid-template-columns: 1fr; gap: 12px; }
  .px-filter-right { justify-content: flex-start; }
  .px-results { padding: 40px 20px 60px; }
  .px-portfolio-cta { padding: 40px 20px; }
  .px-portfolio-cta-inner { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .px-grid { grid-template-columns: 1fr; }
  .px-hero-right { grid-template-columns: 1fr 1fr; }
  .px-hero-stat:last-child { grid-column: 1 / -1; }
  .px-filter-groups { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ====================================================== */
/* ==========   PROJECT DETAIL PAGE   ==================== */
/* ====================================================== */

/* Project hero */
.pj-hero {
  background: white;
  padding: 40px 60px 30px;
}
.pj-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.pj-hero-left .pj-client-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 18px;
}
.pj-hero-left .pj-client-label::before {
  content: "";
  width: 20px; height: 1px;
  background: var(--red);
}
.pj-hero-left h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 16px;
}
.pj-hero-left .pj-client-name {
  font-size: 1rem;
  color: var(--gray-700);
  line-height: 1.5;
  margin-bottom: 22px;
}
.pj-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pj-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pj-badge.status-active {
  background: var(--red);
  color: white;
}
.pj-badge.status-complete {
  background: var(--blue);
  color: white;
}
.pj-badge.status-active::before,
.pj-badge.status-complete::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: white;
}
.pj-badge-country {
  background: var(--canvas);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
}
.pj-badge-country .flag { font-size: 0.95rem; }

.pj-hero-image {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--gray-900);
}
.pj-hero-image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.pj-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(0, 62, 122, 0.3) 100%);
  pointer-events: none;
}

/* Project facts strip */
.pj-facts {
  background: var(--canvas);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  padding: 24px 60px;
}
.pj-facts-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}
.pj-fact {
  padding: 4px 22px;
  border-right: 1px solid var(--gray-200);
}
.pj-fact:first-child { padding-left: 0; }
.pj-fact:last-child { border-right: none; padding-right: 0; }
.pj-fact .fact-label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  margin-bottom: 5px;
  display: block;
}
.pj-fact .fact-value {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
  line-height: 1.3;
  display: block;
}

/* Main content (prose + aside) */
.pj-main {
  background: white;
  padding: 70px 60px;
}
.pj-main-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 60px;
  align-items: start;
}
.pj-prose-wrap { min-width: 0; }

.pj-aside {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pj-aside-card {
  background: var(--canvas);
  border: 1px solid var(--gray-100);
  padding: 22px;
}
.pj-aside-card h4 {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 800;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-200);
}
.pj-aside-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pj-aside-card li {
  padding: 8px 0;
  font-size: 0.84rem;
  line-height: 1.4;
  border-bottom: 1px solid var(--gray-200);
}
.pj-aside-card li:last-child { border-bottom: none; padding-bottom: 0; }
.pj-aside-card a.aside-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  color: var(--gray-700);
  transition: color .2s;
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-200);
}
.pj-aside-card a.aside-link:last-child { border-bottom: none; }
.pj-aside-card a.aside-link:hover { color: var(--blue); }
.pj-aside-card a.aside-link .arrow {
  color: var(--gray-400);
  font-size: 0.75rem;
  transition: all .2s;
}
.pj-aside-card a.aside-link:hover .arrow {
  color: var(--red);
  transform: translateX(3px);
}
.pj-aside-cta {
  background: var(--blue);
  color: white;
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.pj-aside-cta::before {
  content: "";
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(215, 25, 32, 0.3) 0%, transparent 70%);
  pointer-events: none;
}
.pj-aside-cta h4 {
  font-size: 0.98rem;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
.pj-aside-cta p {
  font-size: 0.82rem;
  opacity: 0.9;
  line-height: 1.55;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.pj-aside-cta .ac-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--red);
  color: white;
  font-size: 0.82rem;
  font-weight: 600;
  transition: background .2s;
  position: relative;
  z-index: 1;
}
.pj-aside-cta .ac-btn:hover { background: var(--red-dark); }

/* Outcomes band */
.pj-outcomes {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: white;
  padding: 60px;
  position: relative;
  overflow: hidden;
}
.pj-outcomes::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(215, 25, 32, 0.2) 0%, transparent 70%);
  pointer-events: none;
}
.pj-outcomes-inner {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.pj-outcomes-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 40px;
}
.pj-outcomes-head .eyebrow {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 14px;
}
.pj-outcomes-head .eyebrow::before { background: var(--red); }
.pj-outcomes-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.pj-outcomes-head h2 .accent { color: #FF9AA0; }
.pj-outcomes-head p {
  opacity: 0.85;
  font-size: 0.95rem;
  line-height: 1.65;
}
.pj-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
}
.pj-outcome {
  background: rgba(255,255,255,0.04);
  padding: 28px 26px;
  transition: background .25s;
}
.pj-outcome:hover { background: rgba(255,255,255,0.08); }
.pj-outcome .outcome-val {
  font-size: 2rem;
  font-weight: 800;
  color: white;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.pj-outcome .outcome-val .small { font-size: 1.2rem; }
.pj-outcome .outcome-label {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 5px;
  line-height: 1.3;
}
.pj-outcome .outcome-desc {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

/* Gallery */
.pj-gallery {
  background: white;
  padding: 70px 60px;
}
.pj-gallery-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.pj-gallery-head {
  margin-bottom: 32px;
}
.pj-gallery-head h2 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--gray-900);
  margin-top: 10px;
}
.pj-gallery-head h2 .red { color: var(--red); }
.pj-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 10px;
}
.pj-gallery-item {
  position: relative;
  overflow: hidden;
  background: var(--gray-900);
  cursor: pointer;
  transition: transform .3s;
}
.pj-gallery-item.span-2 { grid-column: span 2; }
.pj-gallery-item.row-span-2 { grid-row: span 2; }
.pj-gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.pj-gallery-item:hover { transform: scale(1.01); }
.pj-gallery-item:hover img { transform: scale(1.06); }
.pj-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 62, 122, 0.4) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.pj-gallery-item:hover::after { opacity: 1; }
.pj-gallery-caption {
  position: absolute;
  bottom: 14px;
  left: 16px;
  right: 16px;
  color: white;
  font-size: 0.78rem;
  font-weight: 600;
  z-index: 2;
  opacity: 0;
  transform: translateY(8px);
  transition: all .3s;
  text-shadow: 0 1px 4px rgba(0, 62, 122, 0.6);
}
.pj-gallery-item:hover .pj-gallery-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Testimonial */
.pj-testimonial {
  background: var(--canvas);
  padding: 70px 60px;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.pj-testimonial-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 0 40px;
}
.pj-testimonial-quote-mark {
  font-family: Georgia, serif;
  font-size: 5rem;
  color: var(--red);
  line-height: 0.5;
  margin-bottom: 20px;
  display: block;
}
.pj-testimonial-quote {
  font-size: 1.35rem;
  color: var(--gray-900);
  line-height: 1.5;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin-bottom: 28px;
  font-style: italic;
}
.pj-testimonial-attribution {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
}
.pj-testimonial-divider {
  width: 24px; height: 2px;
  background: var(--red);
}
.pj-testimonial-attribution .attrib-text {
  text-align: left;
  font-size: 0.82rem;
  line-height: 1.3;
}
.pj-testimonial-attribution .attrib-name {
  color: var(--gray-900);
  font-weight: 700;
  display: block;
}
.pj-testimonial-attribution .attrib-title {
  color: var(--gray-500);
  font-size: 0.76rem;
}

/* Scope deployed (services used) */
.pj-scope {
  background: white;
  padding: 70px 60px;
}
.pj-scope-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.pj-scope-head {
  margin-bottom: 32px;
}
.pj-scope-head h2 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 10px;
}
.pj-scope-head h2 .red { color: var(--red); }
.pj-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.pj-scope-tile {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all .25s;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.pj-scope-tile:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 84, 166, 0.08);
}
.pj-scope-tile::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 2px;
  background: var(--red);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.pj-scope-tile:hover::after { width: 100%; }
.pj-scope-tile-icon {
  width: 40px; height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 84, 166, 0.08);
  color: var(--blue);
}
.pj-scope-tile-text {
  flex: 1;
}
.pj-scope-tile-cat {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 3px;
}
.pj-scope-tile-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.pj-scope-tile-arrow {
  color: var(--gray-400);
  transition: all .2s;
}
.pj-scope-tile:hover .pj-scope-tile-arrow {
  color: var(--red);
  transform: translateX(3px);
}

/* Related projects — reuses .px-card grid */
.pj-related {
  background: var(--canvas);
  padding: 70px 60px;
  border-top: 1px solid var(--gray-100);
}
.pj-related-inner { max-width: 1400px; margin: 0 auto; }
.pj-related-head { margin-bottom: 32px; }
.pj-related-head h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 10px;
}
.pj-related-head h2 .red { color: var(--red); }
.pj-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Final CTA (reuses div-cta styling) */

/* Project detail responsive */
@media (max-width: 1100px) {
  .pj-main-inner { grid-template-columns: 1fr; }
  .pj-aside { position: static; }
  .pj-outcomes-grid { grid-template-columns: repeat(2, 1fr); }
  .pj-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .pj-scope-grid { grid-template-columns: repeat(2, 1fr); }
  .pj-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .pj-hero { padding: 32px 20px; }
  .pj-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .pj-facts { padding: 20px 20px; }
  .pj-facts-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 0;
  }
  .pj-fact {
    border-right: none;
    padding: 10px 0;
  }
  .pj-fact:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--gray-200); }
  .pj-main,
  .pj-outcomes,
  .pj-gallery,
  .pj-testimonial,
  .pj-scope,
  .pj-related { padding: 50px 20px; }
  .pj-outcomes-head { grid-template-columns: 1fr; gap: 14px; }
  .pj-testimonial-inner { padding: 0 10px; }
  .pj-testimonial-quote { font-size: 1.15rem; }
  .pj-gallery-grid {
    grid-auto-rows: 180px;
  }
}
@media (max-width: 640px) {
  .pj-outcomes-grid { grid-template-columns: 1fr; }
  .pj-gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .pj-gallery-item.span-2 { grid-column: span 1; }
  .pj-gallery-item.row-span-2 { grid-row: span 1; }
  .pj-scope-grid { grid-template-columns: 1fr; }
  .pj-related-grid { grid-template-columns: 1fr; }
}

/* ====================================================== */
/* ==========   INSIGHTS INDEX PAGE   ==================== */
/* ====================================================== */

/* Insights hero */
.ix-hero {
  background: white;
  padding: 50px 60px 40px;
}
.ix-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: end;
}
.ix-hero-left h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 18px;
  margin-top: 16px;
}
.ix-hero-left h1 .red { color: var(--red); }
.ix-hero-left p {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 560px;
}
.ix-hero-right {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.ix-count-card {
  background: var(--canvas);
  border: 1px solid var(--gray-100);
  padding: 20px 28px;
  display: flex;
  align-items: baseline;
  gap: 18px;
}
.ix-count-card .num {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ix-count-card .text {
  font-size: 0.85rem;
  color: var(--gray-700);
  line-height: 1.4;
}
.ix-count-card .text strong {
  display: block;
  color: var(--gray-900);
  font-weight: 700;
  margin-bottom: 2px;
}

/* Featured article band */
.ix-featured {
  background: var(--canvas);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  padding: 40px 60px;
}
.ix-featured-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: stretch;
}
.ix-featured-card {
  background: white;
  border: 1px solid var(--gray-100);
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: all .3s;
}
.ix-featured-card:hover {
  border-color: var(--blue);
  box-shadow: 0 14px 32px rgba(0, 84, 166, 0.1);
}
.ix-featured-card:hover .ix-featured-img img {
  transform: scale(1.05);
}
.ix-featured-img {
  position: relative;
  overflow: hidden;
  background: var(--gray-900);
  min-height: 340px;
}
.ix-featured-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.ix-featured-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--red);
  color: white;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 2;
}
.ix-featured-badge::before {
  content: "★";
  font-size: 0.7rem;
}
.ix-featured-body {
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ix-featured-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--gray-500);
  letter-spacing: 0.02em;
}
.ix-featured-meta .cat-pill {
  padding: 3px 9px;
  background: rgba(0, 84, 166, 0.08);
  color: var(--blue);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.ix-featured-meta .dot { color: var(--gray-300); }
.ix-featured-body h2 {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--gray-900);
}
.ix-featured-body p {
  font-size: 0.92rem;
  color: var(--gray-600);
  line-height: 1.6;
  flex: 1;
}
.ix-featured-read {
  color: var(--blue);
  font-size: 0.88rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-100);
  margin-top: 4px;
}
.ix-featured-card:hover .ix-featured-read { color: var(--red); }

/* Mini trending list on right of featured */
.ix-trending {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
}
.ix-trending h3 {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 800;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gray-100);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ix-trending h3::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--red);
}
.ix-trending-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.ix-trending-item {
  display: flex;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gray-100);
  text-decoration: none;
  color: inherit;
  transition: transform .2s;
}
.ix-trending-item:last-child { border-bottom: none; padding-bottom: 0; }
.ix-trending-item:hover { transform: translateX(3px); }
.ix-trending-num {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
  min-width: 22px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.ix-trending-text .headline {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  transition: color .2s;
}
.ix-trending-item:hover .headline { color: var(--blue); }
.ix-trending-text .meta {
  font-size: 0.72rem;
  color: var(--gray-500);
}

/* Sticky filter bar (reuse .px-filterbar styles; add variant) */
.ix-filterbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: white;
  border-bottom: 1px solid var(--gray-100);
  padding: 18px 60px;
  transition: box-shadow .2s;
}
.site-header.scrolled ~ main .ix-filterbar,
body.scrolled .ix-filterbar { top: 70px; }
.ix-filter-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
.ix-filter-right {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
}
.ix-result-count {
  font-size: 0.82rem;
  color: var(--gray-600);
}
.ix-result-count strong {
  color: var(--gray-900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Article grid */
.ix-grid-section {
  background: var(--canvas);
  padding: 50px 60px 70px;
}
.ix-grid-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.ix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* Article card */
.ix-card {
  background: white;
  border: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: all .3s;
}
.ix-card:hover {
  border-color: var(--blue);
  box-shadow: 0 14px 32px rgba(0, 84, 166, 0.1);
  transform: translateY(-4px);
}
.ix-card:hover .ix-card-img img {
  transform: scale(1.06);
}
.ix-card-img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--gray-900);
}
.ix-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.ix-card-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 62, 122, 0) 60%, rgba(0, 62, 122, 0.3) 100%);
  pointer-events: none;
}
.ix-card-cat {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 10px;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: white;
  z-index: 2;
}
.ix-card-cat.news { background: var(--red); }
.ix-card-cat.blog { background: var(--blue); }
.ix-card-cat.case-study { background: #0B7A3E; }
.ix-card-cat.press-release { background: var(--gray-900); }
.ix-card-body {
  padding: 22px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  position: relative;
}
.ix-card-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.ix-card:hover .ix-card-body::before { width: 40px; }
.ix-card-body .meta-row {
  font-size: 0.72rem;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.01em;
  margin-top: 4px;
}
.ix-card-body .meta-row .dot { color: var(--gray-300); }
.ix-card-body h3 {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.ix-card-body .excerpt {
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.55;
  flex: 1;
}
.ix-card-body .author-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-100);
  font-size: 0.78rem;
  color: var(--gray-700);
}
.ix-card-body .author-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.ix-card-body .author-name {
  font-weight: 600;
  color: var(--gray-900);
}
.ix-card-body .read-time {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--gray-500);
}

/* Newsletter strip at end */
.ix-newsletter-strip {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: white;
  padding: 50px 60px;
  position: relative;
  overflow: hidden;
}
.ix-newsletter-strip::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(215, 25, 32, 0.22) 0%, transparent 70%);
  pointer-events: none;
}
.ix-newsletter-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.ix-newsletter-inner h3 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  line-height: 1.2;
}
.ix-newsletter-inner h3 .accent { color: #FF9AA0; }
.ix-newsletter-inner p {
  opacity: 0.85;
  font-size: 0.94rem;
  line-height: 1.6;
  max-width: 560px;
}
.ix-newsletter-form {
  display: flex;
  gap: 8px;
  min-width: 380px;
}
.ix-newsletter-form input {
  flex: 1;
  min-width: 0;
  padding: 13px 16px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  font-family: inherit;
  font-size: 0.88rem;
  outline: none;
  transition: all .2s;
}
.ix-newsletter-form input:focus {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.5);
}
.ix-newsletter-form input::placeholder { color: rgba(255,255,255,0.55); }
.ix-newsletter-form button {
  padding: 13px 22px;
  background: var(--red);
  color: white;
  border: none;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .2s;
}
.ix-newsletter-form button:hover { background: var(--red-dark); }

/* Insights index responsive */
@media (max-width: 1100px) {
  .ix-grid { grid-template-columns: repeat(2, 1fr); }
  .ix-featured-inner { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .ix-hero { padding: 40px 20px 30px; }
  .ix-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .ix-hero-right { justify-content: flex-start; }
  .ix-featured { padding: 30px 20px; }
  .ix-featured-card { grid-template-columns: 1fr; }
  .ix-featured-img { min-height: 240px; }
  .ix-featured-body { padding: 24px; }
  .ix-filterbar { padding: 14px 20px; }
  .ix-filter-inner { grid-template-columns: 1fr; gap: 12px; }
  .ix-filter-right { justify-content: flex-start; }
  .ix-grid-section { padding: 40px 20px 60px; }
  .ix-newsletter-strip { padding: 40px 20px; }
  .ix-newsletter-inner { grid-template-columns: 1fr; gap: 24px; }
  .ix-newsletter-form { min-width: 0; }
}
@media (max-width: 640px) {
  .ix-grid { grid-template-columns: 1fr; }
  .ix-newsletter-form { flex-direction: column; }
}


/* ====================================================== */
/* ==========   ARTICLE DETAIL PAGE   ==================== */
/* ====================================================== */

/* Reading progress bar (reuses .scroll-progress but scoped to article) */
.article-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--red), var(--blue-light));
  z-index: 250;
  transition: width .1s ease;
}

/* Article header */
.art-header {
  background: white;
  padding: 50px 60px 40px;
}
.art-header-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.art-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: white;
  margin-bottom: 24px;
}
.art-category.news { background: var(--red); }
.art-category.blog { background: var(--blue); }
.art-category.case-study { background: #0B7A3E; }
.art-category.press-release { background: var(--gray-900); }

.art-header h1 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 22px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.art-header .art-excerpt {
  font-size: 1.15rem;
  color: var(--gray-600);
  line-height: 1.55;
  margin-bottom: 28px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.art-meta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid var(--gray-100);
  font-size: 0.85rem;
  color: var(--gray-600);
}
.art-meta-row .author-info {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.art-meta-row .author-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.art-meta-row .author-name {
  color: var(--gray-900);
  font-weight: 700;
  display: block;
}
.art-meta-row .author-role {
  color: var(--gray-500);
  font-size: 0.72rem;
}
.art-meta-row .meta-dot { color: var(--gray-300); }

/* Hero image */
.art-hero-image {
  background: white;
  padding: 0 60px 40px;
}
.art-hero-image-inner {
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: var(--gray-900);
  position: relative;
}
.art-hero-image-inner img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.art-hero-caption {
  text-align: center;
  font-size: 0.82rem;
  color: var(--gray-500);
  font-style: italic;
  padding-top: 12px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Main article body layout: prose + TOC aside */
.art-main {
  background: white;
  padding: 30px 60px 70px;
}
.art-main-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 60px;
  align-items: start;
}

/* TOC + share (sticky) */
.art-aside-left {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-200) transparent;
}
.art-toc {
  border-left: 1px solid var(--gray-200);
  padding-left: 18px;
}
.art-toc h4 {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 800;
  margin-bottom: 14px;
}
.art-toc ol {
  list-style: none;
  padding: 0;
  counter-reset: toc;
}
.art-toc li {
  counter-increment: toc;
  margin-bottom: 10px;
  padding-left: 0;
}
.art-toc a {
  font-size: 0.82rem;
  color: var(--gray-600);
  line-height: 1.4;
  display: block;
  padding: 4px 0;
  transition: color .2s, padding-left .2s;
  border-left: 2px solid transparent;
  padding-left: 0;
  margin-left: -20px;
  padding-left: 20px;
}
.art-toc a::before {
  content: counter(toc, decimal-leading-zero) "  ";
  color: var(--gray-400);
  font-weight: 700;
  font-size: 0.72rem;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
.art-toc a:hover {
  color: var(--blue);
}
.art-toc a.active {
  color: var(--red);
  border-left-color: var(--red);
  font-weight: 600;
}
.art-toc a.active::before {
  color: var(--red);
}

.art-share {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.art-share h4 {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 800;
  margin-bottom: 4px;
}
.art-share-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.art-share-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--canvas);
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  cursor: pointer;
  transition: all .2s;
  border-radius: 0;
}
.art-share-btn:hover {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}

/* Article body prose — extends .prose */
.art-body.prose h2 {
  font-size: 1.7rem;
  margin-top: 2.5em;
}
.art-body.prose h2:first-child { margin-top: 0; }
.art-body.prose p {
  font-size: 1.04rem;
  line-height: 1.8;
  color: var(--gray-700);
}
.art-body.prose p.lead {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--gray-900);
  font-weight: 400;
}
.art-body.prose figure {
  margin: 2em 0;
}
.art-body.prose figure img {
  margin-bottom: 10px;
}
.art-body.prose figcaption {
  font-size: 0.82rem;
  color: var(--gray-500);
  font-style: italic;
  text-align: center;
}

/* Tags bar below article */
.art-tags {
  padding: 32px 0;
  margin-top: 28px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.art-tags-label {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 800;
}
.art-tags-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.art-tag {
  padding: 5px 12px;
  font-size: 0.76rem;
  color: var(--gray-700);
  background: var(--canvas);
  border: 1px solid var(--gray-200);
  transition: all .2s;
  text-decoration: none;
}
.art-tag:hover {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}

/* Author card */
.art-author-card {
  background: var(--canvas);
  border: 1px solid var(--gray-100);
  padding: 32px 36px;
  margin-top: 40px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
}
.art-author-card .big-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.art-author-card .auth-text h4 {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 800;
  margin-bottom: 6px;
}
.art-author-card .auth-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.015em;
  margin-bottom: 3px;
}
.art-author-card .auth-role {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 12px;
}
.art-author-card .auth-bio {
  font-size: 0.88rem;
  color: var(--gray-700);
  line-height: 1.55;
  margin-bottom: 12px;
  max-width: 640px;
}
.art-author-card .auth-links {
  display: flex;
  gap: 10px;
}
.art-author-card .auth-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: white;
  border: 1px solid var(--gray-200);
  font-size: 0.78rem;
  color: var(--gray-700);
  transition: all .2s;
}
.art-author-card .auth-link:hover {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}

/* Related articles */
.art-related {
  background: var(--canvas);
  padding: 70px 60px;
  border-top: 1px solid var(--gray-100);
}
.art-related-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.art-related-head {
  margin-bottom: 30px;
}
.art-related-head h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 10px;
}
.art-related-head h2 .red { color: var(--red); }
.art-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Article responsive */
@media (max-width: 1100px) {
  .art-main-inner { grid-template-columns: 1fr; }
  .art-aside-left {
    position: static;
    flex-direction: row;
    justify-content: space-between;
    max-height: none;
    overflow: visible;
    padding-right: 0;
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--gray-200);
    gap: 40px;
  }
  .art-toc {
    border-left: none;
    padding-left: 0;
    flex: 1;
  }
  .art-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .art-header { padding: 40px 20px 30px; }
  .art-header h1 { font-size: 1.9rem; }
  .art-hero-image { padding: 0 20px 28px; }
  .art-hero-image-inner { aspect-ratio: 16 / 10; }
  .art-main { padding: 20px 20px 50px; }
  .art-body.prose p { font-size: 1rem; }
  .art-body.prose h2 { font-size: 1.4rem; }
  .art-author-card {
    grid-template-columns: 1fr;
    padding: 28px 24px;
    gap: 16px;
    text-align: center;
  }
  .art-author-card .big-avatar { margin: 0 auto; }
  .art-author-card .auth-bio { margin-left: auto; margin-right: auto; }
  .art-author-card .auth-links { justify-content: center; }
  .art-related { padding: 50px 20px; }
}
@media (max-width: 640px) {
  .art-aside-left { flex-direction: column; gap: 24px; }
  .art-related-grid { grid-template-columns: 1fr; }
  .art-meta-row { flex-direction: column; gap: 10px; }
  .art-meta-row .meta-dot { display: none; }
}

/* ====================================================== */
/* ==========   OEMs INDEX PAGE   ======================== */
/* ====================================================== */

/* OEM hero */
.ox-hero {
  background: white;
  padding: 50px 60px 40px;
}
.ox-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: end;
}
.ox-hero-left .eyebrow { margin-bottom: 16px; }
.ox-hero-left h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 18px;
}
.ox-hero-left h1 .red { color: var(--red); }
.ox-hero-left p {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 560px;
}
.ox-hero-right {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
}
.ox-hero-stat {
  background: white;
  padding: 20px 22px;
}
.ox-hero-stat .n {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.ox-hero-stat .lbl {
  font-size: 0.78rem;
  color: var(--gray-600);
  line-height: 1.35;
}

/* Trust band — "How we select partners" */
.ox-trust {
  background: var(--canvas);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  padding: 32px 60px;
}
.ox-trust-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: center;
}
.ox-trust-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ox-trust-label::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--red);
}
.ox-trust p {
  font-size: 0.95rem;
  color: var(--gray-700);
  line-height: 1.65;
  max-width: 820px;
}
.ox-trust p strong { color: var(--gray-900); font-weight: 700; }

/* Sticky filter bar (reuse px-filterbar patterns with ox- prefix for scope) */
.ox-filterbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: white;
  border-bottom: 1px solid var(--gray-100);
  padding: 16px 60px;
  transition: box-shadow .2s;
}
.site-header.scrolled ~ main .ox-filterbar,
body.scrolled .ox-filterbar { top: 70px; }
.ox-filter-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
.ox-filter-groups {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}
.ox-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ox-filter-group-label {
  font-size: 0.72rem;
  color: var(--gray-500);
  font-weight: 600;
  white-space: nowrap;
}
.ox-filter-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ox-filter-right {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
}
.ox-result-count {
  font-size: 0.82rem;
  color: var(--gray-600);
}
.ox-result-count strong {
  color: var(--gray-900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* OEM grid */
.ox-grid-section {
  background: var(--canvas);
  padding: 50px 60px 70px;
}
.ox-grid-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.ox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* OEM card — enhanced from home component with external link affordance */
.ox-card {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 24px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.ox-card:hover {
  border-color: var(--blue);
  box-shadow: 0 14px 32px rgba(0, 84, 166, 0.08);
  transform: translateY(-3px);
}
.ox-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--red);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.ox-card:hover::before { width: 100%; }

.ox-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
/* Logo wrap — sized container that holds real logo image */
.ox-logo-box {
  width: 90px;
  height: 52px;
  background: white;
  border: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 6px 10px;
  overflow: hidden;
}
.ox-logo-box img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Fallback when no logo URL — gradient initials block (smaller, square) */
.ox-logo-box.is-fallback {
  width: 52px;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: white;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  border: none;
  padding: 0;
}
.ox-country {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--gray-600);
  font-weight: 500;
  white-space: nowrap;
}
.ox-country-flag { font-size: 1rem; line-height: 1; }

.ox-name-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.ox-name {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.ox-external {
  color: var(--gray-400);
  flex-shrink: 0;
  padding-top: 2px;
  transition: color .2s;
}
.ox-card:hover .ox-external {
  color: var(--red);
}

.ox-cat {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
}

.ox-desc {
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.55;
  flex: 1;
}

.ox-divisions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 4px;
  margin-top: auto;
}
.ox-division-chip {
  font-size: 0.64rem;
  padding: 3px 8px;
  background: rgba(0, 84, 166, 0.06);
  color: var(--blue);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Partnership CTA band */
.ox-partnership-cta {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: white;
  padding: 60px;
  position: relative;
  overflow: hidden;
}
.ox-partnership-cta::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(215, 25, 32, 0.22) 0%, transparent 70%);
  pointer-events: none;
}
.ox-partnership-cta-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.ox-partnership-cta .eyebrow {
  color: rgba(255,255,255,0.8);
  margin-bottom: 14px;
}
.ox-partnership-cta .eyebrow::before { background: var(--red); }
.ox-partnership-cta h3 {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 14px;
  max-width: 540px;
}
.ox-partnership-cta h3 .accent { color: #FF9AA0; }
.ox-partnership-cta p {
  font-size: 0.95rem;
  opacity: 0.85;
  line-height: 1.65;
  max-width: 520px;
}
.ox-partnership-ctas {
  display: flex;
  gap: 12px;
  flex-direction: column;
}
.ox-partnership-ctas .btn { justify-content: flex-start; }

/* OEM index responsive */
@media (max-width: 1100px) {
  .ox-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .ox-hero { padding: 40px 20px 30px; }
  .ox-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .ox-trust { padding: 24px 20px; }
  .ox-trust-inner { grid-template-columns: 1fr; gap: 14px; }
  .ox-filterbar { padding: 14px 20px; }
  .ox-filter-inner { grid-template-columns: 1fr; gap: 12px; }
  .ox-filter-right { justify-content: flex-start; }
  .ox-grid-section { padding: 40px 20px 60px; }
  .ox-partnership-cta { padding: 40px 20px; }
  .ox-partnership-cta-inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .ox-grid { grid-template-columns: 1fr; }
  .ox-hero-right { grid-template-columns: 1fr; }
  .ox-filter-groups { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ====================================================== */
/* ==========   CAREERS INDEX PAGE   ===================== */
/* ====================================================== */

/* Careers hero */
.cx-hero {
  background: white;
  padding: 50px 60px 40px;
}
.cx-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: end;
}
.cx-hero-left .eyebrow { margin-bottom: 16px; }
.cx-hero-left h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 18px;
}
.cx-hero-left h1 .red { color: var(--red); }
.cx-hero-left p {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 540px;
}
.cx-hero-right {
  display: flex;
  justify-content: flex-end;
}
.cx-hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
}
.cx-hero-stat {
  background: white;
  padding: 22px 28px;
  min-width: 150px;
}
.cx-hero-stat .n {
  font-size: 2rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.cx-hero-stat .lbl {
  font-size: 0.78rem;
  color: var(--gray-600);
  line-height: 1.35;
}

/* Why work here — feature grid */
.cx-why {
  background: var(--canvas);
  border-top: 1px solid var(--gray-100);
  padding: 60px 60px;
}
.cx-why-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.cx-why-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 36px;
}
.cx-why-head h2 {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--gray-900);
  margin-top: 10px;
}
.cx-why-head h2 .red { color: var(--red); }
.cx-why-head p {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.6;
}
.cx-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cx-why-card {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 28px 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.cx-why-card:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 84, 166, 0.06);
}
.cx-why-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: var(--red);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.cx-why-card:hover::before { width: 100%; }
.cx-why-icon {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  background: linear-gradient(135deg, rgba(0,84,166,0.08), rgba(215,25,32,0.04));
  flex-shrink: 0;
}
.cx-why-card h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.cx-why-card p {
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.55;
  flex: 1;
}

/* Life at Fairtex photo strip */
.cx-life {
  background: white;
  padding: 60px 60px;
  border-bottom: 1px solid var(--gray-100);
}
.cx-life-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.cx-life-head {
  margin-bottom: 30px;
}
.cx-life-head h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 10px;
}
.cx-life-head h2 .red { color: var(--red); }
.cx-life-head p {
  color: var(--gray-600);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-top: 8px;
  max-width: 640px;
}
.cx-life-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  grid-template-rows: 240px 240px;
  gap: 10px;
}
.cx-life-tile {
  position: relative;
  overflow: hidden;
  background: var(--gray-900);
}
.cx-life-tile:nth-child(1) { grid-row: span 2; }
.cx-life-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.cx-life-tile:hover img { transform: scale(1.06); }
.cx-life-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 62, 122, 0.7) 100%);
  pointer-events: none;
}
.cx-life-caption {
  position: absolute;
  bottom: 18px;
  left: 20px;
  right: 20px;
  color: white;
  z-index: 2;
}
.cx-life-caption .tag {
  display: inline-block;
  padding: 3px 9px;
  background: var(--red);
  color: white;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cx-life-caption .text {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* Sticky filter bar */
.cx-filterbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--canvas);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  padding: 18px 60px;
}
.site-header.scrolled ~ main .cx-filterbar,
body.scrolled .cx-filterbar { top: 70px; }
.cx-filter-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
.cx-filter-groups {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}
.cx-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cx-filter-group-label {
  font-size: 0.72rem;
  color: var(--gray-500);
  font-weight: 600;
  white-space: nowrap;
}

/* Job list */
.cx-list-section {
  background: white;
  padding: 50px 60px 70px;
}
.cx-list-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.cx-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--gray-100);
}
.cx-job {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 100px 140px;
  gap: 24px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--gray-100);
  align-items: center;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: all .2s;
}
.cx-job:hover {
  background: var(--canvas);
  transform: translateX(3px);
}
.cx-job::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  bottom: 0;
  width: 3px;
  background: var(--red);
  opacity: 0;
  transition: opacity .2s;
}
.cx-job:hover::before { opacity: 1; }
.cx-job-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cx-job-title .role {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.cx-job-title .posted {
  font-size: 0.72rem;
  color: var(--gray-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cx-job-title .posted .new-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  display: none;
}
.cx-job[data-new="true"] .posted .new-dot { display: inline-block; }
.cx-job-dept,
.cx-job-loc,
.cx-job-type {
  font-size: 0.85rem;
  color: var(--gray-700);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.cx-job-dept svg,
.cx-job-loc svg,
.cx-job-type svg {
  color: var(--gray-400);
  flex-shrink: 0;
}
.cx-job-type .type-pill {
  display: inline-block;
  padding: 3px 9px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-transform: uppercase;
}
.cx-job-type .type-pill.full-time { background: rgba(0, 84, 166, 0.1); color: var(--blue); }
.cx-job-type .type-pill.contract { background: rgba(215, 25, 32, 0.1); color: var(--red); }
.cx-job-type .type-pill.graduate { background: rgba(11, 122, 62, 0.12); color: #0B7A3E; }
.cx-job-view {
  color: var(--blue);
  font-size: 0.82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  transition: all .2s;
}
.cx-job:hover .cx-job-view {
  color: var(--red);
  gap: 10px;
}

/* List column headers (optional) */
.cx-list-head {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 100px 140px;
  gap: 24px;
  padding: 12px 24px;
  background: var(--canvas);
  border-bottom: 1px solid var(--gray-200);
  border-top: 1px solid var(--gray-200);
}
.cx-list-head span {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
}

/* Talent pool CTA */
.cx-talent-cta {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: white;
  padding: 55px 60px;
  position: relative;
  overflow: hidden;
}
.cx-talent-cta::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(215, 25, 32, 0.22) 0%, transparent 70%);
  pointer-events: none;
}
.cx-talent-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.cx-talent-inner .eyebrow {
  color: rgba(255,255,255,0.8);
  margin-bottom: 14px;
}
.cx-talent-inner .eyebrow::before { background: var(--red); }
.cx-talent-inner h3 {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.cx-talent-inner h3 .accent { color: #FF9AA0; }
.cx-talent-inner p {
  font-size: 0.94rem;
  opacity: 0.85;
  line-height: 1.65;
  max-width: 540px;
}
.cx-talent-ctas {
  display: flex;
  gap: 12px;
  flex-direction: column;
}
.cx-talent-ctas .btn { justify-content: flex-start; }

/* Careers responsive */
@media (max-width: 1100px) {
  .cx-why-grid { grid-template-columns: repeat(2, 1fr); }
  .cx-life-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 200px;
  }
  .cx-life-tile:nth-child(1) { grid-row: span 1; }
  .cx-job { grid-template-columns: 1.5fr 1fr 1fr 100px; }
  .cx-job-view { display: none; }
  .cx-list-head { grid-template-columns: 1.5fr 1fr 1fr 100px; }
  .cx-list-head :nth-child(5) { display: none; }
}
@media (max-width: 1024px) {
  .cx-hero { padding: 40px 20px 30px; }
  .cx-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  .cx-hero-right { justify-content: flex-start; }
  .cx-why { padding: 50px 20px; }
  .cx-why-head { grid-template-columns: 1fr; gap: 14px; }
  .cx-life { padding: 50px 20px; }
  .cx-filterbar { padding: 14px 20px; }
  .cx-filter-inner { grid-template-columns: 1fr; gap: 12px; }
  .cx-list-section { padding: 40px 20px 60px; }
  .cx-list-head { display: none; }
  .cx-job {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 20px;
  }
  .cx-talent-cta { padding: 40px 20px; }
  .cx-talent-inner { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .cx-why-grid { grid-template-columns: 1fr; }
  .cx-life-grid { grid-template-columns: 1fr; grid-template-rows: 220px 220px 220px; }
  .cx-hero-stats { grid-template-columns: 1fr 1fr; }
}


/* ====================================================== */
/* ==========   JOB DETAIL PAGE   ======================== */
/* ====================================================== */

/* Job hero — compact */
.job-hero {
  background: white;
  padding: 40px 60px 30px;
}
.job-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.job-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.job-hero-meta .job-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--canvas);
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
}
.job-hero-meta .job-pill.dept {
  background: rgba(0, 84, 166, 0.08);
  color: var(--blue);
  border-color: transparent;
}
.job-hero h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 14px;
  max-width: 900px;
}
.job-hero h1 .red { color: var(--red); }
.job-hero .job-subtitle {
  font-size: 1.02rem;
  color: var(--gray-700);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 680px;
}
.job-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.job-hero-posted {
  font-size: 0.78rem;
  color: var(--gray-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}
.job-hero-posted .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
}

/* Role facts strip */
.job-facts {
  background: var(--canvas);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  padding: 24px 60px;
}
.job-facts-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.job-fact {
  padding: 4px 22px;
  border-right: 1px solid var(--gray-200);
}
.job-fact:first-child { padding-left: 0; }
.job-fact:last-child { border-right: none; padding-right: 0; }
.job-fact .lbl {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  margin-bottom: 5px;
  display: block;
}
.job-fact .val {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
  line-height: 1.3;
  display: block;
}

/* Main job content — prose + sticky apply aside */
.job-main {
  background: white;
  padding: 60px 60px 70px;
}
.job-main-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 60px;
  align-items: start;
}
.job-prose-wrap { min-width: 0; }
.job-aside {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.job-aside-apply {
  background: var(--blue);
  color: white;
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
}
.job-aside-apply::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(215, 25, 32, 0.3) 0%, transparent 70%);
  pointer-events: none;
}
.job-aside-apply h4 {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
.job-aside-apply p {
  font-size: 0.82rem;
  opacity: 0.9;
  line-height: 1.55;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.job-aside-apply .apply-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--red);
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background .2s;
  position: relative;
  z-index: 1;
  width: 100%;
}
.job-aside-apply .apply-btn:hover { background: var(--red-dark); }
.job-aside-share {
  background: var(--canvas);
  border: 1px solid var(--gray-100);
  padding: 22px;
}
.job-aside-share h4 {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 800;
  margin-bottom: 12px;
}
.job-aside-share p {
  font-size: 0.82rem;
  color: var(--gray-700);
  line-height: 1.5;
  margin-bottom: 14px;
}
.job-aside-share-btns {
  display: flex;
  gap: 6px;
}
.job-aside-share-btn {
  width: 34px; height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  cursor: pointer;
  transition: all .2s;
}
.job-aside-share-btn:hover {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.job-aside-related {
  background: var(--canvas);
  border: 1px solid var(--gray-100);
  padding: 22px;
}
.job-aside-related h4 {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 800;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gray-200);
}
.job-aside-related ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.job-aside-related li {
  padding: 10px 0;
  border-bottom: 1px solid var(--gray-200);
}
.job-aside-related li:last-child { border-bottom: none; padding-bottom: 0; }
.job-aside-related a {
  display: block;
  color: var(--gray-800);
  text-decoration: none;
  transition: color .2s;
}
.job-aside-related a:hover { color: var(--blue); }
.job-aside-related .rel-title {
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 3px;
  letter-spacing: -0.005em;
}
.job-aside-related .rel-meta {
  font-size: 0.72rem;
  color: var(--gray-500);
}

/* How to apply section */
.job-apply-section {
  background: var(--canvas);
  padding: 60px 60px;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.job-apply-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.job-apply-section h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 10px;
  margin-bottom: 14px;
}
.job-apply-section h2 .red { color: var(--red); }
.job-apply-section p {
  font-size: 0.95rem;
  color: var(--gray-700);
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto 24px;
}
.job-apply-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 30px 0 30px;
  text-align: left;
}
.job-apply-step {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.job-apply-step .step-num {
  width: 32px; height: 32px;
  background: var(--canvas);
  border: 1.5px solid var(--blue);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.job-apply-step h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
}
.job-apply-step p {
  font-size: 0.8rem;
  color: var(--gray-600);
  line-height: 1.5;
  margin: 0;
}
.job-apply-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Related open roles */
.job-related {
  background: white;
  padding: 60px 60px;
  border-bottom: 1px solid var(--gray-100);
}
.job-related-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.job-related-head {
  margin-bottom: 24px;
}
.job-related-head h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 10px;
}
.job-related-head h2 .red { color: var(--red); }

/* Job detail responsive */
@media (max-width: 1100px) {
  .job-main-inner { grid-template-columns: 1fr; }
  .job-aside { position: static; }
  .job-facts-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 0;
  }
  .job-fact {
    border-right: none;
    padding: 10px 0;
  }
  .job-fact:nth-child(2n) { padding-left: 16px; border-left: 1px solid var(--gray-200); }
  .job-apply-steps { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .job-hero { padding: 32px 20px; }
  .job-facts { padding: 20px 20px; }
  .job-main { padding: 40px 20px 50px; }
  .job-apply-section { padding: 40px 20px; }
  .job-related { padding: 40px 20px; }
}

/* ====================================================== */
/* ==========   ABOUT PAGE   ============================= */
/* ====================================================== */

/* About hero — centered compact */
.ab-hero {
  background: white;
  padding: 60px 60px 50px;
  position: relative;
}
.ab-hero-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.ab-hero .eyebrow {
  justify-content: center;
  display: inline-flex;
  margin-bottom: 22px;
}
.ab-hero h1 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  max-width: 900px;
  margin: 0 auto 24px;
}
.ab-hero h1 .red { color: var(--red); }
.ab-hero p.ab-lead {
  font-size: 1.1rem;
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 720px;
  margin: 0 auto 32px;
}
.ab-hero-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Sticky anchor nav — reuses svc-anchor-nav but with ab- scope */
.ab-anchor-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: white;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  transition: top .2s;
}
.site-header.scrolled ~ main .ab-anchor-nav,
body.scrolled .ab-anchor-nav { top: 70px; }
.ab-anchor-nav-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 60px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ab-anchor-nav-inner::-webkit-scrollbar { display: none; }
.ab-anchor-nav a {
  padding: 14px 18px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-600);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all .2s;
  position: relative;
  top: 1px;
  text-decoration: none;
}
.ab-anchor-nav a:hover,
.ab-anchor-nav a.active {
  color: var(--blue);
  border-bottom-color: var(--red);
}

/* "Who We Are" — prose + stats aside */
.ab-who {
  background: white;
  padding: 70px 60px 80px;
  scroll-margin-top: 140px;
}
.ab-who-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 80px;
  align-items: start;
}
.ab-who-prose { min-width: 0; }
.ab-who-aside {
  position: sticky;
  top: 130px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
}
.ab-who-stat {
  background: white;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
.ab-who-stat .ab-stat-lbl {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  margin-bottom: 4px;
  display: block;
}
.ab-who-stat .ab-stat-sub {
  font-size: 0.8rem;
  color: var(--gray-700);
  line-height: 1.35;
}
.ab-who-stat .ab-stat-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Leadership — grid of exec cards */
.ab-leadership {
  background: var(--canvas);
  padding: 80px 60px;
  scroll-margin-top: 140px;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.ab-leadership-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.ab-section-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 40px;
}
.ab-section-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--gray-900);
  margin-top: 10px;
}
.ab-section-head h2 .red { color: var(--red); }
.ab-section-head p {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.65;
}

.ab-leaders-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.ab-leader {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.ab-leader:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 84, 166, 0.06);
}
.ab-leader::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--red);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.ab-leader:hover::before { width: 100%; }
.ab-leader-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-light));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.ab-leader .ab-leader-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.ab-leader .ab-leader-title {
  font-size: 0.78rem;
  color: var(--red);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ab-leader .ab-leader-bio {
  font-size: 0.82rem;
  color: var(--gray-600);
  line-height: 1.55;
  flex: 1;
}
.ab-leader .ab-leader-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--gray-700);
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
  margin-top: 4px;
  transition: color .2s;
}
.ab-leader .ab-leader-link:hover { color: var(--blue); }
.ab-leader .ab-leader-link svg { color: var(--gray-400); }

/* History — timeline */
.ab-history {
  background: white;
  padding: 80px 60px;
  scroll-margin-top: 140px;
}
.ab-history-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.ab-history-head {
  margin-bottom: 50px;
  text-align: center;
}
.ab-history-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 10px;
  margin-bottom: 10px;
}
.ab-history-head h2 .red { color: var(--red); }
.ab-history-head p {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto;
}

.ab-timeline {
  position: relative;
  padding: 0 0 20px 0;
}
.ab-timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--blue) 0%, var(--red) 100%);
  transform: translateX(-50%);
}
.ab-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 0;
  margin-bottom: 50px;
  align-items: center;
}
.ab-timeline-item:last-child { margin-bottom: 0; }
.ab-timeline-year {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  background: white;
  border: 3px solid var(--blue);
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ab-timeline-item:nth-child(even) .ab-timeline-year {
  border-color: var(--red);
  color: var(--red);
}
.ab-timeline-content {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 22px 26px;
  transition: all .25s;
  cursor: default;
  position: relative;
}
.ab-timeline-content:hover {
  border-color: var(--blue);
  box-shadow: 0 8px 20px rgba(0, 84, 166, 0.06);
}
.ab-timeline-item:nth-child(odd) .ab-timeline-content {
  grid-column: 1;
  text-align: right;
}
.ab-timeline-item:nth-child(even) .ab-timeline-content {
  grid-column: 3;
  text-align: left;
}
.ab-timeline-content h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.ab-timeline-content p {
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.55;
}

/* Governance — principle cards */
.ab-governance {
  background: var(--canvas);
  padding: 80px 60px;
  scroll-margin-top: 140px;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.ab-governance-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.ab-gov-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.ab-gov-card {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 28px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: all .25s;
}
.ab-gov-card:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 84, 166, 0.06);
}
.ab-gov-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  background: linear-gradient(135deg, rgba(0,84,166,0.08), rgba(215,25,32,0.04));
  flex-shrink: 0;
}
.ab-gov-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-top: 4px;
}
.ab-gov-card p {
  font-size: 0.84rem;
  color: var(--gray-600);
  line-height: 1.6;
  flex: 1;
}

/* Group Entities — table */
.ab-entities {
  background: white;
  padding: 80px 60px;
  scroll-margin-top: 140px;
}
.ab-entities-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.ab-entities-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border: 1px solid var(--gray-100);
  font-size: 0.88rem;
}
.ab-entities-table thead {
  background: var(--canvas);
}
.ab-entities-table th {
  text-align: left;
  padding: 14px 20px;
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  border-bottom: 1px solid var(--gray-200);
}
.ab-entities-table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  line-height: 1.45;
}
.ab-entities-table tr:last-child td { border-bottom: none; }
.ab-entities-table tr:hover td { background: var(--canvas); }
.ab-entities-table .ent-name {
  font-weight: 700;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ab-entities-table .ent-name .flag { font-size: 1rem; }
.ab-entities-table .ent-role {
  font-size: 0.78rem;
  padding: 3px 9px;
  background: rgba(0, 84, 166, 0.08);
  color: var(--blue);
  font-weight: 600;
  letter-spacing: 0.02em;
  display: inline-block;
}

/* Certifications — reuse accreditations wall style */
.ab-certs {
  background: var(--canvas);
  padding: 80px 60px;
  scroll-margin-top: 140px;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.ab-certs-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.ab-certs-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.ab-cert {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 26px 20px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  transition: all .25s;
  position: relative;
}
.ab-cert:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 84, 166, 0.06);
}
.ab-cert-seal {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  position: relative;
  flex-shrink: 0;
}
.ab-cert-seal::before {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--gray-200);
  border-radius: 50%;
}
.ab-cert-body {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 800;
  margin-top: 4px;
}
.ab-cert-code {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.ab-cert-title {
  font-size: 0.72rem;
  color: var(--gray-600);
  line-height: 1.35;
}

/* Partnerships & memberships */
.ab-memberships {
  background: white;
  padding: 60px 60px 70px;
  scroll-margin-top: 140px;
}
.ab-memberships-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.ab-memberships-inner h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 10px;
  margin-bottom: 12px;
}
.ab-memberships-inner h2 .red { color: var(--red); }
.ab-memberships-inner > p {
  color: var(--gray-600);
  font-size: 0.92rem;
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto 32px;
}
.ab-memberships-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-top: 20px;
}
.ab-membership {
  background: var(--canvas);
  padding: 18px 14px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--gray-700);
  letter-spacing: 0.02em;
  border: 1px solid var(--gray-100);
  transition: all .2s;
}
.ab-membership:hover {
  background: white;
  border-color: var(--blue);
  color: var(--blue);
}

/* About responsive */
@media (max-width: 1100px) {
  .ab-leaders-grid { grid-template-columns: repeat(2, 1fr); }
  .ab-gov-grid { grid-template-columns: repeat(2, 1fr); }
  .ab-certs-grid { grid-template-columns: repeat(3, 1fr); }
  .ab-memberships-grid { grid-template-columns: repeat(3, 1fr); }
  .ab-who-inner { grid-template-columns: 1fr; gap: 40px; }
  .ab-who-aside { position: static; }
  .ab-section-head { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 1024px) {
  .ab-hero { padding: 40px 20px; }
  .ab-anchor-nav-inner { padding: 0 20px; }
  .ab-who, .ab-leadership, .ab-history, .ab-governance,
  .ab-entities, .ab-certs, .ab-memberships { padding: 50px 20px; }

  /* Timeline collapses to single column on mobile */
  .ab-timeline::before { left: 30px; }
  .ab-timeline-item {
    grid-template-columns: 60px 1fr;
    gap: 16px;
    margin-bottom: 32px;
  }
  .ab-timeline-year {
    position: static;
    transform: none;
    width: 54px;
    height: 54px;
    font-size: 0.75rem;
  }
  .ab-timeline-item:nth-child(odd) .ab-timeline-content,
  .ab-timeline-item:nth-child(even) .ab-timeline-content {
    grid-column: 2;
    text-align: left;
  }

  .ab-entities-table {
    font-size: 0.82rem;
  }
  .ab-entities-table th,
  .ab-entities-table td {
    padding: 12px 14px;
  }
}
@media (max-width: 640px) {
  .ab-leaders-grid,
  .ab-gov-grid,
  .ab-certs-grid,
  .ab-memberships-grid { grid-template-columns: 1fr 1fr; }
  .ab-certs-grid { grid-template-columns: 1fr 1fr; }
  /* Entities table becomes compact on mobile */
  .ab-entities-table th:nth-child(3),
  .ab-entities-table td:nth-child(3) { display: none; }
}

/* ====================================================== */
/* ==========   CONTACT PAGE   =========================== */
/* ====================================================== */

/* Contact hero */
.ct-hero {
  background: white;
  padding: 50px 60px 40px;
}
.ct-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.ct-hero-left .eyebrow { margin-bottom: 16px; }
.ct-hero-left h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 18px;
}
.ct-hero-left h1 .red { color: var(--red); }
.ct-hero-left p {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 520px;
}

/* Fast-path tiles on right of hero */
.ct-fastpaths {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.ct-fastpath {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 16px;
  align-items: center;
  transition: all .25s;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.ct-fastpath:hover {
  border-color: var(--blue);
  transform: translateX(3px);
  box-shadow: 0 8px 20px rgba(0, 84, 166, 0.06);
}
.ct-fastpath::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 0;
  background: var(--red);
  transition: height .3s cubic-bezier(.2,.8,.2,1);
}
.ct-fastpath:hover::before { height: 100%; }
.ct-fp-icon {
  width: 44px;
  height: 44px;
  background: rgba(0, 84, 166, 0.08);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ct-fp-text .fp-label {
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 4px;
}
.ct-fp-text .fp-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.ct-fp-arrow {
  color: var(--gray-400);
  transition: all .2s;
}
.ct-fastpath:hover .ct-fp-arrow {
  color: var(--red);
  transform: translateX(4px);
}

/* Main contact — channels + form */
.ct-main {
  background: var(--canvas);
  padding: 70px 60px;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.ct-main-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Channels column (left) */
.ct-channels {
  min-width: 0;
}
.ct-channels h2 {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 10px;
  margin-bottom: 14px;
  line-height: 1.2;
}
.ct-channels h2 .red { color: var(--red); }
.ct-channels > p {
  font-size: 0.95rem;
  color: var(--gray-600);
  line-height: 1.65;
  margin-bottom: 30px;
  max-width: 560px;
}

.ct-routing {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: white;
  border: 1px solid var(--gray-100);
  margin-bottom: 32px;
}
.ct-routing-head {
  background: var(--canvas);
  padding: 12px 22px;
  border-bottom: 1px solid var(--gray-200);
  display: grid;
  grid-template-columns: 160px 1fr 100px;
  gap: 20px;
}
.ct-routing-head span {
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
}
.ct-route {
  display: grid;
  grid-template-columns: 160px 1fr 100px;
  gap: 20px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--gray-100);
  align-items: center;
  transition: background .2s;
}
.ct-route:last-child { border-bottom: none; }
.ct-route:hover { background: var(--canvas); }
.ct-route-type {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ct-route-type .ct-route-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  background: rgba(0, 84, 166, 0.08);
  flex-shrink: 0;
}
.ct-route-type-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
}
.ct-route-email {
  font-size: 0.88rem;
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
  word-break: break-all;
  transition: color .2s;
}
.ct-route-email:hover { color: var(--red); }
.ct-route-sla {
  font-size: 0.74rem;
  color: var(--gray-500);
  text-align: right;
  font-weight: 500;
}
.ct-route-sla strong {
  color: var(--gray-900);
  font-weight: 700;
}

/* Direct phone block */
.ct-phone-block {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 24px 26px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
  border-left: 3px solid var(--red);
}
.ct-phone-icon {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
  background: rgba(215, 25, 32, 0.08);
  flex-shrink: 0;
}
.ct-phone-content h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.ct-phone-content .urgent-line {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.02em;
  display: block;
  font-variant-numeric: tabular-nums;
  margin: 6px 0;
}
.ct-phone-content p {
  font-size: 0.82rem;
  color: var(--gray-600);
  line-height: 1.55;
}
.ct-phone-content p strong { color: var(--gray-900); }

/* Form column (right) */
.ct-form-wrap {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 34px 36px 30px;
  position: sticky;
  top: 120px;
}
.ct-form-wrap h2 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--gray-900);
  margin-bottom: 6px;
}
.ct-form-wrap h2 .red { color: var(--red); }
.ct-form-wrap > p {
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.55;
  margin-bottom: 24px;
}
.ct-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ct-field-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ct-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ct-field label {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--gray-700);
  font-weight: 600;
}
.ct-field label .req {
  color: var(--red);
  margin-left: 2px;
}
.ct-field input,
.ct-field select,
.ct-field textarea {
  padding: 11px 14px;
  background: var(--canvas);
  border: 1px solid var(--gray-200);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--gray-900);
  outline: none;
  transition: all .15s;
  width: 100%;
  border-radius: 0;
}
.ct-field input::placeholder,
.ct-field textarea::placeholder {
  color: var(--gray-400);
}
.ct-field input:focus,
.ct-field select:focus,
.ct-field textarea:focus {
  background: white;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 84, 166, 0.08);
}
.ct-field select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.ct-field textarea {
  resize: vertical;
  min-height: 110px;
  font-family: inherit;
}
.ct-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 4px 0;
}
.ct-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--blue);
  flex-shrink: 0;
  cursor: pointer;
}
.ct-consent label {
  font-size: 0.78rem;
  color: var(--gray-600);
  line-height: 1.55;
  cursor: pointer;
}
.ct-consent label a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ct-consent label a:hover { color: var(--red); }
.ct-submit {
  padding: 13px 24px;
  background: var(--red);
  color: white;
  border: none;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background .2s;
  margin-top: 4px;
}
.ct-submit:hover { background: var(--red-dark); }
.ct-submit:disabled {
  background: var(--gray-400);
  cursor: not-allowed;
}
.ct-response-note {
  font-size: 0.75rem;
  color: var(--gray-500);
  line-height: 1.5;
  text-align: center;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ct-response-note svg { color: var(--blue); }

/* Form success / error states */
.ct-form-state {
  padding: 16px 18px;
  margin-top: 14px;
  display: none;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.ct-form-state.is-visible { display: flex; }
.ct-form-state.success {
  background: rgba(11, 122, 62, 0.08);
  color: #0B7A3E;
  border-left: 3px solid #0B7A3E;
}
.ct-form-state.error {
  background: rgba(215, 25, 32, 0.06);
  color: var(--red-dark);
  border-left: 3px solid var(--red);
}

/* Offices directory */
.ct-offices {
  background: white;
  padding: 70px 60px;
}
.ct-offices-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.ct-offices-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 36px;
}
.ct-offices-head h2 {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--gray-900);
  margin-top: 10px;
}
.ct-offices-head h2 .red { color: var(--red); }
.ct-offices-head p {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.6;
}
.ct-offices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ct-office {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.ct-office:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 84, 166, 0.06);
}
.ct-office.is-hq::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  background: var(--red);
}
.ct-office-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.ct-office-location {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ct-office-flag {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}
.ct-office-city {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.015em;
}
.ct-office-type {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  font-weight: 700;
}
.ct-office-type.hq { background: var(--red); color: white; }
.ct-office-type.regional { background: rgba(0, 84, 166, 0.12); color: var(--blue); }
.ct-office-type.operational { background: var(--canvas); color: var(--gray-700); border: 1px solid var(--gray-200); }

.ct-office-address {
  font-size: 0.84rem;
  color: var(--gray-700);
  line-height: 1.55;
  padding: 12px 0;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.ct-office-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ct-office-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  color: var(--gray-700);
}
.ct-office-line svg {
  color: var(--gray-400);
  flex-shrink: 0;
}
.ct-office-line a {
  color: var(--gray-800);
  text-decoration: none;
  transition: color .2s;
  word-break: break-word;
}
.ct-office-line a:hover { color: var(--blue); }
.ct-office-directions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue);
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
  transition: color .2s;
}
.ct-office-directions:hover { color: var(--red); }

/* World map strip */
.ct-map-strip {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: white;
  padding: 50px 60px;
  position: relative;
  overflow: hidden;
}
.ct-map-strip::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(215, 25, 32, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.ct-map-inner {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.ct-map-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  font-weight: 700;
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ct-map-label::before {
  content: "";
  display: inline-block;
  width: 24px; height: 2px;
  background: var(--red);
}
.ct-map-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-top: 20px;
}
.ct-map-city {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0 0;
  border-top: 2px solid rgba(255,255,255,0.2);
  position: relative;
  transition: border-color .25s;
}
.ct-map-city:hover { border-top-color: #FF9AA0; }
.ct-map-city::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.15);
}
.ct-map-city.is-hq::before {
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(215, 25, 32, 0.25);
}
.ct-map-city .city {
  font-size: 1rem;
  font-weight: 800;
  color: white;
  letter-spacing: -0.01em;
}
.ct-map-city .country {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ct-map-city .country .flag-tiny { font-size: 0.9rem; }

/* Contact responsive */
@media (max-width: 1100px) {
  .ct-hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .ct-main-inner { grid-template-columns: 1fr; gap: 40px; }
  .ct-form-wrap { position: static; }
  .ct-offices-grid { grid-template-columns: repeat(2, 1fr); }
  .ct-offices-head { grid-template-columns: 1fr; gap: 14px; }
  .ct-map-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .ct-hero { padding: 40px 20px; }
  .ct-main { padding: 50px 20px; }
  .ct-offices { padding: 50px 20px; }
  .ct-map-strip { padding: 40px 20px; }
  .ct-form-wrap { padding: 28px 24px; }
  .ct-routing-head, .ct-route {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .ct-routing-head span:nth-child(2),
  .ct-routing-head span:nth-child(3) { display: none; }
  .ct-route { padding: 18px 22px; gap: 10px; }
  .ct-route-sla { text-align: left; }
}
@media (max-width: 640px) {
  .ct-offices-grid { grid-template-columns: 1fr; }
  .ct-field-group { grid-template-columns: 1fr; }
  .ct-map-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ====================================================== */
/* ==========   SHARED FORM FRAMEWORK   ================== */
/* ========== (used by Quote + Procurement + Proposal) ==  */
/* ====================================================== */

/* Form page hero */
.fm-hero {
  background: white;
  padding: 50px 60px 40px;
}
.fm-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.fm-hero .eyebrow { margin-bottom: 16px; }
.fm-hero h1 {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 14px;
  max-width: 820px;
}
.fm-hero h1 .red { color: var(--red); }
.fm-hero p.fm-lead {
  font-size: 1.02rem;
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 720px;
  margin-bottom: 24px;
}

/* Trust/SLA strip under hero */
.fm-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--gray-200);
  background: var(--canvas);
}
.fm-trust-item {
  padding: 14px 22px;
  border-right: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--gray-700);
  flex: 1 1 auto;
  min-width: 0;
}
.fm-trust-item:last-child { border-right: none; }
.fm-trust-item svg {
  color: var(--blue);
  flex-shrink: 0;
}
.fm-trust-item strong {
  color: var(--gray-900);
  font-weight: 700;
}

/* Main form layout */
.fm-main {
  background: var(--canvas);
  padding: 60px 60px 80px;
  border-top: 1px solid var(--gray-100);
}
.fm-main-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 50px;
  align-items: start;
}

/* Form container */
.fm-form-wrap {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 40px 44px;
  min-width: 0;
}

/* Section groups */
.fm-section {
  padding: 0 0 30px;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 30px;
}
.fm-section:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}
.fm-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.fm-section-num {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.fm-section h2 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--gray-900);
  line-height: 1.25;
}
.fm-section-desc {
  font-size: 0.84rem;
  color: var(--gray-600);
  line-height: 1.55;
  margin-bottom: 20px;
  max-width: 620px;
}

/* Field & layout helpers (reuses ct-field base) */
.fm-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fm-field label {
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--gray-800);
  font-weight: 600;
}
.fm-field label .req {
  color: var(--red);
  margin-left: 2px;
}
.fm-field label .optional {
  color: var(--gray-400);
  font-weight: 500;
  margin-left: 4px;
  font-size: 0.72rem;
}
.fm-field input,
.fm-field select,
.fm-field textarea {
  padding: 11px 14px;
  background: var(--canvas);
  border: 1px solid var(--gray-200);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--gray-900);
  outline: none;
  transition: all .15s;
  width: 100%;
  border-radius: 0;
}
.fm-field input::placeholder,
.fm-field textarea::placeholder {
  color: var(--gray-400);
}
.fm-field input:focus,
.fm-field select:focus,
.fm-field textarea:focus {
  background: white;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 84, 166, 0.08);
}
.fm-field select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.fm-field textarea {
  resize: vertical;
  min-height: 110px;
  font-family: inherit;
}
.fm-field-hint {
  font-size: 0.72rem;
  color: var(--gray-500);
  line-height: 1.45;
  margin-top: 2px;
}

/* Field rows — 2 or 3 col */
.fm-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.fm-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.fm-row-date-amt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* File upload */
.fm-file {
  position: relative;
  padding: 20px 22px;
  background: var(--canvas);
  border: 1.5px dashed var(--gray-200);
  border-radius: 0;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.fm-file:hover {
  background: white;
  border-color: var(--blue);
}
.fm-file input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.fm-file-icon {
  color: var(--blue);
}
.fm-file-text {
  font-size: 0.88rem;
  color: var(--gray-700);
  font-weight: 600;
}
.fm-file-text strong { color: var(--blue); }
.fm-file-hint {
  font-size: 0.72rem;
  color: var(--gray-500);
}
.fm-file.has-file {
  background: white;
  border-style: solid;
  border-color: var(--blue);
  text-align: left;
  align-items: stretch;
  flex-direction: row;
  padding: 14px 18px;
  gap: 14px;
}
.fm-file.has-file .fm-file-icon { color: var(--red); }
.fm-file-selected {
  flex: 1;
  text-align: left;
  min-width: 0;
}
.fm-file-selected .name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
  word-break: break-all;
  display: block;
}
.fm-file-selected .size {
  font-size: 0.74rem;
  color: var(--gray-500);
  margin-top: 2px;
}
.fm-file-clear {
  background: transparent;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  padding: 4px;
  transition: color .2s;
  flex-shrink: 0;
}
.fm-file-clear:hover { color: var(--red); }

/* Checkbox group */
.fm-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 4px 0;
}
.fm-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--blue);
  flex-shrink: 0;
  cursor: pointer;
}
.fm-check label {
  font-size: 0.82rem;
  color: var(--gray-700);
  line-height: 1.55;
  cursor: pointer;
}
.fm-check label a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fm-check label a:hover { color: var(--red); }

/* Submit */
.fm-submit {
  padding: 14px 26px;
  background: var(--red);
  color: white;
  border: none;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background .2s;
  margin-top: 20px;
}
.fm-submit:hover { background: var(--red-dark); }
.fm-submit:disabled {
  background: var(--gray-400);
  cursor: not-allowed;
}

/* Form state (success/error) */
.fm-form-state {
  padding: 16px 18px;
  margin-top: 14px;
  display: none;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.fm-form-state.is-visible { display: flex; }
.fm-form-state.success {
  background: rgba(11, 122, 62, 0.08);
  color: #0B7A3E;
  border-left: 3px solid #0B7A3E;
}
.fm-form-state.error {
  background: rgba(215, 25, 32, 0.06);
  color: var(--red-dark);
  border-left: 3px solid var(--red);
}

/* ============ HELPER ASIDE (right column) ============ */
.fm-aside {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.fm-aside-card {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 24px 26px;
}
.fm-aside-card h4 {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 800;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-200);
}
.fm-aside-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fm-aside-step {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
}
.fm-aside-step-num {
  width: 26px;
  height: 26px;
  background: var(--canvas);
  border: 1.5px solid var(--blue);
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  margin-top: 2px;
}
.fm-aside-step-text h5 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}
.fm-aside-step-text p {
  font-size: 0.78rem;
  color: var(--gray-600);
  line-height: 1.5;
}
.fm-aside-sla {
  background: var(--canvas);
  border-left: 3px solid var(--red);
  padding: 16px 18px;
  margin-top: 16px;
}
.fm-aside-sla strong {
  display: block;
  font-size: 0.85rem;
  color: var(--gray-900);
  font-weight: 700;
  margin-bottom: 4px;
}
.fm-aside-sla p {
  font-size: 0.78rem;
  color: var(--gray-600);
  line-height: 1.5;
}
.fm-aside-alt {
  background: var(--canvas);
  padding: 22px 24px;
}
.fm-aside-alt h4 {
  color: var(--gray-900);
  padding-bottom: 0;
  border-bottom: none;
  margin-bottom: 8px;
}
.fm-aside-alt p {
  font-size: 0.82rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 14px;
}
.fm-aside-alt .alt-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--blue);
  font-weight: 700;
  transition: color .2s;
}
.fm-aside-alt .alt-link:hover { color: var(--red); }
.fm-aside-urgent {
  background: var(--blue);
  color: white;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}
.fm-aside-urgent::before {
  content: "";
  position: absolute;
  top: -30px; right: -30px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(215, 25, 32, 0.3) 0%, transparent 70%);
  pointer-events: none;
}
.fm-aside-urgent h4 {
  color: white;
  border-bottom-color: rgba(255,255,255,0.2);
  margin-bottom: 12px;
  padding-bottom: 10px;
  position: relative;
  z-index: 1;
}
.fm-aside-urgent .phone {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
  display: block;
}
.fm-aside-urgent p {
  font-size: 0.78rem;
  opacity: 0.85;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}
.fm-aside-urgent a.email-line {
  color: white;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

/* ============ PROCUREMENT LINE-ITEM TABLE ============ */
.proc-items {
  border: 1px solid var(--gray-200);
  background: white;
  overflow: hidden;
}
.proc-items-head {
  display: grid;
  grid-template-columns: 170px 1fr 80px 90px 120px 140px 32px;
  gap: 8px;
  padding: 10px 16px;
  background: var(--canvas);
  border-bottom: 1px solid var(--gray-200);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
}
.proc-items-head .req {
  color: var(--red);
  margin-left: 2px;
}
.proc-item {
  display: grid;
  grid-template-columns: 170px 1fr 80px 90px 120px 140px 32px;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--gray-100);
  align-items: center;
}
.proc-item:last-child { border-bottom: none; }
.proc-item input,
.proc-item select,
.proc-item textarea {
  padding: 9px 10px;
  background: white;
  border: 1px solid var(--gray-200);
  font-family: inherit;
  font-size: 0.84rem;
  color: var(--gray-900);
  outline: none;
  transition: all .15s;
  width: 100%;
  border-radius: 0;
}
.proc-item textarea {
  min-height: 38px;
  resize: vertical;
  font-family: inherit;
}
.proc-item input:focus,
.proc-item select:focus,
.proc-item textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(0, 84, 166, 0.08);
}
.proc-item select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}
.proc-item-remove {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--gray-400);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  padding: 0;
}
.proc-item-remove:hover {
  color: var(--red);
  background: rgba(215, 25, 32, 0.06);
}
.proc-item-remove:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.proc-items-foot {
  padding: 14px 16px;
  background: var(--canvas);
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.proc-add-btn {
  background: white;
  border: 1.5px dashed var(--blue);
  color: var(--blue);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 10px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .2s;
}
.proc-add-btn:hover {
  background: var(--blue);
  color: white;
  border-style: solid;
}
.proc-item-count {
  font-size: 0.76rem;
  color: var(--gray-600);
}
.proc-item-count strong {
  color: var(--gray-900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Procurement item — mobile stacked card */
@media (max-width: 900px) {
  .proc-items-head { display: none; }
  .proc-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px 16px;
    background: var(--canvas);
    margin: 8px;
    border: 1px solid var(--gray-200);
  }
  .proc-item > * {
    position: relative;
  }
  .proc-item > *:not(.proc-item-remove)::before {
    content: attr(data-label);
    display: block;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
    font-weight: 700;
    margin-bottom: 4px;
  }
  .proc-item-remove {
    justify-self: flex-end;
    border: 1px solid var(--gray-200);
  }
}

/* Form responsive */
@media (max-width: 1100px) {
  .fm-main-inner { grid-template-columns: 1fr; gap: 40px; }
  .fm-aside { position: static; }
}
@media (max-width: 1024px) {
  .fm-hero { padding: 40px 20px; }
  .fm-main { padding: 40px 20px 60px; }
  .fm-form-wrap { padding: 28px 24px; }
  .fm-row-2, .fm-row-3, .fm-row-date-amt {
    grid-template-columns: 1fr;
  }
  .fm-trust-item { border-right: none; border-bottom: 1px solid var(--gray-200); flex-basis: 100%; }
  .fm-trust-item:last-child { border-bottom: none; }
}

/* ====================================================== */
/* ==========   PROCUREMENT CATALOG PAGE   =============== */
/* ====================================================== */

/* Hero */
.pc-hero {
  background: white;
  padding: 50px 60px 40px;
}
.pc-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: end;
}
.pc-hero-left .eyebrow { margin-bottom: 16px; }
.pc-hero-left h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 18px;
}
.pc-hero-left h1 .red { color: var(--red); }
.pc-hero-left p {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 24px;
}
.pc-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Stats strip */
.pc-stats {
  background: var(--canvas);
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  padding: 28px 60px;
}
.pc-stats-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.pc-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 20px;
  border-left: 2px solid var(--red);
}
.pc-stat .n {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pc-stat .lbl {
  font-size: 0.78rem;
  color: var(--gray-600);
  line-height: 1.35;
}

/* Sticky search + filter bar */
.pc-toolbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: white;
  border-bottom: 1px solid var(--gray-200);
  padding: 14px 60px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.site-header.scrolled ~ main .pc-toolbar,
body.scrolled .pc-toolbar { top: 70px; }

.pc-toolbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px 1fr auto;
  gap: 24px;
  align-items: center;
}
.pc-search {
  position: relative;
}
.pc-search input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  background: var(--canvas);
  border: 1px solid var(--gray-200);
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--gray-900);
  outline: none;
  transition: all .15s;
}
.pc-search input::placeholder { color: var(--gray-400); }
.pc-search input:focus {
  background: white;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 84, 166, 0.08);
}
.pc-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  pointer-events: none;
}
.pc-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  padding: 4px;
  display: none;
}
.pc-search-clear.is-visible { display: block; }
.pc-search-clear:hover { color: var(--red); }

.pc-cat-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

.pc-toolbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.pc-result-count {
  font-size: 0.82rem;
  color: var(--gray-600);
}
.pc-result-count strong {
  color: var(--gray-900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* View toggle (Grid / List) */
.pc-view-toggle {
  display: inline-flex;
  border: 1px solid var(--gray-200);
  background: white;
}
.pc-view-toggle button {
  width: 34px;
  height: 32px;
  background: white;
  border: none;
  color: var(--gray-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  border-right: 1px solid var(--gray-200);
}
.pc-view-toggle button:last-child { border-right: none; }
.pc-view-toggle button:hover {
  color: var(--blue);
  background: var(--canvas);
}
.pc-view-toggle button.active {
  background: var(--blue);
  color: white;
}

/* Catalog body */
.pc-catalog {
  background: var(--canvas);
  padding: 36px 60px 40px;
}
.pc-catalog-inner {
  max-width: 1400px;
  margin: 0 auto;
}

/* OEM section */
.pc-oem {
  margin-bottom: 28px;
  scroll-margin-top: 140px;
}
.pc-oem-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 16px 22px;
  background: white;
  border: 1px solid var(--gray-100);
  border-bottom: 2px solid var(--blue);
}

/* OEM logo - natural size, no box, no border. Logo shines as itself. */
.pc-oem-logo {
  height: auto;
  max-height: 48px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
/* Fallback when no logo URL - quiet text treatment, no box */
.pc-oem-logo-fallback {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.01em;
  flex-shrink: 0;
  padding: 4px 0;
}

.pc-oem-info {
  min-width: 0;
}
.pc-oem-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.pc-oem-tag {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 800;
}
.pc-oem-country {
  font-size: 0.78rem;
  color: var(--gray-600);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pc-oem-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.pc-oem-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.pc-oem-count {
  font-size: 0.82rem;
  color: var(--gray-600);
  white-space: nowrap;
}
.pc-oem-count strong {
  color: var(--gray-900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pc-oem-link {
  font-size: 0.78rem;
  color: var(--blue);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s;
  white-space: nowrap;
}
.pc-oem-link:hover { color: var(--red); }

/* ===== GRID VIEW (default) — image-forward, 3-col, breathing room ===== */
.pc-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.pc-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: white;
  border: 1px solid var(--gray-100);
  position: relative;
  transition: all .2s;
  overflow: hidden;
}
.pc-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 84, 166, 0.06);
}
.pc-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: var(--red);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
  z-index: 2;
}
.pc-card:hover::before { width: 100%; }

/* IMAGE-FORWARD: large product image at top */
.pc-card-img {
  width: 100%;
  height: 220px;
  background: var(--canvas);
  position: relative;
  overflow: hidden;
}
.pc-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.pc-card:hover .pc-card-img img { transform: scale(1.04); }
.pc-card-img-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
  background: linear-gradient(135deg, #F0F2F7 0%, #E8EBF1 100%);
}

.pc-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 16px;
  flex: 1;
}
.pc-card-cat {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 800;
}
.pc-card-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.pc-card-desc {
  font-size: 0.85rem;
  color: var(--gray-600);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.pc-card-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}
.pc-card-rfq,
.pc-card-datasheet {
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s;
  letter-spacing: 0.01em;
}
.pc-card-rfq {
  color: var(--red);
}
.pc-card-rfq:hover {
  color: var(--red-dark);
}
.pc-card-datasheet {
  color: var(--gray-500);
  margin-left: auto;
}
.pc-card-datasheet:hover {
  color: var(--blue);
}

/* ===== LIST VIEW — high-density, single column, line rules ===== */
.pc-products.is-list-view {
  grid-template-columns: 1fr;
}
.pc-products.is-list-view .pc-card {
  flex-direction: row;
  align-items: stretch;
  border-right: none;
}
.pc-products.is-list-view .pc-card-img {
  width: 100px;
  height: auto;
  min-height: 100px;
  flex-shrink: 0;
}
.pc-products.is-list-view .pc-card:hover .pc-card-img img {
  transform: none;
}
.pc-products.is-list-view .pc-card-body {
  padding: 14px 22px 14px 22px;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  flex: 1;
}
.pc-products.is-list-view .pc-card-cat {
  flex-shrink: 0;
  width: 130px;
}
.pc-products.is-list-view .pc-card-title {
  flex: 1;
  font-size: 0.95rem;
}
.pc-products.is-list-view .pc-card-desc {
  display: none;
}
.pc-products.is-list-view .pc-card-actions {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  gap: 16px;
}
.pc-products.is-list-view .pc-card-datasheet { margin: 0; }

/* Generic supply section */
.pc-generic {
  background: white;
  border-top: 1px solid var(--gray-100);
  padding: 60px 60px;
}
.pc-generic-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.pc-generic-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  margin-bottom: 30px;
}
.pc-generic-head h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--gray-900);
  margin-top: 10px;
}
.pc-generic-head h2 .red { color: var(--red); }
.pc-generic-head p {
  color: var(--gray-600);
  font-size: 0.92rem;
  line-height: 1.65;
}
.pc-generic-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.pc-generic-item {
  background: var(--canvas);
  border: 1px solid var(--gray-100);
  padding: 16px 14px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gray-700);
  letter-spacing: -0.005em;
  transition: all .2s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-decoration: none;
}
.pc-generic-item:hover {
  background: white;
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
}
.pc-generic-item .brand-name {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--gray-900);
}
.pc-generic-item:hover .brand-name { color: var(--blue); }
.pc-generic-item .brand-cat {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 600;
}

/* Empty state */
.pc-empty {
  background: white;
  padding: 60px 40px;
  text-align: center;
  border: 1px dashed var(--gray-200);
  display: none;
}
.pc-empty.is-visible { display: block; }
.pc-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--canvas);
  color: var(--gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.pc-empty h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 8px;
}
.pc-empty p {
  font-size: 0.88rem;
  color: var(--gray-600);
  line-height: 1.55;
  max-width: 480px;
  margin: 0 auto 18px;
}

/* Final CTA */
.pc-final-cta {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: white;
  padding: 55px 60px;
  position: relative;
  overflow: hidden;
}
.pc-final-cta::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(215, 25, 32, 0.22) 0%, transparent 70%);
  pointer-events: none;
}
.pc-final-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.pc-final-inner .eyebrow {
  color: rgba(255,255,255,0.8);
  margin-bottom: 14px;
}
.pc-final-inner .eyebrow::before { background: var(--red); }
.pc-final-inner h3 {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.pc-final-inner h3 .accent { color: #FF9AA0; }
.pc-final-inner p {
  font-size: 0.94rem;
  opacity: 0.85;
  line-height: 1.65;
  max-width: 540px;
}
.pc-final-ctas {
  display: flex;
  gap: 12px;
  flex-direction: column;
}
.pc-final-ctas .btn { justify-content: flex-start; }

/* Procurement responsive */
@media (max-width: 1200px) {
  .pc-products { grid-template-columns: repeat(2, 1fr); }
  .pc-card-img { height: 240px; }
}
@media (max-width: 1100px) {
  .pc-generic-grid { grid-template-columns: repeat(4, 1fr); }
  .pc-toolbar-inner {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .pc-search { max-width: none; }
  .pc-toolbar-right { justify-content: flex-start; }
}
@media (max-width: 1024px) {
  .pc-hero { padding: 40px 20px; }
  .pc-hero-inner { grid-template-columns: 1fr; gap: 24px; }
  .pc-stats { padding: 24px 20px; }
  .pc-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .pc-toolbar { padding: 12px 20px; }
  .pc-catalog { padding: 28px 20px 36px; }
  .pc-generic { padding: 40px 20px; }
  .pc-generic-head { grid-template-columns: 1fr; gap: 14px; }
  .pc-generic-grid { grid-template-columns: repeat(3, 1fr); }
  .pc-final-cta { padding: 40px 20px; }
  .pc-final-inner { grid-template-columns: 1fr; gap: 24px; }
  .pc-oem-head {
    grid-template-columns: auto 1fr;
    padding: 14px 16px;
    gap: 16px;
  }
  .pc-oem-actions {
    grid-column: 1 / -1;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--gray-100);
  }
  .pc-oem-logo {
    max-height: 40px;
    max-width: 140px;
  }
  /* List view on tablet */
  .pc-products.is-list-view .pc-card-body {
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  .pc-products.is-list-view .pc-card-cat {
    width: auto;
  }
}
@media (max-width: 700px) {
  /* Tighter mobile padding so cards get max usable width */
  .pc-catalog { padding: 24px 14px 32px; }
  .pc-toolbar { padding: 10px 14px; }
  .pc-stats { padding: 20px 14px; }
  .pc-hero { padding: 32px 14px; }
  .pc-generic { padding: 36px 14px; }
  .pc-final-cta { padding: 36px 14px; }
  .pc-oem-head { padding: 12px 14px; }

  .pc-products {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .pc-generic-grid { grid-template-columns: 1fr 1fr; }
  .pc-card-img { height: 220px; }
  .pc-stats-inner { grid-template-columns: 1fr; gap: 12px; }

  /* List view on phone — image+title compact */
  .pc-products.is-list-view .pc-card { flex-direction: row; }
  .pc-products.is-list-view .pc-card-img {
    width: 90px;
    height: auto;
    min-height: 90px;
    flex-shrink: 0;
  }
  .pc-products.is-list-view .pc-card-body {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 14px;
  }
  .pc-products.is-list-view .pc-card-actions { display: none; }
}

/* ====================================================== */
/* ==========   OEM DETAIL PAGE   ======================== */
/* ====================================================== */

/* Hero — split: branding+intro left, facts card right */
.od-hero {
  background: white;
  padding: 50px 60px 40px;
}
.od-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
}

.od-hero-left .od-brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}
.od-hero-logo {
  height: auto;
  max-height: 64px;
  max-width: 240px;
  width: auto;
  object-fit: contain;
  display: block;
}
.od-hero-logo-fallback {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.015em;
}
.od-meta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.od-partnership-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.od-partnership-pill.exclusive {
  background: var(--red);
  color: white;
}
.od-partnership-pill.authorized {
  background: rgba(0, 84, 166, 0.1);
  color: var(--blue);
}
.od-partnership-pill.service {
  background: rgba(11, 122, 62, 0.12);
  color: #0B7A3E;
}
.od-partnership-pill.reseller {
  background: var(--canvas);
  color: var(--gray-700);
  border: 1px solid var(--gray-200);
}
.od-partnership-pill.strategic {
  background: linear-gradient(135deg, rgba(0, 84, 166, 0.12), rgba(215, 25, 32, 0.1));
  color: var(--blue);
}
.od-meta-item {
  font-size: 0.78rem;
  color: var(--gray-600);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.od-meta-item strong {
  color: var(--gray-900);
  font-weight: 700;
}
.od-meta-divider {
  width: 1px;
  height: 14px;
  background: var(--gray-200);
}

.od-hero-left h1 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 14px;
}
.od-hero-left h1 .red { color: var(--red); }
.od-hero-left p.od-lead {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 580px;
  margin-bottom: 24px;
}
.od-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Facts card on right of hero */
.od-facts-card {
  background: var(--canvas);
  border: 1px solid var(--gray-100);
}
.od-facts-card h4 {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 800;
  padding: 16px 22px;
  border-bottom: 1px solid var(--gray-200);
  background: white;
}
.od-fact {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--gray-200);
  align-items: start;
}
.od-fact:last-child { border-bottom: none; }
.od-fact-label {
  font-size: 0.74rem;
  color: var(--gray-500);
  font-weight: 600;
}
.od-fact-value {
  font-size: 0.86rem;
  color: var(--gray-900);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.od-fact-value a {
  color: var(--blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .2s;
}
.od-fact-value a:hover { color: var(--red); }

/* Partnership Authority section — credibility builder */
.od-authority {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: white;
  padding: 50px 60px;
  position: relative;
  overflow: hidden;
}
.od-authority::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(215, 25, 32, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.od-authority-inner {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: start;
}
.od-authority-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.od-authority-label::before {
  content: "";
  display: inline-block;
  width: 24px; height: 2px;
  background: var(--red);
}
.od-authority h2 {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 14px;
}
.od-authority h2 .accent { color: #FF9AA0; }
.od-authority-intro {
  font-size: 0.94rem;
  opacity: 0.85;
  line-height: 1.65;
}
.od-authority-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.15);
}
.od-auth-item {
  background: rgba(0, 62, 122, 0.6);
  padding: 18px 22px;
  backdrop-filter: blur(6px);
}
.od-auth-item .label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}
.od-auth-item .value {
  font-size: 0.95rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.01em;
  line-height: 1.4;
}
.od-auth-doc-note {
  margin-top: 18px;
  font-size: 0.82rem;
  opacity: 0.85;
  display: flex;
  align-items: center;
  gap: 10px;
}
.od-auth-doc-note a {
  color: white;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.od-auth-doc-note a:hover { color: #FF9AA0; }

/* About the partner — prose section */
.od-about {
  background: white;
  padding: 60px 60px;
  border-bottom: 1px solid var(--gray-100);
}
.od-about-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.od-about-inner .eyebrow {
  margin-bottom: 12px;
}
.od-about-inner h2 {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--gray-900);
  margin-bottom: 22px;
}
.od-about-inner h2 .red { color: var(--red); }

/* Products section reuses .pc- styles. Add scoped wrapper. */
.od-products-section {
  background: var(--canvas);
  padding: 60px 60px;
}
.od-products-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.od-products-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
  margin-bottom: 24px;
}
.od-products-head h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--gray-900);
  margin-top: 10px;
}
.od-products-head h2 .red { color: var(--red); }
.od-products-head p {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 640px;
  margin-top: 8px;
}
.od-products-search {
  position: relative;
  width: 280px;
  flex-shrink: 0;
}
.od-products-search input {
  width: 100%;
  padding: 9px 14px 9px 36px;
  background: white;
  border: 1px solid var(--gray-200);
  font-family: inherit;
  font-size: 0.86rem;
  color: var(--gray-900);
  outline: none;
  transition: all .15s;
}
.od-products-search input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 84, 166, 0.08);
}
.od-products-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  pointer-events: none;
}

.od-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Service & support capability — what Fairtex delivers locally */
.od-capability {
  background: white;
  padding: 60px 60px;
  border-top: 1px solid var(--gray-100);
}
.od-capability-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.od-capability-head {
  text-align: center;
  margin-bottom: 36px;
}
.od-capability-head .eyebrow {
  justify-content: center;
  display: inline-flex;
  margin-bottom: 12px;
}
.od-capability-head h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-bottom: 10px;
}
.od-capability-head h2 .red { color: var(--red); }
.od-capability-head p {
  color: var(--gray-600);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 auto;
}
.od-capability-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.od-cap-card {
  background: var(--canvas);
  border: 1px solid var(--gray-100);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.od-cap-card:hover {
  background: white;
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 84, 166, 0.06);
}
.od-cap-icon {
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  background: white;
  border: 1px solid var(--gray-100);
}
.od-cap-card:hover .od-cap-icon {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}
.od-cap-card h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.od-cap-card p {
  font-size: 0.82rem;
  color: var(--gray-600);
  line-height: 1.55;
}

/* Related OEMs strip */
.od-related {
  background: var(--canvas);
  padding: 50px 60px;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.od-related-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.od-related-head {
  margin-bottom: 24px;
}
.od-related-head h3 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--gray-900);
}
.od-related-head h3 .red { color: var(--red); }
.od-related-head p {
  font-size: 0.88rem;
  color: var(--gray-600);
  line-height: 1.55;
  margin-top: 4px;
}
.od-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.od-related-card {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: all .25s;
  position: relative;
  overflow: hidden;
}
.od-related-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 84, 166, 0.06);
}
.od-related-card .od-related-logo {
  height: 36px;
  display: flex;
  align-items: center;
}
.od-related-card .od-related-logo img {
  max-height: 36px;
  max-width: 140px;
  width: auto;
  object-fit: contain;
}
.od-related-card .od-related-logo-fb {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.01em;
}
.od-related-card .od-related-cat {
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 800;
}
.od-related-card .od-related-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.od-related-card .od-related-link {
  font-size: 0.78rem;
  color: var(--blue);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--gray-100);
  transition: color .2s;
}
.od-related-card:hover .od-related-link { color: var(--red); }

/* Final CTA reuses .pc-final-cta look — no new styles needed */

/* Responsive */
@media (max-width: 1100px) {
  .od-products-grid { grid-template-columns: repeat(2, 1fr); }
  .od-capability-grid { grid-template-columns: repeat(2, 1fr); }
  .od-related-grid { grid-template-columns: repeat(2, 1fr); }
  .od-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .od-authority-inner { grid-template-columns: 1fr; gap: 30px; }
  .od-products-head { grid-template-columns: 1fr; gap: 16px; }
  .od-products-search { width: 100%; }
}
@media (max-width: 1024px) {
  .od-hero { padding: 40px 20px; }
  .od-authority { padding: 40px 20px; }
  .od-about { padding: 40px 20px; }
  .od-products-section { padding: 40px 20px; }
  .od-capability { padding: 40px 20px; }
  .od-related { padding: 36px 20px; }
}
@media (max-width: 700px) {
  .od-hero { padding: 32px 14px; }
  .od-authority { padding: 36px 14px; }
  .od-authority-grid { grid-template-columns: 1fr; }
  .od-about { padding: 36px 14px; }
  .od-products-section { padding: 32px 14px; }
  .od-products-grid { grid-template-columns: 1fr; }
  .od-capability { padding: 36px 14px; }
  .od-capability-grid { grid-template-columns: 1fr; }
  .od-related { padding: 32px 14px; }
  .od-related-grid { grid-template-columns: 1fr; }
  .od-fact { grid-template-columns: 110px 1fr; padding: 12px 16px; }
  .od-facts-card h4 { padding: 14px 16px; }
}

/* ====================================================== */
/* ==========   PRODUCT DETAIL PAGE   ==================== */
/* ====================================================== */

/* Hero — split: image left, scope panel right */
.pd-hero {
  background: white;
  padding: 40px 60px 50px;
  border-bottom: 1px solid var(--gray-100);
}
.pd-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: start;
}

/* Hero image with gallery */
.pd-hero-image {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pd-hero-main {
  width: 100%;
  height: 480px;
  background: var(--canvas);
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}
.pd-hero-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.pd-hero-main:hover img { transform: scale(1.03); }
.pd-hero-main-fallback {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-300);
  background: linear-gradient(135deg, #F0F2F7 0%, #E8EBF1 100%);
}
.pd-hero-zoom {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity .2s;
}
.pd-hero-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pd-hero-thumb {
  height: 80px;
  background: var(--canvas);
  cursor: pointer;
  overflow: hidden;
  border: 2px solid transparent;
  transition: all .15s;
}
.pd-hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-hero-thumb:hover { border-color: var(--gray-300); }
.pd-hero-thumb.active { border-color: var(--blue); }

/* Right column: scope panel */
.pd-scope {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* OEM mini-bar */
.pd-oem-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--canvas);
  border: 1px solid var(--gray-100);
  text-decoration: none;
  color: inherit;
  transition: all .2s;
  align-self: flex-start;
}
.pd-oem-bar:hover {
  border-color: var(--blue);
  background: white;
}
.pd-oem-bar-logo {
  height: auto;
  max-height: 24px;
  max-width: 80px;
  width: auto;
  object-fit: contain;
}
.pd-oem-bar-fb {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.01em;
}
.pd-oem-bar-text {
  font-size: 0.78rem;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pd-oem-bar-text strong {
  color: var(--gray-900);
  font-weight: 700;
}
.pd-oem-bar-text .arrow {
  color: var(--gray-400);
  margin-left: 4px;
  transition: color .2s;
}
.pd-oem-bar:hover .arrow { color: var(--red); }

/* Title */
.pd-cat {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 800;
  margin-bottom: 8px;
}
.pd-scope h1 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 12px;
}
.pd-scope h1 .red { color: var(--red); }
.pd-subtitle {
  font-size: 0.96rem;
  color: var(--gray-600);
  line-height: 1.6;
}

/* Quick facts strip */
.pd-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
  margin-top: 4px;
}
.pd-fact {
  background: white;
  padding: 14px 16px;
}
.pd-fact-label {
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  margin-bottom: 4px;
  display: block;
}
.pd-fact-value {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
  line-height: 1.35;
}

/* CTAs */
.pd-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.pd-actions .btn {
  justify-content: center;
  padding: 14px 22px;
  font-size: 0.92rem;
}

/* Authorization note */
.pd-auth-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 16px;
  background: var(--canvas);
  border-left: 3px solid var(--red);
  font-size: 0.8rem;
  color: var(--gray-700);
  line-height: 1.5;
}
.pd-auth-note svg {
  color: var(--red);
  flex-shrink: 0;
  margin-top: 1px;
}
.pd-auth-note a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

/* ============ BODY DESCRIPTION ============ */
.pd-body {
  background: white;
  padding: 70px 60px;
}
.pd-body-inner {
  max-width: 900px;
  margin: 0 auto;
}
.pd-body-inner .eyebrow { margin-bottom: 12px; }
.pd-body-inner h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--gray-900);
  margin-bottom: 22px;
}
.pd-body-inner h2 .red { color: var(--red); }

/* ============ SPECS + CONFIGURATIONS ============ */
.pd-specs-section {
  background: var(--canvas);
  padding: 60px 60px;
  border-top: 1px solid var(--gray-100);
}
.pd-specs-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  align-items: start;
}
.pd-specs-block h3,
.pd-config-block h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.pd-specs-block .eyebrow,
.pd-config-block .eyebrow {
  margin-bottom: 10px;
}
.pd-specs-block > p,
.pd-config-block > p {
  font-size: 0.88rem;
  color: var(--gray-600);
  line-height: 1.55;
  margin-bottom: 18px;
}

/* Specs table */
.pd-specs-table {
  background: white;
  border: 1px solid var(--gray-100);
}
.pd-specs-group {
  border-bottom: 1px solid var(--gray-100);
}
.pd-specs-group:last-child { border-bottom: none; }
.pd-specs-group-head {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 800;
  padding: 12px 18px;
  background: var(--canvas);
  border-bottom: 1px solid var(--gray-100);
}
.pd-spec-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--gray-100);
  align-items: baseline;
  font-size: 0.86rem;
}
.pd-spec-row:last-child { border-bottom: none; }
.pd-spec-row:nth-child(even) { background: rgba(0,0,0,0.015); }
.pd-spec-label {
  color: var(--gray-600);
  font-weight: 500;
}
.pd-spec-value {
  color: var(--gray-900);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Configurations list */
.pd-config-list {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 4px 0;
}
.pd-config-item {
  padding: 13px 22px;
  border-bottom: 1px solid var(--gray-100);
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
}
.pd-config-item:last-child { border-bottom: none; }
.pd-config-item-icon {
  color: var(--blue);
  margin-top: 2px;
}
.pd-config-item-text {
  font-size: 0.88rem;
  color: var(--gray-800);
  line-height: 1.5;
}
.pd-config-item-text strong {
  color: var(--gray-900);
  font-weight: 700;
}

/* ============ APPLICATION GALLERY ============ */
.pd-gallery-section {
  background: white;
  padding: 60px 60px;
  border-top: 1px solid var(--gray-100);
}
.pd-gallery-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.pd-gallery-head {
  margin-bottom: 28px;
}
.pd-gallery-head .eyebrow { margin-bottom: 10px; }
.pd-gallery-head h2 {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  line-height: 1.25;
}
.pd-gallery-head h2 .red { color: var(--red); }
.pd-gallery-head p {
  color: var(--gray-600);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 640px;
  margin-top: 6px;
}
.pd-gallery-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 280px 200px;
  gap: 8px;
}
.pd-gallery-tile {
  position: relative;
  overflow: hidden;
  background: var(--gray-900);
  cursor: zoom-in;
}
.pd-gallery-tile:nth-child(1) {
  grid-row: span 2;
}
.pd-gallery-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.pd-gallery-tile:hover img { transform: scale(1.05); }
.pd-gallery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 62, 122, 0.7) 100%);
  pointer-events: none;
}
.pd-gallery-caption {
  position: absolute;
  bottom: 14px;
  left: 16px;
  right: 16px;
  color: white;
  z-index: 2;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* ============ CERTIFICATIONS STRIP ============ */
.pd-certs {
  background: var(--canvas);
  padding: 36px 60px;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.pd-certs-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: center;
}
.pd-certs-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-600);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pd-certs-label::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--red);
  display: inline-block;
}
.pd-certs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pd-cert-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: white;
  border: 1px solid var(--gray-200);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gray-800);
  letter-spacing: -0.005em;
  transition: all .2s;
}
.pd-cert-pill:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.pd-cert-pill svg {
  color: var(--blue);
  flex-shrink: 0;
}

/* ============ DOCUMENT DOWNLOADS ============ */
.pd-docs-section {
  background: white;
  padding: 60px 60px;
}
.pd-docs-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.pd-docs-head {
  margin-bottom: 24px;
}
.pd-docs-head h2 {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 10px;
}
.pd-docs-head h2 .red { color: var(--red); }
.pd-docs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pd-doc {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: all .2s;
}
.pd-doc:hover {
  border-color: var(--blue);
  background: var(--canvas);
  transform: translateY(-2px);
}
.pd-doc-icon {
  width: 40px;
  height: 40px;
  background: rgba(215, 25, 32, 0.08);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pd-doc-info {
  min-width: 0;
}
.pd-doc-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin-bottom: 3px;
}
.pd-doc-meta {
  font-size: 0.72rem;
  color: var(--gray-500);
  font-weight: 500;
}
.pd-doc-arrow {
  color: var(--gray-400);
  transition: color .2s;
}
.pd-doc:hover .pd-doc-arrow { color: var(--red); }

/* ============ RELATED PRODUCTS FROM SAME OEM ============ */
.pd-related {
  background: var(--canvas);
  padding: 60px 60px;
  border-top: 1px solid var(--gray-100);
}
.pd-related-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.pd-related-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
  margin-bottom: 24px;
}
.pd-related-head h2 {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 10px;
}
.pd-related-head h2 .red { color: var(--red); }
.pd-related-head .more-link {
  font-size: 0.82rem;
  color: var(--blue);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: color .2s;
}
.pd-related-head .more-link:hover { color: var(--red); }

.pd-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* ============ STICKY MOBILE RFQ BUTTON ============ */
.pd-mobile-cta {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: white;
  border-top: 1px solid var(--gray-200);
  padding: 12px 16px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform .3s ease;
}
.pd-mobile-cta.is-visible { transform: translateY(0); }
.pd-mobile-cta-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}
.pd-mobile-cta-text {
  min-width: 0;
}
.pd-mobile-cta-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-mobile-cta-sub {
  font-size: 0.7rem;
  color: var(--gray-500);
  margin-top: 2px;
}
.pd-mobile-cta .btn {
  padding: 11px 18px;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .pd-hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .pd-hero-main { height: 400px; }
  .pd-specs-inner { grid-template-columns: 1fr; gap: 30px; }
  .pd-docs-grid { grid-template-columns: repeat(2, 1fr); }
  .pd-related-grid { grid-template-columns: repeat(2, 1fr); }
  .pd-related-head { grid-template-columns: 1fr; gap: 14px; }
  .pd-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 240px 200px 200px;
  }
  .pd-gallery-tile:nth-child(1) {
    grid-row: span 1;
    grid-column: span 2;
  }
}
@media (max-width: 1024px) {
  .pd-hero { padding: 32px 20px; }
  .pd-body { padding: 50px 20px; }
  .pd-specs-section { padding: 40px 20px; }
  .pd-gallery-section { padding: 40px 20px; }
  .pd-certs { padding: 28px 20px; }
  .pd-certs-inner { grid-template-columns: 1fr; gap: 14px; }
  .pd-docs-section { padding: 40px 20px; }
  .pd-related { padding: 40px 20px; }
  .pd-mobile-cta { display: block; }  /* show sticky CTA on tablet/mobile */
}
@media (max-width: 700px) {
  .pd-hero { padding: 24px 14px; }
  .pd-hero-main { height: 280px; }
  .pd-hero-thumbs { grid-template-columns: repeat(4, 1fr); }
  .pd-hero-thumb { height: 60px; }
  .pd-facts { grid-template-columns: 1fr; }
  .pd-body { padding: 40px 14px; }
  .pd-specs-section { padding: 36px 14px; }
  .pd-spec-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; }
  .pd-spec-row:nth-child(even) { background: rgba(0,0,0,0.02); }
  .pd-gallery-section { padding: 36px 14px; }
  .pd-gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 200px 200px 200px 200px;
  }
  .pd-gallery-tile:nth-child(1) {
    grid-column: span 1;
  }
  .pd-certs { padding: 24px 14px; }
  .pd-docs-section { padding: 36px 14px; }
  .pd-docs-grid { grid-template-columns: 1fr; }
  .pd-related { padding: 36px 14px; }
  .pd-related-grid { grid-template-columns: 1fr; }

  /* Add bottom padding to body so sticky CTA doesn't cover content */
  body { padding-bottom: 72px; }
}

/* ====================================================== */
/* ==========   PROPOSAL FORM ADDITIONS   ================ */
/* ====================================================== */
/* Reuses .fm-* form framework from FORMS_QUOTE_PROCUREMENT */
/* Adds: 4-step process strip + multi-select chip groups + checklist styling */

.prop-process {
  background: white;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  padding: 36px 60px;
}
.prop-process-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.prop-process-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  margin-bottom: 18px;
  text-align: center;
}
.prop-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.prop-steps::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--red) 100%);
  z-index: 0;
}
.prop-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.prop-step-num {
  width: 44px;
  height: 44px;
  background: white;
  border: 2px solid var(--blue);
  color: var(--blue);
  font-size: 0.92rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.prop-step:last-child .prop-step-num {
  border-color: var(--red);
  color: var(--red);
}
.prop-step h4 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.prop-step p {
  font-size: 0.76rem;
  color: var(--gray-600);
  line-height: 1.5;
  max-width: 200px;
}

/* Multi-select chip group (used for divisions) */
.fm-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fm-chip-option {
  position: relative;
  cursor: pointer;
}
.fm-chip-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.fm-chip-option .chip-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--canvas);
  border: 1px solid var(--gray-200);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gray-700);
  letter-spacing: -0.005em;
  transition: all .15s;
  user-select: none;
}
.fm-chip-option .chip-label:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.fm-chip-option input[type="checkbox"]:checked + .chip-label {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
}
.fm-chip-option input[type="checkbox"]:focus-visible + .chip-label {
  box-shadow: 0 0 0 3px rgba(0, 84, 166, 0.2);
}

/* Compliance checklist — vertical list of checkboxes with labels */
.fm-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fm-checklist-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 16px;
  background: var(--canvas);
  border: 1px solid var(--gray-100);
  cursor: pointer;
  transition: all .15s;
}
.fm-checklist-item:hover {
  border-color: var(--blue);
  background: white;
}
.fm-checklist-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--blue);
  flex-shrink: 0;
  cursor: pointer;
}
.fm-checklist-item .item-text {
  flex: 1;
  font-size: 0.86rem;
  color: var(--gray-800);
  line-height: 1.5;
  cursor: pointer;
}
.fm-checklist-item .item-text strong {
  color: var(--gray-900);
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}
.fm-checklist-item .item-text .item-hint {
  font-size: 0.78rem;
  color: var(--gray-600);
  font-weight: 400;
}

/* "Highlighted" final consent block */
.fm-highlight-consent {
  background: rgba(0, 84, 166, 0.04);
  border: 1px solid rgba(0, 84, 166, 0.15);
  padding: 16px 20px;
  border-left: 3px solid var(--blue);
}
.fm-highlight-consent .fm-check label {
  font-size: 0.85rem;
}

/* Proposal responsive */
@media (max-width: 1024px) {
  .prop-process { padding: 28px 20px; }
  .prop-steps { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .prop-steps::before { display: none; }
}
@media (max-width: 700px) {
  .prop-process { padding: 24px 14px; }
  .prop-steps { grid-template-columns: 1fr; gap: 18px; }
}

/* ====================================================== */
/* ==========   LEGAL / UTILITY PAGES   ================== */
/* ====================================================== */

/* Legal hero — compact */
.lg-hero {
  background: white;
  padding: 50px 60px 40px;
}
.lg-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.lg-hero .eyebrow { margin-bottom: 14px; }
.lg-hero h1 {
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 14px;
}
.lg-hero h1 .red { color: var(--red); }
.lg-hero p.lg-lead {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 720px;
  margin-bottom: 18px;
}
.lg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  font-size: 0.82rem;
  color: var(--gray-500);
}
.lg-meta strong { color: var(--gray-900); font-weight: 700; }
.lg-meta-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.lg-meta-btn {
  padding: 8px 14px;
  background: var(--canvas);
  border: 1px solid var(--gray-200);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gray-700);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
  text-decoration: none;
}
.lg-meta-btn:hover {
  background: white;
  border-color: var(--blue);
  color: var(--blue);
}

/* Legal main: TOC + prose body */
.lg-main {
  background: var(--canvas);
  padding: 50px 60px 80px;
  border-top: 1px solid var(--gray-100);
}
.lg-main-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 50px;
  align-items: start;
}
.lg-toc {
  position: sticky;
  top: 120px;
  background: white;
  border: 1px solid var(--gray-100);
  padding: 18px 0 18px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}
.lg-toc-head {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 800;
  padding: 0 22px 14px;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 8px;
}
.lg-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: lg-toc-counter;
}
.lg-toc li {
  counter-increment: lg-toc-counter;
}
.lg-toc a {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 9px 22px;
  font-size: 0.84rem;
  color: var(--gray-700);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all .15s;
  line-height: 1.4;
}
.lg-toc a::before {
  content: counter(lg-toc-counter, decimal-leading-zero);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gray-400);
  font-variant-numeric: tabular-nums;
}
.lg-toc a:hover {
  background: var(--canvas);
  color: var(--blue);
}
.lg-toc a.active {
  background: var(--canvas);
  color: var(--blue);
  border-left-color: var(--red);
  font-weight: 600;
}
.lg-toc a.active::before { color: var(--red); }

.lg-body {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 50px 60px 60px;
  min-width: 0;
}
.lg-body .prose h2 {
  scroll-margin-top: 140px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--gray-900);
  margin-top: 40px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
}
.lg-body .prose > h2:first-child { margin-top: 0; }
.lg-body .prose h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-top: 24px;
  margin-bottom: 10px;
}

.lg-footer-note {
  margin-top: 40px;
  padding: 22px 24px;
  background: var(--canvas);
  border-left: 3px solid var(--blue);
  font-size: 0.86rem;
  color: var(--gray-700);
  line-height: 1.65;
}
.lg-footer-note strong {
  color: var(--gray-900);
  font-weight: 700;
}
.lg-footer-note a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Print styles */
@media print {
  .site-header, .site-footer, .lg-toc, .lg-meta-actions { display: none !important; }
  .lg-main { padding: 20px 0; background: white; border: none; }
  .lg-main-inner { grid-template-columns: 1fr; gap: 0; max-width: none; }
  .lg-body { border: none; padding: 0; }
  .lg-hero { padding: 0 0 20px; }
  body { font-size: 11pt; line-height: 1.5; }
  a { color: inherit; text-decoration: none; }
  .prose h2 { page-break-after: avoid; }
}

/* ============ SITEMAP PAGE ============ */
.sm-section {
  background: var(--canvas);
  padding: 50px 60px 70px;
}
.sm-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.sm-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.sm-col {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 26px 28px 28px;
}
.sm-col h3 {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 800;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--red);
  margin-bottom: 16px;
}
.sm-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sm-col li a {
  font-size: 0.86rem;
  color: var(--gray-700);
  text-decoration: none;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.005em;
}
.sm-col li a:hover {
  color: var(--blue);
}
.sm-col li a:hover::before {
  content: "→";
  color: var(--red);
  font-weight: 700;
  margin-right: -2px;
}
.sm-col li.sm-section-head {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
}
.sm-col li.sm-section-head:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ============ 404 / 410 PAGES ============ */
.err-section {
  background: white;
  padding: 60px 60px 80px;
  min-height: 70vh;
  display: flex;
  align-items: center;
}
.err-inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}
.err-code {
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--red);
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.err-code .accent { color: var(--blue); }
.err-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  margin-bottom: 20px;
}
.err-title {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  line-height: 1.2;
  margin-bottom: 14px;
}
.err-title .red { color: var(--red); }
.err-text {
  font-size: 0.98rem;
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto 30px;
}

.err-search {
  max-width: 480px;
  margin: 0 auto 36px;
  position: relative;
}
.err-search input {
  width: 100%;
  padding: 14px 18px 14px 46px;
  background: var(--canvas);
  border: 1px solid var(--gray-200);
  font-family: inherit;
  font-size: 0.94rem;
  color: var(--gray-900);
  outline: none;
  transition: all .15s;
  text-align: left;
}
.err-search input:focus {
  background: white;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 84, 166, 0.08);
}
.err-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  pointer-events: none;
}

.err-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 24px;
}
.err-tile {
  background: var(--canvas);
  border: 1px solid var(--gray-100);
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.err-tile:hover {
  background: white;
  border-color: var(--blue);
  transform: translateY(-2px);
}
.err-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--red);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.err-tile:hover::before { width: 100%; }
.err-tile-icon {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
}
.err-tile-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
}
.err-tile-desc {
  font-size: 0.76rem;
  color: var(--gray-600);
  line-height: 1.45;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .lg-hero { padding: 40px 20px; }
  .lg-main { padding: 40px 20px 60px; }
  .lg-main-inner { grid-template-columns: 1fr; gap: 30px; }
  .lg-toc { position: static; max-height: none; }
  .lg-body { padding: 30px 24px; }
  .sm-section { padding: 40px 20px; }
  .sm-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .err-section { padding: 40px 20px 60px; }
  .err-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .lg-hero { padding: 32px 14px; }
  .lg-meta { gap: 14px; }
  .lg-meta-actions { width: 100%; margin-left: 0; }
  .lg-main { padding: 30px 14px 50px; }
  .lg-body { padding: 24px 18px; }
  .sm-section { padding: 32px 14px; }
  .sm-grid { grid-template-columns: 1fr; }
  .err-section { padding: 32px 14px 50px; }
  .err-tiles { grid-template-columns: 1fr; }
}

/* ====================================================== */
/* ==========   SIMPLE DROPDOWN (About menu)   =========== */
/* ====================================================== */
/* Compact alternative to .mega for menus with 4-6 items.
   Anchors directly below the parent <li> instead of spanning
   the full viewport width like the wide Divisions mega menu. */
.mega.mega-simple {
  /* Override position from .mega (which uses fixed for full-width) */
  position: absolute;
  top: 100%;
  left: 50%;
  right: auto;
  width: 220px;
  margin-left: -110px;       /* center the 220px panel under the link */
  /* Reset the entry-state transform so visibility transition stays consistent */
  transform: translateY(-8px);
}
.nav-links li:hover .mega.mega-simple,
.nav-links li.open .mega.mega-simple {
  transform: translateY(0);  /* override the parent rule for the simple panel */
}
.mega.mega-simple .mega-inner {
  padding: 0;
  display: block;            /* override the grid layout from .mega-inner */
  min-height: 0;
  max-width: none;
}
.mega-simple-list {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}
.mega-simple-list a {
  display: block;
  padding: 11px 24px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--gray-800);
  text-decoration: none;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border-left: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s, padding .15s;
}
.mega-simple-list a:hover {
  background: var(--canvas);
  color: var(--blue);
  border-left-color: var(--red);
  padding-left: 28px;
}
.mega-simple-foot {
  border-top: 1px solid var(--gray-100);
  padding: 12px 24px;
  background: var(--canvas);
}
.mega-simple-foot a {
  font-size: 0.78rem;
  color: var(--blue);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.mega-simple-foot a:hover { color: var(--red); }

/* ====================================================== */
/* ==========   EVENTS INDEX PAGE   ====================== */
/* ====================================================== */

/* Hero */
.ev-hero {
  background: white;
  padding: 50px 60px 40px;
}
.ev-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.ev-hero .eyebrow { margin-bottom: 14px; }
.ev-hero h1 {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 16px;
  max-width: 880px;
}
.ev-hero h1 .red { color: var(--red); }
.ev-hero p {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 700px;
}

/* Sticky filter bar */
.ev-filterbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: white;
  border-bottom: 1px solid var(--gray-200);
  padding: 14px 60px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
body.scrolled .ev-filterbar { top: 70px; }
.ev-filter-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
.ev-filter-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  white-space: nowrap;
}
.ev-filter-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ev-filter-right {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.ev-result-count {
  font-size: 0.82rem;
  color: var(--gray-600);
}
.ev-result-count strong {
  color: var(--gray-900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Asymmetric masonry grid */
.ev-grid-section {
  background: var(--canvas);
  padding: 40px 60px 60px;
}
.ev-grid-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.ev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
  gap: 10px;
}
.ev-card {
  position: relative;
  overflow: hidden;
  background: var(--gray-900);
  cursor: pointer;
  text-decoration: none;
  color: white;
  display: block;
  transition: transform .25s;
}
.ev-card:hover { transform: translateY(-3px); }
.ev-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.ev-card:hover img { transform: scale(1.06); }
.ev-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 35%,
    rgba(0,0,0,0.55) 75%,
    rgba(0, 62, 122, 0.85) 100%);
  pointer-events: none;
}
.ev-card-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 22px 22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ev-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.ev-card-cat {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--red);
  color: white;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ev-card-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-variant-numeric: tabular-nums;
}
.ev-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: white;
}
.ev-card-loc {
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Mixed sizing variants — drives the asymmetric layout */
.ev-card.ev-feature {
  grid-column: span 2;
  grid-row: span 2;
}
.ev-card.ev-feature .ev-card-title {
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.ev-card.ev-wide {
  grid-column: span 2;
}
.ev-card.ev-tall {
  grid-row: span 2;
}

/* Empty state */
.ev-empty {
  background: white;
  padding: 60px 40px;
  text-align: center;
  border: 1px dashed var(--gray-200);
  display: none;
  margin-top: 20px;
}
.ev-empty.is-visible { display: block; }

/* Pagination — reuses .px-pagination styles already defined */

/* Responsive */
@media (max-width: 1100px) {
  .ev-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
  }
  .ev-card.ev-feature {
    grid-column: span 2;
    grid-row: span 2;
  }
  .ev-card.ev-wide {
    grid-column: span 2;
  }
  .ev-filter-inner { grid-template-columns: 1fr; gap: 12px; }
  .ev-filter-right { justify-content: flex-start; }
}
@media (max-width: 1024px) {
  .ev-hero { padding: 40px 20px; }
  .ev-filterbar { padding: 12px 20px; }
  .ev-grid-section { padding: 32px 20px 50px; }
}
@media (max-width: 700px) {
  .ev-hero { padding: 32px 14px; }
  .ev-filterbar { padding: 10px 14px; }
  .ev-grid-section { padding: 24px 14px 40px; }
  .ev-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
    gap: 8px;
  }
  .ev-card.ev-feature,
  .ev-card.ev-wide,
  .ev-card.ev-tall {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* ====================================================== */
/* ==========   SINGLE EVENT PAGE   ====================== */
/* ====================================================== */

/* Hero — asymmetric: image left, meta right */
.evd-hero {
  background: white;
  padding: 40px 60px 50px;
  border-bottom: 1px solid var(--gray-100);
}
.evd-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 50px;
  align-items: stretch;
}
.evd-hero-image {
  position: relative;
  height: 520px;
  overflow: hidden;
  background: var(--gray-900);
}
.evd-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.evd-hero-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.evd-cat {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--red);
  color: white;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  align-self: flex-start;
}
.evd-hero-meta h1 {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--gray-900);
}
.evd-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.evd-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--gray-700);
}
.evd-meta-item svg {
  color: var(--blue);
  flex-shrink: 0;
}
.evd-meta-item strong {
  color: var(--gray-900);
  font-weight: 700;
}
.evd-hero-meta p.evd-summary {
  font-size: 0.96rem;
  color: var(--gray-600);
  line-height: 1.65;
}
.evd-share {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.evd-share-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  margin-right: 6px;
}
.evd-share a {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--canvas);
  color: var(--gray-700);
  text-decoration: none;
  transition: all .15s;
  border: 1px solid var(--gray-100);
}
.evd-share a:hover {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}

/* Body context */
.evd-body {
  background: white;
  padding: 50px 60px;
}
.evd-body-inner {
  max-width: 900px;
  margin: 0 auto;
}

/* Highlights strip */
.evd-highlights {
  background: var(--canvas);
  padding: 36px 60px;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.evd-highlights-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: center;
}
.evd-highlights-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-600);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}
.evd-highlights-label::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--red);
}
.evd-highlights-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.evd-highlight {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 2px solid var(--red);
}
.evd-highlight-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.evd-highlight-lbl {
  font-size: 0.78rem;
  color: var(--gray-600);
  line-height: 1.4;
}

/* Photo gallery */
.evd-gallery-section {
  background: white;
  padding: 60px 60px;
  border-top: 1px solid var(--gray-100);
}
.evd-gallery-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.evd-gallery-head {
  margin-bottom: 28px;
}
.evd-gallery-head .eyebrow { margin-bottom: 10px; }
.evd-gallery-head h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
}
.evd-gallery-head h2 .red { color: var(--red); }

.evd-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
  gap: 8px;
}
.evd-photo {
  position: relative;
  overflow: hidden;
  background: var(--gray-100);
  cursor: zoom-in;
}
.evd-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.evd-photo:hover img { transform: scale(1.04); }
.evd-photo.evd-photo-wide { grid-column: span 2; }
.evd-photo.evd-photo-tall { grid-row: span 2; }
.evd-photo.evd-photo-large { grid-column: span 2; grid-row: span 2; }
.evd-photo-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 16px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.7));
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
  transform: translateY(100%);
  transition: transform .25s ease;
}
.evd-photo:hover .evd-photo-caption {
  transform: translateY(0);
}

/* Lightbox */
.evd-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s ease;
}
.evd-lightbox.is-open {
  display: flex;
  opacity: 1;
}
.evd-lightbox-img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  display: block;
  user-select: none;
}
.evd-lightbox-caption {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  padding: 18px 24px;
  text-align: center;
  color: white;
  font-size: 0.92rem;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.7));
  pointer-events: none;
}
.evd-lightbox-close,
.evd-lightbox-prev,
.evd-lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.1);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
  backdrop-filter: blur(8px);
}
.evd-lightbox-close:hover,
.evd-lightbox-prev:hover,
.evd-lightbox-next:hover {
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.4);
}
.evd-lightbox-close { top: 24px; right: 24px; }
.evd-lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.evd-lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }
.evd-lightbox-counter {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  background: rgba(0,0,0,0.4);
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,0.15);
}
body.lightbox-open { overflow: hidden; }

/* Related events strip */
.evd-related {
  background: var(--canvas);
  padding: 50px 60px;
  border-top: 1px solid var(--gray-100);
}
.evd-related-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.evd-related-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
  margin-bottom: 24px;
}
.evd-related-head h3 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--gray-900);
}
.evd-related-head h3 .red { color: var(--red); }
.evd-related-head .more {
  font-size: 0.82rem;
  color: var(--blue);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.evd-related-head .more:hover { color: var(--red); }
.evd-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 10px;
}

/* Single event responsive */
@media (max-width: 1100px) {
  .evd-hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .evd-hero-image { height: 400px; }
  .evd-highlights-inner { grid-template-columns: 1fr; gap: 16px; }
  .evd-highlights-grid { grid-template-columns: repeat(2, 1fr); }
  .evd-gallery { grid-auto-rows: 220px; }
  .evd-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .evd-hero { padding: 32px 20px; }
  .evd-body { padding: 40px 20px; }
  .evd-highlights { padding: 28px 20px; }
  .evd-gallery-section { padding: 40px 20px; }
  .evd-related { padding: 40px 20px; }
}
@media (max-width: 700px) {
  .evd-hero { padding: 24px 14px; }
  .evd-hero-image { height: 280px; }
  .evd-body { padding: 32px 14px; }
  .evd-highlights { padding: 24px 14px; }
  .evd-highlights-grid { grid-template-columns: 1fr; }
  .evd-gallery-section { padding: 32px 14px; }
  .evd-gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }
  .evd-photo.evd-photo-wide,
  .evd-photo.evd-photo-tall,
  .evd-photo.evd-photo-large {
    grid-column: span 1;
    grid-row: span 1;
  }
  .evd-related { padding: 32px 14px; }
  .evd-related-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }
  .evd-related-head { grid-template-columns: 1fr; gap: 12px; }
  .evd-lightbox-close,
  .evd-lightbox-prev,
  .evd-lightbox-next { width: 40px; height: 40px; }
  .evd-lightbox-close { top: 14px; right: 14px; }
  .evd-lightbox-prev { left: 8px; }
  .evd-lightbox-next { right: 8px; }
}

/* ====================================================== */
/* ==========   LOCATIONS INDEX   ======================== */
/* ====================================================== */

/* Hero */
.lx-hero {
  background: white;
  padding: 50px 60px 40px;
}
.lx-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: end;
}
.lx-hero-left .eyebrow { margin-bottom: 14px; }
.lx-hero-left h1 {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 16px;
}
.lx-hero-left h1 .red { color: var(--red); }
.lx-hero-left p {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 540px;
}
.lx-hero-right {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.lx-hero-stat {
  padding-left: 18px;
  border-left: 2px solid var(--red);
}
.lx-hero-stat .n {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.lx-hero-stat .lbl {
  font-size: 0.78rem;
  color: var(--gray-600);
  line-height: 1.4;
}

/* Map section */
.lx-map-section {
  background: var(--canvas);
  padding: 50px 60px;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.lx-map-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.lx-map-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.lx-map-label::before,
.lx-map-label::after {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--red);
}
.lx-map-wrap {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 30px;
  align-items: stretch;
  text-align: left;
}
.lx-map {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 24px;
  position: relative;
}
.lx-map svg {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Country shapes — operating countries highlighted, others muted */
.lx-map .country {
  fill: #E8ECF2;
  stroke: #C8D2E0;
  stroke-width: 0.5;
  transition: fill .2s;
}
.lx-map .country.is-operating {
  fill: rgba(0, 84, 166, 0.18);
  stroke: rgba(0, 84, 166, 0.4);
  stroke-width: 0.7;
}
.lx-map .country.is-operating:hover {
  fill: rgba(0, 84, 166, 0.28);
}

/* Country labels for operating countries only */
.lx-map-country-label {
  font-size: 9px;
  font-weight: 700;
  fill: var(--blue-dark);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0.7;
}

/* Numbered city pins */
.lx-map-pin {
  cursor: pointer;
  transition: transform .2s;
  transform-origin: center;
  transform-box: fill-box;
}
.lx-map-pin:hover {
  transform: scale(1.18);
}
.lx-map-pin .pin-circle {
  fill: var(--blue);
  stroke: white;
  stroke-width: 2.5;
  filter: drop-shadow(0 2px 5px rgba(0, 84, 166, 0.4));
}
.lx-map-pin.is-hq .pin-circle {
  fill: var(--red);
  filter: drop-shadow(0 2px 5px rgba(215, 25, 32, 0.45));
}
.lx-map-pin .pin-pulse {
  fill: var(--blue);
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: lxPulse 2.5s infinite;
}
.lx-map-pin.is-hq .pin-pulse {
  fill: var(--red);
}
.lx-map-pin-num {
  font-size: 10px;
  font-weight: 800;
  fill: white;
  pointer-events: none;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
@keyframes lxPulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Numbered legend beside map */
.lx-map-key {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.lx-map-key-head {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--gray-100);
}
.lx-map-key-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lx-map-key-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 8px;
  text-decoration: none;
  color: inherit;
  border-left: 2px solid transparent;
  transition: background .15s, border-color .15s, padding .15s;
}
.lx-map-key-item:hover {
  background: var(--canvas);
  border-left-color: var(--red);
  padding-left: 12px;
}
.lx-map-key-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  font-size: 0.82rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.lx-map-key-item.is-hq .lx-map-key-num {
  background: var(--red);
}
.lx-map-key-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.lx-map-key-city {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lx-key-hq-tag {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--red);
  color: white;
  padding: 2px 6px;
}
.lx-map-key-country {
  font-size: 0.78rem;
  color: var(--gray-600);
}

.lx-map-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 24px;
  font-size: 0.82rem;
  color: var(--gray-600);
}
.lx-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.lx-map-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px var(--gray-200);
}
.lx-map-legend-dot.dot-hq { background: var(--red); }
.lx-map-legend-dot.dot-office { background: var(--blue); }

/* Subsidiary cards */
.lx-cards-section {
  background: white;
  padding: 60px 60px 70px;
}
.lx-cards-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.lx-cards-head {
  margin-bottom: 30px;
}
.lx-cards-head .eyebrow { margin-bottom: 10px; }
.lx-cards-head h2 {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
}
.lx-cards-head h2 .red { color: var(--red); }
.lx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.lx-card {
  background: white;
  border: 1px solid var(--gray-100);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all .25s;
}
.lx-card:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 84, 166, 0.08);
}
.lx-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: var(--red);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
  z-index: 2;
}
.lx-card:hover::before { width: 100%; }
.lx-card-img {
  width: 100%;
  height: 180px;
  background: var(--canvas);
  position: relative;
  overflow: hidden;
}
.lx-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.lx-card:hover .lx-card-img img { transform: scale(1.05); }
.lx-card-flag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-900);
}
.lx-card-flag span:first-child { font-size: 1rem; }
.lx-card-hq-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--red);
  color: white;
  padding: 4px 10px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lx-card-body {
  padding: 18px 22px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lx-card-city {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
}
.lx-card-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.lx-card-caps {
  font-size: 0.84rem;
  color: var(--gray-600);
  line-height: 1.55;
}
.lx-card-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
  font-size: 0.78rem;
  color: var(--gray-700);
}
.lx-card-foot .meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.lx-card-foot .meta svg {
  color: var(--blue);
  flex-shrink: 0;
}
.lx-card-foot .arrow {
  margin-left: auto;
  color: var(--blue);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lx-card:hover .lx-card-foot .arrow { color: var(--red); }

/* Regional capability strip */
.lx-cap-strip {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: white;
  padding: 36px 60px;
  position: relative;
  overflow: hidden;
}
.lx-cap-strip::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(215, 25, 32, 0.16) 0%, transparent 70%);
  pointer-events: none;
}
.lx-cap-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  position: relative;
  z-index: 1;
}
.lx-cap-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
  border-left: 2px solid rgba(255,255,255,0.25);
}
.lx-cap-item:first-child { border-left-color: #FF9AA0; }
.lx-cap-item .n {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: white;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.lx-cap-item .lbl {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.4;
}

/* CTA band — reuses .pc-final-cta */

/* Responsive */
@media (max-width: 1100px) {
  .lx-hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .lx-map-wrap { grid-template-columns: 1fr; }
  .lx-grid { grid-template-columns: repeat(2, 1fr); }
  .lx-cap-inner { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 1024px) {
  .lx-hero { padding: 40px 20px; }
  .lx-map-section { padding: 36px 20px; }
  .lx-cards-section { padding: 40px 20px 50px; }
  .lx-cap-strip { padding: 28px 20px; }
  .lx-hero-right { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .lx-hero { padding: 32px 14px; }
  .lx-hero-right { grid-template-columns: 1fr; }
  .lx-map-section { padding: 28px 14px; }
  .lx-map { padding: 24px 14px; }
  .lx-map-legend { flex-direction: column; gap: 8px; align-items: center; }
  .lx-cards-section { padding: 32px 14px 40px; }
  .lx-grid { grid-template-columns: 1fr; }
  .lx-cap-strip { padding: 24px 14px; }
  .lx-cap-inner { grid-template-columns: 1fr; gap: 14px; }
}

/* ====================================================== */
/* ==========   LOCATION DETAIL   ======================== */
/* ====================================================== */

/* Hero — asymmetric: photo left, meta right */
.ld-hero {
  background: white;
  padding: 40px 60px 50px;
  border-bottom: 1px solid var(--gray-100);
}
.ld-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 50px;
  align-items: stretch;
}
.ld-hero-image {
  position: relative;
  height: 480px;
  overflow: hidden;
  background: var(--gray-900);
}
.ld-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ld-hero-flag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
}
.ld-hero-flag .flag-em { font-size: 1.1rem; }
.ld-hero-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.ld-hero-meta .eyebrow { margin-bottom: 0; }
.ld-hero-meta h1 {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--gray-900);
}
.ld-hero-meta h1 .red { color: var(--red); }
.ld-hero-summary {
  font-size: 0.96rem;
  color: var(--gray-600);
  line-height: 1.65;
}
.ld-quick-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
}
.ld-quick-fact {
  background: white;
  padding: 14px 16px;
}
.ld-quick-fact .label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  margin-bottom: 4px;
  display: block;
}
.ld-quick-fact .value {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.ld-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Tender qualification panel — credibility */
.ld-qualification {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: white;
  padding: 50px 60px;
  position: relative;
  overflow: hidden;
}
.ld-qualification::before {
  content: "";
  position: absolute;
  top: -50px; right: -50px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(215, 25, 32, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.ld-qual-inner {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 60px;
  align-items: start;
}
.ld-qual-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.ld-qual-label::before {
  content: "";
  width: 24px; height: 2px;
  background: var(--red);
}
.ld-qualification h2 {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 14px;
}
.ld-qualification h2 .accent { color: #FF9AA0; }
.ld-qual-intro {
  font-size: 0.94rem;
  opacity: 0.85;
  line-height: 1.65;
}
.ld-qual-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.15);
}
.ld-qual-item {
  background: rgba(0, 62, 122, 0.6);
  padding: 16px 20px;
  backdrop-filter: blur(6px);
}
.ld-qual-item .label {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  font-weight: 700;
  margin-bottom: 4px;
  display: block;
}
.ld-qual-item .value {
  font-size: 0.9rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.005em;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* Body section */
.ld-body {
  background: white;
  padding: 60px 60px;
  border-bottom: 1px solid var(--gray-100);
}
.ld-body-inner {
  max-width: 900px;
  margin: 0 auto;
}

/* Capability matrix */
.ld-matrix {
  background: var(--canvas);
  padding: 60px 60px;
}
.ld-matrix-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.ld-matrix-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
  margin-bottom: 24px;
}
.ld-matrix-head h2 {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 6px;
}
.ld-matrix-head h2 .red { color: var(--red); }
.ld-matrix-head p {
  color: var(--gray-600);
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 640px;
}
.ld-matrix-legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--gray-600);
}
.ld-matrix-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ld-matrix-legend-marker {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.ld-matrix-legend-marker.local {
  background: var(--blue);
}
.ld-matrix-legend-marker.mobilized {
  background: white;
  border: 2px solid var(--blue);
}
.ld-matrix-legend-marker.unavailable {
  background: var(--gray-200);
  border: 1px solid var(--gray-300);
}
.ld-matrix-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gray-100);
  border: 1px solid var(--gray-100);
}
.ld-matrix-cell {
  background: white;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  position: relative;
}
.ld-matrix-marker {
  width: 14px;
  height: 14px;
  margin-top: 4px;
  flex-shrink: 0;
}
.ld-matrix-marker.local {
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 84, 166, 0.12);
}
.ld-matrix-marker.mobilized {
  background: white;
  border: 2px solid var(--blue);
}
.ld-matrix-marker.unavailable {
  background: var(--gray-200);
  border: 1px solid var(--gray-300);
}
.ld-matrix-text {
  flex: 1;
  min-width: 0;
}
.ld-matrix-name {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin-bottom: 2px;
}
.ld-matrix-state {
  font-size: 0.7rem;
  color: var(--gray-500);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.ld-matrix-cell.unavailable .ld-matrix-name {
  color: var(--gray-500);
}

/* Featured local OEMs strip */
.ld-oems {
  background: white;
  padding: 50px 60px;
  border-top: 1px solid var(--gray-100);
}
.ld-oems-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.ld-oems-head {
  margin-bottom: 24px;
}
.ld-oems-head h3 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--gray-900);
}
.ld-oems-head h3 .red { color: var(--red); }
.ld-oems-head p {
  font-size: 0.88rem;
  color: var(--gray-600);
  line-height: 1.55;
  margin-top: 4px;
  max-width: 640px;
}
.ld-oems-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.ld-oem-tile {
  background: var(--canvas);
  border: 1px solid var(--gray-100);
  padding: 22px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  height: 90px;
  transition: all .2s;
}
.ld-oem-tile:hover {
  background: white;
  border-color: var(--blue);
  transform: translateY(-2px);
}
.ld-oem-tile img {
  max-width: 100%;
  max-height: 50px;
  width: auto;
  object-fit: contain;
}
.ld-oem-tile-fb {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--blue);
  text-align: center;
  letter-spacing: -0.01em;
}

/* Office details + map */
.ld-office {
  background: var(--canvas);
  padding: 60px 60px;
  border-top: 1px solid var(--gray-100);
}
.ld-office-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
  align-items: stretch;
}
.ld-office-details {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ld-office-details h3 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--gray-900);
  margin-top: 4px;
}
.ld-office-details h3 .red { color: var(--red); }
.ld-office-section {
  padding-top: 18px;
  border-top: 1px solid var(--gray-200);
}
.ld-office-section:first-of-type {
  border-top: none;
  padding-top: 0;
}
.ld-office-label {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}
.ld-office-value {
  font-size: 0.92rem;
  color: var(--gray-900);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.005em;
}
.ld-office-value a {
  color: var(--blue);
  text-decoration: none;
}
.ld-office-value a:hover { color: var(--red); }
.ld-office-emergency {
  background: rgba(215, 25, 32, 0.06);
  border-left: 3px solid var(--red);
  padding: 12px 16px;
}
.ld-office-emergency .ld-office-label { color: var(--red); }
.ld-office-emergency .ld-office-value {
  color: var(--red-dark);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.ld-office-map {
  background: white;
  border: 1px solid var(--gray-100);
  height: 100%;
  min-height: 400px;
  position: relative;
  overflow: hidden;
}
.ld-office-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.ld-office-map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(135deg, #F0F2F7 0%, #E0E5ED 100%);
  color: var(--gray-500);
}

/* Local team */
.ld-team {
  background: white;
  padding: 60px 60px;
  border-top: 1px solid var(--gray-100);
}
.ld-team-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.ld-team-head {
  margin-bottom: 24px;
}
.ld-team-head h3 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--gray-900);
}
.ld-team-head h3 .red { color: var(--red); }
.ld-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.ld-team-card {
  background: var(--canvas);
  border: 1px solid var(--gray-100);
  padding: 22px 22px 22px 22px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: all .2s;
}
.ld-team-card:hover {
  background: white;
  border-color: var(--blue);
  transform: translateY(-2px);
}
.ld-team-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  overflow: hidden;
}
.ld-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ld-team-info {
  min-width: 0;
}
.ld-team-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.ld-team-role {
  font-size: 0.78rem;
  color: var(--gray-600);
  line-height: 1.4;
  margin-bottom: 6px;
}
.ld-team-li {
  font-size: 0.74rem;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

/* Featured projects strip — reuses .pj-card */

/* Open roles strip */
.ld-jobs {
  background: var(--canvas);
  padding: 50px 60px;
  border-top: 1px solid var(--gray-100);
}
.ld-jobs-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.ld-jobs-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
  margin-bottom: 22px;
}
.ld-jobs-head h3 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--gray-900);
}
.ld-jobs-head h3 .red { color: var(--red); }
.ld-jobs-head .more {
  font-size: 0.82rem;
  color: var(--blue);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}
.ld-jobs-head .more:hover { color: var(--red); }
.ld-jobs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ld-job-row {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 16px 22px;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 24px;
  align-items: center;
  text-decoration: none;
  color: inherit;
  transition: all .2s;
}
.ld-job-row:hover {
  border-color: var(--blue);
  background: white;
  transform: translateX(3px);
}
.ld-job-title {
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
}
.ld-job-meta {
  font-size: 0.78rem;
  color: var(--gray-600);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ld-job-meta svg { color: var(--blue); }
.ld-job-arrow {
  color: var(--blue);
  font-weight: 700;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ld-job-row:hover .ld-job-arrow { color: var(--red); }

/* Responsive */
@media (max-width: 1100px) {
  .ld-hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .ld-hero-image { height: 360px; }
  .ld-qual-inner { grid-template-columns: 1fr; gap: 30px; }
  .ld-matrix-grid { grid-template-columns: repeat(2, 1fr); }
  .ld-oems-grid { grid-template-columns: repeat(4, 1fr); }
  .ld-office-inner { grid-template-columns: 1fr; gap: 30px; }
  .ld-team-grid { grid-template-columns: repeat(2, 1fr); }
  .ld-job-row { grid-template-columns: 1fr auto; gap: 12px; }
  .ld-job-row .ld-job-meta { display: none; }
}
@media (max-width: 1024px) {
  .ld-hero { padding: 32px 20px; }
  .ld-qualification { padding: 36px 20px; }
  .ld-body { padding: 40px 20px; }
  .ld-matrix { padding: 40px 20px; }
  .ld-matrix-head { grid-template-columns: 1fr; gap: 16px; }
  .ld-oems { padding: 32px 20px; }
  .ld-office { padding: 40px 20px; }
  .ld-team { padding: 40px 20px; }
  .ld-jobs { padding: 32px 20px; }
}
@media (max-width: 700px) {
  .ld-hero { padding: 24px 14px; }
  .ld-hero-image { height: 240px; }
  .ld-quick-facts { grid-template-columns: 1fr; }
  .ld-qualification { padding: 32px 14px; }
  .ld-qual-grid { grid-template-columns: 1fr; }
  .ld-body { padding: 32px 14px; }
  .ld-matrix { padding: 32px 14px; }
  .ld-matrix-grid { grid-template-columns: 1fr; }
  .ld-oems { padding: 28px 14px; }
  .ld-oems-grid { grid-template-columns: repeat(2, 1fr); }
  .ld-office { padding: 32px 14px; }
  .ld-team { padding: 32px 14px; }
  .ld-team-grid { grid-template-columns: 1fr; }
  .ld-jobs { padding: 28px 14px; }
}

/* ====================================================== */
/* ==========   EQUIPMENT INDEX (.eq-*)   ================ */
/* ====================================================== */

/* Hero */
.eq-hero {
  background: white;
  padding: 50px 60px 40px;
}
.eq-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: end;
}
.eq-hero-left .eyebrow { margin-bottom: 14px; }
.eq-hero-left h1 {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 16px;
}
.eq-hero-left h1 .red { color: var(--red); }
.eq-hero-left p {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 540px;
}
.eq-hero-right {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.eq-hero-stat {
  padding-left: 18px;
  border-left: 2px solid var(--red);
}
.eq-hero-stat .n {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.eq-hero-stat .lbl {
  font-size: 0.78rem;
  color: var(--gray-600);
  line-height: 1.4;
}

/* Trust band — sets framing for "owned to operate, rentable when idle" */
.eq-framing {
  background: var(--canvas);
  padding: 32px 60px;
  border-bottom: 1px solid var(--gray-100);
}
.eq-framing-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: start;
}
.eq-framing-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}
.eq-framing-label::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--red);
}
.eq-framing-inner p {
  font-size: 0.94rem;
  color: var(--gray-700);
  line-height: 1.65;
  margin: 0;
}
.eq-framing-inner p strong {
  color: var(--gray-900);
  font-weight: 700;
}

/* Sticky filter bar */
.eq-filterbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: white;
  border-bottom: 1px solid var(--gray-200);
  padding: 14px 60px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
body.scrolled .eq-filterbar { top: 70px; }
.eq-filter-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
.eq-filter-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  white-space: nowrap;
}
.eq-filter-groups {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.eq-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.eq-filter-group-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gray-700);
  white-space: nowrap;
}
.eq-filter-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.eq-filter-right {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.eq-result-count {
  font-size: 0.82rem;
  color: var(--gray-600);
}
.eq-result-count strong {
  color: var(--gray-900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.eq-clear {
  background: none;
  border: none;
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.eq-clear:hover { color: var(--red); }

/* Available-toggle - more prominent than the chip */
.eq-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--canvas);
  border: 1px solid var(--gray-200);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gray-700);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.eq-toggle:hover {
  border-color: var(--gray-300);
}
.eq-toggle.is-on {
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.3);
}
.eq-toggle .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gray-300);
  transition: all .15s;
}
.eq-toggle.is-on .dot {
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

/* Equipment grid */
.eq-grid-section {
  background: var(--canvas);
  padding: 36px 60px 60px;
}
.eq-grid-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.eq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.eq-card {
  background: white;
  border: 1px solid var(--gray-100);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: all .25s;
}
.eq-card:hover {
  border-color: var(--blue);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 84, 166, 0.08);
}
.eq-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 3px;
  background: var(--red);
  transition: width .35s cubic-bezier(.2,.8,.2,1);
  z-index: 2;
}
.eq-card:hover::before { width: 100%; }
.eq-card-img {
  width: 100%;
  height: 200px;
  background: var(--canvas);
  position: relative;
  overflow: hidden;
}
.eq-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.eq-card:hover .eq-card-img img { transform: scale(1.05); }
.eq-card-type-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-dark);
}

/* Status badge — semantic colors */
.eq-status {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.eq-status .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.eq-status.is-available {
  background: rgba(34, 197, 94, 0.15);
  color: #15803d;
}
.eq-status.is-available .status-dot {
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
  animation: eqPulse 2s infinite;
}
.eq-status.is-in-field {
  background: rgba(0, 84, 166, 0.15);
  color: var(--blue-dark);
}
.eq-status.is-in-field .status-dot { background: var(--blue); }
.eq-status.is-rented {
  background: rgba(215, 25, 32, 0.12);
  color: var(--red-dark);
}
.eq-status.is-rented .status-dot { background: var(--red); }
.eq-status.is-maintenance {
  background: rgba(234, 179, 8, 0.18);
  color: #92400e;
}
.eq-status.is-maintenance .status-dot { background: #F59E0B; }

@keyframes eqPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.eq-card-body {
  padding: 18px 22px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.eq-card-model {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
}
.eq-card-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.eq-card-cap {
  font-size: 0.84rem;
  color: var(--gray-600);
  line-height: 1.55;
  margin-bottom: 4px;
}
.eq-card-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
  font-size: 0.78rem;
  color: var(--gray-700);
}
.eq-card-foot .meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.eq-card-foot .meta svg {
  color: var(--blue);
  flex-shrink: 0;
}
.eq-card-foot .arrow {
  margin-left: auto;
  color: var(--blue);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.eq-card:hover .eq-card-foot .arrow { color: var(--red); }

/* Rentable flag — inline visual hint */
.eq-rentable-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #15803d;
  background: rgba(34, 197, 94, 0.1);
  padding: 2px 6px;
  border-radius: 2px;
}

/* Empty state */
.eq-empty {
  background: white;
  padding: 60px 40px;
  text-align: center;
  border: 1px dashed var(--gray-200);
  display: none;
  margin-top: 14px;
}
.eq-empty.is-visible { display: block; }
.eq-empty h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.eq-empty p {
  font-size: 0.88rem;
  color: var(--gray-600);
}

/* Final CTA — reuses .pc-final-cta */

/* ====================================================== */
/* ==========   EQUIPMENT DETAIL (.ed-*)   =============== */
/* ====================================================== */

/* Hero — image gallery left, sticky meta right */
.ed-hero {
  background: white;
  padding: 30px 60px 50px;
}
.ed-hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 50px;
  align-items: start;
}
.ed-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ed-hero-image {
  width: 100%;
  height: 480px;
  background: var(--gray-900);
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
}
.ed-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ed-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.ed-thumb {
  height: 70px;
  background: var(--gray-100);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: opacity .2s;
  border: 2px solid transparent;
}
.ed-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ed-thumb.is-active {
  border-color: var(--blue);
}
.ed-thumb:not(.is-active) {
  opacity: 0.6;
}
.ed-thumb:not(.is-active):hover {
  opacity: 1;
}

/* Sticky meta panel */
.ed-meta {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ed-meta-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ed-meta-type {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
}
.ed-meta h1 {
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--gray-900);
}
.ed-meta-model {
  font-size: 0.92rem;
  color: var(--gray-600);
  font-weight: 500;
}

/* Live status block */
.ed-status-block {
  border: 1px solid var(--gray-100);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ed-status-block.is-available { border-left: 3px solid #22C55E; background: rgba(34, 197, 94, 0.04); }
.ed-status-block.is-in-field { border-left: 3px solid var(--blue); background: rgba(0, 84, 166, 0.04); }
.ed-status-block.is-rented { border-left: 3px solid var(--red); background: rgba(215, 25, 32, 0.03); }
.ed-status-block.is-maintenance { border-left: 3px solid #F59E0B; background: rgba(234, 179, 8, 0.05); }

.ed-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.005em;
}
.ed-status-row .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.ed-status-block.is-available .dot {
  background: #22C55E;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
  animation: eqPulse 2s infinite;
}
.ed-status-block.is-in-field .dot { background: var(--blue); }
.ed-status-block.is-rented .dot { background: var(--red); }
.ed-status-block.is-maintenance .dot { background: #F59E0B; }
.ed-status-note {
  font-size: 0.84rem;
  color: var(--gray-600);
  line-height: 1.5;
}

/* Quick facts list */
.ed-quick-facts {
  border: 1px solid var(--gray-100);
}
.ed-quick-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--gray-100);
  align-items: center;
}
.ed-quick-row:last-child { border-bottom: none; }
.ed-quick-row .label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
}
.ed-quick-row .value {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
}
.ed-quick-row .value a {
  color: var(--blue);
  text-decoration: none;
}
.ed-quick-row .value a:hover { color: var(--red); }

/* Primary CTAs */
.ed-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ed-actions .btn {
  width: 100%;
  justify-content: center;
}

/* Specifications table */
.ed-specs {
  background: var(--canvas);
  padding: 60px 60px;
  border-top: 1px solid var(--gray-100);
}
.ed-specs-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.ed-specs-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
  margin-bottom: 24px;
}
.ed-specs-head h2 {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
  margin-top: 6px;
}
.ed-specs-head h2 .red { color: var(--red); }
.ed-specs-table {
  background: white;
  border: 1px solid var(--gray-100);
}
.ed-specs-table .row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--gray-100);
  align-items: center;
}
.ed-specs-table .row:last-child { border-bottom: none; }
.ed-specs-table .row.section-head {
  background: var(--canvas);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--gray-700);
  grid-template-columns: 1fr;
  padding: 10px 22px;
}
.ed-specs-table .label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--gray-700);
}
.ed-specs-table .value {
  font-size: 0.86rem;
  color: var(--gray-900);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.ed-specs-table .value strong {
  font-weight: 700;
}

/* Maintenance/cert panel */
.ed-cert {
  background: white;
  padding: 50px 60px;
  border-top: 1px solid var(--gray-100);
}
.ed-cert-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.ed-cert-head {
  margin-bottom: 22px;
}
.ed-cert-head h3 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--gray-900);
}
.ed-cert-head h3 .red { color: var(--red); }
.ed-cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--gray-100);
  border: 1px solid var(--gray-100);
}
.ed-cert-cell {
  background: white;
  padding: 16px 20px;
}
.ed-cert-cell .label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  margin-bottom: 4px;
  display: block;
}
.ed-cert-cell .value {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.ed-cert-cell.warn .value {
  color: #92400e;
}
.ed-cert-cell.fresh .value {
  color: #15803d;
}

/* Track record (subtle credibility) */
.ed-track {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: white;
  padding: 36px 60px;
  position: relative;
  overflow: hidden;
}
.ed-track::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(215, 25, 32, 0.16) 0%, transparent 70%);
  pointer-events: none;
}
.ed-track-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.ed-track-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ed-track-label::before {
  content: "";
  width: 24px; height: 2px;
  background: var(--red);
}
.ed-track-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.ed-track-stat {
  padding-left: 18px;
  border-left: 2px solid rgba(255,255,255,0.25);
}
.ed-track-stat:first-child { border-left-color: #FF9AA0; }
.ed-track-stat .n {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: white;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.ed-track-stat .lbl {
  font-size: 0.84rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.4;
  margin-top: 4px;
}

/* Rental terms section (only renders when commercial_status allows) */
.ed-rental {
  background: white;
  padding: 60px 60px;
  border-top: 1px solid var(--gray-100);
}
.ed-rental-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.ed-rental-head {
  margin-bottom: 22px;
}
.ed-rental-head h3 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--gray-900);
}
.ed-rental-head h3 .red { color: var(--red); }
.ed-rental-head p {
  font-size: 0.92rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-top: 4px;
  max-width: 680px;
}
.ed-rental-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 30px;
  align-items: start;
}
.ed-rental-terms {
  background: var(--canvas);
  padding: 24px 28px;
}
.ed-rental-term {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-200);
  align-items: start;
}
.ed-rental-term:last-child { border-bottom: none; }
.ed-rental-term .label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--gray-700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ed-rental-term .value {
  font-size: 0.9rem;
  color: var(--gray-900);
  line-height: 1.55;
  font-weight: 500;
}
.ed-rental-cta-card {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: white;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.ed-rental-cta-card::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(215, 25, 32, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.ed-rental-cta-card h4 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}
.ed-rental-cta-card p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.55;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.ed-rental-cta-card .btn-white-outline {
  position: relative;
  z-index: 1;
}

/* Related equipment strip */
.ed-related {
  background: var(--canvas);
  padding: 50px 60px;
  border-top: 1px solid var(--gray-100);
}
.ed-related-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.ed-related-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
  margin-bottom: 22px;
}
.ed-related-head h3 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--gray-900);
}
.ed-related-head h3 .red { color: var(--red); }
.ed-related-head .more {
  font-size: 0.82rem;
  color: var(--blue);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}
.ed-related-head .more:hover { color: var(--red); }
.ed-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

/* Responsive */
@media (max-width: 1100px) {
  .eq-hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .eq-grid { grid-template-columns: repeat(2, 1fr); }
  .eq-framing-inner { grid-template-columns: 1fr; gap: 14px; }
  .eq-filter-inner { grid-template-columns: 1fr; gap: 14px; }
  .eq-filter-right { justify-content: flex-start; }

  .ed-hero-inner { grid-template-columns: 1fr; gap: 30px; }
  .ed-hero-image { height: 380px; }
  .ed-meta { position: static; }
  .ed-cert-grid { grid-template-columns: repeat(2, 1fr); }
  .ed-rental-grid { grid-template-columns: 1fr; }
  .ed-track-inner { grid-template-columns: 1fr; gap: 20px; }
  .ed-track-stats { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .ed-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
  .eq-hero { padding: 40px 20px; }
  .eq-framing { padding: 24px 20px; }
  .eq-filterbar { padding: 12px 20px; }
  .eq-grid-section { padding: 28px 20px 40px; }
  .ed-hero { padding: 24px 20px 40px; }
  .ed-specs { padding: 40px 20px; }
  .ed-specs-head { grid-template-columns: 1fr; gap: 12px; }
  .ed-cert { padding: 32px 20px; }
  .ed-track { padding: 28px 20px; }
  .ed-rental { padding: 40px 20px; }
  .ed-related { padding: 32px 20px; }
}
@media (max-width: 700px) {
  .eq-hero { padding: 32px 14px; }
  .eq-hero-right { grid-template-columns: 1fr; }
  .eq-framing { padding: 22px 14px; }
  .eq-filterbar { padding: 10px 14px; }
  .eq-grid-section { padding: 22px 14px 32px; }
  .eq-grid { grid-template-columns: 1fr; }
  .ed-hero { padding: 20px 14px 32px; }
  .ed-hero-image { height: 260px; }
  .ed-thumbs { grid-template-columns: repeat(4, 1fr); }
  .ed-specs { padding: 32px 14px; }
  .ed-specs-table .row { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }
  .ed-cert { padding: 28px 14px; }
  .ed-cert-grid { grid-template-columns: 1fr; }
  .ed-track { padding: 22px 14px; }
  .ed-track-stats { grid-template-columns: 1fr; gap: 12px; }
  .ed-rental { padding: 28px 14px; }
  .ed-rental-term { grid-template-columns: 1fr; gap: 4px; }
  .ed-related { padding: 28px 14px; }
  .ed-related-grid { grid-template-columns: 1fr; }
}

/* ====================================================== */
/* ==========   FORM RADIO GROUPS   ====================== */
/* ====================================================== */
.fm-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fm-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border: 1px solid var(--gray-200);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.fm-radio:hover {
  border-color: var(--blue);
  background: rgba(0, 84, 166, 0.02);
}
.fm-radio input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--blue);
}
.fm-radio span {
  font-size: 0.9rem;
  color: var(--gray-800);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.fm-radio:has(input:checked) {
  border-color: var(--blue);
  background: rgba(0, 84, 166, 0.04);
}
.fm-radio:has(input:checked) span {
  color: var(--blue-dark);
  font-weight: 600;
}

/* ====================================================== */
/* ==========   OPERATIONS CENTER (.oc-*)   ============== */
/* ====================================================== */

/* Cinematic hero — full-bleed photo with type overlay */
.oc-hero {
  position: relative;
  height: 80vh;
  min-height: 560px;
  max-height: 760px;
  background: var(--gray-900);
  overflow: hidden;
}
.oc-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85);
}
.oc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.15) 30%,
      rgba(0, 0, 0, 0.0) 55%,
      rgba(0, 30, 60, 0.85) 100%);
  pointer-events: none;
}
.oc-hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 50px 60px;
  color: white;
  max-width: 1400px;
  margin: 0 auto;
}
.oc-hero-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 8px 16px;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
}
.oc-hero-tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(215, 25, 32, 0.3);
}
.oc-hero-bottom {
  max-width: 920px;
}
.oc-hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: white;
  margin-bottom: 24px;
}
.oc-hero h1 .red {
  color: #FF7A80;
}
.oc-hero-lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: rgba(255,255,255,0.92);
  line-height: 1.55;
  font-weight: 400;
  max-width: 780px;
  margin-bottom: 26px;
  letter-spacing: -0.005em;
}
.oc-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.85);
}
.oc-hero-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.oc-hero-meta-item svg { color: rgba(255,255,255,0.65); }
.oc-hero-meta-sep {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.25);
}
.oc-scroll-cue {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: white;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.65;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.oc-scroll-cue::after {
  content: "";
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.5);
  animation: ocScrollLine 2s ease-in-out infinite;
}
@keyframes ocScrollLine {
  0%, 100% { transform: scaleY(1); transform-origin: top; opacity: 0.6; }
  50% { transform: scaleY(0.4); transform-origin: top; opacity: 1; }
}

/* Defining specs strip — high-impact under-hero band */
.oc-stats {
  background: white;
  padding: 36px 60px;
  border-bottom: 1px solid var(--gray-100);
}
.oc-stats-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.oc-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
  border-left: 2px solid var(--gray-200);
}
.oc-stat:first-child { border-left-color: var(--red); }
.oc-stat .n {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.oc-stat .lbl {
  font-size: 0.78rem;
  color: var(--gray-600);
  line-height: 1.4;
}

/* Capability narrative — long-form intro */
.oc-narrative {
  background: var(--canvas);
  padding: 70px 60px;
  border-bottom: 1px solid var(--gray-100);
}
.oc-narrative-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 60px;
  align-items: start;
}
.oc-narrative-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
}
.oc-narrative-label::before {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--red);
}
.oc-narrative-body h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--gray-900);
  margin-bottom: 22px;
}
.oc-narrative-body h2 .red { color: var(--red); }

/* Workshop walk-through — alternating photo + content blocks */
.oc-workshops {
  background: white;
  padding: 70px 60px 30px;
}
.oc-workshops-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.oc-workshops-head {
  margin-bottom: 50px;
  max-width: 700px;
}
.oc-workshops-head .eyebrow { margin-bottom: 12px; }
.oc-workshops-head h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  line-height: 1.2;
}
.oc-workshops-head h2 .red { color: var(--red); }

.oc-workshop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 70px;
}
.oc-workshop:last-child { margin-bottom: 0; }
.oc-workshop.is-flipped {
  direction: rtl;
}
.oc-workshop.is-flipped > * {
  direction: ltr;
}
.oc-workshop-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--gray-100);
}
.oc-workshop-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.oc-workshop:hover .oc-workshop-image img { transform: scale(1.03); }
.oc-workshop-num {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--red);
  color: white;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.oc-workshop-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.oc-workshop-tag {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 700;
}
.oc-workshop-content h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  line-height: 1.2;
}
.oc-workshop-content h3 .red { color: var(--red); }
.oc-workshop-content p {
  font-size: 0.96rem;
  color: var(--gray-700);
  line-height: 1.65;
}
.oc-workshop-caps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--gray-100);
}
.oc-workshop-cap {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.88rem;
  color: var(--gray-700);
  line-height: 1.5;
}
.oc-workshop-cap::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--red);
  margin-top: 7px;
}
.oc-workshop-cap strong {
  color: var(--gray-900);
  font-weight: 700;
}

/* Yard / laydown section — wide card */
.oc-yard {
  background: var(--canvas);
  padding: 70px 60px;
  border-top: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
}
.oc-yard-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 50px;
  align-items: stretch;
}
.oc-yard-image {
  height: 460px;
  overflow: hidden;
  background: var(--gray-100);
}
.oc-yard-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.oc-yard-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.oc-yard-content .eyebrow { margin-bottom: 0; }
.oc-yard-content h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  line-height: 1.2;
}
.oc-yard-content h2 .red { color: var(--red); }
.oc-yard-content p {
  font-size: 0.96rem;
  color: var(--gray-700);
  line-height: 1.65;
}
.oc-yard-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
  margin-top: 10px;
}
.oc-yard-spec {
  background: white;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.oc-yard-spec .label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
}
.oc-yard-spec .value {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.005em;
}

/* Photo gallery — asymmetric grid (reuses event lightbox logic) */
.oc-gallery-section {
  background: white;
  padding: 70px 60px;
}
.oc-gallery-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.oc-gallery-head {
  margin-bottom: 30px;
  max-width: 700px;
}
.oc-gallery-head .eyebrow { margin-bottom: 12px; }
.oc-gallery-head h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--gray-900);
}
.oc-gallery-head h2 .red { color: var(--red); }

/* Reuse evd-photo, evd-photo-wide, etc. for gallery */
.oc-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 240px;
  gap: 8px;
}

/* Capability matrix — fabrication & service specifics */
.oc-matrix {
  background: var(--canvas);
  padding: 70px 60px;
  border-top: 1px solid var(--gray-100);
}
.oc-matrix-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.oc-matrix-head {
  margin-bottom: 30px;
  max-width: 720px;
}
.oc-matrix-head .eyebrow { margin-bottom: 12px; }
.oc-matrix-head h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  margin-bottom: 14px;
}
.oc-matrix-head h2 .red { color: var(--red); }
.oc-matrix-head p {
  color: var(--gray-600);
  font-size: 0.94rem;
  line-height: 1.65;
}
.oc-matrix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.oc-matrix-card {
  background: white;
  border: 1px solid var(--gray-100);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.oc-matrix-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--red);
  transition: width .35s ease;
}
.oc-matrix-card:hover::before { width: 100%; }
.oc-matrix-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
}
.oc-matrix-card-icon {
  width: 32px;
  height: 32px;
  background: var(--canvas);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.oc-matrix-card-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: -0.01em;
}
.oc-matrix-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.oc-matrix-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 4px 0;
  font-size: 0.84rem;
  border-bottom: 1px dashed var(--gray-100);
}
.oc-matrix-row:last-child { border-bottom: none; }
.oc-matrix-row .key { color: var(--gray-700); }
.oc-matrix-row .val {
  color: var(--gray-900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

/* Team summary */
.oc-team {
  background: white;
  padding: 60px 60px;
  border-top: 1px solid var(--gray-100);
}
.oc-team-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.oc-team-content .eyebrow { margin-bottom: 12px; }
.oc-team-content h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--gray-900);
  line-height: 1.2;
  margin-bottom: 16px;
}
.oc-team-content h2 .red { color: var(--red); }
.oc-team-content p {
  font-size: 0.96rem;
  color: var(--gray-700);
  line-height: 1.65;
}
.oc-team-counts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.oc-team-count {
  background: var(--canvas);
  border-left: 3px solid var(--red);
  padding: 18px 22px;
}
.oc-team-count .n {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gray-900);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.oc-team-count .lbl {
  font-size: 0.78rem;
  color: var(--gray-600);
  line-height: 1.4;
}

/* Accreditations strip */
.oc-accreditations {
  background: linear-gradient(135deg, var(--blue-dark) 0%, var(--blue) 100%);
  color: white;
  padding: 60px 60px;
  position: relative;
  overflow: hidden;
}
.oc-accreditations::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(215, 25, 32, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.oc-accreditations-inner {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 60px;
  align-items: start;
}
.oc-accreditations-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.oc-accreditations-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.oc-accreditations-label::before {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--red);
}
.oc-accreditations-head h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: white;
}
.oc-accreditations-head h2 .accent { color: #FF9AA0; }
.oc-accreditations-head p {
  font-size: 0.94rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.85);
}
.oc-accreditations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.15);
}
.oc-accreditation {
  background: rgba(0, 62, 122, 0.6);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  backdrop-filter: blur(6px);
}
.oc-accreditation .label {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  font-weight: 700;
}
.oc-accreditation .value {
  font-size: 0.9rem;
  font-weight: 700;
  color: white;
  letter-spacing: -0.005em;
  line-height: 1.4;
}

/* Visiting / contact */
.oc-visit {
  background: white;
  padding: 60px 60px;
  border-top: 1px solid var(--gray-100);
}
.oc-visit-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: stretch;
}
.oc-visit-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.oc-visit-info h3 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
}
.oc-visit-info h3 .red { color: var(--red); }
.oc-visit-row {
  padding-top: 16px;
  border-top: 1px solid var(--gray-100);
}
.oc-visit-row:first-of-type {
  border-top: none;
  padding-top: 0;
}
.oc-visit-label {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  margin-bottom: 6px;
  display: block;
}
.oc-visit-value {
  font-size: 0.92rem;
  color: var(--gray-900);
  font-weight: 600;
  line-height: 1.55;
}
.oc-visit-value a { color: var(--blue); text-decoration: none; }
.oc-visit-value a:hover { color: var(--red); }
.oc-visit-map {
  background: linear-gradient(135deg, #F0F2F7 0%, #E0E5ED 100%);
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  color: var(--gray-500);
}

/* Responsive */
@media (max-width: 1100px) {
  .oc-stats-inner { grid-template-columns: repeat(3, 1fr); }
  .oc-narrative-inner { grid-template-columns: 1fr; gap: 16px; }
  .oc-narrative-label { padding-top: 0; }
  .oc-workshop { grid-template-columns: 1fr; gap: 24px; }
  .oc-workshop.is-flipped { direction: ltr; }
  .oc-yard-inner { grid-template-columns: 1fr; gap: 30px; }
  .oc-yard-image { height: 340px; }
  .oc-matrix-grid { grid-template-columns: repeat(2, 1fr); }
  .oc-team-inner { grid-template-columns: 1fr; gap: 30px; }
  .oc-accreditations-inner { grid-template-columns: 1fr; gap: 30px; }
  .oc-visit-inner { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 1024px) {
  .oc-hero-content { padding: 30px 20px; }
  .oc-stats { padding: 28px 20px; }
  .oc-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .oc-narrative { padding: 50px 20px; }
  .oc-workshops { padding: 50px 20px 20px; }
  .oc-yard { padding: 50px 20px; }
  .oc-gallery-section { padding: 50px 20px; }
  .oc-matrix { padding: 50px 20px; }
  .oc-team { padding: 50px 20px; }
  .oc-accreditations { padding: 50px 20px; }
  .oc-visit { padding: 50px 20px; }
}
@media (max-width: 700px) {
  .oc-hero { height: 70vh; min-height: 460px; }
  .oc-hero-content { padding: 22px 14px; }
  .oc-stats { padding: 24px 14px; }
  .oc-stats-inner { grid-template-columns: 1fr; }
  .oc-narrative { padding: 40px 14px; }
  .oc-workshops { padding: 40px 14px 16px; }
  .oc-workshop { margin-bottom: 50px; gap: 20px; }
  .oc-yard { padding: 40px 14px; }
  .oc-yard-image { height: 240px; }
  .oc-yard-specs { grid-template-columns: 1fr; }
  .oc-gallery-section { padding: 40px 14px; }
  .oc-gallery {
    grid-template-columns: 1fr;
    grid-auto-rows: 220px;
  }
  .oc-matrix { padding: 40px 14px; }
  .oc-matrix-grid { grid-template-columns: 1fr; }
  .oc-team { padding: 40px 14px; }
  .oc-team-counts { grid-template-columns: 1fr; }
  .oc-accreditations { padding: 40px 14px; }
  .oc-accreditations-grid { grid-template-columns: 1fr; }
  .oc-visit { padding: 40px 14px; }
  .oc-hero-meta { flex-wrap: wrap; gap: 12px; }
  .oc-hero-meta-sep { display: none; }
  .oc-scroll-cue { display: none; }
}

/* ====================================================== */
/* ==========   PROCUREMENT FORM — WIDE LAYOUT  ========== */
/* ====================================================== */
/* Overrides .fm-main grid for the procurement RFQ — single column,
   wider canvas, table-friendly. Right-aside content moves to 
   horizontal strips below the form. */

.fm-main.is-wide {
  padding: 50px 60px 60px;
}
.fm-main.is-wide .fm-main-inner {
  max-width: 1300px;
  display: block;       /* single column */
  grid-template-columns: none;
  gap: 0;
}
.fm-main.is-wide .fm-form-wrap {
  padding: 50px 56px;
}

/* Procurement table — full-width, real table */
.proc-table-wrap {
  border: 1px solid var(--gray-200);
  background: white;
  margin-top: 4px;
  width: 100%;
  /* Removed overflow:hidden — was clipping; column widths come from colgroup now */
}
.proc-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.proc-table thead {
  background: var(--canvas);
  border-bottom: 1px solid var(--gray-200);
}
.proc-table thead th {
  padding: 12px 14px;
  text-align: left;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
  border-right: 1px solid var(--gray-100);
}
.proc-table thead th:last-child { border-right: none; }
.proc-table thead .req {
  color: var(--red);
  margin-left: 2px;
}

/* Column widths — table-layout: fixed honors these */
.proc-col-part      { width: 16%; }
.proc-col-desc      { width: 30%; }
.proc-col-qty       { width: 8%;  }
.proc-col-unit      { width: 10%; }
.proc-col-price     { width: 14%; }
.proc-col-needed    { width: 14%; }
.proc-col-actions   { width: 56px; }

.proc-table tbody td {
  padding: 10px 12px;
  vertical-align: top;
  border-right: 1px solid var(--gray-100);
  border-bottom: 1px solid var(--gray-100);
  min-width: 0;     /* allow cells to shrink to col width despite intrinsic input widths */
  overflow: hidden; /* belt-and-braces: contain anything that tries to overflow */
}
.proc-table tbody td:last-child { border-right: none; }
.proc-table tbody tr:last-child td { border-bottom: none; }

.proc-table tbody input,
.proc-table tbody select,
.proc-table tbody textarea {
  padding: 8px 10px;
  background: white;
  border: 1px solid var(--gray-200);
  font-family: inherit;
  font-size: 0.84rem;
  color: var(--gray-900);
  outline: none;
  transition: all .15s;
  width: 100%;
  min-width: 0;          /* override browser UA min-widths on number/date */
  max-width: 100%;       /* never exceed cell */
  border-radius: 0;
  box-sizing: border-box;
  letter-spacing: -0.005em;
  display: block;        /* prevent inline-block intrinsic sizing quirks */
}
.proc-table tbody textarea {
  min-height: 38px;
  resize: vertical;
  line-height: 1.4;
}
.proc-table tbody input:focus,
.proc-table tbody select:focus,
.proc-table tbody textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(0, 84, 166, 0.08);
}
.proc-table tbody select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}
.proc-table tbody .proc-row-num {
  font-size: 0.7rem;
  color: var(--gray-400);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding-top: 16px;
}
.proc-row-remove {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--gray-400);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  padding: 0;
  margin: 0 auto;
}
.proc-row-remove:hover:not(:disabled) {
  color: var(--red);
  background: rgba(215, 25, 32, 0.06);
}
.proc-row-remove:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* Toolbar BELOW the table — Add button anchored to last row visually */
.proc-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--canvas);
  border: 1px solid var(--gray-200);
  border-top: none;          /* visually merges with table */
  margin-bottom: 18px;
}
.proc-toolbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.proc-toolbar .proc-add-btn {
  background: white;
  border: 1.5px dashed var(--blue);
  color: var(--blue);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 10px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .2s;
  letter-spacing: -0.005em;
}
.proc-toolbar .proc-add-btn:hover {
  background: var(--blue);
  color: white;
  border-style: solid;
}
.proc-toolbar .proc-item-count {
  font-size: 0.82rem;
  color: var(--gray-600);
}
.proc-toolbar .proc-item-count strong {
  color: var(--gray-900);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.proc-toolbar-right {
  font-size: 0.78rem;
  color: var(--gray-500);
}

/* === Below-form strips (replacement for the right aside) === */

/* Process steps — 3-step horizontal band */
.proc-process-strip {
  background: white;
  padding: 50px 60px;
  border-top: 1px solid var(--gray-100);
}
.proc-process-inner {
  max-width: 1300px;
  margin: 0 auto;
}
.proc-process-head {
  margin-bottom: 28px;
  text-align: center;
}
.proc-process-head .eyebrow { margin-bottom: 10px; }
.proc-process-head h3 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gray-900);
}
.proc-process-head h3 .red { color: var(--red); }
.proc-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  position: relative;
}
.proc-process-step {
  background: var(--canvas);
  padding: 26px 28px;
  border-left: 3px solid var(--red);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.proc-process-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: white;
  color: var(--blue);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  border: 1.5px solid var(--blue);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.proc-process-step h4 {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--gray-900);
}
.proc-process-step p {
  font-size: 0.86rem;
  color: var(--gray-600);
  line-height: 1.55;
}

/* Urgent + alt-form strip — 3-column band */
.proc-support-strip {
  background: var(--canvas);
  padding: 40px 60px 50px;
  border-top: 1px solid var(--gray-100);
}
.proc-support-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 14px;
}
.proc-support-card {
  background: white;
  padding: 26px 28px;
  border: 1px solid var(--gray-100);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.proc-support-card.is-urgent {
  border-left: 3px solid var(--red);
  background: linear-gradient(135deg, white 0%, rgba(215, 25, 32, 0.03) 100%);
}
.proc-support-card h4 {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--gray-900);
  margin-bottom: 2px;
}
.proc-support-card .phone {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  margin: 4px 0 6px;
  display: block;
}
.proc-support-card p {
  font-size: 0.86rem;
  color: var(--gray-600);
  line-height: 1.55;
}
.proc-support-card a.alt-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  margin-top: 8px;
}
.proc-support-card a.alt-link:hover { color: var(--red); }
.proc-support-card a.email-line {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}
.proc-support-card a.email-line:hover { color: var(--red); }

/* Responsive — table → cards on mobile */
@media (max-width: 1024px) {
  .fm-main.is-wide { padding: 36px 20px; }
  .fm-main.is-wide .fm-form-wrap { padding: 32px 22px; }

  .proc-process-strip { padding: 36px 20px; }
  .proc-process-grid { grid-template-columns: 1fr; }
  .proc-support-strip { padding: 28px 20px 36px; }
  .proc-support-inner { grid-template-columns: 1fr; }

  /* Table → stacked cards on mobile */
  .proc-table-wrap {
    border: none;
    background: transparent;
  }
  .proc-table thead { display: none; }
  .proc-table,
  .proc-table tbody,
  .proc-table tr,
  .proc-table td {
    display: block;
    width: 100%;
  }
  .proc-table tbody tr {
    background: white;
    border: 1px solid var(--gray-200);
    padding: 18px 20px 16px;
    margin-bottom: 8px;
    position: relative;
  }
  .proc-table tbody td {
    border: none;
    padding: 6px 0;
  }
  .proc-table tbody td.proc-row-num-cell {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-500);
    font-weight: 700;
    padding: 0 0 8px;
  }
  .proc-table tbody td.proc-row-num-cell::before { content: "Item "; }
  .proc-table tbody td .proc-row-num { display: inline; }
  .proc-table tbody td[data-mobile-label]::before {
    content: attr(data-mobile-label);
    display: block;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-500);
    font-weight: 700;
    margin-bottom: 4px;
  }
  .proc-table tbody td.proc-row-actions-cell {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 0;
  }
  .proc-table tbody td.proc-row-actions-cell::before { content: ""; }

  .proc-toolbar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    margin-top: -1px;
  }
  .proc-toolbar-left { justify-content: space-between; }
  .proc-toolbar .proc-add-btn {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 760px) {
  .proc-table-wrap {
    overflow: visible;
  }

  .proc-table,
  .proc-table thead,
  .proc-table tbody,
  .proc-table tr,
  .proc-table th,
  .proc-table td {
    display: block;
    width: 100%;
  }

  .proc-table thead {
    display: none;
  }

  .proc-table tr.proc-item {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 14px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
  }

  .proc-table td {
    padding: 0;
    margin-bottom: 14px;
    border: 0;
  }

  .proc-table td::before {
    content: attr(data-mobile-label);
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--gray-600);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .proc-table td input,
  .proc-table td textarea {
    width: 100%;
  }

  .proc-row-actions-cell {
    margin-bottom: 0 !important;
    text-align: right;
  }

  .proc-row-actions-cell::before {
    display: none !important;
  }

  .proc-row-remove {
    width: 100%;
    justify-content: center;
    min-height: 42px;
  }

  .proc-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .proc-toolbar-left {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .proc-add-btn {
    width: 100%;
    justify-content: center;
  }

  .proc-item-count,
  .proc-toolbar-right {
    text-align: center;
  }
}
@media (max-width: 700px) {
  .fm-main.is-wide { padding: 26px 14px; }
  .fm-main.is-wide .fm-form-wrap { padding: 26px 16px; }
  .proc-process-strip { padding: 28px 14px; }
  .proc-support-strip { padding: 24px 14px 30px; }
  .proc-support-card { padding: 22px 20px; }
}

/* ====================================================== */
/* ========== PROCUREMENT QUICK RFQ SIMPLIFICATION ======= */
/* ====================================================== */
/* Reduced buyer friction: line items now only collect part/item, description and quantity. */
.proc-table-simple .proc-col-part { width: 24%; }
.proc-table-simple .proc-col-desc { width: auto; }
.proc-table-simple .proc-col-qty { width: 110px; }
.proc-table-simple .proc-col-actions { width: 56px; }

.proc-table-simple tbody textarea {
  min-height: 46px;
  resize: vertical;
}

.proc-table-simple tbody td {
  overflow: visible;
}

.proc-table-simple input,
.proc-table-simple textarea {
  border-radius: 2px;
}

.proc-table-simple input:focus,
.proc-table-simple textarea:focus {
  background: var(--gray-50);
}

@media (max-width: 900px) {
  .proc-table-simple .proc-col-part,
  .proc-table-simple .proc-col-desc,
  .proc-table-simple .proc-col-qty,
  .proc-table-simple .proc-col-actions { width: auto; }
}

/* ====================================================== */
/* HOTFIX: Quick RFQ table row must not inherit old .proc-item grid styles */
/* ====================================================== */
.proc-table.proc-table-simple tr.proc-item {
  display: table-row !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 0 !important;
  align-items: initial !important;
  border-bottom: 0 !important;
}

.proc-table.proc-table-simple {
  width: 100% !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}

.proc-table.proc-table-simple .proc-col-part { width: 24% !important; }
.proc-table.proc-table-simple .proc-col-desc { width: 62% !important; }
.proc-table.proc-table-simple .proc-col-qty { width: 9% !important; }
.proc-table.proc-table-simple .proc-col-actions { width: 5% !important; }

.proc-table.proc-table-simple tbody td {
  display: table-cell !important;
  padding: 14px 16px !important;
  vertical-align: top !important;
  overflow: visible !important;
}

.proc-table.proc-table-simple tbody input,
.proc-table.proc-table-simple tbody textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.proc-table.proc-table-simple tbody textarea {
  min-height: 54px !important;
  line-height: 1.45 !important;
  resize: vertical !important;
  white-space: normal !important;
}

.proc-table.proc-table-simple tbody input[type="number"] {
  height: 54px !important;
}

.proc-table.proc-table-simple .proc-row-actions-cell {
  text-align: center !important;
}

@media (max-width: 1024px) {
  .proc-table.proc-table-simple,
  .proc-table.proc-table-simple tbody,
  .proc-table.proc-table-simple tr.proc-item,
  .proc-table.proc-table-simple td {
    display: block !important;
    width: 100% !important;
  }
}