:root {
    --gold: #C8960C;
    --gold-light: #E8B422;
    --gold-pale: #F5D87A;
    --copper: #9A6A18;
    --ember: #D7A20F;
    --petrol: #E8B422;
    --steel: #B7A15A;
    --black: #0A0A0A;
    --dark: #111111;
    --dark2: #1A1A1A;
    --dark3: #242424;
    --mid: #333333;
    --grey: #888888;
    --light-grey: #CCCCCC;
    --white: #F5F2EC;
    --red: #C0392B;
    --green: #27AE60;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    overflow-x: clip;
    max-width: 100%;
    background: var(--black);
  }
  body {
    background: #050606;
    color: var(--white);
    font-family: 'Manrope', 'Barlow', sans-serif;
    font-weight: 500;
    overflow-x: clip;
    max-width: 100%;
    width: 100%;
    font-style: normal;
  }

  em, i, cite, var, address, dfn, abbr { font-style: normal !important; }
  * { font-style: normal !important; }

  /* --- BACKGROUND CANVAS --- */

  /* --- TICKER --- */
  .ticker-wrap {
    background: var(--gold);
    color: var(--black);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    overflow: hidden;
    white-space: nowrap;
    padding: 6px 0;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
  }
  .ticker-inner {
    display: inline-block;
    animation: ticker 40s linear infinite;
  }
  .ticker-inner span { margin: 0 40px; }
  .tick-up { color: #1a5c2e; }
  .tick-down { color: #7a1515; }
  @keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

  /* --- NAV --- */
  nav {
    position: fixed;
    top: 30px; left: 0; right: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px clamp(18px, 4vw, 60px);
    background: rgba(10,10,10,0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(200,150,12,0.2);
    width: 100%;
  }

  .nav-left { display: flex; align-items: center; flex: 1; }
  .nav-dept-logo img { height: 52px; object-fit: contain; opacity: 0.8; }
  .nav-dept-placeholder {
    height: 44px; width: 120px;
    background: rgba(200,150,12,0.12);
    border: 1px dashed rgba(200,150,12,0.3);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 9px; font-weight: 600; letter-spacing: 0.15em;
    text-transform: uppercase; color: rgba(200,150,12,0.5);
    text-align: center; padding: 4px 8px;
  }
  .nav-center {
    position: absolute; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center;
  }
  .nav-center img { height: 52px; object-fit: contain; }
  .nav-center-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px; font-weight: 600;
    color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase;
  }
  .nav-right {
    display: flex; align-items: center; justify-content: flex-end;
    flex: 1; gap: 36px;
  }
  .nav-links { display: flex; gap: 28px; list-style: none; }
  .nav-links a {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--light-grey);
    text-decoration: none; transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--gold); }

  /* --- HAMBURGER --- */
  .hamburger {
    display: none; flex-direction: column; justify-content: center;
    align-items: center; width: 44px; height: 44px;
    background: none; border: 1px solid rgba(200,150,12,0.35);
    cursor: pointer; padding: 10px; gap: 5px;
    transition: border-color 0.2s; flex-shrink: 0;
  }
  .hamburger:hover { border-color: var(--gold); }
  .hamburger span {
    display: block; width: 22px; height: 1.5px; background: var(--gold);
    transition: transform 0.3s ease, opacity 0.3s ease; transform-origin: center;
  }
  .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  /* --- MOBILE DRAWER --- */
  .mobile-nav {
    display: none; position: fixed;
    top: 0; right: 0; width: min(320px, 88vw); height: 100dvh;
    background: rgba(10,10,10,0.99); backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(200,150,12,0.18); z-index: 1100;
    flex-direction: column; padding: 80px 36px 48px;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1); overflow-y: auto;
  }
  .mobile-nav.open { display: flex; transform: translateX(0); }
  .mobile-nav-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); z-index: 1099;
  }
  .mobile-nav-overlay.open { display: block; }
  .mobile-nav-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px; font-weight: 600; color: var(--gold);
    letter-spacing: 0.18em; text-transform: uppercase;
    margin-bottom: 40px; padding-bottom: 24px;
    border-bottom: 1px solid rgba(200,150,12,0.15);
  }
  .mobile-nav ul { list-style: none; display: flex; flex-direction: column; gap: 4px; flex: 1; }
  .mobile-nav ul li a {
    display: flex; align-items: center; gap: 14px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px; font-weight: 500; letter-spacing: 0.14em;
    text-transform: uppercase; color: rgba(245,242,236,0.65);
    text-decoration: none; padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04); transition: color 0.2s;
  }
  .mobile-nav ul li a:hover { color: var(--gold); }
  .mobile-nav ul li a::before {
    content: ''; display: block; width: 4px; height: 4px;
    border-radius: 50%; background: var(--gold); opacity: 0.4; flex-shrink: 0;
  }
  .mobile-nav ul li a:hover::before { opacity: 1; }
  .mobile-nav-footer {
    margin-top: 32px; padding-top: 24px;
    border-top: 1px solid rgba(200,150,12,0.12);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
    color: rgba(245,242,236,0.25);
  }

  /* --- HERO --- */
  .hero {
    position: relative; height: 100svh; min-height: 560px;
    display: flex; align-items: flex-end; overflow: hidden; margin-top: 30px;
  }
  .hero-bg {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
    background: url('../hero-quarry-operations.webp') center center / cover no-repeat;
    background-attachment: scroll;
    /* the <video> stays PIXEL-PURE — no filter, transform, animation or
       will-change on it. On iOS Safari, CSS filters/transforms directly on a
       <video> break its compositing: autoplay gets refused (the big native
       play button appears) and the frame can freeze. The darkening lives on
       the overlays/pseudo-elements; there is no Ken Burns zoom (it was never
       on mobile anyway, and a fully clean video maximizes iOS autoplay). */
    filter: none; transform: none;
    animation: none;
  }
  /* Pause the heavy continuous/decorative time-based animations while scrolling
     — otherwise each keeps its layer re-compositing every frame on mobile's
     main-thread scroll. They resume the instant scrolling stops (imperceptible
     — these are slow ambient loops). Deliberately scoped to TIME-based loops
     only; the scroll-driven (SDA) animations are scroll-controlled and must
     NEVER be paused here or the flight/hero/about scrub would freeze. */
  html.hm-scrolling .hero-bg,
  html.hm-scrolling .wa-fab::after,
  html.hm-scrolling .ticker-inner,
  html.hm-scrolling .hero-partners-track,
  html.hm-scrolling .partner-track { animation-play-state: paused; }

  @media (max-width: 768px) {
    .hero { height: 100svh; min-height: 580px; aspect-ratio: unset; align-items: flex-end; }
    .hero-bg { animation: none; transform: none; background-size: cover; background-position: center center; filter: none; }
    /* uniform tint replaces the old brightness(0.38) video filter (the video
       element itself must stay filter-free for iOS autoplay) */
    .hero-overlay { background: linear-gradient(to top, rgba(10,10,10,1) 0%, rgba(10,10,10,0.55) 45%, rgba(10,10,10,0.15) 100%), rgba(5,6,6,0.5); }
    .hero-content { padding: 0 20px 36px; width: 100%; max-width: 100%; }
    .hero-eyebrow { font-size: 10px; letter-spacing: 0.2em; margin-bottom: 12px; font-weight: 700; }
    .hero h1 { font-size: clamp(30px, 8vw, 52px); font-weight: 600; margin-bottom: 14px; }
    .hero-sub { font-size: 14px; line-height: 1.6; margin-bottom: 24px; max-width: 100%; font-weight: 500; color: rgba(245,242,236,0.85); }
    .hero-motto { font-size: 17px; }
    .btn-primary { padding: 10px 22px; font-size: 11px; font-weight: 700; }
    .btn-outline { padding: 9px 22px; font-size: 11px; font-weight: 700; margin-left: 10px; }
  }
  @media (max-width: 420px) {
    .hero h1 { font-size: clamp(26px, 7vw, 38px); font-weight: 600; }
    .hero .btn-primary, .hero .btn-outline { display: block; width: 100%; text-align: center; margin: 0 0 10px 0; }
  }

  .hero-overlay {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; inset: 0;
    background: linear-gradient(to top, rgba(10,10,10,1) 0%, rgba(10,10,10,0.3) 60%, transparent 100%);
  }
  .hero-content { position: relative; z-index: 2; padding: 0 60px 80px; max-width: min(900px, 100%); width: 100%; }
  .hero-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 20px; display: flex; align-items: center; gap: 12px;
  }
  .hero-eyebrow::before { content:''; display:block; width:40px; height:1px; background:var(--gold); }
  .hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(32px, 7vw, 96px); font-weight: 600; line-height: 1.0; margin-bottom: 24px; color: var(--white); }
  .hero h1 span.gold { color: var(--gold-light); }
  .hero-sub { font-size: 16px; line-height: 1.7; color: rgba(245,242,236,0.72); max-width: 580px; margin-bottom: 40px; }
  .hero-motto {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px;
    font-style: italic;
    color: rgba(245,242,236,0.88);
    max-width: 580px;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
  }
  .hero-motto b, .hero-motto .gold { color: var(--gold-light); font-style: normal; }
  .btn-primary {
    display: inline-block; padding: 14px 40px; background: var(--gold); color: var(--black);
    font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    border-radius: 6px; border: none;
    box-shadow: 0 4px 14px rgba(200,150,12,0.25);
  }
  .btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(200,150,12,0.35); }
  .btn-outline {
    display: inline-block; padding: 13px 40px; border: 1px solid var(--gold); color: var(--gold);
    font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; margin-left: 16px;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    border-radius: 6px;
  }
  .btn-outline:hover { background: var(--gold); color: var(--black); box-shadow: 0 4px 14px rgba(200,150,12,0.25); }

  /* --- SECTION COMMON --- */
  section { padding: 100px clamp(18px, 4vw, 60px); }
  .section-label {
    font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold);
    margin-bottom: 16px; display: flex; align-items: center; gap: 12px;
  }
  .section-label::before { content:''; display:block; width:30px; height:1px; background:var(--gold); }
  .section-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(36px, 4vw, 60px); font-weight: 600; line-height: 1.1; color: var(--white); margin-bottom: 24px; }
  .section-title span.gold { color: var(--gold); }
  .section-body { font-size: 15px; line-height: 1.85; color: rgba(245,242,236,0.65); max-width: 700px; }
  .gold-line { width: 60px; height: 2px; background: var(--gold); margin: 24px 0; }

  /* --- HERO PARTNERS BANNER --- */
  .hero-partners-banner {
    background: var(--dark2);
    border-top: 1px solid rgba(200,150,12,0.18);
    border-bottom: 1px solid rgba(200,150,12,0.18);
    padding: 0; overflow: hidden;
  }
  .hero-partners-header {
    text-align: center; padding: 28px 24px 0;
    font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600;
    letter-spacing: 0.35em; text-transform: uppercase; color: var(--grey);
  }
  .hero-partners-track-wrap { overflow: hidden; padding: 28px 0 32px; position: relative; }
  .hero-partners-track-wrap::before, .hero-partners-track-wrap::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none;
  }
  .hero-partners-track-wrap::before { left: 0; background: linear-gradient(to right, var(--dark2), transparent); }
  .hero-partners-track-wrap::after  { right: 0; background: linear-gradient(to left, var(--dark2), transparent); }
  .hero-partners-track { display: flex; gap: 0; animation: hpSlide 30s linear infinite; width: max-content; }
  .hero-partners-track:hover { animation-play-state: paused; }
  @keyframes hpSlide { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
  .hp-logo {
    display: flex; align-items: center; justify-content: center;
    padding: 0 48px; border-right: 1px solid rgba(200,150,12,0.08);
    min-width: 160px; height: 72px; flex-shrink: 0; transition: background 0.3s;
  }
  .hp-logo:hover { background: rgba(200,150,12,0.06); }
  .hp-logo img { height: 40px; max-width: 110px; object-fit: contain; opacity: 0.85; filter: none; transition: opacity 0.3s, transform 0.3s; }
  .hp-logo:hover img { opacity: 1; transform: scale(1.08); }

  /* --- OPERATIONS MODAL --- */
  .ops-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.88); z-index: 9998;
    align-items: center; justify-content: center;
    padding: 20px; backdrop-filter: blur(4px);
  }
  .ops-modal-overlay.open { display: flex; }
  .ops-modal-box {
    background: var(--dark2); border: 1px solid rgba(200,150,12,0.25);
    width: 100%; max-width: 860px; max-height: 88vh; overflow-y: auto;
    position: relative; display: grid; grid-template-columns: 1fr 1fr;
  }
  .ops-modal-img { position: relative; min-height: 340px; overflow: hidden; flex-shrink: 0; }
  .ops-modal-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.65) saturate(0.8); }
  .ops-modal-img-overlay { position: absolute; inset: 0; background: linear-gradient(to right, transparent 60%, var(--dark2) 100%); }
  .ops-modal-content { padding: 48px 40px; display: flex; flex-direction: column; justify-content: flex-start; overflow-y: auto; }
  .ops-modal-close {
    position: absolute; top: 14px; right: 14px;
    background: rgba(10,10,10,0.7); border: 1px solid rgba(200,150,12,0.4);
    color: var(--gold); width: 36px; height: 36px; font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; z-index: 10; transition: background 0.2s;
  }
  .ops-modal-close:hover { background: rgba(200,150,12,0.15); }
  .ops-modal-tag { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
  .ops-modal-tag::before { content:''; display:block; width:24px; height:1px; background:var(--gold); }
  .ops-modal-box h2 { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 600; color: var(--white); margin-bottom: 16px; line-height: 1.1; }
  .ops-modal-box .gold-line { width:48px; height:2px; background:var(--gold); margin:0 0 20px; }
  .ops-modal-box p { font-size: 13px; line-height: 1.85; color: rgba(245,242,236,0.62); margin-bottom: 14px; }
  .ops-modal-box ul { list-style:none; margin-top:12px; display:flex; flex-direction:column; gap:9px; }
  .ops-modal-box ul li { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; letter-spacing:0.04em; color: rgba(245,242,236,0.72); display: flex; align-items: flex-start; gap: 10px; }
  .ops-modal-box ul li::before { content:'◆'; color:var(--gold); flex-shrink:0; margin-top:1px; font-size:9px; }
  @media (max-width: 700px) {
    .ops-modal-box { grid-template-columns: 1fr; }
    .ops-modal-img { min-height: 200px; }
    .ops-modal-img-overlay { background: linear-gradient(to bottom, transparent 60%, var(--dark2) 100%); }
    .ops-modal-content { padding: 28px 24px; }
  }

  /* --- ABOUT --- */
  #about { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; background: var(--black); }
  .about-img { position: relative; height: 600px; overflow: hidden; }
  .about-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.8) saturate(0.9); }
  .about-img::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 40%; background: linear-gradient(to top, var(--black), transparent); }
  .about-badge {
    position: absolute; top: 30px; right: -20px;
    background: var(--gold); color: var(--black); padding: 20px 24px; text-align: center; z-index: 2;
    animation: badgeGlow 3s ease-in-out infinite alternate;
  }
  .about-badge strong { display: block; font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 700; line-height: 1; }
  .about-badge span { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; }

  /* --- OPERATIONS GRID --- */
  #operations { background: var(--dark); }
  .ops-intro { max-width: 680px; margin-bottom: 60px; }
  .ops-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 60px; }
  .op-card { position: relative; overflow: hidden; height: 420px; cursor: pointer; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
  .op-card:hover { transform: scale(1.01); }
  .op-card:nth-child(1) { grid-column: span 2; }
  .op-card img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) saturate(0.7); transition: filter 0.5s, transform 0.5s; }
  .op-card:hover img { filter: brightness(0.65) saturate(0.9); transform: scale(1.04); }
  .op-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.2) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 36px; transition: padding 0.3s; }
  .op-card-num { font-family: 'Cormorant Garamond', serif; font-size: 80px; font-weight: 600; color: rgba(200,150,12,0.18); line-height: 1; position: absolute; top: 20px; right: 30px; transition: color 0.4s, transform 0.4s; }
  .op-card:hover .op-card-num { color: rgba(200,150,12,0.32); transform: scale(1.1) translateY(-4px); }
  .op-tag { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
  .op-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 400; color: var(--white); margin-bottom: 12px; }
  .op-card p { font-size: 13px; line-height: 1.7; color: rgba(245,242,236,0.6); max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
  .op-card:hover p { max-height: 120px; }
  .op-arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); opacity: 0; transition: opacity 0.3s; text-decoration: none; }
  .op-card:hover .op-arrow { opacity: 1; }

  /* --- VISION MISSION VALUES --- */
  #vmv { background: var(--black); text-align: center; }
  .vmv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 60px; }
  .vmv-card {
    background: var(--dark2); padding: 60px 44px; position: relative; overflow: hidden;
    border-top: 3px solid transparent;
    transition: border-color 0.3s, transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
  }
  .vmv-card:hover { border-top-color: var(--gold); transform: translateY(-6px); box-shadow: 0 20px 60px rgba(200,150,12,0.12); }
  .vmv-icon-img {
    width: 64px; height: 64px;
    object-fit: contain;
    margin: 0 auto 20px;
    display: block;
    filter: brightness(0) invert(0.7) sepia(1) saturate(2) hue-rotate(5deg);
    opacity: 0.85;
    transition: opacity 0.3s, transform 0.3s;
  }
  .vmv-card:hover .vmv-icon-img { opacity: 1; transform: scale(1.08); }
  .vmv-icon-placeholder {
    width: 64px; height: 64px; margin: 0 auto 20px;
    background: rgba(200,150,12,0.1); border: 1px dashed rgba(200,150,12,0.35);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Barlow Condensed', sans-serif; font-size: 8px; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase; color: rgba(200,150,12,0.5);
    text-align: center;
  }
  .vmv-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 32px; font-weight: 600; color: var(--gold); margin-bottom: 20px; }
  .vmv-card p { font-size: 14px; line-height: 1.8; color: rgba(245,242,236,0.6); }
  .vmv-values-list { list-style: none; margin-top: 16px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
  .vmv-values-list li { font-size: 13px; color: rgba(245,242,236,0.65); display: flex; gap: 10px; align-items: flex-start; }
  .vmv-values-list li::before { content: '◆'; color: var(--gold); font-size: 8px; margin-top: 5px; flex-shrink: 0; }

  /* --- BOARD OF DIRECTORS --- */
  #board { background: var(--dark); }
  .board-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    margin-top: 60px;
  }
  .board-img-wrap {
    position: relative;
    overflow: hidden;
  }
  .board-img-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--dark3) 0%, var(--dark2) 60%, rgba(200,150,12,0.06) 100%);
    border: 1px dashed rgba(200,150,12,0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 280px;
    max-height: 400px;
  }
  .board-actual-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center top;
    display: block;
    min-height: 280px;
    max-height: 400px;
  }
  .board-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, rgba(17,17,17,0.55) 100%);
    pointer-events: none;
  }
  .board-placeholder-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.25em; text-transform: uppercase;
    color: rgba(200,150,12,0.45);
    text-align: center;
  }
  .board-placeholder-icon {
    width: 56px; height: 56px;
    border: 1px solid rgba(200,150,12,0.2);
    display: flex; align-items: center; justify-content: center;
  }
  .board-placeholder-icon svg { width: 28px; height: 28px; opacity: 0.3; fill: var(--gold); }
  .board-content {}
  .board-intro-text {
    font-size: 15px; line-height: 1.85;
    color: rgba(245,242,236,0.62);
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(200,150,12,0.12);
  }
  .board-members { display: flex; flex-direction: column; gap: 18px; }
  .board-member {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: flex-start; gap: 20px;
    padding: 24px 28px;
    background: rgba(200,150,12,0.04);
    border: 1px solid rgba(200,150,12,0.1);
    border-left: 3px solid var(--gold);
    transition: background 0.3s, border-color 0.3s, transform 0.3s cubic-bezier(0.16,1,0.3,1);
  }
  .board-member:hover {
    background: rgba(200,150,12,0.08);
    border-color: rgba(200,150,12,0.3);
    border-left-color: var(--gold-light);
    transform: translateX(6px);
  }
  .board-member-photo {
    width: 88px; height: 88px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    display: block;
    flex: 0 0 auto;
    border: 2px solid rgba(245,216,122,0.45);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 14px 34px rgba(0,0,0,0.28);
  }
  .board-member-photo--blank {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(245,242,236,0.14), rgba(200,150,12,0.08));
  }
  .board-member-photo--blank::before,
  .board-member-photo--blank::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(245,242,236,0.42);
  }
  .board-member-photo--blank::before {
    top: 20px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
  }
  .board-member-photo--blank::after {
    bottom: 18px;
    width: 46px;
    height: 25px;
    border-radius: 18px 18px 8px 8px;
  }
  .board-member-body { min-width: 0; }
  .board-group-title {
    margin: 0 0 16px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-light);
  }
  .board-audit { margin-top: 28px; }
  .board-member-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px; font-weight: 600; color: var(--white);
    line-height: 1.2;
  }
  .board-member-title {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold); margin-bottom: 6px;
  }
  .board-member-desc {
    font-size: 13px; line-height: 1.75;
    color: rgba(245,242,236,0.55);
  }
  .board-footer-note {
    margin-top: 32px; padding-top: 24px;
    border-top: 1px solid rgba(200,150,12,0.1);
    font-size: 13px; line-height: 1.75;
    color: rgba(245,242,236,0.45);
  }
  @media (max-width: 900px) {
    .board-layout { grid-template-columns: 1fr; gap: 40px; }
    .board-actual-img, .board-img-placeholder { aspect-ratio: 16/9; min-height: 200px; max-height: 260px; }
  }
  @media (max-width: 560px) {
    .board-member {
      grid-template-columns: 68px minmax(0, 1fr);
      gap: 14px;
      padding: 20px;
    }
    .board-member-photo { width: 64px; height: 64px; }
    .board-member-photo--blank::before { top: 14px; width: 20px; height: 20px; }
    .board-member-photo--blank::after { bottom: 13px; width: 34px; height: 18px; }
  }

  /* --- HEADQUARTERS --- */
  #headquarters { background: var(--black); }
  .hq-intro { max-width: 800px; margin-bottom: 50px; }
  .hq-collage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .hq-item { position: relative; overflow: hidden; border: 1px solid rgba(200,150,12,0.15); background: var(--dark2); cursor: pointer; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s, border-color 0.3s; }
  .hq-item:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 16px 48px rgba(200,150,12,0.15); }
  .hq-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.5s ease; position: relative; z-index: 1; }
  .hq-item:hover img { transform: scale(1.04); }
  .hq-blueprint-wrap { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
  .hq-gallery-wrap { aspect-ratio: 4 / 3; }
  .hq-item .img-placeholder { position: absolute; inset: 0; z-index: 0; display: none; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e1e1e 0%, #242424 100%); font-family: 'Barlow Condensed', sans-serif; font-size: 11px; letter-spacing: 0.15em; color: rgba(200,150,12,0.4); text-transform: uppercase; text-align: center; padding: 10px; }
  @media (max-width: 900px) { .hq-collage { grid-template-columns: repeat(2, 1fr); gap: 10px; } .hq-blueprint-wrap { aspect-ratio: 3 / 2; } }
  @media (max-width: 480px) { .hq-blueprint-wrap { aspect-ratio: 3 / 2; } .hq-gallery-wrap { aspect-ratio: 1 / 1; } }

  /* --- SCHEMATICS --- */
  #schematics { background: var(--dark); }
  .schematics-tabs { display: flex; gap: 0; margin-bottom: 40px; border-bottom: 1px solid rgba(200,150,12,0.2); }
  .sch-tab {
    padding: 14px 32px; font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--grey); cursor: pointer; border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s; background: none; border-top: none; border-left: none; border-right: none;
  }
  .sch-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
  .sch-tab:hover { color: var(--gold-light); }
  .sch-panel { display: none; }
  .sch-panel.active { display: block; }
  .sch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .sch-item {
    background: var(--dark2); border: 1px solid rgba(200,150,12,0.1);
    overflow: hidden; cursor: pointer;
    transition: border-color 0.3s, transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
  }
  .sch-item:hover { border-color: var(--gold); transform: translateY(-6px); box-shadow: 0 16px 48px rgba(200,150,12,0.15); }

  /* -- sch-thumb -- */
  .sch-thumb {
    min-height: 0;
    aspect-ratio: 559 / 306;
    overflow: hidden;
    background: #050505;
    position: relative;
    display: block;
    padding: 0;
  }
  #sch-vehicles .sch-thumb { aspect-ratio: 5 / 4; }
  .sch-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
    transition: filter 0.35s ease;
    display: block;
    position: relative;
    z-index: 1;
  }
  .sch-item:hover .sch-thumb img { transform: none; }
  .sch-thumb .img-placeholder {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e1e1e 0%, #242424 100%);
    border-bottom: 1px solid rgba(200,150,12,0.08);
  }
  .sch-thumb .img-placeholder::after {
    content: '';
    display: block;
    width: 32px; height: 32px;
    border: 1px solid rgba(200,150,12,0.2);
    border-radius: 50%;
  }
  .sch-info { padding: 20px 24px; }
  .sch-info h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); margin-bottom: 6px; }
  .sch-info p { font-size: 12px; color: var(--grey); }

  /* --- IMAGE MODAL --- */
  .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 9999; align-items: center; justify-content: center; }
  .modal-overlay.open { display: flex; }
  .modal-box { background: var(--dark2); border: 1px solid rgba(200,150,12,0.3); max-width: 800px; width: 90%; padding: 40px; position: relative; max-height: 80vh; overflow-y: auto; }
  .modal-box img { width:100%; height:auto; object-fit: contain; max-height: 500px; }
  .modal-close { position: absolute; top: 16px; right: 16px; background: none; border: 1px solid var(--gold); color: var(--gold); width: 32px; height: 32px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .modal-title { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }

  /* --- FINANCIALS --- */
  #financials { background: var(--black); }
  .fin-tabs { display:flex; gap:0; margin-bottom:40px; border-bottom:1px solid rgba(200,150,12,0.2); }
  .fin-tab { padding: 13px 28px; font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); cursor: pointer; border-bottom: 2px solid transparent; background: none; border-top: none; border-left: none; border-right: none; transition: color 0.2s; }
  .fin-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
  .fin-panel { display: none; }
  .fin-panel.active { display: block; }
  .fin-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-bottom: 40px; }
  .fin-kpi { background: var(--dark2); border: 1px solid rgba(200,150,12,0.12); padding: 28px 24px; border-top: 3px solid var(--gold); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s; }
  .fin-kpi:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(200,150,12,0.1); }
  .fin-kpi-label { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); margin-bottom: 10px; }
  .fin-kpi-val { font-family: 'Cormorant Garamond', serif; font-size: 36px; font-weight: 600; color: var(--white); line-height: 1; }
  .fin-kpi-change { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600; margin-top: 6px; }
  .up { color: var(--green); }
  .down { color: var(--red); }
  .fin-table { width:100%; border-collapse: collapse; }
  .fin-table th { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); text-align: left; padding: 12px 16px; border-bottom: 1px solid rgba(200,150,12,0.2); }
  .fin-table td { padding: 14px 16px; font-size: 13px; color: rgba(245,242,236,0.72); border-bottom: 1px solid rgba(255,255,255,0.04); }
  .fin-table tr:hover td { background: rgba(200,150,12,0.04); }
  .fin-table td:first-child { color: var(--white); font-weight: 500; }
  .fin-note { font-size: 11px; color: var(--grey); margin-top: 16px; }

  .document-section { background: var(--black); }
  .document-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: end;
    margin-bottom: 46px;
  }
  .document-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    max-width: 440px;
  }
  .document-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 9px 13px;
    border: 1px solid rgba(245,216,122,0.2);
    background: rgba(245,216,122,0.055);
    color: rgba(245,242,236,0.78);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .document-feature {
    display: block;
    margin-bottom: 22px;
  }
  .document-panel,
  .document-card {
    border: 1px solid rgba(200,150,12,0.2);
    background:
      linear-gradient(145deg, rgba(24,24,21,0.94), rgba(7,7,7,0.9)),
      radial-gradient(circle at 18% 0%, rgba(245,216,122,0.12), transparent 36%);
    box-shadow: 0 26px 80px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
  }
  .document-panel {
    padding: clamp(28px, 4vw, 48px);
    position: relative;
    overflow: hidden;
  }
  .document-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(245,216,122,0.1), transparent 36%),
      repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,0.022) 19px 20px);
    pointer-events: none;
  }
  .document-panel > * { position: relative; z-index: 1; }
  .document-tag,
  .document-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 7px 10px;
    border: 1px solid rgba(245,216,122,0.24);
    background: rgba(200,150,12,0.08);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-light);
  }
  .document-title {
    max-width: 720px;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(34px, 4.2vw, 58px);
    font-weight: 600;
    line-height: 1.02;
    color: var(--white);
    margin: 18px 0 16px;
  }
  .document-copy {
    max-width: 680px;
    color: rgba(245,242,236,0.68);
    font-size: 14px;
    line-height: 1.82;
    margin-bottom: 22px;
  }
  .document-audit {
    display: grid;
    gap: 6px;
    max-width: 520px;
    padding: 16px 18px;
    border: 1px solid rgba(245,216,122,0.17);
    border-left: 3px solid var(--gold);
    background: rgba(200,150,12,0.075);
    color: rgba(245,242,236,0.74);
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 24px;
  }
  .document-audit strong {
    font-family: 'Barlow Condensed', sans-serif;
    color: var(--gold-light);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .document-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
  .document-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 12px 20px;
    border: 1px solid rgba(200,150,12,0.62);
    color: #0a0a0a;
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  }
  .document-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(200,150,12,0.2);
    filter: brightness(1.06);
  }
  .document-file-type {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(245,216,122,0.32);
    background: linear-gradient(160deg, rgba(245,242,236,0.95), rgba(222,208,167,0.9));
    color: #111;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
  }
  .document-view-label {
    color: rgba(245,216,122,0.86);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 16px;
    margin-top: 18px;
  }
  .document-card {
    min-height: 240px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .document-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--gold-light), transparent);
    opacity: 0.8;
  }
  .document-card:hover {
    transform: translateY(-4px);
    border-color: rgba(245,216,122,0.46);
    box-shadow: 0 24px 70px rgba(0,0,0,0.36);
  }
  .document-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
  }
  .document-file-type {
    width: 44px;
    height: 54px;
    align-items: flex-end;
    padding-bottom: 8px;
    flex: 0 0 auto;
  }
  .document-card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 25px;
    line-height: 1.05;
    color: var(--white);
  }
  .document-card p {
    flex: 1;
    color: rgba(245,242,236,0.6);
    font-size: 13px;
    line-height: 1.68;
  }
  .document-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .document-card .document-link {
    min-height: 36px;
    padding: 9px 14px;
    font-size: 10px;
  }
  @media (max-width: 900px) {
    .document-intro { grid-template-columns: 1fr; gap: 18px; }
    .document-meta { justify-content: flex-start; }
    .document-grid { grid-template-columns: 1fr; }
    .document-view-label { grid-column: 2; }
    .document-card-footer { align-items: stretch; flex-direction: column; }
    .document-card .document-link { width: 100%; }
  }

  /* --- PARTNERS --- */
  /* DOCUMENT LIBRARY ENHANCEMENTS */
  .document-section {
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(ellipse at 86% 8%, rgba(74,125,135,0.14), transparent 36%),
      radial-gradient(ellipse at 10% 100%, rgba(200,150,12,0.12), transparent 34%),
      linear-gradient(180deg, #050606 0%, #0b0b0a 52%, #050606 100%);
  }
  .document-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, transparent 0 48%, rgba(245,216,122,0.08) 49%, transparent 50%),
      repeating-linear-gradient(0deg, transparent 0 46px, rgba(255,255,255,0.025) 47px 48px),
      repeating-linear-gradient(90deg, transparent 0 78px, rgba(245,216,122,0.035) 79px 80px);
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent);
    opacity: 0.68;
    animation: docGridDrift 18s linear infinite;
  }
  .document-section::after {
    content: '';
    position: absolute;
    left: -20%;
    right: -20%;
    top: 18%;
    height: 1px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(245,216,122,0.48), transparent);
    box-shadow: 0 0 42px rgba(245,216,122,0.22);
    animation: docScan 7s ease-in-out infinite;
  }
  .document-section > * { position: relative; z-index: 1; }
  .document-intro {
    align-items: center;
    margin-bottom: 50px;
  }
  .document-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: min(520px, 100%);
    max-width: none;
  }
  .document-pill {
    position: relative;
    justify-content: center;
    gap: 11px;
    min-height: 48px;
    padding: 10px 16px;
    overflow: hidden;
    border-color: rgba(245,216,122,0.28);
    background: rgba(12,13,12,0.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
  }
  .document-pill::before {
    content: none;
  }
  .document-pill-art {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-light);
    border: 1px solid rgba(245,216,122,0.32);
    background:
      radial-gradient(circle at 30% 22%, rgba(245,216,122,0.22), transparent 44%),
      linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.018));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 26px rgba(0,0,0,0.26);
  }
  .document-pill-art svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
  }
  .document-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 4vw, 44px);
    align-items: stretch;
    border-color: rgba(245,216,122,0.34);
    background:
      linear-gradient(135deg, rgba(20,21,20,0.96), rgba(8,8,7,0.92)),
      radial-gradient(circle at 86% 20%, rgba(74,125,135,0.16), transparent 34%);
  }
  .document-panel::before {
    background:
      linear-gradient(110deg, rgba(245,216,122,0.12), transparent 28%),
      repeating-linear-gradient(135deg, transparent 0 18px, rgba(255,255,255,0.026) 19px 20px);
  }
  .document-panel::after {
    content: '';
    position: absolute;
    inset: auto -15% 0 -15%;
    height: 42%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(245,216,122,0.11), transparent);
    transform: translateX(-70%) skewX(-18deg);
    animation: docPanelSweep 6.5s ease-in-out infinite;
  }
  .document-panel-main,
  .document-rail { position: relative; z-index: 1; }
  .document-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
  }
  .document-feature-mark,
  .document-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-light);
    border: 1px solid rgba(245,216,122,0.34);
    background:
      radial-gradient(circle at 32% 24%, color-mix(in srgb, currentColor 22%, transparent), transparent 38%),
      linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.025));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), inset 0 -18px 28px rgba(0,0,0,0.16), 0 16px 38px rgba(0,0,0,0.28);
  }
  .document-feature-mark {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    animation: docFloat 4s ease-in-out infinite;
  }
  .document-feature-mark svg,
  .document-symbol svg {
    width: 42px;
    height: 42px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.28));
  }
  .document-tag { margin: 0; }
  .document-title { margin-top: 0; }
  .document-audit {
    border-left: 0;
    border-color: rgba(245,216,122,0.2);
    background: rgba(255,255,255,0.035);
  }
  .document-rail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-content: center;
  }
  .document-stat {
    min-height: 94px;
    padding: 18px;
    border: 1px solid rgba(245,216,122,0.18);
    background: rgba(255,255,255,0.035);
  }
  .document-stat strong {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 34px;
    line-height: 1;
    color: var(--white);
  }
  .document-stat span {
    display: block;
    margin-top: 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(245,216,122,0.78);
  }
  .document-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
  }
  .document-card {
    --doc-accent: var(--gold-light);
    min-height: 270px;
    border-color: rgba(245,216,122,0.18);
    background:
      linear-gradient(155deg, rgba(22,22,20,0.95), rgba(8,8,8,0.93)),
      radial-gradient(circle at 82% 12%, color-mix(in srgb, var(--doc-accent) 20%, transparent), transparent 34%);
  }
  .document-card[data-tone="governance"] { --doc-accent: #7da9c4; }
  .document-card[data-tone="safety"] { --doc-accent: #5fbf8a; }
  .document-card[data-tone="media"] { --doc-accent: #d3a94d; }
  .document-card[data-tone="vendor"] { --doc-accent: #c98a58; }
  .document-card::before {
    width: 4px;
    background: linear-gradient(180deg, var(--doc-accent), transparent);
  }
  .document-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 0%, color-mix(in srgb, var(--doc-accent) 14%, transparent) 48%, transparent 72%);
    opacity: 0;
    transform: translateX(-34%);
    transition: opacity 0.25s ease, transform 0.45s ease;
  }
  .document-card:hover::after {
    opacity: 1;
    transform: translateX(34%);
  }
  .document-symbol {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    color: var(--doc-accent);
    transition: transform 0.25s ease, border-color 0.25s ease;
  }
  .document-card:hover .document-symbol {
    transform: translateY(-2px) rotate(-4deg);
    border-color: color-mix(in srgb, var(--doc-accent) 55%, transparent);
  }
  .document-file-type {
    position: relative;
    width: 42px;
    height: 52px;
    border-color: color-mix(in srgb, var(--doc-accent, var(--gold-light)) 42%, transparent);
    background: linear-gradient(160deg, rgba(245,242,236,0.96), rgba(214,203,170,0.92));
  }
  .document-file-type::before {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0 50%, rgba(180,162,113,0.95) 51% 100%);
    border-left: 1px solid rgba(17,17,17,0.14);
    border-bottom: 1px solid rgba(17,17,17,0.14);
  }
  .document-status {
    border-color: color-mix(in srgb, var(--doc-accent, var(--gold-light)) 38%, transparent);
    color: color-mix(in srgb, var(--doc-accent, var(--gold-light)) 88%, #ffffff);
    background: color-mix(in srgb, var(--doc-accent, var(--gold-light)) 10%, transparent);
  }
  .document-card h3,
  .document-card p,
  .document-card-footer,
  .document-card-top { position: relative; z-index: 1; }
  .document-link {
    gap: 10px;
    box-shadow: 0 10px 30px rgba(200,150,12,0.12);
  }
  .document-link::after {
    content: '>';
    font-size: 14px;
    line-height: 1;
    transition: transform 0.2s ease;
  }
  .document-link:hover::after { transform: translateX(3px); }
  @keyframes docGridDrift {
    to { background-position: 0 48px, 0 48px, 80px 0; }
  }
  @keyframes docScan {
    0%, 18% { transform: translateY(-40px); opacity: 0; }
    42% { opacity: 0.8; }
    74%, 100% { transform: translateY(360px); opacity: 0; }
  }
  @keyframes docPanelSweep {
    0%, 24% { transform: translateX(-80%) skewX(-18deg); opacity: 0; }
    42% { opacity: 1; }
    70%, 100% { transform: translateX(80%) skewX(-18deg); opacity: 0; }
  }
  @keyframes docFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  @media (max-width: 900px) {
    .document-meta { grid-template-columns: 1fr; width: 100%; }
    .document-panel { grid-template-columns: 1fr; }
    .document-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 560px) {
    .document-kicker { align-items: flex-start; flex-direction: column; gap: 12px; }
    .document-rail { grid-template-columns: 1fr; }
    .document-card { min-height: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .document-section::before,
    .document-section::after,
    .document-panel::after,
    .document-feature-mark { animation: none; }
  }

  .doc-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1.294;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(160deg, #f7f4ec, #d9d0b4);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 18px 42px rgba(0,0,0,0.38), inset 0 0 0 1px rgba(17,17,17,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .doc-thumb canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .doc-thumb.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    background-size: 200% 100%;
    animation: docThumbShimmer 1.4s infinite;
  }
  .doc-thumb.is-error::after {
    content: 'Preview unavailable';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.6);
    background: rgba(17,17,17,0.35);
  }
  @keyframes docThumbShimmer {
    to { background-position: -200% 0; }
  }
  .document-card-top {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
  }
  .doc-thumb-lg {
    aspect-ratio: 1.4;
    box-shadow: 0 22px 52px rgba(0,0,0,0.46), inset 0 0 0 1px rgba(17,17,17,0.06);
  }
  .document-rail { grid-template-columns: 1fr; }
  .doc-frame {
    display: grid;
    gap: 12px;
    align-content: start;
  }
  .doc-frame-page {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(245,242,236,0.55);
  }
  .doc-frame-view {
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
  }
  .document-link.is-secondary {
    background: transparent;
    border: 1px solid rgba(245,242,236,0.18);
    box-shadow: none;
  }
  .document-card-footer .document-link:first-child { border-right: 1px solid rgba(245,242,236,0.14); }

  .doc-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 20010;
    display: grid;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }
  .doc-preview-overlay.is-open,
  .doc-preview-overlay.open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.25s ease;
  }
  .doc-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8,9,11,0.78);
    backdrop-filter: blur(6px);
  }
  .doc-preview-frame {
    position: relative;
    width: min(920px, 100%);
    max-height: 90vh;
    display: grid;
    grid-template-rows: auto 1fr;
    background: #0d0f13;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 40px 90px rgba(0,0,0,0.6);
  }
  .doc-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .doc-preview-title {
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--paper);
  }
  .doc-preview-close {
    background: transparent;
    border: 0;
    color: rgba(245,242,236,0.6);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 6px;
  }
  .doc-preview-close:hover { color: var(--paper); }
  .doc-preview-body { overflow: auto; background: #1a1d23; padding: 28px; }
  .doc-preview-body iframe {
    width: 100%;
    height: calc(90vh - 130px);
    border: 0;
    border-radius: 8px;
    background: #fff;
  }
  body:has(.doc-preview-overlay.is-open), body:has(.doc-preview-overlay.open) { overflow: hidden; }

  #partners { background: var(--dark2); padding: 60px; overflow: hidden; }
  .partners-title { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--grey); text-align: center; margin-bottom: 36px; }
  .partner-track { display: flex; gap: 60px; animation: partnerSlide 25s linear infinite; width: max-content; }
  .partner-track img { height: 52px; width: 120px; object-fit: contain; opacity: 0.85; filter: none; transition: opacity 0.3s, transform 0.3s; }
  .partner-track img:hover { opacity: 1; transform: scale(1.08); }
  @keyframes partnerSlide { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
  .partners-overflow { overflow: hidden; }

  /* --- FOOTER --- */
  footer { background: var(--dark); border-top: 1px solid rgba(200,150,12,0.15); padding: 60px; }
  .footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 50px; }
  .footer-dept-logo { height: 70px; width: auto; object-fit: contain; margin-bottom: 16px; opacity: 0.75; display: block; }
  .footer-brand p { font-size: 13px; line-height: 1.8; color: rgba(245,242,236,0.45); margin-top: 12px; }
  .footer-col h4 { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .footer-col ul a { font-size: 13px; color: rgba(245,242,236,0.45); text-decoration: none; transition: color 0.2s; }
  .footer-col ul a:hover { color: var(--gold); }
  .footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 28px; display: flex; justify-content: space-between; align-items: center; }
  .footer-bottom p { font-size: 11px; color: rgba(245,242,236,0.3); letter-spacing: 0.05em; }
  .footer-bottom .footer-logo img { height: 36px; object-fit: contain; opacity: 0.5; }

  /* --- SCROLL ANIMATION SYSTEM --- */
  .fade-in { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
  .fade-in.visible { opacity: 1; transform: translateY(0); }
  .fade-in.hidden { opacity: 0; transform: translateY(40px); transition: opacity 0.4s ease, transform 0.4s ease; }
  .fade-left { opacity: 0; transform: translateX(-60px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
  .fade-left.visible { opacity: 1; transform: translateX(0); }
  .fade-left.hidden { opacity: 0; transform: translateX(-60px); transition: opacity 0.4s ease, transform 0.4s ease; }
  .fade-right { opacity: 0; transform: translateX(60px); transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1); }
  .fade-right.visible { opacity: 1; transform: translateX(0); }
  .fade-right.hidden { opacity: 0; transform: translateX(60px); transition: opacity 0.4s ease, transform 0.4s ease; }
  .scale-in { opacity: 0; transform: scale(0.88); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
  .scale-in.visible { opacity: 1; transform: scale(1); }
  .scale-in.hidden { opacity: 0; transform: scale(0.88); transition: opacity 0.4s ease, transform 0.4s ease; }
  .card-slide { opacity: 0; transform: translateX(-50px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
  .card-slide.visible { opacity: 1; transform: translateX(0); }
  .card-slide.hidden { opacity: 0; transform: translateX(-50px); transition: opacity 0.3s ease, transform 0.3s ease; }
  .stagger-1 { transition-delay: 0.05s; }
  .stagger-2 { transition-delay: 0.15s; }
  .stagger-3 { transition-delay: 0.25s; }
  .stagger-4 { transition-delay: 0.38s; }
  .stagger-5 { transition-delay: 0.52s; }
  .stagger-6 { transition-delay: 0.66s; }
  .stagger-7 { transition-delay: 0.80s; }
  .stagger-8 { transition-delay: 0.94s; }
  .stagger-9 { transition-delay: 1.08s; }
  .stagger-10 { transition-delay: 1.22s; }
  .reveal-line { width: 0; height: 2px; background: linear-gradient(to right, var(--gold), var(--gold-pale), var(--gold)); transition: width 1.2s cubic-bezier(0.16,1,0.3,1); margin: 24px 0; }
  .reveal-line.visible { width: 80px; }
  .reveal-line.hidden { width: 0; transition: width 0.3s ease; }
  .shine { position: relative; overflow: hidden; }
  .shine::after { content: ''; position: absolute; top: -50%; left: -75%; width: 50%; height: 200%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(200,150,12,0.12) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); pointer-events: none; }
  .shine:hover::after { left: 125%; transition: left 0.65s ease; }
  @keyframes pulseDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } }
  .pulse-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: pulseDot 2s ease-in-out infinite; margin-right: 8px; vertical-align: middle; }
  @keyframes floatParticle { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-120px) rotate(360deg); opacity: 0; } }
  .particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); pointer-events: none; }
  .hero-eyebrow { animation: slideUp 0.8s 1.0s cubic-bezier(0.16,1,0.3,1) both; }
  .hero h1      { animation: slideUp 0.9s 1.15s cubic-bezier(0.16,1,0.3,1) both; }
  .hero-sub     { animation: slideUp 0.9s 1.3s cubic-bezier(0.16,1,0.3,1) both; }
  .hero-motto   { animation: slideUp 0.9s 1.3s cubic-bezier(0.16,1,0.3,1) both; }
  @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes jetFadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes pricePulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(46,204,113,0.35)); }
    50% { filter: drop-shadow(0 0 20px rgba(46,204,113,0.7)); }
  }
  @keyframes badgeGlow { from { box-shadow: 0 0 0 rgba(200,150,12,0); } to { box-shadow: 0 0 30px rgba(200,150,12,0.6); } }
  .divider { border: none; height: 1px; background: rgba(200,150,12,0.15); margin: 0; }

  /* PAGE LOADER */
  #page-loader { position: fixed; top: 0; right: 0; bottom: 0; left: 0; inset: 0; background: var(--black); z-index: 99999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 24px; animation: loaderFade 0.5s 2s ease forwards; isolation: isolate; }
  @keyframes loaderFade { to { opacity: 0; visibility: hidden; pointer-events: none; } }
  #page-loader .loader-logo-img { height: 80px; width: auto; object-fit: contain; animation: loaderLogoIn 0.6s 0.1s cubic-bezier(0.16,1,0.3,1) both; opacity: 0.9; }
  #page-loader .loader-logo { font-family: 'Cormorant Garamond', serif; font-size: 28px; font-weight: 700; color: var(--gold); letter-spacing: 0.3em; text-transform: uppercase; animation: loaderLogoIn 0.6s 0.2s cubic-bezier(0.16,1,0.3,1) both; }
  @keyframes loaderLogoIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  #page-loader .loader-bar-wrap { width: 200px; height: 1px; background: rgba(200,150,12,0.2); overflow: hidden; position: relative; }
  #page-loader .loader-bar { height: 100%; background: var(--gold); width: 0; animation: loadBar 1.6s 0.4s cubic-bezier(0.16,1,0.3,1) forwards; }
  @keyframes loadBar { to { width: 100%; } }
  #page-loader .loader-sub { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(200,150,12,0.5); animation: loaderLogoIn 0.6s 0.5s cubic-bezier(0.16,1,0.3,1) both; }
  /* entrance is now driven by the scroll handler (appears after the hero) */
  @keyframes navSlide { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
  .ticker-wrap { animation: tickerFadeIn 1s 0.2s ease both; }
  @keyframes tickerFadeIn { from { opacity: 0; } to { opacity: 1; } }

  /* PREMIUM VISUAL UPGRADE */
  body > section,
  body > footer,
  body > .hero-partners-banner,
  body > #partners,
  body > .divider,
  body > .cta-band {
    position: relative;
    z-index: 1;
  }

  ::selection { background: rgba(232,180,34,0.34); color: #fff8df; }
  img {
    max-width: 100%;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
  }
  html,
  body {
    touch-action: pan-x pan-y;
  }

  .ticker-wrap {
    background: linear-gradient(90deg, #f5d87a 0%, #d9a80d 44%, #9f7408 100%);
    box-shadow: 0 14px 40px rgba(0,0,0,0.38);
  }

  nav {
    left: clamp(12px, 3vw, 42px);
    right: clamp(12px, 3vw, 42px);
    width: auto;
    padding: 14px clamp(16px, 3vw, 34px);
    background: rgba(7,9,9,0.74);
    border: 1px solid rgba(245,216,122,0.2);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.48), inset 0 1px 0 rgba(255,255,255,0.06);
  }

  @supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) {
    nav,
    .mobile-nav,
    .ops-modal-box,
    .modal-box,
    .fin-kpi,
    .vmv-card,
    .board-member,
    .sch-item {
      backdrop-filter: blur(18px) saturate(1.2);
      -webkit-backdrop-filter: blur(18px) saturate(1.2);
    }
  }

  .nav-dept-logo img { height: 52px; opacity: 0.9; }
  .nav-center img { height: 48px; filter: drop-shadow(0 12px 28px rgba(200,150,12,0.22)); }
  .nav-links { gap: 22px; }
  .nav-links a {
    position: relative;
    color: rgba(245,242,236,0.72);
    transition: color 0.25s ease, text-shadow 0.25s ease;
  }
  .nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -9px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.25s ease;
  }
  .nav-links a:hover {
    color: #fff6d6;
    text-shadow: 0 0 18px rgba(232,180,34,0.28);
  }
  .nav-links a:hover::after { transform: scaleX(1); }

  .hamburger {
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
  }

  section {
    isolation: isolate;
    background: transparent !important;
    padding: clamp(82px, 9vw, 132px) clamp(20px, 5vw, 76px);
  }
  section[id],
  footer[id] {
    scroll-margin-top: 150px;
  }
  section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(180deg, rgba(5,6,6,0.74), rgba(8,10,10,0.56)),
      linear-gradient(90deg, rgba(200,150,12,0.07), transparent 38%, rgba(245,216,122,0.045));
    border-top: 1px solid rgba(245,216,122,0.055);
    border-bottom: 1px solid rgba(255,255,255,0.035);
  }
  #operations::before,
  #board::before,
  #schematics::before {
    background:
      linear-gradient(180deg, rgba(12,14,14,0.82), rgba(6,7,7,0.62)),
      linear-gradient(115deg, rgba(245,216,122,0.05), transparent 44%, rgba(200,150,12,0.07));
  }
  #vmv::before,
  #headquarters::before,
  #financials::before {
    background:
      linear-gradient(180deg, rgba(4,5,5,0.7), rgba(12,13,12,0.6)),
      linear-gradient(90deg, transparent 0%, rgba(200,150,12,0.055) 48%, rgba(245,216,122,0.04) 100%);
  }
  .divider {
    height: 0;
    margin: 0;
    background: transparent;
    border: none;
  }

  .section-label,
  .hero-eyebrow {
    color: #f5d87a;
    text-shadow: 0 0 24px rgba(200,150,12,0.28);
  }
  .section-label::before,
  .hero-eyebrow::before {
    background: linear-gradient(90deg, transparent, var(--gold-light));
  }
  .section-title {
    max-width: 900px;
    letter-spacing: 0;
    text-wrap: balance;
    position: relative;
  }
  .section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -16px;
    width: min(220px, 45vw);
    height: 1px;
    background: linear-gradient(90deg, rgba(245,216,122,0.9), rgba(245,216,122,0));
    box-shadow: 0 0 18px rgba(232,180,34,0.4);
    transform-origin: left;
    animation: titleBeam 5.5s ease-in-out infinite;
  }
  .section-title .gold,
  .hero h1 span.gold {
    color: #e8b422;
    text-shadow: 0 0 32px rgba(232,180,34,0.28);
  }
  .section-body,
  .board-intro-text,
  .board-footer-note,
  .fin-note {
    color: rgba(245,242,236,0.7);
  }

  .hero {
    min-height: 760px;
    align-items: center;
    isolation: isolate;
  }
  .hero::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; inset: 0;
    z-index: 1;
    background:
      linear-gradient(90deg, rgba(5,6,6,0.92) 0%, rgba(5,6,6,0.55) 42%, rgba(5,6,6,0.14) 72%),
      linear-gradient(180deg, rgba(0,0,0,0.28), transparent 45%, rgba(5,6,6,0.94) 100%);
    pointer-events: none;
  }
  .hero::after {
    content: '';
    position: absolute;
    top: auto; right: 0; bottom: 0; left: 0; inset: auto 0 0;
    height: 38%;
    z-index: 1;
    background: linear-gradient(180deg, transparent, rgba(5,6,6,0.98));
    pointer-events: none;
  }
  .hero-bg {
    background-position: center;
    filter: none;
    transform: none;
    animation: none;
  }
  @media (min-width: 901px) {
    .hero-overlay { display: none; }
  }
  .hero-content {
    padding: 130px clamp(20px, 6vw, 86px) 84px;
    max-width: 1060px;
  }
  .hero-eyebrow {
    width: fit-content;
    max-width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(245,216,122,0.22);
    border-radius: 8px;
    background: rgba(7,9,9,0.48);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .hero h1 {
    max-width: 900px;
    text-shadow: 0 26px 70px rgba(0,0,0,0.72);
  }
  .hero-sub {
    display: block;
    max-width: 670px;
    color: rgba(245,242,236,0.78);
    font-size: 16px;
    line-height: 1.8;
  }
  .hero-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 760px;
    margin-top: 34px;
  }
  .hero-stat {
    border: 1px solid rgba(245,216,122,0.18);
    border-radius: 8px;
    padding: 15px 16px;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025));
    box-shadow: 0 22px 60px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .hero-stat strong {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    line-height: 1;
    color: #fff3c5;
  }
  .hero-stat span {
    display: block;
    margin-top: 8px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(245,242,236,0.62);
  }

  .btn-primary,
  .btn-outline {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 8px;
    box-shadow: 0 18px 46px rgba(0,0,0,0.28);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
  }
  .btn-primary {
    background: linear-gradient(135deg, #f5d87a 0%, #d9a80d 52%, #9f7408 100%);
  }
  .btn-outline {
    background: rgba(255,255,255,0.035);
    border-color: rgba(245,216,122,0.52);
  }
  .btn-primary::after,
  .btn-outline::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.28) 45%, transparent 62%);
    transform: translateX(-120%);
    transition: transform 0.55s ease;
  }
  .btn-primary:hover,
  .btn-outline:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 70px rgba(200,150,12,0.22);
  }
  .btn-primary:hover::after,
  .btn-outline:hover::after { transform: translateX(120%); }

  .hero-partners-banner,
  #partners,
  footer {
    background: rgba(8,9,7,0.66) !important;
    border-color: rgba(245,216,122,0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .hero-partners-track-wrap::before { background: linear-gradient(to right, rgba(8,10,10,0.95), transparent); }
  .hero-partners-track-wrap::after { background: linear-gradient(to left, rgba(8,10,10,0.95), transparent); }
  .hp-logo {
    border-right-color: rgba(245,216,122,0.08);
    transition: background 0.25s ease, transform 0.25s ease;
  }
  .hp-logo:hover {
    background: rgba(245,216,122,0.06);
    transform: translateY(-2px);
  }

  .about-img,
  .board-img-wrap,
  .hq-item,
  .op-card,
  .vmv-card,
  .sch-item,
  .fin-kpi,
  .modal-box,
  .ops-modal-box {
    border-radius: 8px;
    border: 1px solid rgba(245,216,122,0.14);
    box-shadow: 0 26px 80px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.055);
  }
  .about-img::before,
  .board-img-wrap::before,
  .hq-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 0%, rgba(245,216,122,0.16) 46%, transparent 58%);
    transform: translateX(-130%);
    transition: transform 0.7s cubic-bezier(0.16,1,0.3,1);
  }
  .about-img:hover::before,
  .board-img-wrap:hover::before,
  .hq-item:hover::before {
    transform: translateX(130%);
  }
  .about-img,
  .board-img-wrap,
  .hq-item,
  .op-card,
  .sch-item {
    transform: translateZ(0);
  }
  .about-img img,
  .board-actual-img,
  .hq-item img,
  .op-card img,
  .sch-thumb img {
    filter: brightness(0.76) contrast(1.06) saturate(0.94);
  }
  .about-img:hover img,
  .board-img-wrap:hover img,
  .hq-item:hover img,
  .op-card:hover img,
  .sch-item:hover .sch-thumb img {
    filter: brightness(0.92) contrast(1.08) saturate(1.03);
  }
  .about-badge {
    right: 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f5d87a, #c8960c 58%, #9f7408);
    box-shadow: 0 18px 46px rgba(200,150,12,0.28);
  }

  .op-card {
    height: 440px;
    isolation: isolate;
  }
  .op-card::before,
  .vmv-card::before,
  .sch-item::before,
  .fin-kpi::before,
  .board-member::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(245,216,122,0.18), transparent 34%);
    transition: opacity 0.25s ease;
    z-index: 2;
  }
  .op-card:hover::before,
  .vmv-card:hover::before,
  .sch-item:hover::before,
  .fin-kpi:hover::before,
  .board-member:hover::before { opacity: 1; }
  .op-card-overlay {
    z-index: 1;
    background:
      linear-gradient(to top, rgba(5,6,6,0.96) 0%, rgba(5,6,6,0.55) 46%, rgba(5,6,6,0.08) 100%),
      linear-gradient(135deg, rgba(200,150,12,0.08), transparent 44%);
  }
  .op-card h3,
  .vmv-card h3,
  .board-member-name,
  .sch-info h4 {
    letter-spacing: 0;
  }
  .op-arrow {
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .vmv-card,
  .board-member,
  .sch-item,
  .fin-kpi {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255,255,255,0.08), rgba(255,255,255,0.026));
  }
  .vmv-card:hover,
  .board-member:hover,
  .sch-item:hover,
  .fin-kpi:hover {
    border-color: rgba(245,216,122,0.38);
    box-shadow: 0 30px 90px rgba(0,0,0,0.38), 0 0 44px rgba(200,150,12,0.10);
  }
  .vmv-icon-img {
    filter: drop-shadow(0 12px 24px rgba(200,150,12,0.24));
  }
  .board-member {
    border-left: 1px solid rgba(245,216,122,0.2);
  }

  .hq-collage { gap: 18px; }
  .hq-item::after,
  .sch-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,0.055);
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
  }
  .sch-info {
    background: linear-gradient(180deg, rgba(9,10,8,0.92), rgba(14,13,9,0.98));
    border-top: 1px solid rgba(245,216,122,0.12);
  }

  .schematics-tabs,
  .fin-tabs {
    width: fit-content;
    max-width: 100%;
    padding: 6px;
    gap: 6px;
    border: 1px solid rgba(245,216,122,0.14);
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
  }
  .sch-tab,
  .fin-tab {
    border: 0;
    border-radius: 6px;
    padding: 12px 22px;
  }
  .sch-tab.active,
  .fin-tab.active {
    color: #0a0a0a;
    background: linear-gradient(135deg, #f5d87a, #c8960c);
    box-shadow: 0 10px 32px rgba(200,150,12,0.2);
  }

  .fin-summary { gap: 16px; }
  .fin-kpi { border-top: 1px solid rgba(245,216,122,0.2); }
  .fin-kpi-val {
    color: #fff4cf;
    text-shadow: 0 0 24px rgba(200,150,12,0.18);
  }
  .fin-table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid rgba(245,216,122,0.13);
    border-radius: 8px;
    background: rgba(7,9,9,0.66);
    box-shadow: 0 26px 80px rgba(0,0,0,0.28);
  }
  .fin-table th {
    background: rgba(245,216,122,0.055);
  }
  .fin-table td,
  .fin-table th {
    border-bottom-color: rgba(255,255,255,0.055);
  }

  .cta-band {
    min-height: 380px;
    border-top: 1px solid rgba(245,216,122,0.13);
    border-bottom: 1px solid rgba(245,216,122,0.13);
  }
  .cta-band .section-label::before { background: linear-gradient(90deg, transparent, #f5d87a, transparent); }

  footer {
    padding: 70px clamp(20px, 5vw, 76px);
  }
  .footer-grid {
    border: 1px solid rgba(245,216,122,0.1);
    border-radius: 8px;
    padding: clamp(24px, 4vw, 42px);
    background: linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018));
  }

  @media (max-width: 900px) {
    nav {
      left: 10px;
      right: 10px;
      padding: 12px 14px;
    }
    .hero {
      min-height: 680px;
      align-items: flex-end;
    }
    .hero-content {
      padding: 0 20px 42px;
    }
    .hero-eyebrow {
      width: auto;
      display: inline-flex;
      font-size: 10px;
    }
    .hero-stat-row {
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 24px;
    }
    .hero-stat {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .hero-stat span {
      margin-top: 0;
      text-align: right;
    }
    .schematics-tabs,
    .fin-tabs {
      width: 100%;
    }
    .sch-tab,
    .fin-tab {
      flex: 0 0 auto;
    }
    .sch-thumb {
      min-height: 0;
      padding: 0;
    }
    .footer-grid {
      padding: 24px;
    }
  }


  /* --- MOBILE PERFORMANCE / NO-HANG SAFETY --- */
  @media (max-width: 900px) {
    #bg-canvas { display: none !important; }
    #page-loader { animation: loaderFade 0.18s 0.55s ease forwards; }
    /* Hero entrance starts as the loader fades on mobile */
    .hero-eyebrow { animation-delay: 0.7s; }
    .hero h1 { animation-delay: 0.85s; }
    .hero-sub { animation-delay: 1.0s; }
    .hero .btn-primary { animation-delay: 1.15s; }
    .hero .btn-outline { animation-delay: 1.3s; }
    #page-loader .loader-bar { animation: loadBar 0.45s 0.08s cubic-bezier(0.16,1,0.3,1) forwards; }
    #page-loader .loader-logo-img,
    #page-loader .loader-logo,
    #page-loader .loader-sub { animation-duration: 0.28s; }
    .hero-bg { background-color: var(--black); }
    /* Disable backdrop-filter on mobile — causes pink screen / GPU hang on iOS/Android.
       The @supports glass block (applied to .sch-item, .fin-kpi, .vmv-card,
       .board-member, .modal-box, nav, etc.) is NOT media-scoped, so it fires on
       phones too. The previous selective disable missed most of those, leaving many
       blurred surfaces compositing during scroll — the crash seen in the assets /
       footer area. Disable blur universally on phones; re-enable only the
       briefly-open modal/document overlays (body scroll is locked while open). */
    *, *::before, *::after {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    .modal-overlay, .ops-modal-overlay, .doc-preview-backdrop {
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }
    html, body { overscroll-behavior: none; }
    nav { background: rgba(10,10,10,0.98) !important; }
    .mobile-nav { background: #0f0f0f !important; }
    .mobile-nav-overlay { background: rgba(0,0,0,0.75) !important; }
  }
  #page-loader.force-hide {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    display: none !important;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
    #bg-canvas { display: none !important; }
  }

  /* Mobile: kill PERSISTENT will-change. iOS/Android cap the number of
     composited layers hard; ~30 pre-promoted layers (many on full-width
     cards/galleries) blow that cap, so Safari disables compositing for the
     WHOLE page and falls back to main-thread rendering — the site-wide scroll
     jitter/stutter. Scroll-driven (SDA) + scroll tweens still composite fine
     without the hint (the engine promotes the layer while the animation runs),
     so this only removes the harmful always-on promotion. NOTE: will-change on
     STICKY elements (.hero / .flight / #about) is a documented iOS Safari
     source of the "scroll-up throws you down then back up" jump (the stickied
     layer desyncs from the scroll and Safari snaps the page to re-catch it) —
     those stages are promoted by the running scroll animations anyway, so only
     the FIXED overlays keep the always-on hint. */
  @media (max-width: 900px) {
    *, *::before, *::after { will-change: auto !important; }
    .consult-jet, .consult-diamond { will-change: transform, opacity !important; }
  }

  /* -- RESPONSIVE -- */
  @media (max-width: 900px) {
    html, body { width: 100%; max-width: 100vw; overflow-x: clip; overflow-anchor: none; touch-action: manipulation; }
    nav { padding: 12px 18px; width: 100%; }
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .nav-center img { height: 40px; }
    .nav-dept-placeholder { width: 80px; font-size: 8px; height: 36px; }
    section { padding: 52px 20px; width: 100%; }
    .section-title { font-size: clamp(30px, 7vw, 44px); }
    .section-body { font-size: 14px; line-height: 1.8; }
    #about { grid-template-columns: 1fr; gap: 32px; }
    #mining { grid-template-columns: 1fr; gap: 32px; }
    .segment { grid-template-columns: 1fr; }
    .ops-grid { grid-template-columns: 1fr; gap: 3px; }
    .op-card:nth-child(1) { grid-column: span 1; }
    .vmv-grid { grid-template-columns: 1fr; gap: 2px; }
    .fin-summary { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr; gap: 36px; }
    .sch-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .segment.reverse { direction: ltr; }
    .segment .seg-img { order: -1; min-height: 260px; }
    .seg-content { padding: 32px 20px; border: none !important; border-top: 3px solid rgba(200,150,12,0.15) !important; }
    .seg-content h2 { font-size: clamp(28px, 6vw, 40px); }
    footer { padding: 44px 20px; }
    .footer-bottom { flex-direction: column; gap: 14px; text-align: center; }
    .fin-tabs, .schematics-tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
    .fin-tabs::-webkit-scrollbar, .schematics-tabs::-webkit-scrollbar { display: none; }
    .fin-summary { gap: 12px; }
    .fin-kpi { padding: 20px 16px; }
    .fin-kpi-val { font-size: 28px; }
    .fin-table { font-size: 11px; overflow-x: auto; display: block; }
    .fin-table th, .fin-table td { padding: 10px 10px; }
    .about-img { height: 280px; }
    .about-badge { right: 0; top: 20px; }
    .about-badge strong { font-size: 32px; }
    .mining-img { height: 260px; }
    .hp-logo { min-width: 110px; padding: 0 18px; }
    .hero-partners-track-wrap { padding: 20px 0 24px; }
    .op-card { height: 260px; }
    .op-card p { max-height: 80px; }
    .op-card-overlay { padding: 24px 20px; }
    .op-card h3 { font-size: 24px; }
    .vmv-card { padding: 44px 28px; }
    .vmv-card h3 { font-size: 28px; }
    div[style*="height:360px"] { height: auto !important; padding: 70px 20px !important; }
    .ops-modal-box { grid-template-columns: 1fr; max-height: 92vh; }
    .ops-modal-img { min-height: 200px; }
    .ops-modal-content { padding: 28px 20px; }
    .ops-modal-box h2 { font-size: 28px; }
    .modal-box { padding: 28px 20px; }
    .hero-partners-track-wrap::before, .hero-partners-track-wrap::after { width: 40px; }
    #partners { padding: 40px 0 !important; }
    .partners-title { font-size: 10px; letter-spacing: 0.25em; margin-bottom: 28px; padding: 0 20px; }
    .partner-track img { height: 42px; width: 100px; }
    .partner-track { gap: 44px; }
  }
  @media (max-width: 768px) {
    /* Partners band on phones: keep the sliding marquee (compact logos + edge fades so the slide looks intentional). */
    .hero-partners-track {
      flex-wrap: nowrap !important;
      width: max-content !important;
      gap: 0;
      padding: 0;
      animation: hpSlide 30s linear infinite !important;
    }
    .hero-partners-track .hp-logo:nth-child(n+9) { display: flex; }
    .hero-partners-track-wrap::before,
    .hero-partners-track-wrap::after { display: block; }
    .hero-partners-track .hp-logo {
      min-width: 0;
      padding: 0 14px;
      height: 56px;
      border-right: 1px solid rgba(200,150,12,0.12);
    }
    .hero-partners-track .hp-logo img { height: 26px; max-width: 80px; }
  }
  @media (max-width: 480px) {
    .sch-grid { grid-template-columns: 1fr; }
    .fin-summary { grid-template-columns: 1fr; }
    section { padding: 44px 16px; }
    .ops-modal-content { padding: 20px 16px; }
    .op-card { height: 230px; }
    .vmv-card { padding: 36px 22px; }
    .fin-kpi-val { font-size: 26px; }
    .hero-content { padding: 0 16px 28px; }
  }

  /* Final responsive polish after legacy mobile rules */
  @media (max-width: 900px) {
    nav {
      left: 10px !important;
      right: 10px !important;
      width: auto !important;
      padding: 12px 14px !important;
      border-radius: 8px;
      background: rgba(7,9,9,0.94) !important;
    }
    section {
      background: transparent !important;
    }
    .hero-sub {
      display: block;
      font-size: 14px;
      line-height: 1.7;
      margin-bottom: 22px;
    }
    .hero-stat-row {
      display: grid;
      grid-template-columns: 1fr;
      margin-top: 22px;
    }
    .hero-stat {
      padding: 13px 14px;
    }
    .op-card {
      border-radius: 8px;
    }
  }

  /* Extra premium motion layer */
  .hero h1 {
    position: relative;
  }
  .hero h1::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -20px;
    width: min(420px, 70vw);
    height: 1px;
    background: linear-gradient(90deg, rgba(245,216,122,0), rgba(245,216,122,0.85), rgba(245,216,122,0));
    box-shadow: 0 0 22px rgba(232,180,34,0.55);
    transform-origin: left;
    animation: titleBeam 4.5s ease-in-out infinite;
  }
  .op-card,
  .vmv-card,
  .sch-item,
  .fin-kpi,
  .hq-item {
    isolation: isolate;
  }
  .op-card::after,
  .vmv-card::after,
  .fin-kpi::after {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: 3;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 0%, rgba(245,216,122,0.34) 46%, transparent 58%);
    opacity: 0;
    transform: translateX(-120%);
  }
  .op-card:hover::after,
  .vmv-card:hover::after,
  .fin-kpi:hover::after {
    opacity: 1;
    animation: cardGlint 0.9s cubic-bezier(0.16,1,0.3,1);
  }
  .sch-item {
    transition: border-color 0.28s ease, transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, background 0.35s ease;
  }
  .sch-item:hover {
    background: linear-gradient(145deg, rgba(245,216,122,0.065), rgba(255,255,255,0.018));
  }
  .sch-item:hover .sch-info h4 {
    color: #f5d87a;
    text-shadow: 0 0 18px rgba(232,180,34,0.22);
  }
  .section-label {
    animation: labelPulse 4s ease-in-out infinite;
  }
  @keyframes titleBeam {
    0%, 100% { transform: scaleX(0.36); opacity: 0.35; }
    50% { transform: scaleX(1); opacity: 1; }
  }
  @keyframes cardGlint {
    from { transform: translateX(-120%); }
    to { transform: translateX(120%); }
  }
  @keyframes labelPulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(232,180,34,0)); }
    50% { filter: drop-shadow(0 0 14px rgba(232,180,34,0.26)); }
  }

  /* Keep the brand hero cinematic while revealing the next section */
  .hero {
    height: min(760px, calc(100svh - 86px)) !important;
    min-height: 590px;
  }

  @media (max-width: 900px) {
    .hero {
      height: min(690px, calc(100svh - 84px)) !important;
      min-height: 560px;
    }
    .hero h1 {
      font-size: 52px;
    }
    .hero-stat-row {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .hero-stat {
      display: block;
      padding: 11px 10px;
      min-height: 74px;
    }
    .hero-stat strong {
      font-size: 24px;
    }
    .hero-stat span {
      margin-top: 7px;
      text-align: left;
      font-size: 9px;
      letter-spacing: 0.12em;
    }
  }

  @media (max-width: 480px) {
    .hero {
      height: calc(100svh - 78px) !important;
      min-height: 540px;
    }
    .hero h1 {
      font-size: 44px;
    }
    .hero-sub {
      font-size: 13px;
      line-height: 1.6;
      margin-bottom: 18px;
    }
    .hero-stat {
      padding: 10px 8px;
      min-height: 68px;
    }
    .hero-stat strong {
      font-size: 22px;
    }
    .hero-stat span {
      font-size: 8px;
    }
  }

  /* Ambient background elements removed — canvas handles all backgrounds */

@media(max-width:900px){.hero-sub{font-size:14px;line-height:1.65}.enquiry-shell{grid-template-columns:1fr;width:min(100% - 28px,720px)}.form-grid{grid-template-columns:1fr}.disclaimer-shell{width:min(100% - 28px,720px)}}



/* Wellness-style canvas background replacement */
#bg-canvas{position:fixed;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:1;background:radial-gradient(circle at 18% 16%,rgba(214,174,73,.22),transparent 32%),radial-gradient(circle at 82% 18%,rgba(245,216,122,.18),transparent 28%),radial-gradient(circle at 50% 88%,rgba(214,174,73,.20),transparent 38%),#050504;filter:saturate(1.22) contrast(1.08)}
body>#bg-canvas~*:not(script){position:relative;z-index:1}
#page-loader{z-index:9999!important}
.hero::before{background:linear-gradient(90deg,rgba(5,6,6,.92) 0%,rgba(5,6,6,.58) 42%,rgba(5,6,6,.16) 72%),linear-gradient(180deg,rgba(0,0,0,.22),transparent 45%,rgba(5,6,6,.94) 100%)!important;animation:none!important}
/* desktop keeps the video's old brightness(0.62) darkening via the ::before
   color — the <video> element itself must stay filter-free for iOS autoplay */
@media (min-width: 901px) { .hero::before { background-color: rgba(5,6,6,0.38) !important; } }

/* Mobile visibility and readability fixes */
@media(max-width:900px){
  #bg-canvas{display:block!important;opacity:1!important;visibility:visible!important;filter:saturate(1.35) contrast(1.14) brightness(1.18)!important}
  body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 22% 18%,rgba(214,174,73,.22),transparent 34%),radial-gradient(circle at 82% 72%,rgba(245,216,122,.14),transparent 30%),repeating-linear-gradient(90deg,rgba(245,216,122,.045) 0 1px,transparent 1px 74px),repeating-linear-gradient(0deg,rgba(214,174,73,.035) 0 1px,transparent 1px 74px);animation:none /* drift removed on mobile — the gold glow stays, but a full-screen layer no longer animates forever */}
  .about-badge{top:14px!important;right:14px!important;padding:12px 13px!important;max-width:145px;border-radius:7px!important;box-shadow:0 14px 34px rgba(0,0,0,.34),0 0 22px rgba(214,174,73,.28)!important}
  .about-badge strong{font-size:clamp(23px,7vw,30px)!important;line-height:.95!important}
  .about-badge span{display:block;margin-top:6px;font-size:8px!important;line-height:1.25!important;letter-spacing:.11em!important}
  #operations .op-card{height:320px!important}
  #operations .op-card img{filter:brightness(.38) contrast(1.12) saturate(.9)!important;transform:scale(1.02)}
  #operations .op-card-overlay{padding:24px 18px!important;background:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.66) 38%,rgba(0,0,0,.96) 100%),linear-gradient(115deg,rgba(214,174,73,.18),transparent 46%)!important;justify-content:flex-end}
  #operations .op-tag{font-size:10px!important;letter-spacing:.24em!important;color:#f5d87a!important;text-shadow:0 2px 16px rgba(0,0,0,.95),0 0 14px rgba(214,174,73,.6)}
  #operations .op-card h3{font-size:clamp(30px,8.5vw,38px)!important;line-height:1.02!important;margin-bottom:10px!important;text-shadow:0 4px 22px rgba(0,0,0,1),0 1px 2px rgba(0,0,0,.9)}
  #operations .op-card p{max-height:none!important;overflow:visible!important;color:rgba(255,255,255,.9)!important;font-size:14px!important;line-height:1.48!important;font-weight:600;text-shadow:0 3px 18px rgba(0,0,0,1),0 1px 2px rgba(0,0,0,.95)}
  #operations .op-card-num{opacity:.55;top:14px!important;right:16px!important;font-size:72px!important;color:rgba(214,174,73,.18)!important}
}
@media(max-width:480px){
  .about-badge{max-width:128px!important;padding:10px 11px!important}
  .about-badge strong{font-size:24px!important}
  #operations .op-card{height:300px!important}
  #operations .op-card-overlay{padding:22px 15px!important}
  #operations .op-card p{font-size:13.5px!important;line-height:1.45!important}
}
@keyframes mobileBgDrift{0%{background-position:0 0,0 0,0 0,0 0;opacity:.72}50%{opacity:1}100%{background-position:0 0,0 0,148px 0,0 148px;opacity:.72}}


