*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --dark:   #0C0F1C;
      --darker: #07090F;
      --mid:    #141829;
      --red:    #D42C2C;
      --blue:   #2F7CF6;
      --blue:   #1E4DB7;
      --light:  #EEF0EC;
      --muted:  #8A93A0;
      --border: #1E2440;
      --logo: url("../images/image-01.png");
    }
    html { scroll-behavior: smooth; overflow-x: hidden; }
    body { font-family: 'Barlow', sans-serif; background: var(--dark); color: var(--light); overflow-x: hidden; width: 100%; max-width: 100%; }

    /* NAV */
    .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
    nav {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 48px;
      background: rgba(12,15,28,0.94);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
      transition: padding .3s;
    }
    .nav-stack { display: flex; flex-direction: column; align-items: stretch; }
    .nav-utility { display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding-bottom: 9px; }
    .nav-utility > a { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; font-family: 'Barlow', sans-serif; font-size: 14px; font-weight: 500; transition: color .2s; }
    .nav-utility > a:hover { color: var(--light); }
    .nav-utility > a svg { width: 17px; height: 17px; color: var(--red); flex-shrink: 0; }
    .nav-divider { width: 1px; height: 16px; background: var(--red); opacity: .5; }
    .nav-social { display: flex; align-items: center; gap: 14px; }
    .nav-social a { color: var(--muted); display: flex; transition: color .2s, transform .2s; }
    .nav-social a svg { width: 18px; height: 18px; }
    .nav-social a:hover { transform: translateY(-1px); }
    .nav-social a.u-fb:hover { color: #1877F2; }
    .nav-social a.u-ig:hover { color: #E1306C; }
    .nav-social a.u-x:hover { color: #1877F2; }
    .nav-bottom { display: flex; align-items: center; justify-content: flex-end; gap: 26px; padding-top: 10px; border-top: 1px solid rgba(212,44,44,.30); }
    @media (max-width: 900px) { .nav-stack { display: none; } .hero { padding-top: 120px; } }
    .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
    .logo-img { display:block; height: 112px; width: 118px; background-image: var(--logo); background-repeat: no-repeat; background-position: center; background-size: 118px 112px; flex-shrink:0; }
    .logo-text { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 19px; letter-spacing: .6px; color: var(--light); text-transform: uppercase; line-height: 1.12; max-width: 260px; display: inline-block; text-align: center; }
    .logo-text .llc { color: var(--light); }
    .logo-text span { color: var(--light); }
    .nav-links { display: flex; gap: 30px; list-style: none; }
    .nav-links a { position: relative; display: inline-block; padding-bottom: 6px; font-family: 'Barlow', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .8px; color: #aab2bd; text-decoration: none; text-transform: uppercase; transition: color .2s; }
    .nav-links a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--red); border-radius: 2px; transition: width .28s ease; }
    .nav-links a:hover { color: var(--light); }
    .nav-links a:hover::after { width: 100%; }
    .nav-links a.active { color: var(--light); }
    .nav-links a.active::after { width: 100%; }

    /* --- ABOUT DROPDOWN --- */
    .nav-links li.has-dropdown { position: relative; }
    .nav-links li.has-dropdown > a .caret { display: inline-block; margin-left: 6px; width: 9px; height: 9px; vertical-align: middle; transition: transform .3s ease; }
    .nav-links li.has-dropdown:hover > a .caret { transform: rotate(180deg); }
    .dropdown {
      position: absolute; top: 100%; left: -14px; min-width: 268px;
      background: rgba(16,20,36,0.98);
      backdrop-filter: blur(14px);
      border: 1px solid var(--border);
      border-top: 2px solid var(--red);
      padding: 8px;
      list-style: none;
      opacity: 0; visibility: hidden;
      transform: translateY(10px);
      transition: opacity .28s ease, transform .28s ease, visibility .28s;
      box-shadow: 0 24px 48px rgba(0,0,0,.45);
      z-index: 120;
    }
    .nav-links li.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
    /* bridge the gap so hover doesn't drop */
    .dropdown::before { content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
    .dropdown li { position: relative; }
    .dropdown li a {
      display: block; position: relative;
      padding: 13px 16px 13px 20px;
      font-family: 'Barlow', sans-serif; font-size: 12.5px; font-weight: 600;
      letter-spacing: .6px; text-transform: uppercase;
      color: #aab2bd; text-decoration: none;
      transition: color .22s ease, background .22s ease, padding-left .22s ease;
    }
    .dropdown li a::after { content: none; }
    /* the reactive red bar on the side */
    .dropdown li a::before {
      content: ''; position: absolute; left: 0; top: 50%;
      width: 3px; height: 0; background: var(--red);
      border-radius: 2px; transform: translateY(-50%);
      transition: height .28s cubic-bezier(.4,0,.2,1);
    }
    .dropdown li a:hover { color: var(--light); background: rgba(212,44,44,.08); padding-left: 26px; }
    .dropdown li a:hover::before { height: 62%; }
    .dropdown li a.active { color: var(--light); }
    .dropdown li a.active::before { height: 62%; }
    .dropdown li a .d-sub { display: block; font-family: 'Barlow', sans-serif; font-size: 10.5px; font-weight: 400; letter-spacing: .3px; text-transform: none; color: var(--muted); margin-top: 3px; }
    /* mobile submenu */
    .mobile-menu .m-sub { display: flex; flex-direction: column; padding-left: 16px; border-left: 2px solid rgba(212,44,44,.4); margin: 2px 0 6px 8px; }
    .mobile-menu .m-sub a { font-size: 14px !important; opacity: .82; padding: 9px 0 !important; }
    .mobile-menu .m-sub a:hover { opacity: 1; }
    .nav-links a:hover { color: var(--light); }
    .btn-quote { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; padding: 10px 22px; background: var(--red); color: white; border: none; cursor: pointer; text-decoration: none; transition: background .2s, transform .15s; white-space: nowrap; }
    .btn-quote:hover { background: #e83535; transform: translateY(-1px); }

    /* HERO */
    .hero { min-height: 100vh; position: relative; display: flex; align-items: center; overflow: hidden; padding-top: 160px; background-color: var(--dark); overflow-anchor: none; }
    /* once the entrance has played, drop the leftover transform + will-change:
       a permanently promoted, transformed parent forces the clipped photo layer
       to re-rasterise every frame, which is what caused the shake. */
    .hero.hero-settled { transform: none; will-change: auto; }
    /* Parallax layer: carries the exact hero artwork the section used to hold.
       Sized to the hero exactly, so `cover` crops the photo identically to before. */
    .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background-image: linear-gradient(rgba(12,15,28,0.86), rgba(12,15,28,0.93)), url('https://images.unsplash.com/photo-1637235549935-196a9d3a88c8?q=80&w=1600&auto=format&fit=crop');
      background-size: cover; background-position: center;
      transform: translate3d(0,0,0); will-change: transform; backface-visibility: hidden;
      -webkit-backface-visibility: hidden; contain: paint; }
    /* Preferred path: the browser drives this off the main thread, so the photo
       is composited in the SAME frame as the scroll -- no lag, no jitter. */
    @keyframes heroParallax { from { transform: translate3d(0,0,0); } to { transform: translate3d(0, var(--hero-shift, 85vh), 0); } }
    @supports (animation-timeline: scroll()) {
      .hero-bg { animation: heroParallax linear both; animation-timeline: scroll(root block);
        animation-range: 0 var(--hero-h, 100vh); }
    }
    @media (prefers-reduced-motion: reduce) { .hero-bg { transform: none !important; } }
    .hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(212,44,44,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(212,44,44,0.06) 1px, transparent 1px); background-size: 48px 48px; }
    .hero::after { content: ''; position: absolute; z-index: 1; right: -200px; top: -100px; width: 640px; height: 120vh; background: linear-gradient(135deg, transparent 48%, var(--mid) 48%, var(--mid) 52%, transparent 52%); opacity: .7; }
    .hero-content { position: relative; z-index: 2; padding: 0 48px; max-width: 900px; transform: translateZ(0); }
    .hero-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--red); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
    .hero-eyebrow::before { content: ''; display: block; width: 40px; height: 2px; background: var(--red); }
    .hero h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(64px, 9vw, 120px); line-height: .93; letter-spacing: -1px; text-transform: uppercase; margin-bottom: 28px; }
    .hero h1 em { font-style: normal; color: var(--red); display: block; }
    .hero h1 .stroke { -webkit-text-stroke: 1.5px var(--blue); color: transparent; }
    .hero-sub { font-size: 17px; font-weight: 300; line-height: 1.65; color: var(--muted); max-width: 520px; margin-bottom: 40px; }
    .hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 64px; }
    .btn-primary { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; padding: 16px 36px; background: var(--red); color: white; border: none; cursor: pointer; text-decoration: none; display: inline-block; transition: background .2s, transform .15s; }
    .btn-primary:hover { background: #e83535; transform: translateY(-2px); }
    .btn-outline { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; padding: 16px 36px; background: transparent; color: var(--light); border: 1.5px solid var(--border); cursor: pointer; text-decoration: none; display: inline-block; transition: border-color .2s, color .2s; }
    .btn-outline:hover { border-color: var(--light); }
    .hero-stats { display: flex; gap: 48px; padding-top: 40px; border-top: 1px solid var(--border); flex-wrap: wrap; }
    .stat-val { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 42px; color: var(--light); line-height: 1; }
    .stat-val span { color: var(--red); }
    .stat-label { font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

    /* TICKER */
    .ticker { background: var(--red); padding: 14px 0; overflow: hidden; white-space: nowrap; }
    .ticker-inner { display: inline-flex; animation: ticker 32s linear infinite; }
    .ticker-item { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: white; padding: 0 36px; }
    .ticker-dot { opacity: .6; }
    @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* SECTIONS */
    section { padding: 100px 48px; }
    .section-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: var(--red); margin-bottom: 16px; }
    .section-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: clamp(36px, 5vw, 60px); line-height: 1; text-transform: uppercase; margin-bottom: 20px; }
    .section-title em { font-style: normal; color: var(--red); }
    .section-sub { font-size: 16px; font-weight: 300; line-height: 1.7; color: var(--muted); max-width: 560px; }

    /* PRODUCTS */
    #products { background: var(--darker); }
    .products-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 56px; flex-wrap: wrap; gap: 24px; }
    .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
    .product-card { position: relative; overflow: hidden; display: block; text-decoration: none; background: var(--mid); padding: 36px 28px; border: 1px solid var(--border); cursor: pointer; transition: background .4s ease, transform .55s cubic-bezier(.2,1,.3,1), box-shadow .55s ease, border-color .35s ease; }
    .product-card > *:not(.product-photo):not(.product-index) { position: relative; z-index: 2; }
    /* subtle diagonal light sweep */
    .product-card::before { content: ''; position: absolute; top: 0; left: -130%; width: 85%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.06), transparent); transform: skewX(-18deg); transition: left .8s ease; pointer-events: none; z-index: 1; }
    .products-grid .product-card:hover::before, .products-grid .product-card:active::before { left: 140%; }
    /* bottom red bar */
    .product-card::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: var(--red); transition: width .5s cubic-bezier(.4,0,.2,1); z-index: 4; }
    .products-grid .product-card:hover::after, .products-grid .product-card:active::after { width: 100%; }
    .products-grid .product-card:hover, .products-grid .product-card:active { background: #1b2033; transform: translateY(-10px); box-shadow: 0 26px 52px rgba(0,0,0,.5); border-color: rgba(212,44,44,.55); z-index: 3; }
    /* photo (kept) */
    .product-photo { display: block; position: relative; z-index: 0; width: calc(100% + 56px); height: 168px; object-fit: cover; margin: -36px -28px 20px; border-bottom: 1px solid var(--border); transition: transform .75s cubic-bezier(.2,1,.3,1); }
    .products-grid .product-card:hover .product-photo, .products-grid .product-card:active .product-photo { transform: scale(1.1); }

    /* catalogue index badge on the image corner */
    .product-index { position: absolute; top: 14px; left: 14px; z-index: 3; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 14px; letter-spacing: 1px; color: #fff; background: rgba(212,44,44,.92); padding: 5px 11px; border-radius: 4px; box-shadow: 0 6px 16px rgba(0,0,0,.35); transition: transform .5s cubic-bezier(.2,1,.3,1); }
    .products-grid .product-card:hover .product-index, .products-grid .product-card:active .product-index { transform: translateY(-3px); }
    .product-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 21px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; color: var(--light); transition: letter-spacing .4s ease; white-space: nowrap; }
    .products-grid .product-card:hover .product-name, .products-grid .product-card:active .product-name { letter-spacing: 1.2px; }
    .product-desc { font-size: 13px; font-weight: 300; color: var(--muted); line-height: 1.6; }


    /* ABOUT */
    #about { background: var(--dark); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    .about-block { background: var(--mid); border: 1px solid var(--border); padding: 48px; position: relative; }
    .about-block::before { content: ''; position: absolute; top: -12px; left: -12px; right: 12px; bottom: 12px; border: 1px solid var(--border); z-index: -1; }
    .about-block-label { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--red); margin-bottom: 32px; display: flex; align-items: center; gap: 8px; }
    .about-block-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }
    .about-metric { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--border); gap: 12px; }
    .about-metric:last-of-type { border-bottom: none; }
    .about-metric-label { font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; padding-top: 4px; flex-shrink: 0; }
    .about-metric-val { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 22px; color: var(--light); text-align: right; }
    .about-metric-val span { color: var(--blue); font-size: 13px; }
    .about-metric-sub { font-size: 11px; color: var(--muted); margin-top: 3px; text-align: right; letter-spacing: .3px; }
    .about-text .section-sub { margin-bottom: 18px; }
    .feature-list { list-style: none; margin-top: 24px; }
    .feature-list li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; font-size: 15px; color: var(--muted); border-bottom: 1px solid var(--border); }
    .feature-list li:last-child { border-bottom: none; }
    .feature-list li::before { content: '→'; color: var(--red); font-size: 16px; flex-shrink: 0; margin-top: 1px; }

    /* WHY */
    #why { background: var(--mid); }
    .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 64px; }
    .why-card { position: relative; overflow: hidden; background: var(--darker); padding: 48px 36px; border: 1px solid var(--border); text-align: left; transition: background .3s, transform .45s cubic-bezier(.2,1,.3,1), box-shadow .45s, border-color .3s; }
    .why-card::before { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 0; background: var(--red); transition: height .45s cubic-bezier(.4,0,.2,1); }
    .why-grid .why-card:hover, .why-grid .why-card:active { background: var(--dark); transform: translateY(-8px); box-shadow: 0 20px 44px rgba(0,0,0,.42); border-color: rgba(212,44,44,.55); z-index: 2; }
    .why-grid .why-card:hover::before, .why-grid .why-card:active::before { height: 100%; }
    .why-num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 70px; line-height: 1; margin-bottom: 18px; letter-spacing: -2px; display: inline-block; background: linear-gradient(135deg, rgba(212,44,44,.60), rgba(212,44,44,.12)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; transition: transform .45s cubic-bezier(.2,1,.3,1), filter .45s; }
    .why-grid .why-card:hover .why-num, .why-grid .why-card:active .why-num { background: linear-gradient(135deg, #ff6b6b, var(--red)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transform: translateY(-3px) scale(1.09); filter: drop-shadow(0 6px 14px rgba(212,44,44,.42)); }
    .why-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; text-transform: uppercase; margin-bottom: 12px; color: var(--light); transition: letter-spacing .35s ease; }
    .why-grid .why-card:hover .why-title, .why-grid .why-card:active .why-title { letter-spacing: 1px; }
    .why-body { font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.7; }

    /* BRANDS */
    #brands { background: var(--darker); padding: 80px 48px; }
    .brands-label { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--red); text-align: center; margin-bottom: 10px; font-weight: 700; }
    .brands-subtitle { font-size: 14px; color: var(--muted); text-align: center; margin-bottom: 48px; }
    .brands-row { display: flex; justify-content: center; align-items: stretch; flex-wrap: nowrap; }
    .brand-badge { position: relative; overflow: hidden; flex: 1 0 auto; white-space: nowrap; display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: clamp(14px, 1.35vw, 17px); letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding: 26px 16px; border: 1px solid var(--border); margin-left: -1px; transition: color .4s ease, border-color .4s ease, background .45s ease, letter-spacing .5s ease, transform .6s cubic-bezier(.22,1,.36,1), box-shadow .6s ease; cursor: default; text-align: center; }
    .brand-badge::after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: var(--blue); transition: width .6s cubic-bezier(.33,1,.68,1); }
    .brands-row .brand-badge:hover, .brands-row .brand-badge:active {
      color: #eaf1ff; border-color: var(--blue); letter-spacing: 1.9px;
      background: linear-gradient(180deg, rgba(47,124,246,.05), rgba(47,124,246,.17));
      transform: translateY(-5px); box-shadow: 0 14px 34px rgba(47,124,246,.30); z-index: 2;
    }
    .brands-row .brand-badge:hover::after, .brands-row .brand-badge:active::after { width: 100%; }
    /* Mid-width screens: keep boxes big — 4 per row (2 tidy rows), no lone wrap */
    @media (min-width: 761px) and (max-width: 1080px) {
      .brands-row { flex-wrap: wrap; }
      .brand-badge { flex: 1 1 22%; font-size: 15px; padding: 24px 12px; }
    }

    /* NEWS */
    #news { background: var(--mid); }
    .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px; }
    .news-card { background: var(--darker); border: 1px solid var(--border); padding: 36px 28px 32px; position: relative; overflow: hidden; transition: transform .45s cubic-bezier(.2,1,.3,1), box-shadow .45s, border-color .3s; }
    .news-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--red); }
    .news-card::after { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 0; background: var(--red); transition: height .45s cubic-bezier(.4,0,.2,1); }
    .news-grid .news-card:hover, .news-grid .news-card:active { transform: translateY(-10px); box-shadow: 0 22px 48px rgba(0,0,0,.45); border-color: rgba(212,44,44,.55); z-index: 2; }
    .news-grid .news-card:hover::after, .news-grid .news-card:active::after { height: 100%; }
    .news-grid .news-card:hover .news-title, .news-grid .news-card:active .news-title { color: var(--red); }
    .news-tag { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--red); font-weight: 700; margin-bottom: 10px; }
    .news-date { font-size: 12px; color: var(--muted); margin-bottom: 14px; }
    .news-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 21px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; line-height: 1.2; color: var(--light); transition: color .3s ease; }
    .news-excerpt { font-size: 13px; font-weight: 300; color: var(--muted); line-height: 1.7; }

    /* CONTACT */
    #contact { background: var(--dark); position: relative; overflow: hidden; overflow-anchor: none; }
    /* CONTACT BACKGROUND — a PINNED photo (single composited layer, driven off the
       main thread by the scroll timeline). The layer translates down at exactly
       scroll speed, so the photo holds STILL in the viewport while the section
       scrolls: the content/footer slides OVER a stationary photo and no extra
       photo is revealed. Being pinned (and near one viewport tall) it also holds
       still on screen, which removes the mid-scroll jitter the drifting version
       had. `contain: paint` matches the hero layer's compositing.
       --sec-shift : travel = full section height (factor 1.0 = pinned).
       --sec-h     : layer height = one viewport + margin.
       --sec-top   : top offset (margin above for the enter/leave phases).
       --sec-p0/p1 : the scroll window over which it plays (this section's pass). */
    .section-bg { position: absolute; left: 0; right: 0; top: var(--sec-top, -25vh); z-index: 0;
      height: var(--sec-h, 150vh); pointer-events: none;
      background-image: linear-gradient(rgba(12,15,28,0.88), rgba(12,15,28,0.94)), url('https://images.unsplash.com/photo-1637235549935-196a9d3a88c8?q=80&w=1600&auto=format&fit=crop');
      background-size: cover; background-position: center;
      transform: translate3d(0,0,0); will-change: transform;
      backface-visibility: hidden; -webkit-backface-visibility: hidden; contain: paint; }
    .section-bg i { display: none; }        /* single-layer now; inner layer unused */
    #contact > *:not(.section-bg) { position: relative; z-index: 1; }
    /* Same shape of animation as the hero's heroParallax: slide straight down. */
    @keyframes secParallax { from { transform: translate3d(0,0,0); } to { transform: translate3d(0, var(--sec-shift, 60vh), 0); } }
    @supports (animation-timeline: scroll()) {
      .section-bg { animation: secParallax linear both;
        animation-timeline: scroll(root block);
        animation-range: var(--sec-p0, 0px) var(--sec-p1, 100vh); }
    }
    @media (prefers-reduced-motion: reduce) {
      .section-bg { animation: none !important; transform: none !important; }
    }
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 64px; }
    .contact-info-item { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--border); }
    .contact-info-item:last-of-type { border-bottom: none; }
    .contact-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
    .contact-info-label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--red); margin-bottom: 8px; font-weight: 700; }
    .contact-info-val { font-size: 14px; font-weight: 400; color: var(--light); line-height: 1.7; }
    .branch-tag { display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; background: var(--red); color: white; padding: 3px 10px; margin-bottom: 8px; }
    .map-link { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--red); text-decoration: none; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; transition: color .2s; }
    .map-link:hover { color: var(--light); }
    .contact-form { display: flex; flex-direction: column; gap: 16px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .form-group { display: flex; flex-direction: column; gap: 8px; }
    .form-group label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
    .form-group input, .form-group textarea, .form-group select { background: var(--mid); border: 1px solid var(--border); color: var(--light); padding: 14px 16px; font-family: 'Barlow', sans-serif; font-size: 15px; outline: none; transition: border-color .2s; }
    .form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--red); }
    .form-group input::placeholder, .form-group textarea::placeholder { color: var(--muted); opacity: .6; }
    .form-group textarea { resize: vertical; min-height: 120px; }
    .form-group select option { background: var(--mid); }
    /* Chrome paints its own opaque background on autofilled fields, which turned
       them white against the dark form. There is no way to override that colour
       directly, so an inset shadow the size of the field is used to cover it. */
    .form-group input:-webkit-autofill,
    .form-group input:-webkit-autofill:hover,
    .form-group input:-webkit-autofill:active,
    .form-group textarea:-webkit-autofill,
    .form-group select:-webkit-autofill {
      -webkit-text-fill-color: var(--light) !important;
      -webkit-box-shadow: 0 0 0 1000px var(--mid) inset !important;
      box-shadow: 0 0 0 1000px var(--mid) inset !important;
      caret-color: var(--light);
      border: 1px solid var(--border) !important;
      transition: background-color 100000s ease-in-out 0s; }
    .form-group input:-webkit-autofill:focus,
    .form-group textarea:-webkit-autofill:focus,
    .form-group select:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0 1000px var(--dark) inset, 0 0 0 3px rgba(212,44,44,.16) !important;
      box-shadow: 0 0 0 1000px var(--dark) inset, 0 0 0 3px rgba(212,44,44,.16) !important;
      border-color: var(--red) !important; }
    .form-group input:autofill, .form-group textarea:autofill {
      -webkit-text-fill-color: var(--light); }

    /* FOOTER */
    footer { background: var(--darker); border-top: 3px solid var(--red); padding: 56px 48px 26px; }
    .footer-top { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.7fr 1fr 1.4fr 1fr; gap: 48px; }
    .footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
    .footer-img { display:block; height: 84px; width: 96px; background: var(--logo) center/contain no-repeat; flex-shrink:0; }
    .footer-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 14px; color: var(--light); text-transform: uppercase; line-height: 1.3; white-space: nowrap; }
    .footer-sub { font-size: 12px; color: var(--muted); letter-spacing: 1px; margin-top: 3px; }
    .footer-desc { font-family: 'Barlow', sans-serif; font-size: 15px; line-height: 1.75; color: var(--muted); font-weight: 300; max-width: 360px; }
    .footer-heading { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--light); margin-bottom: 22px; position: relative; padding-bottom: 11px; }
    .footer-heading::after { content: ''; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; background: var(--red); }
    .footer-nav { list-style: none; display: flex; flex-direction: column; gap: 12px; }
    .footer-nav a { position: relative; font-family: 'Barlow', sans-serif; font-size: 15px; color: var(--muted); text-decoration: none; transition: color .22s, padding-left .22s; display: inline-flex; align-items: center; padding-left: 0; }
    /* subtle red bar that loads in on hover */
    .footer-nav a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0; height: 2px; background: var(--red); border-radius: 1px; transition: width .28s cubic-bezier(.4,0,.2,1); }
    .footer-nav a:hover { color: var(--light); padding-left: 22px; }
    .footer-nav a:hover::before { width: 14px; }
    .footer-contact { list-style: none; display: flex; flex-direction: column; }
    .footer-contact li { display: flex; align-items: flex-start; gap: 11px; font-family: 'Barlow', sans-serif; font-size: 15px; color: var(--muted); line-height: 1.5; padding: 13px 0; border-bottom: 1px solid rgba(212,44,44,.22); }
    .footer-contact li:first-child { padding-top: 0; }
    .footer-contact li:last-child { border-bottom: none; padding-bottom: 0; }
    .footer-contact a { color: var(--muted); text-decoration: none; transition: color .2s; }
    .footer-contact a:hover { color: var(--light); }
    .fc-ico { color: var(--red); flex-shrink: 0; margin-top: 1px; display: inline-flex; }
    .fc-ico svg { width: 17px; height: 17px; }
    .footer-follow-txt { font-family: 'Barlow', sans-serif; font-size: 14.5px; color: var(--muted); font-weight: 300; line-height: 1.6; margin-bottom: 18px; max-width: 210px; }
    .footer-bottom { max-width: 1180px; margin: 44px auto 0; padding-top: 22px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
    .footer-copy { font-size: 14px; color: var(--muted); }
    .footer-bottom-note { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }

    /* RESPONSIVE */
    @media (max-width: 1100px) {
      .products-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 900px) {
      .product-name { font-size: 19px; letter-spacing: .3px; }
      .products-grid .product-card:hover .product-name, .products-grid .product-card:active .product-name { letter-spacing: .8px; }
      nav { padding: 10px 20px !important; }
      .nav-links { display: none; }
      .logo-text { font-size: 15px; max-width: 210px; }
      section { padding: 72px 24px; }
      .hero-content { padding: 0 24px; }
      #about { grid-template-columns: 1fr; gap: 40px; }
      .why-grid { grid-template-columns: 1fr; }
      .news-grid { grid-template-columns: 1fr; }
      .contact-grid { grid-template-columns: 1fr; gap: 40px; }
      .form-row { grid-template-columns: 1fr; }
      .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
      .footer-about { grid-column: 1 / -1; }
      .footer-bottom { flex-direction: column; text-align: center; }
    }
    @media (max-width: 600px) {
      .products-grid { grid-template-columns: 1fr; }
    }

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 58px;
  height: 58px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
  z-index: 9999;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float img {
  width: 30px;
  height: 30px;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
}

/* Scroll Reveal Animation */

.reveal {
  opacity: 0;
  transition: opacity .8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-left {
  transform: translateX(-140px) scale(0.92);
}

.reveal-right {
  transform: translateX(140px) scale(0.92);
}

.reveal-up {
  transform: translateY(90px) scale(0.94);
}

/* card-level entrances: from the sides, gentler distance + slight rise */
.reveal-card-l { transform: translateX(-72px) translateY(26px) scale(0.94); }
.reveal-card-r { transform: translateX(72px)  translateY(26px) scale(0.94); }

/* text / headings: a clear, smooth rise up from the bottom (no scale) */
.reveal-up-text { transform: translateY(70px); }

.reveal.active {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}

/* Better styled counters */
.counter {
  color: var(--light);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
}

/* Waterproofing photo — one shared data URI (--wp-img), shown with cover like the other product photos. */
:root { --wp-img: url("../images/image-02.jpg"); }
.pf-cover { background-image: var(--wp-img); background-size: cover; background-position: center; background-repeat: no-repeat; }


/* LOADING SCREEN */
#loader {
  position: fixed;
  left: 0;
  right: 0;
  /* BULLETPROOF FULL-SCREEN COVER (mobile-bar proof).
     The mobile Chrome/Safari toolbars slide in and out as you scroll, changing
     the visible height. Pinning the cover to top:0/bottom:0 (or sizing it with
     vh/dvh/lvh) leaves a strip uncovered at the bottom the moment a bar
     retracts. Instead we overshoot the viewport by half a screen on BOTH ends:
     the cover starts 50vh ABOVE the top and ends 50vh BELOW the bottom, so it
     always reaches well past the real screen edges no matter what the bars do.
     Because the overshoot is symmetric, the flex-centred logo still sits dead
     centre on the actual screen. */
  top: -50vh;
  bottom: -50vh;
  width: 100%;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.loader-logo {
  width: 200px;
  height: auto;
  object-fit: contain;
  margin-bottom: 20px;
}

.loader-bars {
  display: flex;
  gap: 6px;
  margin-top: 20px;
  align-items: flex-end;
}

.loader-bars span {
  width: 6px;
  height: 25px;
  background: #0C0F1C;
  animation: bounce 1s infinite ease-in-out;
}

.loader-bars span:nth-child(2) {
  animation-delay: 0.15s;
}

.loader-bars span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes bounce {
  0%, 100% {
    transform: scaleY(0.4);
    opacity: 0.6;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* fade out effect */
#loader::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 240px;
  background: white;
  pointer-events: none;
}

#loader.hide {
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s ease;
}

/* While a section switch is in progress we freeze the page so the mobile
   browser's URL bar cannot animate. That URL-bar animation is what slides the
   fixed loader and briefly exposes a strip of the page at the bottom. With the
   viewport frozen, the loader stays put and nothing can peek through. */
html.nav-locking,
html.nav-locking body {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}

    /* --- Product / About / News photos --- */
    .product-photo { display:block; width: calc(100% + 56px); height: 158px; object-fit: cover; margin: -36px -28px 22px; border-bottom: 1px solid var(--border); transition: transform .6s cubic-bezier(.2,1,.3,1); }
    .about-photo { display:block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 42%; border: 1px solid var(--border); margin-bottom: 20px; }
    /* "Who We Are" storefront photo — show the full 16:9 frame, sign always visible */
    .ab-split img.ab-photo { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 45%; border: 1px solid var(--border); background: var(--darker); }
    .news-photo { display:block; width: calc(100% + 56px); height: 172px; object-fit: cover; margin: -36px -28px 22px; }

    /* --- Footer social icons --- */
    .footer-socials { display: flex; gap: 14px; align-items: center; }
    .social-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); color: var(--muted); background: var(--mid); text-decoration: none; transition: color .2s, background .2s, border-color .2s, transform .15s; }
    .social-btn:hover { transform: translateY(-2px); color: #fff; }
    .social-btn.social-fb:hover { background: #1877F2; border-color: #1877F2; }
    .social-btn.social-ig:hover { background: #E1306C; border-color: #E1306C; }
    .social-btn.social-x:hover { background: #1877F2; border-color: #1877F2; }

    @media (max-width: 900px) {
      .logo-img { height: 84px; width: 90px; background-size: 90px 84px; }
      .footer-socials { justify-content: center; }
    }

    /* ===== Multi-page routing & sub-pages ===== */
    .page { display: none; }
    .page.active { display: block; animation: pageFade .5s ease both; }
    @keyframes pageFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

    .subpage-banner { position: relative; padding: 172px 48px 72px; text-align: center; background-size: cover; background-position: center; overflow: hidden; }
    .subpage-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(12,15,28,0.82), rgba(12,15,28,0.93)); }
    .subpage-banner > * { position: relative; z-index: 2; }
    /* Contact page banner: side-fade overlay + icons nudged right + taller hero (Option B) */
    .contact-banner { background-size: 116% !important; background-position: 20% center !important; background-repeat: no-repeat !important; padding-top: 206px !important; padding-bottom: 116px !important; }
    .contact-banner::after { background: linear-gradient(90deg, rgba(12,15,28,0.90) 0%, rgba(12,15,28,0.68) 42%, rgba(12,15,28,0.30) 100%) !important; }
    .subpage-eyebrow { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--red); margin-bottom: 14px; }
    .subpage-banner h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 60px; line-height: .95; text-transform: uppercase; letter-spacing: .5px; }
    .subpage-banner p.lead { color: var(--muted); font-weight: 300; max-width: 640px; margin: 16px auto 0; font-size: 17px; line-height: 1.6; }

    .subpage-wrap { max-width: 1180px; margin: 0 auto; padding: 70px 48px; }
    .ab-split { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: center; margin-bottom: 66px; }
    .ab-split:last-child { margin-bottom: 0; }
    .ab-split img { width: 100%; height: 340px; object-fit: cover; border: 1px solid var(--border); }
    .ab-split h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 33px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 16px; }
    .ab-split h2 em { font-style: normal; color: var(--red); }
    .ab-split p { color: var(--muted); font-weight: 300; line-height: 1.8; margin-bottom: 14px; font-size: 15.5px; }
    .ab-split.reverse .ab-txt { order: 2; }

    .ab-stats { background: var(--mid); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .ab-stats-inner { max-width: 1180px; margin: 0 auto; padding: 46px 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
    .ab-stat .num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 44px; color: var(--light); line-height: 1; }
    .ab-stat .num span { color: var(--red); }
    .ab-stat .lbl { color: var(--muted); font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; margin-top: 8px; }

    .section-heading { text-align: center; margin-bottom: 40px; }
    .section-heading h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 31px; text-transform: uppercase; letter-spacing: .4px; }
    .ab-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
    .ab-card { border: 1px solid var(--border); background: var(--dark); padding: 28px 24px; }
    .ab-card .ico { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(212,44,44,.12); color: var(--red); margin-bottom: 16px; }
    .ab-card h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 8px; }
    .ab-card p { color: var(--muted); font-weight: 300; font-size: 14px; line-height: 1.65; }

    .ab-cta { text-align: center; padding: 64px 48px; border-top: 1px solid var(--border); background: linear-gradient(rgba(212,44,44,.06), transparent); }
    .ab-cta h2 { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 34px; text-transform: uppercase; margin-bottom: 10px; }
    .ab-cta p { color: var(--muted); font-weight: 300; margin-bottom: 24px; }

    @media (max-width: 900px) {
      .subpage-banner { padding: 140px 22px 54px; }
      .subpage-banner h1 { font-size: 44px; }
      .subpage-wrap { padding: 50px 22px; }
      .ab-split { grid-template-columns: 1fr; gap: 24px; margin-bottom: 46px; }
      .ab-split.reverse .ab-txt { order: 0; }
      .ab-stats-inner { grid-template-columns: repeat(2, 1fr); gap: 26px; padding: 36px 22px; }
      .ab-values { grid-template-columns: 1fr 1fr; }
      .ab-cta { padding: 46px 22px; }
    }
    @media (max-width: 520px) { .ab-values { grid-template-columns: 1fr; } }
    /* ===== Products / Brands / Services / Contact ===== */
    .pcat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
    .pcat { display: grid; grid-template-columns: 210px 1fr; border: 1px solid var(--border); background: var(--dark); overflow: hidden; }
    .pcat-photo { background-size: cover; background-position: center; min-height: 190px; border-right: 1px solid var(--border); }
    .pcat-body { padding: 24px 26px; }
    .pcat-body h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
    .pcat-body p { color: var(--muted); font-weight: 300; font-size: 14px; line-height: 1.6; margin-bottom: 10px; }
    .pcat-brands { font-size: 12.5px; color: var(--muted); }
    .pcat-brands b { color: var(--light); font-weight: 600; }
    .pcat-body a.mini { display: inline-block; margin-top: 14px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); text-decoration: none; }
    .pcat-body a.mini:hover { text-decoration: underline; }
    .brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .brand-card { border: 1px solid var(--border); background: var(--dark); padding: 34px 22px; text-align: center; transition: border-color .25s, transform .25s; }
    .brand-card:hover { border-color: var(--red); transform: translateY(-3px); }
    .brand-card .bname { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: .5px; text-transform: uppercase; color: var(--light); }
    .brand-card .bcat { color: var(--muted); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-top: 8px; }
    .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
    .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 6px; }
    .step { text-align: center; padding: 10px; }
    .step .n { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--red); color: var(--red); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 20px; margin: 0 auto 14px; }
    .step h4 { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; font-size: 16px; margin-bottom: 6px; letter-spacing: .3px; }
    .step p { color: var(--muted); font-weight: 300; font-size: 13.5px; line-height: 1.6; }
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 40px; }
    .loc-card { border: 1px solid var(--border); background: var(--dark); padding: 28px; }
    .loc-card h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 20px; text-transform: uppercase; margin-bottom: 12px; }
    .loc-card p { color: var(--muted); font-weight: 300; font-size: 14px; line-height: 1.7; margin-bottom: 12px; }
    .loc-card a.maplink { display: inline-flex; align-items: center; gap: 7px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); text-decoration: none; transition: color .2s ease; }
    .loc-card a.maplink:hover { color: var(--light); }
    /* embedded map */
    .map-embed { position: relative; border: 1px solid var(--border); border-top: 3px solid var(--red); border-radius: 10px; overflow: hidden; margin-bottom: 16px; line-height: 0; box-shadow: 0 12px 30px rgba(0,0,0,.30); }
    .map-embed iframe { width: 100%; height: 210px; border: 0; display: block; filter: grayscale(.25) contrast(1.05) brightness(.97); transition: filter .35s ease; }
    .map-embed:hover iframe { filter: grayscale(0) contrast(1) brightness(1); }
    /* modern red location icon (shared by both link styles) */
    .loc-ico { width: 15px; height: 15px; color: var(--red); flex-shrink: 0; vertical-align: -2px; transition: transform .25s ease; }
    a.maplink:hover .loc-ico, a.map-link:hover .loc-ico { transform: scale(1.18) translateY(-1px); }
    a.map-link { display: inline-flex; align-items: center; gap: 6px; }
    .contact-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 46px; }
    .cm { border: 1px solid var(--border); background: var(--mid); padding: 24px; text-align: center; }
    .cm .lbl { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
    .cm .val, .cm a { color: var(--light); font-weight: 500; font-size: 14.5px; text-decoration: none; word-break: break-word; }
    /* Enquiry form: full-width panel, two columns, larger fields. */
    .contact-form-wrap { max-width: none; margin: 0; }
    .contact-form-wrap .contact-form { position: relative; display: grid; grid-template-columns: 1fr 1fr;
      gap: 24px 26px; background: var(--dark); border: 1px solid var(--border); padding: 42px 40px 40px;
      box-shadow: inset -3px 0 0 0 var(--red); }
    .contact-form-wrap .contact-form::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0;
      width: 3px; background: var(--red); }
    .contact-form-wrap .contact-form::after { content: ''; position: absolute; right: -70px; top: -70px;
      width: 240px; height: 240px; transform: rotate(35deg);
      background: linear-gradient(rgba(212,44,44,.10), transparent); pointer-events: none; }
    .contact-form-wrap .form-row { display: contents; }
    .contact-form-wrap .form-group { position: relative; z-index: 1; gap: 10px; }
    .contact-form-wrap .form-group.full, .contact-form-wrap .contact-form > button { grid-column: 1 / -1; }
    .contact-form-wrap .form-group label { font-size: 11.5px; letter-spacing: 2.2px; }
    .contact-form-wrap .form-group input,
    .contact-form-wrap .form-group select,
    .contact-form-wrap .form-group textarea { padding: 18px 20px; font-size: 16px;
      background: var(--mid); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
    .contact-form-wrap .form-group input:hover,
    .contact-form-wrap .form-group select:hover,
    .contact-form-wrap .form-group textarea:hover { border-color: rgba(212,44,44,.45); }
    .contact-form-wrap .form-group input:focus,
    .contact-form-wrap .form-group select:focus,
    .contact-form-wrap .form-group textarea:focus { border-color: var(--red);
      box-shadow: 0 0 0 3px rgba(212,44,44,.16); background: var(--dark); }
    .contact-form-wrap .form-group textarea { min-height: 190px; }
    .contact-form-wrap .contact-form > button { margin-top: 6px; position: relative; z-index: 1; }
    @media (max-width: 760px) {
      .contact-form-wrap .contact-form { grid-template-columns: 1fr; gap: 20px; padding: 30px 20px 28px; }
      .contact-form-wrap .form-group input,
      .contact-form-wrap .form-group select,
      .contact-form-wrap .form-group textarea { padding: 16px 16px; font-size: 16px; }
      .contact-form-wrap .form-group textarea { min-height: 160px; }
    }
    @media (max-width: 900px) {
      .pcat-grid { grid-template-columns: 1fr; }
      .brand-grid { grid-template-columns: repeat(2, 1fr); }
      .svc-grid, .steps, .contact-grid, .contact-methods { grid-template-columns: 1fr; }
    }
    @media (max-width: 520px) {
      .pcat { grid-template-columns: 1fr; }
      .pcat-photo { min-height: 160px; border-right: none; border-bottom: 1px solid var(--border); }
      .brand-grid { grid-template-columns: 1fr; }
    }
    .pcat-tags { display: flex; flex-wrap: wrap; gap: 7px; }
    .pcat-tags span { font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); border-radius: 20px; padding: 4px 11px; }
    /* --- Products page: content below the category cards --- */
    .pv-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 52px; }
    .pv-flow::before { content: ''; position: absolute; left: 12%; right: 12%; top: 38px; height: 1px;
      background: linear-gradient(90deg, transparent, var(--border) 10%, var(--border) 90%, transparent); }
    .pv-step { position: relative; text-align: center; }
    .pv-step .dot { position: relative; width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%;
      border: 1px solid var(--border); background: var(--dark); display: flex; align-items: center; justify-content: center;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 30px; color: var(--red);
      transition: border-color .25s, transform .25s; }
    .pv-step .dot::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid rgba(212,44,44,.18); }
    .pv-step:hover .dot { border-color: var(--red); transform: translateY(-4px); }
    .pv-step h4 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 17px; text-transform: uppercase;
      letter-spacing: .5px; margin-bottom: 8px; color: var(--light); }
    .pv-step p { color: var(--muted); font-weight: 300; font-size: 13.5px; line-height: 1.65; }
    .pv-prose { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; margin-top: 44px; }
    .pv-prose p { color: var(--muted); font-weight: 300; font-size: 15px; line-height: 1.85; margin-bottom: 18px; }
    .pv-prose p:last-child { margin-bottom: 0; }
    .pv-prose b { color: var(--light); font-weight: 600; }
    .pv-prose .col { position: relative; padding-left: 22px; }
    .pv-prose .col::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--border); }
    .pv-prose .col::after { content: ''; position: absolute; left: -2px; top: 6px; width: 5px; height: 42px; background: var(--red); }
    /* --- Services page: FAQ (native <details>, no JS) --- */
    .svc-faq { max-width: 900px; margin: 42px auto 0; }
    .svc-faq details { border: 1px solid var(--border); background: var(--dark); margin-bottom: 12px;
      transition: border-color .25s, background .25s; }
    .svc-faq details[open] { border-color: rgba(212,44,44,.55); background: var(--mid); }
    .svc-faq summary { list-style: none; cursor: pointer; padding: 20px 58px 20px 24px; position: relative;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; text-transform: uppercase;
      letter-spacing: .4px; color: var(--light); }
    .svc-faq summary::-webkit-details-marker { display: none; }
    .svc-faq summary::after { content: ''; position: absolute; right: 26px; top: 50%; width: 10px; height: 10px;
      margin-top: -7px; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
      transform: rotate(45deg); transition: transform .25s; }
    .svc-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
    .svc-faq summary:hover { color: var(--red); }
    .svc-faq .a { padding: 0 26px 22px; color: var(--muted); font-weight: 300; font-size: 14.5px; line-height: 1.8; }
    .svc-faq .a b { color: var(--light); font-weight: 600; }
    /* --- Services page: ordering timeline (vertical, to contrast the
       horizontal circle flow used on the Products page) --- */
    .svc-track { position: relative; max-width: 940px; margin: 46px auto 0; padding-left: 92px; }
    .svc-track::before { content: ''; position: absolute; left: 33px; top: 14px; bottom: 30px; width: 2px;
      background: linear-gradient(var(--red), rgba(212,44,44,.10)); }
    .svc-stage { position: relative; padding-bottom: 38px; }
    .svc-stage:last-child { padding-bottom: 0; }
    .svc-stage .marker { position: absolute; left: -92px; top: -2px; width: 68px; height: 68px;
      background: var(--mid); border: 1px solid var(--border); display: flex; align-items: center;
      justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 22px;
      color: var(--red); transition: border-color .25s, background .25s, transform .25s; }
    .svc-stage .marker::after { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(212,44,44,.16); }
    .svc-stage:hover .marker { border-color: var(--red); background: var(--dark); transform: translateX(4px); }
    .svc-stage h4 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px;
      text-transform: uppercase; letter-spacing: .4px; color: var(--light); margin-bottom: 9px; }
    .svc-stage p { color: var(--muted); font-weight: 300; font-size: 14.5px; line-height: 1.8; max-width: 640px; }
    .svc-stage .tag { display: inline-block; margin-top: 13px; font-size: 11px; letter-spacing: 1.4px;
      text-transform: uppercase; color: var(--red); border: 1px solid rgba(212,44,44,.42);
      border-radius: 20px; padding: 5px 13px; }
    /* --- About page: pull-quote + trading principles --- */
    .ab-quote { position: relative; max-width: 900px; margin: 76px auto 0; padding: 54px 50px 48px;
      border: 1px solid var(--border); background: var(--mid); overflow: hidden; text-align: center; }
    .ab-quote::before { content: '\201C'; position: absolute; left: 24px; top: -30px;
      font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 180px; line-height: 1;
      color: rgba(212,44,44,.13); pointer-events: none; }
    .ab-quote::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
      width: 92px; height: 3px; background: var(--red); }
    .ab-quote p { position: relative; z-index: 1; font-size: 20px; line-height: 1.8; color: var(--light);
      font-weight: 300; }
    .ab-quote .who { position: relative; z-index: 1; margin-top: 22px; font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--muted); }
    .ab-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; }
    .ab-principle { position: relative; border: 1px solid var(--border); background: var(--dark);
      padding: 34px 28px 30px; overflow: hidden; transition: border-color .25s, transform .25s; }
    .ab-principle:hover { border-color: var(--red); transform: translateY(-4px); }
    .ab-principle .ghost { position: absolute; right: 8px; top: -26px; font-family: 'Barlow Condensed', sans-serif;
      font-weight: 900; font-size: 112px; line-height: 1; color: rgba(238,240,236,.05); pointer-events: none; }
    .ab-principle h4 { position: relative; z-index: 1; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
      font-size: 19px; text-transform: uppercase; letter-spacing: .4px; color: var(--light); margin-bottom: 10px; }
    .ab-principle p { position: relative; z-index: 1; color: var(--muted); font-weight: 300; font-size: 14px;
      line-height: 1.75; }
    /* --- Vision & Mission: claim/practice rows + forward commitments --- */
    .vm-rows { margin-top: 42px; border-top: 1px solid var(--border); }
    .vm-row { position: relative; display: grid; grid-template-columns: 290px 1fr; gap: 34px;
      padding: 26px 22px 26px 0; border-bottom: 1px solid var(--border);
      transition: background .25s ease, padding-left .25s ease; }
    .vm-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
      background: var(--red); transition: width .25s ease; }
    .vm-row:hover { background: rgba(255,255,255,.022); padding-left: 18px; }
    .vm-row:hover::before { width: 3px; }
    .vm-claim { display: flex; align-items: flex-start; gap: 12px; font-family: 'Barlow Condensed', sans-serif;
      font-weight: 700; font-size: 21px; text-transform: uppercase; letter-spacing: .4px; color: var(--light); }
    .vm-claim i { font-style: normal; color: var(--red); line-height: 1.1; }
    .vm-real { color: var(--muted); font-weight: 300; font-size: 14.5px; line-height: 1.8; }
    .vm-real b { color: var(--light); font-weight: 600; }
    .vm-ahead { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 42px; }
    .vm-goal { position: relative; border: 1px solid var(--border); background: var(--dark);
      padding: 32px 28px 28px; transition: border-color .25s ease, transform .25s ease; }
    .vm-goal::before { content: ''; position: absolute; left: 0; top: 0; width: 58px; height: 3px; background: var(--red); }
    .vm-goal:hover { border-color: var(--red); transform: translateY(-4px); }
    .vm-goal .k { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; letter-spacing: 2.6px;
      text-transform: uppercase; color: var(--red); margin-bottom: 13px; }
    .vm-goal h4 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 19px;
      text-transform: uppercase; letter-spacing: .4px; color: var(--light); margin-bottom: 10px; }
    .vm-goal p { color: var(--muted); font-weight: 300; font-size: 14px; line-height: 1.75; }
    @media (max-width: 900px) { .vm-ahead { grid-template-columns: 1fr; } }
    @media (max-width: 760px) {
      .vm-row { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
      .vm-row:hover { padding-left: 14px; }
      .vm-claim { font-size: 18px; }
    }
    @media (max-width: 900px) { .ab-principles { grid-template-columns: 1fr; } }
    @media (max-width: 520px) {
      .ab-quote { padding: 40px 24px 36px; }
      .ab-quote p { font-size: 17px; line-height: 1.7; }
      .ab-quote::before { font-size: 130px; left: 12px; top: -20px; }
    }
    @media (max-width: 700px) {
      .svc-track { padding-left: 66px; margin-top: 34px; }
      .svc-track::before { left: 23px; }
      .svc-stage { padding-bottom: 30px; }
      .svc-stage .marker { left: -66px; width: 48px; height: 48px; font-size: 17px; }
      .svc-stage .marker::after { inset: 4px; }
      .svc-stage h4 { font-size: 17px; }
      .svc-stage p { font-size: 14px; line-height: 1.75; }
    }
    @media (max-width: 520px) {
      .svc-faq summary { font-size: 16px; padding: 17px 48px 17px 18px; }
      .svc-faq .a { padding: 0 18px 18px; font-size: 14px; }
    }
    @media (max-width: 900px) {
      .pv-flow { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
      .pv-flow::before { display: none; }
      .pv-prose { grid-template-columns: 1fr; gap: 30px; }
    }
    @media (max-width: 520px) {
      .pv-flow { grid-template-columns: 1fr; }
      .pv-step .dot { width: 64px; height: 64px; font-size: 25px; margin-bottom: 16px; }
    }
    .brands-intro { text-align: center; color: var(--muted); font-weight: 300; margin: 0 auto 46px; font-size: 15.5px; line-height: 1.8; max-width: 760px; }
    .brand-group { margin-bottom: 42px; }
    .brand-group-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; color: var(--red); margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
    .brand-note { text-align: center; color: var(--muted); font-weight: 300; margin: 6px auto 0; font-size: 14.5px; line-height: 1.7; max-width: 700px; }
    .ab-values.cols3 { grid-template-columns: repeat(3, 1fr); }
    @media (max-width: 900px) { .ab-values.cols3 { grid-template-columns: 1fr; } }
    .banner-stats { display: flex; justify-content: center; flex-wrap: wrap; margin-top: 42px; }
    .banner-stats .bstat { padding: 0 36px; position: relative; }
    .banner-stats .bstat + .bstat::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 44px; width: 1px; background: rgba(238,240,236,0.20); }
    .banner-stats .num { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 44px; color: var(--light); line-height: 1; }
    .banner-stats .num span { color: var(--red); }
    .banner-stats .num span.stat-counter { color: var(--light); }
    .banner-stats .lbl { color: rgba(238,240,236,0.74); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-top: 8px; }
    @media (max-width: 700px) {
      .banner-stats .bstat { padding: 14px 22px; }
      .banner-stats .num { font-size: 34px; }
      .banner-stats .bstat + .bstat::before { display: none; }
    }
    .pledge { border: 1px solid var(--border); border-left: 3px solid var(--red); background: var(--mid); padding: 32px 36px; max-width: 860px; margin: 46px auto 0; }
    .pledge h3 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 24px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 12px; }
    .pledge p { color: var(--muted); font-weight: 300; line-height: 1.8; font-size: 15px; }
    /* Header search + mobile hamburger menu */
    .nav-right { display: flex; align-items: center; gap: 14px; }
    .nav-search { position: relative; display: flex; align-items: center; gap: 2px; }
    .search-input { width: 190px; opacity: 1; padding: 0 15px; height: 38px; border: 1px solid var(--border); border-radius: 22px; background: var(--mid); color: var(--light); font-family: 'Barlow', sans-serif; font-size: 13.5px; outline: none; transition: border-color .2s; }
    .search-input::placeholder { color: var(--muted); }
    .search-input:focus { border-color: var(--red); }
    .search-toggle { background: none; border: none; color: var(--muted); cursor: pointer; padding: 6px; display: flex; align-items: center; transition: color .2s; }
    .search-toggle:hover { color: var(--red); }
    .hamburger { display: none; }
    .mobile-menu { display: none; }
    @media (max-width: 900px) {
      .nav-search { display: none; }
      .btn-quote { display: none; }
      .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; background: none; border: none; cursor: pointer; padding: 9px; }
      .hamburger span { display: block; height: 2px; width: 100%; background: var(--light); border-radius: 2px; transition: transform .3s ease, opacity .2s ease; }
      .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
      .hamburger.active span:nth-child(2) { opacity: 0; }
      .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
      .mobile-menu { display: block; position: fixed; left: 0; right: 0; top: 104px; background: rgba(12,15,28,0.98); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); max-height: 0; overflow: hidden; transition: max-height .35s ease; z-index: 99; }
      .mobile-menu.open { max-height: 560px; box-shadow: 0 18px 40px rgba(0,0,0,.42); }
      .mobile-menu a { display: block; padding: 16px 24px; color: var(--light); text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .6px; border-bottom: 1px solid var(--border); }
      .mobile-menu a.active { color: var(--red); }
      .mobile-search { display: flex; gap: 10px; padding: 18px 24px 22px; }
      .mobile-search input { flex: 1; height: 46px; border: 1px solid var(--border); border-radius: 8px; background: var(--mid); color: var(--light); padding: 0 15px; font-family: 'Barlow', sans-serif; font-size: 15px; outline: none; }
      .mobile-search input:focus { border-color: var(--red); }
      .mobile-search input::placeholder { color: var(--muted); }
      .mobile-search button { width: 50px; height: 46px; border: none; border-radius: 8px; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
    }
    /* Search results */
    .sr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
    .sr-card { display: block; border: 1px solid var(--border); background: var(--dark); padding: 26px 24px; text-decoration: none; transition: border-color .25s, transform .25s; }
    .sr-card:hover { border-color: var(--red); transform: translateY(-3px); }
    .sr-cat { font-family: 'Barlow', sans-serif; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); font-weight: 600; margin-bottom: 10px; }
    .sr-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 23px; text-transform: uppercase; color: var(--light); margin-bottom: 8px; line-height: 1.05; }
    .sr-desc { color: var(--muted); font-weight: 300; font-size: 14px; line-height: 1.6; margin-bottom: 16px; }
    .sr-go { font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--red); }
    @media (max-width: 900px) { .sr-grid { grid-template-columns: 1fr; } }
    /* =====================  MOBILE  ===================== */
    @media (max-width: 760px) {
      /* --- FIX 1: brands row — clean 2-column grid instead of pyramid --- */
      .brands-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
      .brand-badge { width: 100%; padding: 18px 10px; font-size: 14px; letter-spacing: 1px; }
      .brand-badge:last-child:nth-child(odd) { grid-column: 1 / -1; } /* lone last badge spans full width */
      .brands-subtitle { margin-bottom: 30px; }

      /* --- FIX 2: footer — single column, nothing overflows --- */
      .footer-top { grid-template-columns: 1fr !important; gap: 34px; }
      .footer-about { grid-column: auto; }
      .footer-name { white-space: normal; }
      .footer-contact li, .footer-contact a, .footer-desc { overflow-wrap: anywhere; word-break: break-word; }
      .footer-heading { margin-bottom: 16px; }
      .footer-bottom { flex-direction: column; text-align: center; gap: 8px; }

      /* --- FIX 4: contact hero — one image, properly sized (no stacking) --- */
      .contact-banner {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        padding-top: 118px !important;
        padding-bottom: 60px !important;
      }
      .contact-banner::after {
        background: linear-gradient(rgba(12,15,28,0.72), rgba(12,15,28,0.88)) !important; /* even, readable */
      }

      /* --- general subpage banners on phone --- */
      .subpage-banner { padding: 118px 20px 52px; }
      .subpage-banner h1 { font-size: 38px; }
      .subpage-banner p.lead { font-size: 15px; }
      .subpage-eyebrow { font-size: 11px; letter-spacing: 2px; }

      /* --- hero: fit the small screen cleanly --- */
      .hero { min-height: auto; padding-top: 120px; padding-bottom: 60px; }
      .hero-content { padding: 0 22px; }
      .hero h1 { font-size: clamp(40px, 12vw, 60px); }
      .hero-sub { font-size: 15.5px; margin-bottom: 32px; }
      .hero-ctas { gap: 12px; margin-bottom: 44px; }
      .hero-ctas .btn-primary, .hero-ctas .btn-outline { flex: 1 1 100%; text-align: center; }
      .hero-stats { gap: 22px 30px; padding-top: 30px; }

      /* --- generous, consistent section spacing --- */
      section { padding: 60px 20px; }
      .section-title { font-size: clamp(30px, 8vw, 40px); }
    }

    /* --- FIX 3: "Our Mission" (and any embedded graphic) shows in full, not cropped --- */
    @media (max-width: 900px) {
      .ab-split img[src^="data:"] { height: auto; object-fit: contain; background: var(--darker); }
    }

    /* --- Genuine Products seal: a badge, not a photo. Contain it and give it
       room, rather than letting `cover` crop a circle into a rectangle. --- */
    .ab-split img.ab-badge { height: 340px; object-fit: contain; padding: 34px;
      background: radial-gradient(circle at 50% 45%, rgba(212,44,44,.13), transparent 62%), var(--darker);
      border: 1px solid var(--border); }
    @media (max-width: 900px) {
      .ab-split img.ab-badge { height: 300px; padding: 26px; }
    }
    @media (max-width: 520px) {
      .ab-split img.ab-badge { height: 240px; padding: 20px; }
    }

    /* --- Company-profile slide: a designed graphic, not a photo. Show the whole
       frame at its own ratio so nothing is cropped and no letterbox bars appear. --- */
    /* `contain` letterboxes on sub-pixel rounding, and the element's own white
       background then showed as a hairline down the right edge. `cover` at the
       image's exact ratio crops that fraction of a pixel instead. */
    .ab-split img.ab-slide { height: auto; aspect-ratio: var(--ar, 895 / 501); object-fit: cover;
      background: transparent; border: 1px solid var(--border); }
    @media (max-width: 900px) { .ab-split img.ab-slide { height: auto; } }

    /* --- Shared image interaction: the About Us section images and the home
       Operational Data photo all lift slightly on hover, and on tap for touch
       devices, which have no hover state. --- */
    .ab-split img, .about-photo {
      transition: transform .45s cubic-bezier(.22,.61,.36,1), border-color .3s ease;
      will-change: transform; backface-visibility: hidden; }
    .ab-split img:hover, .about-photo:hover { transform: scale(1.035); }
    .ab-split img:active, .about-photo:active { transform: scale(1.02); }
    @media (hover: none) {
      .ab-split img:hover, .about-photo:hover { transform: none; }
      .ab-split img:active, .about-photo:active { transform: scale(1.035); }
    }
    @media (prefers-reduced-motion: reduce) {
      .ab-split img, .about-photo { transition: none; }
      .ab-split img:hover, .ab-split img:active,
      .about-photo:hover, .about-photo:active { transform: none; }
    }

    /* Card interactions on touch / no-hover devices:
       tapping a card fills its accent line fully and holds it (via .is-active),
       instead of only showing during the brief press. Clean resting state, no stub lines. */
    @media (hover: none) {
      /* ---- WHY CHOOSE US: red line grows top-to-bottom, fills fully on tap ---- */
      .why-card { box-shadow: 0 10px 26px rgba(0,0,0,.28); }
      .why-card::before { height: 0; opacity: 1; }
      .why-num { background: linear-gradient(135deg, #ff6b6b, var(--red)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
      .why-grid .why-card:active { transform: translateY(-4px); }
      .why-grid .why-card.is-active { background: var(--dark); transform: translateY(-6px) scale(.997); box-shadow: 0 18px 38px rgba(0,0,0,.45); border-color: rgba(212,44,44,.6); z-index: 2; }
      .why-grid .why-card.is-active::before { height: 100%; opacity: 1; }
      .why-grid .why-card.is-active .why-num { transform: translateY(-3px) scale(1.09); filter: drop-shadow(0 6px 14px rgba(212,44,44,.42)); }
      .why-grid .why-card.is-active .why-title { letter-spacing: 1px; }

      /* ---- NEWS cards ---- */
      .news-card { box-shadow: 0 10px 26px rgba(0,0,0,.28); }
      .news-card::after { height: 0; opacity: 1; }
      .news-grid .news-card:active { transform: translateY(-4px); }
      .news-grid .news-card.is-active { transform: translateY(-7px) scale(.997); box-shadow: 0 18px 40px rgba(0,0,0,.45); border-color: rgba(212,44,44,.6); }
      .news-grid .news-card.is-active::after { height: 100%; opacity: 1; }

      /* ---- OUR RANGE cards: bottom red underline sweeps fully on tap ---- */
      .product-card { box-shadow: 0 10px 26px rgba(0,0,0,.26); }
      .product-card::after { width: 0; opacity: 1; }
      .products-grid .product-card:active { transform: translateY(-4px); }
      .products-grid .product-card.is-active { background: #1b2033; transform: translateY(-8px); box-shadow: 0 20px 42px rgba(0,0,0,.48); border-color: rgba(212,44,44,.6); z-index: 3; }
      .products-grid .product-card.is-active::after { width: 100%; opacity: 1; }
      .products-grid .product-card.is-active::before { left: 140%; }
      .products-grid .product-card.is-active .product-photo { transform: scale(1.08); }
      .products-grid .product-card.is-active .product-name { letter-spacing: 1.5px; }

      /* ---- TRUSTED BRANDS: underline grows from 0 to full on tap (no stub line at rest) ---- */
      .brand-badge { box-shadow: 0 8px 20px rgba(0,0,0,.22); }
      .brand-badge::after { width: 0; opacity: 1; }
      .brands-row .brand-badge:active { transform: translateY(-3px); }
      .brands-row .brand-badge.is-active { transform: translateY(-5px); color: #eaf1ff; border-color: var(--blue); background: linear-gradient(180deg, rgba(47,124,246,.05), rgba(47,124,246,.17)); box-shadow: 0 14px 30px rgba(47,124,246,.34); letter-spacing: 2px; }
      .brands-row .brand-badge.is-active::after { width: 100%; opacity: 1; }
    }