/* ==========================================================================
   FIFA Bus Hire — Qatar 2026 · luxury coach charter
   All rules scoped under .qbh so the bundle drops into WordPress cleanly.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..500&family=Inter:wght@300..700&display=swap');

/* ---------- tokens ---------- */
.qbh{
  --ink:        #08080a;
  --ink-1:      #0d0d11;
  --ink-2:      #14141a;
  --ink-3:      #1c1c24;

  --maroon:     #8a1538;   /* Qatar maroon */
  --maroon-hi:  #a71b45;
  --maroon-lo:  #4d0b1f;

  --gold:       #c9a227;
  --gold-hi:    #e8cd77;
  --gold-lo:    #8a6f16;

  --sand:       #f3ede2;
  --sand-2:     #d9d1c3;
  --mute:       #9a958c;
  --line:       rgba(243,237,226,.12);
  --line-2:     rgba(243,237,226,.06);

  --glass:      rgba(14,14,18,.62);
  --glass-2:    rgba(243,237,226,.045);

  --d-display:  'Newsreader', Georgia, 'Times New Roman', serif;
  --d-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --d-label:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem;
  --sp-5:3rem;  --sp-6:4rem; --sp-7:6rem;   --sp-8:9rem;

  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:32px;
  --wrap:1220px;

  --z-nav:100; --z-drawer:200; --z-modal:300;

  background:var(--ink);
  color:var(--sand);
  font-family:var(--d-body);
  font-size:16px;
  line-height:1.62;
  font-weight:400;
  letter-spacing:-.003em;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.qbh *,.qbh *::before,.qbh *::after{box-sizing:border-box}
.qbh img,.qbh svg,.qbh video{display:block;max-width:100%}
.qbh a{color:inherit;text-decoration:none}
.qbh button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.qbh ul,.qbh ol{margin:0;padding:0;list-style:none}
.qbh p{margin:0 0 1em}
.qbh h1,.qbh h2,.qbh h3,.qbh h4{margin:0;font-family:var(--d-display);font-weight:400;letter-spacing:-.014em;font-optical-sizing:auto}

.qbh :focus-visible{
  outline:2px solid var(--gold-hi);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

/* ---------- type scale (tracking is size-specific, per Apple typography) ---------- */
.qbh .d1{font-size:clamp(2.6rem,7.1vw,5.4rem);line-height:1.06;letter-spacing:-.021em;font-weight:400}
.qbh .d2{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.12;letter-spacing:-.018em;font-weight:400}
.qbh .d3{font-size:clamp(1.55rem,2.9vw,2.25rem);line-height:1.22;letter-spacing:-.013em;font-weight:400}
.qbh .d4{font-size:clamp(1.18rem,1.85vw,1.45rem);line-height:1.32;letter-spacing:-.008em;font-weight:500}

.qbh .lede{
  font-size:clamp(1.02rem,1.3vw,1.15rem);
  line-height:1.74;color:var(--sand-2);max-width:62ch;font-weight:400;letter-spacing:-.006em;
}
.qbh .muted{color:var(--mute)}
.qbh .gold{color:var(--gold-hi)}
.qbh .serif-em{font-family:var(--d-display);font-style:italic;font-weight:400}

.qbh .eyebrow{
  font-family:var(--d-label);
  font-size:.7rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);
  display:flex;align-items:center;gap:.7rem;
}
.qbh .eyebrow::before{
  content:'';width:34px;height:1px;flex:0 0 34px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.qbh .eyebrow.centered{justify-content:center}
.qbh .eyebrow.centered::after{
  content:'';width:34px;height:1px;flex:0 0 34px;
  background:linear-gradient(270deg,transparent,var(--gold));
}
.qbh .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* gold foil headline treatment */
.qbh .foil{
  background:linear-gradient(100deg,var(--gold-lo) 0%,var(--gold-hi) 26%,#fff6d8 40%,var(--gold-hi) 54%,var(--gold) 76%,var(--gold-lo) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:qbhFoil 9s linear infinite;
  display:inline-block;padding-bottom:.06em;
}
@keyframes qbhFoil{0%{background-position:180% 0}100%{background-position:-80% 0}}

/* ---------- layout ---------- */
.qbh .wrap{width:min(100% - 3rem,var(--wrap));margin-inline:auto}
.qbh .wrap-wide{width:min(100% - 4.5rem,1440px);margin-inline:auto}
.qbh .sec{padding-block:clamp(4.5rem,9vw,var(--sp-8))}
.qbh .sec-tight{padding-block:clamp(3rem,6vw,var(--sp-6))}
.qbh .stack-sm>*+*{margin-top:var(--sp-2)}
.qbh .stack>*+*{margin-top:var(--sp-3)}
.qbh .head{max-width:70ch}
.qbh .head .d2{margin-top:1.1rem}
.qbh .head .lede{margin-top:1.3rem}
.qbh .head.centered{margin-inline:auto;text-align:center}
.qbh .head.centered .lede{margin-inline:auto}

.qbh .rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- buttons ---------- */

.qbh .btn{
  --btn-bg:var(--gold);--btn-fg:#1a1405;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:0 1.7rem;
  border-radius:100px;
  font-family:var(--d-body);font-size:.9rem;font-weight:600;
  letter-spacing:.005em;
  background:var(--btn-bg);color:var(--btn-fg);
  cursor:pointer;
  will-change:transform;
  transition:box-shadow .28s cubic-bezier(.22,1,.36,1),background-color .28s ease,color .28s ease;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 30px -12px rgba(201,162,39,.7);
}
.qbh .btn:hover{box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 18px 44px -14px rgba(201,162,39,.9)}
.qbh .btn:active{filter:brightness(.95)}
.qbh .btn svg{width:17px;height:17px;flex:none}

.qbh .btn-ghost{
  --btn-bg:transparent;--btn-fg:var(--sand);
  border:1px solid var(--line);
  box-shadow:none;font-weight:600;
  backdrop-filter:blur(10px);
}
.qbh .btn-ghost:hover{background:var(--glass-2);border-color:rgba(243,237,226,.28);box-shadow:none}

.qbh .btn-maroon{--btn-bg:var(--maroon);--btn-fg:#fff;box-shadow:0 10px 30px -12px rgba(138,21,56,.9)}
.qbh .btn-maroon:hover{--btn-bg:var(--maroon-hi);box-shadow:0 18px 44px -14px rgba(167,27,69,.95)}

.qbh .btn-sm{min-height:42px;padding:0 1.15rem;font-size:.82rem}

.qbh .link-gold{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.88rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  font-family:var(--d-label);letter-spacing:.14em;font-size:.95rem;
  color:var(--gold-hi);
}
.qbh .link-gold svg{width:15px;height:15px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.qbh .link-gold:hover svg{transform:translateX(5px)}

/* ---------- nav (translucent chrome, content scrolls under) ---------- */
.qbh .nav{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);
  display:flex;align-items:center;
  height:78px;
  transition:height .4s cubic-bezier(.22,1,.36,1),background-color .4s ease,border-color .4s ease;
  border-bottom:1px solid transparent;
}
.qbh .nav::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,8,10,.85),rgba(8,8,10,0));
  opacity:1;transition:opacity .4s ease;pointer-events:none;
}
.qbh .nav.is-stuck{
  height:66px;
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom-color:var(--line-2);
}
.qbh .nav.is-stuck::before{opacity:0}
.qbh .nav-in{display:flex;align-items:center;gap:var(--sp-3);width:min(100% - 4.5rem,1440px);margin-inline:auto}

.qbh .brand{display:flex;align-items:center;gap:.72rem;flex:none;margin-right:auto}
.qbh .brand-mark{width:40px;height:40px;flex:none}
.qbh .brand-txt{display:flex;flex-direction:column;line-height:1}
.qbh .brand-txt b{
  font-family:var(--d-label);font-weight:600;font-size:1.02rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--sand);
}
.qbh .brand-txt span{
  font-family:var(--d-label);font-size:.56rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold);margin-top:.28rem;
}