/* Requested minor fixes: lighter What We Do cards, stable centered modals, and top spacing cleanup */
html, body { margin: 0 !important; padding: 0 !important; }
.ticker-wrap { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; }
nav { position: fixed !important; top: 30px !important; z-index: 999 !important; }
.hero { margin-top: 0 !important; }
/* The `body>#bg-canvas~*` sibling rule forces its DIRECT body-children siblings
   to position:relative z-index:1 — .mobile-nav / .mobile-nav-overlay are direct
   body children, so without this re-assert they quit their panel entirely and
   the hamburger drawer pushes the whole page down a viewport when it opens. */
.mobile-nav { position: fixed !important; z-index: 1100 !important; }
.mobile-nav-overlay { position: fixed !important; z-index: 1099 !important; }

#operations .op-card img {
  filter: brightness(0.86) contrast(1.04) saturate(1.02) !important;
}
#operations .op-card:hover img {
  filter: brightness(0.94) contrast(1.05) saturate(1.06) !important;
}
#operations .op-card-overlay {
  background:
    linear-gradient(to top, rgba(5,6,6,0.62) 0%, rgba(5,6,6,0.26) 52%, rgba(5,6,6,0.08) 100%) !important;
}
#operations .op-card p {
  color: rgba(245,242,236,0.78) !important;
}

