/* SITE CHROME - the single source for everything shared by EVERY page:
   custom cursor, the floating quote pill + questions widget.
   Loaded by the homepage and by every generated page. Never define chrome
   in a page's own stylesheet: change it here, deploy, done everywhere. */

/* ---------- Custom cursor: blue dot, squeegee over interactives ---------- */
@media (pointer: fine){
  body{
    cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%3E%3Ccircle%20cx='7'%20cy='7'%20r='4.5'%20fill='%231F5CC5'%20stroke='white'%20stroke-width='1.5'/%3E%3C/svg%3E") 7 7, auto;
  }
  a,button,summary,label[for]{
    cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='26'%20height='26'%20viewBox='0%200%2026%2026'%3E%3Crect%20x='11'%20y='2'%20width='4'%20height='13'%20rx='2'%20fill='%231F5CC5'%20stroke='white'%20stroke-width='1'/%3E%3Crect%20x='4'%20y='14'%20width='18'%20height='5'%20rx='2.5'%20fill='%231F5CC5'%20stroke='white'%20stroke-width='1'/%3E%3Crect%20x='6'%20y='19'%20width='14'%20height='3'%20rx='1.5'%20fill='%2355B348'/%3E%3C/svg%3E") 13 21, pointer;
  }
  input,textarea{cursor:text;}
}


/* ---------- Header, promo strip and mobile menu: ONE definition ------------
   This lived twice - inline in the homepage and again as a string in the page
   generator - and the two copies drifted until the nav rendered in a different
   TYPEFACE and WEIGHT depending on which page you were on (Space Grotesk 500 /
   14px on the homepage, Plex Sans 600 / 14.5px everywhere else), on a header
   2px taller with 2px more padding and 2px wider nav gaps. It shifted visibly
   when you changed page.
   The values here are the generator's, because 14 of the 15 documents already
   used them. No page may define header chrome in its own stylesheet. */