.qbh .nav-links{display:flex;align-items:center;gap:.35rem}
.qbh .nav-links a{
  position:relative;padding:.55rem .95rem;border-radius:100px;
  font-size:.87rem;font-weight:600;letter-spacing:.01em;color:var(--sand-2);
  transition:color .25s ease,background-color .25s ease;
}
.qbh .nav-links a:hover{color:var(--sand);background:var(--glass-2)}
.qbh .nav-links a[aria-current="page"]{color:var(--gold-hi)}
.qbh .nav-links a[aria-current="page"]::after{
  content:'';position:absolute;left:50%;bottom:.18rem;translate:-50% 0;
  width:16px;height:2px;border-radius:2px;background:var(--gold);
}
.qbh .nav-cta{display:flex;align-items:center;gap:.6rem;flex:none}
.qbh .nav-tel{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--d-label);font-size:1rem;letter-spacing:.1em;color:var(--sand-2);
  padding:.4rem .6rem;border-radius:100px;transition:color .25s ease;
}
.qbh .nav-tel:hover{color:var(--gold-hi)}
.qbh .nav-tel svg{width:15px;height:15px}

.qbh .burger{
  display:none;width:46px;height:46px;flex:none;
  align-items:center;justify-content:center;border-radius:50%;
  border:1px solid var(--line);
}
.qbh .burger span{display:block;width:18px;height:1.5px;background:var(--sand);border-radius:2px;position:relative;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .2s ease}
.qbh .burger span::before,.qbh .burger span::after{
  content:'';position:absolute;left:0;width:18px;height:1.5px;background:var(--sand);border-radius:2px;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.qbh .burger span::before{top:-6px}
.qbh .burger span::after{top:6px}
.qbh .burger[aria-expanded="true"] span{background:transparent}
.qbh .burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.qbh .burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* mobile sheet */
.qbh .sheet{
  position:fixed;inset:0;z-index:var(--z-drawer);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem 2rem 3rem;
  background:rgba(8,8,10,.86);
  backdrop-filter:blur(26px) saturate(160%);
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  opacity:0;visibility:hidden;
  transition:opacity .38s ease,visibility .38s;
}
.qbh .sheet.open{opacity:1;visibility:visible}
.qbh .sheet a{
  display:block;padding:.7rem 0;
  font-family:var(--d-display);font-size:2.05rem;font-weight:400;line-height:1.3;letter-spacing:-.018em;
  border-bottom:1px solid var(--line-2);
  opacity:0;transform:translateY(14px);
}
.qbh .sheet.open a{animation:qbhSheetIn .5s cubic-bezier(.22,1,.36,1) forwards}
@keyframes qbhSheetIn{to{opacity:1;transform:none}}
.qbh .sheet .btn{margin-top:2rem;width:100%}

/* ---------- hero ---------- */
.qbh .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.qbh .hero-media{position:absolute;inset:-8% 0 -8% 0;z-index:-2;will-change:transform}
.qbh .hero-media img{width:100%;height:100%;object-fit:cover;object-position:66% 46%}
.qbh .hero-grade{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 70% at 8% 96%,rgba(138,21,56,.42),transparent 58%),
    radial-gradient(70% 46% at 92% 4%,rgba(201,162,39,.16),transparent 54%),
    linear-gradient(100deg,rgba(8,8,10,.94) 0%,rgba(8,8,10,.8) 26%,rgba(8,8,10,.42) 52%,rgba(8,8,10,.3) 72%,rgba(8,8,10,.6) 100%),
    linear-gradient(180deg,rgba(8,8,10,.72) 0%,rgba(8,8,10,.2) 24%,rgba(8,8,10,.5) 62%,rgba(8,8,10,.94) 88%,var(--ink) 100%);
}
.qbh .hero-in{width:min(100% - 4.5rem,1440px);margin-inline:auto;padding-block:clamp(6rem,12vh,9rem) clamp(2.4rem,5vh,3.6rem)}
.qbh .hero h1{max-width:16ch;margin-top:1.4rem}
.qbh .hero .lede{margin-top:1.7rem;max-width:52ch}
.qbh .hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.3rem}