.ops-modal-overlay,
.modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  z-index: 99999 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  margin: 0 !important;
}
.ops-modal-overlay.open,
.modal-overlay.open {
  display: flex !important;
}
.ops-modal-box,
.modal-box {
  margin: auto !important;
  transform: none !important;
}
body.modal-open {
  overflow: hidden !important;
}



/* Requested loader position fix: keep the loading screen as a true full-screen overlay.
   This must come after the canvas z-index rule because that rule affects every element after #bg-canvas, including #page-loader. */
#page-loader {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
}
#page-loader.force-hide {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  display: none !important;
}
body > #bg-canvas ~ #page-loader {
  position: fixed !important;
  z-index: 99999 !important;
}


/* Proper premium loading screen fix: full viewport, centered, slower, and above every layer */
#page-loader {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  background:
    radial-gradient(110% 80% at 50% 28%, rgba(200,150,12,0.10), transparent 55%),
    linear-gradient(180deg, #060606 0%, #040404 55%, #060606 100%) !important;
  pointer-events: auto !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 24px !important;
  transform: none !important;
  opacity: 1;
  visibility: visible;
  animation: loaderFade 0.65s 3.2s ease forwards !important;
  overflow: hidden !important;
}
#page-loader::before {
  /* clean vignette — replaces the old diagonal shimmer + grid lines, which
     read as a cheap "AI-generated" texture. Just a soft darkening of the
     corners so the emblem and wordmark float on calm black. */
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 100% at 50% 45%, transparent 58%, rgba(0,0,0,0.62) 100%);
  pointer-events: none;
}
#page-loader > * {
  position: relative !important;
  z-index: 2 !important;
}
/* refined emblem: the logo floats inside a thin gold ring with a sweeping
   arc + orbiting dot (a quiet "radar" spin) — premium, not flashy */
#page-loader .loader-mark {
  position: relative;
  width: clamp(112px, 15vw, 148px);
  height: clamp(112px, 15vw, 148px);
  display: flex !important;
  align-items: center;
  justify-content: center;
  animation: loaderLogoIn 0.9s 0.15s cubic-bezier(0.16,1,0.3,1) both !important;
}
#page-loader .loader-mark .loader-logo-img {
  position: relative;
  z-index: 2;
  height: clamp(58px, 8.5vw, 84px) !important;
  filter: drop-shadow(0 14px 34px rgba(200,150,12,0.28));
  animation: none !important;
  opacity: 1;
}
#page-loader .loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(200,150,12,0.16);
  animation: loaderRingSpin 1.6s linear infinite;
}
#page-loader .loader-ring::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(214,174,73,0.85) 95deg, rgba(245,216,122,0.9) 135deg, transparent 205deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  pointer-events: none;
}
#page-loader .loader-ring::after {
  content: '';
  position: absolute;
  top: -2.5px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #f5d87a;
  box-shadow: 0 0 14px rgba(214,174,73,0.95);
  pointer-events: none;
}
@keyframes loaderRingSpin { to { transform: rotate(360deg); } }
#page-loader .loader-logo {
  font-size: clamp(20px, 3.4vw, 30px) !important;
  letter-spacing: 0.34em !important;
  margin-left: 0.34em;   /* optical centring for the wide tracking */
  animation: loaderLogoIn 0.9s 0.32s cubic-bezier(0.16,1,0.3,1) both !important;
}
#page-loader .loader-bar-wrap {
  width: min(230px, 58vw) !important;
  height: 1px !important;
  background: rgba(200,150,12,0.16) !important;
  border-radius: 1px;
}
#page-loader .loader-bar {
  animation: loadBar 2.4s 0.5s cubic-bezier(0.16,1,0.3,1) forwards !important;
}
#page-loader .loader-sub {
  font-size: 9.5px !important;
  letter-spacing: 0.34em !important;
  margin-left: 0.34em;
  color: rgba(200,150,12,0.55) !important;
  animation: loaderLogoIn 0.9s 0.5s cubic-bezier(0.16,1,0.3,1) both !important;
}
#page-loader.force-hide {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  display: none !important;
}
@keyframes loaderScreenDrift {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(2%, 1%, 0) scale(1.04); }
}
@media (max-width: 900px) {
  #page-loader {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100dvh !important;
    align-items: center !important;
    justify-content: center !important;
    animation: loaderFade 0.65s 3.2s ease forwards !important;
  }
  #page-loader .loader-bar { animation: loadBar 2.6s 0.45s cubic-bezier(0.16,1,0.3,1) forwards !important; }
  #page-loader .loader-logo-img,
  #page-loader .loader-logo,
  #page-loader .loader-sub { animation-duration: 0.9s !important; }
}

@media (max-width: 900px) {
  #bg-canvas {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100vh !important;
  }
  body::before {
    animation: none !important;   /* static gold glow — no endless full-screen drift on phones */
  }
  #page-loader {
    animation: loaderFade 0.45s 2.85s ease forwards !important;
  }
  #page-loader::before {
    animation: none !important;
  }
  #page-loader .loader-bar {
    animation: loadBar 1.8s 0.35s cubic-bezier(0.16,1,0.3,1) forwards !important;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  #bg-canvas {
    display: none !important;
  }
  body::before {
    animation: none !important;
  }
}

/* Google Maps headquarters embed */
.hq-map-embed {
  grid-column: 1 / -1;
  cursor: auto;
  margin-bottom: 18px;
  padding: clamp(16px, 2.4vw, 24px);
  background:
    linear-gradient(135deg, rgba(200,150,12,0.08), rgba(26,26,26,0.98) 44%, rgba(5,6,6,0.98)),
    var(--dark2);
  border-color: rgba(200,150,12,0.28);
}
.hq-map-embed:hover {
  transform: none;
  border-color: rgba(200,150,12,0.38);
  box-shadow: 0 18px 54px rgba(0,0,0,0.28), 0 0 32px rgba(200,150,12,0.08);
}
.hq-map-embed::before {
  display: none;
}
.hq-map-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(200,150,12,0.18);
}
.hq-map-kicker {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.hq-map-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 600;
  line-height: 1.05;
  color: var(--white);
}
.hq-map-meta {
  margin-top: 8px;
  color: rgba(245,242,236,0.55);
  font-size: 12px;
  line-height: 1.55;
}
.hq-map-open {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 22px;
  border: 1px solid rgba(200,150,12,0.42);
  color: var(--gold);
  background: rgba(0,0,0,0.22);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.hq-map-open:hover {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}
.hq-map-frame {
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  aspect-ratio: 21 / 9;
  min-height: 360px;
  background:
    linear-gradient(135deg, rgba(200,150,12,0.12), transparent 36%),
    repeating-linear-gradient(90deg, rgba(245,242,236,0.035) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(245,242,236,0.028) 0 1px, transparent 1px 72px),
    #070707;
  border: 1px solid rgba(200,150,12,0.18);
}
.hq-map-frame::before {
  content: 'Headquarters Map';
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 10px 12px;
  background: rgba(10,10,10,0.72);
  border: 1px solid rgba(200,150,12,0.24);
  color: rgba(245,242,236,0.72);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  pointer-events: none;
}
.hq-map-embed iframe {
  width: 100%;
  height: 100%;
  min-height: 360px;
  display: block;
  border: 0;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .hq-map-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .hq-map-open {
    width: 100%;
  }
  .hq-map-embed {
    padding: 16px;
  }
  .hq-map-frame {
    aspect-ratio: 16 / 10;
    min-height: 300px;
  }
  .hq-map-embed iframe {
    min-height: 300px;
  }
}
@media (max-width: 480px) {
  .hq-map-frame,
  .hq-map-embed iframe {
    min-height: 260px;
  }
  .hq-map-frame::before {
    left: 12px;
    bottom: 12px;
  }
}

/* Mobile hero owner visibility: keep the desktop hero intact, but crop phones toward the right-side owners. */
@media (max-width: 900px) {
  .hero {
    overflow: hidden;
  }
  .hero-bg {
    background-position: 78% center !important;
    background-size: cover !important;
    /* the <video> must stay filter-free for iOS autoplay */
    filter: none !important;
    transform: none !important;
    animation: none !important;
  }
  .hero::before {
    background:
      linear-gradient(90deg, rgba(5,6,6,0.92) 0%, rgba(5,6,6,0.58) 44%, rgba(5,6,6,0.2) 82%),
      linear-gradient(180deg, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.18) 36%, rgba(5,6,6,0.96) 100%) !important;
    animation: none !important;
  }
  .hero-content {
    padding-inline: clamp(18px, 5vw, 28px) !important;
    padding-bottom: clamp(28px, 7svh, 50px) !important;
  }
}
@media (max-width: 560px) {
  .hero-bg {
    background-position: 74% center !important;
    /* the <video> must stay filter-free for iOS autoplay — darkening is on
       the overlay + .hero::before, never on the video element itself */
    filter: none !important;
  }
  .hero h1 {
    max-width: 8.8ch;
    font-size: clamp(36px, 10.5vw, 43px) !important;
    line-height: 0.98 !important;
  }
  .hero h1::after {
    width: min(230px, 58vw) !important;
  }
  .hero-eyebrow {
    max-width: min(100%, 370px);
    padding: 9px 12px !important;
    background: rgba(6,7,7,0.42);
    backdrop-filter: blur(6px);
  }
  .hero .btn-primary,
  .hero .btn-outline {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 7px 16px !important;
    font-size: 10px !important;
    letter-spacing: 0.13em !important;
    margin: 0 0 8px 0 !important;
  }
}
@media (max-width: 390px) {
  .hero-bg {
    background-position: 72% center !important;
  }
  .hero h1 {
    font-size: clamp(34px, 10.5vw, 40px) !important;
  }
}

/* Mobile final pass: move the focus bar below actions and keep the loader fully opaque/centered. */
@media (max-width: 900px) {
  .hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .hero h1 { order: 1; }
  .hero .hero-motto { order: 2; }
  .hero-eyebrow {
    order: 4;
    margin-top: clamp(16px, 3.5svh, 26px) !important;
    margin-bottom: 0 !important;
  }
  #page-loader {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    min-height: -webkit-fill-available !important;
    padding: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    text-align: center !important;
    background:
      radial-gradient(110% 80% at 50% 28%, rgba(200,150,12,0.10), transparent 55%),
      linear-gradient(180deg, #060606 0%, #040404 55%, #060606 100%) !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: loaderFade 0.65s 3.2s ease forwards !important;
  }
  #page-loader .loader-logo,
  #page-loader .loader-sub {
    width: min(88vw, 520px) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    white-space: normal !important;
  }
  #page-loader .loader-logo {
    font-size: clamp(19px, 5.6vw, 32px) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.24em !important;
    padding-left: 0.24em !important;
  }
  #page-loader .loader-sub {
    font-size: 9px !important;
    line-height: 1.5 !important;
    letter-spacing: 0.3em !important;
    padding-left: 0.3em !important;
  }
  #page-loader.force-hide {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
  }
}


/* --- shop layout support (ported) --- */
.wrap-section { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 48px 0; }
.wrap-head { max-width: 780px; margin-bottom: 28px; }
.gold-kicker { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 8px; }
#shop .shop-grid, #shop .shop-toolbar { margin-top: 0; }

/* --- spacing compaction --- */
section { padding-top: 72px; padding-bottom: 72px; }
@media (max-width: 768px) { section { padding-top: 56px; padding-bottom: 56px; } }
@media (min-width: 901px) {
  .nav-links { gap: 22px; }
  .nav-links a { font-size: 10px; }
}

.shop-cart-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(214,174,73,0.1);
  border: 1px solid rgba(214,174,73,0.45);
  color: var(--gold-light);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.shop-cart-btn:hover { background: var(--gold); color: var(--black); transform: translateY(-2px); }
.shop-cart-btn-inner { display: inline-flex; align-items: center; gap: 8px; }
.shop-cart-count {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--black);
  font-size: 11px; font-weight: 800; line-height: 1;
  border-radius: 9px;
}

/* --- SHOP SECTION --- */
.shop-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 34px; }
.shop-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-cat {
  padding: 8px 16px;
  border: 1px solid rgba(214,174,73,0.3);
  background: rgba(214,174,73,0.05);
  color: rgba(245,242,236,0.72);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.shop-cat:hover { border-color: var(--gold); color: var(--gold-light); }
.shop-cat.active { background: var(--gold); border-color: var(--gold); color: var(--black); }
.shop-rate {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--grey);
}
.shop-rate b { color: var(--gold-light); font-weight: 700; }

/* --- SHOP SECTION HEAD & DESK META --- */
.shop-section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: start;
  margin-bottom: 34px;
}
.shop-desk-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.shop-desk-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 18px;
  border: 1px solid rgba(214,174,73,0.22);
  background: rgba(10,10,10,0.82);
  min-width: 120px;
  text-align: center;
}
.shop-desk-stat span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grey);
}
.shop-desk-stat b {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 700; color: var(--gold-light);
}
.shop-rate-inline {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-light);
}

