:root{
    --bg-black:#0a1518;
    --bg-teal:#0f2229;
    --bg-teal-2:#16323a;
    --accent:#e2e61c;
    --accent-dim:#b8bb16;
    --text:#f4f8f8;
    --text-muted:#a9bcc0;
    --line:rgba(244,248,248,0.12);
    --maxw:1240px;
  }

  /* ---------- FONTS (New Design refresh) ----------
     Self-hosted from the "New Design" PSDs' embedded font list: Montserrat
     (Black/Bold/Medium/Regular) is the site-wide display+body face, Lalezar
     is only used for the gauge-style countdown digits/labels (see COUNTDOWN
     GAUGE below). Both ship as static woff2 weights (no variable font), so
     headings below are pinned to 900/700/500 rather than arbitrary values —
     a requested weight with no exact @font-face match forces the browser to
     fake-bold a nearby one, which looks inconsistent. */
  @font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/montserrat-regular.woff2') format('woff2');}
  @font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/montserrat-medium.woff2') format('woff2');}
  @font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/montserrat-bold.woff2') format('woff2');}
  @font-face{font-family:'Montserrat';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/montserrat-black.woff2') format('woff2');}
  @font-face{font-family:'Lalezar';font-style:normal;font-weight:400;font-display:swap;
    src:url('/fonts/lalezar-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
  @font-face{font-family:'Lalezar';font-style:normal;font-weight:400;font-display:swap;
    src:url('/fonts/lalezar-arabic.woff2') format('woff2');
    unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC;}

  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Montserrat',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg-black);
    color:var(--text);
    overflow-x:hidden;
    line-height:1.5;
    position:relative;
  }
  /* Subtle dark hex/triangle texture behind every plain section (sectors,
     about, tickets, exhibitor benefits, etc.) — matches "015-4K.png" from
     the New Design source, used as a background texture across those
     sections in the PSDs. Sits behind everything (z-index:-1 within the
     stacking context body's own `position:relative` establishes) and is
     fully hidden wherever a section already paints its own opaque
     background (hero, page-banner, footer, the login/exhibitor imagery
     added below) — nothing extra needed on those to hide it. */
  body::before{
    content:"";position:fixed;inset:0;z-index:-1;
    background:url('/images/design/pattern-hex.jpg') center/cover no-repeat;
    background-color:var(--bg-black);
    opacity:.5;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
  ::selection{background:var(--accent);color:#0a1518;}

  /* reveal animation */
  [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,.9,.32,1),transform .8s cubic-bezier(.22,.9,.32,1);}
  [data-reveal].in-view{opacity:1;transform:translateY(0);}
  [data-reveal="fade"]{transform:none;}
  [data-reveal-delay="1"]{transition-delay:.12s;}
  [data-reveal-delay="2"]{transition-delay:.24s;}
  [data-reveal-delay="3"]{transition-delay:.36s;}
  [data-reveal-delay="4"]{transition-delay:.48s;}
  [data-reveal-delay="5"]{transition-delay:.6s;}
  [data-reveal-delay="6"]{transition-delay:.72s;}

  @media (prefers-reduced-motion: reduce){
    [data-reveal]{opacity:1!important;transform:none!important;transition:none!important;}
    *{animation:none!important;}
  }

  /* ---------- HEADER ---------- */
  header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    padding:20px 0;
    transition:background .4s ease,padding .4s ease,box-shadow .4s ease,border-color .4s ease;
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:rgba(10,21,24,0.86);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    padding:12px 0;
    border-bottom:1px solid var(--line);
    box-shadow:0 8px 30px rgba(0,0,0,.25);
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}
  .logo img{height:30px;width:auto;transition:height .4s ease;}
  header.scrolled .logo img{height:26px;}
  nav.main-nav{display:flex;align-items:center;gap:36px;}
  nav.main-nav a{
    font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
    color:var(--text-muted);position:relative;padding:6px 0;transition:color .3s ease;
    white-space:nowrap;
  }
  nav.main-nav a::after{
    content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--accent);
    transition:width .3s ease;
  }
  nav.main-nav a:hover{color:var(--text);}
  nav.main-nav a:hover::after{width:100%;}
  nav.main-nav a.active{color:var(--text);}
  nav.main-nav a.active::after{width:100%;}
  .header-actions{display:flex;align-items:center;gap:18px;}
  .header-link{
    font-size:13px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
    color:var(--text-muted);background:none;border:none;cursor:pointer;padding:6px 0;
    transition:color .3s ease;font-family:inherit;white-space:nowrap;
  }
  .header-link:hover{color:var(--accent);}
  .header-actions .btn{white-space:nowrap;}
  .lang-switch{
    border:1px solid var(--line);border-radius:999px;padding:6px 14px!important;
    font-size:12px!important;
  }
  .lang-switch:hover{border-color:var(--accent);}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
    padding:13px 26px;border-radius:999px;cursor:pointer;border:none;
    transition:transform .3s ease,box-shadow .3s ease,background .3s ease;
  }
  .btn-accent{
    background:var(--accent);color:#0a1518;
    box-shadow:0 0 0 0 rgba(226,230,28,.55);
    animation:pulse 2.6s infinite;
  }
  .btn-accent:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(226,230,28,.35);}
  @keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(226,230,28,.45);}
    70%{box-shadow:0 0 0 14px rgba(226,230,28,0);}
    100%{box-shadow:0 0 0 0 rgba(226,230,28,0);}
  }
  .btn-outline{
    background:transparent;color:var(--text);border:1px solid var(--line);
  }
  .btn-outline:hover{border-color:var(--accent);color:var(--accent);}
  .hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:120;}
  .hamburger span{width:26px;height:2px;background:var(--text);transition:all .3s ease;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;min-height:100vh;display:flex;align-items:center;
    overflow:hidden;
  }
  .hero-bg{
    position:absolute;inset:0;background-size:cover;background-position:center;
    transform:scale(1.12);will-change:transform;
  }
  .hero-overlay{
    position:absolute;inset:0;
    background:
      linear-gradient(180deg,rgba(8,16,19,.55) 0%,rgba(8,16,19,.55) 30%,rgba(8,16,19,.92) 100%),
      linear-gradient(90deg,rgba(8,16,19,.92) 0%,rgba(8,16,19,.35) 55%,rgba(8,16,19,.75) 100%);
  }
  .hero-content{position:relative;z-index:2;padding-top:110px;padding-bottom:130px;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
    font-weight:700;margin-bottom:26px;padding:8px 18px;border:1px solid rgba(226,230,28,.35);
    border-radius:999px;background:rgba(226,230,28,.06);
  }
  .eyebrow .dot{width:6px;height:6px;background:var(--accent);border-radius:50%;animation:blink 1.6s infinite;}
  @keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}
  .hero h1{
    font-size:clamp(40px,7vw,86px);line-height:1.02;font-weight:900;letter-spacing:-.01em;
    max-width:920px;margin-bottom:24px;
  }
  .hero h1 span{color:var(--accent);}
  .hero p.lead{
    font-size:clamp(16px,1.6vw,20px);color:var(--text-muted);max-width:560px;margin-bottom:40px;
  }
  .hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-bottom:64px;}
  .hero-note{font-size:13px;color:var(--text-muted);}

  /* ---------- COUNTDOWN GAUGE ----------
     Restyled as speedometer-style dials ("Digital Count.png" /
     "Entry is ticketed - Button.png" from the New Design source) instead of
     the old rectangular cells — same markup (.countdown > .cell > .num +
     .lbl), just a circular face with the digits sat in the dial's lower
     window. The last cell (Entry is ticketed) gets the alternate dial face
     via .ticketed-cell, set directly in Views/Home/Index.cshtml. */
  .countdown{display:flex;gap:16px;flex-wrap:wrap;}
  .countdown .cell{
    width:96px;height:96px;border-radius:50%;flex-shrink:0;
    background:url('/images/design/gauge-dial.png') center/contain no-repeat;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding-top:14px;text-align:center;
  }
  .countdown .cell.ticketed-cell{
    background-image:url('/images/design/gauge-ticketed.png');
    padding-top:0;
  }
  .countdown .num{
    font-family:'Lalezar','Montserrat',sans-serif;font-weight:400;
    font-size:26px;color:var(--text);font-variant-numeric:tabular-nums;line-height:1;
  }
  .countdown .lbl{
    font-family:'Lalezar','Montserrat',sans-serif;font-weight:400;
    font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-top:5px;
  }
  .countdown .cell.ticketed-cell .num{
    font-size:11px;line-height:1.3;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;
  }

  .scroll-cue{
    position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:2;
    display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-muted);
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  }
  .scroll-cue .chev{width:14px;height:14px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
    transform:rotate(45deg);animation:bounce 1.8s infinite;}
  @keyframes bounce{0%,100%{transform:rotate(45deg) translate(0,0);}50%{transform:rotate(45deg) translate(6px,6px);}}

  /* On shorter windows (laptops, browser zoom, small displays) the hero's
     natural content can be taller than the viewport, which used to push the
     countdown row down into the absolutely-positioned scroll cue. Tightening
     the vertical rhythm here keeps everything clear on common shorter heights,
     and the scroll cue hides itself entirely below that as a last resort. */
  @media (max-height:820px){
    .hero-content{padding-top:90px;padding-bottom:90px;}
    .hero h1{font-size:clamp(34px,6vw,64px);margin-bottom:16px;}
    .eyebrow{margin-bottom:18px;}
    .hero p.lead{margin-bottom:26px;}
    .hero-ctas{margin-bottom:36px;}
    .countdown .cell{width:76px;height:76px;}
    .countdown .num{font-size:20px;}
  }
  @media (max-height:640px){
    .scroll-cue{display:none;}
  }

  /* ---------- INTRO / ONE STOP SHOP ---------- */
  .intro{padding:120px 0 100px;text-align:center;position:relative;}
  .intro .kicker{color:var(--accent);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:18px;}
  .intro h2{font-size:clamp(28px,4vw,44px);font-weight:900;max-width:780px;margin:0 auto 22px;}
  .intro p{color:var(--text-muted);max-width:640px;margin:0 auto;font-size:17px;}
  .stat-row{display:flex;justify-content:center;gap:64px;margin-top:64px;flex-wrap:wrap;}
  .stat{text-align:center;}
  .stat .num{font-size:42px;font-weight:900;color:var(--accent);}
  .stat .lbl{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-top:6px;}

  /* ---------- SECTORS ---------- */
  .section{padding:40px 0;}
  .section-head{text-align:center;max-width:640px;margin:0 auto 64px;}
  .section-head .kicker{color:var(--accent);font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:16px;}
  .section-head h2{font-size:clamp(28px,4vw,42px);font-weight:900;margin-bottom:16px;}
  .section-head p{color:var(--text-muted);font-size:16px;}

  .sectors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .sector-card{
    background:linear-gradient(180deg,rgba(244,248,248,.045),rgba(244,248,248,.015));
    border:1px solid var(--line);border-radius:18px;padding:34px 28px;
    transition:transform .45s cubic-bezier(.22,.9,.32,1),border-color .4s ease,background .4s ease;
    position:relative;overflow:hidden;
  }
  .sector-card::before{
    content:"";position:absolute;inset:0;opacity:0;
    background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(226,230,28,.14),transparent 60%);
    transition:opacity .4s ease;
  }
  .sector-card:hover::before{opacity:1;}
  .sector-card:hover{transform:translateY(-8px);border-color:rgba(226,230,28,.4);}
  .sector-icon{
    width:52px;height:52px;border-radius:14px;background:rgba(226,230,28,.1);
    display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:var(--accent);
    transition:background .4s ease,transform .4s ease;
  }
  .sector-card:hover .sector-icon{background:var(--accent);color:#0a1518;transform:rotate(-6deg) scale(1.06);}
  .sector-card h3{font-size:19px;font-weight:700;margin-bottom:10px;position:relative;}
  .sector-card p{font-size:14px;color:var(--text-muted);position:relative;}

  /* ---------- SPONSORS ---------- */
  .sponsors-tiers{display:flex;flex-direction:column;gap:46px;margin-bottom:64px;}
  .tier-label{text-align:center;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:22px;}
  .tier-row{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;}
  .sponsor-slot{
    width:200px;height:96px;border:1.5px dashed var(--line);border-radius:14px;
    display:flex;align-items:center;justify-content:center;text-align:center;
    color:var(--text-muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
    transition:border-color .3s ease,color .3s ease,background .3s ease;
  }
  .sponsor-slot:hover{border-color:var(--accent);color:var(--accent);background:rgba(226,230,28,.05);}
  .tier-row.gold .sponsor-slot{width:170px;height:82px;}
  .tier-row.silver .sponsor-slot{width:150px;height:72px;font-size:11px;}

  .marquee-wrap{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;}
  .marquee-track{display:flex;gap:64px;width:max-content;animation:scroll-left 26s linear infinite;}
  .marquee-track span{
    font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);
    white-space:nowrap;font-weight:600;opacity:.7;
  }
  @keyframes scroll-left{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  .sponsor-note{text-align:center;color:var(--text-muted);font-size:13px;margin-top:20px;}

  /* ---------- CTA BAND ---------- */
  .cta-band{
    position:relative;padding:100px 0;text-align:center;overflow:hidden;
    background:linear-gradient(135deg,var(--bg-teal) 0%,var(--bg-teal-2) 100%);
  }
  .cta-band::before{
    content:"";position:absolute;width:600px;height:600px;border-radius:50%;
    background:radial-gradient(circle,rgba(226,230,28,.16),transparent 70%);
    top:-300px;right:-200px;
  }
  .cta-band h2{font-size:clamp(26px,4vw,40px);font-weight:900;margin-bottom:18px;position:relative;}
  .cta-band p{color:var(--text-muted);margin-bottom:34px;position:relative;}
  .cta-band .ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;position:relative;}

  /* ---------- FOOTER ---------- */
  /* Tread-mark watermark ("AutoX - Pattern.png" from the New Design source)
     tiled faintly across the whole footer band, same treatment as the
     mockup. A pseudo-element rather than footer's own background-image so
     opacity can be turned down without dimming footer's solid base color;
     footer .wrap gets a z-index to stay above it since footer itself isn't
     otherwise positioned. */
  footer{background:#070f12;border-top:1px solid var(--line);padding:80px 0 30px;position:relative;overflow:hidden;}
  footer::before{
    content:"";position:absolute;inset:0;
    background:url('/images/design/pattern-tread.png') repeat;background-size:340px auto;
    opacity:.08;pointer-events:none;
  }
  footer .wrap{position:relative;z-index:1;}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:56px;}
  .footer-col h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);margin-bottom:20px;font-weight:700;}
  .footer-col p, .footer-col a{font-size:14px;color:var(--text-muted);margin-bottom:12px;display:block;transition:color .3s ease;}
  .footer-col a:hover{color:var(--accent);}
  .footer-logo img{height:32px;margin-bottom:18px;}
  .footer-logo p{color:var(--text-muted);font-size:14px;max-width:280px;margin-bottom:22px;}
  .social-row{display:flex;gap:12px;margin-top:8px;}
  .social-row a{
    width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
    display:flex;align-items:center;justify-content:center;transition:.3s ease;
  }
  .social-row a:hover{background:var(--accent);border-color:var(--accent);color:#0a1518;}
  .contact-item{display:flex;flex-direction:column;margin-bottom:16px;}
  .contact-item .name{color:var(--text);font-weight:700;font-size:14px;margin-bottom:2px;}
  .footer-bottom{
    border-top:1px solid var(--line);padding-top:28px;display:flex;justify-content:space-between;
    align-items:center;flex-wrap:wrap;gap:16px;
  }
  .organizers-group{display:flex;align-items:center;flex-wrap:wrap;gap:16px 36px;}
  .organized-by{display:flex;align-items:center;gap:12px;}
  .organized-by img{height:34px;}
  .organized-by span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);}
  .copyright{font-size:13px;color:var(--text-muted);}

  /* ---------- PAGE BANNER (interior pages: About, Visitor, Exhibitor, Contact) ---------- */
  .page-banner{position:relative;padding:190px 0 80px;overflow:hidden;}
  .page-banner-bg{
    position:absolute;inset:0;background-size:cover;background-position:center;
    transform:scale(1.08);
  }
  .page-banner-overlay{
    position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(8,16,19,.6) 0%,rgba(8,16,19,.88) 100%);
  }
  .page-banner .wrap{position:relative;z-index:2;}
  .page-banner h1{font-size:clamp(36px,6vw,64px);font-weight:900;letter-spacing:-.01em;margin-bottom:18px;}
  .page-banner p{color:var(--text-muted);max-width:680px;font-size:17px;}

  /* ---------- ABOUT PAGE ---------- */
  .sector-pills{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 8px;}
  .sector-pill{
    padding:10px 20px;border:1px solid var(--line);border-radius:999px;
    font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--text);
    background:rgba(244,248,248,.04);transition:border-color .3s ease,background .3s ease;
  }
  .sector-pill:hover{border-color:rgba(226,230,28,.4);background:rgba(226,230,28,.06);}

  .about-block{max-width:760px;}
  .about-block p{color:var(--text-muted);font-size:16px;margin-bottom:18px;}
  .about-block p:last-child{margin-bottom:0;}

  .who-we-are{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:center;}
  .who-we-are .twn-logo{height:64px;width:auto;padding:18px;background:rgba(244,248,248,.04);
    border:1px solid var(--line);border-radius:16px;}

  /* Racing-seat visual ("About US - Chair.png" from the New Design source)
     standing in for the plain logo box above — the organizer's logo becomes
     a small badge "resting" on the seat's headrest instead, matching the
     mockup's two-seat "Who We Are" treatment. */
  .seat-visual{position:relative;max-width:412px;margin:0 auto;}
  .seat-visual .seat-img{width:100%;height:auto;filter:drop-shadow(0 26px 30px rgba(0,0,0,.55));}
  /* Logo mark sits directly on the seat's headrest, above the molded
     grip cutout, with no background box — a plain small image (or, until
     an admin uploads one, a small bold text label in the same spot). */
  .seat-visual .seat-badge{
    position:absolute;top:10%;left:50%;transform:translateX(-50%);
    width:40%;max-width:57px;height:auto;
  }
  .seat-visual .seat-badge.seat-badge-text{
    width:auto;max-width:74%;white-space:normal;text-align:center;
    font-size:11px;font-weight:700;letter-spacing:.02em;color:#2c2822;
  }
  /* Bio paragraph(s) printed directly on the seat cushion (the flat
     perforated panel + inner bolster area below the grip), matching the
     "New Design" mockup — small dark ink text on the off-white leather,
     no card/background behind it. inset-inline-start (not left) so it
     mirrors correctly in Arabic/RTL. */
    .seat-visual .seat-caption {
        position: absolute;
        top: 35%;
        /* inset-inline-start: 16%; */
        width: 29%;
        text-align: start;
        left: 36%;
        font-weight: bold;
        /* line-height: 9.5 !important;*/
  }
  .seat-visual .seat-caption p{
    color:#3a352e;font-size:9.5px;line-height:1.4;margin:0 0 7px 0;
  }
  .seat-visual .seat-caption p:last-child{margin-bottom:0;}

  /* Two-organizer "Who We Are" layout: each organizer is just its own
     seat visual (logo + bio text both printed on the seat itself — see
     .seat-badge/.seat-caption above), side by side. Falls back to a
     single centered column (".single") when only one organizer is
     configured (WhoWeAreOrg2Name cleared by an admin) — see
     Views/About/Index.cshtml. */
        .organizers-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 56px;
        }

            .organizers-grid.single {
                grid-template-columns: 1fr;
                max-width: 480px;
                margin: 0 auto;
            }

        .organizer-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        /* Same small-image-plus-text layout as .who-we-are above, reused for the
     optional "Who We Are" extra paragraph (About page) so its image sits in
     the same spot as the organizer logo above it: image first in markup, so
     CSS Grid's direction-awareness puts it on the left in English and the
     right in Arabic (RTL), with the paragraph taking the rest of the row —
     no site-rtl.css override needed, same as .who-we-are and .hero-media. */
        .side-media {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 32px;
            align-items: start;
        }

            .side-media img {
                height: 72px;
                width: auto;
                max-width: 160px;
                object-fit: contain;
                padding: 12px;
                background: rgba(244,248,248,.04);
                border: 1px solid var(--line);
                border-radius: 14px;
            }

        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
            gap: 12px;
        }

        .project-card {
            padding: 16px 12px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: rgba(244,248,248,.03);
            text-align: center;
            font-weight: 700;
            font-size: 13px;
            transition: transform .3s ease,border-color .3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 64px;
        }

            .project-card:hover {
                transform: translateY(-5px);
                border-color: rgba(226,230,28,.4);
            }

            .project-card img {
                max-height: 38px;
                max-width: 100%;
            }
        /* ---------- HERO / BANNER IMAGE (Home hero, About & Visitor page banners —
     or, per-page from the CMS, the secondary intro/tickets section instead) ----------
     Shown beside a section's heading + paragraph when the page's CMS "intro
     image" is set (Home.IntroImagePath / About.IntroImagePath /
     Visitor.IntroImagePath), in whichever section its IntroImagePlacement
     picks. Works as-is inside .hero-content and .page-banner .wrap (already
     left/start-aligned with a max-width); the .intro/.section-head/
     .about-block overrides below undo THEIR default center-alignment when
     this same layout is reused inside those secondary sections. */
        .hero-media {
            display: grid;
            grid-template-columns: 1.15fr 1fr;
            gap: 44px;
            align-items: center;
        }

        .hero-media-text {
            min-width: 0;
        }

        .hero-media-img {
            width: 100%;
            max-height: 440px;
            object-fit: cover;
            border-radius: 20px;
            border: 1px solid var(--line);
        }

        .hero-media .section-head {
            text-align: start;
            margin: 0;
            max-width: none;
        }

        .hero-media .about-block {
            max-width: none;
        }

        .intro .hero-media {
            text-align: start;
        }

            .intro .hero-media h2, .intro .hero-media p {
                margin-left: 0;
                margin-right: 0;
                max-width: none;
            }
        /* ---------- EXHIBITOR PAGE ---------- */
        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 28px;
        }

        .benefit-card {
            padding: 34px 28px;
            border: 1px solid var(--line);
            border-radius: 16px;
            background: rgba(244,248,248,.03);
            transition: transform .35s ease,border-color .35s ease;
        }

            .benefit-card:hover {
                transform: translateY(-8px);
                border-color: rgba(226,230,28,.4);
            }

        .benefit-icon {
            width: 52px;
            height: 52px;
            border-radius: 12px;
            background: rgba(226,230,28,.1);
            color: var(--accent);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            transition: .35s ease;
        }

        .benefit-card:hover .benefit-icon {
            background: var(--accent);
            color: #0a1518;
            transform: rotate(-6deg) scale(1.06);
        }

        .benefit-card h3 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .benefit-card p {
            font-size: 14px;
            color: var(--text-muted);
        }
        /* Tire-on-pedestal visual ("Exhibitor 01.png") standing in for the plain
     icon box on these three benefit cards — the glow ring under the tire is
     already baked into that image, so no extra CSS glow is needed. */
        .pedestal-card {
            text-align: center;
            overflow: visible;
        }

        .pedestal-visual {
            width: 130px;
            margin: -20px auto 20px;
        }

            .pedestal-visual img {
                width: 100%;
                height: auto;
                filter: drop-shadow(0 18px 20px rgba(0,0,0,.5));
            }

        .pedestal-card:hover .pedestal-visual img {
            transform: translateY(-4px);
        }

        .pedestal-visual img {
            transition: transform .35s ease;
        }
        /* Overhead car-interior cutaway ("Exhibitor 02.png") behind the
     registration form, matching the New Design source's Exhibitor 002.psd —
     the form panel gets a light frosted-glass treatment so it stays
     readable over the busy background. */
        #exhibitor-form {
            position: relative;
            background-color: var(--bg-black);
            background-image: linear-gradient(90deg,rgba(8,16,19,.55) 0%,rgba(8,16,19,.42) 22%,rgba(8,16,19,.6) 50%,rgba(8,16,19,.85) 100%),url('/images/design/exhibitor-car.png');
            background-size: auto 100%,140%;
            background-position: left center,left center;
            background-repeat: no-repeat,no-repeat;
        }

            #exhibitor-form .exhibitor-form {
                background: rgba(20,34,38,.6);
                backdrop-filter: blur(14px);
                -webkit-backdrop-filter: blur(14px);
            }

        .exhibitor-form-wrap {
            display: grid;
            grid-template-columns: 1.25fr 1fr;
            gap: 64px;
            align-items: center;
        }

        .exhibitor-form-intro {
            max-width: 380px;
        }

            .exhibitor-form-intro h2 {
                font-size: clamp(26px,3.4vw,36px);
                font-weight: 900;
                margin-bottom: 16px;
            }

            .exhibitor-form-intro p {
                color: var(--text-muted);
                font-size: 16px;
                margin-bottom: 28px;
            }

        .exhibitor-form-note {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            padding: 18px 20px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: rgba(244,248,248,.03);
            font-size: 13px;
            color: var(--text-muted);
        }

            .exhibitor-form-note svg {
                flex-shrink: 0;
                color: var(--accent);
                margin-top: 2px;
            }

        .exhibitor-form {
            background: rgba(244,248,248,.03);
            border: 1px solid var(--line);
            border-radius: 20px;
            padding: 40px;
        }

        .exhibitor-success {
            display: flex;
            gap: 16px;
            align-items: flex-start;
            padding: 28px 30px;
            border-radius: 16px;
            background: rgba(226,230,28,.08);
            border: 1px solid rgba(226,230,28,.4);
        }

            .exhibitor-success svg {
                flex-shrink: 0;
                color: var(--accent);
                margin-top: 2px;
            }

            .exhibitor-success h3 {
                font-size: 19px;
                font-weight: 900;
                margin-bottom: 6px;
            }

            .exhibitor-success p {
                color: var(--text-muted);
                font-size: 15px;
            }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .form-field {
            margin-bottom: 20px;
        }

        .form-row .form-field {
            margin-bottom: 0;
        }

        .form-field label {
            display: block;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 9px;
        }

        .form-field input, .form-field select {
            width: 100%;
            padding: 13px 16px;
            background: rgba(8,16,19,.6);
            border: 1px solid var(--line);
            border-radius: 10px;
            color: var(--text);
            font: inherit;
            font-size: 14px;
            transition: border-color .3s ease,background .3s ease;
        }

        .form-field select {
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9bcc0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            background-size: 16px;
            padding-right: 40px;
        }

            .form-field select option {
                background: #0f2229;
                color: var(--text);
            }

        .form-field input::placeholder {
            color: var(--text-muted);
            opacity: .7;
        }

        .form-field input:focus, .form-field select:focus {
            outline: none;
            border-color: var(--accent);
            background: rgba(8,16,19,.85);
        }

        .form-field input.input-validation-error, .form-field select.input-validation-error {
            border-color: #e05656;
        }

        .field-validation-error {
            display: block;
            color: #f28b8b;
            font-size: 12px;
            margin-top: 7px;
        }

        .validation-summary-errors {
            color: #f28b8b;
            font-size: 13px;
            padding: 14px 18px;
            border: 1px solid rgba(224,86,86,.4);
            border-radius: 10px;
            background: rgba(224,86,86,.08);
            margin-bottom: 24px;
        }

            .validation-summary-errors ul {
                margin: 0;
                padding-left: 18px;
            }
        /* asp-validation-for/asp-validation-summary render BOTH the "-error" and
     "-valid" class together — whichever the markup hardcoded, plus whichever
     matches the current ModelState. Hide the pair when the "-valid" class is
     also present so a fresh, error-free form doesn't show empty red boxes. */
        .field-validation-valid, .validation-summary-valid {
            display: none;
        }

        .form-submit-row {
            margin-top: 8px;
        }

            .form-submit-row .btn {
                width: 100%;
                border: none;
                cursor: pointer;
            }

        .faq-list {
            max-width: 820px;
            margin: 0 auto;
        }

        .faq-item {
            border-bottom: 1px solid var(--line);
        }

        .faq-question {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            padding: 24px 4px;
            background: none;
            border: none;
            text-align: left;
            font: inherit;
            font-size: 17px;
            font-weight: 600;
            color: var(--text);
            cursor: pointer;
        }

            .faq-question .faq-plus {
                flex-shrink: 0;
                width: 26px;
                height: 26px;
                border-radius: 50%;
                border: 1px solid var(--line);
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                transition: .3s ease;
            }

                .faq-question .faq-plus::before, .faq-question .faq-plus::after {
                    content: "";
                    position: absolute;
                    background: var(--text-muted);
                    transition: .3s ease;
                }

                .faq-question .faq-plus::before {
                    width: 10px;
                    height: 1.5px;
                }

                .faq-question .faq-plus::after {
                    width: 1.5px;
                    height: 10px;
                }

        .faq-item.open .faq-question .faq-plus {
            border-color: var(--accent);
            background: var(--accent);
        }

            .faq-item.open .faq-question .faq-plus::before, .faq-item.open .faq-question .faq-plus::after {
                background: #0a1518;
            }

            .faq-item.open .faq-question .faq-plus::after {
                transform: scaleY(0);
            }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height .35s ease;
        }

        .faq-answer-inner {
            padding: 0 4px 24px;
            color: var(--text-muted);
            font-size: 15px;
            max-width: 680px;
        }
        /* ---------- VISITOR PAGE / TICKETS / AUTH ---------- */
        .pricing-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            flex-wrap: wrap;
            background: rgba(244,248,248,.03);
            border: 1px solid var(--line);
            border-radius: 20px;
            padding: 36px 40px;
            margin-bottom: 56px;
        }

            .pricing-card .price {
                font-size: 48px;
                font-weight: 900;
                color: var(--accent);
                line-height: 1;
            }

                .pricing-card .price small {
                    font-size: 16px;
                    color: var(--text-muted);
                    font-weight: 600;
                    margin-left: 6px;
                }

            .pricing-card .price-note {
                color: var(--text-muted);
                font-size: 14px;
                margin-top: 8px;
                max-width: 420px;
            }
        /* Car dashboard/infotainment-screen frame ("Visitor - Screen.png") the
     ticket price card sits inside of, matching the New Design source's
     Visitor.psd. The frame image's "screen" is a plain flat rectangle
     (no baked-in content), so stretching it slightly to fit whatever
     height the pricing card ends up needing is harmless — nothing
     photographic there to distort, unlike the bezel/dial art around it. */
        .dashboard-frame {
            background-image: url('/images/design/dashboard-frame.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            padding: 7% 8% 17% 8%;
            margin-bottom: 56px;
        }

            .dashboard-frame .pricing-card {
                background: rgba(10,21,24,.6);
                margin-bottom: 0;
            }

        .auth-shell {
            min-height: 70vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 170px 20px 90px;
        }

        .auth-card {
            width: 100%;
            max-width: 440px;
            background: rgba(244,248,248,.03);
            border: 1px solid var(--line);
            border-radius: 20px;
            padding: 44px 40px;
        }

            .auth-card h1 {
                font-size: 26px;
                font-weight: 900;
                margin-bottom: 8px;
            }

            .auth-card .sub {
                color: var(--text-muted);
                font-size: 14px;
                margin-bottom: 30px;
            }

            .auth-card .switch {
                margin-top: 24px;
                text-align: center;
                font-size: 14px;
                color: var(--text-muted);
            }

                .auth-card .switch a {
                    color: var(--accent);
                    font-weight: 600;
                }
        /* Login page only ("Log In.psd"): wireframe-car backdrop behind the whole
     auth shell, and the card itself restyled as a riveted brushed-steel
     panel ("Metal Background - Login.png"). Scoped to .login-shell /
     .metal-card (set only in Views/Account/Login.cshtml) rather than the
     shared .auth-shell/.auth-card so Register/Reset-password keep their
     plain card — there's no matching art for those pages yet. */
        .login-shell {
            position: relative;
            background-image: linear-gradient(180deg,rgba(8,16,19,.5) 0%,rgba(8,16,19,.85) 100%),url('/images/design/hero-car-login.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        /* metal-panel-frame.png is metal-panel.png with its transparent margin
     cropped off (514x614). It's used as a 9-slice border-image rather than
     a stretched background: the riveted/beveled band around the edge is
     sliced at its real pixel thickness (top 25 / right 37 / bottom 22 /
     left 32 — the frame isn't perfectly symmetric in the source art) so
     those corners and rivets render at native size and never distort no
     matter how tall the form gets. Only the plain, detail-free inset
     between the rivets (the "fill" slice) stretches to cover the content
     area, which is safe because it has no texture to warp. The gradient
     background is a fallback/base coat behind that fill slice, echoing the
     same top-right-lit / bottom-left-shadowed tone as the source art. */
        .auth-card.metal-card {
            border-style: solid;
            border-width: 25px 37px 22px 32px;
            border-image-source: url('/images/design/metal-panel-frame.png');
            border-image-slice: 25 37 22 32 fill;
            border-image-width: 25px 37px 22px 32px;
            border-image-outset: 0;
            border-image-repeat: stretch;
            border-radius: 0;
            background: linear-gradient(135deg,#2e2e2e 0%,#171717 55%,#0d0d0d 100%);
            padding: 56px 44px;
            box-shadow: 0 30px 70px rgba(0,0,0,.55);
        }
        /* scroll-margin-top matches the fixed header's height so jumping to
     #qtySelect (see Buy.cshtml's onchange handler, which reloads the page at
     #qtySelect instead of the top so changing the quantity doesn't yank the
     visitor's scroll position back up to the hero banner) doesn't land the
     select underneath the fixed header. */
        #qtySelect {
            scroll-margin-top: 110px;
        }

        .qty-select-row {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 32px;
            flex-wrap: wrap;
        }

            .qty-select-row label {
                font-size: 13px;
                font-weight: 600;
                color: var(--text-muted);
                text-transform: uppercase;
                letter-spacing: .06em;
            }

            .qty-select-row select {
                background: rgba(8,16,19,.6);
                border: 1px solid var(--line);
                border-radius: 10px;
                color: var(--text);
                padding: 10px 16px;
                font-size: 15px;
                font-weight: 700;
            }

        .guest-fieldset {
            border: 1px solid var(--line);
            border-radius: 14px;
            padding: 26px;
            margin-bottom: 22px;
            background: rgba(244,248,248,.02);
        }

            .guest-fieldset h4 {
                font-size: 13px;
                text-transform: uppercase;
                letter-spacing: .08em;
                color: var(--accent);
                margin-bottom: 18px;
                font-weight: 700;
            }

        .order-summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            padding: 22px 26px;
            border-radius: 14px;
            background: rgba(226,230,28,.08);
            border: 1px solid rgba(226,230,28,.4);
            margin: 8px 0 28px;
        }

            .order-summary .label {
                color: var(--text-muted);
                font-size: 14px;
            }

            .order-summary .total {
                font-size: 24px;
                font-weight: 900;
                color: var(--accent);
            }

        .my-tickets-order {
            margin-bottom: 48px;
        }

            .my-tickets-order .order-head {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 8px;
                margin-bottom: 20px;
                color: var(--text-muted);
                font-size: 13px;
                padding-bottom: 14px;
                border-bottom: 1px solid var(--line);
            }

                .my-tickets-order .order-head strong {
                    color: var(--text);
                }

        .ticket-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
            gap: 20px;
        }

        .ticket-card {
            background: rgba(244,248,248,.03);
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 26px 22px;
            text-align: center;
        }

            .ticket-card img {
                display: block;
                background: #fff;
                border-radius: 10px;
                padding: 8px;
                margin: 0 auto 16px;
                width: 150px;
                height: 150px;
                object-fit: contain;
            }

            .ticket-card .name {
                font-weight: 700;
                margin-bottom: 4px;
            }

            .ticket-card .meta {
                font-size: 13px;
                color: var(--text-muted);
                margin-bottom: 2px;
                word-break: break-word;
            }

            .ticket-card .tag {
                display: inline-block;
                margin-top: 14px;
                font-size: 11px;
                text-transform: uppercase;
                letter-spacing: .06em;
                padding: 4px 12px;
                border-radius: 999px;
                background: rgba(226,230,28,.12);
                color: var(--accent);
                font-weight: 700;
            }

        .guest-note {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            padding: 16px 18px;
            border: 1px solid var(--line);
            border-radius: 12px;
            background: rgba(244,248,248,.03);
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 28px;
        }

            .guest-note svg {
                flex-shrink: 0;
                color: var(--accent);
                margin-top: 2px;
            }
        /* Payment Return page — shown while an order is still Pending, waiting on
     PayTabs' Callback (see wwwroot/js/site.js for the polling script this
     accompanies). Automatically disabled under prefers-reduced-motion by the
     existing global `*{animation:none!important;}` rule near the top of this
     file, same as every other animation here. */
        .payment-spinner {
            width: 44px;
            height: 44px;
            margin: 0 auto 24px;
            border: 3px solid var(--line);
            border-top-color: var(--accent);
            border-radius: 50%;
            animation: payment-spin .9s linear infinite;
        }

        @keyframes payment-spin {
            to {
                transform: rotate(360deg);
            }
        }
        /* ---------- MOBILE ---------- */
        @media (max-width:920px) {
            .sectors-grid {
                grid-template-columns: repeat(2,1fr);
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }

            .who-we-are {
                grid-template-columns: 1fr;
            }

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

            .side-media {
                grid-template-columns: 1fr;
            }

            .hero-media {
                grid-template-columns: 1fr;
            }

            .hero-media-img {
                max-height: 280px;
            }

            .hero-media .section-head {
                text-align: center;
                margin: 0 auto;
            }

            .intro .hero-media {
                text-align: center;
            }

                .intro .hero-media h2, .intro .hero-media p {
                    margin-left: auto;
                    margin-right: auto;
                }

            .benefits-grid {
                grid-template-columns: 1fr;
            }

            .exhibitor-form-wrap {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            #exhibitor-form {
                background-image: linear-gradient(180deg,rgba(8,16,19,.5) 0%,rgba(8,16,19,.75) 55%,rgba(8,16,19,.94) 100%),url('/images/design/exhibitor-car.png');
                background-size: cover,cover;
                background-position: center top,center 15%;
            }
        }
        /* Header/nav switches to the hamburger menu well above the general mobile
     breakpoint below, because the desktop nav (logo + 4 links + Log In +
     2 pill buttons) needs more room than that to fit on one line without its
     text wrapping. Measured via Playwright: at the site's real font/spacing,
     nav items start wrapping onto two lines ("ABOUT" / "US") anywhere from
     761px up to ~1110px viewport width, and render cleanly single-line from
     ~1115px up — so this breakpoint is set to 1180px for a safety margin. */
        @media (max-width:1180px) {
            nav.main-nav {
                position: fixed;
                top: 0;
                right: 0;
                height: 100vh;
                width: 78%;
                max-width: 320px;
                background: rgba(10,21,24,.98);
                backdrop-filter: blur(10px);
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                gap: 28px;
                padding: 40px;
                transform: translateX(100%);
                transition: transform .45s cubic-bezier(.22,.9,.32,1);
                z-index: 110;
                border-left: 1px solid var(--line);
            }

                nav.main-nav.open {
                    transform: translateX(0);
                }

            .hamburger {
                display: flex;
            }

            .header-actions .btn-outline {
                display: none;
            }
            /* the EN/AR toggle (.lang-switch) is also a .header-link but, unlike
       Log In/Log Out, needs to stay reachable without opening the hamburger
       menu — it's not duplicated inside nav.main-nav the way the other links
       are. */
            .header-actions .header-link:not(.lang-switch) {
                display: none;
            }
        }

        @media (max-width:760px) {
            .sectors-grid {
                grid-template-columns: 1fr;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 36px;
            }

            .stat-row {
                gap: 36px;
            }

            .page-banner {
                padding: 150px 0 60px;
            }

            .form-row {
                grid-template-columns: 1fr;
                gap: 0;
            }

            .exhibitor-form {
                padding: 28px 22px;
            }

            .pricing-card {
                padding: 28px 24px;
            }

            .auth-card {
                padding: 32px 26px;
            }

            .guest-fieldset {
                padding: 20px;
            }
        }
        /* Below ~600px the header row (logo + Register button + language toggle +
     hamburger) no longer fits: .logo has no protection against flex-shrink,
     while .header-actions' contents are all white-space:nowrap and refuse to
     shrink below their text width, so the flex algorithm sacrifices the logo
     first — squeezing it down to 0 width on common phone sizes (it was
     invisible at 375px/414px/390px, the most common phone viewports).
     Fix: pin the logo so it can't be crushed, and free up the room it needs
     by trimming the CTA button/language pill and header padding/gaps a bit,
     scaling with viewport (clamp) so it stays correct from 320px up to 600px
     rather than being tuned to a single width. Verified with no overflow or
     overlap at 320/360/375/390/414/420/480/500/600px. */
        @media (max-width:600px) {
            .logo {
                flex-shrink: 0;
            }

            .nav-inner {
                padding: 0 clamp(12px,4vw,16px);
                gap: clamp(6px,2vw,8px);
            }

            .header-actions {
                gap: clamp(5px,1.6vw,7px);
            }

                .header-actions .btn-accent {
                    padding: clamp(7px,2vw,9px) clamp(10px,2.6vw,13px);
                    font-size: clamp(10px,2.4vw,11px);
                    letter-spacing: .04em;
                }

                .header-actions .lang-switch {
                    padding: clamp(4px,1.2vw,6px) clamp(6px,1.6vw,9px) !important;
                    font-size: clamp(9.5px,2.2vw,10.5px) !important;
                }

            .logo img {
                height: clamp(12px,3.6vw,15px) !important;
            }

            header.scrolled .logo img {
                height: clamp(11px,3.4vw,14px) !important;
            }
        }
        /* ---------- BRAND LOGO IN CMS HEADINGS ("AUTO X" -> logo) ---------- */
        .brand-logo-inline {
            display: inline-block;
            height: .85em;
            width: auto;
            vertical-align: -.06em;
            margin: 0 .15em;
        }

        .brand-logo-heading {
            display: block;
            height: clamp(38px,6.5vw,72px);
            width: auto;
            max-width: 100%;
            margin: 4px 0 6px;
        }

        [dir="rtl"] .brand-logo-heading {
            margin-left: auto;
            margin-right: 0;
        }

        .projects-brand-heading {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;
            flex-wrap: wrap;
        }

        [dir="rtl"] .projects-brand-heading .projects-brand-logo {
            order: 2;
        }

        .projects-brand-logo {
            height: clamp(64px,9vw,96px);
            width: auto;
            display: block;
        }