.qbh .hero-strip{
  margin-top:clamp(2.6rem,6vh,4.2rem);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line-2);
  border-block:1px solid var(--line-2);
}
.qbh .hero-strip>div{background:rgba(8,8,10,.42);backdrop-filter:blur(8px);padding:1.15rem 1.3rem}
.qbh .hero-strip dt{
  font-family:var(--d-label);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);
}
.qbh .hero-strip dd{
  margin:.42rem 0 0;font-family:var(--d-display);font-size:clamp(1.45rem,2.4vw,2rem);
  line-height:1;color:var(--sand);letter-spacing:-.016em;font-weight:400;
}
.qbh .hero-strip dd small{font-size:.44em;letter-spacing:.06em;color:var(--gold);margin-left:.35em;font-family:var(--d-label)}

.qbh .scroll-hint{
  position:absolute;right:max(2.25rem,calc(50vw - 720px));bottom:1.6rem;
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--d-label);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);
}
.qbh .scroll-hint i{display:block;width:1px;height:38px;background:linear-gradient(180deg,transparent,var(--gold));position:relative;overflow:hidden}
.qbh .scroll-hint i::after{content:'';position:absolute;inset:0;background:var(--gold-hi);animation:qbhDrop 2.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes qbhDrop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- countdown ---------- */
.qbh .countdown{display:flex;gap:.55rem;align-items:flex-end}
.qbh .cd-cell{
  min-width:62px;padding:.55rem .3rem .45rem;text-align:center;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:linear-gradient(180deg,rgba(243,237,226,.06),rgba(243,237,226,.01));
  backdrop-filter:blur(10px);
}
.qbh .cd-cell b{display:block;font-family:var(--d-display);font-size:1.7rem;font-weight:400;line-height:1;color:var(--sand);font-variant-numeric:tabular-nums}
.qbh .cd-cell span{display:block;margin-top:.3rem;font-family:var(--d-label);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}

/* ---------- marquee ---------- */
.qbh .marquee{
  overflow:hidden;border-block:1px solid var(--line-2);
  padding-block:1.15rem;background:var(--ink-1);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.qbh .marquee-track{display:flex;gap:3.4rem;width:max-content;animation:qbhMarquee 42s linear infinite}
.qbh .marquee:hover .marquee-track{animation-play-state:paused}
.qbh .marquee-track span{
  display:inline-flex;align-items:center;gap:.75rem;flex:none;
  font-family:var(--d-label);font-size:.94rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
}
.qbh .marquee-track span svg{width:15px;height:15px;color:var(--gold)}
@keyframes qbhMarquee{to{transform:translateX(-50%)}}

/* ---------- cards ---------- */
.qbh .card{
  position:relative;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(243,237,226,.045),rgba(243,237,226,.012));
  padding:var(--sp-3);overflow:hidden;
  transition:border-color .4s ease,transform .5s cubic-bezier(.22,1,.36,1),background-color .4s ease;
}
.qbh .card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(201,162,39,.14),transparent 62%);
  opacity:0;transition:opacity .45s ease;
}
.qbh .card:hover{border-color:rgba(201,162,39,.34);transform:translateY(-4px)}
.qbh .card:hover::after{opacity:1}