/* --- SHOP TABLE --- */
.shop-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(214,174,73,0.2);
  border-radius: 12px;
  background: rgba(10,10,10,0.82);
  backdrop-filter: blur(10px);
}
.shop-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
.shop-table thead th {
  padding: 14px 18px;
  text-align: left;
  color: var(--gold-light);
  border-bottom: 2px solid rgba(214,174,73,0.25);
}
.shop-table tbody td {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(214,174,73,0.1);
  color: rgba(245,242,236,0.6);
  vertical-align: middle;
}
.shop-table tbody tr:last-child td { border-bottom: none; }
.shop-row-name {
  display: flex;
  align-items: center;
  gap: 12px;
}
.shop-row-img {
  width: 42px; height: 42px;
  object-fit: contain;
  filter: brightness(0.55) saturate(0.8);
}
.shop-row-name b {
  font-family: 'Cormorant Garammond', serif;
  font-size: 15px; font-weight: 600; color: var(--white);
}
.shop-row-name span {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--grey);
}
.shop-row-sku {
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px; font-weight: 600; color: var(--gold-light);
}
.shop-row-spec {
  font-size: 10px; font-weight: 500; letter-spacing: 0.05em;
  color: rgba(245,242,236,0.55);
}
.shop-retail {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px; font-weight: 700; color: var(--gold-light);
}
.shop-avail {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px;
}
.avail-ok { background: rgba(39,174,96,0.15); color: #35c76a; border: 1px solid rgba(39,174,96,0.4); }
.avail-limited { background: rgba(232,180,34,0.15); color: var(--gold-light); border: 1px solid rgba(232,180,34,0.4); }
.avail-contract { background: rgba(214,174,73,0.15); color: var(--gold-light); border: 1px solid rgba(214,174,73,0.4); }
.shop-row-cta { text-align: right; }
.shop-disclaimer {
  margin-top: 22px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.05em; line-height: 1.7;
  color: rgba(245,242,236,0.5);
  text-align: center;
}

/* --- SHOP LIVE MARKET BAR --- */
.shop-livebar { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.livebar-head {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--grey);
}
.livebar-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #35c76a; box-shadow: 0 0 0 0 rgba(53,199,106,0.5);
  animation: livebar-pulse 1.8s infinite;
}
@keyframes livebar-pulse {
  0% { box-shadow: 0 0 0 0 rgba(53,199,106,0.5); }
  70% { box-shadow: 0 0 0 7px rgba(53,199,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(53,199,106,0); }
}
.livebar-cells { display: flex; flex-wrap: wrap; gap: 6px; }
.livebar-cell {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 108px; padding: 8px 12px;
  border: 1px solid rgba(214,174,73,0.22);
  background: linear-gradient(160deg, rgba(14,14,12,0.9), rgba(7,7,7,0.9));
  border-radius: 8px;
}
.livebar-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--grey);
}
.livebar-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; font-weight: 700; color: var(--gold-light); line-height: 1.1;
}
.livebar-price.loading { color: var(--grey); }
.livebar-sub {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,242,236,0.4); font-style: normal;
}
.livebar-cell.active {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(214,174,73,0.16), rgba(214,174,73,0.04));
  cursor: pointer;
}
.livebar-cell.active .livebar-name { color: var(--gold-light); }
.livebar-cell { cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.livebar-cell:hover { border-color: rgba(214,174,73,0.5); }

.market-chart {
  margin-top: 2px;
  border: 1px solid rgba(214,174,73,0.22);
  background: linear-gradient(165deg, rgba(13,13,12,0.96), rgba(6,6,6,0.97));
  overflow: hidden;
  border-radius: 12px;
}
.market-panel {
  margin-top: 34px;
  border: 1px solid rgba(214,174,73,0.22);
  background: linear-gradient(165deg, rgba(13,13,12,0.96), rgba(6,6,6,0.97));
  border-radius: 12px;
  overflow: hidden;
}
.mc-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 10px 16px 8px;
  border-bottom: 1px solid rgba(214,174,73,0.14);
  background: rgba(10,10,10,0.85);
}
.mc-titles { display: flex; flex-direction: column; gap: 2px; }
.mc-symbol {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--gold); line-height: 1;
}
.mc-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,242,236,0.42);
}
.mc-quote { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mc-last {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 700; color: var(--gold-light); line-height: 1;
}
.mc-last.up { color: #6fe39a; }
.mc-last.down { color: #e5766b; }
.mc-change {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
}
.mc-change.up { color: #6fe39a; }
.mc-change.down { color: #e5766b; }
.mc-canvas-wrap { position: relative; height: 200px; min-height: 200px; max-height: 200px; overflow: hidden; }
.mc-canvas-wrap canvas { display: block; width: 100%; height: 200px !important; max-height: 200px !important; }
.mc-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245,242,236,0.35);
}
.mc-canvas-wrap.loaded .mc-empty { display: none; }
.mc-timeline {
  display: flex; justify-content: space-between;
  padding: 2px 12px 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(245,242,236,0.28);
}
.market-panel-quote {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  padding: 6px 14px;
  font-size: 12px;
}
.mc-sym-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  color: var(--gold);
}
.mc-ohlc {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; letter-spacing: 0.08em;
  color: rgba(245,242,236,0.5);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .mc-head { flex-wrap: wrap; }
  .mc-last { font-size: 18px; }
}
.shop-toolbar-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.shop-min-order {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grey);
}
.shop-min-order b { color: var(--gold-light); font-weight: 700; }
@media (max-width: 768px) {
  .shop-toolbar-right { align-items: flex-start; }
  /* Single horizontal swipeable row of live prices so the shop products appear sooner */
  .livebar-cells {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    width: 100%;
  }
  .livebar-cells::-webkit-scrollbar { display: none; }
  .livebar-cell {
    min-width: 0;
    flex: 0 0 auto;
    width: 118px;
    scroll-snap-align: start;
  }
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(540px, 100%), 1fr));
  gap: 14px;
  margin-top: 8px;
}
.shop-item { cursor: pointer; }
.shop-item {
  position: relative;
  display: flex; align-items: center;
  gap: 18px;
  padding: 10px;
  border: 1px solid rgba(214,174,73,0.2);
  background: linear-gradient(145deg, rgba(24,24,21,0.94), rgba(7,7,7,0.9));
  overflow: hidden;
  transition: border-color 0.28s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}
.shop-item:hover { border-color: rgba(214,174,73,0.6); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(214,174,73,0.12); }
.shop-thumb {
  position: relative; flex: 0 0 96px; width: 96px; height: 96px; aspect-ratio: 1;
  overflow: hidden; background: transparent;
}
.shop-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; transition: transform 0.5s; }
.shop-item:hover .shop-thumb img { transform: scale(1.05); }
.shop-thumb .shop-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(214,174,73,0.14), transparent 46%),
    linear-gradient(135deg, var(--dark3), var(--dark2));
  border: 1px dashed rgba(214,174,73,0.28);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 800; letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(214,174,73,0.55);
}
.shop-cat-label {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: 4px 8px;
  background: rgba(10,10,10,0.85);
  border-top: 1px solid rgba(214,174,73,0.45);
  border-right: 1px solid rgba(214,174,73,0.45);
  color: var(--gold-light);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.shop-body { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 4px 0; }
.shop-id {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--gold); margin-bottom: 5px;
}
.shop-stock {
  padding: 2px 8px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid rgba(53,199,106,0.4);
  color: #6fe39a;
}
.shop-stock.arrange { border-color: rgba(214,174,73,0.45); color: var(--gold-light); }
.shop-item h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px; font-weight: 600; color: var(--white); margin-bottom: 3px; line-height: 1.2;
}
.shop-item p.desc { font-size: 12px; line-height: 1.5; color: rgba(245,242,236,0.6); margin-bottom: 10px; }
.shop-market { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--grey); }
.shop-market span { white-space: nowrap; }
.shop-market b { color: rgba(245,242,236,0.85); font-weight: 600; }
.shop-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 0 auto; }
.shop-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.shop-price .retail {
  font-family: 'Cormorant Garamond', serif;
  font-size: 23px; font-weight: 700; color: #F5D87A; white-space: nowrap;
  padding: 5px 12px;
  border: 1px solid rgba(214,174,73,0.5);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(214,174,73,0.22), rgba(214,174,73,0.05));
  box-shadow: 0 0 20px rgba(214,174,73,0.14), inset 0 1px 0 rgba(255,255,255,0.1);
  text-shadow: 0 0 14px rgba(232,180,34,0.35);
}
.shop-price .per { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); white-space: nowrap; }
.shop-add {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: var(--gold); color: var(--black);
  border: none; cursor: pointer; text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .shop-item { flex-wrap: wrap; gap: 12px; }
  .shop-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; padding-left: 0; flex-wrap: wrap; gap: 10px; }
  .shop-price { align-items: flex-start; }
  .shop-add { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .shop-thumb { flex: 0 0 72px; width: 72px; height: 72px; }
  .shop-item { gap: 12px; }
}

.shop-note { margin-top: 30px; }
.shop-note .note-box { margin: 0; }

/* --- PRODUCT SELECTION MODAL --- */
.product-overlay {
  display: none; position: fixed !important; inset: 0 !important; z-index: 10003 !important;
  background: rgba(0,0,0,0.82);
  align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 40px 20px;
}
.product-overlay.open { display: flex; }
body.product-open { overflow: hidden; }
.product-box {
  position: relative;
  width: min(880px, 100%);
  background: var(--dark);
  border: 1px solid rgba(214,174,73,0.35);
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
  display: grid;
  grid-template-columns: 340px 1fr;
  margin: auto;
}
.product-close {
  position: absolute; top: 16px; right: 16px; z-index: 4;
}
.product-media {
  position: relative; min-height: 320px; overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(214,174,73,0.14), transparent 46%),
    linear-gradient(135deg, var(--dark3), var(--dark2));
  display: flex; align-items: center; justify-content: center;
  padding: 30px;
}
.product-media::before {
  content: '';
  position: absolute; left: 15%; top: 15%; width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(214,174,73,0.6), rgba(214,174,73,0.2) 45%, transparent 72%);
  filter: blur(16px);
  animation: goldGlowPulse 3.4s ease-in-out infinite;
  pointer-events: none;
}
.product-media::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 60px rgba(214,174,73,0.08);
  pointer-events: none;
}
.product-media img {
  position: relative;
  width: 100%; height: 100%; max-height: 420px; object-fit: contain;
  animation: goldFloat 4.4s ease-in-out infinite;
}
@keyframes goldGlowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes goldFloat {
  0%, 100% { transform: translateY(0) rotate(0.4deg); }
  50% { transform: translateY(-10px) rotate(-0.4deg); }
}
.product-info { display: flex; flex-direction: column; padding: clamp(24px, 4vw, 40px); min-width: 0; }
.product-kicker {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 8px;
}
.product-info h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px; font-weight: 600; color: var(--white); line-height: 1.15; margin-bottom: 10px;
}
.product-desc { font-size: 13px; line-height: 1.7; color: rgba(245,242,236,0.62); margin-bottom: 20px; }
.product-variants { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.product-variant {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px;
  border: 1px solid rgba(214,174,73,0.22); background: rgba(214,174,73,0.04);
  cursor: pointer; text-align: left;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.product-variant:hover { border-color: rgba(214,174,73,0.6); }
.product-variant.selected { border-color: var(--gold); background: rgba(214,174,73,0.12); }
.product-variant .pv-dot {
  width: 14px; height: 14px; flex: 0 0 14px; border-radius: 50%;
  border: 2px solid rgba(214,174,73,0.5);
  position: relative;
}
.product-variant.selected .pv-dot { border-color: var(--gold); }
.product-variant.selected .pv-dot::after {
  content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--gold);
}
.product-variant .pv-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.product-variant .pv-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white); margin-bottom: 4px;
}
.product-variant .pv-meta { font-size: 12px; color: var(--grey); }
.product-variant .pv-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 19px; font-weight: 700; color: var(--gold-light); white-space: nowrap;
}
.product-qty {
  border: 1px solid rgba(214,174,73,0.22);
  background: linear-gradient(160deg, rgba(214,174,73,0.05), rgba(214,174,73,0.02));
  padding: 16px 18px;
  margin-bottom: 18px;
}
.pq-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.pq-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-light);
}
.pq-stepper { display: flex; align-items: center; gap: 10px; }
.pq-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(214,174,73,0.45); background: rgba(214,174,73,0.08);
  color: var(--gold-light); font-size: 16px; line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pq-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--black); }
.pq-btn:disabled { opacity: 0.35; cursor: default; }
.pq-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 700; color: var(--white);
  min-width: 36px; text-align: center;
}
.pq-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px;
  background: rgba(214,174,73,0.15);
  outline: none; cursor: pointer; margin: 0;
}
.pq-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--dark);
  box-shadow: 0 0 0 1px rgba(214,174,73,0.6), 0 0 10px rgba(214,174,73,0.35);
  cursor: pointer;
}
.pq-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--dark);
  box-shadow: 0 0 0 1px rgba(214,174,73,0.6), 0 0 10px rgba(214,174,73,0.35);
  cursor: pointer;
}
.pq-slider::-moz-range-track { background: transparent; height: 4px; }
.pq-scale {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(245,242,236,0.4);
}

.product-specs { margin-bottom: 20px; display: flex; flex-direction: column; gap: 14px; }
.spec-group { display: flex; flex-direction: column; gap: 8px; }
.spec-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--grey);
  display: flex; align-items: center; gap: 10px;
}
.spec-label::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(214,174,73,0.3), transparent);
}
.spec-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.spec-pill {
  padding: 7px 14px;
  border: 1px solid rgba(214,174,73,0.3);
  background: rgba(214,174,73,0.05);
  color: rgba(245,242,236,0.75);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.spec-pill:hover { border-color: var(--gold); color: var(--gold-light); }
.spec-pill.selected {
  background: var(--gold); border-color: var(--gold); color: var(--black);
  box-shadow: 0 4px 14px rgba(200,150,12,0.35);
}

.product-price-box {
  border: 1px solid rgba(214,174,73,0.28);
  border-left: 3px solid var(--gold);
  background: linear-gradient(160deg, rgba(214,174,73,0.07), rgba(214,174,73,0.02));
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.pp-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.pp-row span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--grey);
}
.pp-row b {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 700; color: var(--white);
}
.pp-row.pp-total { border-top: 1px dashed rgba(214,174,73,0.28); padding-top: 10px; }
.pp-row.pp-total span { color: var(--gold-light); }
.pp-row.pp-total b { font-size: 24px; color: var(--gold-light); }
.product-add { width: 100%; justify-content: center; margin-left: 0; }
@media (max-width: 760px) {
  .product-box { grid-template-columns: 1fr; }
  .product-media { min-height: 220px; padding: 24px; }
  .product-media img { max-height: 260px; }
  .product-add { width: 100%; justify-content: center; }
}
@media (max-width: 600px) {
  .product-overlay { padding: 16px 12px; }
}

/* --- CART DRAWER --- */
.cart-overlay {
  display: none; position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.72);
}
.cart-overlay.open { display: block; }
body.cart-open { overflow: hidden; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 10001;
  width: min(430px, 100vw);
  background: var(--dark);
  border-left: 1px solid rgba(214,174,73,0.35);
  display: flex; flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
  box-shadow: -30px 0 80px rgba(0,0,0,0.5);
}
.cart-drawer.open { transform: translateX(0); }
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(214,174,73,0.18);
}
.cart-head h3 { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600; color: var(--gold); }
.cart-close {
  background: none; border: 1px solid rgba(214,174,73,0.45); color: var(--gold);
  width: 34px; height: 34px; font-size: 18px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, color 0.25s ease;
}
.cart-close:hover { background: var(--gold); color: var(--black); }
.cart-items { flex: 1; overflow-y: auto; padding: 10px 24px; }
.cart-item {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 14px; align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(245,242,236,0.07);
}
.cart-item-thumb { width: 62px; height: 62px; overflow: hidden; background: var(--dark2); border: 1px solid rgba(214,174,73,0.2); }
.cart-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { min-width: 0; }
.cart-item-name { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); margin-bottom: 6px; }
.cart-item-meta { font-size: 12px; color: var(--grey); margin-bottom: 6px; }
.cart-qty-row { display: flex; align-items: center; gap: 8px; }
.cart-qty-btn {
  width: 24px; height: 24px;
  border: 1px solid rgba(214,174,73,0.4); background: rgba(214,174,73,0.08); color: var(--gold-light);
  font-size: 14px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cart-qty-btn:hover { background: var(--gold); color: var(--black); }
.cart-qty { font-family: 'Barlow Condensed', sans-serif; font-size: 13px; font-weight: 700; color: var(--white); min-width: 18px; text-align: center; }
.cart-item-price { text-align: right; font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 700; color: var(--gold-light); }
.cart-item-remove { margin-top: 4px; margin-left: auto; background: none; border: none; color: var(--grey); font-size: 12px; cursor: pointer; text-decoration: underline; padding: 0; }
.cart-item-remove:hover { color: var(--red); }
.cart-empty { text-align: center; padding: 60px 24px; color: var(--grey); font-size: 13px; line-height: 1.8; }
.cart-foot { border-top: 1px solid rgba(214,174,73,0.18); padding: 22px 24px 26px; }
.cart-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 13px; color: rgba(245,242,236,0.72); }
.cart-row.total { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 700; color: var(--white); margin-bottom: 18px; }
.cart-row.total .cart-amount { color: var(--gold-light); }
.cart-checkout { width: 100%; justify-content: center; }
.cart-note { margin-top: 14px; font-size: 11px; color: var(--grey); text-align: center; line-height: 1.6; }

/* --- CHECKOUT MODAL --- */
.checkout-overlay {
  display: none; position: fixed; inset: 0; z-index: 10002;
  background: rgba(0,0,0,0.82);
  align-items: flex-start; justify-content: center;
  overflow-y: auto; padding: 40px 20px;
}
.checkout-overlay.open { display: flex; }
body.checkout-open { overflow: hidden; }
.checkout-box {
  position: relative;
  width: min(720px, 100%);
  background: var(--dark);
  border: 1px solid rgba(214,174,73,0.35);
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
  padding: clamp(24px, 4vw, 48px);
}
.co-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: 1px solid rgba(214,174,73,0.45); color: var(--gold);
  width: 34px; height: 34px; font-size: 18px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.25s ease, color 0.25s ease; z-index: 3;
}
.co-close:hover { background: var(--gold); color: var(--black); }
.co-step { display: none; }
.co-step.active { display: block; }
.co-step .section-label { margin-bottom: 8px; }
.co-step h3 { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 600; color: var(--white); margin-bottom: 22px; }
.co-order { border: 1px solid rgba(214,174,73,0.18); background: rgba(0,0,0,0.3); padding: 18px 20px; margin-bottom: 22px; }
.co-order-row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; font-size: 13px; color: rgba(245,242,236,0.72); border-bottom: 1px solid rgba(245,242,236,0.05); }
.co-order-row:last-of-type { border-bottom: none; }
.co-order-row b { color: var(--white); font-weight: 600; text-align: right; }
.co-order-total { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0 0; margin-top: 6px; border-top: 1px solid rgba(214,174,73,0.3); font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; color: var(--white); }
.co-order-total span { color: var(--gold-light); }
.co-pay-methods { display: flex; flex-direction: column; gap: 10px; }
.co-pay-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(214,174,73,0.25); background: rgba(214,174,73,0.04);
  cursor: pointer; transition: border-color 0.25s ease, background 0.25s ease;
}
.co-pay-row:hover { border-color: var(--gold); }
.co-pay-row.selected { border-color: var(--gold); background: rgba(214,174,73,0.12); }
.co-pay-row input { accent-color: var(--gold); }
.co-pay-label { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); }
.co-pay-desc { font-size: 12px; color: var(--grey); }
.co-pay-tag { margin-left: auto; padding: 5px 9px; border: 1px solid rgba(214,174,73,0.4); color: var(--gold-light); font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.co-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.co-actions .btn-primary, .co-actions .btn-outline { margin-left: 0; }

/* --- CRYPTO PANEL --- */
.crypto-panel { margin-top: 24px; border: 1px solid rgba(214,174,73,0.25); background: rgba(0,0,0,0.34); padding: 26px; }
.crypto-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.crypto-title { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); }
.crypto-status { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); }
.crypto-status.pending { color: var(--gold-light); }
.crypto-status.success { color: var(--green); }
.crypto-status.error { color: var(--red); }
.crypto-qr {
  width: 220px; height: 220px; margin: 0 auto 22px;
  background: var(--white); padding: 12px;
  display: flex; align-items: center; justify-content: center;
}
.crypto-qr img, .crypto-qr canvas, .crypto-qr svg { width: 100%; height: 100%; display: block; }
.crypto-qr-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--mid);
}
.crypto-meta { display: grid; gap: 10px; max-width: 460px; margin: 0 auto; }
.crypto-label { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); margin-bottom: 5px; }
.crypto-amount { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 700; color: var(--gold-light); line-height: 1.1; }
.crypto-zar { font-size: 13px; color: rgba(245,242,236,0.72); }
.crypto-rate { font-size: 12px; color: var(--grey); }
.crypto-address-row { display: flex; gap: 8px; }
.crypto-address {
  flex: 1; min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(214,174,73,0.3); background: rgba(0,0,0,0.46);
  color: var(--white); font-size: 12px; word-break: break-all;
  user-select: all;
}
.crypto-copy {
  flex-shrink: 0; padding: 0 14px;
  border: 1px solid rgba(214,174,73,0.45); background: rgba(214,174,73,0.1); color: var(--gold-light);
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: background 0.25s ease, color 0.25s ease;
}
.crypto-copy:hover { background: var(--gold); color: var(--black); }
.crypto-expiry { font-size: 12px; color: var(--grey); }
.crypto-expiry.urgent { color: var(--red); font-weight: 700; }
.crypto-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.crypto-actions .btn-outline { margin-left: 0; }

/* --- DONE STEP --- */
.co-done { text-align: center; padding: 30px 10px; }
.co-done-mark {
  width: 84px; height: 84px; margin: 0 auto 24px;
  border: 2px solid var(--gold); color: var(--gold-light);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; border-radius: 50%;
}
.co-done h3 { font-family: 'Cormorant Garamond', serif; font-size: 34px; font-weight: 600; color: var(--white); margin-bottom: 14px; }
.co-done p { font-size: 14px; line-height: 1.8; color: rgba(245,242,236,0.68); max-width: 480px; margin: 0 auto 22px; }
.co-done .btn-primary { margin: 0 auto; }

/* --- SHOP RESPONSIVE --- */
@media (max-width: 900px) {
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-section-head { grid-template-columns: 1fr; }
  .market-panel-bar { flex-wrap: wrap; gap: 8px; }
  .livebar-cell { min-width: 80px; }
}
@media (max-width: 600px) {
  .shop-grid { grid-template-columns: 1fr; }
  .shop-toolbar { flex-direction: column; align-items: flex-start; }
  .checkout-overlay { padding: 16px 12px; }
  .shop-table-wrap { overflow-x: auto; }
  .shop-table thead th { font-size: 9px; padding: 10px 8px; }
  .shop-table tbody td { font-size: 10px; padding: 12px 8px; }
  .shop-row-name { gap: 8px; }
  .shop-row-img { width: 32px; height: 32px; }
  .shop-desk-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .shop-desk-stat { min-width: 0; width: 100%; grid-column: 1 / -1; padding: 10px 8px; }
  .shop-desk-stat b { font-size: 15px; }
  .shop-desk-stat span { font-size: 8px; }
  .market-panel { margin-top: 26px; }
  .mc-last { font-size: 16px; }
  .livebar-cell { min-width: 70px; }
  .co-actions { flex-direction: column; }
  .co-actions .btn-primary, .co-actions .btn-outline { width: 100%; justify-content: center; }
  .crypto-panel { padding: 18px; }
}

/* --- FIX: re-assert fixed positioning over `body>#bg-canvas~*` sibling rule --- */
#docPreview {
  position: fixed !important;
  inset: 0 !important;
  z-index: 20010 !important;
}
#cartOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
}
#checkoutOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10002 !important;
}
#buyOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10002 !important;
}
#cartDrawer {
  position: fixed !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 10001 !important;
}
#cartToast {
  position: fixed !important;
  z-index: 9996 !important;
}
#waFab {
  position: fixed !important;
  right: 22px !important;
  left: auto !important;
  bottom: 22px !important;
  z-index: 9950 !important;
}
#waOverlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99996 !important;
}

/* --- ZAR WHOLESALE SHOP REWORK --- */

.shop-toolbar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.shop-min-order {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--grey);
  border: 1px solid rgba(214,174,73,0.35); background: rgba(214,174,73,0.06);
  padding: 7px 12px;
}
.shop-min-order b { color: var(--gold-light); }

/* cart progress */
.cart-progress { padding: 16px 24px 14px; border-bottom: 1px solid rgba(214,174,73,0.15); flex-shrink: 0; }
.cart-progress-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey);
  margin-bottom: 8px;
}
.cart-progress-top b { color: var(--gold-light); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; }
.cart-progress-track {
  height: 8px; background: rgba(245,242,236,0.08);
  border: 1px solid rgba(214,174,73,0.18); overflow: hidden;
}
.cart-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: width 0.5s cubic-bezier(0.16,1,0.3,1);
}
.cart-progress-bar.met { background: linear-gradient(90deg, var(--green), #7de0a3); }
.cart-min-note { font-size: 11px; color: var(--gold-light); margin-bottom: 12px; line-height: 1.5; }
.cart-min-note.ok { color: var(--green); }
.cart-checkout:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); }
.cart-checkout:disabled:hover { transform: none; background: var(--gold); color: var(--black); }
.cart-foot { flex-shrink: 0; }

/* toast */
.cart-toast {
  position: fixed; left: 22px; bottom: 96px; z-index: 9996;
  max-width: min(420px, calc(100vw - 40px));
  padding: 14px 18px;
  background: var(--dark2); border: 1px solid rgba(214,174,73,0.45);
  border-left: 3px solid var(--gold);
  color: rgba(245,242,236,0.92); font-size: 13px; line-height: 1.5;
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.cart-toast b { color: var(--gold-light); }
.cart-toast.show { opacity: 1; transform: translateY(0); }
.cart-toast.error { border-left-color: var(--red); }
.cart-toast.error b { color: var(--red); }

/* buyer toggle */
.buyer-toggle { display: flex; gap: 10px; margin-bottom: 8px; }
.buyer-opt {
  flex: 1; padding: 12px 14px;
  border: 1px solid rgba(214,174,73,0.3); background: rgba(214,174,73,0.04);
  color: rgba(245,242,236,0.72);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.buyer-opt:hover { border-color: var(--gold); color: var(--gold-light); }
.buyer-opt.active { background: var(--gold); border-color: var(--gold); color: var(--black); }
.buyer-note { font-size: 11px; color: var(--grey); margin: 0 0 18px; line-height: 1.6; }

/* company group */
.co-group {
  margin-top: 6px; padding: 18px 20px;
  border: 1px dashed rgba(214,174,73,0.35); background: rgba(214,174,73,0.04);
}
.co-group-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 14px;
}

/* order total row */
.co-total-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid rgba(214,174,73,0.3);
  font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 700; color: var(--white);
}
.co-total-row b {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--grey); display: block;
}
.co-total-row > span:last-child { color: var(--gold-light); }

/* checkout selects */
.co-form select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(214,174,73,0.35); border-radius: 0;
  background: var(--dark2); color: var(--white);
  font-size: 13px;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d6ae49' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  cursor: pointer;
}
.co-form select:focus { outline: none; border-color: var(--gold); }
.co-form select option { background: var(--dark2); color: var(--white); }

/* professional crypto gateway */
.crypto-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.crypto-network {
  padding: 5px 10px;
  border: 1px solid rgba(247,147,26,0.5); background: rgba(247,147,26,0.08);
  color: #f7931a;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}
.crypto-ref { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); margin-bottom: 18px; }
.crypto-ref b { color: var(--white); }
.crypto-note { margin-top: 16px; font-size: 11px; color: var(--grey); line-height: 1.7; }
#cryptoAddress {
  flex: 1; min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(214,174,73,0.3); background: rgba(0,0,0,0.46);
  color: var(--white); font-size: 12px; word-break: break-all;
  user-select: all;
}
.crypto-status.pending::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); margin-right: 8px; vertical-align: middle;
  animation: cryptoPulse 1.6s ease-in-out infinite;
}
@keyframes cryptoPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(214,174,73,0.6); }
  50% { opacity: 0.55; box-shadow: 0 0 0 6px rgba(214,174,73,0); }
}

.checkout-close { position: absolute; top: 16px; right: 16px; z-index: 3; }

@media (max-width: 600px) {
  .cart-toast { left: 14px; right: 14px; bottom: 82px; max-width: none; }
  .crypto-panel { padding: 18px; }
  .crypto-top { flex-direction: column; align-items: stretch; text-align: center; }
  .crypto-body { flex-direction: column; align-items: center; }
  .crypto-amount-row { text-align: center; }
  .crypto-qr { margin: 0 auto 18px; }
  .crypto-meta { max-width: none; }
  .crypto-head { flex-direction: column; align-items: flex-start; }
  .shop-toolbar-right { width: 100%; }
}

/* ---------- invoice + demo pay buttons ---------- */
.co-done .co-invoice-btn { margin: 10px auto 0; display: block; }
.crypto-demo-pay {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 11px 14px;
  border: 1px dashed rgba(214,174,73,.5);
  background: rgba(214,174,73,.06);
  color: var(--gold);
  border-radius: 8px;
  font: 600 12px 'Manrope', 'Barlow', sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
}
.crypto-demo-pay:hover { background: rgba(214,174,73,.14); }
.crypto-demo-pay[hidden] { display: none; }
.delivery-note {
  grid-column: 1 / -1;
  font-size: 12px;
  line-height: 1.7;
  color: var(--gold);
  background: rgba(214,174,73,.07);
  border: 1px dashed rgba(214,174,73,.35);
  padding: 10px 12px;
  margin-top: 4px;
}
.delivery-note[hidden] { display: none; }



/* === NAV: centered logo between left/right groups, no overlap === */
nav { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; }
.nav-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 0 0 auto !important; }
.nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-width: 0; flex: 0 0 auto !important; }
.nav-center { display: flex; align-items: center; justify-content: center; min-width: 0; flex: 1 1 auto !important; position: static !important; transform: none !important; }
.nav-center img { height: auto !important; max-height: 36px !important; width: auto !important; max-width: 140px !important; object-fit: contain; }
.mobile-nav { position: fixed !important; top: 0 !important; right: 0 !important; z-index: 99990 !important; padding-top: 110px !important; }
.mobile-nav.open { display: flex !important; transform: translateX(0) !important; }
.mobile-nav-overlay { position: fixed !important; inset: 0 !important; z-index: 99989 !important; }
.mobile-nav-overlay.open { display: block !important; }

@media (max-width: 900px) {
  .nav-links { display: none !important; }
  .hamburger { display: flex !important; }
  .hero { margin-top: 96px !important; height: calc(100svh - 96px) !important; min-height: 380px !important; }
  .op-card { height: 280px !important; }
  .about-img { height: 320px !important; }
  .nav-center img { max-height: 32px !important; max-width: 120px !important; }
}

@media (max-width: 480px) {
  /* Keep the requisition button + hamburger inside the viewport on small phones */
  nav { gap: 8px !important; padding: 10px 12px !important; }
  .nav-dept-logo img { height: 34px !important; }
  .nav-right { gap: 6px !important; }
  .shop-cart-btn { padding: 5px 8px !important; font-size: 10px !important; letter-spacing: 0.1em !important; gap: 6px !important; }
  .shop-cart-btn svg { width: 13px !important; height: 13px !important; }
  .shop-cart-btn-inner { gap: 6px !important; }
}

/* === LOADER must NEVER trap scroll/wheel === */
#page-loader, #page-loader.force-hide { pointer-events: none !important; }

/* === COMPACT everywhere (desktop + mobile) === */
.wrap-section { padding: 40px 0 !important; }
.wrap-section.slim { padding: 30px 0 !important; }
.wrap-head { margin-bottom: 24px !important; }
.section-title { font-size: clamp(28px, 3.2vw, 46px) !important; margin-bottom: 16px !important; }
.page-hero-inner .section-title { font-size: clamp(28px, 3.2vw, 46px) !important; }
.section-body { font-size: 15px !important; line-height: 1.75 !important; }
.hero { margin-top: 100px !important; height: calc(100svh - 100px) !important; min-height: 420px !important; }
.stat-strip-cell { padding: 20px 16px !important; }
.stat-strip-cell strong { font-size: 30px !important; }
.op-card { height: 320px !important; }
.about-img { height: 420px !important; }
#partners { padding: 40px !important; }
.cta-band { height: 220px !important; }
.shop-thumb { aspect-ratio: 3/2 !important; }
.shop-item h4 { font-size: 18px !important; }
.shop-price .retail { font-size: 21px !important; }
@media (max-width: 900px) {
  .wrap-section { padding: 32px 0 !important; }
  .hero { margin-top: 96px !important; height: calc(100svh - 96px) !important; min-height: 380px !important; }
  .op-card { height: 280px !important; }
  .about-img { height: 320px !important; }
  .nav-center img { max-height: 32px !important; max-width: 120px !important; }
  .wrap-section { padding: 32px 0 !important; }
}

