/* =========================================
   BonnyCsolutions — styles.css (final, unified hero CTAs + clean header pills)
   ========================================= */
   :root{
    --bg:#0b1220;--bg-2:#0e1628;--surface:#111827;--surface-2:#0f172a;--border:#1f2937;
    --white:#ffffff;--text:#ffffff;--muted:#cdd6e4;--brand:#22d3ee;--brand-strong:#1cc6e0;
    --radius:16px;--shadow:0 10px 30px rgba(0,0,0,.35);--inset:clamp(24px,4vw,56px);
    --stats-caption-h:auto;--stats-line-h:auto;
    --page-max:1440px;--page-min:360px;
    --seal-size:128px;--seal-gap:56px;--edge-fade:24px;--seal-speed:28s;
  }
  
  /* Base */
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth}
  html,body{overscroll-behavior:none;overflow-x:hidden}
  body{touch-action:manipulation}
  
  body{
    background:radial-gradient(1400px 900px at 50% -200px,rgba(255,255,255,.06),transparent 60%),linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
    color:var(--text);font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6;font-size:15.5px;
  }
  .page{
    width:100%;max-width:var(--page-max);min-width:var(--page-min);margin:0 auto;
    min-height:100dvh;border-left:2px solid rgba(255,255,255,.92);border-right:2px solid rgba(255,255,255,.92);
    display:flex;flex-direction:column;
  }
  .container{width:100%;max-width:1180px;margin:0 auto;padding-left:var(--inset);padding-right:var(--inset)}
  .section{position:relative;padding:64px 0;scroll-margin-top:80px}
  .section:not(:first-of-type)::before{
    content:"";position:absolute;left:0;right:0;top:0;height:2px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);transform:translateY(-1px);
  }
  
  /* Visually hidden utility */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  
  /* Type */
  h1,h2,h3{margin:0 0 12px;line-height:1.2}
  p{margin:0 0 14px}
  a{color:inherit;text-decoration:none}
  .muted{color:var(--muted)}
  .hero h1{color:var(--brand-strong)}
  .section>.container>h2{color:var(--brand)}
  .process-line{color:var(--brand)}
  .step h3{color:var(--brand)}
  h1{font-size:clamp(36px,4.8vw,56px)}
  h2{font-size:clamp(22px,2.8vw,30px)}
  h3{font-size:clamp(18px,2.2vw,22px)}
  /* Center subset of headings */
  #agencies .container>h2{text-align:center}
  #spend .container>h2{text-align:center}
  #process .container>h2{text-align:center}
  #process .process-line{text-align:center}
  #process .container>.muted{text-align:center}
  
  /* Header/Nav */
  .nav{
    position:sticky;top:0;z-index:60;backdrop-filter:blur(8px);
    background:rgba(11,18,32,.75);border-bottom:1px solid var(--border)
  }
  .nav > .container{
    padding-left:clamp(10px,1.2vw,18px);
    padding-right:clamp(22px,3vw,44px);
  }
  .nav-inner{
    display:flex;align-items:center;justify-content:space-between;padding:14px 0;flex-wrap:nowrap;
  }
  
  /* Brand pill (desktop defaults) — remove glow, solid white outline */
  .brand{
    display:inline-flex;align-items:center;gap:10px;
    font-family:"Manrope",system-ui,sans-serif;font-weight:800;letter-spacing:.2px;color:var(--white);
    font-size:clamp(18px,2vw,24px);
    padding:8px 14px;border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid #fff;                /* solid white outline */
    box-shadow:none;                       /* remove glow */
    margin-left:-22px;                     /* desktop nudge */
    margin-right:clamp(16px,2.4vw,36px);
    flex:0 0 auto;
  }
  @media (min-width:1200px){ .brand{ margin-left:-32px } }
  .brand:hover{ background:rgba(255,255,255,.09); border-color:#fff }
  .brand:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:999px }
  
  /* Desktop nav list */
  .nav-list{
    list-style:none;margin:0;padding:0;display:flex;align-items:center;
    gap:clamp(12px,1.8vw,22px);
  }
  .nav-list a{
    font-size:clamp(14px,1.1vw,16px);color:#dbe6f4;padding:6px 4px;white-space:nowrap;
  }
  .nav-list a:hover{color:var(--white)}
  /* Hide inline Contact on desktop (CTA button remains on the right) */
  .nav-list .link-contact{ display:none; }
  
  /* Buttons */
  .btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:12px;font-weight:700;border:1px solid transparent;transition:transform .08s ease,background .2s ease,border-color .2s ease,color .2s ease}
  .btn:active{transform:translateY(1px) scale(.99)}
  .btn-primary{color:#000;background:var(--white);border-color:rgba(255,255,255,.9)}
  .btn-primary:hover{background:#f5f8ff;border-color:rgba(255,255,255,.95)}
  .nav .btn-primary{color:#0b1220!important;padding:8px 14px;font-size:clamp(14px,1.05vw,15.5px);margin-left:clamp(16px,2.4vw,36px)}
  .nav .btn-primary:hover,.nav .btn-primary:focus-visible{color:#0b1220!important}
  
  /* ---------- Mobile header: two rows + high-contrast horizontal scroller ---------- */
  @media (max-width: 820px){
    .nav-inner{flex-direction:column;align-items:stretch;gap:12px;padding:10px 0}
    .section{scroll-margin-top:110px}
  
    /* Brand: centered, never clipped, clean outline (no glow) */
    .brand{
      margin-left:0; margin-right:0;
      width:100%;
      justify-content:center; text-align:center;
      white-space:nowrap; overflow:hidden;
      font-size:clamp(16px,4.6vw,20px);
      padding:10px 12px; letter-spacing:.1px;
      background:rgba(8,14,28,.88);
      border:1px solid #fff;             /* solid white outline */
      box-shadow:none;                    /* remove glow */
      color:#fff;
    }
  
    /* Hide desktop CTA; show Contact inside scroller pills */
    .nav-cta{display:none}
    .nav-list .link-contact{display:list-item}
  
    /* Scroller wrapper */
    .nav-scroller{
      display:block;overflow-x:auto;overflow-y:hidden;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
              mask-image:linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
      scroll-snap-type:x proximity;
      touch-action:pan-x;
    }
    .nav-scroller::-webkit-scrollbar{display:none}
  
    /* Topic pills — keep colors, remove glow, add solid white outline */
    .nav-list{gap:10px;min-width:max-content;padding:4px 2px}
    .nav-list a{
      background:rgba(8,14,28,.84);
      border:1px solid #fff;             /* solid white outline */
      border-radius:999px;
      padding:10px 14px;
      color:#fff;                        /* uniform white text */
      font-weight:700; letter-spacing:.2px;
      scroll-snap-align:start;
      backdrop-filter:blur(6px) saturate(120%);
      -webkit-backdrop-filter:blur(6px) saturate(120%);
      box-shadow:none;                   /* remove glow */
      text-shadow:none;                  /* remove text glow */
    }
    .nav-list a:hover{
      background:rgba(12,20,36,.92);
      border-color:#fff;
    }
    .nav-list a:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
  }
  
  /* Skip link */
  .skip-link{
    position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
  }
  .skip-link:focus{
    left:16px;top:10px;width:auto;height:auto;padding:8px 12px;
    background:#fff;color:#000;border-radius:10px;z-index:1000;box-shadow:0 6px 20px rgba(0,0,0,.25);
  }
  
  /* HERO */
  .hero{
    min-height:clamp(520px,70vh,820px);padding:56px 0 48px;display:flex;align-items:center;position:relative;overflow:hidden;
    background-image:image-set(url('images/hero-poster.jpg') 1x);
    background-size:cover;background-position:center;
  }
  .hero-video{position:absolute;inset:0;z-index:0;overflow:hidden}
  .hero-video .hero-video-el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:translateZ(0);opacity:0;backface-visibility:hidden;will-change:opacity;contain:paint}
  .hero-video .hero-video-el.is-front{opacity:1;transition:opacity .18s linear}
  .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,42,.18),rgba(15,23,42,.54)),radial-gradient(80rem 60rem at 50% -10%,rgba(255,255,255,.08),transparent 60%);z-index:1}
  .hero .container{position:relative;z-index:2}
  .hero-panel{max-width:940px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.45);border-radius:18px;padding:22px 22px 18px;backdrop-filter:blur(6px);box-shadow:0 20px 40px rgba(0,0,0,.35)}
  .hero h1{font-size:clamp(36px,5.6vw,62px);line-height:1.1;font-weight:800}
  .hero p{max-width:820px;color:var(--white)}.cta-row{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}.support{margin-top:14px}
  @media (max-width:640px){.hero-panel{background:rgba(15,23,42,.45);border-color:rgba(255,255,255,.35)}.hero h1{line-height:1.12}}
  
  /* === Hero CTA unification (both buttons identical) === */
  .hero .cta-row .btn,
  .hero .cta-row .btn-primary{
    background:#fff;
    color:#0b1220 !important;
    border:1px solid #fff !important;
  }
  .hero .cta-row .btn:hover,
  .hero .cta-row .btn-primary:hover{
    background:#f5f8ff;
    border-color:#fff;
  }
  .hero .cta-row .btn:focus-visible,
  .hero .cta-row .btn-primary:focus-visible{
    outline:2px solid var(--brand);
    outline-offset:2px;
  }
  
  /* Services */
  .services-grid{display:grid;gap:22px;grid-template-columns:1fr}
  @media (min-width:980px){.services-grid{grid-template-columns:1fr 1fr}}
  .service-card{background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.04) 100%);border:1px solid rgba(255,255,255,.5);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
  .service-body{padding:16px 18px 18px}.service-body h3{margin-bottom:8px;color:var(--brand)}
  
  /* Process */
  .process-line{margin-top:8px;font-size:clamp(18px,2.2vw,26px);font-weight:800}
  .steps{margin-top:18px;display:grid;gap:16px;grid-template-columns:repeat(1,minmax(0,1fr))}
  @media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
  .step{background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.04) 100%);border:1px solid rgba(255,255,255,.5);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
  
  /* Annual Spend / Stats */
  .stats{margin-top:12px;display:grid;gap:20px;grid-template-columns:1fr}
  @media (min-width:820px){.stats{grid-template-columns:repeat(5,1fr)}}
  .stat-card{background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.04) 100%);border:1px solid rgba(255,255,255,.55);border-radius:16px;padding:18px 16px 16px;box-shadow:var(--shadow);text-align:center;contain:content;will-change:transform,border-color,background;transition:transform .18s ease,border-color .2s ease,background .2s ease;transform:translateZ(0)}
  .stat-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.85);background:rgba(255,255,255,.10)}
  .stat-value,.stat-ghost{font-weight:800;font-size:clamp(32px,4.2vw,44px);letter-spacing:.5px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1;line-height:1.15}
  .stat-stack{position:relative;display:flex;align-items:flex-start;justify-content:center;min-height:var(--stats-line-h)}
  .stat-ghost{visibility:hidden;pointer-events:none;position:absolute;inset:auto auto 0 auto}
  .stat-live{display:inline-block;white-space:nowrap}
  .stat-caption{color:#dbe6f4;font-weight:600;line-height:1.5;min-height:var(--stats-caption-h)}
  .stats-note{margin-top:12px;text-align:center;font-size:13.5px}
  
  /* Target Departments — seamless marquee */
  .seal-track{
    position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.45);border-radius:12px;background:rgba(255,255,255,.06);
    width:100%;height:calc(var(--seal-size) + 20px);margin:0 auto;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--edge-fade),#000 calc(100% - var(--edge-fade)),transparent 100%);
            mask-image:linear-gradient(90deg,transparent 0,#000 var(--edge-fade),#000 calc(100% - var(--edge-fade)),transparent 100%);
  }
  .seal-row{
    display:flex;align-items:center;gap:var(--seal-gap);position:absolute;left:0;top:50%;
    transform:translateY(-50%) translateX(0);will-change:transform;
    animation:seal-loop var(--seal-speed) linear infinite;
  }
  @keyframes seal-loop{
    0%  { transform:translateY(-50%) translateX(0); }
    100%{ transform:translateY(-50%) translateX(-50%); }
  }
  .seal{width:var(--seal-size);height:var(--seal-size);object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));flex:0 0 auto}
  .seal-track:hover .seal-row{animation-play-state:paused}
  @media (prefers-reduced-motion:reduce){
    .seal-row{animation:none!important;transform:translateY(-50%) translateX(0)}
  }
  
  /* Enquiry */
  #enquiry{position:relative;overflow:hidden;z-index:1}#enquiry .container{position:relative;z-index:1}
  .enquiry-head{display:grid;grid-template-columns:1fr;gap:22px;align-items:end}
  .enquiry-head h2{color:var(--brand)}
  .enquiry-head-divider{display:none}
  @media (min-width:980px){
    .enquiry-head{grid-template-columns:1fr 2px 1fr}
    .enquiry-head-divider{display:block;width:2px;height:100%;background:linear-gradient(180deg,transparent,rgba(255,255,255,.85),transparent);border-radius:2px;justify-self:center}
  }
  
  .enquiry-grid{margin-top:16px;display:grid;grid-template-columns:1fr;gap:22px;align-items:start}.enquiry-col{min-width:0}
  .enquiry-divider{height:2px;width:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);border-radius:2px}
  @media (min-width:980px){.enquiry-grid{grid-template-columns:1fr 2px 1fr;gap:26px}.enquiry-divider{width:2px;height:auto;background:linear-gradient(180deg,transparent,rgba(255,255,255,.85),transparent);justify-self:center}}
  .enquiry-form .hp-field{display:none}.enquiry-form .grid{display:grid;gap:14px;grid-template-columns:1fr}
  @media (min-width:780px){.enquiry-form .grid{grid-template-columns:1fr 1fr}}
  .field{display:flex;flex-direction:column;gap:8px}.field span{color:#e9eefc;font-weight:600}
  .field input,.field textarea{background:rgba(255,255,255,.07);color:var(--white);border:1px solid rgba(255,255,255,.45);border-radius:12px;padding:12px 14px;outline:none}
  .field input:focus,.field textarea:focus{border-color:#fff}
  .enquiry-actions{display:flex;align-items:center;gap:12px;margin-top:12px}.enquiry-status{color:#bdeafe;font-weight:600}
  ::placeholder{color:rgba(235,241,255,.72)}
  .field input:-webkit-autofill,.field textarea:-webkit-autofill{-webkit-text-fill-color:var(--white);-webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.07) inset;box-shadow:0 0 0 1000px rgba(255,255,255,.07) inset;transition:background-color 5000s ease-in-out 0s}
  .field input.is-error,.field textarea.is-error{border-color:#ff6b6b!important}.field input.is-success,.field textarea.is-success{border-color:#34d399!important}
  .enquiry-status.success{color:#86efac}.enquiry-status.error{color:#fecaca}
  .contact-card{background:linear-gradient(180deg,rgba(255,255,255,.05) 0%,rgba(255,255,255,.04) 100%);border:1px solid rgba(255,255,255,.5);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
  .contact-list{list-style:none;margin:0;padding:0}.contact-list li{margin:8px 0}
  .card-divider{margin:14px 0;border:none;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent)}
  .company-block h4{margin:0 0 6px}
  
  /* Footer */
  .site-footer{margin-top:auto;border-top:2px solid rgba(255,255,255,.95);background:rgba(11,18,32,.85)}
  .footer-inner{padding:16px 0;text-align:center;color:#dbe6f4;font-size:14px}
  
  /* Reduced motion */
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{transition:none!important;scroll-behavior:auto!important}
  }
  
  /* Small-screen tweaks for dept seals */
  @media (max-width:640px){
    :root{--seal-size:96px;--seal-gap:36px;--edge-fade:20px}
  }
  
  /* Print */
  @media print{
    body{background:#ffffff!important}
    .page,.section::before,.hero::after{border:none!important;background:none!important;box-shadow:none!important}
    .btn,.step,.contact-card,.hero-panel,.service-card,.stat-card{background:#fff!important;color:#000!important;border:1px solid #ccc!important;box-shadow:none!important}
    .seal-track,.seal-row,.seal{animation:none!important;filter:none!important}
    h1,h2,h3,.process-line,.step h3{color:#000!important}
  }
  /* Perf: use Manrope for 800-weight to avoid loading Poppins 800 */
  .hero h1,
  .process-line,
  .stat-value {
    font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 800;
  }
  /* Speed: don't fully process off-screen sections until needed */
#services, #process, #spend, #agencies, #about, #enquiry {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1000px;
}
/* === Bubbles (card-style panels) === */
.bubble{
  background: rgba(255,255,255,0.04);       /* subtle fill over dark bg */
  border: 1px solid rgba(255,255,255,0.16); /* faint outline */
  border-radius: 20px;
  padding: 24px 28px;
  margin: 16px 0 28px;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.25),             /* soft drop shadow */
    inset 0 1px 0 rgba(255,255,255,0.03);   /* faint inner highlight */
}

.bubble--tight{
  padding: 18px 22px;                        /* slightly tighter variant */
}

/* Keep spacing tidy inside the bubble */
.bubble h3{ margin-top: 0; }
.bubble p { margin: 0 0 12px; }
.bubble li{ margin: 6px 0; }

@media (min-width: 900px){
  .bubble{
    padding: 28px 32px;
    border-radius: 22px;
  }
}