.qbh .card-ic{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  border:1px solid rgba(201,162,39,.3);
  background:linear-gradient(145deg,rgba(201,162,39,.18),rgba(201,162,39,.03));
  color:var(--gold-hi);margin-bottom:1.15rem;
}
.qbh .card-ic svg{width:21px;height:21px}
.qbh .card h3{font-size:1.32rem;margin-bottom:.55rem}
.qbh .card p{font-size:.94rem;color:var(--mute);line-height:1.7;margin:0}

.qbh .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
.qbh .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.15rem}
.qbh .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.15rem}

/* numbered service card */
.qbh .svc{padding:1.9rem 1.7rem}
.qbh .svc .n{
  position:absolute;top:1.2rem;right:1.5rem;
  font-family:var(--d-display);font-size:3.2rem;line-height:1;color:rgba(243,237,226,.055);
  letter-spacing:-.04em;
}
.qbh .svc ul{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.4rem}
.qbh .svc ul li{
  font-family:var(--d-label);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.28rem .6rem;border:1px solid var(--line);border-radius:100px;color:var(--sand-2);
}

/* ---------- chapters (scroll story) ---------- */
.qbh .chapter{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.qbh .chapter+.chapter{margin-top:clamp(3.5rem,8vw,7rem)}
.qbh .chapter:nth-child(even) .chapter-media{order:-1}
.qbh .chapter-media{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:5/4;background:var(--ink-2)}
.qbh .chapter-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.qbh .chapter:hover .chapter-media img{transform:scale(1)}
.qbh .chapter-media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(200deg,transparent 40%,rgba(8,8,10,.55));
}
.qbh .chapter-media b{
  position:absolute;left:1.5rem;bottom:1.35rem;z-index:2;
  font-family:var(--d-label);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold-hi);font-weight:600;
}
.qbh .chapter-body h3{margin-top:1rem}
.qbh .chapter-body p{margin-top:1.1rem;color:var(--sand-2);font-weight:300;line-height:1.8}
.qbh .chapter-body .link-gold{margin-top:1.3rem}

/* ---------- fleet rail (drag + momentum) ---------- */
.qbh .rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.qbh .rail-nav{display:flex;gap:.5rem}
.qbh .rail-btn{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--sand-2);
  transition:border-color .3s ease,color .3s ease,background-color .3s ease,opacity .3s ease;
}
.qbh .rail-btn:hover{border-color:var(--gold);color:var(--gold-hi);background:rgba(201,162,39,.08)}
.qbh .rail-btn[disabled]{opacity:.3;cursor:not-allowed}
.qbh .rail-btn svg{width:17px;height:17px}

.qbh .rail-view{margin-top:2.2rem;overflow:hidden;cursor:grab;touch-action:pan-y}
.qbh .rail-view.dragging{cursor:grabbing}
.qbh .rail-track{display:flex;gap:1.15rem;will-change:transform}
.qbh .rail-track>*{flex:0 0 clamp(258px,25vw,352px)}

.qbh .veh{
  border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-1);
  transition:border-color .4s ease;
}
.qbh .veh:hover{border-color:rgba(201,162,39,.3)}
.qbh .veh-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-2)}
.qbh .veh-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.qbh .veh:hover .veh-media img{transform:scale(1.05)}
.qbh .veh-media .tag{
  position:absolute;top:.9rem;left:.9rem;
  font-family:var(--d-label);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:100px;
  background:rgba(8,8,10,.62);backdrop-filter:blur(10px);
  border:1px solid rgba(201,162,39,.34);color:var(--gold-hi);
}
.qbh .veh-body{padding:1.35rem 1.4rem 1.5rem}
.qbh .veh-body h3{font-size:1.42rem}
.qbh .veh-seats{
  font-family:var(--d-label);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  margin-top:.3rem;
}
.qbh .veh-body p{font-size:.9rem;color:var(--mute);margin:.8rem 0 0;line-height:1.65}
.qbh .veh-specs{margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.35rem}
.qbh .veh-specs li{
  font-size:.74rem;font-family:var(--d-label);letter-spacing:.12em;text-transform:uppercase;
  color:var(--sand-2);padding:.26rem .55rem;border:1px solid var(--line);border-radius:var(--r-sm);
}
.qbh .veh-foot{
  margin-top:1.3rem;padding-top:1.1rem;border-top:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}