/* -- PRODUCT MODAL -- */
.product-overlay {
  display: none; position: fixed; inset: 0; z-index: 10003;
  background: rgba(0,0,0,0.88); backdrop-filter: blur(4px);
  overflow-y: auto; padding: 20px;
  align-items: flex-start; justify-content: center;
}
.product-overlay.open { display: flex; }
body.product-open { overflow: hidden; }
.product-box {
  position: relative; display: grid; grid-template-columns: 280px 1fr;
  width: min(1020px, 100%); background: var(--dark); border: 1px solid rgba(200,150,12,0.28);
  margin: auto; box-shadow: 0 40px 120px rgba(0,0,0,0.7);
}
.pm-close {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  width: 34px; height: 34px; background: rgba(10,10,10,0.8);
  border: 1px solid rgba(200,150,12,0.4); color: var(--gold);
  font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pm-close:hover { background: rgba(200,150,12,0.15); }
.product-left { border-right: 1px solid rgba(200,150,12,0.12); display: flex; flex-direction: column; }
.product-media { background: rgba(10,10,8,0.9); padding: 32px 24px; display: flex; align-items: center; justify-content: center; min-height: 200px; flex-shrink: 0; position: relative; }
.product-media img { max-width: 180px; max-height: 180px; object-fit: contain; display: block; }
.product-media-tag { position: absolute; bottom: 0; left: 0; right: 0; padding: 7px 14px; background: rgba(5,6,5,0.9); border-top: 1px solid rgba(200,150,12,0.14); }
.product-media-tag span { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-pale); }
.product-meta-block { padding: 16px 14px; flex: 1; overflow-y: auto; }
.pm-sku-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.pm-sku-label { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); }
#pSku { font-family: monospace; font-size: 11px; color: var(--gold-pale); }
.pm-spec-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.pm-spec-table tr { border-bottom: 1px solid rgba(245,242,236,0.05); }
.pm-spec-table th, .pm-spec-table td { padding: 6px 5px; text-align: left; vertical-align: top; }
.pm-spec-table th { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); white-space: nowrap; padding-right: 10px; }
.pm-spec-table td { color: rgba(245,242,236,0.75); }
.pm-avail { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 6px; border: 1px solid; }
.pm-avail--ok       { color: #27AE60; border-color: rgba(39,174,96,0.4);  background: rgba(39,174,96,0.06); }
.pm-avail--limited  { color: #D7A20F; border-color: rgba(215,162,15,0.4); background: rgba(215,162,15,0.06); }
.pm-avail--contract { color: #9A6A18; border-color: rgba(154,106,24,0.4); background: rgba(154,106,24,0.06); }
.product-right { padding: 24px 24px 28px; overflow-y: auto; max-height: 92vh; display: flex; flex-direction: column; gap: 16px; }
.product-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.product-header h3 { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600; color: var(--white); line-height: 1.2; }
.pm-status { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 3px 9px; border: 1px solid rgba(39,174,96,0.4); color: #27AE60; background: rgba(39,174,96,0.06); flex-shrink: 0; margin-top: 4px; }
.product-desc { font-size: 12px; line-height: 1.75; color: rgba(245,242,236,0.55); }
.pm-unit-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pm-unit-label { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); }
.pm-unit-tab { padding: 4px 11px; border: 1px solid rgba(200,150,12,0.28); background: transparent; color: rgba(245,242,236,0.6); font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 0.18s, color 0.18s; }
.pm-unit-tab.active, .pm-unit-tab:hover { background: rgba(200,150,12,0.14); color: var(--gold-light); border-color: var(--gold); }
.pm-measure-block { display: flex; flex-direction: column; gap: 7px; }
.pm-measure-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pm-measure-label { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); }
.pm-measure-display { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pm-measure-input { width: 90px; padding: 6px 10px; background: rgba(200,150,12,0.06); border: 1px solid rgba(200,150,12,0.3); color: var(--white); font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight: 700; text-align: right; outline: none; }
.pm-measure-input:focus { border-color: var(--gold); }
.pm-measure-unit { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); min-width: 22px; }
.pm-measure-hint { font-size: 10px; color: var(--grey); }
.pm-slider { width: 100%; height: 4px; -webkit-appearance: none; appearance: none; background: rgba(200,150,12,0.15); outline: none; cursor: pointer; border: none; }
.pm-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); border: 2px solid var(--dark); cursor: pointer; }
.pm-slider-scale { display: flex; justify-content: space-between; align-items: center; font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.1em; color: rgba(245,242,236,0.3); }
.pm-measure-value { color: var(--gold-light); font-size: 10px; font-weight: 700; }
.pm-dim { font-size: 10px; color: rgba(245,242,236,0.4); }
.pm-formats { display: flex; flex-direction: column; gap: 7px; }
.pm-formats-label { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); }
.pm-formats-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.pm-format { padding: 6px 10px; border: 1px solid rgba(200,150,12,0.2); background: transparent; cursor: pointer; text-align: left; transition: border-color 0.18s, background 0.18s; display: flex; flex-direction: column; gap: 1px; }
.pm-format:hover { border-color: var(--gold); background: rgba(200,150,12,0.06); }
.pm-format.selected { border-color: var(--gold); background: rgba(200,150,12,0.12); }
.pm-format b { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--white); }
.pm-format span { font-family: monospace; font-size: 9px; color: rgba(245,242,236,0.5); }
.pm-format em { font-size: 9px; color: var(--grey); }
.product-specs { display: flex; flex-direction: column; gap: 10px; }
.spec-group { display: flex; flex-direction: column; gap: 6px; }
.spec-label { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey); display: flex; align-items: center; gap: 10px; }
.spec-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(200,150,12,0.25), transparent); }
.product-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; align-items: start; }
.spec-pills { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 6px; }
.spec-pill {
  padding: 7px 9px; border: 1px solid rgba(200,150,12,0.22); background: transparent;
  color: rgba(245,242,236,0.68); font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.05em; line-height: 1.25; text-align: center;
  cursor: pointer; transition: background 0.18s, color 0.18s, border-color 0.18s; border-radius: 6px;
}
.spec-pill:hover { border-color: var(--gold); color: var(--gold-light); }
.spec-pill.selected { background: var(--gold); border-color: var(--gold); color: var(--black); }
.pm-price-block { border: 1px solid rgba(200,150,12,0.22); border-left: 2px solid var(--gold); background: rgba(200,150,12,0.03); padding: 10px 14px; display: flex; flex-direction: column; gap: 5px; }
.pm-price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 11px; color: rgba(245,242,236,0.6); }
.pm-price-row b { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 700; color: var(--white); }
.pm-price-row b span { font-size: 11px; font-family: 'Barlow Condensed', sans-serif; color: var(--grey); }
.pm-price-spot { font-size: 10px; color: var(--grey); flex-wrap: wrap; gap: 4px; }
.pm-price-total { border-top: 1px dashed rgba(200,150,12,0.25); padding-top: 7px; }
.pm-price-total b { font-size: 20px; color: var(--gold-light); }
.pm-price-ts { font-size: 9px; color: rgba(245,242,236,0.28); line-height: 1.5; margin-top: 2px; }
.pm-contract-section { display: flex; flex-direction: column; gap: 10px; border: 1px solid rgba(200,150,12,0.18); background: rgba(5,6,5,0.5); padding: 14px; }
.pm-contract-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pm-contract-label { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.pm-contract-ref { font-family: monospace; font-size: 9px; color: rgba(245,242,236,0.35); }
.pm-contract-preview { background: rgba(10,10,8,0.8); border: 1px solid rgba(200,150,12,0.1); }
.pc-doc { padding: 12px 14px; font-size: 10px; }
.pc-doc-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 7px; padding-bottom: 7px; border-bottom: 1px solid rgba(200,150,12,0.18); }
.pc-doc-head span:first-child { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--gold-pale); text-transform: uppercase; }
.pc-doc-head span:last-child { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; color: var(--grey); }
.pc-doc-meta { font-size: 9px; color: var(--grey); margin-bottom: 7px; }
.pc-doc-divider { height: 1px; background: rgba(200,150,12,0.12); margin: 5px 0; }
.pc-doc-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.pc-doc-table td { padding: 4px 5px; vertical-align: top; border-bottom: 1px solid rgba(245,242,236,0.04); }
.pc-doc-table td:first-child { color: var(--grey); width: 40%; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.05em; }
.pc-doc-table td:last-child { color: rgba(245,242,236,0.8); }
.pc-doc-clause { margin-top: 9px; padding: 7px; background: rgba(200,150,12,0.04); border-left: 2px solid rgba(200,150,12,0.35); font-size: 9px; color: rgba(245,242,236,0.45); line-height: 1.6; }
.pm-terms { border: 1px solid rgba(200,150,12,0.14); }
.pm-terms-head { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); padding: 7px 11px; border-bottom: 1px solid rgba(200,150,12,0.1); background: rgba(200,150,12,0.04); }
.pm-terms-body { padding: 9px 11px; max-height: 130px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.pm-terms-body p { font-size: 10px; line-height: 1.65; color: rgba(245,242,236,0.5); }
.pm-terms-body b { color: rgba(245,242,236,0.7); }
.pm-sign-block { border: 1px solid rgba(200,150,12,0.18); padding: 12px; display: flex; flex-direction: column; gap: 9px; transition: border-color 0.3s; }
.pm-sign-block.signed { border-color: rgba(39,174,96,0.5); }
.pm-sign-head { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.pm-sign-fields { display: flex; flex-direction: column; gap: 9px; }
.pm-sign-label { display: flex; flex-direction: column; gap: 4px; font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }
.pm-sign-label input { padding: 7px 10px; background: rgba(200,150,12,0.04); border: 1px solid rgba(200,150,12,0.22); color: var(--white); font-size: 14px; font-family: 'Cormorant Garamond', serif; outline: none; }
.pm-sign-label input:focus { border-color: var(--gold); }
.pm-sign-field { display: flex; flex-direction: column; gap: 3px; }
.pm-sign-field-label { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); }
.pm-sig-display { min-height: 38px; padding: 6px 10px; border-bottom: 1px solid rgba(200,150,12,0.25); font-family: 'Cormorant Garamond', serif; font-size: 18px; color: rgba(245,242,236,0.25); transition: color 0.3s; }
.pm-sig-display.has-sig { color: var(--white); border-color: var(--gold); }
.pm-sig-date { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 600; color: rgba(245,242,236,0.5); }
.pm-consent-row { display: flex; align-items: flex-start; gap: 9px; font-size: 11px; line-height: 1.6; color: rgba(245,242,236,0.55); cursor: pointer; }
.pm-consent-row input[type=checkbox] { accent-color: var(--gold); margin-top: 2px; flex-shrink: 0; width: 14px; height: 14px; cursor: pointer; }
.pm-add-btn { width: 100%; justify-content: center; margin-top: 4px; }
.pm-add-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
@media (max-width: 780px) {
  .product-box { grid-template-columns: 1fr; }
  .product-left { border-right: none; border-bottom: 1px solid rgba(200,150,12,0.12); }
  .product-media { min-height: 140px; }
  .product-right { padding: 18px 14px; max-height: none; }
}
/* -- CHECKOUT MODAL REDESIGN -- */
.checkout-overlay { display: none; position: fixed; inset: 0; z-index: 10002; background: rgba(0,0,0,0.84); align-items: flex-start; justify-content: center; overflow-y: auto; padding: 30px 16px; }
.checkout-overlay.open { display: flex; }
body.checkout-open { overflow: hidden; }
.checkout-box { position: relative; width: min(1000px, 100%); background: var(--dark); border: 1px solid rgba(200,150,12,0.3); margin: auto; box-shadow: 0 40px 120px rgba(0,0,0,0.65); padding: 32px; }
.co-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; background: none; border: 1px solid rgba(200,150,12,0.4); color: var(--gold); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.co-close:hover { background: rgba(200,150,12,0.12); }
.co-step { display: none; }
.co-step.active { display: block; }
.co-step[hidden] { display: none !important; }
.co-step-label { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey); margin-bottom: 6px; }
.co-step-title { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; color: var(--white); margin-bottom: 20px; }
.co-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 22px; align-items: start; }
.co-layout-main, .co-layout-doc { min-width: 0; }
.co-layout-main { display: flex; flex-direction: column; gap: 18px; }
.co-layout-rail { position: sticky; top: 24px; min-width: 0; }
.co-ticket {
  border: 1px solid rgba(200,150,12,0.24);
  background: linear-gradient(165deg, rgba(200,150,12,0.08), rgba(0,0,0,0.28));
  border-radius: 14px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.co-ticket-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey);
}
.co-ticket-head b { font-family: 'Cormorant Garamond', serif; font-size: 30px; color: var(--gold-light); }
.co-ticket-lines { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid rgba(200,150,12,0.14); padding-top: 10px; }
.co-ticket-line { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: rgba(245,242,236,0.75); }
.co-ticket-line b { color: var(--white); font-weight: 600; white-space: nowrap; }
.co-ticket-line.sub { font-size: 10px; color: var(--grey); justify-content: flex-start; }
.co-ticket-note { font-size: 10px; line-height: 1.55; color: rgba(245,242,236,0.42); }
.co-pay-btn { width: 100%; justify-content: center; }
.co-section { display: flex; flex-direction: column; gap: 10px; }
.co-section-label {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-light);
}
.co-section-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(200,150,12,0.28), transparent); }
.co-section-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 1px solid rgba(200,150,12,0.45); border-radius: 50%;
  font-size: 10px; color: var(--gold); flex-shrink: 0;
}
.co-section-tip { font-size: 9px; font-weight: 500; letter-spacing: 0.08em; color: var(--grey); text-transform: none; }
.co-form-note { font-size: 10.5px; line-height: 1.6; color: rgba(245,242,236,0.45); margin: 0; }
.agr-keyterms { display: flex; flex-wrap: wrap; gap: 6px; }
.agr-keyterms span {
  font-family: 'Barlow Condensed', sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-light);
  border: 1px solid rgba(200,150,12,0.3); background: rgba(200,150,12,0.07);
  padding: 5px 10px; border-radius: 999px;
}
.agr-doc {
  border: 1px solid rgba(200,150,12,0.28); border-radius: 12px; overflow: hidden;
  background: rgba(0,0,0,0.22);
}
.agr-doc-head {
  padding: 12px 16px; border-bottom: 1px solid rgba(200,150,12,0.2);
  background: linear-gradient(160deg, rgba(200,150,12,0.12), rgba(200,150,12,0.03));
}
.agr-doc-title {
  display: block; font-family: 'Cormorant Garamond', serif; font-size: 15px; font-weight: 700;
  color: var(--gold-light); letter-spacing: 0.04em;
}
.agr-doc-sub { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(245,242,236,0.5); margin-top: 2px; }
.agr-doc-body {
  max-height: 330px; overflow-y: auto; padding: 12px 16px 4px;
  font-size: 11px; line-height: 1.6; color: rgba(245,242,236,0.68);
}
.agr-doc-body .agr-intro { margin: 0 0 12px; font-size: 11px; line-height: 1.65; color: rgba(245,242,236,0.6); }
.agr-doc-body b { color: rgba(245,242,236,0.9); }
.agr-clause { border-bottom: 1px solid rgba(200,150,12,0.12); }
.agr-clause:last-child { border-bottom: none; }
.agr-clause summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; color: var(--gold-light); padding: 9px 2px;
}
.agr-clause summary::-webkit-details-marker { display: none; }
.agr-clause summary::after { content: '+'; color: var(--gold); font-size: 13px; line-height: 1; flex-shrink: 0; transition: transform 0.2s; }
.agr-clause[open] summary::after { transform: rotate(45deg); }
.agr-clause p { margin: 0 0 10px; font-size: 11px; line-height: 1.65; color: rgba(245,242,236,0.62); }
.agr-doc-body::-webkit-scrollbar { width: 6px; }
.agr-doc-body::-webkit-scrollbar-thumb { background: rgba(200,150,12,0.35); border-radius: 3px; }
.agr-sign {
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid rgba(200,150,12,0.24); border-radius: 12px;
  background: linear-gradient(165deg, rgba(200,150,12,0.07), rgba(0,0,0,0.2));
  padding: 16px;
}
.agr-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 12px; line-height: 1.55; color: rgba(245,242,236,0.8); }
.agr-check input { margin-top: 2px; accent-color: var(--gold); width: 17px; height: 17px; flex-shrink: 0; cursor: pointer; }
.agr-sign-field { display: flex; flex-direction: column; gap: 6px; }
.agr-sign-label { font-family: 'Barlow Condensed', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-light); }
.agr-sign-field input {
  padding: 11px 13px; background: rgba(0,0,0,0.4); border: 1px solid rgba(200,150,12,0.3);
  color: var(--white); font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 600; letter-spacing: 0.03em;
  border-radius: 8px; outline: none; transition: border-color 0.2s;
}
.agr-sign-field input:focus { border-color: var(--gold); }
.agr-sign-field input::placeholder { color: rgba(245,242,236,0.28); }
.agr-sign-hint { font-size: 10px; line-height: 1.6; color: rgba(245,242,236,0.42); margin: 0; }
@media (max-width: 760px) {
  .agr-doc-body { max-height: 240px; }
}
.co-summary-block { overflow-x: auto; }
.co-summary-head { flex-wrap: wrap; gap: 6px 10px; }
.co-summary-block { border: 1px solid rgba(200,150,12,0.18); overflow-x: auto; }
.co-summary-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: rgba(200,150,12,0.06); border-bottom: 1px solid rgba(200,150,12,0.14); font-size: 11px; color: rgba(245,242,236,0.55); font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.08em; }
.co-summary-head b { color: var(--gold-light); }
.co-summary-status { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #9A6A18; border: 1px solid rgba(154,106,24,0.4); padding: 2px 8px; background: rgba(154,106,24,0.06); }
.co-summary-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.co-summary-table th { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); padding: 8px 12px; text-align: left; border-bottom: 1px solid rgba(245,242,236,0.06); }
.co-order-row td { padding: 9px 12px; border-bottom: 1px solid rgba(245,242,236,0.04); color: rgba(245,242,236,0.72); vertical-align: top; }
.co-order-row td span { display: block; font-size: 10px; color: var(--grey); margin-top: 2px; }
.co-order-row td:last-child { text-align: right; color: var(--white); font-weight: 600; white-space: nowrap; }
.co-summary-table tfoot tr:last-child td { padding: 10px 12px; font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; border-top: 1px solid rgba(200,150,12,0.25); }
.co-total-row td { color: var(--white) !important; font-size: 14px !important; }
.co-total-row td:last-child { color: var(--gold-light) !important; font-family: 'Cormorant Garamond', serif !important; font-size: 20px !important; }
.co-buyer-block { display: flex; flex-direction: column; gap: 8px; }
.buy-qty-row { display: flex; align-items: center; gap: 10px; }
.buy-qty-input {
  width: 160px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.46);
  border: 1px solid rgba(214,174,73,0.3);
  color: var(--white);
  font: 15px/1.3 'Inter', sans-serif;
  border-radius: 6px;
}
.buy-qty-input:focus { outline: none; border-color: var(--gold); }
.buy-qty-unit {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-light);
}
.co-block-label { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); margin-bottom: 4px; }
.buyer-toggle { display: flex; gap: 0; }
.buyer-opt { padding: 7px 18px; border: 1px solid rgba(200,150,12,0.28); background: transparent; color: rgba(245,242,236,0.55); font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 0.2s, color 0.2s; }
.buyer-opt:first-child { border-right: none; }
.buyer-opt.active { background: rgba(200,150,12,0.12); color: var(--gold-light); border-color: var(--gold); }
.buyer-note { font-size: 11px; color: var(--grey); }
.co-form { display: flex; flex-direction: column; gap: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-grid label { display: flex; flex-direction: column; gap: 5px; font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); }
.form-grid label input, .form-grid label select, .form-grid label textarea { padding: 9px 12px; background: rgba(200,150,12,0.04); border: 1px solid rgba(200,150,12,0.22); color: var(--white); font-size: 13px; font-family: 'Manrope', sans-serif; outline: none; width: 100%; transition: border-color 0.2s; }
.form-grid label input:focus, .form-grid label select:focus, .form-grid label textarea:focus { border-color: var(--gold); }
.form-grid label select { cursor: pointer; }
.form-grid label.invalid input, .form-grid label.invalid select { border-color: var(--red); }
.form-wide { grid-column: 1 / -1; }
.co-company-block { border: 1px solid rgba(200,150,12,0.14); padding: 14px; }
.co-grand-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: rgba(200,150,12,0.06); border: 1px solid rgba(200,150,12,0.2); margin-top: 6px; }
.co-grand-row span { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(245,242,236,0.6); }
.co-grand-row b { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 700; color: var(--gold-light); }
.spec-desc { font-size: 11px; line-height: 1.55; color: rgba(245,242,236,0.5); margin: -2px 0 2px; }
.spec-toggle { display: flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(245,242,236,0.85); cursor: pointer; border: 1px solid rgba(200,150,12,0.25); padding: 10px 14px; border-radius: 6px; background: rgba(200,150,12,0.05); transition: border-color 0.2s, background 0.2s; }
.spec-toggle:hover { border-color: rgba(232,180,34,0.5); background: rgba(200,150,12,0.09); }
.spec-toggle input { accent-color: var(--gold); width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.co-pay-sticky { display: flex; flex-direction: column; gap: 12px; }
.co-pay-btn { width: 100%; justify-content: center; margin-top: 10px; }
.form-message { font-size: 12px; margin-top: 8px; padding: 8px 12px; }
.form-message.error { background: rgba(192,57,43,0.1); border-left: 2px solid var(--red); color: var(--red); }
.form-message.success { background: rgba(39,174,96,0.1); border-left: 2px solid var(--green); color: var(--green); }
.delivery-note { font-size: 11px; color: var(--gold); grid-column: 1/-1; }

/* doc preview in checkout */
.co-layout-doc { display: flex; flex-direction: column; gap: 8px; }
.co-doc-label { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); }
.mini-doc { border: 1px solid rgba(200,150,12,0.2); background: #fff; padding: 10px; cursor: pointer; transition: box-shadow 0.2s; font-size: 9px; }
.mini-doc:hover { box-shadow: 0 6px 20px rgba(200,150,12,0.15); }
.mini-doc.expanded { position: fixed; inset: 40px; z-index: 10010; overflow-y: auto; padding: 20px; font-size: 11px; }
.mini-doc-header { display: flex; justify-content: space-between; border-bottom: 1px solid #333; margin-bottom: 8px; padding-bottom: 6px; }
.mini-doc-logo { font-weight: 900; font-size: 9px; color: #111; line-height: 1.3; }
.mini-doc-type { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #555; text-align: right; }
.mini-doc-meta { display: flex; justify-content: space-between; font-size: 8px; color: #555; margin-bottom: 6px; }
.mini-doc-meta b { color: #111; }
.mini-doc-table { width: 100%; border-collapse: collapse; font-size: 8px; color: #222; }
.mini-doc-table th { border-bottom: 1px solid #333; padding: 2px 3px; text-align: left; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.mini-doc-table td { padding: 3px; border-bottom: 1px solid #e0e0e0; }
.mini-doc-table tfoot td { border-top: 2px solid #333; border-bottom: none; font-weight: 700; }
.mini-doc-footer { margin-top: 8px; font-size: 7px; color: #888; border-top: 1px solid #e0e0e0; padding-top: 5px; }
.mini-doc-enlarge { margin-top: 4px; font-size: 7px; color: var(--gold); text-align: right; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }

/* Bitcoin step */
.crypto-panel { display: flex; flex-direction: column; gap: 16px; max-width: 520px; }
.crypto-order-row { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; color: var(--grey); letter-spacing: 0.08em; }
.crypto-order-row b { color: var(--gold); }
.crypto-network { color: rgba(245,242,236,0.4); }
.crypto-body { display: flex; gap: 20px; align-items: flex-start; }
.crypto-qr { width: 140px; height: 140px; flex-shrink: 0; background: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(200,150,12,0.2); overflow: hidden; }
.crypto-qr-empty { font-size: 10px; color: var(--grey); text-align: center; padding: 8px; }
.crypto-meta { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.crypto-label { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); }
.crypto-amount { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 700; color: var(--gold-light); line-height: 1.2; }
.crypto-zar { font-size: 13px; color: rgba(245,242,236,0.6); }
.crypto-rate-row { font-size: 11px; color: var(--grey); }
.crypto-address-row { display: flex; gap: 8px; align-items: center; }
.crypto-address-input { flex: 1; min-width: 0; padding: 9px 12px; background: rgba(200,150,12,0.04); border: 1px solid rgba(200,150,12,0.22); color: var(--white); font-family: monospace; font-size: 11px; outline: none; }
.crypto-copy { padding: 8px 16px; font-size: 11px; flex-shrink: 0; }
.crypto-status { padding: 8px 12px; border-left: 2px solid rgba(200,150,12,0.4); font-size: 12px; color: rgba(245,242,236,0.6); }
.crypto-status.pending { border-left-color: var(--gold); color: var(--gold-light); }
.crypto-status.success { border-left-color: var(--green); color: var(--green); }
.crypto-status.error   { border-left-color: var(--red);  color: var(--red); }
.crypto-expiry { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--grey); font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.1em; }
.crypto-expiry b { color: var(--white); font-size: 14px; }
.crypto-expiry.urgent b { color: var(--red); }
.crypto-note { font-size: 11px; line-height: 1.65; color: rgba(245,242,236,0.45); }
.crypto-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.crypto-demo-pay { padding: 6px 14px; background: rgba(200,150,12,0.08); border: 1px dashed rgba(200,150,12,0.3); color: var(--grey); font-size: 11px; cursor: pointer; }
.co-done { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 20px; text-align: center; }
.co-done-mark { width: 56px; height: 56px; border-radius: 50%; background: rgba(39,174,96,0.15); border: 2px solid rgba(39,174,96,0.5); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--green); }
.co-done h3 { font-family: 'Cormorant Garamond', serif; font-size: 28px; color: var(--white); }
.co-done p { font-size: 13px; color: rgba(245,242,236,0.65); max-width: 420px; line-height: 1.7; }
.co-done .btn-primary, .co-done .btn-outline { margin: 0 4px; }
@media (max-width: 760px) {
  .co-layout { grid-template-columns: 1fr; gap: 16px; }
  .co-layout-doc { display: none; }
  .co-layout-rail { position: sticky; bottom: 0; z-index: 5; margin: 0 -14px -20px; padding: 10px 14px 18px; background: linear-gradient(to top, #0E0D0B 84%, rgba(14,13,11,0)); }
  .co-ticket { gap: 10px; padding: 12px 14px; border-radius: 12px; border-color: rgba(200,150,12,0.32); background: rgba(14,13,11,0.97); box-shadow: 0 -12px 30px rgba(0,0,0,0.4); }
  .co-ticket-head b { font-size: 22px; }
  .co-ticket-lines, .co-ticket-note { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .checkout-box { padding: 20px 14px; }
  .product-specs { grid-template-columns: 1fr; gap: 12px; }
  .spec-pills { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .spec-pill { font-size: 10px; padding: 6px 8px; }
  .co-summary-table { font-size: 11px; }
  .co-order-row td { padding: 7px 10px; }
  .co-order-row td:last-child { white-space: normal; text-align: right; }
  .co-total-row td:last-child { white-space: normal; }
  .buy-qty-input { width: 100%; max-width: 160px; }
  .co-section-label { font-size: 9.5px; }
}
/* -- DOCUMENT SECTION REDESIGN -- */
.doc-section-head { margin-bottom: 28px; }
.doc-feature { display: grid; grid-template-columns: 240px 1fr; gap: 34px; align-items: start; margin-bottom: 34px; padding: 26px; border: 1px solid rgba(214,174,73,0.18); background: linear-gradient(155deg, rgba(14,14,12,0.9), rgba(8,8,8,0.9)); border-radius: 12px; }
.doc-feature-preview { display: flex; flex-direction: column; gap: 8px; }
.doc-frame-preview { position: relative; cursor: pointer; border: 1px solid rgba(214,174,73,0.22); background: #fff; min-height: 280px; overflow: hidden; transition: box-shadow 0.3s, transform 0.2s; border-radius: 10px; }
.doc-frame-preview:hover { box-shadow: 0 12px 35px rgba(0,0,0,0.4); transform: translateY(-2px); }
.doc-frame-inner { position: absolute; inset: 0; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.doc-render-head { font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #2c2c2c; border-bottom: 1px solid #333; padding-bottom: 4px; }
.doc-render-title { font-size: 13px; font-weight: 700; color: #111; line-height: 1.3; margin-top: 4px; }
.doc-render-year { font-size: 9px; color: #555; }
.doc-render-auditor { font-size: 9px; color: #555; }
.doc-render-line { height: 1px; background: #ccc; margin: 6px 0; }
.doc-render-body { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.doc-render-section { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #444; margin-top: 4px; border-bottom: 1px solid #eee; padding-bottom: 2px; }
.doc-render-row { display: flex; justify-content: space-between; font-size: 8px; color: #666; padding: 1px 0; }
.doc-render-row span:last-child { color: #bbb; letter-spacing: 0.05em; }
.doc-frame-click-hint { position: absolute; bottom: 0; left: 0; right: 0; padding: 5px; background: rgba(200,150,12,0.9); font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--black); text-align: center; opacity: 0; transition: opacity 0.2s; }
.doc-frame-preview:hover .doc-frame-click-hint { opacity: 1; }
.doc-pdf-canvas { display: block; width: 100%; position: relative; z-index: 1; opacity: 0; transition: opacity 0.3s ease; }
.doc-pdf-canvas.loaded { opacity: 1; }
.doc-card-preview canvas { opacity: 0; transition: opacity 0.3s ease; }
.doc-card-preview canvas.loaded { opacity: 1; }
.doc-feature-info { display: flex; flex-direction: column; gap: 14px; }
.doc-badge { display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; padding: 3px 10px; border: 1px solid; }
.doc-badge--financial { color: #9A6A18; border-color: rgba(154,106,24,0.4); background: rgba(154,106,24,0.06); }
.doc-badge--governance { color: #27AE60; border-color: rgba(39,174,96,0.4); background: rgba(39,174,96,0.06); }
.doc-badge--safety { color: #2980B9; border-color: rgba(41,128,185,0.4); background: rgba(41,128,185,0.06); }
.doc-badge--media { color: var(--grey); border-color: rgba(136,136,136,0.4); background: rgba(136,136,136,0.04); }
.doc-badge--vendor { color: var(--gold); border-color: rgba(200,150,12,0.4); background: rgba(200,150,12,0.05); }
.doc-feature-info h3 { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600; color: var(--white); margin-bottom: 4px; }
.doc-feature-info p { font-size: 13px; line-height: 1.75; color: rgba(245,242,236,0.55); }
.doc-meta-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 12px; }
.doc-meta-table td { padding: 7px 10px; border-bottom: 1px solid rgba(245,242,236,0.05); }
.doc-meta-table td:first-child { font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); width: 40%; }
.doc-meta-table td:last-child { color: rgba(245,242,236,0.72); }
.doc-status-ok { color: #27AE60; }
.doc-feature-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.doc-preview-btn { cursor: pointer; }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.doc-card { border: 1px solid rgba(214,174,73,0.18); background: rgba(10,10,10,0.82); cursor: pointer; transition: border-color 0.25s, background 0.25s, transform 0.2s, box-shadow 0.25s; display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; }
.doc-card:hover { border-color: rgba(214,174,73,0.45); background: rgba(14,14,12,0.88); transform: translateY(-3px); box-shadow: 0 12px 35px rgba(0,0,0,0.35), 0 0 0 1px rgba(214,174,73,0.1); }
.doc-card-preview { position: relative; background: #fff; min-height: 160px; overflow: hidden; flex-shrink: 0; border-bottom: 1px solid rgba(214,174,73,0.08); }
.doc-card-fallback { position: absolute; inset: 0; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.doc-card-fallback-head { font-size: 7px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #444; border-bottom: 1px solid #ddd; padding-bottom: 3px; }
/* the fallback letterhead line read as a duplicate heading above the real
   document title ("SAFETY" over "Safety Certificate") — removed so each card
   shows one clean title */
.doc-card-fallback-head { display: none !important; }
.doc-card-fallback-title { font-size: 11px; font-weight: 700; color: #111; line-height: 1.3; margin-top: 4px; }
.doc-card-fallback-org { font-size: 8px; color: #666; }
.doc-card-fallback-lines { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.doc-card-fallback-lines div { height: 6px; background: #e0e0e0; border-radius: 2px; }
.doc-card-fallback-lines div:nth-child(1) { width: 100%; }
.doc-card-fallback-lines div:nth-child(2) { width: 80%; }
.doc-card-fallback-lines div:nth-child(3) { width: 60%; }
.doc-card-body { padding: 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.doc-card-body h4 { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 600; color: var(--white); line-height: 1.3; }
.doc-card-body p { font-size: 11px; line-height: 1.65; color: rgba(245,242,236,0.5); flex: 1; }
.doc-card-meta { display: flex; align-items: center; gap: 6px; font-family: 'Barlow Condensed', sans-serif; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); margin-top: 4px; }
@media (max-width: 760px) {
  .doc-feature { grid-template-columns: 1fr; }
  .doc-feature-preview { max-width: 260px; }
}

/* -- CART -- */
.cart-overlay { display: none; position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.72); }
.cart-overlay.open { display: block; }
body.cart-open { overflow: hidden; }
.cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 10001; width: min(420px,100vw); background: var(--dark); border-left: 1px solid rgba(200,150,12,0.28); display: flex; flex-direction: column; transform: translateX(105%); transition: transform 0.38s cubic-bezier(0.16,1,0.3,1); box-shadow: -24px 0 60px rgba(0,0,0,0.5); }
.cart-drawer.open { transform: translateX(0); }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(200,150,12,0.15); }
.cart-head h3 { font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600; color: var(--gold); }
.cart-close { background: none; border: 1px solid rgba(200,150,12,0.4); color: var(--gold); width: 32px; height: 32px; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cart-close:hover { background: rgba(200,150,12,0.12); }
.cart-progress { padding: 12px 22px; border-bottom: 1px solid rgba(245,242,236,0.06); }
.cart-progress-top { display: flex; justify-content: space-between; font-size: 11px; color: var(--grey); font-family: 'Barlow Condensed', sans-serif; letter-spacing: 0.08em; margin-bottom: 6px; }
.cart-progress-top b { color: var(--gold); }
.cart-progress-track { height: 2px; background: rgba(200,150,12,0.15); }
.cart-progress-bar { height: 100%; background: rgba(200,150,12,0.6); transition: width 0.4s; }
.cart-progress-bar.met { background: var(--green); }
.cart-items { flex: 1; overflow-y: auto; padding: 8px 22px; }
.cart-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid rgba(245,242,236,0.06); }
.cart-item-thumb { width: 52px; height: 52px; overflow: hidden; background: var(--dark2); border: 1px solid rgba(200,150,12,0.15); flex-shrink: 0; }
.cart-item-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cart-item-name { font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); margin-bottom: 4px; }
.cart-item-meta { font-size: 11px; color: var(--grey); margin-bottom: 5px; line-height: 1.55; }
.cart-item-ref { font-family: monospace; font-size: 9px; color: rgba(245,242,236,0.28); }
.cart-qty-row { display: flex; align-items: center; gap: 7px; }
.cart-qty-btn { width: 22px; height: 22px; border: 1px solid rgba(200,150,12,0.35); background: rgba(200,150,12,0.06); color: var(--gold-light); font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cart-qty-btn:hover { background: var(--gold); color: var(--black); }
.cart-qty { font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700; color: var(--white); }
.cart-item-price { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 700; color: var(--gold-light); white-space: nowrap; }
.cart-item-remove { background: none; border: none; color: var(--grey); font-size: 11px; cursor: pointer; text-decoration: underline; padding: 0; margin-left: 2px; }
.cart-item-remove:hover { color: var(--red); }
.cart-empty { text-align: center; padding: 48px 20px; color: var(--grey); font-size: 12px; line-height: 1.75; }
.cart-foot { border-top: 1px solid rgba(200,150,12,0.15); padding: 18px 22px 22px; }
.cart-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 12px; color: rgba(245,242,236,0.65); }
.cart-row strong { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 700; color: var(--white); }
.cart-min-note { font-size: 11px; color: var(--grey); margin-bottom: 12px; line-height: 1.6; }
.cart-min-note.ok { color: var(--green); }
.cart-checkout { width: 100%; justify-content: center; margin-bottom: 8px; }
.cart-note { font-size: 10px; color: rgba(245,242,236,0.3); text-align: center; line-height: 1.6; }
.cart-toast { position: fixed; bottom: 100px; right: 24px; z-index: 10010; padding: 12px 18px; background: var(--dark3); border: 1px solid rgba(200,150,12,0.35); color: var(--white); font-size: 12px; max-width: 320px; line-height: 1.5; transform: translateY(20px); opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; }
.cart-toast.show { opacity: 1; transform: translateY(0); }
.cart-toast.error { border-color: var(--red); color: var(--red); }
/* ---------------------------------------
   PROFESSIONAL SCROLLBARS — GLOBAL
   --------------------------------------- */

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(200,150,12,0.45) rgba(255,255,255,0.04);
}

/* Chrome / Safari / Edge */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.03);
  border-left: 1px solid rgba(200,150,12,0.08);
}
::-webkit-scrollbar-thumb {
  background: rgba(200,150,12,0.38);
  border-radius: 0;
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(232,180,34,0.72);
}
::-webkit-scrollbar-thumb:active {
  background: var(--gold-light, #E8B422);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Wider scrollbar for main page body */
html::-webkit-scrollbar {
  width: 8px;
}
html::-webkit-scrollbar-track {
  background: #0a0a0a;
  border-left: 1px solid rgba(200,150,12,0.1);
}
html::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    rgba(200,150,12,0.15) 0%,
    rgba(200,150,12,0.5) 30%,
    rgba(232,180,34,0.55) 70%,
    rgba(200,150,12,0.15) 100%
  );
  border-radius: 0;
  border-left: 1px solid rgba(245,216,122,0.2);
  border-right: 1px solid rgba(245,216,122,0.06);
}
html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    rgba(200,150,12,0.3) 0%,
    rgba(232,180,34,0.75) 40%,
    rgba(245,216,122,0.8) 60%,
    rgba(200,150,12,0.3) 100%
  );
}

/* Modals / drawers — thinner */
.product-right::-webkit-scrollbar,
.pm-terms-body::-webkit-scrollbar,
.cart-items::-webkit-scrollbar,
.checkout-overlay::-webkit-scrollbar,
.product-meta-block::-webkit-scrollbar,
.co-summary-block::-webkit-scrollbar,
.ops-modal-content::-webkit-scrollbar,
.mobile-nav::-webkit-scrollbar {
  width: 4px;
}
.product-right::-webkit-scrollbar-track,
.pm-terms-body::-webkit-scrollbar-track,
.cart-items::-webkit-scrollbar-track,
.checkout-overlay::-webkit-scrollbar-track,
.product-meta-block::-webkit-scrollbar-track,
.co-summary-block::-webkit-scrollbar-track,
.ops-modal-content::-webkit-scrollbar-track,
.mobile-nav::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.02);
}
.product-right::-webkit-scrollbar-thumb,
.pm-terms-body::-webkit-scrollbar-thumb,
.cart-items::-webkit-scrollbar-thumb,
.checkout-overlay::-webkit-scrollbar-thumb,
.product-meta-block::-webkit-scrollbar-thumb,
.co-summary-block::-webkit-scrollbar-thumb,
.ops-modal-content::-webkit-scrollbar-thumb,
.mobile-nav::-webkit-scrollbar-thumb {
  background: rgba(200,150,12,0.3);
  border-radius: 0;
}
.product-right::-webkit-scrollbar-thumb:hover,
.pm-terms-body::-webkit-scrollbar-thumb:hover,
.cart-items::-webkit-scrollbar-thumb:hover,
.checkout-overlay::-webkit-scrollbar-thumb:hover,
.product-meta-block::-webkit-scrollbar-thumb:hover,
.ops-modal-content::-webkit-scrollbar-thumb:hover,
.mobile-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(232,180,34,0.6);
}

/* Horizontal scrollbars (tables, overflow-x areas) */
.shop-table-wrap::-webkit-scrollbar,
.market-panel-bar::-webkit-scrollbar,
.fin-tabs::-webkit-scrollbar,
.schematics-tabs::-webkit-scrollbar {
  height: 4px;
  width: 0;
}
.shop-table-wrap::-webkit-scrollbar-track,
.market-panel-bar::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.03);
  border-top: 1px solid rgba(200,150,12,0.08);
}
.shop-table-wrap::-webkit-scrollbar-thumb,
.market-panel-bar::-webkit-scrollbar-thumb {
  background: rgba(200,150,12,0.4);
}
.shop-table-wrap::-webkit-scrollbar-thumb:hover,
.market-panel-bar::-webkit-scrollbar-thumb:hover {
  background: rgba(232,180,34,0.7);
}

/* Hide scrollbar on decorative overflow elements */
.ticker-inner::-webkit-scrollbar,
.hero-partners-track::-webkit-scrollbar {
  display: none;
}

/* 22. CONSULTATION DESK — executive booking section.
   z-index 6 lifts the whole section ABOVE the flight sky stage (z 5) so the
   booking cards are never covered by the starlight background when the jet
   pulls them up during the flight — the stars stay behind the cards. */
#consult {
  position: relative;
  z-index: 6;
  /* PULLED UP over the flight-pin so the whole desk — "Need a Job Done?"
     with Arakel's card + booking cards directly beneath it as its content —
     enters the viewport as the jet clears the top. No dead scroll, no seam,
     nothing frozen: title and cards flow at a natural 1:1 with the page. The
     margin is a no-JS fallback; the journey script measures the live layout
     (fonts, device) and sets the exact margin. */
  margin-top: -140svh;
}

/* the jet's blank sky: kept at 0px — the cards sit directly under the title
   (one connected section), and the pull-up above times their entrance to just
   after the plane has climbed away, so the jet is never over a card. */
.consult-sky {
  height: 0px;
}

.consult-head {
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  gap: 32px !important;
  margin-bottom: 26px !important;
}
.consult-head-body { text-align: center !important; }
.consult-stat { min-width: 150px !important; }
.consult-stat b { font-size: 22px !important; letter-spacing: 0.06em !important; }

.consult-spots {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  margin: 6px 0 0 !important;
  border: 1px solid rgba(200,150,12,0.35) !important;
  border-left: 3px solid var(--gold) !important;
  background: linear-gradient(90deg, rgba(200,150,12,0.12), rgba(200,150,12,0.02)) !important;
}
.consult-spots-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold-light);
  animation: consultPulse 1.8s infinite;
  flex-shrink: 0;
}
@keyframes consultPulse {
  0% { box-shadow: 0 0 0 0 rgba(232,180,34,0.55); }
  70% { box-shadow: 0 0 0 10px rgba(232,180,34,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,180,34,0); }
}
@keyframes consultCallRings {
  /* the call rings breathe very slowly — the "line is open" heartbeat */
  0%, 100% { transform: scale(0.97); opacity: 0.8; }
  50%      { transform: scale(1.03); opacity: 1; }
}
.consult-spots p { font-size: clamp(13px, 1vw, 15px) !important; line-height: 1.6 !important; color: rgba(245,242,236,0.8) !important; }
.consult-spots b {
  color: var(--gold-light); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: clamp(11px, 0.9vw, 13px);
}

.consult-grid {
  display: grid !important;
  /* desktop: the WhatsApp + in-person booking cards sit SIDE BY SIDE — the
     same cards the user approved on mobile, just paired to save space */
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 1120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 24px !important;
  margin-bottom: 36px !important;
  /* promoted for the flight's per-frame card pull — the JS fallback path
     writes transform every scroll frame, so the layer must stay composited */
  will-change: transform;
}
.consult-card {
  position: relative;
  display: grid;
  /* the media panel sits ON TOP on every device — the exact layout the user
     approved on mobile; desktop no longer puts the picture on the side */
  grid-template-columns: 1fr;
  border-radius: 20px;
  /* bookings: a brushed-gold gradient border (border-box ring) over frosted
     glass — a luxury frame instead of a flat AI-slop outline */
  border: 1px solid transparent;
  background:
    linear-gradient(160deg, rgba(24,22,18,0.78), rgba(13,12,10,0.92)) padding-box,
    linear-gradient(160deg, rgba(232,180,34,0.75), rgba(232,180,34,0.12) 38%, rgba(232,180,34,0.55) 100%) border-box;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
.consult-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 90px rgba(0,0,0,0.6), 0 0 44px rgba(232,180,34,0.16);
}
.consult-card--inperson {
  background:
    linear-gradient(160deg, rgba(26,22,16,0.8), rgba(14,12,9,0.92)) padding-box,
    linear-gradient(200deg, rgba(245,216,122,0.9), rgba(232,180,34,0.18) 40%, rgba(214,174,73,0.7) 100%) border-box;
}

/* -- media panel (photo / art) -- */
.consult-media {
  position: relative;
  aspect-ratio: 10/7;
  overflow: hidden;
  background: linear-gradient(160deg, #191713 0%, #121110 100%);
}
.consult-media-art {
  position: absolute;
  inset: 0;
}
.consult-media-art--photo {
  background: url('../meeting-jet.jpg') center / cover no-repeat;
  animation: jetFadeIn 1.1s cubic-bezier(0.16,1,0.3,1) both;
}
.consult-media-art--call {
  display: flex;
  align-items: center;
  justify-content: center;
  /* the WhatsApp brand background the client supplied — the icon floats on
     the actual pattern instead of the old synthetic "AI" dial. A light
     darkening keeps the icon, signal rings and chip legible over it. */
  background:
    linear-gradient(160deg, rgba(14,12,9,0.30) 0%, rgba(10,9,8,0.12) 45%, rgba(8,7,6,0.45) 100%),
    url('../psd-social-media-background-pattern_1048437-175.avif') center / cover no-repeat;
}
.consult-media-art--call::before {
  content: '';
  position: absolute;
  inset: 0;
  /* signal rings radiating out from the call icon, a soft gold halo behind it,
     and one brushed brass streak — the "line is open" look */
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0 57px, rgba(232,180,34,0.20) 57px 59px, transparent 59px 100%),
    radial-gradient(circle at 50% 50%, transparent 0 84px, rgba(232,180,34,0.15) 84px 86px, transparent 86px 100%),
    radial-gradient(circle at 50% 50%, transparent 0 111px, rgba(232,180,34,0.11) 111px 113px, transparent 113px 100%),
    radial-gradient(circle at 50% 50%, transparent 0 138px, rgba(232,180,34,0.08) 138px 140px, transparent 140px 100%),
    radial-gradient(circle at 50% 50%, rgba(232,180,34,0.18), transparent 60%),
    linear-gradient(115deg, transparent 34%, rgba(245,216,122,0.10) 45%, transparent 56%);
  mask-image: radial-gradient(150% 150% at 50% 50%, #000 0 58%, transparent 100%);
  -webkit-mask-image: radial-gradient(150% 150% at 50% 50%, #000 0 58%, transparent 100%);
  transform-origin: center;
  animation: consultCallRings 7s ease-in-out infinite;
}
.consult-media-art--call img {
  position: relative;
  width: 92px;
  height: 92px;
  object-fit: contain;
  opacity: 0.95;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,0.55));
}
.consult-media-art::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, #181512 0%, rgba(24,21,18,0.92) 18%, rgba(24,21,18,0.5) 40%, rgba(24,21,18,0.12) 58%, transparent 72%),
    linear-gradient(to bottom, rgba(10,9,8,0.35), transparent 26%);
}
/* availability chip */
.consult-media-chip {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-pale);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(232,180,34,0.45);
  background: rgba(10,9,8,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}
.consult-media-chip--red {
  color: rgba(245,242,236,0.92);
  border-color: rgba(232,180,34,0.42);
  background: rgba(10,9,8,0.55);
  letter-spacing: 0.2em;
  font-size: 9.5px;
  padding: 6px 13px;
}

/* fee covers the call/meeting only — highlighted note */
.consult-fee-note {
  font-size: 11px;
  line-height: 1.6;
  color: #ff9c9c;
  font-weight: 500;
  background: rgba(180,20,20,0.14);
  border: 1px solid rgba(255,80,80,0.45);
  border-left: 4px solid #ff5c5c;
  border-radius: 6px;
  padding: 9px 12px;
  margin-top: 14px;
  box-shadow: 0 0 14px rgba(255,60,60,0.22), inset 0 0 10px rgba(255,60,60,0.05);
  animation: feeGlow 2.6s ease-in-out infinite;
}
.bk-fee-note {
  font-size: 12.5px;
  line-height: 1.65;
  color: #ff8a8a;
  font-weight: 500;
  background: rgba(180,20,20,0.16);
  border: 1px solid rgba(255,80,80,0.55);
  border-left: 4px solid #ff5c5c;
  border-radius: 6px;
  padding: 11px 14px;
  margin-bottom: 14px;
  box-shadow: 0 0 18px rgba(255,60,60,0.3), inset 0 0 12px rgba(255,60,60,0.07);
  animation: feeGlow 2.6s ease-in-out infinite;
}
.bk-fee-note b { color: #ffb0b0; }
@keyframes feeGlow {
  0%, 100% { box-shadow: 0 0 13px rgba(255,60,60,0.26), inset 0 0 12px rgba(255,60,60,0.05); }
  50% { box-shadow: 0 0 28px rgba(255,60,60,0.5), inset 0 0 15px rgba(255,60,60,0.13); }
}

/* what you get — labelled section */
.consult-section { margin-bottom: 22px; }
.consult-section-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold);
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.consult-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(232,180,34,0.35), transparent);
}
.consult-body {
  display: flex;
  flex-direction: column;
  padding: 26px 28px 20px;
  min-width: 0;
}
.consult-info { flex: 1; }
.consult-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 9px;
}
.consult-eyebrow::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(232,180,34,0.35), transparent); }
.consult-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 29px; font-weight: 500; color: var(--white);
  margin-bottom: 10px; line-height: 1.14;
}
.consult-desc { font-size: 13.5px; line-height: 1.75; color: rgba(245,242,236,0.62); margin: 0; }
.consult-price-only {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold-light);
  border: 1px solid rgba(232,180,34,0.4);
  background: rgba(232,180,34,0.06);
  padding: 3px 11px;
  border-radius: 999px;
}
.consult-price-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px; font-weight: 600;
  background: linear-gradient(135deg, #f7e7b6 0%, #e3c268 55%, #c9a227 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #e3c268;
  line-height: 1.05;
}
.consult-price-per {
  font-size: 11.5px; color: rgba(245,242,236,0.45);
  width: 100%; margin-top: 3px;
}
/* quiet pull-line */
.consult-quote {
  margin: 18px 0 0;
  max-width: 480px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic !important;
  font-size: 16.5px;
  line-height: 1.5;
  color: rgba(232,180,34,0.72);
}

/* price + booking row */
.consult-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(245,242,236,0.08);
  margin-top: 22px;
  padding-top: 18px;
}
.consult-foot-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.consult-foot-price .consult-price-only { align-self: baseline; }
.consult-foot-price .consult-price-amount { font-size: 38px; }
.consult-foot-price .consult-price-per { width: auto; margin-top: 0; }

/* booking price count-up — professional ticker: the price starts at R0.00 and
   ticks up to its final value with a silk ease-out; on landing it gets a brief
   green pulse so the number feels like it just "clicked" into place, then it
   settles back to its gold */
.consult-price-amount {
  position: relative;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.consult-price-amount.counting { transform: scale(0.985); transition: transform 0.3s ease; }
.consult-price-amount.counted { animation: priceLand 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes priceLand {
  /* the number FLASHES GREEN as it lands (the pulse), then settles back to its
     original gold — a quick green tick like a confirmed trade */
  0%   { filter: hue-rotate(0deg) drop-shadow(0 0 0 rgba(232,180,34,0)); transform: scale(0.985); }
  35%  { filter: hue-rotate(78deg) drop-shadow(0 0 26px rgba(120,220,120,0.75)); transform: scale(1.07); }
  65%  { filter: hue-rotate(78deg) drop-shadow(0 0 18px rgba(120,220,120,0.45)); transform: scale(1.02); }
  100% { filter: hue-rotate(0deg) drop-shadow(0 0 12px rgba(232,180,34,0.30)); transform: scale(1); }
}
.consult-book {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  padding: 14px 22px;
  border-radius: 10px;
  font-size: 13px;
  min-width: 230px;
}
.consult-book-arrow { transition: transform 0.25s ease; }
.consult-book:hover .consult-book-arrow { transform: translateX(4px); }

.consult-steps {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.consult-step {
  padding: 18px;
  border: 1px solid rgba(245,216,122,0.1);
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
}
.consult-step b {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; color: var(--gold); margin-bottom: 6px;
}
.consult-step span { font-size: 12.5px; line-height: 1.55; color: rgba(245,242,236,0.62); }

/* 22a. HEAD + HOST — "Need a Job Done?" above Arakel's photo, combined intro beside it */
.consult-host-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 44px);
  max-width: 1120px;
  width: 100%;
  margin-bottom: 48px;
  /* promoted for the flight's per-frame pull (same reason as the grid) */
  will-change: transform;
}
.consult-head-photo {
  width: clamp(240px, 22vw, 300px);
  aspect-ratio: 9 / 16;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(232,180,34,0.45);
  box-shadow: 0 22px 56px rgba(200,150,12,0.28);
}
@media (min-width: 861px) {
  /* on desktop the 9:16 portrait (300x533) makes the whole host card so tall
     that the diamond's landing spot (the card's vertical centre) sits too low
     to fit on screen. A slightly wider 4:5 crop keeps the photo big and
     prominent while shortening the card enough for the diamond to land
     centred between the photo and the info — the divider, the "middle" the
     user wants it to act as. The face stays in frame (object-position is
     top centre, so only the lower body crops). */
  .consult-head-photo { aspect-ratio: 4 / 5; }
  /* the flex gaps collapse so the divider slot itself provides the spacing —
     the diamond then lands ALMOST TOUCHING the photo and the text on both
     sides (like the 60px slot on mobile), and the info only has a short
     distance to slide over when the gap opens. */
  .consult-host-card { gap: 10px; }
}
.consult-head-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  filter: brightness(0.92) saturate(0.96);
}
.consult-host-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  max-width: 620px;
}
.consult-head-host-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600;
  color: var(--gold-light);
  line-height: 1.08;
}
.consult-head-host-role {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.consult-head-host-desc {
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.68;
  color: rgba(245,242,236,0.7);
  margin-top: 6px;
}
.bk-host {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  margin-bottom: 18px;
  border: 1px solid rgba(245,216,122,0.16);
  border-radius: 6px;
  background: rgba(200,150,12,0.06);
}
.bk-host img {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 1px solid rgba(232,180,34,0.4);
}
.bk-host span { font-size: 13px; color: rgba(245,242,236,0.7); }
.bk-host b { color: var(--gold-light); }
.bk-host-hero {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px;
  margin-bottom: 22px;
  border: 1px solid rgba(232,180,34,0.4);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(200,150,12,0.14), rgba(255,255,255,0.02));
}
.bk-host-hero img {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 2px solid rgba(232,180,34,0.55);
  flex-shrink: 0;
}
.bk-host-hero-text b {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 600; color: var(--white);
  margin-bottom: 3px;
}
.bk-host-hero-text span {
  font-size: 12.5px; line-height: 1.55; color: rgba(245,242,236,0.62);
}
@media (max-width: 480px) {
  .bk-host-hero { flex-direction: column; text-align: center; }
  .bk-host-hero-text b, .bk-host-hero-text span { text-align: center; }
}
@media (max-width: 900px) {
  .consult-head { gap: 26px !important; }
  .consult-host-card {
    align-items: flex-start;
    gap: 12px;
  }
  .consult-head-photo { width: 150px; }
  .consult-head-host-name { font-size: 15px; }
  .consult-head-host-role { font-size: 8.5px; }
  .consult-head-host-desc { font-size: 10px; line-height: 1.5; }
  .consult-spots { padding: 6px 10px !important; gap: 8px !important; }
  .consult-spots p { font-size: 10px !important; }
  .consult-spots b { font-size: 9px !important; }
}

/* 22b. BOOKING MODAL */
.consult-modal { max-width: 620px !important; padding: 36px 34px 30px !important; max-height: calc(100vh - 24px) !important; }
.consult-modal input[type="date"] { color-scheme: dark; }
.bk-progress { display: flex; align-items: center; margin-bottom: 26px; }
.bk-progress-step {
  flex: 1;
  text-align: center;
  font-size: 12px;
  color: rgba(245,242,236,0.35);
  padding: 0;
  border: none; border-radius: 0; background: none;
  position: relative;
}
.bk-progress-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 12px;
  background: rgba(245,242,236,0.12);
  transform: translateY(-50%);
}
.bk-progress-step.active { color: #e6d5a3; }
.bk-pane[hidden] { display: none !important; }
.bk-title { font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600; color: var(--white); margin-bottom: 8px; }
.bk-sub { font-size: 13.5px; line-height: 1.65; color: rgba(245,242,236,0.62); margin-bottom: 20px; }
.bk-eng-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.bk-eng {
  text-align: left;
  padding: 17px 18px;
  border: 1px solid rgba(232,180,34,0.22);
  background: linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border-radius: 12px;
  cursor: pointer;
  color: var(--white);
  transition: border-color 0.2s, background 0.2s;
}
.bk-eng b { display: block; font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.bk-eng span { font-size: 12px; color: rgba(245,242,236,0.6); line-height: 1.5; display: block; }
.bk-eng:hover { border-color: rgba(232,180,34,0.5); }
.bk-eng.active { border-color: var(--gold); background: rgba(200,150,12,0.12); box-shadow: inset 0 0 0 1px rgba(232,180,34,0.4); }
.bk-block { margin-bottom: 20px; }
.bk-field-label {
  font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 10px;
}
.bk-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.bk-pill {
  padding: 10px 18px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid rgba(245,216,122,0.18);
  background: transparent; color: var(--white);
  border-radius: 4px; cursor: pointer;
}
.bk-pill:hover { border-color: rgba(232,180,34,0.5); }
.bk-pill.active { background: rgba(200,150,12,0.12); color: var(--gold-light); border-color: rgba(232,180,34,0.65); }
.bk-price-line {
  margin-top: 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(245,242,236,0.7);
}
.bk-price-line b {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 600;
  color: #e6d5a3;
}
.bk-includes { list-style: none; margin: 0; padding: 0; }
.bk-includes li {
  position: relative; padding-left: 20px;
  font-size: 13.5px; line-height: 1.6; color: rgba(245,242,236,0.72);
  margin-bottom: 8px;
}
.bk-includes li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; background: var(--gold);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.bk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.bk-field[hidden] { display: none !important; }
.bk-field {
  display: flex; flex-direction: column; gap: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--grey);
}
.bk-field-wide { grid-column: 1 / -1; }
.bk-field input, .bk-field textarea {
  font-family: 'Manrope', sans-serif;
  font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--white);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(245,216,122,0.16);
  border-radius: 4px;
  padding: 11px 13px;
  outline: none;
  transition: border-color 0.2s;
}
.bk-field input:focus, .bk-field textarea:focus { border-color: var(--gold); }
.bk-field textarea { resize: vertical; min-height: 90px; }
.bk-field input::placeholder, .bk-field textarea::placeholder { color: rgba(245,242,236,0.3); }
.bk-error { font-size: 13px; color: var(--red); margin-bottom: 14px; }
.bk-nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.bk-nav .btn-outline { margin-left: 0; }
.bk-review { border: 1px solid rgba(245,216,122,0.14); border-radius: 6px; margin-bottom: 18px; overflow: hidden; }
.bk-review-row[hidden] { display: none !important; }
.bk-review-row {
  display: flex; justify-content: space-between; gap: 18px;
  padding: 12px 16px;
  font-size: 13.5px;
}
.bk-review-row:nth-child(odd) { background: rgba(255,255,255,0.02); }
.bk-review-row span { color: rgba(245,242,236,0.55); }
.bk-review-row b { color: var(--white); text-align: right; }
.bk-review-job { flex-direction: column; gap: 4px; }
.bk-review-job b { text-align: left; font-weight: 500; line-height: 1.55; color: rgba(245,242,236,0.85); }

/* booking consent, tax note, crypto + done inside the booking modal */
.bk-field-hint { display: block; font-size: 11px; color: rgba(245,242,236,0.45); margin-top: 4px; }
.bk-agree {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(245,216,122,0.16);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  font-size: 12.5px; line-height: 1.6; color: rgba(245,242,236,0.72);
}
.bk-agree input { margin-top: 2px; accent-color: var(--gold); flex-shrink: 0; width: 16px; height: 16px; }
.bk-agree b { color: var(--gold-light); }
.bk-tax-note {
  font-size: 12px; line-height: 1.65;
  color: rgba(245,216,122,0.75);
  background: rgba(200,150,12,0.08);
  border-left: 3px solid var(--gold);
  padding: 10px 14px; margin-bottom: 16px;
  border-radius: 4px;
}
.bk-done-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 6px; }
.bk-tax-note-done { margin: 16px auto 0; max-width: 420px; text-align: left; }
/* booking crypto panel — polished */
.consult-modal .crypto-panel {
  margin-top: 0;
  padding: 22px;
  border: 1px solid rgba(214,174,73,0.35);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(200,150,12,0.10), rgba(0,0,0,0.38));
}
.consult-modal .crypto-body { align-items: center; }
.consult-modal .crypto-qr {
  width: 210px; height: 210px;
  margin: 0;
  flex-shrink: 0;
  background: #ffffff;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(214,174,73,0.55);
  box-shadow: 0 0 0 5px rgba(214,174,73,0.10), 0 16px 36px rgba(0,0,0,0.45);
  overflow: hidden;
}
.consult-modal .crypto-qr img,
.consult-modal .crypto-qr canvas,
.consult-modal .crypto-qr svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.consult-modal .crypto-amount { font-size: 30px; }
.consult-modal .crypto-address-input {
  padding: 11px 13px;
  background: rgba(0,0,0,0.45);
  border-color: rgba(214,174,73,0.3);
  border-radius: 6px;
  font-size: 12px;
}
.consult-modal .crypto-copy { border-radius: 6px; }
.consult-modal .crypto-status { border-radius: 4px; }
.consult-modal .crypto-actions { gap: 8px; }
.consult-modal .crypto-actions .btn-outline {
  display: inline-flex;
  width: auto;
  margin: 0;
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
}
@media (max-width: 600px) {
  .consult-modal .crypto-panel { padding: 16px 14px; gap: 12px; }
  .consult-modal .crypto-body { flex-direction: column; align-items: center; }
  .consult-modal .crypto-meta { text-align: center; }
  .consult-modal .crypto-qr { width: 200px; height: 200px; padding: 12px; }
  .consult-modal .bk-title { font-size: 22px; margin-bottom: 6px; }
  .consult-modal .bk-sub { margin-bottom: 14px; font-size: 12.5px; }
  .consult-modal .crypto-note { font-size: 10.5px; }
  .consult-modal .crypto-address-input { font-size: 11px; padding: 10px 11px; }
}