.promo-strip{background:var(--green-ink);color:#fff;font-weight:600;font-size:13.5px;text-align:center;padding:9px 0;}
.promo-strip .wrap{padding:0 16px;}
.site-header{position:sticky;top:0;z-index:40;background:var(--band-blue);border-bottom:1px solid rgba(255,255,255,.18);}
.header-inner{max-width:var(--maxw);margin:0 auto;padding:0 22px;height:64px;display:flex;align-items:center;gap:26px;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;}
/* The designer lockup carries its own blue ground, which is not the header
   blue. The green edge stops it reading as a mis-tinted rectangle on the band. */
.brand img{height:48px;width:auto;border:2px solid var(--green);border-radius:9px;display:block;}
.main-nav{display:flex;gap:20px;margin-inline-start:auto;align-items:center;}
.main-nav a{text-decoration:none;color:#D6E3F8;font-weight:600;font-size:14.5px;}
.main-nav a:hover{color:#fff;}
.main-nav a[aria-current]{color:#fff;text-decoration:underline 3px var(--green);text-underline-offset:7px;}
@media(max-width:900px){.main-nav{display:none;}.header-inner{gap:14px;}.nav-toggle{margin-inline-start:auto;}}
/* Mobile menu: native <details>, no JS to break. Fixed to the viewport because
   the toggle sits mid-header and an absolute menu would hang off-screen. */
.nav-toggle{display:none;position:relative;}
.nav-toggle summary{list-style:none;cursor:pointer;width:42px;height:42px;place-items:center;display:grid;border:1.5px solid rgba(255,255,255,.5);border-radius:9px;background:transparent;}
.nav-toggle summary::-webkit-details-marker{display:none;}
.nav-toggle summary span{display:block;width:18px;height:2px;background:#fff;position:relative;}
.nav-toggle summary span::before,.nav-toggle summary span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:#fff;}
.nav-toggle summary span::before{top:-6px;}.nav-toggle summary span::after{top:6px;}
.nav-toggle[open] summary{border-color:var(--blue);}
.mobile-menu{position:fixed;left:12px;right:12px;top:64px;z-index:80;background:#fff;border:1.5px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(20,33,56,.14);padding:8px;display:flex;flex-direction:column;max-height:calc(100vh - 84px);overflow-y:auto;}
.mobile-menu a{padding:11px 14px;border-radius:8px;font-weight:600;font-size:15.5px;color:var(--ink);text-decoration:none;}
.mobile-menu a:hover{background:var(--blue-tint);color:var(--blue);}
.mobile-menu a[aria-current]{text-decoration:underline 3px var(--green);text-underline-offset:5px;}
.mobile-menu .mm-group{font-family:var(--font-mono);font-weight:600;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:12px 14px 4px;}
/* After the base rule, so source order cannot resurrect display:none. */
@media(max-width:900px){.nav-toggle{display:grid;}}


/* ---------- Footer: ONE definition ---------------------------------------
   Same story as the header. The homepage ran a two-column flex footer with a
   right-aligned contact block; the other 14 pages ran a three-column grid with
   Sectors and Company headings and the Google reviews link. The homepage was
   also missing the green seam and that reviews link entirely.
   These are the generated pages' values, because 14 of 15 already used them.
   The sticky-button clearance moved here too: chrome.js injects that button on
   EVERY page, so the padding that keeps the legals clear of it belongs with
   the chrome, not on the homepage alone. */
.site-footer{background:var(--blue-deep);color:#DCE8FA;padding:46px 0 30px;margin-top:0;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr;}}
.footer-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;color:#fff;margin-bottom:10px;}
/* height + width:auto, never both fixed - the old 30x30 square squashed a
   4:3 image by nearly a third. Runs bigger than the header copy and carries
   the same green edge; the wordmark beside it is gone because the lockup
   already says the name. */
.footer-brand img{height:64px;width:auto;border:3px solid var(--green);border-radius:9px;display:block;}
.site-footer p{font-size:14px;max-width:38ch;}
.site-footer h4{font-family:var(--font-head);color:#fff;font-size:14px;margin-bottom:10px;letter-spacing:.02em;}
.footer-links{display:flex;flex-direction:column;gap:7px;}
.footer-links a{color:#BCD0EE;text-decoration:none;font-size:14px;}
.footer-links a:hover{color:#fff;}
.footer-legal{border-top:1px solid rgba(220,232,250,.18);margin-top:30px;padding-top:18px;font-size:12.5px;color:#9FB4D6;line-height:1.7;}
@media(max-width:640px){.site-footer{padding-bottom:110px;}} /* clear of the sticky button */


/* ---------- Lightbox ------------------------------------------------------
   The button wrapper must be invisible to the layout: the page already sizes
   the <img>, and a default button brings its own padding, border, background
   and inline display that would break every grid it sits in. */
.zoomable{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;font:inherit;color:inherit;text-align:inherit;}
.zoomable:focus-visible{outline:3px solid #55B348;outline-offset:3px;}
.zoomable img{display:block;}

dialog.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%;overflow:hidden;}
dialog.lb::backdrop{background:rgba(8,20,42,.88);}
dialog.lb figure{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:clamp(14px,4vw,52px);margin:0;}
dialog.lb img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:8px;background:#fff;cursor:zoom-in;transition:transform .18s ease;}
dialog.lb img.is-zoomed{transform:scale(1.9);cursor:zoom-out;}
dialog.lb figcaption{color:#EAF1FB;font:400 14.5px/1.55 'Plex Sans','Segoe UI',sans-serif;max-width:70ch;text-align:center;}
dialog.lb figcaption[hidden]{display:none;}
.lb-close,.lb-nav{position:absolute;z-index:2;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:50%;cursor:pointer;line-height:1;display:grid;place-items:center;}
.lb-close{top:16px;right:16px;width:44px;height:44px;font-size:26px;}
.lb-nav{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:30px;}
.lb-prev{left:14px;} .lb-next{right:14px;}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.26);}
.lb-close:focus-visible,.lb-nav:focus-visible{outline:3px solid #55B348;outline-offset:2px;}
@media (max-width:640px){
  .lb-nav{width:42px;height:42px;font-size:26px;}
  dialog.lb img{max-height:68vh;}
}
@media (prefers-reduced-motion:reduce){ dialog.lb img{transition:none;} }

/* ---------- Floating stack, bottom right: quote pill above questions ---------- */
.sticky-quote{
  position:fixed;right:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 72px);
  z-index:60;
  background:#1F5CC5;color:#fff;
  font-family:'Space Grotesk','Segoe UI',Arial,sans-serif;font-weight:700;font-size:15px;
  padding:13px 24px;border-radius:999px;text-decoration:none;
  box-shadow:0 8px 24px rgba(20,33,56,.3);
  border:2px solid #fff;
  transition:opacity .2s ease;
}
.sticky-quote:hover{background:#16418F;}
.sticky-quote::before{content:"";display:inline-block;width:.55rem;height:.55rem;border-radius:50%;background:#fff;margin-right:.55rem;}
.sticky-quote.is-away{opacity:0;pointer-events:none;}

.qa-fab{position:fixed;right:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:70;display:flex;align-items:center;gap:9px;background:#fff;color:#0B54A8;border:1.5px solid #C3D0E4;border-radius:99px;padding:12px 18px;font:600 14.5px 'Plex Sans','Segoe UI',sans-serif;box-shadow:0 10px 30px rgba(20,33,56,.18);cursor:pointer;}
.qa-fab:hover{border-color:#0B54A8;}
.qa-panel{position:fixed;right:18px;left:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 132px);z-index:71;width:min(360px,calc(100vw - 36px));max-height:min(540px,calc(100vh - 110px));background:#fff;border:1px solid #C3D0E4;border-radius:16px;box-shadow:0 24px 70px rgba(10,24,50,.35);display:flex;flex-direction:column;overflow:hidden;}
.qa-panel[hidden]{display:none;}
.qa-head{background:#0B54A8;color:#fff;padding:14px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.qa-head b{font:700 15.5px 'Space Grotesk','Segoe UI',sans-serif;display:block;}
.qa-head small{color:#C3D6F2;font-size:12px;}
.qa-body{overflow-y:auto;padding:12px;flex:1;}
.qa-q{display:block;width:100%;text-align:start;background:#F4F7FB;border:1px solid #DCE4F0;border-radius:10px;padding:11px 14px;margin-bottom:8px;font:600 14px 'Plex Sans','Segoe UI',sans-serif;color:#142138;cursor:pointer;}
.qa-q:hover{border-color:#0B54A8;color:#0B54A8;}
.qa-a{font:400 14.5px/1.6 'Plex Sans','Segoe UI',sans-serif;color:#33415C;padding:4px 4px 10px;}
.qa-a b{color:#142138;}
.qa-foot{border-top:1px solid #DCE4F0;padding:11px 12px;display:flex;gap:8px;}
.qa-foot a{flex:1;text-align:center;text-decoration:none;font:600 13.5px 'Plex Sans','Segoe UI',sans-serif;padding:11px 8px;border-radius:9px;}
.qa-ring{background:#F4F7FB;color:#142138;border:1px solid #DCE4F0;}
.qa-quote{background:#0B54A8;color:#fff;}

@media (max-width:640px){
  .sticky-quote{left:18px;text-align:center;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);}
  .qa-fab{padding:12px;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 84px);}
  .qa-fab .qa-label{display:none;}
  .qa-panel{left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 138px);max-height:min(480px,calc(100vh - 170px));}
}

/* Language switcher: a quiet pill at the end of the nav, both locales. */
.main-nav .lang-switch{border:1.5px solid rgba(255,255,255,.45);border-radius:8px;padding:4px 12px;}
.main-nav .lang-switch:hover{border-color:#fff;}
.mobile-menu .lang-switch{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;border-radius:0;}

/* Accordion answers + the header X */
.qa-x{background:none;border:none;color:#C3D6F2;font-size:26px;line-height:1;cursor:pointer;padding:0 2px;}
.qa-x:hover{color:#fff;}
.qa-item{margin-bottom:8px;}
.qa-item .qa-q{margin-bottom:0;}
.qa-q[aria-expanded="true"]{border-color:#0B54A8;color:#0B54A8;border-bottom-left-radius:0;border-bottom-right-radius:0;}
.qa-ans{font:400 14.5px/1.6 'Plex Sans','Segoe UI',sans-serif;color:#33415C;background:#fff;border:1px solid #DCE4F0;border-top:none;border-radius:0 0 10px 10px;padding:10px 14px;}
.qa-ans b{color:#142138;}

/* Card zoom button: bottom corner opposite the frame counter */
.sku-zoom{position:absolute;left:10px;bottom:10px;z-index:2;display:grid;place-items:center;width:30px;height:30px;border-radius:999px;border:none;background:rgba(20,33,56,.72);color:#fff;cursor:zoom-in;}
.sku-zoom:hover{background:rgba(20,33,56,.9);}
[dir="rtl"] .sku-zoom{left:auto;right:10px;}
[dir="rtl"] .sku-count{right:auto;left:10px;}