.qbh .rail-prog{margin-top:1.6rem;height:2px;background:var(--line-2);border-radius:2px;overflow:hidden}
.qbh .rail-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));border-radius:2px;transform-origin:left}

/* ---------- split feature ---------- */
.qbh .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.qbh .split-media{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5}
.qbh .split-media img{width:100%;height:100%;object-fit:cover}
.qbh .split-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,8,10,.6))}
.qbh .split-badge{
  position:absolute;z-index:2;left:1.4rem;bottom:1.4rem;right:1.4rem;
  padding:1.1rem 1.25rem;border-radius:var(--r-md);
  background:rgba(8,8,10,.55);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--line);
}
.qbh .split-badge b{display:block;font-family:var(--d-display);font-size:1.5rem;line-height:1.1}
.qbh .split-badge span{display:block;margin-top:.3rem;font-size:.84rem;color:var(--mute)}

/* ---------- stats ---------- */
.qbh .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.qbh .stats>div{background:var(--ink-1);padding:1.8rem 1.5rem}
.qbh .stats b{display:block;font-family:var(--d-display);font-size:clamp(2.1rem,3.8vw,2.85rem);font-weight:400;line-height:1;color:var(--gold-hi);letter-spacing:-.02em}
.qbh .stats span{display:block;margin-top:.6rem;font-family:var(--d-label);font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}

/* ---------- process ---------- */
.qbh .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem;position:relative}
.qbh .steps::before{
  content:'';position:absolute;top:34px;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}
.qbh .step{position:relative;text-align:center;padding:0 1rem}
.qbh .step b{
  position:relative;z-index:1;display:grid;place-items:center;
  width:68px;height:68px;margin:0 auto 1.4rem;border-radius:50%;
  font-family:var(--d-display);font-size:1.6rem;color:var(--gold-hi);
  border:1px solid rgba(201,162,39,.34);
  background:radial-gradient(circle at 50% 30%,rgba(201,162,39,.18),var(--ink-1) 70%);
}
.qbh .step h3{font-size:1.3rem;margin-bottom:.5rem}
.qbh .step p{font-size:.92rem;color:var(--mute);margin:0}

/* ---------- testimonials ---------- */
.qbh .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.15rem}
.qbh .quote{padding:1.9rem 1.7rem}
.qbh .quote svg.mark{width:30px;height:30px;color:rgba(201,162,39,.4);margin-bottom:1rem}
.qbh .quote p{font-family:var(--d-display);font-size:1.16rem;line-height:1.62;color:var(--sand);font-weight:400;margin:0}
.qbh .quote footer{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line-2)}
.qbh .quote footer b{display:block;font-size:.92rem;font-weight:700}
.qbh .quote footer span{display:block;font-size:.82rem;color:var(--mute);margin-top:.15rem}

/* ---------- CTA band ---------- */
.qbh .band{position:relative;overflow:hidden;border-radius:var(--r-xl);isolation:isolate}
.qbh .band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.qbh .band::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,rgba(77,11,31,.94) 0%,rgba(8,8,10,.86) 52%,rgba(8,8,10,.7) 100%);
}
.qbh .band-in{padding:clamp(3rem,6vw,5.2rem) clamp(1.6rem,5vw,4.5rem);max-width:62ch}
.qbh .band .hero-cta{margin-top:2rem}