@media (max-width: 900px) {
  /* phones/tablets keep the cards STACKED — the side-by-side pair is
     desktop-only (added above), so the mobile layout stays exactly as before */
  .consult-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .consult-card { grid-template-columns: 1fr !important; }
  .consult-media { aspect-ratio: 10/7 !important; min-height: 0 !important; }
  .consult-media-art--photo { background-position: center !important; }
  .consult-body { padding: 22px 20px 18px !important; }
  .consult-card h3 { font-size: 24px !important; }
  .consult-desc { font-size: 12.5px !important; }
  .consult-price-only { font-size: 9.5px !important; padding: 3px 9px !important; letter-spacing: 0.2em !important; }
  .consult-price-amount { font-size: 32px !important; }
  .consult-price-per { font-size: 11px !important; }
  .consult-foot {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
    margin-top: 18px !important;
    padding-top: 16px !important;
  }
  .consult-foot-price .consult-price-amount { font-size: 34px !important; }
  .consult-book { padding: 13px 14px !important; font-size: 12px !important; border-radius: 10px !important; min-width: 0 !important; width: 100% !important; }
  .consult-steps { grid-template-columns: 1fr 1fr !important; }
  .bk-eng-grid { grid-template-columns: 1fr; }
  .bk-form { grid-template-columns: 1fr; }
  .consult-modal { padding: 26px 18px 22px !important; }
  .bk-nav { flex-wrap: wrap; }
  .bk-nav .btn-primary, .bk-nav .btn-outline { flex: 1; text-align: center; }
}
@media (max-width: 420px) {
  .consult-grid { gap: 14px !important; }
  .consult-media { aspect-ratio: 10/7 !important; min-height: 0 !important; }
  .consult-media-art--call img { width: 64px !important; height: 64px !important; }
  .consult-media-chip { font-size: 9px !important; padding: 5px 10px !important; }
  .consult-body { padding: 18px 16px 16px !important; }
  .consult-card h3 { font-size: 22px !important; }
  .consult-price-amount { font-size: 32px !important; }
  .consult-quote { font-size: 15px !important; margin-top: 14px !important; }
  .consult-foot-price .consult-price-amount { font-size: 30px !important; }
  .consult-book { font-size: 11px !important; padding: 12px 10px !important; }
}
@media (max-width: 520px) {
  .consult-steps { grid-template-columns: 1fr !important; }
}

