:root{
    --brand:#E84E1B;
    --brand-dark:#B83A12;
    --brand-light:#FDE8DF;
    --charcoal:#1F1F1F;
    --slate:#3C3C3C;
    --mute:#6B6B6B;
    --softbg:#F7F7F5;
    --line:#E5E5E2;
  }
  html{ scroll-behavior:smooth; }
  body{
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    background:#FFFFFF;
    color:var(--charcoal);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4,h5{ font-weight:700; letter-spacing:-0.01em; }

  /* ===== GLOBAL RESPONSIVE SAFEGUARDS =====
     Enforce mobile / tablet / desktop hygiene on every page. */
  *, *::before, *::after{ box-sizing: border-box; }
  img, video, iframe{ max-width: 100%; height: auto; }
  iframe{ display: block; }
  /* Prevent long words (URLs, emails) from breaking layout on narrow screens */
  p, h1, h2, h3, h4, h5, li, a, span, td, th, label{
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  /* Smooth scrolling when jumping to anchors with fixed header above */
  section[id]{ scroll-margin-top: 80px; }

  /* ------------ HEADER ------------- */
  .top-utility{ background:var(--charcoal); color:#ffffff; }
  .top-utility a:hover{ color:var(--brand); }

  /* Primary nav underline hover */
  .nav-a{
    position:relative; padding: 26px 0; display:inline-block;
    font-weight:600; font-size:14px; color:var(--charcoal);
    transition: color .25s ease;
  }
  .nav-a:hover, .nav-a.active{ color:var(--brand); }
  .nav-a::after{
    content:''; position:absolute; left:0; bottom:16px; width:100%; height:2px;
    background:var(--brand); transform: scaleX(0); transform-origin:right;
    transition: transform .35s cubic-bezier(.77,0,.175,1);
  }
  .nav-a:hover::after, .nav-a.active::after{ transform: scaleX(1); transform-origin:left; }

  .dd-wrap{ position:relative; }
  .dd-wrap .dd{
    opacity:0; visibility:hidden; transform: translateY(10px);
    transition: all .3s ease; position:absolute; top:100%; left:-12px;
    min-width:290px; background:#ffffff; border-top:3px solid var(--brand);
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.15);
    padding:8px; z-index:60;
  }
  .dd-wrap:hover .dd, .dd-wrap:focus-within .dd{ opacity:1; visibility:visible; transform: translateY(0); }
  .dd a{
    display:block; padding:10px 14px; font-size:13px; color:var(--slate);
    border-left:2px solid transparent; transition: all .2s ease;
  }
  .dd a:hover{ background:var(--softbg); color:var(--brand); border-left-color:var(--brand); }

  /* ------------ SECOND HEADER (mega strip) ------------- */
  .mega-bar{
    background: linear-gradient(90deg, var(--brand) 0%, #F76A32 55%, var(--brand) 100%);
    color:#fff;
  }
  .mega-triggers-row{
    display:flex; align-items:stretch;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .mega-triggers-row::-webkit-scrollbar{ display:none; }
  .mega-trigger{
    flex-shrink:0;
    display:inline-flex; align-items:center; gap:8px;
    padding: 12px 18px; font-weight:700; font-size:13px;
    text-transform:uppercase; letter-spacing:.06em;
    border-right:1px solid rgba(255,255,255,.18);
    transition: background .25s ease;
    cursor:pointer; white-space:nowrap;
    background:transparent; color:#fff;
  }
  .mega-trigger:hover, .mega-trigger.is-open{ background:rgba(0,0,0,.14); }
  .mega-trigger i.arrow{
    width:18px; height:18px; border-radius:50%;
    background: rgba(255,255,255,.18); display:inline-flex;
    align-items:center; justify-content:center; font-size:10px;
    transition: transform .3s ease;
  }
  .mega-trigger.is-open i.arrow{ transform: rotate(180deg); }

  /* Mobile-only tweaks for mega bar */
  @media (max-width: 767px){
    .mega-trigger{
      padding: 11px 14px; font-size: 11.5px; gap:6px;
      letter-spacing: .04em;
    }
    .mega-trigger i.arrow{ width:14px; height:14px; font-size:8px; }
    .mega-trigger > i:first-child{ font-size: 12px; }
  }

  .mega-panel{
    display:none;
    background:#ffffff; border-top:1px solid var(--line);
    box-shadow: 0 30px 60px -15px rgba(0,0,0,.12);
  }
  .mega-panel.is-open{ display:block; animation: fadeSlide .35s ease; }
  @keyframes fadeSlide { from{opacity:0; transform: translateY(-6px);} to{opacity:1; transform: translateY(0);} }

  .mega-col-title{
    font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--brand); font-weight:700; margin-bottom:10px;
    border-bottom:1px solid var(--line); padding-bottom:8px;
  }
  .mega-col-group{ font-size:13px; font-weight:700; color:var(--charcoal); margin:14px 0 6px; }
  .mega-link{
    display:block; padding:4px 0; font-size:13px; color:var(--slate);
    transition: all .2s ease; position:relative; padding-left:14px;
  }
  .mega-link::before{
    content:''; position:absolute; left:0; top:11px;
    width:6px; height:1px; background:var(--line); transition: all .2s ease;
  }
  .mega-link:hover{ color:var(--brand); padding-left:18px; }
  .mega-link:hover::before{ background:var(--brand); width:10px; }

  /* ------------ BANNER HERO ------------- */
  .hero-swiper .swiper-slide img{ width:100%; height:100%; object-fit:cover; }
  .hero-swiper .swiper-pagination-bullet{
    width:28px; height:3px; border-radius:0; background:#ffffff; opacity:.45;
  }
  .hero-swiper .swiper-pagination-bullet-active{ opacity:1; background:var(--brand); }
  .hero-nav-btn{
    width:52px; height:52px; border-radius:50%; background: rgba(255,255,255,.12);
    backdrop-filter: blur(10px); border:1px solid rgba(255,255,255,.25);
    color:#ffffff; display:flex; align-items:center; justify-content:center;
    transition: all .3s ease;
  }
  .hero-nav-btn:hover{ background:var(--brand); border-color:var(--brand); transform: scale(1.05); }

  /* ------------ SECTION HELPERS ------------- */
  .section{ padding: 80px 0; }
  @media(max-width:768px){ .section{ padding:60px 0; } }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    font-weight:700; color:var(--brand);
  }
  .eyebrow::before{
    content:''; display:block; width:32px; height:1px; background:var(--brand);
  }
  .section-title{
    font-family:'Open Sans', sans-serif; font-weight:800;
    font-size:clamp(28px, 4vw, 46px); line-height:1.15;
    color:var(--charcoal); letter-spacing:-0.015em;
  }
  .section-title .accent{ color:var(--brand); }
  .btn-primary{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 28px; background:var(--brand); color:#ffffff;
    font-weight:600; font-size:14px; border-radius:2px;
    transition: all .3s ease; border:1px solid var(--brand);
  }
  .btn-primary:hover{ background:var(--brand-dark); border-color:var(--brand-dark); transform: translateY(-2px); box-shadow: 0 10px 25px -8px rgba(232,78,27,.45); }
  .btn-outline{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 28px; background:transparent; color:var(--charcoal);
    font-weight:600; font-size:14px; border-radius:2px;
    border:1px solid var(--charcoal); transition: all .3s ease;
  }
  .btn-outline:hover{ background:var(--charcoal); color:#ffffff; }

  /* ------------ GAME CARDS ------------- */
  .game-card{
    background:#ffffff; border:1px solid var(--line);
    transition: all .4s ease; overflow:hidden; height:100%;
    display:flex; flex-direction:column;
  }
  /* Games swiper — contain overflow on mobile, allow bleed on desktop */
  .games-swiper-overflow{ overflow:hidden !important; }
  @media (min-width: 1024px){
    .games-swiper-overflow{ overflow:visible !important; }
  }
  .game-card:hover{ border-color:var(--brand); box-shadow: 0 20px 40px -15px rgba(0,0,0,.12); transform: translateY(-4px); }
  .game-card .game-img{ height:180px; overflow:hidden; position:relative; background:#f0f0ee; }
  .game-card .game-img img{ width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
  .game-card:hover .game-img img{ transform: scale(1.08); }
  .game-badge{
    position:absolute; top:12px; left:12px;
    background:var(--brand); color:#fff; font-size:11px;
    padding:4px 10px; font-weight:700; letter-spacing:.1em;
  }

  /* ------------ WORLD / PORTFOLIO TILES ------------- */
  .world-tile{
    position:relative; overflow:hidden; cursor:pointer;
    background:#000; aspect-ratio: 4/3;
    border:1px solid var(--line);
  }
  .world-tile img{
    width:100%; height:100%; object-fit:cover;
    transition: transform .7s ease, opacity .4s ease;
    opacity:.78;
  }
  .world-tile:hover img{ transform: scale(1.08); opacity:.55; }
  .world-tile .wt-overlay{
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.85) 100%);
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:22px; color:#fff;
  }
  .world-tile .wt-num{
    position:absolute; top:18px; right:18px;
    width:38px; height:38px; border-radius:50%;
    background: rgba(255,255,255,.12); backdrop-filter: blur(8px);
    border:1px solid rgba(255,255,255,.3);
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700;
  }
  .world-tile h3{
    font-size:20px; font-weight:700; margin-bottom:6px;
    transform: translateY(8px); transition: transform .35s ease;
  }
  .world-tile p{ font-size:12px; opacity:0; transform: translateY(12px); transition: all .35s ease .05s; }
  .world-tile .wt-cta{
    display:inline-flex; align-items:center; gap:8px;
    margin-top:10px; font-size:12px; font-weight:700; color:var(--brand);
    text-transform:uppercase; letter-spacing:.1em;
    opacity:0; transform: translateY(12px); transition: all .35s ease .1s;
  }
  .world-tile:hover h3{ transform: translateY(0); }
  .world-tile:hover p, .world-tile:hover .wt-cta{ opacity:1; transform: translateY(0); }

  /* ------------ MODAL ------------- */
  .modal{
    position:fixed; inset:0; z-index:200;
    display:none; align-items:center; justify-content:center;
    padding:20px;
  }
  .modal.open{ display:flex; }
  .modal-backdrop{
    position:absolute; inset:0; background:rgba(10,10,10,.75);
    backdrop-filter: blur(6px); animation: fadeIn .3s ease;
  }
  .modal-panel{
    position:relative; z-index:1;
    background:#fff; width:100%; max-width:720px;
    max-height:88vh; overflow:hidden;
    border-top:4px solid var(--brand);
    box-shadow: 0 40px 80px rgba(0,0,0,.4);
    animation: zoomIn .35s cubic-bezier(.22,1,.36,1);
    display:flex; flex-direction:column;
  }
  @keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
  @keyframes zoomIn { from{opacity:0; transform: scale(.94) translateY(20px);} to{opacity:1; transform: scale(1) translateY(0);} }
  .modal-header{
    padding:22px 26px; border-bottom:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:center;
    background:var(--softbg);
  }
  .modal-title{ font-size:20px; font-weight:800; color:var(--charcoal); }
  .modal-close{
    width:36px; height:36px; border-radius:50%;
    background:#fff; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition: all .2s ease;
  }
  .modal-close:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
  .modal-body{ padding:22px 26px; overflow-y:auto; }
  .modal-link{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; border-bottom:1px solid var(--line);
    font-size:14px; color:var(--slate); transition: all .2s ease;
  }
  .modal-link:hover{ background:var(--brandLight); color:var(--brand); padding-left:20px; }
  .modal-link i{ color:var(--brand); font-size:12px; }

  /* ------------ TESTIMONIALS (carousel) ------------- */
  .testimonial-swiper{ padding-bottom: 4px; }
  .testimonial-swiper .swiper-slide{ height:auto; }
  .t-card{
    background:#ffffff;
    border:1px solid var(--line);
    display:grid; grid-template-columns: 1fr;
    overflow:hidden; height:100%;
    box-shadow: 0 8px 30px -15px rgba(0,0,0,.1);
    transition: all .35s ease;
  }
  .t-card:hover{ box-shadow: 0 20px 45px -18px rgba(0,0,0,.15); border-color:var(--brand); }

  @media (min-width: 768px){
    .t-card{ grid-template-columns: 240px 1fr; }
  }
  @media (min-width: 1024px){
    .t-card{ grid-template-columns: 280px 1fr; }
  }

  .t-logo-wrap{
    background: linear-gradient(135deg, #FFFFFF 0%, #FDE8DF 100%);
    display:flex; align-items:center; justify-content:center;
    padding: 28px 24px;
    min-height: 160px;
    border-bottom:1px solid var(--line);
    position:relative;
  }
  .t-logo-wrap::before{
    content:''; position:absolute; inset:0;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(232,78,27,.08) 0, transparent 45%),
      radial-gradient(circle at 80% 70%, rgba(232,78,27,.06) 0, transparent 45%);
    pointer-events:none;
  }
  .t-logo-wrap img{
    max-width: 85%; max-height: 120px; object-fit:contain;
    position:relative; z-index:1;
  }
  .t-logo-fallback{
    font-size: 22px; font-weight: 800; color: var(--brand);
    letter-spacing: .05em; position:relative; z-index:1;
  }
  @media (min-width: 768px){
    .t-logo-wrap{
      min-height: 100%;
      border-bottom:none; border-right:1px solid var(--line);
      padding: 32px 22px;
    }
    .t-logo-wrap img{ max-height: 160px; }
  }

  .t-body{
    padding: 28px 26px 26px;
    display:flex; flex-direction:column;
    position:relative;
  }
  .t-body::before{
    content:'"'; position:absolute; top: 6px; right: 22px;
    font-family: Georgia, serif; font-size: 110px; line-height:1;
    color:var(--brand); opacity:.12; pointer-events:none;
  }
  @media (min-width: 768px){
    .t-body{ padding: 36px 38px 34px; }
  }

  .t-stars{
    display:flex; gap:4px; color: var(--brand);
    font-size:13px; margin-bottom: 14px;
  }
  .t-text{
    font-size: 15px; line-height: 1.75; color: var(--slate);
    margin-bottom: 22px; flex:1; position:relative; z-index:1;
  }
  @media (min-width: 768px){
    .t-text{ font-size: 16px; line-height: 1.8; }
  }
  .t-meta{ padding-top: 18px; border-top: 1px solid var(--line); }
  .t-org{ font-size: 16px; font-weight: 800; color: var(--charcoal); }
  .t-role{ font-size: 12px; color: var(--mute); margin-top: 2px; }

  /* Swiper pagination styling specific to testimonials */
  .testimonial-swiper .swiper-pagination-bullet{
    width: 28px !important; height: 3px !important;
    border-radius: 0 !important;
    background: var(--charcoal) !important; opacity: .2 !important;
  }
  .testimonial-swiper .swiper-pagination-bullet-active{
    background: var(--brand) !important; opacity: 1 !important;
  }

  /* ------------ BROCHURES (homepage download cards) ------------- */
  /*
     6 cards arranged in:
     -  1 col on mobile      (<640px)
     -  2 cols on small      (sm: 640px+)
     -  3 cols on medium     (lg: 1024px+)
     -  6 cols on large      (xl: 1280px+)
     The Tailwind grid classes on the section handle the responsive
     column count; styles here cover the card visual + hover behaviour.
  */
  .brochure-card{
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--line);
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    overflow: hidden;
    position: relative;
  }
  .brochure-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -18px rgba(232,78,27,.25);
    border-color: var(--brand);
  }

  /* Thumb area — gradient with large PDF icon + badge */
  .brochure-thumb{
    position: relative;
    height: 140px;
    background: linear-gradient(135deg, var(--brand-light) 0%, #ffffff 60%, #fdf3ee 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
  }
  .brochure-thumb > i:first-child{
    color: var(--brand);
    font-size: 56px;
    transition: transform .35s ease;
    filter: drop-shadow(0 4px 12px rgba(232,78,27,.15));
  }
  .brochure-card:hover .brochure-thumb > i:first-child{
    transform: scale(1.12) rotate(-4deg);
  }
  .brochure-badge{
    position: absolute;
    top: 10px; right: 10px;
    background: var(--charcoal);
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .12em;
    padding: 3px 8px;
    text-transform: uppercase;
  }

  /* Body */
  .brochure-body{
    padding: 16px 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .brochure-cat{
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--brand);
    font-weight: 800;
    margin-bottom: 6px;
  }
  .brochure-title{
    font-size: 14px;
    font-weight: 700;
    color: var(--charcoal);
    line-height: 1.35;
    flex: 1;
    margin-bottom: 14px;
  }
  .brochure-cta{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: .08em;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
    transition: color .2s ease, gap .25s ease;
  }
  .brochure-cta > i{
    font-size: 11px;
    transition: transform .25s ease;
  }
  .brochure-card:hover .brochure-cta{
    color: var(--brand);
    gap: 10px;
  }
  .brochure-card:hover .brochure-cta > i{
    transform: translateY(2px);
  }

  /* Slightly larger thumb on small screens where the card is wider */
  @media (max-width: 639px){
    .brochure-thumb{ height: 160px; }
    .brochure-thumb > i:first-child{ font-size: 64px; }
    .brochure-title{ font-size: 15px; }
  }

  /* Tighten thumb height when 6 cards squeeze into one row on xl screens */
  @media (min-width: 1280px){
    .brochure-thumb{ height: 130px; }
    .brochure-thumb > i:first-child{ font-size: 48px; }
    .brochure-body{ padding: 14px 14px 16px; }
    .brochure-title{ font-size: 13px; min-height: 36px; }
  }

  /* ------------ FOOTER ------------- */
  .footer-main{ background:var(--charcoal); color:#cfcfcf; }
  .footer-col-title{
    color:#ffffff; font-size:14px; font-weight:700; margin-bottom:18px;
    padding-bottom:12px; position:relative;
  }
  .footer-col-title::after{
    content:''; position:absolute; left:0; bottom:0;
    width:36px; height:2px; background:var(--brand);
  }
  .footer-link{
    display:block; font-size:13px; color:#b0b0b0;
    padding:5px 0; transition: all .2s ease;
  }
  .footer-link:hover{ color:var(--brand); padding-left:6px; }
  .footer-contact i{ color:var(--brand); width:18px; }
  .social-btn{
    width:38px; height:38px; border-radius:50%;
    background:rgba(255,255,255,.06); display:inline-flex;
    align-items:center; justify-content:center; color:#fff;
    transition: all .3s ease;
  }
  .social-btn:hover{ background:var(--brand); transform: translateY(-3px); }
  .footer-bottom{ background:#151515; color:#8a8a8a; font-size:12px; }

  /* ------------ MOBILE ------------ */
  .mobile-menu{ transform: translateX(100%); transition: transform .4s cubic-bezier(.77,0,.175,1); }
  .mobile-menu.open{ transform: translateX(0); }

  .marquee-logos{ animation: scrollX 40s linear infinite; width:max-content; }
  @keyframes scrollX { from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* Scroll progress */
  #scrollbar{
    position:fixed; top:0; left:0; height:2px;
    background: var(--brand); width:0%; z-index:300;
    transition: width .1s linear;
  }

  /* Focus */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--brand); outline-offset:3px;
  }

  /* Count circles */
  .stat-chip{
    display:inline-flex; align-items:center; gap:10px;
    padding: 8px 16px; background:#fff; border:1px solid var(--line);
    border-radius:99px; font-size:13px; color:var(--charcoal);
  }
  .stat-chip b{ color:var(--brand); }
  /* ============== CONTACT PAGE STYLES ============== */

  /* ============== MEDIA ROOM PAGE ============== */

  /* Featured article — big horizontal card */
  .featured-article{
    display: grid;
    grid-template-columns: 1fr;
    background: #fff;
    border: 1px solid var(--line);
    overflow: hidden;
    transition: all .3s ease;
  }
  .featured-article:hover{
    border-color: var(--brand);
    transform: translateY(-3px);
    box-shadow: 0 22px 45px -18px rgba(0,0,0,.12);
  }
  @media (min-width: 768px){
    .featured-article{
      grid-template-columns: minmax(0, 48%) 1fr;
    }
  }
  .featured-image{
    position: relative; overflow: hidden; background: var(--softbg);
    aspect-ratio: 16/10;
  }
  @media (min-width: 768px){
    .featured-image{ aspect-ratio: auto; min-height: 340px; }
  }
  .featured-image img{
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s ease;
  }
  .featured-article:hover .featured-image img{ transform: scale(1.04); }
  .featured-badge{
    position: absolute; top: 14px; left: 14px;
    background: var(--brand); color: #fff;
    font-size: 10.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .12em;
    padding: 5px 10px;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .featured-body{
    padding: 24px 24px 28px;
    display: flex; flex-direction: column; justify-content: center;
  }
  @media (min-width: 768px){
    .featured-body{ padding: 32px 36px; }
  }
  .featured-meta{
    display: flex; align-items: center; gap: 8px;
    font-size: 11px; color: var(--mute);
    text-transform: uppercase; letter-spacing: .12em;
    font-weight: 700; margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .featured-cat{
    background: var(--brandLight); color: var(--brand);
    padding: 3px 8px;
  }
  .featured-body h3{
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 800; color: var(--charcoal);
    line-height: 1.25; margin-bottom: 12px;
  }
  .featured-body p{
    font-size: 14px; color: var(--slate); line-height: 1.7;
    margin-bottom: 18px;
  }
  .featured-cta{
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 800; color: var(--brand);
    text-transform: uppercase; letter-spacing: .1em;
    transition: transform .25s ease;
  }
  .featured-article:hover .featured-cta{ transform: translateX(4px); }

  /* Toolbar — search + filters */
  .mr-toolbar{
    display: flex; flex-direction: column; gap: 12px;
    padding: 14px;
    background: var(--softbg);
    border: 1px solid var(--line);
  }
  @media (min-width: 900px){
    .mr-toolbar{
      flex-direction: row; align-items: center; gap: 16px;
      padding: 14px 16px;
    }
  }
  .mr-search{
    flex: 1; position: relative;
    background: #fff; border: 1px solid var(--line);
    display: flex; align-items: center;
    min-width: 0;
  }
  .mr-search:focus-within{
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(232,78,27,.12);
  }
  .mr-search > i{
    width: 44px; height: 44px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--brand); font-size: 14px;
    border-right: 1px solid var(--line);
  }
  .mr-search input{
    flex: 1; padding: 12px 14px; font-size: 14px;
    background: transparent; border: 0; outline: none;
    font-family: inherit; width: 100%; min-width: 0;
  }
  .mr-search input::placeholder{ color: #a6a6a6; }

  .mr-filters{
    display: flex; gap: 6px; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: 2px;
    flex-shrink: 0;
  }
  .mr-filters::-webkit-scrollbar{ display: none; }
  .mr-filter-btn{
    flex-shrink: 0;
    padding: 8px 14px; font-size: 12px; font-weight: 700;
    color: var(--charcoal); background: #fff;
    border: 1px solid var(--line); cursor: pointer;
    transition: all .2s ease;
    text-transform: uppercase; letter-spacing: .05em;
    white-space: nowrap;
  }
  .mr-filter-btn:hover{
    border-color: var(--brand); color: var(--brand);
  }
  .mr-filter-btn.is-active{
    background: var(--brand); border-color: var(--brand); color: #fff;
  }

  /* Media cards */
  .mr-card{
    background: #fff; border: 1px solid var(--line); overflow: hidden;
    display: flex; flex-direction: column;
    transition: all .3s ease;
    height: 100%;
  }
  .mr-card:hover{
    border-color: var(--brand);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -18px rgba(0,0,0,.12);
  }
  .mr-card-img{
    position: relative; overflow: hidden;
    aspect-ratio: 16/10; background: var(--softbg);
  }
  .mr-card-img img{
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s ease;
  }
  .mr-card:hover .mr-card-img img{ transform: scale(1.06); }
  .mr-card-tag{
    position: absolute; top: 10px; left: 10px;
    background: var(--brand); color: #fff;
    font-size: 10px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .12em;
    padding: 4px 8px;
  }
  .mr-card-body{
    padding: 18px 18px 20px;
    display: flex; flex-direction: column; flex: 1;
  }
  .mr-card-body h3{
    font-size: 16px; font-weight: 800; color: var(--charcoal);
    line-height: 1.35; margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mr-card-body p{
    font-size: 13.5px; color: var(--mute); line-height: 1.6;
    margin-bottom: 14px; flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mr-card-cta{
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 800; color: var(--brand);
    text-transform: uppercase; letter-spacing: .1em;
    margin-top: auto;
  }
  .mr-card-cta i{ transition: transform .25s ease; font-size: 10px; }
  .mr-card:hover .mr-card-cta i{ transform: translateX(4px); }

  @media (min-width: 768px){
    .mr-card-body{ padding: 20px 20px 22px; }
    .mr-card-body h3{ font-size: 17px; }
  }

  /* "What it consists of" — image + video cards */
  .consists-card{
    background: #fff; border: 1px solid var(--line);
    overflow: hidden; display: flex; flex-direction: column;
    transition: all .3s ease;
  }
  .consists-card:hover{
    border-color: var(--brand);
    box-shadow: 0 20px 45px -20px rgba(0,0,0,.15);
  }
  .consists-head{
    display: flex; align-items: center; gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg, #fff 0%, var(--brandLight) 200%);
    flex-wrap: wrap;
  }
  .consists-head-ico{
    width: 40px; height: 40px; flex-shrink: 0;
    background: var(--brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
  }
  .consists-head-label{
    font-size: 10px; text-transform: uppercase; letter-spacing: .15em;
    color: var(--brand); font-weight: 800;
  }
  .consists-head-title{
    font-size: 16px; font-weight: 800; color: var(--charcoal);
    line-height: 1.25;
  }
  .consists-head-cta{
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; color: var(--brand);
    text-transform: uppercase; letter-spacing: .08em;
    white-space: nowrap;
  }
  .consists-head-cta:hover{ color: var(--brand-dark); }
  /* Hide CTA on very small screens to keep header tidy */
  @media (max-width: 420px){
    .consists-head-cta{ display: none; }
  }

  .consists-media{
    position: relative; width: 100%;
    aspect-ratio: 16/9;
    background: var(--softbg);
    overflow: hidden;
  }
  .consists-media img,
  .consists-media iframe{
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0; display: block;
  }
  /* Responsive heights — give image a bit more breathing room on mobile */
  @media (max-width: 767px){
    .consists-media{ aspect-ratio: 4/3; }
  }



  /* Gallery thumbnails */
  .p-thumb{
    aspect-ratio: 1/1; overflow: hidden;
    border: 2px solid var(--line); background: var(--softbg);
    transition: all .25s ease; cursor: pointer; padding: 0;
  }
  .p-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
  .p-thumb:hover{ border-color: var(--brand); }
  .p-thumb:hover img{ transform: scale(1.08); }
  .p-thumb.is-active{ border-color: var(--brand); box-shadow: 0 0 0 2px rgba(232,78,27,.18); }

  /* Brand check-list (used in product hero) */
  .check-list-brand{ list-style: none; padding: 0; margin: 0; }
  .check-list-brand li{
    display:flex; gap: 10px; font-size: 14px; color: var(--slate); line-height: 1.55;
  }
  .check-list-brand li i{ color: var(--brand); font-size: 14px; margin-top: 4px; flex-shrink: 0; }

  /* Product tab bar */
  .p-tab-btn{
    display:inline-flex; align-items:center; gap:8px; flex-shrink: 0;
    padding: 16px 18px; font-size: 13px; font-weight: 700;
    color: var(--mute); background: transparent; border: 0;
    border-bottom: 2px solid transparent; cursor: pointer;
    transition: all .25s ease;
    text-transform: uppercase; letter-spacing: .05em;
  }
  .p-tab-btn:hover{ color: var(--charcoal); }
  .p-tab-btn.is-active{ color: var(--brand); border-bottom-color: var(--brand); }
  .p-tab-btn i{ font-size: 12px; }
  @media (max-width: 640px){
    .p-tab-btn{ padding: 12px 12px; font-size: 11.5px; }
  }
  .scrollbar-none::-webkit-scrollbar{ display:none; }
  .scrollbar-none{ scrollbar-width: none; }

  /* Product tab panels */
  .p-tab-panel{ display: none; }
  .p-tab-panel.is-active{ display: block; animation: p-fade .35s ease; }
  @keyframes p-fade{ from{opacity:0; transform: translateY(8px);} to{opacity:1; transform: translateY(0);} }

  /* Feature cards */
  .feature-card{
    background: #fff; border: 1px solid var(--line);
    padding: 24px 22px; transition: all .3s ease;
  }
  .feature-card:hover{
    border-color: var(--brand);
    transform: translateY(-3px);
    box-shadow: 0 18px 38px -15px rgba(0,0,0,.1);
  }
  .feature-ico{
    width: 46px; height: 46px; background: var(--brandLight); color: var(--brand);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px; margin-bottom: 14px;
    transition: all .3s ease;
  }
  .feature-card:hover .feature-ico{ background: var(--brand); color: #fff; }
  .feature-card h3{ font-size: 16px; font-weight: 800; color: var(--charcoal); margin-bottom: 7px; line-height: 1.3; }
  .feature-card p{ font-size: 13.5px; color: var(--mute); line-height: 1.6; }

  /* Variant cards */
  .variant-card{
    background: #fff; border: 1px solid var(--line); overflow: hidden;
    display: flex; flex-direction: column;
    transition: all .3s ease;
  }
  .variant-card:hover{
    border-color: var(--brand);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -15px rgba(0,0,0,.12);
  }
  .variant-img{ aspect-ratio: 4/3; overflow: hidden; background: var(--softbg); }
  .variant-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
  .variant-card:hover .variant-img img{ transform: scale(1.05); }
  .variant-body{ padding: 22px 20px; flex: 1; }
  .variant-tag{
    display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .15em;
    color: var(--brand); font-weight: 800; margin-bottom: 8px;
    padding: 3px 8px; background: var(--brandLight);
  }
  .variant-body h3{ font-size: 17px; font-weight: 800; color: var(--charcoal); margin-bottom: 8px; line-height: 1.3; }
  .variant-body p{ font-size: 13px; color: var(--mute); line-height: 1.6; }

  /* Spec table */
  .spec-table{ width: 100%; border-collapse: collapse; font-size: 14px; }
  .spec-table th, .spec-table td{
    padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--line);
  }
  .spec-table th{
    width: 45%; background: var(--softbg);
    font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--mute); font-weight: 700;
  }
  .spec-table td{ color: var(--charcoal); font-weight: 600; }
  .spec-table tr:last-child th, .spec-table tr:last-child td{ border-bottom: 0; }
  .spec-table tr:hover td, .spec-table tr:hover th{ background: rgba(232,78,27,.04); }
  @media (max-width: 640px){
    .spec-table th, .spec-table td{ padding: 10px 14px; font-size: 13px; }
    .spec-table th{ font-size: 11px; }
  }

  /* Download cards */
  .download-card{
    display: flex; align-items: center; gap: 14px;
    padding: 18px 18px; background: #fff; border: 1px solid var(--line);
    transition: all .3s ease;
  }
  .download-card:hover{
    border-color: var(--brand); background: var(--brandLight);
    transform: translateY(-2px);
  }
  .download-ico{
    width: 46px; height: 46px; background: var(--brandLight); color: var(--brand);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
    transition: all .3s ease;
  }
  .download-card:hover .download-ico{ background: var(--brand); color: #fff; }
  .download-body{ flex: 1; min-width: 0; }
  .download-label{ font-size: 14px; font-weight: 800; color: var(--charcoal); line-height: 1.3; }
  .download-meta{ font-size: 11px; color: var(--mute); text-transform: uppercase; letter-spacing: .1em; margin-top: 2px; }
  .download-arrow{ color: var(--brand); font-size: 14px; transition: transform .3s ease; }
  .download-card:hover .download-arrow{ transform: translateY(2px); }

  /* Scenario tiles */
  .scenario-tile{
    position: relative; overflow: hidden;
    background: #000; aspect-ratio: 1/1;
    transition: all .3s ease;
  }
  .scenario-tile:hover{ transform: translateY(-3px); box-shadow: 0 18px 38px -15px rgba(0,0,0,.2); }
  .scenario-tile img{
    width: 100%; height: 100%; object-fit: cover;
    opacity: .85; transition: all .5s ease;
  }
  .scenario-tile:hover img{ opacity: .6; transform: scale(1.08); }
  .scenario-tile .scenario-label{
    position: absolute; left: 14px; right: 14px; bottom: 14px;
    color: #fff; font-weight: 800; font-size: 14px; line-height: 1.3;
    text-shadow: 0 2px 8px rgba(0,0,0,.5);
  }
  @media (min-width: 640px){
    .scenario-tile .scenario-label{ font-size: 15px; }
  }

  /* Related product cards */
  .related-card{
    background: #fff; border: 1px solid var(--line); overflow: hidden;
    display: flex; flex-direction: column;
    transition: all .3s ease;
  }
  .related-card:hover{
    border-color: var(--brand);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -15px rgba(0,0,0,.12);
  }
  .related-img{ aspect-ratio: 4/3; overflow: hidden; background: var(--softbg); }
  .related-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
  .related-card:hover .related-img img{ transform: scale(1.07); }
  .related-body{ padding: 18px 18px; flex: 1; display: flex; flex-direction: column; }
  .related-body h3{ font-size: 16px; font-weight: 800; color: var(--charcoal); margin-bottom: 6px; line-height: 1.3; }
  .related-body p{ font-size: 13px; color: var(--mute); line-height: 1.55; flex: 1; margin-bottom: 10px; }
  .related-cta{
    font-size: 12px; font-weight: 800; color: var(--brand);
    text-transform: uppercase; letter-spacing: .1em;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .related-cta i{ transition: transform .25s ease; }
  .related-card:hover .related-cta i{ transform: translateX(3px); }



  /* City selection tiles */
  .city-tile{
    display:flex; flex-direction:column; align-items:flex-start;
    background:#ffffff; border: 1px solid var(--line);
    padding: 18px 16px; text-align: left; cursor: pointer;
    transition: all .3s ease; position: relative; overflow: hidden;
    width: 100%;
  }
  .city-tile:hover{
    border-color: var(--brand);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px -10px rgba(232,78,27,.25);
  }
  .city-tile.is-selected{
    background: var(--brand);
    border-color: var(--brand);
    color: #ffffff;
  }
  .city-tile.is-selected .city-ico{
    background: rgba(255,255,255,.2); color: #ffffff;
  }
  .city-tile.is-selected .city-tag{ color: rgba(255,255,255,.85); }
  .city-tile.is-selected::after{
    content:'\\f00c'; font-family:'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; top: 10px; right: 12px;
    width: 22px; height: 22px;
    background: rgba(255,255,255,.25);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px;
  }
  .city-ico{
    width: 38px; height: 38px;
    background: var(--brandLight); color: var(--brand);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; margin-bottom: 10px;
    transition: all .3s ease;
  }
  .city-name{
    font-size: 17px; font-weight: 800; line-height: 1.2; margin-bottom: 2px;
  }
  .city-tag{
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
    color: var(--mute); font-weight: 600;
  }
  @media (max-width: 640px){
    .city-tile{ padding: 14px 12px; }
    .city-ico{ width: 32px; height: 32px; font-size: 12px; margin-bottom: 8px; }
    .city-name{ font-size: 15px; }
    .city-tag{ font-size: 9.5px; }
  }

  /* Expect cards — "what to expect" at the Experience Center */
  .expect-card{
    background:#ffffff; border: 1px solid var(--line);
    padding: 26px 22px; transition: all .3s ease;
    position: relative;
  }
  .expect-card:hover{
    border-color: var(--brand);
    transform: translateY(-4px);
    box-shadow: 0 18px 38px -15px rgba(0,0,0,.12);
  }
  .expect-ico{
    width: 52px; height: 52px;
    background: var(--brandLight); color: var(--brand);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; margin-bottom: 16px;
    transition: all .3s ease;
  }
  .expect-card:hover .expect-ico{
    background: var(--brand); color: #ffffff;
  }
  .expect-card h3{
    font-size: 17px; font-weight: 800; color: var(--charcoal);
    margin-bottom: 8px; line-height: 1.3;
  }
  .expect-card p{
    font-size: 13.5px; color: var(--mute); line-height: 1.6;
  }
  @media (min-width: 768px){
    .expect-card{ padding: 30px 26px; }
  }


  .hero-chip{
    display:flex; align-items:center; gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.18);
    color: #ffffff;
    transition: all .3s ease;
    min-height: 58px;
    overflow: hidden;
  }
  .hero-chip:hover{
    background: var(--brand);
    border-color: var(--brand);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -8px rgba(232,78,27,.4);
  }
  .hero-chip-ico{
    width: 34px; height: 34px; flex-shrink: 0;
    background: rgba(255,255,255,.15);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: all .3s ease;
  }
  .hero-chip:hover .hero-chip-ico{
    background: rgba(0,0,0,.2);
  }
  .hero-chip-label{
    font-size: 9.5px; text-transform: uppercase; letter-spacing: .14em;
    opacity: .75; font-weight: 600; line-height: 1.2; margin-bottom: 2px;
  }
  .hero-chip-val{
    font-weight: 700; font-size: 12.5px; line-height: 1.25;
  }
  @media (max-width: 767px){
    .hero-chip{ padding: 9px 10px; gap: 8px; min-height: 54px; }
    .hero-chip-ico{ width: 30px; height: 30px; font-size: 11px; }
    .hero-chip-val{ font-size: 11.5px; }
  }
  .info-tile{
    background:#ffffff; border:1px solid var(--line);
    padding:18px 16px; text-align:center;
    transition: all .3s ease; display:block;
  }
  .info-tile:hover{ border-color:var(--brand); transform: translateY(-3px); box-shadow: 0 12px 25px -10px rgba(0,0,0,.1); }
  .info-tile .info-ico{
    width:38px; height:38px; border-radius:50%;
    background: var(--brandLight); color: var(--brand);
    display:inline-flex; align-items:center; justify-content:center;
    margin-bottom: 10px; font-size: 14px;
  }
  .info-label{ font-size: 10px; text-transform:uppercase; letter-spacing:.15em; font-weight:700; color: var(--mute); margin-bottom: 3px; }
  .info-val{ font-size: 13px; font-weight: 800; color: var(--charcoal); }

  /* Form */
  .field label{
    display:block; font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
    font-weight: 700; color: var(--charcoal); margin-bottom: 8px;
  }
  .field .req{ color: var(--brand); }
  .input-wrap{
    position: relative;
    background:#ffffff; border: 1px solid var(--line);
    transition: all .25s ease;
    display:flex; align-items:center;
  }
  .input-wrap:focus-within{ border-color: var(--brand); box-shadow: 0 0 0 3px rgba(232,78,27,.12); }
  .input-wrap > i{
    width: 44px; height: 44px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    color: var(--brand); font-size: 14px;
    border-right: 1px solid var(--line);
  }
  .input-wrap input, .input-wrap select, .input-wrap textarea{
    flex:1; padding: 12px 14px; font-size: 14px; color: var(--charcoal);
    background: transparent; border: 0; outline: none; width:100%;
    font-family: inherit;
  }
  .input-wrap select{
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%23E84E1B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    padding-right: 42px;
    cursor: pointer;
  }
  .input-wrap:focus-within select{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%23B83A12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
  }
  .input-wrap-ta{ align-items: flex-start; }
  .input-wrap-ta > i{ height: 44px; }
  .input-wrap textarea{ resize: vertical; min-height: 110px; padding-top: 12px; }
  .input-wrap input::placeholder, .input-wrap textarea::placeholder{ color: #a6a6a6; }

  /* Quick cards */
  .quick-card{
    display:block; background:#ffffff; border:1px solid var(--line);
    padding: 26px 22px; transition: all .35s ease;
    position: relative; overflow: hidden;
  }
  @media (min-width: 768px){
    .quick-card{ padding: 32px 28px; }
  }
  .quick-card::after{
    content:''; position:absolute; left:0; bottom:0;
    width:100%; height: 3px; background: var(--brand);
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s ease;
  }
  .quick-card:hover{ transform: translateY(-5px); box-shadow: 0 25px 50px -20px rgba(0,0,0,.15); }
  .quick-card:hover::after{ transform: scaleX(1); }
  .quick-card .qc-ico{
    width: 56px; height: 56px; background: var(--brandLight);
    color: var(--brand); display:inline-flex;
    align-items:center; justify-content:center;
    font-size: 22px; margin-bottom: 18px;
    transition: all .3s ease;
  }
  .quick-card:hover .qc-ico{ background: var(--brand); color: #fff; }
  .quick-card h3{ font-size: 20px; font-weight: 800; color: var(--charcoal); margin-bottom: 10px; }
  .quick-card p{ font-size: 14px; color: var(--mute); line-height: 1.6; margin-bottom: 18px; }
  .qc-cta{ display:inline-flex; align-items:center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .08em; }

  /* FAQ */
  .faq-item{
    background:#ffffff; border: 1px solid var(--line);
    transition: all .3s ease;
  }
  .faq-item[open]{ border-color: var(--brand); box-shadow: 0 10px 30px -15px rgba(232,78,27,.2); }
  .faq-item summary{
    list-style: none; cursor: pointer;
    padding: 18px 22px; display:flex; align-items:center; justify-content:space-between; gap: 16px;
    font-size: 15px; font-weight: 700; color: var(--charcoal);
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-icon{
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--brandLight); color: var(--brand);
    display:inline-flex; align-items:center; justify-content:center;
    font-size: 11px; flex-shrink: 0;
    transition: all .3s ease;
  }
  .faq-item[open] .faq-icon{ background: var(--brand); color:#fff; transform: rotate(45deg); }
  .faq-answer{ padding: 0 22px 20px; color: var(--slate); font-size: 14px; line-height: 1.75; }


  /* ============================================================
     SECTION 29 — PROFESSIONAL LED DISPLAYS (catalog page)
     Used by: professional-led-displays.html
     ============================================================ */

  /* --- Hero --- */
  .led-hero{
    background:
      radial-gradient(1200px 600px at 90% -10%, rgba(232,78,27,.08), transparent 60%),
      linear-gradient(180deg, #FAFAF8 0%, #F2F2EE 100%);
    border-bottom: 1px solid var(--line);
  }
  .led-hero-badge{
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px;
    background: var(--brand-light);
    color: var(--brand-dark);
    font-weight: 700; font-size: 12px;
    letter-spacing: .08em; text-transform: uppercase;
    border-left: 3px solid var(--brand);
  }
  .led-hero-badge i{ color: var(--brand); }

  /* --- Category tabs --- */
  .led-cat-tabs{
    display: flex; flex-wrap: wrap; gap: 8px;
    padding-bottom: 4px;
  }
  .led-cat-btn{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    background: #ffffff;
    color: var(--slate);
    border: 1px solid var(--line);
    font-size: 13px; font-weight: 600;
    letter-spacing: .02em;
    transition: all .25s ease;
    cursor: pointer;
    border-radius: 2px;
  }
  .led-cat-btn i{ color: var(--mute); font-size: 12px; }
  .led-cat-btn:hover{ border-color: var(--brand); color: var(--brand); }
  .led-cat-btn:hover i{ color: var(--brand); }
  .led-cat-btn.is-active{
    background: var(--charcoal); color: #ffffff;
    border-color: var(--charcoal);
  }
  .led-cat-btn.is-active i{ color: var(--brand); }

  /* --- Grid: one card per column, two images on top, separated bottom text --- */
  .led-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 24px;
  }
  @media (max-width: 1024px){
    .led-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
  }
  @media (max-width: 640px){
    .led-grid{ grid-template-columns: 1fr; gap: 18px; }
  }

  /* --- The card --- */
  .led-item{
    display: flex; flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 2px;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    text-decoration: none;
    color: inherit;
    position: relative;
  }
  .led-item:hover{
    transform: translateY(-6px);
    box-shadow: 0 24px 50px -20px rgba(31,31,31,.18);
    border-color: var(--brand);
  }

  /* Top: two images split 50/50 with a hairline gap */
  .led-item-img{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: var(--line);
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  .led-item-img .led-img-cell{
    position: relative;
    overflow: hidden;
    background: #f4f4f1;
  }
  .led-item-img .led-img-cell img{
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
    transition: transform .8s ease;
  }
  .led-item:hover .led-img-cell img{ transform: scale(1.06); }

  /* Number badge (top-left of left image) */
  .led-item-num{
    position: absolute; top: 12px; left: 12px;
    background: var(--brand); color: #fff;
    font-weight: 800; font-size: 12px;
    letter-spacing: .1em;
    padding: 5px 10px;
    border-radius: 2px;
    z-index: 3;
  }
  /* Hover overlay across both images */
  .led-item-overlay{
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(31,31,31,0) 50%, rgba(31,31,31,.55) 100%);
    display: flex; align-items: flex-end; justify-content: flex-end;
    padding: 14px;
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 2;
    pointer-events: none;
  }
  .led-item-overlay i{
    width: 38px; height: 38px;
    background: var(--brand); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
  }
  .led-item:hover .led-item-overlay{ opacity: 1; }

  /* Category pill on the seam between the two images */
  .led-item-cat{
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff; color: var(--charcoal);
    font-size: 10px; font-weight: 800;
    letter-spacing: .15em; text-transform: uppercase;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    opacity: 0;
    transition: opacity .3s ease .05s, transform .35s ease;
    z-index: 3;
    pointer-events: none;
    white-space: nowrap;
  }
  .led-item:hover .led-item-cat{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }

  /* Bottom: separated text block */
  .led-item-body{
    padding: 22px 22px 24px;
    background: #ffffff;
    border-top: 1px solid var(--line);
    position: relative;
    flex: 1 1 auto;
    display: flex; flex-direction: column;
  }
  .led-item-body::before{
    content: '';
    position: absolute;
    top: -1px; left: 22px;
    width: 44px; height: 3px;
    background: var(--brand);
    transition: width .35s ease;
  }
  .led-item:hover .led-item-body::before{ width: 96px; }

  .led-item-tag{
    font-size: 10px; font-weight: 800;
    color: var(--mute);
    letter-spacing: .18em; text-transform: uppercase;
    margin-bottom: 10px;
  }
  .led-item-title{
    font-family: 'Open Sans', sans-serif;
    font-weight: 800; font-size: 17px;
    line-height: 1.3;
    color: var(--charcoal);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
  }
  .led-item-desc{
    font-size: 13.5px; line-height: 1.55;
    color: var(--slate);
    margin: 0 0 16px;
  }
  .led-item-cta{
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--charcoal);
    transition: color .25s ease, gap .25s ease;
  }
  .led-item-cta i{ font-size: 11px; color: var(--brand); transition: transform .25s ease; }
  .led-item:hover .led-item-cta{ color: var(--brand); gap: 12px; }
  .led-item:hover .led-item-cta i{ transform: translateX(4px); }

  /* --- Lightbox --- */
  .led-lightbox{
    position: fixed; inset: 0;
    background: rgba(15,15,15,.92);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    padding: 24px;
  }
  .led-lightbox.is-open{ opacity: 1; visibility: visible; }
  .led-lightbox-close{
    position: absolute; top: 18px; right: 18px;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
  }
  .led-lightbox-close:hover{ background: var(--brand); border-color: var(--brand); transform: rotate(90deg); }
  .led-lightbox-stage{
    max-width: 1100px; width: 100%;
    display: flex; flex-direction: column; align-items: center;
  }
  .led-lightbox-stage img{
    max-width: 100%; max-height: 78vh;
    object-fit: contain;
    box-shadow: 0 30px 60px -10px rgba(0,0,0,.5);
  }
  .led-lightbox-caption{
    margin-top: 16px;
    color: #fff;
    font-size: 14px; font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
  }

  /* --- Trust / capability cards --- */
  .trust-card{
    background: #ffffff;
    border: 1px solid var(--line);
    padding: 26px 22px;
    border-radius: 2px;
    transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  }
  .trust-card:hover{
    border-color: var(--brand);
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -16px rgba(232,78,27,.25);
  }
  .trust-ico{
    width: 46px; height: 46px;
    background: var(--brand-light);
    color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    border-radius: 2px;
    margin-bottom: 16px;
  }
  .trust-card h3{
    font-size: 16px; font-weight: 800;
    color: var(--charcoal);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
  }
  .trust-card p{
    font-size: 13px; line-height: 1.55;
    color: var(--slate);
    margin: 0;
  }


  /* ============================================================
     SECTION 30 — 404 ERROR PAGE
     Used by: 404.html
     ============================================================ */

  /* The stage sits between the shared header and shared footer */
  .err-stage{
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(1000px 500px at 92% -10%, rgba(232,78,27,.10), transparent 60%),
      radial-gradient(700px 380px at -5% 110%, rgba(232,78,27,.06), transparent 60%),
      linear-gradient(180deg, #FAFAF8 0%, #F2F2EE 100%);
    padding: 80px 0;
    min-height: 70vh;
    display: flex; align-items: center;
  }
  @media (max-width: 768px){
    .err-stage{ padding: 56px 0; min-height: 0; }
  }

  .err-grid-bg{
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(31,31,31,.4) 1px, transparent 1px),
      linear-gradient(90deg, rgba(31,31,31,.4) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: .04;
    pointer-events: none;
  }

  .err-leopard{
    position: absolute;
    right: -3rem; bottom: -3rem;
    width: 36rem; height: auto;
    opacity: .045;
    pointer-events: none;
    z-index: 0;
  }
  @media (max-width: 768px){ .err-leopard{ display: none; } }

  .err-glow{
    position: absolute;
    width: 28rem; height: 28rem;
    border-radius: 50%;
    filter: blur(80px);
    background: rgba(232,78,27,.22);
    pointer-events: none;
  }
  .err-glow.tl{ top: -6rem; left: -6rem; }
  .err-glow.br{ bottom: -8rem; right: -6rem; background: rgba(184,58,18,.18); }

  /* The big 404 display */
  .err-display{
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.85;
    font-size: clamp(120px, 22vw, 280px);
    color: transparent;
    -webkit-text-stroke: 2px var(--charcoal);
    background: linear-gradient(180deg, rgba(31,31,31,.06) 0%, rgba(31,31,31,0) 60%);
    -webkit-background-clip: text;
            background-clip: text;
    position: relative;
    display: inline-block;
    user-select: none;
  }
  /* the middle "0" replaced by a brand badge */
  .err-zero{
    display: inline-block;
    width: 0.78em; height: 0.78em;
    border-radius: 50%;
    background: var(--brand);
    -webkit-text-stroke: 0;
    color: #fff;
    font-size: .26em;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1;
    position: relative;
    margin: 0 .03em;
    transform: translateY(-.04em);
    vertical-align: middle;
    box-shadow:
      0 30px 60px -22px rgba(232,78,27,.55),
      inset 0 -10px 30px rgba(0,0,0,.18);
    animation: err-pulse 4.8s ease-in-out infinite;
  }
  .err-zero::before{
    content: '';
    position: absolute;
    inset: 6%;
    border: 2px dashed rgba(255,255,255,.45);
    border-radius: 50%;
    animation: err-spin 22s linear infinite;
  }
  .err-zero .err-zero-icon{
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .85em;
    color: #fff;
  }
  @keyframes err-pulse{
    0%, 100%{ transform: translateY(-.04em) scale(1); }
    50%     { transform: translateY(-.07em) scale(1.025); }
  }
  @keyframes err-spin{
    to{ transform: rotate(360deg); }
  }
  @media (max-width: 640px){
    .err-display{
      -webkit-text-stroke: 0;
      color: var(--charcoal);
    }
  }

  /* Copy block */
  .err-eyebrow{
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px;
    background: var(--brand-light);
    color: var(--brand-dark);
    font-weight: 700; font-size: 12px;
    letter-spacing: .08em; text-transform: uppercase;
    border-left: 3px solid var(--brand);
    margin-bottom: 18px;
  }
  .err-title{
    font-weight: 800;
    font-size: clamp(26px, 3.6vw, 40px);
    letter-spacing: -0.015em;
    color: var(--charcoal);
    line-height: 1.1;
    margin: 0 0 14px;
  }
  .err-title .accent{ color: var(--brand); }
  .err-sub{
    font-size: 15px;
    line-height: 1.65;
    color: var(--slate);
    max-width: 560px;
    margin: 0 0 28px;
  }

  /* Search */
  .err-search{
    display: flex; align-items: stretch;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 2px;
    overflow: hidden;
    max-width: 460px;
    margin-top: 28px;
  }
  .err-search:focus-within{
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(232,78,27,.12);
  }
  .err-search i{
    width: 46px;
    display: flex; align-items: center; justify-content: center;
    color: var(--brand);
    border-right: 1px solid var(--line);
  }
  .err-search input{
    flex: 1;
    border: 0; outline: none;
    padding: 12px 14px;
    font-family: inherit; font-size: 14px;
    background: transparent;
    color: var(--charcoal);
  }
  .err-search button{
    padding: 0 22px;
    background: var(--charcoal);
    color: #fff;
    font-weight: 700; font-size: 13px;
    letter-spacing: .04em;
    border: 0;
    cursor: pointer;
    transition: background .25s ease;
  }
  .err-search button:hover{ background: var(--brand); }

  /* Quick link cards */
  .err-links{
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 12px;
  }
  @media (max-width: 900px){ .err-links{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px){ .err-links{ grid-template-columns: 1fr; } }

  .err-link{
    display: flex; align-items: center; gap: 12px;
    background: #fff;
    border: 1px solid var(--line);
    padding: 14px;
    border-radius: 2px;
    color: var(--charcoal);
    text-decoration: none;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
  }
  .err-link::after{
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--brand);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .3s ease;
  }
  .err-link:hover{
    border-color: var(--brand);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -14px rgba(31,31,31,.18);
  }
  .err-link:hover::after{ transform: scaleY(1); transform-origin: top; }
  .err-link-ico{
    width: 38px; height: 38px;
    background: var(--brand-light);
    color: var(--brand);
    border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: background .3s ease, color .3s ease;
  }
  .err-link:hover .err-link-ico{
    background: var(--brand);
    color: #fff;
  }
  .err-link-label{
    font-size: 13.5px;
    font-weight: 700;
    color: var(--charcoal);
    line-height: 1.25;
  }
  .err-link-sub{
    font-size: 11.5px;
    color: var(--mute);
    letter-spacing: .04em;
    margin-top: 2px;
  }