/* ---------- forms ---------- */
.qbh .form{display:grid;gap:1.05rem}
.qbh .field{display:flex;flex-direction:column;gap:.45rem}
.qbh .field label{
  font-family:var(--d-label);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sand-2);
}
.qbh .field label .req{color:var(--gold)}
.qbh .field input,.qbh .field select,.qbh .field textarea{
  width:100%;min-height:52px;padding:.85rem 1rem;
  font-family:var(--d-body);font-size:1rem;color:var(--sand);
  background:rgba(243,237,226,.04);
  border:1px solid var(--line);border-radius:var(--r-md);
  transition:border-color .25s ease,background-color .25s ease;
  appearance:none;
}
.qbh .field textarea{min-height:130px;resize:vertical;line-height:1.6}
.qbh .field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a227' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:17px;padding-right:2.8rem;
}
.qbh .field select option{background:var(--ink-2);color:var(--sand)}
.qbh .field input::placeholder,.qbh .field textarea::placeholder{color:rgba(154,149,140,.7)}
.qbh .field input:focus,.qbh .field select:focus,.qbh .field textarea:focus{
  outline:none;border-color:var(--gold);background:rgba(243,237,226,.07);
}
.qbh .field .hint{font-size:.8rem;color:var(--mute)}
.qbh .field .err{font-size:.82rem;color:#ff8a9b;display:none}
.qbh .field.invalid input,.qbh .field.invalid select,.qbh .field.invalid textarea{border-color:#ff8a9b}
.qbh .field.invalid .err{display:block}
.qbh .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.qbh .form-note{font-size:.83rem;color:var(--mute);line-height:1.6}
.qbh .form-status{
  display:none;padding:.9rem 1.1rem;border-radius:var(--r-md);
  border:1px solid rgba(201,162,39,.4);background:rgba(201,162,39,.09);
  font-size:.92rem;color:var(--gold-hi);
}
.qbh .form-status.show{display:block}

/* ---------- FAQ ---------- */
.qbh .faq{border-top:1px solid var(--line-2)}
.qbh .faq-item{border-bottom:1px solid var(--line-2)}
.qbh .faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.4rem 0;text-align:left;
  font-family:var(--d-display);font-size:1.2rem;font-weight:400;letter-spacing:-.01em;color:var(--sand);
  transition:color .25s ease;
}
.qbh .faq-q:hover{color:var(--gold-hi)}
.qbh .faq-q i{
  flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;position:relative;transition:border-color .3s ease,transform .45s cubic-bezier(.22,1,.36,1);
}
.qbh .faq-q i::before,.qbh .faq-q i::after{content:'';position:absolute;background:var(--gold);border-radius:2px;transition:opacity .3s ease}
.qbh .faq-q i::before{width:11px;height:1.5px}
.qbh .faq-q i::after{width:1.5px;height:11px}
.qbh .faq-item.open .faq-q i{transform:rotate(180deg);border-color:var(--gold)}
.qbh .faq-item.open .faq-q i::after{opacity:0}
.qbh .faq-a{overflow:hidden;height:0}
.qbh .faq-a>div{padding:0 0 1.5rem;max-width:76ch;color:var(--mute);font-size:.97rem;line-height:1.75}

/* ---------- contact tiles ---------- */
.qbh .ctile{display:flex;gap:1.1rem;align-items:flex-start;padding:1.5rem}
.qbh .ctile .card-ic{margin:0}
.qbh .ctile h3{font-size:1.18rem;margin-bottom:.3rem}
.qbh .ctile a,.qbh .ctile p{font-size:.94rem;color:var(--mute);margin:0;line-height:1.7}
.qbh .ctile a:hover{color:var(--gold-hi)}

/* ---------- page hero (inner pages) ---------- */
.qbh .phero{position:relative;padding-block:clamp(9rem,17vh,12.5rem) clamp(3.5rem,7vw,5.5rem);overflow:hidden;isolation:isolate}
.qbh .phero-media{position:absolute;inset:0;z-index:-2}
.qbh .phero-media img{width:100%;height:100%;object-fit:cover;object-position:62% 48%}
.qbh .phero::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(8,8,10,.92) 0%,rgba(8,8,10,.72) 30%,rgba(8,8,10,.38) 60%,rgba(8,8,10,.6) 100%),
    linear-gradient(180deg,rgba(8,8,10,.86),rgba(8,8,10,.4) 40%,rgba(8,8,10,.9) 82%,var(--ink));
}
.qbh .phero h1{margin-top:1.2rem;max-width:18ch;color:var(--sand)}
.qbh .phero .lede{margin-top:1.4rem}
.qbh .crumb{
  font-family:var(--d-label);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);
  display:flex;gap:.6rem;align-items:center;
}
.qbh .crumb a:hover{color:var(--gold-hi)}

/* ---------- filter chips ---------- */
.qbh .chips{display:flex;flex-wrap:wrap;gap:.55rem}
.qbh .chip{
  min-height:42px;padding:0 1.15rem;border-radius:100px;border:1px solid var(--line);
  font-family:var(--d-label);font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-2);
  transition:border-color .28s ease,color .28s ease,background-color .28s ease;
}
.qbh .chip:hover{border-color:rgba(201,162,39,.5);color:var(--sand)}
.qbh .chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#1a1405;font-weight:700}

/* ---------- footer ---------- */
.qbh .foot{border-top:1px solid var(--line-2);background:var(--ink-1);padding-block:clamp(3.5rem,6vw,5rem) 2rem}
.qbh .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2.4rem}
.qbh .foot h4{
  font-family:var(--d-label);font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  margin-bottom:1.1rem;font-weight:600;
}
.qbh .foot li+li{margin-top:.6rem}
.qbh .foot a,.qbh .foot p{font-size:.92rem;color:var(--mute);line-height:1.7}
.qbh .foot a{transition:color .25s ease}
.qbh .foot a:hover{color:var(--gold-hi)}
.qbh .foot-brand p{margin-top:1.2rem;max-width:34ch}
.qbh .foot-social{display:flex;gap:.6rem;margin-top:1.4rem}
.qbh .foot-social a{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--sand-2);
  transition:border-color .3s ease,color .3s ease,background-color .3s ease;
}
.qbh .foot-social a:hover{border-color:var(--gold);color:var(--gold-hi);background:rgba(201,162,39,.08)}
.qbh .foot-social svg{width:16px;height:16px}
.qbh .foot-bottom{
  margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line-2);
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
}
.qbh .foot-bottom p{margin:0;font-size:.84rem}
.qbh .disclaimer{
  margin-top:1.4rem;font-size:.79rem;line-height:1.6;color:rgba(154,149,140,.78);max-width:100ch;
}