/* Schematics thumbnails — full image shown, no extra zoom */

/* ═══════════════════════════════════════════════════════════════
   MODERNISATION PASS — shop cards, partners ribbon, VMV, schematics
   tabs, asset images, mobile nav close, market spacing, booking modal
   ═══════════════════════════════════════════════════════════════ */

/* ---- MOBILE NAV: dedicated close button, no overlap ---- */
/* The close button lives in a normal flex header row with the logo, so it can
   never float over site content and is always a big tappable target. */
.mobile-nav {
  height: 100vh !important; /* fallback for browsers without dvh */
  height: 100dvh !important;
  background: #0f0f0f !important;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 26px 40px !important;
  overscroll-behavior: contain !important;
}
.mobile-nav-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 26px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(200,150,12,0.16) !important;
}
.mobile-nav-logo {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
}
.mobile-nav-close {
  position: static !important;
  flex-shrink: 0 !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(200,150,12,0.1) !important;
  border: 1px solid rgba(232,180,34,0.5) !important;
  border-radius: 50% !important;
  color: var(--gold-light) !important;
  font-size: 24px !important;
  line-height: 1 !important;
  padding: 0 !important;
  cursor: pointer !important;
  z-index: 5 !important;
  transition: background 0.2s ease, transform 0.2s ease !important;
}
.mobile-nav-close:hover { background: rgba(200,150,12,0.22) !important; transform: scale(1.06) !important; }
/* hide the morphing hamburger while the drawer is open — the drawer has its own close button */
.hamburger.open { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
/* keep the fixed nav/ticker clear of phone notches & status bars */
.ticker-wrap { top: calc(0px + env(safe-area-inset-top, 0px)) !important; }
nav { top: calc(30px + env(safe-area-inset-top, 0px)) !important; }
@media (max-width: 900px) {
  .hero { margin-top: calc(96px + env(safe-area-inset-top, 0px)) !important; height: calc(100svh - 96px - env(safe-area-inset-top, 0px)) !important; }
  .consult-modal .modal-close, .modal-close { top: calc(14px + env(safe-area-inset-top, 0px)) !important; }
}

/* ---- PARTNERS RIBBON: edge-to-edge, no side gutters ---- */
#partners { padding: 0 !important; }
.hero-partners-track-wrap { padding: 24px 0 28px !important; }
.hp-logo { min-width: 150px !important; padding: 0 40px !important; }
.hp-logo img { height: 36px !important; max-width: 100px !important; }

/* ---- VMV: tighter paragraphs ---- */
.vmv-card { padding: 46px 34px !important; }
.vmv-card h3 { font-size: 27px !important; margin-bottom: 14px !important; }
.vmv-card p { font-size: 12.5px !important; line-height: 1.62 !important; color: rgba(245,242,236,0.58) !important; }
.vmv-values-list li { font-size: 11.5px !important; line-height: 1.58 !important; color: rgba(245,242,236,0.62) !important; }

/* ---- SCHEMATICS: asset images fill the card (zoom in, no blank sides) ---- */
.sch-thumb img { object-fit: cover !important; transform: scale(1.06) !important; transition: filter 0.35s ease, transform 0.45s ease !important; }
.sch-item:hover .sch-thumb img { transform: scale(1.13) !important; }

/* ---- SCHEMATICS TABS: 2x2 grid on mobile (nothing cut off, no hidden scroll) ---- */
@media (max-width: 900px) {
  .schematics-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
    white-space: normal !important;
    border-bottom: none !important;
    margin-bottom: 26px !important;
    padding-bottom: 0 !important;
  }
  .sch-tab {
    width: 100% !important;
    padding: 13px 10px !important;
    text-align: center !important;
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
    white-space: normal !important;
    border: 1px solid rgba(200,150,12,0.2) !important;
    border-bottom: 2px solid rgba(200,150,12,0.2) !important;
    border-radius: 8px !important;
    background: rgba(200,150,12,0.04) !important;
  }
  .sch-tab.active {
    color: var(--gold) !important;
    border-color: var(--gold) !important;
    border-bottom-color: var(--gold) !important;
    background: rgba(200,150,12,0.1) !important;
  }
}

/* ---- SHOP: breathing room between chart and products ---- */
.market-panel { margin-bottom: 36px !important; }

/* ---- SHOP CARDS: compact horizontal rectangles (image left, price & desc right) ---- */
.shop-grid {
  grid-template-columns: 1fr !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  gap: 14px !important;
  margin-top: 0 !important;
}
.shop-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 14px 18px !important;
  border-radius: 16px !important;
  /* commodities: frosted glass — translucent pane, white frost border with a
     soft gold glint, inner top highlight (distinct from the bookings frame) */
  border: 1px solid transparent !important;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015)) padding-box,
    linear-gradient(160deg, rgba(255,255,255,0.28), rgba(255,255,255,0.05) 45%, rgba(232,180,34,0.3)) border-box !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.09) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
  transform-origin: center !important;
}
.shop-item:hover {
  background:
    linear-gradient(160deg, rgba(255,255,255,0.085), rgba(255,255,255,0.03)) padding-box,
    linear-gradient(160deg, rgba(255,255,255,0.4), rgba(255,255,255,0.08) 45%, rgba(232,180,34,0.5)) border-box !important;
  box-shadow: 0 22px 48px rgba(0,0,0,0.45), 0 0 34px rgba(232,180,34,0.16) !important;
  transform: translateY(-2px) !important;
  animation: shopBounce 0.75s cubic-bezier(0.28, 1.4, 0.5, 1) !important;
}
@keyframes shopBounce {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-10px) scale(1.015); }
  55%  { transform: translateY(0) scale(1); }
  72%  { transform: translateY(-5px) scale(1.008); }
  86%  { transform: translateY(0) scale(1); }
  100% { transform: translateY(0) scale(1); }
}
.shop-thumb {
  position: relative !important;
  flex: 0 0 150px !important;
  width: 150px !important;
  height: 118px !important;
  aspect-ratio: auto !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* soft gold glow behind the cut-out product images */
.shop-thumb::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 50% 50%, rgba(232,180,34,0.38) 0%, rgba(232,180,34,0.13) 50%, transparent 72%) !important;
  animation: shopGlowPulse 2.8s ease-in-out infinite !important;
}
@keyframes shopGlowPulse {
  0%, 100% { opacity: 0.7; transform: scale(0.96); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
.shop-thumb img {
  position: relative !important;
  z-index: 1 !important;
  width: auto !important;
  height: 80% !important;
  max-width: 88% !important;
  object-fit: contain !important;
  padding: 0 !important;
  filter: brightness(1.06) drop-shadow(0 10px 18px rgba(232,180,34,0.32)) !important;
  transition: transform 0.35s cubic-bezier(0.28, 1.4, 0.5, 1) !important;
}
.shop-item:hover .shop-thumb img { transform: scale(1.1) !important; }
.shop-body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.shop-item h4 { font-size: 21px !important; margin-bottom: 4px !important; }
.shop-item p.desc {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: rgba(245,242,236,0.6) !important;
  margin-bottom: 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.shop-market {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px 8px !important;
  padding-top: 8px !important;
  margin-top: 6px !important;
  border-top: 1px solid rgba(245,242,236,0.06) !important;
  font-size: 10px !important;
}
.shop-side {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 0 !important;
  margin-top: 0 !important;
  border: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 12px !important;
}
.shop-price { align-items: flex-end !important; }
.shop-price .retail { font-size: 20px !important; padding: 5px 11px !important; }
.shop-price .per { margin-top: 6px !important; font-size: 9px !important; white-space: normal !important; line-height: 1.4 !important; }
.shop-add {
  width: auto !important;
  justify-content: center !important;
  padding: 10px 18px !important;
  border-radius: 9px !important;
  font-size: 11.5px !important;
  letter-spacing: 0.14em !important;
}

/* ---- SHOP: mobile — compact two-row card (image+text on top, price+buy below) ---- */
@media (max-width: 900px) {
  #shop { width: 100% !important; max-width: 100% !important; padding: 48px 20px !important; box-sizing: border-box !important; }
  .shop-grid {
    max-width: 100% !important;
    gap: 12px !important;
  }
  .shop-item {
    flex-wrap: wrap !important;
    gap: 10px 12px !important;
    padding: 12px 14px !important;
  }
  .shop-thumb { flex: 0 0 84px !important; width: 84px !important; height: 76px !important; }
  .shop-body { flex: 1 1 0 !important; min-width: 0 !important; }
  .shop-item h4 { font-size: 17px !important; margin-bottom: 2px !important; }
  .shop-item p.desc { font-size: 12px !important; -webkit-line-clamp: 1 !important; margin-bottom: 0 !important; }
  .shop-market { display: none !important; }
  .shop-side {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(245,242,236,0.07) !important;
  }
  .shop-price { align-items: flex-start !important; }
  .shop-price .retail { font-size: 14px !important; padding: 4px 10px !important; }
  .shop-price .per { display: none !important; }
  .shop-add { min-width: 0 !important; padding: 9px 16px !important; font-size: 11.5px !important; }
}
@media (max-width: 420px) {
  .shop-item { padding: 10px 12px !important; }
  .shop-thumb { flex: 0 0 74px !important; width: 74px !important; height: 68px !important; }
  .shop-item h4 { font-size: 15.5px !important; }
  .shop-price .retail { font-size: 12.5px !important; padding: 3px 8px !important; }
}

/* ---- BOOKING MODAL: modern luxury ---- */
.consult-modal {
  max-width: 660px !important;
  border-radius: 22px !important;
  background: linear-gradient(165deg, #16130F 0%, #0E0D0B 100%) !important;
  box-shadow: 0 40px 120px rgba(0,0,0,0.72), 0 0 0 1px rgba(232,180,34,0.12) !important;
}
.consult-modal .modal-close {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  font-size: 20px !important;
}
/* Close buttons stay pinned to the top of their scrollable modal box instead
   of scrolling away with the form content (mobile fix — no more overlapping ×). */
.consult-modal .modal-close,
.modal-box .modal-close,
.ops-modal-close {
  position: sticky !important;
  top: calc(14px + env(safe-area-inset-top, 0px)) !important;
  right: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: 14px !important;
  margin-bottom: 10px !important;
  flex-shrink: 0 !important;
  z-index: 30 !important;
  background: rgba(13,12,10,0.96) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45) !important;
}
.bk-engage-tag {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  padding: 12px 16px !important;
  margin-bottom: 22px !important;
  border: 1px solid rgba(232,180,34,0.3) !important;
  border-left: 3px solid var(--gold) !important;
  border-radius: 10px !important;
  background: linear-gradient(120deg, rgba(200,150,12,0.12), rgba(255,255,255,0.02)) !important;
}
.bk-engage-tag-label {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  border: 1px solid rgba(232,180,34,0.35) !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
}
.bk-engage-tag b {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 16.5px !important;
  font-weight: 600 !important;
  color: var(--white) !important;
}
.bk-engage-tag-price {
  margin-left: auto !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--gold-light) !important;
  white-space: nowrap !important;
}
.bk-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 10px !important;
}
.bk-section-head .bk-field-label { margin-bottom: 0 !important; }
.bk-guest-count {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(245,242,236,0.55) !important;
  border: 1px solid rgba(232,180,34,0.3) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  background: rgba(200,150,12,0.08) !important;
}
.bk-guest-sub { font-size: 12.5px !important; line-height: 1.6 !important; color: rgba(245,242,236,0.55) !important; margin: 0 0 14px !important; }
.bk-guest-list { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-bottom: 12px !important; }
.bk-guest {
  border: 1px solid rgba(232,180,34,0.18) !important;
  border-radius: 12px !important;
  background: linear-gradient(160deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)) !important;
  padding: 14px 16px 16px !important;
}
.bk-guest-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin-bottom: 10px !important; }
.bk-guest-num { display: flex !important; align-items: center !important; gap: 10px !important; }
.bk-guest-num b { font-family: 'Cormorant Garamond', serif !important; font-size: 15px !important; font-weight: 600 !important; color: var(--gold-light) !important; }
.bk-guest-lead {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(245,242,236,0.45) !important;
  border: 1px solid rgba(245,242,236,0.12) !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
}
.bk-guest-remove {
  background: none !important;
  border: none !important;
  color: #ff8a8a !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  padding: 4px 6px !important;
}
.bk-guest-remove:hover { text-decoration: underline !important; }
.bk-guest-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
.bk-add-guest {
  width: 100% !important;
  padding: 12px !important;
  background: transparent !important;
  border: 1px dashed rgba(232,180,34,0.45) !important;
  border-radius: 10px !important;
  color: var(--gold-light) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
}
.bk-add-guest:hover { background: rgba(200,150,12,0.08) !important; border-color: var(--gold) !important; }
.bk-add-guest:disabled { opacity: 0.4 !important; cursor: not-allowed !important; }
.bk-field select {
  font-family: 'Manrope', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--white) !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(245,216,122,0.16) !important;
  border-radius: 8px !important;
  padding: 11px 34px 11px 13px !important;
  outline: none !important;
  transition: border-color 0.2s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%) !important;
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  cursor: pointer !important;
}
.bk-field select:focus { border-color: var(--gold) !important; }
.bk-field select option { background: #16130F !important; color: var(--white) !important; }
.bk-includes-wrap {
  margin-bottom: 20px !important;
  border: 1px solid rgba(232,180,34,0.16) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.02) !important;
  overflow: hidden !important;
}
.bk-includes-wrap summary {
  cursor: pointer !important;
  padding: 12px 14px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--gold-light) !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.bk-includes-wrap summary::-webkit-details-marker { display: none !important; }
.bk-includes-wrap summary::after { content: '+' !important; margin-left: auto !important; font-size: 16px !important; color: var(--gold) !important; transition: transform 0.2s ease !important; }
.bk-includes-wrap[open] summary::after { transform: rotate(45deg) !important; }
.bk-includes-wrap .bk-includes { padding: 0 14px 14px !important; }
.bk-field input, .bk-field textarea { border-radius: 8px !important; }
.bk-field input:focus, .bk-field textarea:focus, .bk-field select:focus { box-shadow: 0 0 0 3px rgba(232,180,34,0.12) !important; }
.bk-pill { border-radius: 999px !important; padding: 9px 18px !important; border-color: rgba(232,180,34,0.25) !important; }
.bk-pill.active { background: var(--gold) !important; color: var(--black) !important; border-color: var(--gold) !important; }
.bk-title { font-size: 24px !important; margin-bottom: 6px !important; }
.bk-tax-note { border-radius: 8px !important; }
.bk-nav .btn-primary, .bk-nav .btn-outline { border-radius: 10px !important; }

/* ---- CONSULT CARDS: tax invoice business badge ---- */
.consult-tax-note {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 10px 0 0 !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: rgba(245,216,122,0.85) !important;
  background: linear-gradient(90deg, rgba(200,150,12,0.14), rgba(200,150,12,0.03)) !important;
  border: 1px solid rgba(232,180,34,0.3) !important;
  border-left: 3px solid var(--gold) !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
}
.consult-tax-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
  color: var(--black) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}
@media (max-width: 560px) {
  .bk-guest-grid { grid-template-columns: 1fr !important; }
  .bk-engage-tag-price { margin-left: 0 !important; width: 100% !important; }
}

/* ============================================================
   CINEMATIC REDESIGN — scroll-driven jet flight, scaling words,
   parallax gallery, card reveals, hero zoom (Jesko-style)
   ============================================================ */

/* NOTE: NO scroll-behavior: smooth on <html>. CSS smooth scrolling makes
   every wheel tick glide through an animation, which reads as input lag and
   janky wheel scrolling on desktop. Anchor links get their smoothness from a
   small JS handler instead, so wheel scrolling stays direct and buttery. */

/* ---- reveal-on-scroll system (activated by JS: html.hm-reveal) ---- */
html.hm-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(72px) scale(0.97);
  filter: blur(14px);
  transition:
    opacity 1.1s cubic-bezier(0.76, 0, 0.24, 1),
    transform 1.1s cubic-bezier(0.76, 0, 0.24, 1),
    filter 1.1s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: transform, opacity, filter;
}
html.hm-reveal [data-reveal].is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: none;          /* release the filter context once revealed */
  will-change: auto;     /* release the layer — the transition has ended */
}
/* Mobile: the blur is the expensive part of the reveal — the slide + fade
   stay identical, but without the per-frame blur repaint phones glide. */
@media (max-width: 860px) {
  html.hm-reveal [data-reveal] {
    filter: none;
    transition:
      opacity 0.9s cubic-bezier(0.76, 0, 0.24, 1),
      transform 0.9s cubic-bezier(0.76, 0, 0.24, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: transform, opacity;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.hm-reveal [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ---- jesko-style masked word reveals ----
   Each word of a heading hides behind its own mask and slides up into place
   with a cascade as the heading enters the viewport — the signature text
   animation from jeskojets.com. Scoped under html.hm-reveal so words stay
   visible if JS ever fails to run. */
html.hm-reveal .mask-reveal .mr-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
html.hm-reveal .mask-reveal .mr-wi {
  display: inline-block;
  transform: translateY(118%);
  transition: transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--mr-i, 0) * 60ms);
  will-change: transform;
}
html.hm-reveal .mask-reveal.is-in .mr-wi {
  transform: translateY(0);
  will-change: auto;   /* release after the cascade completes */
}
@media (prefers-reduced-motion: reduce) {
  html.hm-reveal .mask-reveal .mr-wi {
    transform: none !important;
    transition: none !important;
  }
}

/* ---- jesko-style line-mask reveals: paragraphs reveal LINE BY LINE, each
        line sliding up from behind its own mask with a cascade ---- */
html.hm-reveal [data-lines] .ll-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
html.hm-reveal [data-lines] .ll-inner {
  display: block;
  transform: translateY(120%);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--ll-i, 0) * 90ms);
  will-change: transform;
}
html.hm-reveal [data-lines].is-in .ll-inner {
  transform: translateY(0);
  will-change: auto;   /* release after the cascade completes */
}

