/* SWEDBANG PREMIUM — RESPONSIVE MASTER FIX
 * Covers: mobile phones, tablets, 14-inch laptops, large desktops
 * Fixes: text alignment, spacing, header mobile, content order
 * DO NOT REMOVE — Critical for cross-device layout */

*,*::before,*::after{box-sizing:border-box}
html,body{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img,video,canvas{max-width:100%}

/* SECTION SPACING */
.sbhp-section{padding:88px 5%}
#sbhp-hero{padding:100px 5% 60px}
.sbhp-section+.sbhp-section{border-top:1px solid rgba(60,100,200,0.10)}
#sbhp-process{padding:72px 5% 80px}
#sbhp-contact{padding:72px 5% 88px}
#sbhp-brand-film{padding:72px 5% 88px}
#sbhp-global-reach{padding:88px 0 80px}

/* CONTAINER */
.sbhp-container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}

/* TYPOGRAPHY */
.sbhp-eyebrow{font-size:11.5px;letter-spacing:0.22em;margin-bottom:16px;display:block}
.sbhp-headline{font-size:clamp(32px,4.5vw,64px);line-height:1.08;letter-spacing:-0.025em;margin-bottom:22px}
.sbhp-subheadline{font-size:clamp(15px,1.5vw,18px);line-height:1.75;color:#C0D0EC;margin-bottom:36px}
.sbhp-section-title{font-size:clamp(24px,3vw,42px);line-height:1.18;margin-bottom:16px}
.sbhp-section-text{font-size:clamp(14px,1.3vw,17px);line-height:1.75;color:#B0C4E0;margin-bottom:40px}
.sbhp-caption{font-size:13px;color:#7A90B8;margin-top:24px}

/* HERO */
#sbhp-hero{min-height:100svh;align-items:center;justify-content:flex-start}
.sbhp-hero-content{padding:0 4%;max-width:640px;z-index:5;position:relative}
.sbhp-hero-content .sbhp-headline{max-width:580px}
.sbhp-hero-content .sbhp-subheadline{max-width:520px}
.sbhp-cta-group{gap:14px;margin-bottom:36px}
.sbhp-btn-primary,.sbhp-btn-secondary{font-size:14.5px;padding:13px 30px;border-radius:9px;white-space:nowrap}

/* MAP */
#sbhp-global-reach .sbhp-container{max-width:1100px}
.sbhp-global-header{margin-bottom:44px}
#sbhp-map-container{width:72%;max-width:820px}
/* STAT CARDS: 4-across flex row on desktop — display:flex MUST be set here since sbhp-premium.css is not loaded */
#sbhp-global-stats{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:stretch;justify-content:center;max-width:960px;width:100%;margin:28px auto 0;gap:16px}
#sbhp-global-stats .sbhp-stat-card{flex:1 1 0!important;min-width:0!important;max-width:none!important;text-align:center}

/* CARDS */
.sbhp-supply-card,.sbhp-feature-card{padding:30px 26px}
.sbhp-supply-card h3,.sbhp-feature-card h3{font-size:19px;margin-bottom:10px}
.sbhp-supply-card p,.sbhp-feature-card p{font-size:14.5px;color:#9AB0CC}
.sbhp-stat-card{padding:28px 20px}
.sbhp-step-num{width:56px;height:56px;font-size:20px;margin-bottom:18px}
.sbhp-film-frame{max-width:900px}
.sbhp-brand-video{max-height:506px}
.sbhp-card-grid{align-items:stretch}
.sbhp-supply-card,.sbhp-feature-card{height:100%}

/* HEADER Z-INDEX — always above canvas */
#sb-header,header.sb-header{z-index:9999!important;position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important}
.sb-hamburger{min-width:44px!important;min-height:44px!important;padding:10px!important;cursor:pointer!important;-webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important}
.sb-mobile-menu{z-index:99999!important;position:fixed!important;top:0!important;right:0!important;bottom:0!important;max-width:88vw!important;width:340px!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important}
.sb-mob-overlay{z-index:99998!important;position:fixed!important;inset:0!important}
body.sb-mob-open{overflow:hidden!important;touch-action:none!important}

/* CONTENT ALIGNMENT */
#sbhp-supply .sbhp-section-title,#sbhp-global .sbhp-section-title,#sbhp-why .sbhp-section-title,#sbhp-process .sbhp-section-title,#sbhp-contact .sbhp-section-title{text-align:center}
#sbhp-supply .sbhp-section-text,#sbhp-global .sbhp-section-text,#sbhp-why .sbhp-section-text{text-align:center;margin-left:auto;margin-right:auto}
#sbhp-contact .sbhp-section-text{text-align:center;max-width:520px;margin-left:auto;margin-right:auto}
#sbhp-contact .sbhp-cta-group{justify-content:center}
#sbhp-brand-film .sbhp-container{max-width:1000px}
.sbhp-brand-film-header{text-align:center;margin-bottom:36px}
.sbhp-brand-film-header .sbhp-headline{max-width:100%;text-align:center}

/* LARGE DESKTOPS 1400px+ */
@media(min-width:1400px){
  .sbhp-container{max-width:1280px}
  .sbhp-section{padding:100px 5%}
  .sbhp-film-frame{max-width:1000px}
  #sbhp-map-container{max-width:880px}
  #sbhp-global-stats{max-width:880px}
}

/* 14-INCH LAPTOP 1024-1399px */
@media(min-width:1024px)and(max-width:1399px){
  .sbhp-container{max-width:1060px;padding:0 20px}
  .sbhp-section{padding:80px 4%}
  #sbhp-hero{padding:90px 4% 56px}
  .sbhp-headline{font-size:clamp(30px,4vw,56px)}
  .sbhp-card-grid{grid-template-columns:repeat(2,1fr)}
  .sbhp-film-frame{max-width:860px}
  #sbhp-map-container{width:70%;max-width:780px}
  #sbhp-global-stats{max-width:780px}
}

/* TABLET 768-1023px */
@media(min-width:768px)and(max-width:1023px){
  .sbhp-container{padding:0 20px}
  .sbhp-section{padding:72px 4%}
  #sbhp-hero{padding:80px 4% 48px;min-height:90svh}
  .sbhp-hero-content{padding:0 3%;max-width:100%}
  .sbhp-hero-content .sbhp-headline{font-size:clamp(28px,4.5vw,44px)}
  .sbhp-hero-content .sbhp-subheadline{font-size:15px;max-width:420px}
  .sbhp-card-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .sbhp-process-sequence{grid-template-columns:repeat(2,1fr);gap:28px}
  .sbhp-stat-grid{grid-template-columns:repeat(2,1fr)}
  #sbhp-map-container{width:85%;max-width:600px}
  /* stat cards: flex row — grid-template-columns has no effect on display:flex */
  #sbhp-global-stats{flex-wrap:wrap!important;max-width:600px}
  #sbhp-global-stats .sbhp-stat-card{flex:0 0 calc(50% - 8px)!important}
  .sbhp-film-frame{max-width:720px}
  .sbhp-brand-video{max-height:420px}
  .sbhp-supply-card,.sbhp-feature-card{padding:26px 22px}
  .sbhp-stat-card{padding:24px 16px}
  .sbhp-cta-group{flex-direction:row}
}

/* MOBILE max 767px */
@media(max-width:767px){
  .sbhp-section{padding:56px 4% 60px}
  /* Mobile hero: 2D canvas animation (initMobileCanvas) provides background */
  #sbhp-hero{
    padding:80px 5% 56px;
    min-height:100svh;
    background:#060E22; /* fallback behind canvas */
    display:flex;
    align-items:center;
    justify-content:flex-start;
    position:relative;
    overflow:hidden;
  }
  #sbhp-canvas{
    display:block !important; /* shown on mobile via JS */
    position:absolute !important;
    top:0 !important; left:0 !important;
    width:100% !important; height:100% !important;
    z-index:1 !important;
  }
  #sbhp-global-reach{padding:64px 0 60px}
  #sbhp-brand-film{padding:56px 4% 68px}
  #sbhp-process{padding:56px 4% 64px}
  #sbhp-contact{padding:56px 4% 68px}
  .sbhp-container{padding:0 16px}
  .sbhp-headline{font-size:clamp(28px,8vw,38px);line-height:1.1;margin-bottom:18px}
  .sbhp-subheadline{font-size:15px;line-height:1.72;margin-bottom:28px;color:#C8D8F0}
  .sbhp-section-title{font-size:clamp(22px,6vw,30px)}
  .sbhp-section-text{font-size:14.5px;margin-bottom:32px}
  .sbhp-eyebrow{font-size:10.5px;margin-bottom:12px;letter-spacing:0.2em}
  .sbhp-hero-content{padding:0 5%;max-width:100%;width:100%;align-items:flex-start;text-align:left;position:relative;z-index:5}
  .sbhp-hero-content .sbhp-headline{max-width:100%;font-size:clamp(26px,8.5vw,36px);text-shadow:0 2px 20px rgba(0,0,0,0.8),0 0 40px rgba(0,80,160,0.5)}
  .sbhp-hero-content .sbhp-subheadline{max-width:100%;font-size:15px;text-shadow:0 1px 12px rgba(0,0,0,0.7)}
  .sbhp-cta-group{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:28px}
  .sbhp-btn-primary,.sbhp-btn-secondary{width:100%;max-width:280px;text-align:center;justify-content:center;padding:14px 24px;font-size:14.5px}
  .sbhp-card-grid{grid-template-columns:1fr;gap:14px}
  .sbhp-supply-card,.sbhp-feature-card{padding:24px 18px}
  .sbhp-supply-card h3,.sbhp-feature-card h3{font-size:17px}
  .sbhp-supply-card p,.sbhp-feature-card p{font-size:13.5px}
  .sbhp-stat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .sbhp-stat-card{padding:20px 14px}
  .sbhp-stat-icon{font-size:1.6rem;margin-bottom:8px}
  #sbhp-map-container{width:94%;max-width:100%;border-radius:12px}
  /* mobile stat cards: 2 per row via flex */
  #sbhp-global-stats{flex-wrap:wrap!important;max-width:94%;gap:12px;margin-top:24px;padding:0}
  #sbhp-global-stats .sbhp-stat-card{flex:0 0 calc(50% - 6px)!important}
  .sbhp-process-sequence{grid-template-columns:1fr;gap:24px}
  .sbhp-step-num{width:48px;height:48px;font-size:18px;margin-bottom:14px}
  .sbhp-step h3{font-size:16px}
  .sbhp-step p{font-size:13.5px}
  .sbhp-global-header{margin-bottom:32px;padding:0 16px}
  .sbhp-global-header .sbhp-headline{font-size:clamp(22px,6.5vw,30px)}
  .sbhp-global-header .sbhp-subheadline{font-size:13.5px}
  .sbhp-film-frame{border-radius:12px;max-width:100%}
  .sbhp-brand-video{max-height:220px}
  .sbhp-film-bar-label{font-size:0.7rem}
  .sbhp-brand-film-header p.sbhp-subheadline{font-size:13px}
  #sbhp-contact .sbhp-cta-group{align-items:center;flex-direction:column}
  #sbhp-contact .sbhp-btn-primary,#sbhp-contact .sbhp-btn-secondary{max-width:300px}
  .sbhp-floating-logos{gap:8px;justify-content:flex-start}
  .sbhp-logo-tile{width:52px;height:52px;border-radius:14px}
  .sbhp-logo-tile i{font-size:20px}
  .sbhp-tile-label{font-size:8.5px}
  .sbhp-logo-chip,.sbhp-logo-item{width:110px;height:56px}
}

/* VERY SMALL PHONES max 380px */
@media(max-width:380px){
  .sbhp-section{padding:48px 3.5% 52px}
  .sbhp-headline{font-size:clamp(22px,8vw,28px)}
  .sbhp-stat-grid{grid-template-columns:1fr 1fr;gap:10px}
  .sbhp-stat-card{padding:16px 10px}
  .sbhp-btn-primary,.sbhp-btn-secondary{max-width:100%}
  #sbhp-map-container{width:100%;border-radius:8px}
  #sbhp-global-stats{max-width:100%;padding:0}
  .sbhp-brand-video{max-height:185px}
}

/* MOBILE HEADER FIXES max 960px */
@media(max-width:960px){
  #sbhp-canvas{pointer-events:none!important}
  /* ── DEFINITIVE MOBILE HEADER FIX ─────────────────────────────────────
     This is the LAST file in the CSS cascade so these rules always win.
     The base .sb-header has transparent background (for desktop hero effect)
     but on mobile that makes it INVISIBLE. Force solid from first paint.   */
  #sb-header,.sb-header,header.sb-header{
    z-index:99999!important;
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:66px!important;
    background:rgba(5,9,22,0.97)!important;
    backdrop-filter:blur(20px) saturate(180%)!important;
    -webkit-backdrop-filter:blur(20px) saturate(180%)!important;
    border-bottom:1px solid rgba(0,229,255,0.13)!important;
    box-shadow:0 2px 24px rgba(0,0,0,0.60)!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    padding:0 16px!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
  }
  .sb-hamburger,button[class*="hamburger"],button[class*="burger"],button[class*="mobile-nav"]{min-width:48px!important;min-height:48px!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;-webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important;position:relative!important;z-index:10001!important}
  .sb-mobile-menu{position:fixed!important;top:0!important;right:0!important;bottom:0!important;width:min(340px,88vw)!important;max-height:100dvh!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;z-index:100000!important;overscroll-behavior:contain!important}
  .sb-mob-overlay{position:fixed!important;inset:0!important;z-index:99998!important;background:rgba(0,5,20,0.75)!important;backdrop-filter:blur(3px)!important;-webkit-backdrop-filter:blur(3px)!important}
  .sb-mob-top-link,.sb-mob-accordion-trigger{font-size:15px!important;min-height:44px!important;display:flex!important;align-items:center!important}
  .sb-mob-sub-link{font-size:13.5px!important;min-height:40px!important;display:flex!important;align-items:center!important}
  .sb-mob-close{min-width:44px!important;min-height:44px!important;display:flex!important;align-items:center!important;justify-content:center!important}
  .sb-mob-primary-btn{width:100%!important;text-align:center!important;padding:14px 20px!important;font-size:15px!important}
  .sb-mob-wa-btn{width:100%!important;text-align:center!important;padding:12px 20px!important}
}


@media(prefers-reduced-motion:reduce){
  .sbhp-brand-video,.sbhp-film-frame::before,.sbhp-film-bar-dot,.sbhp-floating-logos,.sbhp-headline{animation:none!important;transition:none!important}
}