/* ---------- floating WhatsApp ---------- */
.qbh .wa{
  position:fixed;right:1.15rem;bottom:1.15rem;z-index:var(--z-nav);
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#25d366;color:#062e16;
  box-shadow:0 14px 34px -12px rgba(37,211,102,.9);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.qbh .wa:hover{transform:scale(1.07)}
.qbh .wa svg{width:27px;height:27px}

/* ---------- reveal ---------- */
.qbh [data-rv]{opacity:0;transform:translateY(26px);will-change:transform,opacity}
.qbh [data-rv].in{opacity:1;transform:none;transition:opacity .82s cubic-bezier(.22,1,.36,1),transform .82s cubic-bezier(.22,1,.36,1);transition-delay:var(--rvd,0ms)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .qbh .nav-links{display:none}
  .qbh .burger{display:flex}
  .qbh .nav-tel{display:none}
  .qbh .foot-grid{grid-template-columns:1fr 1fr}
  .qbh .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .qbh .grid-3,.qbh .quotes,.qbh .steps{grid-template-columns:1fr}
  .qbh .steps::before{display:none}
  .qbh .chapter,.qbh .split{grid-template-columns:1fr}
  .qbh .chapter:nth-child(even) .chapter-media{order:0}
  .qbh .split-media{aspect-ratio:4/3}
  .qbh .stats{grid-template-columns:repeat(2,1fr)}
  .qbh .hero-strip{grid-template-columns:repeat(2,1fr)}
  .qbh .scroll-hint{display:none}
}
@media (max-width:620px){
  .qbh .grid-2,.qbh .grid-4,.qbh .form-row{grid-template-columns:1fr}
  .qbh .foot-grid{grid-template-columns:1fr}
  .qbh .hero-cta .btn{width:100%}
  .qbh .countdown{flex-wrap:wrap}
  .qbh .cd-cell{min-width:56px}
  .qbh .sheet a{font-size:1.9rem}
}

/* ---------- accessibility preferences ---------- */
@media (prefers-reduced-motion:reduce){
  .qbh *,.qbh *::before,.qbh *::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .qbh [data-rv]{opacity:1;transform:none}
  .qbh .hero-media{transform:none !important}
  .qbh .marquee-track{animation:none}
}
@media (prefers-reduced-transparency:reduce){
  .qbh .nav.is-stuck,.qbh .sheet,.qbh .split-badge,.qbh .veh-media .tag,.qbh .cd-cell,.qbh .hero-strip>div{
    backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--ink-1);
  }
}
@media (prefers-contrast:more){
  .qbh{--line:rgba(243,237,226,.4);--line-2:rgba(243,237,226,.24);--mute:#c9c4ba}
  .qbh .card,.qbh .veh{background:var(--ink-1)}
}

/* ---------- tournament board ---------- */
.qbh .board{
  position:relative;border:1px solid var(--line);border-radius:var(--r-xl);
  background:
    radial-gradient(120% 100% at 0% 0%,rgba(138,21,56,.28),transparent 58%),
    radial-gradient(90% 90% at 100% 100%,rgba(201,162,39,.12),transparent 60%),
    linear-gradient(180deg,rgba(243,237,226,.05),rgba(243,237,226,.012));
  overflow:hidden;
}
.qbh .board::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(243,237,226,.055) 0 1px,transparent 1px 84px),
    repeating-linear-gradient(0deg,rgba(243,237,226,.045) 0 1px,transparent 1px 84px);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000,transparent 78%);
  mask-image:radial-gradient(120% 100% at 50% 0%,#000,transparent 78%);
}
.qbh .board-top{
  position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;padding:clamp(1.8rem,3.4vw,2.6rem) clamp(1.5rem,3.4vw,2.6rem) 0;
}
.qbh .board-mark{display:flex;align-items:center;gap:1rem}
.qbh .board-mark i{
  display:grid;place-items:center;width:54px;height:54px;flex:none;border-radius:16px;
  border:1px solid rgba(201,162,39,.36);color:var(--gold-hi);
  background:linear-gradient(150deg,rgba(201,162,39,.2),rgba(201,162,39,.02));
}
.qbh .board-mark i svg{width:24px;height:24px}
.qbh .board-mark b{display:block;font-family:var(--d-display);font-size:1.5rem;font-weight:400;letter-spacing:-.014em;line-height:1.15}
.qbh .board-mark span{
  display:block;margin-top:.3rem;font-family:var(--d-label);font-size:.72rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
}
.qbh .board-live{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--d-label);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);
  padding:.45rem .85rem;border:1px solid var(--line);border-radius:100px;
}
.qbh .board-live em{
  width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(201,162,39,.6);animation:qbhPulse 2.4s ease-out infinite;
}
@keyframes qbhPulse{70%{box-shadow:0 0 0 9px rgba(201,162,39,0)}100%{box-shadow:0 0 0 0 rgba(201,162,39,0)}}