/* ---- jesko-style letter cascades: small labels tick in letter by letter ---- */
html.hm-reveal [data-letters] .lt {
  display: inline-block;
  transform: translateY(0.7em);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
  transition-delay: calc(var(--lt-i, 0) * 30ms);
  will-change: transform, opacity;
}
html.hm-reveal [data-letters].is-in .lt {
  transform: translateY(0);
  opacity: 1;
  will-change: auto;   /* release after the letter ticks finish */
}
@media (prefers-reduced-motion: reduce) {
  html.hm-reveal [data-lines] .ll-inner,
  html.hm-reveal [data-letters] .lt {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ---- HERO: pinned stage — the words sink slowly out of the bottom edge of the screen ---- */
.hero-pin {
  position: relative;
  height: 200vh;   /* vh fallback for engines without svh (older in-app browsers) */
  height: calc(200svh);   /* svh only — any vh term resizes with the mobile URL bar and yanks the scroll */
}
.hero {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  margin-top: 0 !important;
  height: 100vh !important;   /* vh fallback for engines without svh (older in-app browsers) */
  height: 100svh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
@media (min-width: 861px) { .hero-bg { will-change: transform; } }
/* ---- TICKER + TOP NAV: hidden until the hero has fully scrolled past ---- */
.ticker-wrap {
  transform: translateY(-102%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
nav {
  transform: translateY(-140%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* the partners band is its own section right after the hero pin — a clear,
   full-width sliding logo strip the user cannot miss */
.hero-partners-banner {
  padding: clamp(26px, 4vw, 44px) 0;
}
.hero-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ---- CONSULT: the jet + booking cards rise together as ONE pulled unit ---- */
.consult-lift {
  position: relative;
  will-change: transform, opacity;
}
.consult-pull {
  position: relative;
  z-index: 2;
}
.consult-jet {
  /* THE one jet: fixed to the bottom edge of the SCREEN, it flies the whole
     sequence — bursts out of the flight stage HUGE, shrinks to land, then
     pulls the booking section up and flies off. One plane, one element. */
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 40;               /* ABOVE the wind-trail canvas (z-25) — the plane flies over the wind */
  width: 88vw;   /* vw fallback for engines without min() (older in-app browsers) */
  width: min(88vw, 880px);   /* a BIG jet — Jesko presence on screen */
  transform: translateX(-50%) translateY(115vh);   /* vh fallback for engines without svh */
  transform: translateX(-50%) translateY(115svh);
  pointer-events: none;
  will-change: transform, opacity;
}
.consult-jet::after {  /* tight engine heat at the tail — a small, dim core,
     not a glow effect; just enough to hint the engines are live */
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: 36px;
  height: 12px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255,242,190,0.4), rgba(232,180,34,0.12) 55%, transparent 78%);
  border-radius: 50%;
  animation: jetFlame 0.8s ease-in-out infinite;
  z-index: 2;
}
@keyframes jetFlame {
  0%, 100% { opacity: 0.35; transform: translateX(-50%) scaleY(0.85); }
  50%      { opacity: 0.55; transform: translateX(-50%) scaleY(1.15); }
}
.consult-jet img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  /* realistic: no gold halo or rim glow — just a light contact shadow so the
     dark jet reads off the night sky without looking fake-lit */
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.35));
}
/* THE DIAMOND — the SAME SIZE as the jet (identical width rules), because it
   is the same shape: during the morph the jet dissolves from the top and the
   diamond is revealed exactly beneath its silhouette, so it must overlay the
   plane pixel-for-pixel. It is FIXED and scrubbed by the journey: it rides the
   jet's exact pose through the dissolve, then drifts down with the title and
   shrinks into the divider slot inside Arakel's card. No frame, no background
   — just the transparent image. The in-flow divider lives inside the host
   card at opacity 0 and fades in EXACTLY under the flying diamond as it
   lands, so the diamond keeps flowing with the page at 1:1 — no pop. */
.consult-diamond {
  position: fixed;
  left: 50%;
  bottom: 0;                 /* SAME anchor as .consult-jet — the morph pose is a
                                shared translateY, so the overlay must sit on the
                                same bottom-anchored box to land pixel-for-pixel */
  z-index: 39;               /* UNDER the jet (40) — the jet dissolves revealing it */
  width: 88vw;   /* vw fallback for engines without min() */
  width: min(88vw, 880px);   /* identical to .consult-jet — the morph must overlay */
  transform: translateX(-50%) translateY(110vh);   /* vh fallback for engines without svh */
  transform: translateX(-50%) translateY(110svh);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.consult-diamond img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 860px) {
  .consult-diamond { width: 118vw; width: min(118vw, 620px); }   /* same as the jet on phones */
}
.consult-diamond-divider {
  /* the divider shows the diamond at its FULL (jet) size — the element is a
     narrow overflow-hidden column, and the image inside is jet-sized and
     centred, so the visible diamond streak scales exactly as it does during
     the flight (no shrink). Its height is set live by the journey script to
     match the flying diamond's element height, so the landing is a perfect
     swap. */
  position: relative;
  flex-shrink: 0;
  width: clamp(60px, 7.5vw, 90px);
  overflow: hidden;
  opacity: 0;                /* the journey fades it in as the flying diamond lands */
  will-change: opacity;
}
.consult-diamond-divider img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88vw;   /* vw fallback for engines without min() */
  width: min(88vw, 880px);   /* the SAME size as the jet — the visible diamond
                                inside the frame scales with it, so the divider
                                keeps the diamond at its normal size */
  height: auto;
  max-width: none;           /* the global img { max-width: 100% } would clamp
                                it to the 60px column — the image must stay
                                jet-sized to keep the diamond at full scale */
  transform: translate(-50%, -50%);
  display: block;
}
@media (max-width: 860px) {
  .consult-diamond-divider img { width: 118vw; width: min(118vw, 620px); }   /* same as the jet on phones */
}
@media (max-width: 480px) {
  .consult-diamond-divider { width: 60px; }
}
@media (max-width: 860px) {
  /* wider than before so the jet plane itself fills the phone screen at the
     big start: the sprite's transparent margins absorb the overflow, and the
     visible jet (bbox ~70% of width) stays on-screen even at peak scale */
  .consult-jet { width: 118vw; width: min(118vw, 620px); }
  /* drop-shadow on the huge sprite is re-rasterised every flight frame on
     phones — the shadow is a whisper, so it goes away with zero visual cost */
  .consult-jet img { filter: none; }
}

/* ---- HERO: designed parallax words (OIL & MINING / HAMOODLEY / FROM THE EARTH) ---- */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.hero-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding: 0 clamp(16px, 5vw, 60px) !important;
  pointer-events: auto;
}
.hero-ct {
  position: relative;
  width: 100%;
  min-height: 62svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  perspective: 900px;
}
.ct-ghost {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 0;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  /* OIL sits on its own line, MINING below it — sized so each line fits
     the screen instead of getting clipped at the edges. Deliberately
     restrained on desktop (the hero should feel cinematic, not cramped —
     phones keep their own larger 20vw sizing below) */
  font-size: clamp(46px, 6.2vw, 108px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(232,180,34,0.42);
  paint-order: stroke fill;
  filter: drop-shadow(0 0 12px rgba(232,180,34,0.2)) drop-shadow(0 0 34px rgba(232,180,34,0.1));
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
  /* -50% centers the ghost lines on the hero; the & sits between OIL and MINING */
  transform: translateY(-50%);
}
.ct-amp {
  display: block;
  font-size: 0.45em;
  line-height: 1;
  text-align: center;
  margin: 0.02em 0;
  opacity: 0;
  /* LIQUID GOLD FILL — the hollow letters fill from the bottom up as you
     scroll (background-size 100% X% scrubbed by the hero tween), and the
     surface is a row of bright radial bumps riding the gradient's top edge so
     the fill reads as MOVING LIQUID, not a flat block. The slow churn
     (hmLiquidChurn below) sloshes the bumps sideways, so the liquid is alive
     while it fills. Each layer is deliberately tiny (4-5 radial-gradients +
     one linear) so the per-frame paint stays cheap on phones. */
  background-image:
    radial-gradient(circle at 7% 3%, rgba(255,242,196,0.95) 0%, rgba(255,242,196,0) 3.2%),
    radial-gradient(circle at 24% 2%, rgba(255,242,196,0.85) 0%, rgba(255,242,196,0) 3.8%),
    radial-gradient(circle at 42% 5%, rgba(255,242,196,0.9) 0%, rgba(255,242,196,0) 3%),
    radial-gradient(circle at 61% 2%, rgba(255,242,196,0.85) 0%, rgba(255,242,196,0) 4%),
    radial-gradient(circle at 80% 4%, rgba(255,242,196,0.95) 0%, rgba(255,242,196,0) 3.4%),
    radial-gradient(circle at 95% 3%, rgba(255,242,196,0.85) 0%, rgba(255,242,196,0) 3.8%),
    linear-gradient(to top, #8f6f1d 0%, #b98c1e 28%, #e0ab24 52%, #f2d373 74%, #fdeec2 90%, #f7e39a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 100% 0%;
  background-position: 50% 100%;
  background-repeat: no-repeat;
  /* the liquid surface sloshes gently — a slow, subtle sideways churn of the
     wave bumps. Kept small and slow so the repaint cost stays negligible. */
  animation: hmLiquidChurn 4.5s ease-in-out infinite;
}
.ct-ghost-word {
  display: block;
  /* gold gradient fill on each word (container-level background-clip: text does
     not reliably render once the words are split into transformed spans) */
  background-image:
    radial-gradient(circle at 7% 3%, rgba(255,242,196,0.95) 0%, rgba(255,242,196,0) 3.2%),
    radial-gradient(circle at 24% 2%, rgba(255,242,196,0.85) 0%, rgba(255,242,196,0) 3.8%),
    radial-gradient(circle at 42% 5%, rgba(255,242,196,0.9) 0%, rgba(255,242,196,0) 3%),
    radial-gradient(circle at 61% 2%, rgba(255,242,196,0.85) 0%, rgba(255,242,196,0) 4%),
    radial-gradient(circle at 80% 4%, rgba(255,242,196,0.95) 0%, rgba(255,242,196,0) 3.4%),
    radial-gradient(circle at 95% 3%, rgba(255,242,196,0.85) 0%, rgba(255,242,196,0) 3.8%),
    linear-gradient(to top, #8f6f1d 0%, #b98c1e 28%, #e0ab24 52%, #f2d373 74%, #fdeec2 90%, #f7e39a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 100% 0%;
  background-position: 50% 100%;
  background-repeat: no-repeat;
  animation: hmLiquidChurn 4.5s ease-in-out infinite;
}
/* the liquid churn — the fill's surface BOBS gently up and down (the vertical
   % position is visible while the layer is shorter than the element, so the
   wave edge rises and falls like a tank of liquid). Used by the JS-fallback
   path; the compositor path samples the same bob into the scroll keyframes. */
@keyframes hmLiquidChurn {
  0%   { background-position: 50% 100%; }
  50%  { background-position: 50% 92%; }
  100% { background-position: 50% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-ghost-word, .ct-amp { animation: none; }
}
/* words wait off-screen (clipped at the hero's edges) until the loader finishes */
.ct-ghost-oil {
  transform: translateX(-110vw);
}
.ct-ghost-mining {
  transform: translateX(110vw);
}
@media (prefers-reduced-motion: reduce) {
  .ct-ghost-oil, .ct-ghost-mining { transform: none; }
  .ct-amp { opacity: 1; }
}
.ct-caret {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 0.35em;
  background: #f5d87a;
  vertical-align: -0.08em;
  animation: ctCaretBlink 0.9s steps(2, start) infinite;
}
.ct-caret.ct-caret-done {
  animation: none;
  opacity: 0;
}
@keyframes ctCaretBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.ct-main {
  /* heavy luxury wordmark — Abril Fatface is a fat display serif with thick,
     uniform strokes: nothing thin to get lost and no high-contrast hairlines,
     so it stays razor sharp and solid on mobile. No filter drop-shadow (that
     was the blur on phones) — just a clean white fill, a whisper-thin outline
     and a soft dark shadow for legibility over the video. */
  font-family: 'Abril Fatface', serif;
  font-weight: 400;
  /* balanced across devices: modest on laptops, capped on huge monitors
     (the scroll tween adds up to a 1.22x growth on desktop, so the CSS size
     deliberately leaves headroom) */
  font-size: clamp(32px, 5.4vw, 88px);
  line-height: 1.0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #ffffff;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);
  paint-order: fill stroke;
  text-shadow: 0 6px 26px rgba(0, 0, 0, 0.5), 0 0 40px rgba(232, 180, 34, 0.18);
  position: relative;
  z-index: 2;
  will-change: transform, opacity;
  transform-origin: 50% 50%;
  user-select: none;
  /* default state: hidden below the fold until the scroll animation reveals it —
     so a browser restoring the scroll position can never show it at page load */
  transform: translateY(112vh) rotateX(-34deg) scale(0.9);   /* vh fallback for engines without svh */
  transform: translateY(112svh) rotateX(-34deg) scale(0.9);
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ct-main { transform: none; opacity: 1; }
}
.ct-sub {
  /* pinned near the bottom edge of the hero, clear of the OIL & MINING layer */
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 5svh, 42px);
  z-index: 1;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: clamp(13px, 2vw, 20px);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(245,242,236,0.55);
  text-align: center;
  margin-top: 0;
  will-change: transform, opacity;
}
@media (max-width: 860px) {
  .ct-main { font-size: clamp(34px, 12vw, 104px); white-space: nowrap; letter-spacing: 0; -webkit-text-stroke: 0.8px rgba(0, 0, 0, 0.7); }
  .ct-ghost { font-size: clamp(84px, 20vw, 150px); -webkit-text-stroke: 1.5px rgba(232,180,34,0.4); }
  .ct-sub { letter-spacing: 0.28em; }
}

/* ---- HERO LOGOS: department + company logo lockup. Hidden until HAMOODLEY has
     risen above the OIL & MINING text (once-only, scroll-triggered in the hero
     tween), then revealed with a cinematic staggered entrance — the two marks
     stand side by side, generously spaced, with a gold hairline between them,
     rising and sharpening out of a soft blur. Absolute so it never pushes the
     hero layout around short viewports; it floats in the clear band between the
     settled wordmark (top quarter) and the subtitle (bottom edge). ---- */
.hero-logos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(64px, 11svh, 110px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3.4vw, 48px);
  pointer-events: none;
  user-select: none;
}
.hero-logo {
  display: flex;
  align-items: center;
}
.hero-logo img {
  height: clamp(34px, 4.6vw, 56px);
  width: auto;
  object-fit: contain;
  opacity: 0.95;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}
.hero-logo-divider {
  width: 1px;
  height: clamp(26px, 3.4vw, 42px);
  background: linear-gradient(180deg, transparent, rgba(232, 180, 34, 0.7), transparent);
  box-shadow: 0 0 14px rgba(232, 180, 34, 0.35);
}
/* entrance state: off-screen rise + blur + hidden, so it is never visible
   before the scroll trigger lands */
.hero-logos .hero-logo,
.hero-logos .hero-logo-divider {
  opacity: 0;
  transform: translateY(34px);
  filter: blur(9px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, filter;
}
.hero-logos .hero-logo-divider {
  transform: translateY(34px) scaleY(0.35);
  transition-duration: 0.8s;
}
/* revealed: the department mark leads, the gold hairline draws up mid-beat,
   the company mark follows — one smooth three-beat cinematic entrance */
.hero-logos.hero-logos-on .hero-logo,
.hero-logos.hero-logos-on .hero-logo-divider {
  opacity: 1;
  transform: translateY(0) scaleY(1);
  filter: none;
  will-change: auto;   /* entrance done — release the layer */
}
.hero-logos.hero-logos-on .hero-logo-dept      { transition-delay: 0.05s; }
.hero-logos.hero-logos-on .hero-logo-divider   { transition-delay: 0.22s; }
.hero-logos.hero-logos-on .hero-logo-company   { transition-delay: 0.39s; }
@media (max-width: 480px) {
  .hero-logos { gap: 26px; }
  .hero-logo img { height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logos .hero-logo,
  .hero-logos .hero-logo-divider {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ---- ABOUT: pinned cinematic stage — you scroll but stay in the same position
        (the section holds the screen) while the text rises OUT of the bottom edge
        and the gold bar pops out beside the image, both scrubbed by your scroll ---- */
.about-pin {
  position: relative;
  height: calc(100vh + 85vh);   /* vh fallback for engines without svh */
  height: calc(100svh + 85svh);   /* svh only — a vh term resizes with the URL bar mid-scroll and throws you; long, deliberate hold — the gold-bar pop,
                                     sweep, text pull and settle now play out over
                                     ~85vh of scroll so the user stays in full
                                     control (the old ~30vh made it whip through);
                                     the bar then holds its resting pose while the
                                     jet reveal hands over */
}
#about {
  position: sticky !important;
  top: 0 !important;
  z-index: 5;
  display: block !important;
  height: 100vh !important;   /* vh fallback for engines without svh (older in-app browsers) */
  height: 100svh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  perspective: 1200px;
  /* black core with a professional gradient blend at the bottom edge, so the
     section dissolves into the jet journey instead of a hard seam line the
     jet has to fly under */
  background: linear-gradient(180deg, #0A0A0A 0%, #0A0A0A 78%, rgba(5,6,8,0) 100%);
}
/* Desktop-only: dissolve the whole stage (photo bottom edge included) into the
   jet journey below so there is NO hard seam line after the section. The photo
   paints over the section background, so a background-only fade can't hide its
   bottom edge — this overlay sits above everything and fades to the page's own
   canvas colour (#bg-canvas ≈ #050504), matching what the journey reveals. */
@media (min-width: 901px) {
  #about::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34%;
    z-index: 6;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(5,6,8,0) 0%, rgba(5,6,8,0.55) 45%, rgba(6,7,8,0.92) 80%, #0b0a06 100%);
  }
}
.about-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  padding: clamp(24px, 4vw, 70px) clamp(18px, 4vw, 60px);
}
.about-stage .about-img {
  position: relative;
  height: 100% !important;   /* fill the pinned screen — overrides the compact rules */
  min-height: 0;
  overflow: hidden;
  background: #111;   /* brand-dark placeholder so the frame never looks blank while the photo streams */
}
.about-stage .about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.8) saturate(0.9);
}
.about-text {
  position: relative;
  z-index: 3;
  max-width: 560px;
  will-change: transform, opacity;
  /* resting spot is its grid cell; the JS slides it in from the RIGHT edge of
     the screen, trailing BEHIND the gold bar — clean motion, no blur */  }  .about-gold-bar {
    /* in FRONT of the text and resting INSIDE the column gap, level with the
       HEADING (top of the text block) — it stays on screen after the pull and
       touches neither the image nor the paragraph. The JS brings it in from
       the right edge first and it visibly PULLS the text behind it. */  position: absolute;
  left: 50%;
  top: 30%;
  z-index: 5;
    width: clamp(118px, 9.5vw, 170px);  /* a big luxury ingot beside the heading */
  transform: translate(-50%, -50%) rotateY(-45deg) scale(0.55);
  transform-origin: center;
  pointer-events: none;
  will-change: transform, opacity;
}
.about-gold-bar img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.6)) drop-shadow(0 0 36px rgba(232,180,34,0.38));
}
.about-gold-bar::before {  /* gold halo so the bar glows against the dark section */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 175%;
  height: 175%;
  background: radial-gradient(circle at 50% 50%, rgba(232,180,34,0.28), transparent 66%);
  border-radius: 50%;
  z-index: -1;
}
@media (max-width: 860px) {
  /* stack: image on top, text below — nothing can overlap and the text fits
     the pinned screen (compact sizing so the paragraph is never clipped) */
  #about {
    /* clear the fixed ticker + nav (~95px) at the top; no bottom padding so
       the photo + text fill the whole pinned screen */
    padding: 96px 0 0 0 !important;
  }
  .about-stage {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  .about-stage .about-img {
    height: 44svh !important;   /* a large, dominant photo on phones */
    flex: 0 0 44svh;
  }
  .about-text {
    padding: 34px 16px 14px 16px !important;  /* text spans the full width; the bar floats beside the heading */
  }
  .about-text .section-label { font-size: 9px !important; margin-bottom: 5px !important; }
  /* the heading is width-capped so its text ALWAYS wraps before the gold bar's
     zone — on every phone width the last line ends near x≈139, and the bar
     (anchored at left: 170px) can never touch it */
  .about-text .section-title { font-size: 23px !important; line-height: 1.15 !important; margin-bottom: 8px !important; max-width: 210px !important; padding-right: 24px !important; }
  .about-text .reveal-line { margin: 7px 0 !important; }
  .about-text .section-body { font-size: 13px !important; line-height: 1.6 !important; }
  .about-gold-bar {
    /* on phones the bar leads the text in from the right edge and settles
       BESIDE the heading — fixed spot that hugs the heading's wrapped right
       edge on every phone, touching neither the photo above nor the text */
    display: block;
    left: 170px;
    right: auto;
    top: calc(44svh + 61px);  /* center of the heading's first line */
    width: 76px;             /* a generous ingot beside the heading */
  }
  /* the two drop-shadows on the bar force a full re-raster of the sweeping
     sprite every scroll frame on a phone — the ::before halo provides the
     glow, and the dark shadow is invisible against the night section, so
     mobile drops the filters entirely (desktop keeps them) */
  .about-gold-bar img { filter: none; }
  .about-gold-bar::before { width: 140%; }  /* tighter halo — the glow can never reach the text */
  /* SHORT phone screens (small landscape phones / tiny viewports): the pinned
     screen has less room, so everything compacts — slightly smaller photo,
     trimmer bar and tighter text — so the paragraph is NEVER clipped at the
     bottom */
  @media (max-height: 560px) {
    #about { padding: 96px 0 0 0 !important; }
    .about-stage .about-img { height: 40svh !important; flex: 0 0 40svh; }
    .about-text { padding: 14px 14px 8px 14px !important; }
    .about-text .section-label { margin-bottom: 4px !important; }
    .about-text .section-title { font-size: 21px !important; line-height: 1.1 !important; margin-bottom: 6px !important; max-width: 190px !important; padding-right: 24px !important; }
    .about-text .reveal-line { margin: 6px 0 !important; }
    .about-text .section-body { font-size: 11.5px !important; line-height: 1.4 !important; }
    .about-gold-bar { left: 160px; right: auto; top: calc(40svh + 38px); width: 60px; }
    .about-gold-bar::before { width: 140%; }
  }
}

/* ---- ABOUT BADGE: a small animated gold sticker on the photo — much
        smaller than before so the photo stays visible, with a gentle sticker
        wobble + float and a glossy shine sweeping across it ---- */
.about-badge {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  padding: 10px 14px !important;
  border-radius: 9px !important;
  text-align: center !important;
  background: linear-gradient(135deg, #f5d87a, #c8960c 58%, #9f7408) !important;
  color: #1c1203 !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.4), 0 0 20px rgba(214,174,73,0.4) !important;
  overflow: hidden;                 /* keeps the shine sweep inside the sticker */
  transform-origin: 50% 85%;
  z-index: 2;
  animation: badgeSticker 5s ease-in-out infinite;
}
.about-badge::after {               /* glossy light sweeping across the sticker */
  content: '';
  position: absolute;
  top: 0;
  left: -90%;
  width: 55%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.55) 45%, transparent 72%);
  transform: skewX(-16deg);
  animation: badgeShine 5s ease-in-out infinite;
  pointer-events: none;
}
.about-badge strong {
  display: block !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}
.about-badge span {
  display: block !important;
  margin-top: 4px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 7px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
@keyframes badgeSticker {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-3px) rotate(1.8deg); }
}
@keyframes badgeShine {
  0%, 52% { left: -90%; }
  80%     { left: 135%; }
  100%    { left: 135%; }
}
@media (max-width: 860px) {
  .about-badge {
    top: 10px !important;
    right: 10px !important;
    padding: 7px 9px !important;
    max-width: 78px !important;   /* a compact sticker — the title wraps to two short lines */
    border-radius: 8px !important;
  }
  .about-badge strong { font-size: 12px !important; }
  .about-badge span { font-size: 6px !important; margin-top: 3px !important; letter-spacing: 0.1em !important; }
}
@media (max-width: 480px) {
  .about-badge { padding: 6px 8px !important; max-width: 74px !important; }
  .about-badge strong { font-size: 11.5px !important; }
}

/* ---- JET JOURNEY: one continuous flight — the jet bursts OUT of the bottom
        edge, flies huge through the sky, lands, then pulls the consultation
        section up and flies off the top (scrubbed by scroll, one plane) ---- */
.jet-journey {
  position: relative;
  /* MUST be above the ABOUT stage (z 5): the global body rule caps every
     direct body child at z-index 1, which trapped the whole journey — fixed
     jet included — BELOW the about section's black background, so the jet
     flew UNDER the seam between the sections. z-index 6 lifts the whole
     journey above it (nav is 999, so the chrome stays on top). */
  z-index: 6 !important;
}
.flight-pin {
  position: relative;
  /* height = the 100svh sticky flight stage PLUS the runway the jet flies
     along (the band of scroll the plane is scrubbed across). A longer runway
     spreads the whole cinematic flight over more scroll, so it tracks your
     scroll 1:1 instead of whipping past — the "ultra buttery" feel. The
     journey script sets the exact height from the live viewport; this is the
     no-JS fallback. */
  height: calc(100vh + 2400px);   /* vh fallback for engines without svh */
  height: calc(100svh + 2400px);
}
.flight {
  position: sticky !important;
  top: 0 !important;
  z-index: 5;
  height: 100vh !important;   /* vh fallback for engines without svh (older in-app browsers) */
  height: 100svh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  /* transparent on purpose: the site's own black-and-gold background canvas
     shows through, so the stage BLENDS with the page instead of appearing as
     an abrupt black screen — the starlight roof fades in on top of it as the
     jet rises from the very bottom edge */
  background: transparent;
}
.flight-bg {
  /* the Rolls-Royce starlight roof — FIXED to the screen: a soft vignette
     built from the SITE'S OWN colours (#050504 warm black + the brand gold)
     so the sky is the same tone as the page around it — the flight reads as
     ONE continuous piece, never a lighter "block" of empty space between
     sections. It gently deepens the top and the edges (so the gold stars
     pop) and keeps the centre showing the site's own black-and-gold canvas.
     The journey tween fades it in exactly as the jet rises from the very
     bottom edge and fades it back out as the jet departs. */
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform, opacity;
  opacity: 0;
  background:
    radial-gradient(120% 95% at 50% 0%, rgba(5,5,4,0.80), transparent 58%),
    radial-gradient(130% 110% at 50% 118%, rgba(214,174,73,0.12), transparent 60%),
    radial-gradient(150% 130% at 50% 50%, transparent 52%, rgba(5,5,4,0.50) 100%);
}
.flight-stars {
  position: absolute;   /* live inside the .flight stage, not a separate fixed layer */
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 12;       /* above the sky (z-5), below the wind (z-25) and jet (z-40) */
  opacity: 0;        /* the journey tween fades the stars on their own schedule */
  pointer-events: none;   /* full-viewport layer must never swallow taps on the page beneath */
  will-change: opacity;
}
.flight-clouds {
  /* soft gold-tinted cloud banks drifting at their own parallax speed — a
     second layer between the stars and the jet for real depth. FIXED to the
     screen (like the sky and stars): before the pin engages the flight
     section scrolls up in normal flow, and an absolute layer rode its bottom
     edge — a visible horizontal line where the clouds ended and the plain
     page began, sweeping up the screen (the "gap at the bottom"). Fixed, the
     cloud cover spans the whole viewport at every scroll position; its
     opacity is driven by the same deck fade as the sky, so it appears and
     vanishes exactly as before — no band, no seam. The banks reach all the
     way down to the bottom corners (three low banks at ~92–97%) so the cover
     melts into the page instead of dying out at the bottom edge. */
  position: absolute;
  inset: -12%;
  pointer-events: none;
  will-change: transform;
  opacity: 0;   /* journey tween fades it with the deck envelope */
  background:
    radial-gradient(36% 20% at 20% 66%, rgba(232,180,34,0.13), transparent 70%),
    radial-gradient(28% 16% at 74% 82%, rgba(255,230,160,0.11), transparent 70%),
    radial-gradient(42% 22% at 55% 26%, rgba(232,180,34,0.09), transparent 72%),
    radial-gradient(24% 14% at 88% 40%, rgba(255,240,190,0.08), transparent 70%),
    /* low banks — reach the bottom edge and both bottom corners so the sky
       melts into the page instead of showing a gap at the bottom */
    radial-gradient(34% 15% at 34% 92%, rgba(232,180,34,0.11), transparent 66%),
    radial-gradient(30% 13% at 76% 96%, rgba(255,230,160,0.09), transparent 64%),
    radial-gradient(26% 12% at 12% 94%, rgba(232,180,34,0.08), transparent 62%);
  filter: blur(6px);
}
.flight-glow {
  /* a soft gold horizon that rises from the very bottom edge — wider and a
     touch stronger than before so the sky's bottom melts into the page's own
     black-and-gold canvas instead of reading as a flat dark band. FIXED like
     the clouds: it must span the viewport even before the pin engages, or its
     bottom edge rides the flight section's edge and shows as a line. Opacity
     is driven by the same deck fade (0.556 × deck). */
  position: absolute;
  left: 50%;
  bottom: -12%;
  width: 100%;
  height: 48%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(232,180,34,0.17), transparent 66%);
  filter: blur(10px);
  pointer-events: none;
  opacity: 0;   /* journey tween drives it with the deck envelope */
}
@media (max-width: 860px) {
  /* a full-screen blur repaints every flight frame on phones — the gradient
     is already soft, so the glow reads the same without it */
  .flight-glow { filter: none; }
}
/* ---- IDLE PAUSE: when the tab is hidden or the window blurred (switching
   apps on a phone), the decorative infinite animations pause — they are
   invisible anyway, and this stops the GPU compositing them in the
   background, keeping the phone cooler and faster when you return. */
html.hm-idle .ticker-inner,
html.hm-idle .hero-partners-track,
html.hm-idle .consult-jet::after,
html.hm-idle .hero-bg,
html.hm-idle .ct-caret {
  animation-play-state: paused !important;
}
/* ---- GALLERY PARALLAX (blueprint untouched) ----
   The photos FLOAT and SWELL as they pass the centre of the screen. The
   gentle flat-2D motion (translateY bob + scale) is used on EVERY device —
   it is the exact animation approved on mobile; the old desktop 3D
   (rotateX/rotateY/translateZ pop) was too aggressive and has been dropped
   everywhere. */
.hq-collage { perspective: none; }
.hq-gallery-wrap {
  transform-style: flat;
  will-change: transform;
}
@media (max-width: 860px) {
  .hero-ct, #about { perspective: none; }
  .hq-gallery-wrap { transform-style: flat; }
}
/* no CSS transition on parallaxed elements: a transition restarted on every
   scroll tick makes the compositor lag and can blank the frame on real devices */
.hq-gallery-wrap,
.hq-gallery-wrap img { transition: none !important; }
/* the counter-drifting photo inside each wrap is written every scroll frame —
   promote it so those writes land on the compositor, never a repaint */
.hq-gallery-wrap img { will-change: transform; }
.hq-map-frame iframe { background: #14161a; }

/* PHONES: backdrop-filter forces expensive compositing on every device, and
   on a phone these surfaces are near-opaque dark gradients — the blur behind
   them is invisible. The nav is fixed and always on screen, so dropping its
   blur (and the cards' and drawer's) removes a constant mobile GPU cost with
   zero visual change. The modal overlay keeps its blur (a visible effect,
   only while open). */
@media (max-width: 900px) {
  nav,
  .consult-card,
  .mobile-nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (max-width: 860px) {
  /* same treatment as the glow: a full-screen blur(6px) layer re-rasterises
     on every flight frame on phones — it made the sky look blurry/glitchy
     while scrolling and starved the GPU (contributing to iOS reloads). The
     cloud banks are soft radial gradients, so they read the same without it. */
  .flight-clouds { filter: none; }
}

/* ---- CORPORATE ENQUIRY FORM — modern glass desk (homepage) ----
   The homepage loads only index.css, so the enquiry section used to fall
   back to the checkout form styles. This gives the section, the shell and
   the fields their own premium, professional treatment. */
.corporate-enquiries {
  position: relative;
  z-index: 1;
}
.corporate-enquiries::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 52% at 84% 18%, rgba(214,174,73,0.07), transparent 62%),
    radial-gradient(48% 44% at 6% 88%, rgba(214,174,73,0.05), transparent 60%);
  pointer-events: none;
}
.enquiry-shell {
  position: relative;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4.5vw, 64px);
  padding: clamp(30px, 5vw, 64px);
  border: 1px solid rgba(214,174,73,0.2);
  border-radius: 18px;
  background:
    radial-gradient(90% 70% at 88% 8%, rgba(214,174,73,0.07), transparent 55%),
    linear-gradient(160deg, rgba(20,18,12,0.92), rgba(8,8,7,0.94));
  box-shadow: 0 32px 90px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
}
.enquiry-shell::before {
  /* a hairline gold edge along the top of the desk */
  content: '';
  position: absolute;
  top: 0;
  left: 9%;
  right: 9%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214,174,73,0.55), transparent);
  pointer-events: none;
}
.enquiry-copy { align-self: center; }
.enquiry-copy .section-label { margin-bottom: 14px; }
.corporate-form {
  border: 1px solid rgba(214,174,73,0.14);
  border-radius: 14px;
  padding: clamp(22px, 3vw, 34px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 45%),
    rgba(0,0,0,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 50px rgba(0,0,0,0.3);
}
.corporate-form .form-grid { gap: 18px 16px; }
.corporate-form .form-grid label {
  gap: 9px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: rgba(214,174,73,0.72);
}
.corporate-form .form-grid label input,
.corporate-form .form-grid label select,
.corporate-form .form-grid label textarea {
  border: 1px solid rgba(214,174,73,0.22);
  border-radius: 9px;
  background: rgba(5,5,4,0.65);
  padding: 13px 15px;
  font: 14px/1.45 'Manrope', 'Inter', sans-serif;
  color: var(--white);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.corporate-form .form-grid label input::placeholder,
.corporate-form .form-grid label textarea::placeholder { color: rgba(245,242,236,0.3); }
.corporate-form .form-grid label input:focus,
.corporate-form .form-grid label select:focus,
.corporate-form .form-grid label textarea:focus {
  border-color: rgba(214,174,73,0.75);
  background: rgba(10,10,8,0.85);
  box-shadow: 0 0 0 4px rgba(214,174,73,0.12), 0 0 26px rgba(214,174,73,0.08);
}
.corporate-form .form-grid label select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d6ae49' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.corporate-form .form-grid label select:invalid { color: rgba(245,242,236,0.35); }
.corporate-form .form-submit {
  margin-top: 22px;
  position: relative;
  overflow: hidden;
}
.corporate-form .form-submit::after {
  /* a shine sweep that runs across the button on hover */
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.corporate-form .form-submit:hover::after { left: 130%; }
.form-message { font-size: 13px; line-height: 1.5; }
@media (max-width: 900px) {
  .enquiry-shell {
    grid-template-columns: 1fr;
    width: min(100% - 28px, 720px);
  }
}



/* ==== WHATSAPP GROUP FAB + APPLICATION MODAL ==== */
.wa-fab {
  /* compact pill, bottom-RIGHT; hidden until the top nav slides in (.wa-on) */
  position: fixed;
  right: 22px;
  left: auto;
  bottom: 22px;
  z-index: 9950;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px 8px 10px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  /* dulled (muted) green fill */
  background: linear-gradient(135deg, #2e7a48 0%, #14512f 100%);
  box-shadow: 0 8px 22px rgba(15, 90, 47, 0.40),
              0 0 16px rgba(124, 255, 176, 0.28),
              0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(24px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
/* constant neon "energy" ring: a soft arc that rotates around the pill */
@property --wa-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.wa-fab::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from var(--wa-angle),
    rgba(124, 255, 176, 0) 0deg,
    rgba(124, 255, 176, 0.95) 45deg,
    rgba(124, 255, 176, 0) 95deg,
    rgba(124, 255, 176, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: waRing 3.2s linear infinite;
  pointer-events: none;
}
@keyframes waRing { to { --wa-angle: 360deg; } }
.wa-fab.wa-on { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.wa-fab:hover { filter: brightness(1.08); transform: translateY(-2px); }
.wa-fab svg { flex-shrink: 0; }
.wa-fab-label { white-space: nowrap; }
@media (max-width: 480px) {
  .wa-fab { right: 10px; bottom: 10px; padding: 5px 10px 5px 7px; font-size: 9px; gap: 5px; }
  .wa-fab svg { width: 12px; height: 12px; }
  .wa-fab-label { white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: opacity 0.2s ease, transform 0.2s ease; }
}

.wa-overlay {
  position: fixed;
  inset: 0;
  z-index: 99996;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.wa-overlay.open { opacity: 1; visibility: visible; }
.wa-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 10, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.wa-modal {
  position: relative;
  width: min(100% - 8px, 640px);
  max-height: min(92vh, 780px);
  overflow-y: auto;
  background: linear-gradient(165deg, #14181b 0%, #0d1012 100%);
  border: 1px solid rgba(232, 180, 34, 0.28);
  border-radius: 16px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(245, 242, 236, 0.04) inset;
  padding: 30px 30px 26px;
  transform: translateY(26px) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.wa-overlay.open .wa-modal { transform: translateY(0) scale(1); }
.wa-modal::-webkit-scrollbar { width: 8px; }
.wa-modal::-webkit-scrollbar-thumb { background: rgba(232, 180, 34, 0.3); border-radius: 8px; }
.wa-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: rgba(245, 242, 236, 0.55);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.wa-close:hover { color: var(--gold-light); }
.wa-head { text-align: center; margin-bottom: 18px; }
.wa-logo {
  display: block;
  height: 54px;
  width: auto;
  object-fit: contain;
  margin: 0 auto 10px;
  filter: drop-shadow(0 4px 18px rgba(232, 180, 34, 0.25));
}
.wa-eyebrow {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(232, 180, 34, 0.35);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 12px;
}
.wa-head h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 600;
  color: var(--white);
  margin: 0 0 10px;
  line-height: 1.1;
}
.wa-head h3 .gold { color: var(--gold-light); }
.wa-price-tag {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 6px;
  max-width: 100%;
  margin: 6px auto 18px;
  padding: 14px 22px;
  border-radius: 14px;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #fff;
  background: linear-gradient(180deg, rgba(232, 180, 34, 0.20), rgba(232, 180, 34, 0.06));
  border: 1.5px solid rgba(232, 180, 34, 0.6);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset, 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 26px rgba(232, 180, 34, 0.22);
  animation: waPricePulse 2.8s ease-in-out infinite;
}
@keyframes waPricePulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset, 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(232, 180, 34, 0.18); }
  50%      { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset, 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 40px rgba(232, 180, 34, 0.40); }
}
.wa-price-tag .wa-price-mark { color: var(--gold-light); font-size: 18px; line-height: 1; align-self: center; }
.wa-price-tag .wa-price-label { font-size: 15px; font-weight: 700; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.82); }
.wa-price-tag b {
  font-size: 30px;
  font-weight: 800;
  color: var(--gold-light);
  letter-spacing: 0.03em;
  line-height: 1;
}
.wa-price-tag .wa-amount-red { color: #ff3b30; font-size: 32px; font-weight: 800; letter-spacing: 0.01em; }
.wa-price-tag .wa-price-lifetime {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold-light);
  background: rgba(232, 180, 34, 0.16);
  border: 1px solid rgba(232, 180, 34, 0.45);
  border-radius: 999px;
  padding: 3px 11px;
}
.wa-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(245, 242, 236, 0.68);
  margin: 0 auto;
  max-width: 540px;
}
.wa-stats {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.wa-stats span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.6);
  border: 1px solid rgba(232, 180, 34, 0.22);
  border-radius: 8px;
  padding: 8px 14px;
  background: rgba(200, 150, 12, 0.06);
}
.wa-stats b { color: var(--gold-light); font-weight: 700; }
.wa-form .wa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.wa-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 242, 236, 0.72);
}
.wa-form input,
.wa-form select,
.wa-form textarea {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--white);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(245, 242, 236, 0.14);
  border-radius: 8px;
  padding: 11px 13px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.wa-form input:focus,
.wa-form select:focus,
.wa-form textarea:focus {
  border-color: rgba(232, 180, 34, 0.65);
  box-shadow: 0 0 0 3px rgba(232, 180, 34, 0.14);
}
.wa-form textarea { resize: vertical; }
.wa-wide { grid-column: 1 / -1; }
.wa-fee {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(232, 180, 34, 0.3);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(200, 150, 12, 0.12), rgba(255, 255, 255, 0.02));
}
.wa-fee-mark {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}
.wa-fee p { font-size: 12.5px; line-height: 1.6; color: rgba(245, 242, 236, 0.72); margin: 0; }
.wa-fee b { color: var(--gold-light); }
.wa-amount-red { color: #e8413a; font-weight: 800; }
.wa-submit { width: 100%; justify-content: center; }
@media (max-width: 560px) {
  .wa-modal { padding: 24px 18px 20px; }
  .wa-form .wa-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-overlay, .wa-modal { transition-duration: 0.15s; }
}