/* ============================================================
   Solar Planet — Website Design System
   Original clean corporate blue/white design, built for Solar Planet.
   Brand colors per spec "0. 颜色":
     blue   #00a3e2 | green #1ba548 | yellow #fdc800
     orange #f1860e | red   #e41b13 | dark blue (footer) #0b3d5c
   ============================================================ */

@font-face{font-family:"Alibaba PuHuiTi";src:url(../fonts/Alibaba-PuHuiTi-Light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Alibaba PuHuiTi";src:url(../fonts/Alibaba-PuHuiTi-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Alibaba PuHuiTi";src:url(../fonts/Alibaba-PuHuiTi-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Alibaba PuHuiTi";src:url(../fonts/Alibaba-PuHuiTi-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Alibaba PuHuiTi";src:url(../fonts/Alibaba-PuHuiTi-Heavy.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:"Stawix Sans Beam";src:url(../fonts/Stawix-SansBeam-BoldItalic.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap;}

:root{
  --blue:#00a3e2;
  --blue-dark:#0089bf;
  --blue-deep:#0b3d5c;     /* footer / active tab deep blue */
  --green:#1ba548;
  --yellow:#fdc800;
  --orange:#f1860e;
  --red:#e41b13;

  --ink:#3a3f44;           /* primary body grey (spec: conventional text = grey) */
  --ink-soft:#6b7178;
  --line:#e4e8ec;
  --bg-grey:#f4f6f8;       /* alternating section grey */
  --bg-white:#ffffff;
  --white:#ffffff;

  --maxw:1280px;           /* container width */
  --radius:6px;

  --shadow-sm:0 1px 3px rgba(20,40,60,.08);
  --shadow-md:0 6px 22px rgba(20,40,60,.12);

  --font:"Alibaba PuHuiTi","Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Visually hidden but semantically present: carries the page H1 for SEO and
   screen readers without disturbing the visible hero layout */
.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;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--white);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--blue);text-decoration:none;transition:color .18s ease;}
a:hover{color:var(--orange);}
h1,h2,h3,h4{color:var(--blue-deep);line-height:1.25;font-weight:700;margin:0 0 .5em;}
p{margin:0 0 1em;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.container-wide{max-width:1400px;margin:0 auto;padding:0 28px;}

/* ---------------- Top utility bar (blue, hide on scroll) --------------- */
.topbar{
  position:relative;
  z-index:96;
  background:var(--blue);
  color:#fff;
  font-size:13px;
}
.topbar .container{display:flex;align-items:center;justify-content:space-between;height:38px;}
.topbar a{color:#fff;}
.topbar .priv{font-weight:600;}
.topbar .priv:hover{color:var(--orange);text-decoration:none;}
.topbar .social-mini{display:flex;gap:14px;align-items:center;}
.topbar .social-mini a{opacity:.92;font-size:12px;display:inline-flex;align-items:center;gap:5px;}
.topbar .social-mini a:hover{opacity:1;color:#fff;text-decoration:underline;}
.topbar .social-mini a.soc-w{width:18px;height:18px;display:inline-block;opacity:1;background-color:#fff;-webkit-mask-image:var(--soc);mask-image:var(--soc);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;transition:background-color .15s ease;}
.topbar .social-mini a.soc-w:hover{background-color:var(--orange);}
.topbar .social-mini a.wx{position:relative;display:inline-block;width:18px;height:18px;opacity:1;cursor:pointer;}
.topbar .social-mini a.wx .wx-ico{display:block;width:18px;height:18px;background-color:#fff;-webkit-mask-image:var(--soc);mask-image:var(--soc);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;transition:background-color .15s ease;}
.topbar .social-mini a.wx:hover .wx-ico{background-color:var(--orange);}
.topbar .social-mini .wx-pop{position:absolute;top:calc(100% + 12px);right:0;width:200px;background:var(--blue);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:80;padding:12px 12px 14px;}
.topbar .social-mini a.wx:hover .wx-pop{opacity:1;visibility:visible;transform:translateY(0);}
.topbar .social-mini .wx-pop-h{display:block;color:#fff;font-size:13px;font-weight:700;text-align:center;margin-bottom:10px;}
.topbar .social-mini .wx-pop img{width:150px;height:150px;display:block;margin:0 auto;border:3px solid #000;border-radius:8px;background:#fff;}
.topbar .social-mini .wx-pop::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:14px;}
.topbar .social-mini .wx-pop::after{content:"";position:absolute;bottom:100%;right:6px;border:8px solid transparent;border-bottom-color:var(--blue);}
.topbar.hidden{display:none;}

/* ---------------- Header / main nav (white) ---------------- */
.header{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
  transition:padding .2s ease, box-shadow .2s ease;
}
.header .container{display:flex;align-items:center;gap:18px;height:78px;transition:height .2s ease;}
.header.shrink .container{height:60px;}
.header.shrink{box-shadow:var(--shadow-sm);}

.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--blue-deep);font-size:20px;letter-spacing:.3px;}
.logo .mark{width:34px;height:34px;flex:0 0 auto;}
.logo:hover{color:var(--blue-deep);}

.nav{margin-left:auto;display:flex;align-items:center;gap:4px;}
.nav>li{position:relative;list-style:none;}
.nav>li>a{
  display:flex;align-items:center;gap:6px;
  padding:10px 16px;color:var(--blue);font-weight:700;font-size:15px;border-radius:4px;
}
.nav>li>a .caret{font-size:18px;line-height:1;opacity:.72;}
.nav>li>a:hover,.nav>li.open>a{color:var(--orange);}
.nav>li>a:hover::after,.nav>li.open>a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:4px;height:3px;background:var(--orange);border-radius:3px;
}
/* dropdown */
.dropdown{
  position:absolute;top:100%;left:0;min-width:230px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:8px 0;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;z-index:60;
}
.nav>li.open .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{
  display:flex;align-items:center;gap:10px;padding:9px 18px;color:var(--ink);font-weight:600;font-size:14px;
}
.dropdown a .ico{width:26px;height:26px;flex:0 0 auto;border-radius:50%;}
.dropdown a:hover{color:var(--orange);background:var(--bg-grey);}
/* "All <section>" shortcut at the top of every dropdown */
.dropdown a.dd-all{font-weight:700;color:var(--blue);border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:11px;}
.dropdown a.dd-all:hover{color:var(--orange);}

/* search box in header */
.searchbox{display:flex;align-items:center;background:#fff;border:1px solid #d7dde2;border-radius:40px;overflow:hidden;height:40px;width:200px;padding:0 5px 0 16px;transition:width .2s ease,border-color .2s ease,box-shadow .2s ease;}
.searchbox:focus-within{border-color:var(--orange);width:240px;box-shadow:0 4px 14px rgba(241,134,14,.20);}
.searchbox input{border:0;outline:0;padding:0;font-size:14px;flex:1;min-width:0;color:var(--ink);background:transparent;font-family:inherit;}
.searchbox input::placeholder{color:var(--ink-soft);}
.searchbox button{flex:0 0 auto;width:30px;height:30px;border:0;border-radius:50%;background:var(--blue);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;transition:background-color .18s ease;}
.searchbox button:hover{background:var(--orange);}
.searchbox button svg{width:16px;height:16px;display:block;}

/* mobile */
.menu-toggle{display:none;background:none;border:0;font-size:24px;cursor:pointer;color:var(--blue-deep);margin-left:auto;}

/* ---------------- Page hero (blue banner w/ breadcrumb) ---------------- */
.hero{
  background:var(--blue);
  color:#fff;position:relative;overflow:hidden;
}
.hero .container{padding:26px 28px;position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.hero h1{color:#fff;font-size:32px;margin:0;line-height:1.2;}
.hero .hero-crumb{flex:0 0 auto;padding-top:8px;text-align:right;}
.hero .breadcrumb{padding:0;color:rgba(255,255,255,.9);font-size:14px;font-weight:500;text-align:right;}
.hero .breadcrumb a{color:#fff;text-decoration:none;}
.hero .breadcrumb a:hover,.hero .breadcrumb a:active{color:var(--orange);}
.hero .breadcrumb span.sep{margin:0 8px;color:rgba(255,255,255,.6);}
.hero .breadcrumb span:not(.sep){color:rgba(255,255,255,.9);}
/* breadcrumb-only row used by the solution pages (crumb sits above the title) */
.hero-crumbbar{display:flex;justify-content:flex-end;padding-top:18px;padding-bottom:0;}

/* breadcrumb (plain pages) */
.breadcrumb{padding:14px 0;font-size:13px;color:var(--ink-soft);}
.breadcrumb a{color:var(--blue);}
.breadcrumb a:hover{color:var(--orange);}
.breadcrumb span.sep{margin:0 8px;color:var(--ink-soft);}

/* ---------------- Home hero slider ---------------- */
.home-hero{position:relative;height:560px;overflow:hidden;background:var(--blue-deep);}
.home-hero .slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;display:flex;align-items:center;}
.home-hero .slide.active{opacity:1;}
.home-hero .slide .bg{position:absolute;inset:0;background-size:cover;background-position:center;}
/* show the original hero photo as-is (no color tint/gradient) */
.home-hero .slide .overlay{position:absolute;inset:0;background:transparent;}
.home-hero .slide .cap{position:relative;z-index:2;max-width:760px;color:#fff;padding:0 28px;}
.home-hero .slide .cap .big{font-size:46px;font-weight:800;line-height:1.1;margin:0 0 14px;text-shadow:0 2px 18px rgba(0,0,0,.55);}
.home-hero .slide .cap .mid{font-size:20px;margin:0 0 18px;text-shadow:0 2px 12px rgba(0,0,0,.55);}
.home-hero .slide .cap .link{display:inline-flex;align-items:center;gap:0;color:#fff;font-weight:700;font-size:17px;
  background:var(--blue);border:0;padding:11px 22px;border-radius:40px;}
.home-hero .slide .cap .link:hover{background:var(--orange);border-color:var(--orange);color:#fff;}
/* slide switcher: one thumbnail per banner, centred under the image */
.home-hero .thumbs{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:10px;}
.home-hero .thumbs button{width:96px;height:54px;padding:0;border:2px solid rgba(255,255,255,.5);border-radius:3px;
  overflow:hidden;cursor:pointer;background:#12202b;opacity:.72;outline:0;
  transition:opacity .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;}
.home-hero .thumbs button img{display:block;width:100%;height:100%;object-fit:cover;}
.home-hero .thumbs button:hover{opacity:1;border-color:var(--orange);box-shadow:0 0 0 2px var(--orange);}
.home-hero .thumbs button:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.home-hero .thumbs button.active{opacity:1;border-color:var(--orange);box-shadow:0 0 0 2px var(--orange);transform:translateY(-2px);}

/* ---------------- Section titles ---------------- */
.section{padding:64px 0;}
.section.grey{background:var(--bg-grey);}
.section-title{font-size:28px;text-align:left;margin:0 0 6px;color:var(--blue);}
.section-sub{color:var(--ink-soft);margin:0 0 36px;font-size:16px;}

/* ---------------- Circle cards (home solutions/products) ---------------- */
.circle-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;}
.circle-card{text-align:center;}
.circle-card a.circle{display:block;width:90%;max-width:220px;aspect-ratio:1/1;height:auto;border-radius:50%;margin:0 auto 16px;overflow:hidden;
  box-shadow:0 0 0 8px var(--blue),0 8px 18px rgba(0,0,0,.12);transition:transform .2s ease,box-shadow .2s ease;background:transparent;}
.circle-card a.circle:hover{transform:translateY(-6px);box-shadow:0 0 0 8px var(--orange),0 10px 22px rgba(0,0,0,.20);}
.circle-card .c-title{color:var(--blue);font-weight:700;font-size:17px;text-align:center;display:block;margin-bottom:6px;transition:color .15s ease;}
.circle-card .c-title:hover{color:var(--orange);}
/* hovering the blue title below also turns the circle ring orange */
.circle-card:has(.c-title:hover) a.circle,
.circle-card.is-hover a.circle{transform:translateY(-6px);box-shadow:0 0 0 8px var(--orange),0 10px 22px rgba(0,0,0,.20);}
/* hovering the circle also turns the blue title orange */
.circle-card:has(a.circle:hover) .c-title,
.circle-card.is-hover .c-title{color:var(--orange);}
.circle-card .c-desc{color:var(--ink-soft);font-size:14px;text-align:left;margin:0;line-height:1.55;}

/* ---------------- Category cards (solutions/products landing) ---------------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}

/* ---------------- Alternating feature rows (solution subpages) ---------------- */
.feature-row{display:flex;align-items:center;gap:48px;padding:48px 0;}
.feature-row .ft-text{flex:1;}
.feature-row .ft-text h3{color:var(--blue);font-size:21px;margin:0 0 12px;}
.feature-row .ft-text p{color:var(--ink);margin:0;}
.feature-row .ft-img{flex:0 0 320px;display:flex;justify-content:center;}
.feature-row .ft-img .ring{width:280px;height:280px;border-radius:50%;background:var(--blue);padding:8px;
  box-shadow:0 10px 24px rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.feature-row.grey{background:var(--bg-grey);}
.feature-row.reverse .ft-text{order:2;}
.feature-row.reverse .ft-img{order:1;}

/* ---------------- Light-blue product index (end of solution pages) ---------------- */
.product-index{background:var(--blue);padding:54px 0;}
.product-index h2{color:#fff;text-align:left;background:none;display:block;padding:0;border-radius:0;font-size:21px;font-weight:700;margin:0 0 30px;position:static;left:auto;transform:none;}
.pi-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:14px;}
.pi-item{text-align:center;}
.pi-item a{display:block;}
.pi-item .pi-circle{width:84px;height:84px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;color:#fff;transition:transform .18s ease;}
.pi-item a:hover .pi-circle{transform:scale(1.08);}
.pi-item .pi-label{color:#fff;font-size:12px;font-weight:600;display:block;}
.pi-item a:hover .pi-label{color:var(--orange);}

/* ---------------- Product channel bar inside the blue hero ---------------- */
/* The nine product channels sit in the blue hero instead of a separate white
   strip: one shared blue background, no separators, white labels, orange on
   hover, and an orange dropdown block for a channel that owns sub-pages. */
.hero.hero-nav{overflow:visible;}
.hero.hero-nav .container{padding:0 28px;display:block;}
.cat-nav{position:relative;z-index:6;}
.hero.hero-nav .prod-scroll{width:100%;overflow:visible;scrollbar-width:none;-ms-overflow-style:none;}
.hero.hero-nav .prod-scroll::-webkit-scrollbar{display:none;}
.prod-seg{display:flex;align-items:stretch;width:100%;flex-wrap:wrap;}
.prod-seg > a,.cat-item > a{
  display:flex;align-items:center;justify-content:center;
  padding:15px 18px;color:#fff;font-family:var(--font);font-size:15px;font-weight:500;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
.cat-item{display:flex;position:relative;}
/* the active channel keeps a deeper blue; the hover rule comes last so that
   hovering the active channel also turns it orange */
.prod-seg > a.active,.cat-item > a.active{background:var(--blue-dark);color:#fff;font-weight:700;}
.prod-seg > a:hover,.cat-item:hover > a{background:var(--orange);color:#fff;}
/* dropdown block under a channel that owns sub-pages */
.cat-drop{position:absolute;top:100%;left:0;min-width:100%;z-index:20;background:var(--orange);display:none;box-shadow:0 12px 26px rgba(0,0,0,.20);}
.cat-item:hover .cat-drop,.cat-item.open .cat-drop,.cat-item:focus-within .cat-drop{display:block;}
.cat-drop a{display:block;padding:12px 22px;color:#fff;font-family:var(--font);font-size:14px;font-weight:500;white-space:nowrap;}
.cat-drop a:hover{background:rgba(0,0,0,.14);color:#fff;}
.prod-panel[hidden]{display:none;}
.prod-panel > .section:first-child{padding-top:48px;}

/* ---------------- News channels ---------------- */
/* News keeps its own title + breadcrumb hero and the white segmented control. */
.news-filter{background:#fff;}
.news-filter .container{display:flex;align-items:center;padding-top:16px;padding-bottom:0;}
/* the listing sits 48px under the switcher — same rhythm as the Regions bar on /references/ */
.news-filter + .section{padding-top:48px;}
.news-seg{display:inline-flex;border:1px solid #d8e2e9;border-radius:var(--radius);overflow:hidden;background:#fff;}
.news-seg a{padding:10px 30px;font-size:15px;font-weight:500;color:var(--ink-soft);transition:background .18s ease,color .18s ease;}
.news-seg a+a{border-left:1px solid #d8e2e9;}
.news-seg a:hover{color:var(--orange);}
.news-seg a.active{background:var(--blue);color:#fff;font-weight:700;}
/* References region tabs (mirror news tabs: green base, active=yellow, white text, orange hover, white divider) */
.ref-region-h{font-size:20px;color:var(--blue-deep);margin:36px 0 4px;padding-left:14px;border-left:5px solid var(--orange);}

/* Region filter bar + dropdown */
.region-filter{position:relative;margin:48px 0 30px;}
.rf-bar{display:flex;align-items:center;gap:14px;width:100%;background:#fff;border:1px solid #e2e6ea;border-radius:8px;padding:18px 22px;cursor:pointer;font:inherit;color:var(--ink-soft);transition:background .15s ease;}
.region-filter:hover .rf-bar{background:#f2f3f5;}
.rf-search{width:22px;height:22px;flex:0 0 auto;color:var(--blue);}
.rf-label{font-weight:400;color:var(--blue);font-size:20px;}
.rf-value{margin-left:auto;font-size:16px;font-weight:600;line-height:inherit;color:var(--blue-deep);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50%;}
.rf-chevron{margin-left:10px;width:20px;height:20px;color:var(--blue);transition:transform .2s ease,color .2s ease;}
.region-filter.open .rf-chevron{transform:rotate(90deg);color:var(--blue);}
.region-filter.open .rf-bar{border-color:#cfe2ee;}
.rf-dropdown{display:none;position:relative;margin:6px 0 4px;background:#fff;border:1px solid #e2e6ea;border-radius:8px;box-shadow:0 6px 18px rgba(20,40,80,.06);padding:16px 18px;}
.region-filter.open .rf-dropdown{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 12px;}
.rf-opt{display:flex;align-items:center;gap:12px;width:100%;padding:10px 8px;border:0;border-radius:6px;background:none;font:inherit;font-size:15px;text-align:left;cursor:pointer;color:var(--ink-soft);text-decoration:none;transition:background .12s ease;}
.rf-opt:hover{background:#f4f7fa;}
.rf-dot{width:16px;height:16px;border-radius:50%;border:2px solid #c4ccd6;flex:0 0 auto;position:relative;}
.rf-opt.active{color:var(--blue);}
.rf-opt.active .rf-dot{border-color:var(--blue);}
.rf-opt.active .rf-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--blue);}
/* Two filter bars on references pages: Regions (left) + Solutions (right) */
.ref-filters{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:48px 0 30px;align-items:start;}
.ref-filters .region-filter{margin:0;}
.ref-section{padding:0 0 80px;}
.ref-panel[hidden]{display:none;}
/* Reference case cards: 3:2 photo, country · year, title, one-sentence summary */
.ref-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px;}
.ref-case{display:block;color:inherit;text-decoration:none;}
.ref-case[hidden]{display:none;}
.rc-img{display:block;aspect-ratio:3/2;border-radius:5px;background:#eef2f6;overflow:hidden;}
.rc-img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease;}
.ref-case:hover .rc-img img{transform:scale(1.04);}
.rc-meta{margin:16px 0 0;font-size:12.5px;line-height:1.4;letter-spacing:.02em;color:var(--blue);font-weight:500;}
.rc-meta em{font-style:normal;color:#9aa6b0;font-weight:400;}
.rc-title{margin:6px 0 8px;font-size:17px;line-height:1.38;color:var(--blue-deep);font-weight:700;}
.rc-sum{margin:0;font-size:13px;line-height:1.62;color:var(--ink-soft);}
@media(max-width:600px){.region-filter{margin-top:34px;}.rf-bar{padding:14px 16px;gap:10px;}.rf-label{font-size:17px;}.rf-value{font-size:14px;max-width:55%;}.rf-search{width:19px;height:19px;}.region-filter.open .rf-dropdown{grid-template-columns:repeat(2,1fr);padding:14px 16px;}.ref-section{padding-bottom:50px;}}
.news-panel[hidden]{display:none;}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.news-card{display:flex;align-items:center;gap:18px;background:var(--bg-grey);border-radius:10px;padding:16px 18px;min-height:168px;transition:transform .2s ease,box-shadow .2s ease;}
.news-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.nc-img{flex:0 0 128px;width:128px;height:128px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 5px #fff,0 6px 16px rgba(0,0,0,.12);}
.nc-img img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.nc-body{flex:1;min-width:0;}
.nc-date{display:block;color:var(--ink-soft);font-size:12px;font-weight:700;margin:0 0 8px;}
.news-card h3{font-size:18px;line-height:1.35;margin:0 0 5px;color:var(--blue-deep);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.news-card:hover h3{color:var(--orange);}
.news-card p{color:var(--ink-soft);font-size:14px;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}

/* pagination */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;margin:40px 0 0;}
.pager a{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg-grey);color:var(--ink);font-weight:700;}
.pager a.active,.pager a:hover{background:var(--blue);color:#fff;}

/* ---------------- Company landing circular icons ---------------- */

.four-block{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:24px;}
.fb{background:#fff;border:1px solid var(--line);border-left:5px solid var(--blue);border-radius:var(--radius);padding:26px 28px;}
.fb h3{margin:0 0 12px;font-size:21px;color:var(--blue);}
.fb ul{margin:0;padding-left:20px;color:var(--ink);}
.fb ul li{margin-bottom:8px;}

/* ---------------- Vision/Mission ---------------- */
.vm-hero{background:linear-gradient(120deg,var(--blue-deep),var(--blue));color:#fff;text-align:center;padding:70px 28px;}
.vm-hero h2{color:#fff;font-size:30px;max-width:880px;margin:0 auto;}
.vm-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1100px;margin:30px auto 0;}
.vm-rule{width:60px;height:3px;background:#fff;margin:0 auto 26px;opacity:.8;}

/* ---------------- Forms (Become a Partner) ---------------- */
.form-wrap{max-width:760px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:38px 40px;box-shadow:var(--shadow-sm);}
.form-section{margin-bottom:30px;}
.form-section>h3{font-size:18px;color:var(--blue-deep);border-bottom:2px solid var(--line);padding-bottom:8px;margin-bottom:18px;}
.field{margin-bottom:18px;}
.field label{display:block;font-weight:600;color:var(--ink);margin-bottom:7px;font-size:14px;}
.field label .req{color:var(--red);}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
  width:100%;padding:11px 14px;border:1px solid #cfd6db;border-radius:var(--radius);font-size:15px;font-family:var(--font);color:var(--ink);background:#fff;outline:none;transition:border-color .15s ease;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);}
.field textarea{min-height:96px;resize:vertical;}
.checks{display:flex;flex-wrap:wrap;gap:10px 26px;}
.checks label{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--ink);cursor:pointer;}
.checks input{width:17px;height:17px;accent-color:var(--blue);}
.btn-submit{display:block;margin:30px auto 0;background:var(--blue);color:#fff;border:0;padding:14px 48px;border-radius:40px;font-size:16px;font-weight:700;cursor:pointer;transition:background .18s ease;}
.btn-submit:hover{background:var(--orange);}
.form-note{font-size:13px;color:var(--ink-soft);}
.form-error{display:none;background:#fdecea;border:1px solid var(--red);color:var(--red);border-radius:var(--radius);padding:16px 20px;margin-bottom:24px;font-size:14px;}
.form-error.show{display:block;}

/* contact-us hero w/ button */
/* caption sits in the empty sky area (top-left) so the horses stay fully visible */
.contact-hero{position:relative;min-height:560px;display:flex;align-items:flex-start;color:#fff;overflow:hidden;}
.contact-hero .bg{position:absolute;inset:0;}
/* only a soft left-side tint for text legibility; the photo itself is untouched */
.contact-hero .bg::after{content:"";position:absolute;left:0;top:0;bottom:0;width:78%;
  background:linear-gradient(100deg,rgba(11,61,92,.62) 0%,rgba(11,61,92,.48) 34%,rgba(11,61,92,.18) 62%,rgba(11,61,92,0) 100%);}
/* keep the caption pinned to the LEFT edge of the photo (red-box placement) */
.contact-hero .container{width:100%;flex:0 0 auto;}
.contact-hero .cap{position:relative;z-index:2;max-width:620px;padding-top:104px;}
.contact-hero .cap p{font-size:20px;font-weight:700;line-height:1.55;margin:0 0 2px;text-shadow:0 2px 12px rgba(0,0,0,.45);}
.contact-hero .cap .btn{display:inline-flex;align-items:center;gap:0;margin-top:22px;background:var(--blue);color:#fff;font-weight:700;font-size:17px;padding:11px 30px;border-radius:40px;}
.contact-hero .cap .btn:hover{background:var(--orange);color:#fff;}
/* right-pointing solid triangle, same size as a capital letter (12px tall), CSS-drawn
   so the rightmost point can be aligned precisely with the text and sit flush against it */
/* one shared rule: the hero buttons on the home page and Contact Us must stay identical */
.home-hero .slide .cap .link,
.contact-hero .cap .btn{display:inline-flex;align-items:center;gap:0;background:var(--blue);color:#fff;
  font-weight:700;font-size:17px;line-height:1.2;border:0;border-radius:40px;padding:11px 22px;}
.contact-hero .cap .btn{margin-top:22px;padding:11px 30px;}

/* CTA marker: a drawn arrow (was a CSS triangle that read as a video play button) */
.cap .tri{display:inline-block;position:relative;width:15px;height:10px;margin:1px 9px 0 0;flex:0 0 auto;}
.cap .tri::before{content:"";position:absolute;left:0;top:50%;width:13px;height:2px;margin-top:-1px;
  background:currentColor;border-radius:1px;}
.cap .tri::after{content:"";position:absolute;right:1px;top:50%;width:7px;height:7px;margin-top:-4px;
  border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);border-radius:1px;}

/* ---------------- Footer ---------------- */
.footer{background:var(--blue-deep);color:#fff;}
.footer .top{display:grid;grid-template-columns:1.1fr 1fr 1.1fr;gap:40px;max-width:var(--maxw);margin:0 auto;padding:52px 28px;}
.footer h4{color:#fff;font-size:17px;margin:0 0 16px;}
.footer .newsletter p{color:#cfe6f3;font-size:14px;margin:0 0 14px;}
.footer .newsletter .sub{display:flex;background:#fff;border-radius:4px;overflow:hidden;}
.footer .newsletter .sub input{flex:1;border:0;outline:0;padding:11px 14px;font-size:14px;color:var(--ink);}
.footer .newsletter .sub button{background:var(--orange);color:#fff;border:0;padding:0 22px;font-weight:700;cursor:pointer;font-size:14px;}
.footer .newsletter .sub button:hover{background:#d9730c;}
.footer .newsletter .thanks{display:none;color:var(--green);font-size:14px;margin-top:10px;font-weight:600;}
.footer .newsletter .thanks.show{display:block;}
.footer .newsletter .partner-btn{display:inline-block;margin-top:18px;background:var(--orange);color:#fff;font-weight:700;padding:11px 24px;border-radius:40px;font-size:14px;}
.footer .newsletter .partner-btn:hover{background:#d9730c;color:#fff;}
.footer .social a{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:#fff;color:var(--blue-deep);margin-right:10px;font-weight:700;font-size:12px;position:relative;transition:transform .15s ease,box-shadow .18s ease;}
/* hover = orange ring outside the white circle, same treatment as the 10 circle cards on the home page */
.footer .social a:hover{transform:translateY(-3px);box-shadow:0 0 0 3px var(--orange);}
.footer .social a .soc-img{width:24px;height:24px;display:block;object-fit:contain;}
.footer .social a .tip{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);background:#222;color:#fff;font-size:12px;padding:5px 10px;border-radius:6px;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .15s ease;}
.footer .social a .tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#222;}
.footer .social a:hover .tip{opacity:1;visibility:visible;}
/* the QR popover already carries a title — hide the tooltip behind it */
.footer .social a.wx .tip{display:none;}
.footer .contact-info p{color:#cfe6f3;font-size:14px;margin:0 0 8px;line-height:1.6;}
.footer .contact-info a{color:#fff;}
.footer .contact-info a:hover{color:var(--yellow);}
.footer .contact-info .mail{display:inline-flex;align-items:center;gap:8px;}
.footer .contact-info .mail:hover,.footer .contact-info .mail:hover svg{color:var(--blue);}
.footer .bottombar{background:#06283a;padding:18px 0;font-size:13px;color:#cfe6f3;}
.footer .bottombar .container{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.footer .bottombar .tabs{display:flex;gap:18px;flex-wrap:wrap;}
.footer .bottombar .tabs a{color:#cfe6f3;}
.footer .bottombar .tabs a:hover{color:var(--orange);}
/* desktop: slightly wider spacing between the footer tabs */
@media(min-width:861px){
  .footer .bottombar .tabs{gap:26px;flex-wrap:nowrap;}
}
@media(min-width:1160px){
  /* same 3-column grid as the footer top, so the first tab lines up with "Contact" */
  .footer .bottombar .container{display:grid;grid-template-columns:1.1fr 1fr 1.1fr;gap:40px;}
  .footer .bottombar .tabs{grid-column:3;justify-self:start;}
}

/* ---------------- Back to top ---------------- */
.totop{position:fixed;right:24px;bottom:24px;width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;
  transform:translateY(10px);transition:opacity .2s ease,transform .2s ease,background .2s ease;z-index:80;box-shadow:var(--shadow-md);}
.totop.show{opacity:1;visibility:visible;transform:translateY(0);}
.totop .totop-ico{display:block;font-size:19px;line-height:1;}
.totop:hover{background:var(--orange);}

/* ---------------- Page loader ---------------- */
.loader{position:fixed;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;z-index:200;transition:opacity .35s ease,visibility .35s;}
.loader.hide{opacity:0;visibility:hidden;}
.loader .spin{width:54px;height:54px;border:5px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------------- Search page ---------------- */
.search-result{display:block;padding:20px 0;border-bottom:1px solid var(--line);}
.search-result .t{color:var(--blue);font-weight:700;font-size:18px;}
.search-result:hover .t{color:var(--orange);}
.search-result .d{color:var(--ink-soft);font-size:13px;}
.loadmore{display:inline-block;margin:30px auto 0;background:var(--bg-grey);color:var(--ink);padding:12px 40px;border-radius:40px;font-weight:700;cursor:pointer;}
/* b.3 search page */
.search-results .search-result .t{display:block;}
.search-results .search-result .d{display:block;margin-top:3px;}
.load-more{display:block;margin:28px auto 0;background:#eef1f4;color:var(--ink-soft);border:0;border-radius:4px;padding:11px 30px;font-weight:700;letter-spacing:.6px;cursor:pointer;transition:background .15s ease;font-family:inherit;font-size:13px;}
.load-more:hover{background:#d7dde2;}
.load-more[hidden]{display:none;}
.no-result{color:var(--ink-soft);font-size:15px;padding:26px 0;margin:0;}
.no-result[hidden]{display:none;}
.loadmore:hover{background:#e3e8ec;}

/* ---------------- References ---------------- */
.region-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

/* ---------------- Responsive ---------------- */
@media(max-width:1100px){
  .circle-grid{grid-template-columns:repeat(3,1fr);}
  .pi-grid{grid-template-columns:repeat(5,1fr);}
  .cat-grid{grid-template-columns:repeat(3,1fr);}
  .vm-pillars{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:860px){
  .nav,.searchbox{display:none;}
  .menu-toggle{display:block;}
  .nav.mobile-open{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    align-items:stretch;padding:10px 0;box-shadow:var(--shadow-md);border-top:1px solid var(--line);}
  .nav.mobile-open>li>a{padding:12px 22px;}
  .nav.mobile-open .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 8px 22px;}
  .circle-grid,.pi-grid{grid-template-columns:repeat(2,1fr);}
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .feature-row,.feature-row.reverse{flex-direction:column;text-align:center;}
  .feature-row.reverse .ft-text,.feature-row.reverse .ft-img{order:initial;}
  .news-grid,.four-block{grid-template-columns:1fr;}
  .footer .top{grid-template-columns:1fr;}
  .home-hero{height:480px;}
  .home-hero .slide .cap .big{font-size:32px;}
}
@media(max-width:520px){
  .circle-grid,.pi-grid,.cat-grid{grid-template-columns:1fr;}
  .section{padding:44px 0;}
  .home-hero .thumbs{gap:7px;bottom:16px;}
  .home-hero .thumbs button{width:74px;height:42px;}
}

/* ---- Real images (synced from source assets) ---- */
/* logo sized to ~90% of the white header band height */
.logo img{height:64px;width:auto;display:block;transition:height .2s ease;}
.header.shrink .logo img{height:54px;}
/* show the whole product inside the circle (never crop it) */
.circle-card a.circle img{width:100%;height:100%;object-fit:cover;display:block;}
.privacy-hero{margin:14px 0 26px;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);}
.privacy-hero img{width:100%;height:auto;display:block;}
.footer .social a.wx{position:relative;cursor:pointer;}
.footer .social a.wx .wx-pop{position:absolute;bottom:54px;right:-12px;width:200px;background:#0b2a3f;color:#fff;
  padding:12px 12px 14px;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.3);opacity:0;visibility:hidden;
  transform:translateY(6px);transition:.18s ease;z-index:30;}
.footer .social a.wx .wx-pop:after{content:"";position:absolute;bottom:-6px;right:20px;width:13px;height:13px;
  background:#0b2a3f;transform:rotate(45deg);border-radius:2px;}
.footer .social a.wx:hover .wx-pop{opacity:1;visibility:visible;transform:translateY(0);}
.footer .social a.wx .wx-pop-h{display:block;color:#fff;font-size:13px;font-weight:700;margin-bottom:10px;text-align:center;}
.footer .social a.wx .wx-pop img{width:150px;height:150px;display:block;margin:0 auto;border:3px solid #000;border-radius:8px;background:#fff;}

/* ===== Solutions pages with real photos ===== */
.sol-index{background:#fff;}
.sol-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;justify-items:center;}
.sol-card{display:block;text-align:center;width:100%;max-width:350px;}
/* five cards sit left-aligned like every other grid on the site */
.sol-card .sol-fr{display:block;width:100%;margin:0 auto;aspect-ratio:1/1;border-radius:50%;background:var(--blue);padding:8px;box-shadow:0 10px 24px rgba(0,0,0,.16);transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;}
.sol-card .sol-fr img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.sol-card:hover .sol-fr{transform:translateY(-5px);box-shadow:0 14px 30px rgba(0,0,0,.22);background:var(--orange);}
.sol-card .sol-name{display:block;margin-top:16px;color:var(--blue);font-weight:700;font-size:18px;transition:color .15s ease;}
.sol-card:hover .sol-name{color:var(--orange);}
.hero-img{flex:0 0 300px;display:flex;justify-content:center;}
/* white product cut-outs: a white ring would vanish into the image, so those
   two heroes use a grey ring (yellow was too loud on the blue band) */
.hero-img.grey-ring .ring{background:#d3d9de;box-shadow:0 12px 30px rgba(0,0,0,.22);}
.hero-img .ring{width:300px;height:300px;border-radius:50%;border:0;background:#fff;padding:8px;box-shadow:0 12px 30px rgba(0,0,0,.18);overflow:hidden;}
.hero-img .ring img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
/* Full-width scrolling banner: sticky stage plus a zoom reveal from detail to the whole
   scene; the image is fitted to the viewport width (never cropped left/right) so only
   top/bottom is cropped; --bg-y keeps the solar panels inside the window. */
.sol-banner{position:relative;width:100%;height:190vh;background:#fff;}
.sol-banner-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:#fff;}
.sol-banner-photo{position:absolute;inset:0;background-repeat:no-repeat;background-size:100% auto;
  background-position:center var(--bg-y,50%);
  transform-origin:50% var(--bg-y,50%);transform:scale(1);will-change:transform;}
.feature-band{padding:52px 0;}
.feature-band.grey{background:var(--bg-grey);}
.feature-band .feature-row{padding:0;}
.feature-row .ft-img .ring{overflow:hidden;}
.feature-row .ft-img .ring img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
@media(max-width:860px){.sol-cards{grid-template-columns:1fr;}.hero-img{flex:0 0 auto;}
  /* no sticky reveal on small screens: plain cropped banner */
  .sol-banner{height:auto;}
  .sol-banner-pin{position:static;height:56vw;min-height:230px;}
  .sol-banner-photo{background-size:cover;}}

/* ===== Company pages (real photos) ===== */
.about-imgs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:26px 0;}
.about-imgs img{width:100%;height:300px;object-fit:cover;border-radius:12px;display:block;box-shadow:var(--shadow-sm);}
.vm-image{position:relative;background:url('/assets/img/company/vision-bg.webp') 66% 36%/cover no-repeat;color:#fff;padding:88px 28px;}
/* scrim: dense behind the text on the left, thin on the right so the purple nebula stays visible */
.vm-image::before{content:"";position:absolute;inset:0;background:
  linear-gradient(96deg,rgba(8,44,74,.95) 0%,rgba(8,44,74,.90) 22%,rgba(9,40,72,.70) 44%,rgba(14,36,72,.46) 66%,rgba(22,32,74,.24) 100%),
  linear-gradient(180deg,rgba(8,44,74,.45) 0%,rgba(8,44,74,0) 20%,rgba(8,44,74,0) 74%,rgba(8,44,74,.55) 100%);}
.vm-image .container{position:relative;z-index:2;max-width:1120px;margin:0 auto;text-align:center;}
.vm-image .vm-h{color:#fff;font-size:28px;margin:0 0 8px;text-shadow:0 1px 5px rgba(3,22,38,.55);}
.vm-image .vm-p{color:#fff;font-size:16px;max-width:820px;margin:14px auto 0;text-shadow:0 1px 5px rgba(3,22,38,.55);}
.vm-image .vm-rule{background:#fff;opacity:.85;margin:24px auto;}
.vm-image .vm-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;max-width:1080px;margin:8px auto 0;}
.vpillar{text-align:center;}
.vpillar .vpico{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.65);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.vpillar .vpico svg{width:38px;height:38px;}
.vpillar h4{color:#fff;font-size:17px;margin:0 0 8px;text-shadow:0 1px 5px rgba(3,22,38,.55);}
.vpillar p{color:#fff;font-size:14px;margin:0;text-shadow:0 1px 5px rgba(3,22,38,.55);}
.contact-hero .bg{background:url('/assets/img/company/contact.webp') center 42%/cover no-repeat;}
@media(max-width:760px){.about-imgs{grid-template-columns:1fr;}.vm-image .vm-pillars{grid-template-columns:repeat(2,1fr);}}

/* ===== Company index — 4 circular photo cards ===== */
.co-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;text-align:left;margin-top:30px;}
.co-card{max-width:250px;margin:0 auto;}
.co-img{display:block;width:100%;max-width:250px;margin:0 auto 16px;aspect-ratio:1/1;border-radius:50%;border:8px solid var(--blue);overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.16);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.co-img img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.co-img:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.22);}
.co-card h3{font-size:18px;margin:0 0 8px;text-align:center;}
.co-card h3 a{color:var(--blue);}
.co-card h3 a:hover{color:var(--orange);}
.co-card p{color:var(--ink-soft);font-size:14px;margin:0;text-align:center;}
.co-card:hover .co-img{border-color:var(--orange);}
.co-card:hover h3 a{color:var(--orange);}
@media(max-width:760px){.co-cards{grid-template-columns:repeat(2,1fr);}}

/* =====================================================================
   Mobile adaptation  (<=860: tablet / <=600: phone / <=380: small phone)
   Loaded last on purpose so it wins over the earlier responsive block.
   ===================================================================== */
/* the search box that lives inside the mobile menu */
.m-search{display:none;}

@media(max-width:860px){
  .container,.container-wide{padding:0 20px;}

  /* ---- header ---- */
  .header .container{height:62px;gap:12px;}
  .header.shrink .container{height:56px;}
  .logo img{height:46px;}
  .header.shrink .logo img{height:40px;}
  .menu-toggle{font-size:26px;line-height:1;padding:4px 2px;}
  .nav.mobile-open{max-height:calc(100vh - 62px);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 0 12px;}
  .nav.mobile-open>li>a{padding:13px 20px;font-size:15px;}
  .nav.mobile-open .caret{margin-left:auto;font-size:16px;transition:transform .2s ease;}
  .nav.mobile-open>li.open .caret{transform:rotate(180deg);}
  /* the desktop hover rule draws the underline against the whole <li>; on phones
     that would land under the expanded sub menu instead of under the row */
  .nav.mobile-open>li>a:hover::after,
  .nav.mobile-open>li.open>a::after{content:none;}
  .nav.mobile-open>li.open>a{background:#eef6fb;color:var(--orange);}
  /* sub menus stay collapsed until the parent row is tapped */
  .nav.mobile-open .dropdown{display:none;}
  .nav.mobile-open>li.open>.dropdown{display:block;position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-radius:0;padding:0 0 10px 20px;background:#f6f9fb;}
  .nav.mobile-open .dropdown a{padding:11px 14px;}
  .nav.mobile-open .m-search{display:block;padding:2px 20px 14px;}
  .nav.mobile-open .m-search .searchbox{display:flex;width:100%;height:42px;}
  .nav.mobile-open .m-search .searchbox:focus-within{width:100%;}
  .searchbox input{font-size:16px;}          /* stops iOS from zooming on focus */

  /* ---- top utility bar ---- */
  .topbar{font-size:12px;}
  .topbar .container{height:34px;padding:0 16px;}
  .topbar .social-mini{gap:12px;}

  /* ---- blue page hero ---- */
  .hero .container{padding:20px 20px 18px;}
  .hero-crumbbar{padding-top:12px;padding-bottom:0;justify-content:flex-start;}
  .hero h1{font-size:26px;}
  .hero .hero-crumb{padding-top:2px;}
  .hero .breadcrumb{font-size:12px;}

  /* ---- home hero ---- */
  /* the caption is a flex item: without an explicit width it sizes to the text
     and any long line runs past the right edge of the screen */
  .home-hero .slide .cap{width:100%;max-width:100%;padding:0 20px;}
  .home-hero .slide .cap .big{font-size:28px;line-height:1.15;}
  .home-hero .slide .cap .mid{font-size:16px;line-height:1.55;}

  /* ---- grids: fewer, but not one-per-row ---- */
  .circle-grid{grid-template-columns:repeat(2,1fr);gap:28px 18px;}
  .pi-grid{grid-template-columns:repeat(3,1fr);gap:18px 12px;}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:18px;}
  .hero.hero-nav .container{padding:0 20px;}
  /* on phones the row scrolls sideways; a scroll container clips its children,
     so the dropdown opens in flow under its tab instead of hanging out */
  .hero.hero-nav .prod-scroll{overflow-x:auto;}
  .prod-seg{flex-wrap:nowrap;}
  .prod-seg > a,.cat-item > a{padding:11px 12px;font-size:13px;}
  .cat-item{flex-direction:column;align-items:stretch;}
  .cat-drop{position:static;min-width:190px;box-shadow:none;}
  .cat-drop a{padding:10px 16px;font-size:13px;}
  .prod-panel > .section:first-child{padding-top:36px;}
  /* news keeps the white segmented control */
  .news-filter .container{padding-top:14px;padding-bottom:0;}
  .news-filter + .section{padding-top:36px;}
  .news-seg{display:flex;width:100%;}
  .news-seg a{flex:1;text-align:center;padding:10px 8px;font-size:14px;}
  .region-grid{grid-template-columns:repeat(2,1fr);gap:16px;}

  .sol-cards{grid-template-columns:repeat(2,1fr);gap:28px 18px;}
  .sol-card{max-width:260px;}
  .sol-card .sol-name{font-size:16px;margin-top:12px;}

  /* ---- vision / mission ---- */
  .vm-hero{padding:48px 20px;}
  .vm-hero h2{font-size:22px;line-height:1.55;}
  .vm-image{padding:56px 20px;}
  .vm-image .vm-h{font-size:20px;line-height:1.4;}
  .vm-image .vm-p{font-size:14px;}
  .vm-image .vm-pillars{grid-template-columns:1fr;max-width:420px;gap:30px;}
  .vpillar .vpico{width:72px;height:72px;}
  .vpillar .vpico svg{width:32px;height:32px;}

  /* ---- contact hero ---- */
  .contact-hero{min-height:500px;}
  .contact-hero .cap{padding-top:60px;max-width:none;}
  .contact-hero .cap p{font-size:16px;line-height:1.6;}
  .contact-hero .cap .btn{font-size:15px;padding:10px 20px;}
  .contact-hero .bg::after{width:100%;background:linear-gradient(100deg,rgba(11,61,92,.62) 0%,rgba(11,61,92,.42) 55%,rgba(11,61,92,.12) 100%);}

  /* ---- forms ---- */
  .form-wrap{padding:24px 18px;border-radius:10px;}
  .field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{font-size:16px;}
  .checks{gap:12px 18px;}
  .checks label{align-items:flex-start;font-size:14px;line-height:1.45;}
  .checks input{margin-top:3px;flex:0 0 auto;}
  .form-wrap .btn-submit{width:100%;padding:14px 18px;}

  /* product detail: text block then the icon, centred on its own row */
  .prod-ico{width:100%;display:flex;justify-content:center;}
  .prod-ico .ring{max-width:100%;}

  /* ---- footer ---- */
  .footer .top{grid-template-columns:1fr 1fr;padding:40px 20px;gap:32px 28px;}
  .footer .bottombar{font-size:12px;}
  .footer .bottombar .tabs{flex-wrap:wrap;}
}

@media(max-width:600px){
  .section{padding:42px 0;}
  .section-title{font-size:22px;}
  .section-sub{font-size:14px;margin-bottom:26px;}
  .footer .top{grid-template-columns:1fr;}

  /* phones: every ring steps down from 8px to 6px (was 4px on the home cards) */
  .circle-card a.circle{width:100%;max-width:none;box-shadow:0 0 0 6px var(--blue),0 6px 14px rgba(0,0,0,.12);}
  .circle-card a.circle:hover,
  .circle-card:has(.c-title:hover) a.circle,
  .circle-card.is-hover a.circle{box-shadow:0 0 0 6px var(--orange),0 8px 18px rgba(0,0,0,.18);}
  .sol-card .sol-fr{padding:6px;}
  .hero-img .ring{padding:6px;}
  .feature-row .ft-img .ring{padding:6px;}
  .circle-card .c-title{font-size:15px;}
  .circle-card .c-desc{font-size:13px;line-height:1.5;}

  .pi-item .pi-circle{width:74px;height:74px;}
  .pi-item .pi-label{font-size:11px;}


  .home-hero .slide .cap .big{font-size:26px;}
  .home-hero .slide .cap .mid{font-size:15px;}
  .home-hero .slide .cap .link{font-size:14px;padding:9px 16px;}
  .home-hero .slide .cap .link .tri{width:13px;margin-right:7px;}

  .hero h1{font-size:22px;}
  .vm-hero h2{font-size:19px;}
  .hero-img .ring{width:250px;height:250px;}

  .news-card .thumb{height:150px;}
  .pager a{width:34px;height:34px;}

  /* solution / product text blocks read better a touch tighter */
  .ft-text h3{font-size:20px;}
  .feature-row .ft-text p{font-size:16px;}

  .footer .newsletter .sub button{padding:0 16px;}
  .footer .social a{width:40px;height:40px;margin-right:8px;}
  .footer .social a .soc-img{width:22px;height:22px;}
}

@media(max-width:380px){
  .container,.container-wide{padding:0 16px;}
  .topbar .container{padding:0 12px;}
  .topbar .social-mini{gap:9px;}
  .home-hero .thumbs button{width:66px;height:37px;}
  .circle-grid{gap:22px 12px;}
  .pi-grid{gap:14px 8px;}
  .hero-img .ring{width:252px;height:252px;}
}

/* ===== Cookie consent bar ===== */
.cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  display:none;align-items:center;justify-content:space-between;gap:20px;
  background:#0b3d5c;color:#cfe6f3;
  padding:14px 28px;
  box-shadow:0 -6px 24px rgba(0,0,0,.22);
  font-size:14px;line-height:1.55;
}
.cookie-bar.show{display:flex;}
.cookie-bar p{margin:0;max-width:820px;color:#cfe6f3;}
.cookie-bar p a{color:#7fd4f5;text-decoration:underline;}
.cookie-bar p a:hover{color:#fff;}
.cookie-actions{display:flex;gap:10px;flex-shrink:0;}
.cookie-bar button{
  border:0;border-radius:999px;padding:9px 22px;
  font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.cookie-accept{background:var(--orange);color:#fff;}
.cookie-accept:hover{background:#d9740a;}
.cookie-decline{background:transparent;color:#cfe6f3;border:1px solid rgba(255,255,255,.4);}
.cookie-decline:hover{color:#FEF4E9;color:color-mix(in srgb,var(--orange) 9%,#fff);border-color:#fff;}
@media(max-width:860px){
  .cookie-bar{padding:12px 20px;}
}
@media(max-width:600px){
  .cookie-bar{flex-direction:column;align-items:stretch;gap:10px;padding:14px 16px;font-size:13px;}
  .cookie-actions{justify-content:flex-end;}
  .cookie-bar button{padding:9px 18px;}
}

/* ===== News cards — responsive preset (3 columns / 9 per page) ===== */
@media(max-width:1100px){
  .news-card{gap:14px;padding:14px;min-height:142px;}
  .nc-img{flex-basis:104px;width:104px;height:104px;}
  .news-card h3{font-size:16px;}
  .news-card p{font-size:13px;}
}
@media(max-width:860px){
  .news-grid{grid-template-columns:repeat(2,1fr);gap:18px;}
}
@media(max-width:600px){
  .news-grid{grid-template-columns:1fr;}
}
@media(max-width:380px){
  .nc-img{flex-basis:88px;width:88px;height:88px;}
  .news-card{min-height:124px;}
  .news-card h3{font-size:15px;}
}

/* ===== References filters (Regions + Solutions) — responsive ===== */
@media(max-width:860px){
  /* two half-width bars + 3-column dropdowns get too cramped: stack them */
  .ref-filters{grid-template-columns:1fr;}
  .ref-cases{grid-template-columns:repeat(2,1fr);gap:18px;}
}
@media(max-width:600px){
  .ref-filters{margin-top:34px;gap:10px;}
  /* long solution names would wrap in a 2-column grid — use one column instead */
  .region-filter[data-filter="solution"] .rf-dropdown{grid-template-columns:1fr;}
  .ref-cases{grid-template-columns:1fr;}
}

/* ===== 404 page ===== */
.nf-section{padding:72px 0 96px;}
.nf-wrap{max-width:660px;margin:0 auto;text-align:center;}
.nf-code{font-size:66px;line-height:1;font-weight:800;color:var(--blue);letter-spacing:.03em;margin:0 0 20px;}
.nf-msg{font-size:16px;line-height:1.7;color:var(--ink-soft);margin:0 auto 34px;max-width:520px;}
.nf-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #d7dde2;border-radius:40px;height:54px;
  padding:0 7px 0 22px;max-width:460px;margin:0 auto;transition:border-color .2s ease,box-shadow .2s ease;}
.nf-search:focus-within{border-color:var(--orange);box-shadow:0 6px 20px rgba(241,134,14,.18);}
.nf-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-family:inherit;font-size:15px;color:var(--ink);}
.nf-search input::placeholder{color:var(--ink-soft);}
.nf-search button{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:50%;background:var(--blue);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .18s ease;}
.nf-search button:hover{background:var(--orange);}
.nf-search button svg{width:18px;height:18px;display:block;}
.nf-home{display:inline-block;margin-top:28px;background:var(--blue);color:#fff;font-weight:700;font-size:15px;
  padding:14px 40px;border-radius:40px;transition:background .18s ease;}
.nf-home:hover{background:var(--orange);color:#fff;}
@media(max-width:600px){
  .nf-section{padding:44px 0 60px;}
  .nf-code{font-size:50px;margin-bottom:16px;}
  .nf-msg{font-size:15px;margin-bottom:28px;}
  .nf-search{height:48px;padding-left:18px;}
  .nf-home{display:block;width:100%;max-width:460px;margin:24px auto 0;padding:13px 20px;}
}

/* ===== Products index: nine circles at the Company page scale, four per row ===== */
.sol-cards.sol-cards-4{grid-template-columns:repeat(4,1fr);gap:34px 28px;}
.sol-cards.sol-cards-4 .sol-card{max-width:250px;}
@media(max-width:1100px){
  .sol-cards.sol-cards-4{grid-template-columns:repeat(3,1fr);gap:30px 24px;}
}
@media(max-width:860px){
  .sol-cards.sol-cards-4{grid-template-columns:repeat(2,1fr);gap:28px 18px;}
  .sol-cards.sol-cards-4 .sol-card{max-width:260px;}
}
@media(max-width:520px){
  .sol-cards.sol-cards-4{grid-template-columns:1fr;}
}

/* Special Sale uses the brand red ring + name (hover turns both orange) */
.sol-card.special .sol-fr{background:var(--red);}
.sol-card.special .sol-name{color:var(--red);}
.sol-card.special:hover .sol-fr{background:var(--orange);}
.sol-card.special:hover .sol-name{color:var(--orange);}

/* ===== Product channel row: full content width + larger/taller tabs =====
   The nine tabs used to sit in a tight group on the left of the blue hero,
   leaving a large empty blue area on the right. On desktop they now span the
   same content box as the header: the first label starts at the logo's left
   edge and the last label ends at the search box's right edge.
   Labels grow 15px -> 17px and the block grows ~56px -> 65px, matching the
   orange hover tab on the Phaesun category menu (65px, 20px vertical pad).
   The row is split into nine equal, edge-to-edge blocks (flex:1 1 0, no
   horizontal padding and no space-between gaps): the orange hover block now
   touches its neighbours seamlessly instead of being separated by a blue
   strip. Every label is centred inside its own block (including the first
   and last ones), so the text sits in the middle of the orange hover frame.
   The row as a whole still spans the same content box as the header; only
   the first/last labels no longer hug the logo / search box edges.
   Below 1024px the larger labels cannot fit on one line, so the original
   wrapping is kept; phones keep their sideways scrolling row untouched. */
@media(min-width:1024px){
  .prod-seg{flex-wrap:nowrap;}
  .prod-seg > a,.prod-seg > .cat-item{flex:1 1 0;min-width:0;}
  .prod-seg > .cat-item > a{flex:1 1 auto;}
  .prod-seg > a,.cat-item > a{padding:18px 0;font-size:17px;justify-content:center;}
}

/* ===== Current-channel cue: Products sub-pages only =====
   Every page under /products/ (the nine sub-pages and the channel home)
   uses the nine-tab blue hero and has no breadcrumb, while every other
   page does, so the white header keeps the Products label and its caret
   orange as a "you are here" cue. write() adds the body class for all
   products/*.html pages and no other channel. No ::after rule here on
   purpose: the orange underline stays a hover-only affordance, so hovering
   the current tab still gives feedback. */
.nav-current-products .nav>li.active>a{color:var(--orange);}
.nav-current-products .nav>li.active>a .caret{opacity:1;}

/* ===== Mobile cookie bar: slimmer (2026-11-06, option A) =====
   Phones ONLY (max-width:600px). Desktop/tablet keep the original bar.
   Copy and markup are untouched - spacing and type size are all that change.
   Kept in its own block at the end so the original rules stay untouched. */
@media(max-width:600px){
  .cookie-bar{flex-direction:column;align-items:stretch;gap:6px;
    padding:8px 12px;font-size:12px;line-height:1.4;}
  .cookie-bar p{line-height:1.4;}
  .cookie-actions{justify-content:flex-end;gap:8px;}
  .cookie-bar button{padding:5px 14px;font-size:12px;}
}

/* ===== Mobile home-hero subtitle legibility (2026-11-06) =====
   Phones ONLY (max-width:600px). On a 480px-tall hero the cover-cropped
   photo puts the subtitle over a bright pale area, where 15px/400 white
   text disappears. Keep the photo untouched (the .overlay stays transparent)
   and rely on weight + one soft, single-layer shadow - no near-offset
   outline layer, which is what made the earlier option look heavy.
   Desktop/tablet keep their original 20px/400 and 0 2px 12px/.55 shadow. */
@media(max-width:600px){
  .home-hero .slide .cap .mid{
    font-weight:600;font-size:15px;
    text-shadow:0 2px 10px rgba(0,0,0,.50);
  }
}
/* 360px phones have only 320px of text width: at 15.5px this subtitle wraps
   to two lines (it was one line before). Step the size back to 15px there;
   weight and the soft shadow stay exactly the same. */
@media(max-width:380px){
  .home-hero .slide .cap .mid{font-size:15px;}
}

/* ===== Quick access rail + Request-a-Quote dialog (2026-11-06) =====
   Fixed to the right edge of every page. Three shortcuts stack on a white
   panel; the collapse tab sits on its left. Collapsing translates the rail
   right by exactly one panel width, so only the tab stays on screen and the
   arrow flips. The quote dialog is opened by the top shortcut only.
   Desktop rules first; phone overrides at the end of this block. */
.quickbar{
  --qb-w:70px;
  /* The rail is offset so the four circles (3 rail icons + the back-to-top
     button) sit on ONE 60px pitch, like four soldiers in a row:
     24 (totop bottom offset) + 21 (half of the 42px circle) + 60 (pitch)
     - 30 (half of the 60px row) = 75px. */
  position:fixed;right:0;bottom:75px;z-index:45;
  display:flex;align-items:center;
  transform:none;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.quickbar.closed{transform:translateX(var(--qb-w));}
/* Four soldiers on ONE line. The white panel is --qb-w wide and flush with the
   right edge, so the centres of the three 42px icons all sit --qb-w/2 from the
   right edge. The back-to-top button is a separate fixed element whose centre
   is (right + 21px) from that edge; solve right = --qb-w/2 - 21px:
     desktop 70/2 - 21 = 14px  |  phone 58/2 - 21 = 8px  (see the <=600px block)
   The vertical pitch is already 60px / 54px, set by .quickbar's bottom offset.
   Do not move .totop back to right:24px - that pulls it 10px / 16px left. */
.totop{right:14px;}
.qb-toggle{
  position:absolute;right:100%;top:50%;transform:translateY(-50%);
  width:24px;height:60px;padding:0;border:1px solid rgba(15,45,65,.06);border-right:0;border-radius:20px 0 0 20px;
  background:#fff;color:var(--ink-soft);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:-5px 0 16px rgba(15,45,65,.12);
  transition:background .15s ease,color .15s ease;
}
/* Same orange 9% on white (#FEF4E9) hover backdrop as .qb-btn:hover;
   hex is the old-browser fallback. The chevron still turns green on hover. */
.qb-toggle:hover{background:#FEF4E9;background:color-mix(in srgb,var(--orange) 9%,#fff);color:var(--green);}
.qb-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s ease;}
.quickbar.closed .qb-toggle svg{transform:rotate(180deg);}
.qb-panel{
  width:var(--qb-w);background:#fff;border-radius:20px 0 0 20px;
  box-shadow:-8px 0 28px rgba(15,45,65,.14);
}
.qb-btn{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:60px;padding:0;border:0;background:#fff;cursor:pointer;
  text-decoration:none;
}
.qb-btn:first-child{border-radius:20px 0 0 0;}
.qb-btn:last-child{border-radius:0 0 0 20px;}
.qb-btn + .qb-btn{box-shadow:inset 0 1px 0 #eef3f6;}
/* Match the footer "Get Social" hover timing exactly:
   colour/ring .18s ease, movement .15s ease, no transition-delay.
   (.footer .social a -> transition:transform .15s ease,box-shadow .18s ease) */
.qb-btn img{display:block;width:42px;height:42px;transition:transform .15s ease,opacity .18s ease;}
/* Hover / keyboard focus swaps the green disc for an identical orange one
   (brand #f1860e). Both images are preloaded, so it is a smooth cross-fade
   with no first-hover flash; the white glyph and the circle size never change. */
.qb-ico-hot{position:absolute;inset:0;margin:auto;opacity:0;}
/* Hover backdrop: brand orange 9% on white (#FEF4E9), the tint from the
   three-scheme mock-up that the user preferred. Hex is the old-browser fallback. */
.qb-btn:hover{background:#FEF4E9;background:color-mix(in srgb,var(--orange) 9%,#fff);}
.qb-btn:hover img{transform:scale(1.06);}
.qb-btn:hover .qb-ico-base,.qb-btn:focus-visible .qb-ico-base{opacity:0;}
.qb-btn:hover .qb-ico-hot,.qb-btn:focus-visible .qb-ico-hot{opacity:1;}
.qb-btn:focus-visible{outline:2px solid var(--orange);outline-offset:-3px;}
.qb-tip{
  position:absolute;right:calc(100% + 14px);top:50%;
  transform:translateY(-50%) translateX(6px);
  padding:9px 16px;border-radius:999px;background:#fff;color:var(--ink); /* same neutral grey as .dropdown a */
  font-size:14px;font-weight:600;line-height:1;white-space:nowrap;
  box-shadow:0 8px 22px rgba(15,45,65,.18);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.qb-btn:hover .qb-tip,.qb-btn:focus-visible .qb-tip{
  opacity:1;visibility:visible;transform:translateY(-50%) translateX(0);
}
/* a hovered icon keeps its :hover state when the rail slides away - never let
   the pill trail along with the off-screen panel */
.quickbar.closed .qb-tip{opacity:0;visibility:hidden;}

/* ---- quote dialog ---- */
.qb-modal{
  position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:flex-end;
  padding:24px;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;
}
.qb-modal.show{opacity:1;visibility:visible;}
.qb-modal[hidden]{display:none;}
.qb-backdrop{position:absolute;inset:0;background:rgba(6,26,40,.58);}
.qb-dialog{
  position:relative;width:100%;max-width:560px;height:auto;max-height:calc(100vh - 48px);
  overflow:auto;background:#fff;border-radius:16px;
  box-shadow:0 24px 70px rgba(4,24,38,.32);
  transform:translateX(34px);transition:transform .24s cubic-bezier(.4,0,.2,1);
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.qb-modal.show .qb-dialog{transform:none;}
.qb-head{
  position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:18px 62px 14px 26px;background:#fff;
  border-bottom:1px solid #eef3f6;border-radius:16px 16px 0 0;
}
.qb-logo{display:block;height:50px;width:auto;}
.qb-slogan{font-family:"Stawix Sans Beam",var(--font);font-size:19px;font-style:italic;font-weight:700;color:var(--blue);letter-spacing:.2px;white-space:nowrap;}
.qb-close{
  position:absolute;top:14px;right:16px;width:34px;height:34px;padding:0;
  border:1px solid #e2e9ee;border-radius:8px;background:#fff;color:var(--ink-soft);
  font-size:22px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.qb-close:hover{background:#f6f9fb;color:var(--blue-deep);border-color:#cfdae2;}
.qb-body{padding:20px 26px 28px;}
.qb-title{margin:0 0 8px;font-size:30px;line-height:1.2;color:var(--blue-deep);font-weight:800;}
.qb-sub{margin:0 0 22px;font-size:15px;line-height:1.6;color:var(--ink-soft);}
/* After a successful submit the heading becomes "Thank you!" and the form
   subtitle disappears; give the heading the space the subtitle used to take
   and center that heading (the fill-in state stays left aligned). */
.qb-dialog.qb-done .qb-sub{display:none;}
.qb-dialog.qb-done .qb-title{margin-bottom:22px;text-align:center;}
.qb-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;}
.qb-grid .field{margin-bottom:0;}
.qb-grid .qb-span2{grid-column:1 / -1;}
.qb-message{margin-top:16px;}
.qb-message textarea{min-height:96px;}
.qb-submit{width:max-content;min-width:0;margin:22px auto 0;}
.qb-privacy{margin:12px 0 0;text-align:center;font-size:13px;line-height:1.5;color:var(--ink-soft);}
.qb-privacy a{color:var(--blue);text-decoration:underline;}
.qb-error{
  display:none;margin:0 0 16px;padding:10px 14px;border:1px solid #f3c1bd;border-radius:6px;
  background:#fdecea;color:#c0392b;font-size:13px;line-height:1.5;
}
.qb-error.show{display:block;}
.qb-grid .field input.invalid,.qb-grid .field select.invalid,
.qb-message input.invalid,.qb-message textarea.invalid{
  border-color:var(--red);background:#fffafa;
}
.qb-thanks p{margin:0 0 14px;font-size:16px;line-height:1.7;color:var(--ink);}
.qb-thanks p:last-child{margin-bottom:0;}
.qb-thanks a{color:var(--blue);font-weight:600;text-decoration:underline;}
body.qb-lock{overflow:hidden;}

/* ---- country autocomplete ---- */
.qb-ac{position:relative;}
.qb-ac-list{
  position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:6;
  margin:0;padding:6px;list-style:none;background:#fff;
  border:1px solid #d8e2e9;border-radius:8px;
  box-shadow:0 16px 34px rgba(15,45,65,.16);max-height:360px;overflow:auto;
}
.qb-ac-list[hidden]{display:none;}
.qb-ac-list li{
  padding:9px 11px;border-radius:6px;font-size:14px;color:var(--ink);
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.qb-ac-list li b{color:var(--blue);font-weight:700;}
.qb-ac-list li:hover,.qb-ac-list li.active{background:#eaf7fd;}

@media(max-width:600px){
  .quickbar{--qb-w:58px;bottom:72px;}
  .totop{right:8px;} /* 58/2 - 21 = 8px, same centre line as the three icons */
  .qb-btn{height:54px;}
  .qb-btn img{width:42px;height:42px;}
  .qb-toggle{width:20px;height:54px;border-radius:20px 0 0 20px;}
  .qb-toggle svg{width:14px;height:14px;}
  .qb-tip{font-size:12px;padding:8px 13px;right:calc(100% + 10px);}
  .qb-modal{padding:0;align-items:flex-end;justify-content:center;}
  .qb-dialog{max-width:100%;height:auto;max-height:92vh;border-radius:16px 16px 0 0;
    transform:translateY(18px);box-shadow:0 -20px 60px rgba(4,24,38,.30);}
  .qb-head{padding:14px 54px 12px 16px;gap:12px;border-radius:16px 16px 0 0;}
  .qb-logo{height:37px;}
  .qb-slogan{font-size:14px;}
  .qb-close{top:10px;right:12px;width:30px;height:30px;font-size:20px;}
  .qb-body{padding:18px 16px 24px;}
  .qb-title{font-size:24px;}
  .qb-sub{font-size:14px;margin-bottom:18px;}
  .qb-dialog.qb-done .qb-title{margin-bottom:18px;text-align:center;}
  .qb-grid{grid-template-columns:1fr;gap:14px;}
  .qb-message{margin-top:14px;}
}
@media(max-width:380px){
  .qb-slogan{font-size:11px;}
  .qb-title{font-size:22px;}
}

/* ---------------- Standalone Send an Inquiry + Thank You pages ----------------
   Both pages use .form-wrap as the outer card. The inquiry form reuses the
   Quick Inquiry drawer's own .qb-* classes, so the copy, fields, validation
   and hover behaviour stay identical - only the centred thanks block is new.
   Appended last so the <=600 / <=380 overrides below win over .form-wrap. */
.si-section{padding:64px 0 80px;}
.si-thanks{text-align:center;}
.si-thanks p{font-size:16px;line-height:1.7;color:var(--ink);}
.si-thanks p a{color:var(--blue);font-weight:600;text-decoration:underline;}
.si-thanks .btn-submit{display:inline-block;margin:26px 0 0;}
/* the longer partner CTA must wrap instead of overflowing the card on phones */
#partnerForm .btn-submit{white-space:normal;line-height:1.4;}
@media(max-width:600px){
  .si-section{padding:40px 0 60px;}
  .si-thanks .btn-submit{width:100%;margin:22px 0 0;}
  #partnerForm .btn-submit{font-size:15px;padding:12px 14px;}
}
@media(max-width:380px){
  #partnerForm .btn-submit{font-size:14px;}
}

/* ---------------- Partner form question typography ----------------
   The two question headings (.pf-q), their checkbox options (.checks label)
   and the Privacy consent line (.partner-privacy) used to inherit the 16px
   body size, so they looked larger than the field labels above them
   ("Company Employee Number" / "Website" = 14px, 600). Match that 14px
   reference. Scoped to #partnerForm and #siForm (Send an Inquiry) —
   both use the same Privacy consent checkbox. */
#partnerForm .pf-q{font-size:14px;}
#partnerForm .checks label{font-size:14px;}
#partnerForm .partner-privacy,#siForm .partner-privacy{font-size:14px;}

/* ---------------- Standalone Send an Inquiry: single column + compact CTA ----------------
   Scoped to .si-wrap so the Quick Inquiry drawer keeps its two-column grid
   and full-width "Get My Quote" button. Appended last so it also wins over
   the <=600 / <=380 .form-wrap / .qb-grid overrides earlier in this file.
   width:max-content makes the blue pill fit the word "Submit" instead of
   stretching across the whole card; auto side margins keep it centred. */
.si-wrap .qb-grid{grid-template-columns:1fr;gap:18px;}
.si-wrap .qb-grid .qb-span2{grid-column:auto;}
.si-wrap .qb-message{margin-top:18px;}
.si-wrap .qb-submit{width:max-content;min-width:0;margin:22px auto 0;padding:12px 36px;}

/* ---------------- P0: sub-headings inside .section ----------------
   The About / Privacy pages had <h3 style="color:var(--blue)"> with no
   font-size of their own, and no generic ".section h3" rule existed, so
   they fell back to the browser default 18.72px in link-blue — barely
   larger than the 16px body copy and visually indistinguishable from a
   hyperlink. Give them the same look as the card headings already used
   in 38 places across the site (.fb h3: 21px / deep blue).
   Deliberately scoped to .sec-h3 instead of a bare ".section h3": a bare
   rule would tie on specificity with ".form-section>h3" (18px) and
   ".co-card h3" (18px) and, being last, would override both. */
.section .sec-h3{font-size:21px;line-height:1.4;color:var(--blue);margin:24px 0 10px;}

@media (max-width:600px){
  .section .sec-h3{font-size:18px;line-height:1.45;margin:20px 0 8px;}
}

/* ---------------- P3: Solutions detail pages — font sizes aligned to the
   standard content pages, colours deliberately left untouched.
   The banner <h2> had no size rule at all and fell back to the browser
   default 24px (same class of bug as the P0 one), and the feature <h3>
   was hard-coded to 24px — so both levels rendered at 24px and the page
   had no size hierarchy. Map them onto the site scale instead:
     banner heading   28px desktop / 22px phone  (== .section-title)
     feature heading  21px desktop / 18px phone  (== .sec-h3 / .fb h3)
   The hero lead sentence was 16.5px (15.5px on phones through --lead-fs);
   it is body copy, so it now uses the 16px body size via an inline style
   in build_solution_page() and no longer needs --lead-fs. */
section.hero .ft-text p{color:#fff;}
.sol-intro h2{font-size:28px;}

@media (max-width:600px){
  .sol-intro h2{font-size:22px;}
  .feature-row .ft-text h3{font-size:18px;}
}

/* ---------------- P5 follow-up: card descriptions on phones ----------------
   Desktop already unified at 14px (20261106a5). .circle-card .c-desc and
   .news-card p already drop to 13px on phones; these two had no phone rule
   and stayed at 14px, so the same card description rendered at two sizes on
   small screens. Match them to 13px. */
@media (max-width:600px){
  .vpillar p{font-size:13px;}
  .co-card p{font-size:13px;}
}

/* ---------------- /send-an-inquiry: lead line takes over the heading role ---
   The in-page "Send an Inquiry" title was removed (the blue hero already
   carries it), so the lead sentence becomes the first line of the card.
   Size it like the partner form's group heading (.form-section>h3 = 18px).
   Scoped to .si-wrap so the Quick Inquiry drawer keeps its 15px subtitle. */
.si-wrap .qb-sub{font-size:18px;color:var(--blue-deep);font-weight:700;line-height:1.4;border-bottom:2px solid var(--line);padding-bottom:8px;margin-bottom:18px;}

/* ---------------- References case system (2026-11-08) ----------------
   Country picker under the two filter bars, a 9-per-page pager and the case
   detail page: compact header, fixed 16:9 gallery module, sticky project facts
   and a shared lightbox. The card block itself lives with the other reference
   styles above; nothing in this block touches existing page rules. */

/* Country picker: only countries that actually have a case in the region */
.ref-countries{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin:0 0 26px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.ref-countries[hidden]{display:none;}
.cty-hd{font-size:13px;color:var(--ink-soft);min-width:76px;}
.cty-list{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;}
.cty{display:inline-flex;align-items:center;gap:9px;padding:2px 0;border:0;background:none;font:inherit;font-size:15px;line-height:1;color:var(--blue-deep);cursor:pointer;transition:color .15s ease;}
.cty-ring{position:relative;flex:0 0 auto;width:17px;height:17px;border:1.6px solid #b9c6cf;border-radius:50%;transition:border-color .15s ease,background .15s ease;}
.cty:hover{color:var(--orange);}
.cty:hover .cty-ring{border-color:var(--orange);}
.cty.on{color:var(--orange);font-weight:700;}
.cty.on .cty-ring{border-color:var(--orange);background:var(--orange);}
.cty.on .cty-ring::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}

/* 9-per-page pager (client-side; hidden while everything fits on one page) */
.ref-pager{display:flex;justify-content:center;align-items:center;gap:6px;margin:42px 0 0;}
.ref-pager[hidden]{display:none;}
.ref-pager button{min-width:38px;height:38px;padding:0 10px;border:1px solid #e2e6ea;border-radius:6px;background:#fff;font:inherit;font-size:15px;color:var(--blue-deep);cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease;}
.ref-pager button.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:700;}
.ref-pager button:disabled{opacity:.45;cursor:default;}
.ref-pager button:not(:disabled):hover{border-color:var(--blue);color:var(--blue);}
.ref-pager button.on:not(:disabled):hover{color:#fff;}
.ref-none{margin:6px 0 0;font-size:15px;color:var(--ink-soft);}
.ref-none[hidden]{display:none;}

/* ---- Case detail page (variant A: editorial, no boxes) ---- */
.case-wrap{max-width:1080px;margin:0 auto;padding:46px 28px 46px;}
.case-title{margin:0 0 34px;font-size:30px;line-height:1.28;color:var(--blue-deep);font-weight:700;letter-spacing:-.003em;}
.case-grid{display:flex;align-items:flex-start;gap:84px;}
.case-main{flex:1 1 auto;min-width:0;}
.case-side{flex:0 0 306px;}
.case-specs{margin:0 0 30px;}
.case-specs-h{margin:0 0 12px;font-size:16px;line-height:1.4;color:var(--blue-deep);font-weight:700;}
.case-spec{display:flex;gap:16px;font-size:14px;line-height:2.05;color:var(--ink);}
.case-spec .k{flex:0 0 86px;color:#8a97a1;}
.case-body{max-width:660px;}
.case-p{margin:0 0 14px;font-size:16px;line-height:1.85;color:var(--ink);}
.case-body .case-p:last-child{margin-bottom:0;}
.case-h2{margin:30px 0 10px;font-size:16px;line-height:1.4;color:var(--blue-deep);font-weight:700;}
.case-prods{display:grid;gap:7px;margin:0;padding:0;list-style:none;}
.case-prods li{position:relative;padding-left:14px;font-size:14px;line-height:1.8;color:var(--ink);}
.case-prods li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--blue);}
.case-prods a{color:var(--ink);text-decoration:none;border-bottom:1px solid #dbe3e9;}
.case-prods a:hover{color:var(--blue);border-color:var(--blue);}
.case-fact{margin:0 0 27px;}
.case-fact:last-child{margin-bottom:0;}
.case-fact .k{margin:0 0 5px;font-size:12.5px;line-height:1.5;color:#8a97a1;letter-spacing:.03em;}
.case-fact .v{margin:0;font-size:16px;line-height:1.55;color:var(--blue-deep);font-weight:500;}
.case-fact .v a{color:var(--blue);text-decoration:none;}
.case-fact .v a:hover{text-decoration:underline;}
.case-divider{display:flex;align-items:center;gap:22px;margin:48px 0 0;}
.case-divider:before,.case-divider:after{content:"";flex:1;height:1px;background:var(--line);}
.case-divider svg{display:block;flex:0 0 auto;color:#c2ccd4;}
.case-divider .cd-text{font-family:"Stawix Sans Beam",var(--font);font-style:italic;font-weight:700;color:#c2ccd4;font-size:16px;letter-spacing:.2px;white-space:nowrap;}

/* ---- Case media module: fixed 2.35:1, big image left + square-cell grid right ---- */
.case-media{--cmc:3;display:flex;gap:6px;width:100%;aspect-ratio:2.35/1;margin:26px 0 4px;border-radius:8px;overflow:hidden;}
.case-media[data-cols="1"]{--cmc:1;}
.case-media[data-cols="2"]{--cmc:2;}
.cm-big{flex:1 1 auto;min-width:0;position:relative;padding:0;border:0;background:#e8edf1;overflow:hidden;cursor:zoom-in;}
.cm-side{flex:0 0 auto;display:grid;grid-template-columns:repeat(var(--cmc),1fr);grid-template-rows:repeat(3,1fr);gap:6px;width:calc((100%/2.35 - 12px)/3*var(--cmc) + (var(--cmc) - 1)*6px);}
.cm-cell{position:relative;display:block;padding:0;border:0;border-radius:3px;background:#e8edf1;overflow:hidden;cursor:zoom-in;}
.cm-cell img,.cm-big img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.cm-cell:hover img,.cm-big:hover img{transform:scale(1.03);}
.cm-empty{border-radius:3px;background:transparent;}
.cm-more:after{content:"";position:absolute;inset:0;background:rgba(11,61,92,.55);}
.cm-n{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;font-weight:600;letter-spacing:.01em;}
.cm-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(0,0,0,.22);z-index:3;}
.cm-play:after{content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);border-left:18px solid var(--orange);border-top:11px solid transparent;border-bottom:11px solid transparent;}
.cm-tile .cm-play{width:22px;height:22px;}
.cm-tile .cm-play:after{left:55%;border-left-width:8px;border-top-width:5px;border-bottom-width:5px;}

/* ---- Lightbox: Plan 2 brand deep blue (built by main.js from .gallery-data) ---- */
body.lb-open{overflow:hidden;}
.lb{position:fixed;inset:0;z-index:10050;display:flex;flex-direction:column;gap:16px;padding:22px 30px 22px;background:#0b3d5c;}
.lb[hidden]{display:none;}
.lb-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;width:100%;}
.lb-meta{min-width:0;}
.lb-kicker{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--orange);margin:0 0 3px;}
.lb-title{font-size:19px;font-weight:700;color:#fff;margin:0 0 4px;line-height:1.3;}
.lb-sub{font-size:13px;color:#cfe6f3;margin:0;}
.lb-x{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:24px;line-height:1;cursor:pointer;}
.lb-x:hover{background:rgba(255,255,255,.28);}
.lb-stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;width:100%;position:relative;}
.lb-img{display:block;max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;}
.lb-video{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border:0;border-radius:4px;background:#000;}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:30px;line-height:1;cursor:pointer;z-index:2;}
.lb-prev{left:10px;}.lb-next{right:10px;}
.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.28);}
.lb-foot{display:flex;align-items:center;gap:18px;width:100%;}
.lb-progress{flex:1 1 auto;display:flex;gap:3px;height:4px;min-width:50px;}
.lb-seg{flex:1;height:100%;border-radius:2px;background:rgba(255,255,255,.16);cursor:pointer;}
.lb-seg.seen{background:var(--orange);}
.lb-seg.on{background:var(--orange);}
.lb-thumbs{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:8px;max-width:472px;justify-content:flex-start;}
.lb-th{width:40px;height:40px;padding:0;border:2px solid transparent;border-radius:3px;background:none;opacity:.55;cursor:pointer;overflow:hidden;}
.lb-th img{display:block;width:100%;height:100%;object-fit:cover;}
.lb-th.on{opacity:1;border-color:var(--orange);}
.lb-count{flex:0 0 auto;color:#fff;font-size:13px;min-width:50px;text-align:right;}

@media(max-width:900px){
  .case-wrap{padding:36px 28px 40px;}
  .case-grid{flex-direction:column;gap:26px;}
  .case-side{position:static;flex:none;width:100%;order:-1;}
  .case-title{font-size:24px;margin-bottom:26px;}
  .case-divider{margin-top:38px;}
  .case-divider .cd-text{font-size:14px;}
}
@media(max-width:600px){
  .ref-countries{gap:10px 18px;}
  .cty-hd{min-width:100%;margin-bottom:2px;}
  .cty{font-size:14px;}
  .case-wrap{padding:26px 20px 36px;}
  .case-spec{display:block;margin-bottom:9px;line-height:1.6;}
  .case-spec .k{display:block;margin-bottom:1px;}
  .case-media{margin:20px 0 4px;}
  .case-divider .cd-text{font-size:12px;}
  .cm-play{width:42px;height:42px;}
  .cm-play:after{border-left-width:13px;border-top-width:8px;border-bottom-width:8px;}
  .lb{padding:14px 12px 16px;gap:12px;}
  .lb-title{font-size:16px;}
  .lb-prev,.lb-next{width:38px;height:38px;font-size:24px;}
  .lb-prev{left:6px;}.lb-next{right:6px;}
  .lb-foot{flex-wrap:wrap;gap:10px;}
  .lb-progress{order:2;flex-basis:100%;}
  .lb-thumbs{max-width:100%;}
  .lb-th{width:34px;height:34px;}
}