.qbh .board-grid{
  position:relative;margin-top:clamp(1.6rem,3vw,2.2rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);
  border-top:1px solid var(--line-2);
}
.qbh .board-cell{background:rgba(8,8,10,.42);padding:1.5rem clamp(1.5rem,3.4vw,2.6rem)}
.qbh .board-cell dt{
  font-family:var(--d-label);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);
}
.qbh .board-cell dd{
  margin:.55rem 0 0;font-family:var(--d-display);font-weight:500;
  font-size:clamp(1.32rem,2vw,1.7rem);line-height:1.2;letter-spacing:-.014em;color:var(--sand);
}
.qbh .board-cell p{margin:.5rem 0 0;font-size:.86rem;color:var(--mute);line-height:1.6}
.qbh .board-note{
  position:relative;padding:1.1rem clamp(1.5rem,3.4vw,2.6rem);
  border-top:1px solid var(--line-2);font-size:.8rem;color:rgba(154,149,140,.85);line-height:1.6;
}
@media (max-width:900px){ .qbh .board-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .qbh .board-grid{grid-template-columns:1fr} }

/* Optional helper for an em dash inside display type: the body face keeps the
   stroke weight consistent with the surrounding serif on a dark ground. */
.qbh .d1 .dash,.qbh .d2 .dash,.qbh .d3 .dash{
  font-family:var(--d-body);font-weight:300;
  font-size:.72em;vertical-align:.12em;letter-spacing:.02em;
}

/* ---------- mobile corrections ---------- */
/* Below 560px the brand, the quote button and the burger no longer fit on one
   line — the burger was being pushed past the viewport edge, which made the
   mobile menu unreachable. The quote CTA already lives inside the sheet. */
@media (max-width:560px){
  .qbh .nav-cta .btn-sm{display:none}
  .qbh .brand-mark{width:34px;height:34px}
  .qbh .brand-txt b{font-size:1.02rem;letter-spacing:.16em}
  .qbh .brand-txt span{font-size:.55rem;letter-spacing:.28em}
}

/* Touch targets: 44px minimum on anything tappable (Apple HIG / WCAG 2.2). */
.qbh .btn-sm{min-height:44px}
.qbh .chip{min-height:44px}
.qbh .foot-social a{width:44px;height:44px}
.qbh .burger{width:44px;height:44px}
.qbh .brand{padding-block:2px;min-height:44px}
.qbh .link-gold{padding-block:.55rem;min-height:44px}
.qbh .nav-links a{min-height:40px;display:inline-flex;align-items:center}
.qbh .foot li a{display:inline-flex;align-items:center;min-height:34px}

/* the sheet's CTA is a button, not a nav line — don't inherit the display face */
.qbh .sheet a.btn{
  font-family:var(--d-body);font-size:.95rem;font-weight:600;
  letter-spacing:.005em;line-height:1;border-bottom:0;
  padding:0 1.7rem;text-align:center;
}

/* ---------- hero key art ----------
   Pitch geometry drawn over the hero in gold: a centre circle, halfway line
   and penalty arc, anchored off the right edge. It reads as football at a
   glance without borrowing anyone else's tournament artwork. */
.qbh .hero-art{
  position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}
.qbh .hero-art svg{
  position:absolute;right:-13%;top:50%;translate:0 -50%;
  width:min(74vw,1000px);height:auto;
  color:var(--gold);opacity:.34;
  filter:drop-shadow(0 0 26px rgba(201,162,39,.28));
}
.qbh .hero-art .spin{
  transform-box:fill-box;transform-origin:center;
  animation:qbhSpin 58s linear infinite;
}
@keyframes qbhSpin{to{transform:rotate(360deg)}}
.qbh .hero-art .draw{
  stroke-dasharray:var(--len,1400);stroke-dashoffset:var(--len,1400);
  animation:qbhDraw 2.6s cubic-bezier(.22,1,.36,1) .35s forwards;
}
@keyframes qbhDraw{to{stroke-dashoffset:0}}

/* match ticker under the eyebrow — the tournament, stated plainly */
.qbh .ticker{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  margin-top:1rem;
}
.qbh .ticker span{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--d-label);font-size:.7rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sand-2);
  padding:.4rem .75rem;border-radius:100px;
  border:1px solid var(--line);background:rgba(8,8,10,.45);
  backdrop-filter:blur(10px);
}
.qbh .ticker span b{color:var(--gold-hi);font-weight:700}
.qbh .ticker span.hot{border-color:rgba(201,162,39,.45);background:rgba(201,162,39,.1)}

@media (max-width:900px){
  .qbh .hero-art svg{right:-34%;width:120vw;opacity:.24}
}
@media (prefers-reduced-motion:reduce){
  .qbh .hero-art .spin{animation:none}
  .qbh .hero-art .draw{animation:none;stroke-dashoffset:0}
}