/* ===== Design Tokens (brand: NextPlay) ===== */
    :root{
      --navy:#0F2B42;
      --navy-700:#16405f;
      --navy-900:#0a1f30;
      --orange:#D4782F;
      --orange-600:#c46a26;
      --sand:#E8E4DE;
      --bg:#F7F5F2;
      --white:#ffffff;
      --ink:#1c2733;
      --muted:#5b6b7a;
      --line:#e3ded7;
      --radius:16px;
      --shadow-sm:0 1px 3px rgba(15,43,66,.08);
      --shadow-md:0 10px 30px rgba(15,43,66,.12);
      --maxw:1180px;
      --font:'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    }

    /* Non-sticky header ABOVE the hero (NOT pinned to the viewport top).
       The header sits in normal document flow at the top of the page, and the hero
       starts directly beneath it — so the hero is "stuck to the bottom of the
       nav bar" and the nav scrolls away with the page (no fixed/pinned bar).
       Hide the theme's sibling spacer `.header_content_height` (its height is set
       by theme JS to reserve room for the fixed bar) so no light blank band is left
       between the nav and the hero. Pure CSS, no JS. */
    #header.ly_header_5{ position:static !important; }
    .header_content_height{ display:none !important; height:0 !important; }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:var(--font);
      color:var(--ink);
      background:var(--bg);
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
    }
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}
    h1,h2,h3{line-height:1.15;margin:0;color:var(--navy);font-weight:800}
    p{margin:0}
    .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
    .skip-link{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:200}
    .skip-link:focus{left:12px;top:12px}

    /* Buttons */
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
      font-weight:700;font-size:1rem;padding:14px 28px;border-radius:999px;
      border:none;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
      font-family:var(--font);
    }
    .btn-primary{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(212,120,47,.35)}
    .btn-primary:hover{background:var(--orange-600);transform:translateY(-2px);box-shadow:0 12px 26px rgba(212,120,47,.42)}
    .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35)}
    .btn-ghost:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
    :focus-visible{outline:3px solid var(--orange);outline-offset:2px}

    /* Header (minimal — reduce nav interference) */
    /* Hero */
    .hero{position:relative;color:#fff;overflow:hidden;background:var(--navy-900)}
    .hero-bg{position:absolute;inset:0;background:#0a1f30 url('//ueeshop.ly200-cdn.com/u_file/UPBH/UPBH592/2608/27/photo/vr-theme-park.jpg?x-oss-process=image/resize,w_1600/format,webp/quality,q_85') center/cover no-repeat}
    .hero-overlay{position:absolute;inset:0;background:linear-gradient(105deg, rgba(10,31,48,.94) 0%, rgba(10,31,48,.78) 45%, rgba(10,31,48,.45) 100%)}
    .hero .wrap{position:relative;z-index:2;display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:center;padding-top:72px;padding-bottom:72px}
    .badge{display:inline-flex;align-items:center;gap:8px;background:rgba(212,120,47,.16);color:#ffd9b8;border:1px solid rgba(212,120,47,.4);padding:6px 14px;border-radius:999px;font-size:.82rem;font-weight:700;letter-spacing:.4px;margin-bottom:18px}
    .hero h1{font-size:clamp(2rem,5vw,3.25rem);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4)}
    .hero .sub{margin-top:18px;font-size:1.1rem;color:rgba(255,255,255,.86);max-width:42ch}
    .hero-actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
    .hero-trust{margin-top:26px;display:flex;flex-wrap:wrap;gap:18px 26px;font-size:.9rem;color:rgba(255,255,255,.78)}
    .hero-trust b{color:#fff;font-size:1.05rem;display:block}
    .hero-visual{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid rgba(255,255,255,.15);aspect-ratio:4/3;background:#0a1f30}
    .hero-visual img{width:100%;height:100%;object-fit:cover}
    /* Hero carousel — stack all slides, fade active one */
    .hero-carousel{position:relative;width:100%;height:100%}
    .hero-carousel .slide{
      position:absolute;inset:0;opacity:0;
      transition:opacity .5s ease;
      pointer-events:none;
    }
    .hero-carousel .slide.is-active{opacity:1;pointer-events:auto}
    .hero-carousel .slide img{width:100%;height:100%;object-fit:cover;display:block}
    /* Arrows — always present, semi-transparent, brighten on hover */
    .hero-carousel .arrow{
      position:absolute;top:50%;transform:translateY(-50%);
      width:40px;height:40px;border-radius:50%;
      border:0;background:rgba(255,255,255,.75);color:#0f1b2d;
      font-size:1.4rem;line-height:1;cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 4px 12px rgba(0,0,0,.25);
      transition:background .15s ease, transform .15s ease, opacity .15s ease;
      opacity:.55;
      z-index:2;
    }
    .hero-carousel .arrow:hover{background:#fff;opacity:1;transform:translateY(-50%) scale(1.05)}
    .hero-carousel .arrow.prev{left:10px}
    .hero-carousel .arrow.next{right:10px}
    .hero-carousel .arrow:focus-visible{outline:3px solid var(--orange);outline-offset:2px;opacity:1}
    /* Dots — bottom center */
    .hero-carousel .dots{
      position:absolute;left:0;right:0;bottom:10px;
      display:flex;justify-content:center;gap:6px;z-index:2;
    }
    .hero-carousel .dots button{
      width:8px;height:8px;border-radius:50%;border:0;
      background:rgba(255,255,255,.5);cursor:pointer;
      padding:0;transition:background .15s ease, transform .15s ease;
    }
    .hero-carousel .dots button.is-active{background:var(--orange);transform:scale(1.3)}
    .hero-carousel .dots button:focus-visible{outline:2px solid #fff;outline-offset:2px}
    /* On hover anywhere on carousel: brighten arrows (CSS-only enhancement) */
    .hero-carousel:hover .arrow{opacity:.9}
    @media (max-width:768px){
      .hero-carousel .arrow{width:32px;height:32px;font-size:1.1rem;opacity:.8}
      .hero-carousel .dots{bottom:6px}
    }

    /* Generic section */
    .section{padding:72px 0}
    .section.alt{background:#fff}
    .eyebrow{color:var(--orange);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;margin-bottom:10px}
    .section-head{max-width:720px;margin:0 auto 44px;text-align:center}
    .section-head h2{font-size:clamp(1.6rem,3.6vw,2.4rem)}
    .section-head p{margin-top:14px;color:var(--muted);font-size:1.05rem}

    /* Service intro grid ("What You Get") */
    .grid-4{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
    .feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow-sm);transition:transform .2s ease, box-shadow .2s ease}
    .feature:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
    .feature .ic{width:48px;height:48px;border-radius:12px;background:rgba(212,120,47,.12);color:var(--orange);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
    .feature h3{font-size:1.15rem;margin-bottom:8px}
    .feature p{color:var(--muted);font-size:.96rem}

    /* Cases ("3D Design Examples") */
    .case{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
    .case-media{position:relative;aspect-ratio:4/3;background:#0a1f30}
    .case-media img{width:100%;height:100%;object-fit:cover}
    .case-tag{position:absolute;top:12px;left:12px;background:rgba(10,31,48,.82);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.05em;padding:5px 10px;border-radius:999px;text-transform:uppercase}
    .case-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:#0a1f30}
    .case-thumbs img{aspect-ratio:1/1;object-fit:cover;width:100%;height:100%}
    .case-body{padding:20px 22px 24px}
    .case-body h3{font-size:1.1rem;margin-bottom:14px}
    .meta{display:grid;gap:8px;font-size:.92rem}
    .meta div{display:flex;gap:8px;color:var(--muted)}
    .meta b{color:var(--navy);font-weight:700;min-width:86px}
    .case-result{margin-top:14px;padding:10px 12px;background:rgba(212,120,47,.08);border-left:3px solid var(--orange);border-radius:8px;font-size:.9rem;color:var(--muted)}
    .case-result .metric{color:var(--navy);font-weight:800}
    .case-quote{margin:14px 0 0;font-size:.88rem;color:var(--muted);font-style:italic;border-top:1px dashed var(--line);padding-top:12px}
    .case-quote cite{display:block;margin-top:6px;font-style:normal;font-weight:700;color:var(--navy);font-size:.8rem}
    .case-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-weight:700;color:var(--orange);font-size:.94rem}
    .case-link:hover{color:var(--orange-600);text-decoration:underline}
    .case-link .arr{transition:transform .15s ease}
    .case-link:hover .arr{transform:translateX(3px)}

    /* Global Projects band */
    .global{background:linear-gradient(135deg,#0a1f30,#0F2B42);color:#fff;padding:72px 0}
    .global .section-head h2{color:#fff}
    .global .section-head p{color:rgba(255,255,255,.78)}
    .global-stats{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:8px;text-align:center}
    .global-stats .stat b{display:block;font-size:2rem;color:var(--orange);font-weight:800}
    .global-stats .stat span{color:rgba(255,255,255,.7);font-size:.92rem}
    .global-regions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px}
    .global-regions .chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.85);padding:8px 16px;border-radius:999px;font-size:.9rem}

    /* How We Work steps */
    .steps{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
    .step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow-sm);position:relative;transition:transform .2s ease, box-shadow .2s ease}
    .step:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
    .step .num{width:44px;height:44px;border-radius:12px;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;margin-bottom:16px}
    .step h3{font-size:1.1rem;margin-bottom:8px}
    .step p{color:var(--muted);font-size:.95rem}

    /* ROI */
    .roi{background:linear-gradient(135deg,#0F2B42,#16405f);color:#fff;border-radius:24px;overflow:hidden;display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));align-items:center;padding:56px 40px}
    .roi h2{color:#fff;font-size:clamp(1.6rem,3.6vw,2.3rem)}
    .roi .sub{color:rgba(255,255,255,.82);margin-top:14px;font-size:1.05rem}
    .roi-list{margin-top:22px;display:grid;gap:14px}
    .roi-list li{display:flex;gap:12px;align-items:flex-start;list-style:none}
    .roi-list .ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:rgba(212,120,47,.18);color:var(--orange);display:flex;align-items:center;justify-content:center;margin-top:2px}
    .roi-list b{color:#fff;display:block}
    .roi-list span{color:rgba(255,255,255,.75);font-size:.94rem}
    .roi-chart{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px}
    .roi-chart img,.roi-chart svg{width:100%;height:auto;border-radius:10px}

    /* FAQ */
    .faq-list{max-width:820px;margin:0 auto;display:grid;gap:12px}
    .faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
    .faq-item summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:1.02rem}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary .chev{transition:transform .2s ease;color:var(--orange);flex:0 0 auto}
    .faq-item[open] summary .chev{transform:rotate(180deg)}
    .faq-item .answer{padding:0 22px 20px;color:var(--muted);font-size:.96rem}

    /* Lead form */
    .lead{background:var(--bg)}
    .lead-card{background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-md);overflow:hidden;display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
    .lead-aside{background:var(--navy);color:#fff;padding:44px 38px}
    .lead-aside .aside-img{width:100%;height:130px;object-fit:cover;border-radius:12px;margin-bottom:22px;border:1px solid rgba(255,255,255,.12)}
    .lead-aside h2{color:#fff;font-size:1.7rem;line-height:1.2}
    .lead-aside p{color:rgba(255,255,255,.82);margin-top:14px}
    .lead-aside ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px}
    .lead-aside li{display:flex;gap:10px;align-items:center;color:rgba(255,255,255,.9);font-size:.96rem}
    .lead-aside .ic{color:var(--orange)}
    .form-wrap{padding:38px}
    .field{margin-bottom:16px}
    .field label{display:block;font-size:.88rem;font-weight:700;color:var(--navy);margin-bottom:6px}
    .field label .req{color:var(--orange)}
    .field input,.field select,.field textarea{
      width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:1rem;font-family:var(--font);
      background:#fcfbf9;color:var(--ink);transition:border-color .15s ease, box-shadow .15s ease;
    }
    .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(212,120,47,.15)}
    .field textarea{resize:vertical;min-height:90px}
    .form-note{font-size:.82rem;color:var(--muted);margin-top:10px}
    .btn-block{width:100%;margin-top:8px}
    .form-success{display:none;padding:40px 30px;text-align:center}
    .form-success .check{width:64px;height:64px;border-radius:50%;background:rgba(16,185,129,.14);color:#10b981;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
    .form-success h3{font-size:1.4rem;margin-bottom:8px}
    .form-success p{color:var(--muted)}

    /* Sticky mobile CTA — redesigned: independent class names (no .btn pollution),
       locked max-height (prevents any future padding/font leak from blowing up buttons),
       crisp 8px corner radius (no more 9999px "balloon" pills), backdrop-blur for premium feel */
    .sticky-cta{
      position:fixed;left:0;right:0;bottom:0;z-index:50;
      display:none;align-items:center;justify-content:space-between;
      gap:10px;flex-wrap:wrap;
      padding:8px 12px;
      min-height:56px;max-height:64px;
      background:rgba(15,27,45,.96);
      -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
      color:#fff;
      border-top:1px solid rgba(255,255,255,.08);
      box-shadow:0 -6px 20px rgba(0,0,0,.22);
      font-family:var(--font);
    }
    .sticky-cta.is-visible{display:flex}
    .sticky-cta-copy{
      flex:1 1 130px;min-width:0;
      font-size:13px;line-height:1.25;font-weight:600;color:#fff;
      overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    .sticky-cta-copy small{
      display:block;
      font-size:11px;font-weight:400;color:rgba(255,255,255,.6);
      margin-top:1px;
    }
    .sticky-cta-row{display:flex;align-items:center;gap:6px;flex:0 0 auto}
    /* Sticky bar action buttons — unified with the .btn system:
       same pill radius, brand-orange token, shadow + hover-lift + focus,
       only more compact sizing for the bar */
    .sticky-cta-btn,.sticky-cta-wa{
      display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
      font-family:var(--font);
      font-weight:700;font-size:.85rem;
      padding:10px 16px;
      border-radius:999px;
      border:none;cursor:pointer;
      white-space:nowrap;
      text-decoration:none;
      transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .sticky-cta-btn{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(212,120,47,.35)}
    .sticky-cta-btn:hover{background:var(--orange-600);transform:translateY(-2px);box-shadow:0 12px 26px rgba(212,120,47,.42)}
    .sticky-cta-btn:active{transform:translateY(1px)}
    .sticky-cta-wa{background:#25D366;color:#fff;box-shadow:0 8px 20px rgba(37,211,102,.35)}
    .sticky-cta-wa:hover{background:#1ebe5a;transform:translateY(-2px);box-shadow:0 12px 26px rgba(37,211,102,.42)}
    .sticky-cta-close{
      background:transparent;border:0;
      color:rgba(255,255,255,.55);
      font-size:18px;line-height:1;
      padding:6px 8px;cursor:pointer;
      border-radius:6px;
      transition:color .15s ease,background .15s ease;
    }
    .sticky-cta-close:hover{color:#fff;background:rgba(255,255,255,.1)}
    .sticky-cta.is-dismissed{display:none !important}
    body.sticky-dismissed{padding-bottom:0 !important}
    @media (max-width:380px){
      .sticky-cta{padding:8px 10px;gap:8px}
      .sticky-cta-btn,.sticky-cta-wa{padding:8px 11px;font-size:12px}
      .sticky-cta-copy{font-size:12px}
      .sticky-cta-copy small{font-size:10px}
    }

    /* ===== Image Lightbox ===== */
    .hero-visual img,.case .case-media img,.case .case-thumbs img{cursor:zoom-in}
    .lightbox{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:48px 64px;background:rgba(8,16,28,.92);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
    .lightbox.is-open{display:flex}
    .lightbox-img{max-width:100%;max-height:84vh;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.55);background:#0a1f30;object-fit:contain;-webkit-user-drag:none;user-select:none;animation:lbIn .18s ease-out}
    @keyframes lbIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
    .lightbox-close{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.95);color:#0f1b2d;font-size:1.6rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:transform .15s ease,background .15s ease}
    .lightbox-close:hover{background:#fff;transform:scale(1.05)}
    .lightbox-prev,.lightbox-next{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:#0f1b2d;font-size:1.6rem;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.3);transition:background .15s ease}
    .lightbox-prev:hover,.lightbox-next:hover{background:#fff}
    .lightbox-prev{left:16px}
    .lightbox-next{right:16px}
    .lightbox.has-nav .lightbox-prev,.lightbox.has-nav .lightbox-next{display:flex}
    .lightbox-caption{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:#cdd6e0;font-size:.9rem;padding:0 72px;line-height:1.4}
    body.lightbox-open{overflow:hidden}

    @media (max-width:768px){
      .section{padding:54px 0}
      .global{padding:54px 0}
      .roi{padding:40px 22px;gap:28px}
      .hero .wrap{padding-top:48px;padding-bottom:48px}
      .sticky-cta{display:flex}
      body{padding-bottom:76px}
      .lightbox{padding:24px 12px}
      .lightbox-prev,.lightbox-next{width:42px;height:42px;font-size:1.3rem}
      .lightbox-prev{left:6px}
      .lightbox-next{right:6px}
      .lightbox-close{width:40px;height:40px;top:12px;right:12px;font-size:1.4rem}
      .lightbox-caption{bottom:14px;font-size:.82rem;padding:0 56px}
    }
  
    /* ===== Popup-launching quote card (replaces the inline form) ===== */
    .quote-card{background:#fff;border-radius:16px;padding:32px 30px;box-shadow:0 10px 30px rgba(10,31,48,.08);border:1px solid #e8edf2}
    .quote-card__icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#D4782F 0%,#B85F1F 100%);color:#fff;margin-bottom:18px}
    .quote-card h3{margin:0 0 10px;font-size:1.35rem;color:var(--navy);line-height:1.25}
    .quote-card__lead{margin:0 0 20px;font-size:.95rem;color:var(--muted);line-height:1.6}
    .quote-card__list{margin:0 0 26px;padding:0;list-style:none;display:grid;gap:11px;font-size:.9rem;color:var(--navy)}
    .quote-card__list li{display:flex;gap:10px;align-items:flex-start}
    .quote-card__list .ic{flex:none;color:#D4782F;font-weight:700}
    @media (max-width:768px){ .quote-card{padding:26px 22px} }