/* ==========================================================================
   SPM Equipment — design system
   Clean corporate light theme built on the logo's blue/yellow palette.
   Loaded after Bootstrap 5; overrides its variables where needed.
   ========================================================================== */

@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../vendor/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(../vendor/fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../vendor/fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../vendor/fonts/inter-700.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url(../vendor/fonts/inter-800.woff2) format('woff2')}
/* Windows ships no colour flag glyphs — Segoe UI Emoji draws a regional
   indicator pair as two letters, so "IN" appears where India's flag should be.
   This face carries only those code points, so it costs 78 KB and only for the
   pages that show flags. */
@font-face{
  font-family:"Twemoji Country Flags";font-style:normal;font-weight:400;font-display:swap;
  src:url(../vendor/flags/TwemojiCountryFlags.woff2) format('woff2');
  unicode-range:U+1F1E6-1F1FF;
}

:root{
  --brand:#0267b1;          /* brand blue */
  --brand-dark:#01538f;     /* hover / pressed */
  --brand-deep:#013b66;     /* utility bar, footer, dark bands */
  --brand-tint:#e3f2fd;
  --brand-tint-2:#f2f9ff;
  --accent:#f5c400;         /* logo yellow */
  --accent-soft:#fff6d1;
  --ink:#16233a;
  --body:#4d5b70;
  --muted:#7b879a;
  --line:#e4e9f0;
  --line-soft:#eef2f7;
  --bg:#ffffff;
  --bg-soft:#f6f9fc;
  --radius:14px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(16,38,72,.06),0 2px 8px rgba(16,38,72,.05);
  --shadow:0 2px 6px rgba(16,38,72,.06),0 12px 28px rgba(16,38,72,.08);
  --shadow-lg:0 4px 12px rgba(16,38,72,.08),0 24px 56px rgba(16,38,72,.12);
  --header-h:76px;

  --bs-primary:#0267b1;
  --bs-primary-rgb:2,103,177;
  --bs-body-color:#4d5b70;
  --bs-body-font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --bs-border-color:#e4e9f0;
}

*{scroll-behavior:smooth}
body{
  font-family:var(--bs-body-font-family);
  color:var(--body);
  background:var(--bg);
  font-size:1rem;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{color:var(--ink);font-weight:700;line-height:1.25;letter-spacing:-.015em}
h1,.h1{font-size:clamp(2rem,4.2vw,3.1rem);font-weight:800}
h2,.h2{font-size:clamp(1.6rem,3vw,2.35rem);font-weight:800}
h3,.h3{font-size:clamp(1.2rem,2vw,1.5rem)}
a{color:var(--brand);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--brand-dark)}
p{margin-bottom:1rem}
img{max-width:100%;height:auto}
.container{max-width:1240px}
::selection{background:var(--accent);color:var(--ink)}

/* --- shared bits ------------------------------------------------------- */
.section{padding:clamp(3.25rem,7vw,6rem) 0}
.section-soft{background:var(--bg-soft)}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand);margin-bottom:.85rem;
}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--accent)}
a.eyebrow{text-decoration:none;transition:color .18s ease}
a.eyebrow:hover{color:var(--brand-dark)}
.section-head{max-width:760px;margin-bottom:2.75rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}
.lead-text{font-size:1.06rem;color:var(--body)}
.text-muted-2{color:var(--muted)}

.btn{border-radius:8px;font-weight:600;padding:.72rem 1.5rem;transition:all .2s ease;border-width:1.5px}
.btn-lg{padding:.9rem 1.9rem;font-size:1rem}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-brand:hover,.btn-brand:focus{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;transform:translateY(-1px);box-shadow:0 8px 20px rgba(2,103,177,.28)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn-accent:hover,.btn-accent:focus{background:#e0b400;border-color:#e0b400;color:var(--ink);transform:translateY(-1px);box-shadow:0 8px 20px rgba(245,196,0,.35)}
.btn-outline-brand{background:transparent;border-color:var(--brand);color:var(--brand)}
.btn-outline-brand:hover{background:var(--brand);color:#fff}
.btn-ghost-light{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost-light:hover{background:#fff;border-color:#fff;color:var(--brand)}

/* --- utility bar ------------------------------------------------------- */
/* Secondary info and links, so the main bar can stay uncluttered. */
.topbar{
  background:var(--brand-deep);color:#a8bdd8;font-size:.82rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:42px;flex-wrap:wrap}
.topbar-left,.topbar-right{display:flex;align-items:center;flex-wrap:wrap}
.topbar-item{display:inline-flex;align-items:center;gap:.45rem;color:#cfdcec;padding:.3rem 0;white-space:nowrap}
.topbar-item svg{color:var(--accent);flex:0 0 auto}
a.topbar-item:hover{color:#fff}
.topbar-item + .topbar-item,.topbar-link + .topbar-link,.topbar-link + .topbar-item,
.topbar-search + .topbar-link{
  margin-left:1rem;padding-left:1rem;border-left:1px solid rgba(255,255,255,.14);
}
.topbar-link{color:#cfdcec;font-weight:600;padding:.3rem 0;white-space:nowrap}
.topbar-link:hover{color:var(--accent)}

/* --- header ------------------------------------------------------------ */
.site-header{
  background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1030;
  transition:box-shadow .22s ease;
}
.site-header.is-stuck{box-shadow:0 6px 24px rgba(16,38,72,.10)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:var(--header-h)}
.site-header .navbar-brand{padding:0;margin:0;flex:0 0 auto}
.navbar-brand img{height:56px;width:auto;transition:height .22s ease}
.site-header.is-stuck .navbar-brand img{height:46px}
.site-header.is-stuck .header-inner{min-height:68px}

/* contact block + CTA on the right of the main bar */
.header-actions{display:flex;align-items:center;gap:1rem;flex:0 0 auto}
.header-phone{display:inline-flex;align-items:center;gap:.65rem;padding:.35rem 0}
.header-phone .hp-ico{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  background:var(--brand-tint);color:var(--brand);
  display:flex;align-items:center;justify-content:center;transition:all .22s ease;
}
.header-phone:hover .hp-ico{background:var(--brand);color:#fff}
.header-phone .hp-text{display:flex;flex-direction:column;line-height:1.25}
.header-phone small{font-size:.72rem;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.header-phone strong{font-size:1rem;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.header-phone:hover strong{color:var(--brand)}
.header-divider{width:1px;height:38px;background:var(--line)}
.nav-burger{
  width:44px;height:44px;border:1px solid var(--line);border-radius:9px;background:#fff;
  color:var(--ink);display:flex;align-items:center;justify-content:center;transition:all .18s ease;
}
.nav-burger:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-tint-2)}
.nav-burger:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* The main nav swaps for the off-canvas menu at 1024px rather than Bootstrap's
   992. A landscape tablet is exactly 1024 wide, and at that width the eight
   items, the phone block and the quote button crowd into each other. Handled
   here rather than with d-lg-* utilities, which are fixed to Bootstrap's
   breakpoints; the two rules are a pair and must always disagree. */
.nav-desktop{display:none}
@media (min-width:1025px){
  .nav-desktop{display:block}
  .nav-burger{display:none}
  /* The floating call button belongs to the same set: past this width the
     header carries the number itself. Two classes, because .float-btn sets
     display:flex further down the file and would otherwise win on order. */
  .float-btn.float-call{display:none}
}

.site-nav .nav-link{
  color:var(--ink);font-weight:600;font-size:.86rem;letter-spacing:.02em;
  padding:.6rem .8rem;position:relative;text-transform:uppercase;
}
.site-nav .nav-link::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.15rem;height:2.5px;
  border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;
}
.site-nav .nav-link:hover,.site-nav .nav-link.active{color:var(--brand)}
.site-nav .nav-link:hover::after,.site-nav .nav-link.active::after{transform:scaleX(1)}
/* ::after already draws the hover underline, so the caret is its own element. */
.site-nav .dropdown-toggle::after{display:none}
.site-nav .caret{
  display:inline-block;width:.38em;height:.38em;margin-left:.45em;vertical-align:.16em;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);transition:transform .2s ease;
}
.site-nav .is-open > .dropdown-toggle .caret{transform:rotate(-135deg);vertical-align:.3em}
.site-nav .is-open > .dropdown-toggle{color:var(--brand)}
.site-nav .is-open > .dropdown-toggle::after{transform:scaleX(1)}

/* products mega menu — data-bs-display="static" keeps Popper out of the way
   so it can span the header instead of hanging off the toggle. */
.mega{
  border:0;border-radius:0 0 var(--radius) var(--radius);box-shadow:var(--shadow-lg);
  padding:1.75rem;margin-top:0;background:#fff;border-top:3px solid var(--brand);
}
@media (min-width:1025px){
  /* Full-bleed panel anchored to the sticky header, with the content held to
     the same width as the page container. Kept in the layout but invisible so
     it can fade in on hover; visibility:hidden also hides it from AT. */
  .site-nav .mega{
    display:block;position:absolute;top:100%;left:0;right:0;width:auto;
    margin:0;padding:1.9rem 0 1.5rem;border-radius:0 0 var(--radius) var(--radius);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;
  }
  .site-nav .mega.show{opacity:1;visibility:visible;transform:translateY(0)}
  .mega-inner{max-width:1240px;margin:0 auto;padding:0 1.5rem}
  .mega-cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.65rem}
}
/* Category tiles only — listing all 43 products made the panel 700px tall. */
.mega-card{
  display:flex;align-items:center;gap:.75rem;padding:.6rem .7rem;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.mega-card:hover{
  border-color:var(--brand);background:var(--brand-tint-2);
  transform:translateY(-2px);box-shadow:var(--shadow-sm);
}
.mc-thumb{
  width:44px;height:44px;flex:0 0 auto;border-radius:8px;overflow:hidden;
  background:var(--bg-soft);border:1px solid var(--line-soft);
}
.mc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mc-text{min-width:0;display:flex;flex-direction:column;gap:.1rem}
.mc-name{font-size:.78rem;font-weight:700;color:var(--ink);line-height:1.3}
.mega-card:hover .mc-name{color:var(--brand)}
.mc-count{font-size:.7rem;font-weight:600;color:var(--muted)}
.mega-foot{
  margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;
}

/* mobile nav — Bootstrap's 400px default is wider than a 390px phone. */
/* position:relative so a range's product panel can sit over this one. */
.offcanvas-nav{width:min(400px,88vw);position:fixed}
.offcanvas-nav .offcanvas-body{position:relative}
/* The global `img{height:auto}` beats the HTML height attribute, and a flex
   item will not shrink below its intrinsic width — together that pushed the
   logo (and the whole panel) past the screen edge. */
.offcanvas-nav .offcanvas-header img{height:42px;width:auto;flex:0 0 auto}
.offcanvas-nav .nav-link{padding:.7rem 0;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-soft);text-transform:uppercase;font-size:.88rem}

/* Three tabs across the top: the pages, the ranges, the ways to get in touch.
   Equal thirds so the row never wraps at 320px. */
.mnav-tabs{display:flex;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.mnav-tab{
  flex:1 1 0;min-width:0;padding:.8rem .4rem;border:0;background:none;
  font-size:.78rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);border-bottom:2px solid transparent;cursor:pointer;
  transition:color .16s ease,border-color .16s ease,background .16s ease;
}
.mnav-tab:hover{color:var(--brand)}
.mnav-tab.active{color:var(--brand);border-bottom-color:var(--brand);background:#fff}
.mnav-tab:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

.offcanvas-nav .mnav-list{list-style:none;padding:0;margin:0}
.offcanvas-nav .mnav-list a{
  display:flex;align-items:center;gap:.5rem;
  padding:.7rem 0;font-size:.88rem;color:var(--ink);font-weight:600;
  border-bottom:1px solid var(--line-soft);
}
.offcanvas-nav .mnav-list a:hover{color:var(--brand)}
/* A range row: name, how many it holds, and the arrow into its panel. */
.offcanvas-nav .mnav-cat .mc-name{flex:1;min-width:0}
.offcanvas-nav .mnav-cat .mc-go{flex:0 0 auto;color:var(--muted);display:inline-flex}
.offcanvas-nav .mnav-cat:hover .mc-go{color:var(--brand)}
.offcanvas-nav .sub-count{
  flex:0 0 auto;min-width:22px;height:20px;padding:0 .4rem;border-radius:10px;
  background:var(--brand-tint);color:var(--brand);font-size:.68rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
}

/* Contact tab. */
.offcanvas-nav .mnav-line{
  display:flex;align-items:center;gap:.6rem;padding:.7rem 0;
  font-size:.9rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-soft);
}
.offcanvas-nav .mnav-line:hover{color:var(--brand)}
.offcanvas-nav .mnav-line svg{flex:0 0 auto;color:var(--brand)}
.offcanvas-nav .mnav-addr{
  display:flex;gap:.6rem;margin:.9rem 0 0;font-size:.85rem;color:var(--body);line-height:1.55;
}
.offcanvas-nav .mnav-addr svg{flex:0 0 auto;margin-top:.15rem;color:var(--brand)}

/* A range's products, sitting over the panel it came from. Laid on top rather
   than swapped in so going back does not rebuild the list underneath. */
.mnav-sub{
  position:absolute;inset:0;z-index:2;background:#fff;
  display:flex;flex-direction:column;
  animation:mnavIn .22s ease both;
}
.mnav-sub[hidden]{display:none}
@keyframes mnavIn{from{transform:translateX(16px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.mnav-sub{animation:none}}
.mnav-sub .offcanvas-body{overflow-y:auto}
.mnav-back{
  display:flex;align-items:center;gap:.5rem;border:0;background:none;padding:0;
  font-size:.9rem;font-weight:700;color:var(--ink);text-align:left;cursor:pointer;
}
.mnav-back:hover{color:var(--brand)}
.mnav-back svg{flex:0 0 auto;color:var(--brand)}
.mnav-sub .nav-link{color:var(--brand)}

/* --- hero -------------------------------------------------------------- */
.hero{position:relative;background:var(--brand-deep);overflow:hidden}
.hero-slide{
  position:relative;display:flex;align-items:center;
  min-height:clamp(520px,78vh,720px);
}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);transform-origin:center;
}
/* Slow push-in while a slide is showing — reads as premium, not busy. */
.carousel-item.active .hero-bg{animation:heroZoom 9s ease-out forwards}
@keyframes heroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}

/* Two overlays: a side wash that keeps the copy legible, and a floor vignette
   that anchors the controls. The photo still reads on the right. */
.hero-slide::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(1,46,81,.94) 0%,rgba(1,46,81,.80) 34%,rgba(1,46,81,.30) 66%,rgba(1,46,81,.44) 100%),
    linear-gradient(0deg,rgba(1,46,81,.72) 0%,rgba(1,46,81,0) 42%);
}
.hero-body{position:relative;z-index:2;padding:4rem 0 6rem;max-width:680px}

.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.65rem;margin-bottom:1rem;
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
.hero-eyebrow::before{content:"";width:34px;height:2px;background:var(--accent);border-radius:2px}
/* .hero-title, not h1: only the first slide is a heading, the rest are divs so
   the page carries a single h1. Both must look identical. */
.hero .hero-title{
  color:#fff;margin:0 0 1.15rem;letter-spacing:-.025em;
  font-size:calc(1.375rem + 1.5vw);font-weight:800;line-height:1.15;
  text-shadow:0 2px 24px rgba(0,0,0,.28);
}
@media (min-width:1200px){.hero .hero-title{font-size:2.5rem}}
.hero .hero-title .hl{color:var(--accent)}
.hero p{color:rgba(255,255,255,.88);font-size:1.08rem;max-width:560px;margin-bottom:0}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}

.hero-trust{
  list-style:none;padding:0;margin:2.25rem 0 0;
  display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;
}
.hero-trust li{
  position:relative;padding-left:1.6rem;color:rgba(255,255,255,.82);
  font-size:.86rem;font-weight:600;
}
.hero-trust li::before{
  content:"";position:absolute;left:0;top:.42em;width:.95rem;height:.5rem;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);
}

/* Copy animates in per slide, staggered. Gated on the .js-anim class that
   main.js sets, so the hero is never left blank if scripts do not run. */
.js-anim .carousel-item .hero-body > *{opacity:0;transform:translateY(16px)}
.js-anim .carousel-item.active .hero-body > *{animation:heroIn .7s cubic-bezier(.22,.61,.36,1) forwards}
.js-anim .carousel-item.active .hero-body > *:nth-child(1){animation-delay:.08s}
.js-anim .carousel-item.active .hero-body > *:nth-child(2){animation-delay:.18s}
.js-anim .carousel-item.active .hero-body > *:nth-child(3){animation-delay:.28s}
.js-anim .carousel-item.active .hero-body > *:nth-child(4){animation-delay:.38s}
.js-anim .carousel-item.active .hero-body > *:nth-child(5){animation-delay:.48s}
@keyframes heroIn{to{opacity:1;transform:translateY(0)}}

/* controls: slide counter + arrows, sitting on the hero floor */
.hero-controls{position:absolute;left:0;right:0;bottom:2rem;z-index:3}
.hero-controls-inner{display:flex;align-items:center;justify-content:flex-end;gap:1.5rem}
.hero-count{display:flex;align-items:center;gap:.6rem;color:rgba(255,255,255,.6);font-size:.85rem;font-weight:700;letter-spacing:.08em}
.hero-count .hc-now{color:#fff;font-size:1.05rem}
.hero-count .hc-sep{width:34px;height:1px;background:rgba(255,255,255,.3)}
.hero-arrows{display:flex;gap:.6rem}
.hero-arrow{
  width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.32);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;backdrop-filter:blur(6px);
}
.hero-arrow:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.hero-arrow:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Scroll-in for the blocks below the fold. main.js adds .js-reveal and tags
   the elements, so a page without scripts never has anything left invisible —
   and it does not tag them at all when the reader has asked for less motion. */
.js-reveal .reveal{
  opacity:0;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),
             transform .55s cubic-bezier(.22,.61,.36,1);
  /* The card hover lift is a transform too; without this the two fight. */
  will-change:opacity,transform;
}
.js-reveal .reveal.is-in{opacity:1;transform:none;will-change:auto}

@media (prefers-reduced-motion:reduce){
  .carousel-item.active .hero-bg{animation:none;transform:scale(1)}
  .js-anim .carousel-item .hero-body > *{opacity:1;transform:none}
  .js-anim .carousel-item.active .hero-body > *{animation:none}
  /* Belt and braces: main.js already skips tagging under this preference. */
  .js-reveal .reveal{opacity:1;transform:none;transition:none}
}

/* stat strip under the banner */
.stat-strip{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:3}
.stat-strip .row > div{border-right:1px solid var(--line-soft)}
.stat-strip .row > div:last-child{border-right:0}
.stat-item{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  padding:1.9rem 1rem;text-align:left;
}
.stat-ico{
  width:54px;height:54px;flex:0 0 auto;border-radius:14px;
  background:var(--brand-tint);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  transition:background .22s ease,color .22s ease,transform .22s ease;
}
.stat-item:hover .stat-ico{background:var(--brand);color:#fff;transform:translateY(-3px)}
.stat-text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.stat-num{font-size:clamp(1.55rem,2.4vw,2rem);font-weight:800;color:var(--ink);letter-spacing:-.025em}
.stat-lbl{
  font-size:.76rem;color:var(--muted);font-weight:700;margin-top:.4rem;
  text-transform:uppercase;letter-spacing:.09em;
}

/* --- page header (inner pages) ----------------------------------------- */
/* The photo is set per page by page_head(), as an inline background-image. */
.page-head{
  position:relative;overflow:hidden;
  background-color:var(--brand-deep);
  background-position:center 30%;background-size:cover;background-repeat:no-repeat;
  padding:clamp(3.25rem,6vw,5rem) 0;
}
/* Deep on the left where the heading sits, clearing to show the photo right.
   A neutral navy wash rather than brand blue, so the photo keeps its colour. */
.page-head::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(1,32,58,.93) 0%,rgba(1,32,58,.78) 38%,rgba(1,32,58,.34) 72%,rgba(1,32,58,.22) 100%),
    linear-gradient(0deg,rgba(1,32,58,.45) 0%,rgba(1,32,58,0) 60%);
}
.page-head > .container{position:relative;z-index:2}
.page-head h1{color:#fff;margin:0 0 .5rem}
.page-head .lead-text{color:rgba(255,255,255,.82);max-width:720px;margin-bottom:0}
.breadcrumb{margin:0 0 .85rem;font-size:.83rem;--bs-breadcrumb-divider-color:rgba(255,255,255,.45)}
.breadcrumb a{color:rgba(255,255,255,.78)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb-item.active{color:var(--accent)}
.breadcrumb-item+.breadcrumb-item::before{color:rgba(255,255,255,.4)}

/* --- cards ------------------------------------------------------------- */
/* No implicit height:100% — stacked cards would stretch to the column height.
   Equal-height rows opt in with Bootstrap's .h-100. */
.card-soft{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
  overflow:hidden;
}
.card-soft:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfdcec}

/* Product cards. Square media so wide equipment photos are not cropped, with
   the action affordance revealed on hover. */
.product-card{
  display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand)}
.pc-media{
  position:relative;display:block;aspect-ratio:1/1;background:#fff;
  overflow:hidden;border-bottom:1px solid var(--line-soft);
}
/* contain, not cover: these are studio shots of wide equipment, and cover
   sliced the ends off. White ground so the shots' own background blends in. */
.pc-media img{
  width:100%;height:100%;object-fit:contain;padding:.5rem;
  transition:transform .45s ease;
}
.product-card:hover .pc-media img{transform:scale(1.06)}
.pc-go{
  position:absolute;right:.75rem;bottom:.75rem;width:38px;height:38px;border-radius:50%;
  background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease,background .22s ease;
  box-shadow:0 4px 12px rgba(1,59,102,.28);
}
.product-card:hover .pc-go{opacity:1;transform:translateY(0)}
.pc-body{padding:.95rem 1.05rem 1.15rem;display:flex;flex-direction:column;flex:1;gap:.4rem}
.pc-cat{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pc-body :is(h2,h3){font-size:.95rem;font-weight:700;margin:0;line-height:1.4}
.pc-body :is(h2,h3) a{color:var(--ink)}
.product-card:hover .pc-body :is(h2,h3) a{color:var(--brand)}
.pc-more{
  margin-top:auto;padding-top:.6rem;font-size:.78rem;font-weight:700;color:var(--brand);
  display:inline-flex;align-items:center;gap:.35rem;
}
.pc-more svg{transition:transform .2s ease}
.product-card:hover .pc-more svg{transform:translateX(3px)}

/* Category tiles. Light cards, because the category photos are product shots
   on white — a dark overlay just made them muddy. */
.cat-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.1rem}
.cat-tile{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.cat-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand)}
.ct-media{position:relative;display:block;aspect-ratio:1/1;background:#fff;overflow:hidden}
.ct-media img{width:100%;height:100%;object-fit:contain;padding:.6rem;transition:transform .45s ease}
.cat-tile:hover .ct-media img{transform:scale(1.06)}
.ct-body{padding:.9rem 1rem 1.1rem;display:flex;flex-direction:column;flex:1;gap:.5rem}
.ct-name{font-size:.92rem;font-weight:700;color:var(--ink);line-height:1.35}
.cat-tile:hover .ct-name{color:var(--brand)}
.ct-more{
  margin-top:auto;font-size:.78rem;font-weight:700;color:var(--brand);
  display:inline-flex;align-items:center;gap:.35rem;
}
.ct-more svg{transition:transform .2s ease}
.cat-tile:hover .ct-more svg{transform:translateX(3px)}

/* No forced height — stacked cards would stretch to the column. Equal-height
   rows opt in with Bootstrap's .h-100, same as .card-soft. */
.feature-card{padding:1.75rem 1.5rem}
.feature-card .ico{
  width:52px;height:52px;border-radius:12px;background:var(--brand-tint);color:var(--brand);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem;
}
.feature-card :is(h2,h3){font-size:1.08rem;margin-bottom:.6rem}
.feature-card p{font-size:.93rem;margin:0}

/* --- product detail ---------------------------------------------------- */
.pd-gallery{position:sticky;top:calc(var(--header-h) + 20px)}
.pd-main{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
}
/* contain so no part of the equipment is cropped out of the square frame */
.pd-main img{width:100%;height:100%;object-fit:contain;padding:1.5rem}
.pd-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:.65rem;margin-top:.65rem}
.pd-thumb{
  border:1.5px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#fff;
  aspect-ratio:1/1;cursor:pointer;padding:0;transition:border-color .18s ease;
}
.pd-thumb img{width:100%;height:100%;object-fit:contain;padding:.3rem}
.pd-thumb.active,.pd-thumb:hover{border-color:var(--brand)}

/* Enquiry block under the sticky gallery. */
/* Sits right under the page-head h1, so it reads as a section lead-in rather
   than competing with that scale. */
.pd-title{font-size:clamp(1.3rem,2.1vw,1.65rem);margin:.1rem 0 1rem}

/* The description is authored HTML now, so style what it can contain rather
   than relying on a .lead-text class the editor cannot add. */
.pd-copy > p:first-of-type{font-size:1.06rem}
.pd-copy ul,.pd-copy ol{margin:0 0 1rem 0;padding-left:1.35rem}
.pd-copy li{margin-bottom:.4rem;line-height:1.75}
.pd-copy h3,.pd-copy h4{font-size:1.1rem;margin:1.5rem 0 .6rem}
.pd-copy > p a,.pd-copy li a{font-weight:600;text-decoration:underline;text-underline-offset:2px}

.pd-action{
  margin-top:1.25rem;padding:1.15rem;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--bg-soft);
}
.pda-label{
  display:block;font-size:.72rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.8rem;
}
.pd-action .btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem}
.pda-call{
  display:flex;align-items:center;gap:.7rem;margin-top:.7rem;padding:.6rem .8rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;
  text-decoration:none;transition:border-color .18s ease,box-shadow .18s ease;
}
.pda-call:hover{border-color:var(--brand);box-shadow:var(--shadow-sm)}
.pda-ico{
  width:32px;height:32px;flex:0 0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-tint);color:var(--brand);
}
.pda-text{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.pda-text small{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pda-text strong{font-size:.95rem;color:var(--ink)}
.pda-wa .pda-ico{background:#e7f8ee;color:#1eaf55}
.pda-wa:hover{border-color:#1eaf55}

/* "You are enquiring about X" strip on the quote page. */
.rq-product{
  display:flex;align-items:center;gap:.9rem;margin-bottom:1.5rem;padding:.75rem;
  border:1px solid var(--brand-tint);border-radius:var(--radius-sm);background:var(--brand-tint-2);
}
.rq-product img{width:56px;height:56px;flex:0 0 auto;object-fit:contain;background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:4px}
.rq-product small{display:block;font-size:.7rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.rq-product a{font-weight:700;color:var(--brand)}

/* What the range can do, beside the enquiry form. */
.pd-capability{margin-top:1.75rem}
/* The accreditation marks under it, on their own line. */
.pd-accred{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line);
}
.pd-accred img{
  height:46px;width:auto;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:5px;
}
.pd-accred span{flex:1 1 180px;min-width:0;font-size:.8rem;line-height:1.5;color:var(--muted)}
/* The form beside it is much taller than this column; pinning the copy keeps
   it level with the first field instead of stranding empty space under it. */
@media (min-width:992px){
  .pd-enquire{position:sticky;top:calc(var(--header-h) + 28px)}
}

/* Features and export markets as titled panels rather than loose blocks. */
.pd-panel{
  margin-top:2.25rem;padding:1.5rem 1.6rem;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
}
.pd-panel-title{
  display:flex;align-items:center;gap:.55rem;margin-bottom:.9rem;
  padding-bottom:.8rem;border-bottom:1px solid var(--line-soft);
}
.pd-panel-title svg{color:var(--brand);flex:0 0 auto}

/* Closing band: the leading markets as pills, the rest behind the button. */
.markets-band{padding-top:2.75rem;padding-bottom:2.75rem}
.markets-band h3{margin-bottom:1.15rem}
.mk-more{margin-top:1.25rem}
.mk-more .btn{display:inline-flex;align-items:center;gap:.4rem}

/* The export page's own grid: even cells, the flag given room to read. */
/* Region blocks down the export page. */
.ex-region + .ex-region{margin-top:2rem}
.ex-region h3{
  font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);margin:0 0 .85rem;padding-bottom:.6rem;
  border-bottom:1px solid var(--line);
}

/* 175px: narrower and the longest single-word names — Turkmenistan,
   Liechtenstein — broke across two lines mid-word. Wide enough for those and
   a phone still fits two columns. */
.ex-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(175px,100%),1fr));
  gap:.6rem;
}
.ex-grid li{
  display:flex;align-items:center;gap:.7rem;min-width:0;
  padding:.7rem .85rem;border-radius:var(--radius-sm);
  background:#fff;border:1px solid var(--line);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.ex-grid li:hover{
  border-color:var(--brand-tint);box-shadow:var(--shadow);transform:translateY(-2px);
}

/* The flag sits in a frame of its own. Emoji flags differ in drawn width, and
   without a fixed box the names step in and out down a column; the frame also
   gives a pale flag an edge to sit against. */
.ex-flag{
  flex:none;display:grid;place-items:center;
  width:38px;height:26px;overflow:hidden;
  border-radius:4px;border:1px solid var(--line);background:var(--bg-soft);
  font-size:1.35rem;line-height:1;
  /* Windows draws no colour flag glyphs, so name the fonts that do and let it
     fall back to the two letters rather than to tofu. */
  font-family:"Twemoji Country Flags","Noto Color Emoji","Apple Color Emoji",
              "Segoe UI Emoji","Segoe UI Symbol",sans-serif;
}
/* A neutral frame for the two countries with no emoji flag. */
.ex-flag-none{background:var(--brand-tint)}
.ex-name{
  min-width:0;font-size:.85rem;line-height:1.35;font-weight:600;color:var(--ink);
  overflow-wrap:break-word;
}
/* Tighter on a phone, where two columns have to share 366px. */
@media (max-width:575.98px){
  .ex-grid{gap:.5rem}
  .ex-grid li{padding:.55rem .6rem;gap:.5rem}
  .ex-flag{width:30px;height:21px;font-size:1.05rem}
  .ex-name{font-size:.78rem}
}
.spec-list{list-style:none;padding:0;margin:0}
.spec-list li{
  position:relative;padding:.55rem 0 .55rem 1.85rem;border-bottom:1px dashed var(--line);
  font-size:.95rem;color:var(--body);
}
.spec-list li:last-child{border-bottom:0}
.spec-list li::before{
  content:"";position:absolute;left:0;top:1.02rem;width:9px;height:9px;border-radius:2px;
  background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.spec-table{width:100%;font-size:.93rem;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.spec-table th,.spec-table td{padding:.7rem 1rem;border-bottom:1px solid var(--line-soft)}
.spec-table th{background:var(--bg-soft);color:var(--ink);font-weight:600;width:44%;white-space:nowrap}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}

.sticky-cta{
  background:linear-gradient(140deg,var(--brand) 0%,var(--brand-deep) 100%);
  color:#fff;border-radius:var(--radius);padding:1.6rem;
}
.sticky-cta h3{color:#fff;font-size:1.15rem;margin-bottom:.5rem}
.sticky-cta p{color:rgba(255,255,255,.8);font-size:.9rem}
.sticky-cta a.tel{color:#fff;font-weight:700;font-size:1.1rem}
.sticky-cta a.tel:hover{color:var(--accent)}

.side-nav{list-style:none;padding:0;margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.side-nav a{display:block;padding:.7rem 1.05rem;font-size:.88rem;color:var(--body);border-bottom:1px solid var(--line-soft);font-weight:500}
.side-nav li:last-child a{border-bottom:0}
.side-nav a:hover{background:var(--bg-soft);color:var(--brand)}
.side-nav a.active{background:var(--brand-tint);color:var(--brand);font-weight:700;box-shadow:inset 3px 0 0 var(--brand)}

/* --- search ------------------------------------------------------------ */
.topbar-search{
  align-items:center;gap:.4rem;padding:.3rem 0;border:0;background:none;
  color:#cfdcec;font-weight:600;font-size:inherit;white-space:nowrap;
  transition:color .18s ease;
}
.topbar-search:hover,.topbar-search[aria-expanded="true"]{color:var(--accent)}
.header-search{border-top:1px solid var(--line);background:var(--bg-soft);padding:.9rem 0}

.search-form{display:flex;gap:.6rem;max-width:640px}
.search-form input{
  flex:1 1 auto;min-width:0;padding:.72rem 1rem;font-size:.95rem;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.search-form input:focus{
  outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(2,103,177,.14);
}
.search-form .btn{flex:0 0 auto}
.search-form-sm{max-width:none}
.search-form-sm .btn{display:inline-flex;align-items:center;padding:.72rem 1rem}

.search-group + .search-group{margin-top:2.5rem}
.search-group-title{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.search-count{
  min-width:24px;padding:0 .4rem;border-radius:999px;background:var(--brand-tint);
  color:var(--brand);font-size:.72rem;font-weight:800;line-height:1.7;text-align:center;
}
.search-hits{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.75rem}
.search-hit{
  display:flex;align-items:center;gap:.9rem;padding:.75rem;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.search-hit:hover{border-color:var(--brand);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.search-hit svg{margin-left:auto;flex:0 0 auto;color:var(--brand)}
.sh-media{
  width:52px;height:52px;flex:0 0 auto;border:1px solid var(--line);
  border-radius:8px;background:#fff;overflow:hidden;
}
.sh-media img{width:100%;height:100%;object-fit:contain;padding:4px}
.sh-text{display:flex;flex-direction:column;min-width:0}
.sh-text strong{font-size:.92rem;color:var(--ink);line-height:1.35}
.sh-text small{font-size:.74rem;color:var(--muted);margin-top:.15rem}
.search-hit:hover .sh-text strong{color:var(--brand)}
.search-empty{margin-top:2.5rem;text-align:center}
.search-empty p{color:var(--muted);margin-bottom:1.75rem}

/* --- products listing -------------------------------------------------- */
/* The rail is short and the listing is very long; sticking it keeps the left
   column from being a tall empty strip. */
.prod-rail{position:sticky;top:calc(var(--header-h) + 24px)}
.rail-title{
  font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.9rem;
}
.listing-head{
  border-left:3px solid var(--accent);padding-left:1.1rem;margin-bottom:2.5rem;
}
.listing-head p{font-size:.95rem;color:var(--muted);margin-top:.4rem}

.rail-all{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  font-size:.82rem;font-weight:700;color:var(--brand);
}
.rail-all svg{transition:transform .2s ease}
.rail-all:hover svg{transform:translateX(3px)}

/* Category overview: intro copy beside a framed shot of the range. */
.cat-figure{
  margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
}
.cat-figure img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;padding:1.5rem;background:#fff}
.cat-figure figcaption{
  border-top:1px solid var(--line);background:var(--bg-soft);
  padding:.8rem 1.1rem;font-size:.82rem;font-weight:700;color:var(--ink);text-align:center;
}

/* The description is authored HTML now, so style what it can contain rather
   than relying on a .lead-text class the editor cannot add. */
.cat-overview > p:first-of-type{font-size:1.06rem}
.cat-overview ul,.cat-overview ol{margin:0 0 1rem 0;padding-left:1.35rem}
.cat-overview li{margin-bottom:.4rem;line-height:1.75}
.cat-overview h3,.cat-overview h4{font-size:1.1rem;margin:1.5rem 0 .6rem}
.cat-overview a{font-weight:600;text-decoration:underline;text-underline-offset:2px}

.cat-block{scroll-margin-top:calc(var(--header-h) + 24px)}
.cat-block + .cat-block{margin-top:3.25rem;padding-top:3.25rem;border-top:1px solid var(--line)}
.cat-block-head{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:.75rem 1.5rem;margin-bottom:1.4rem;
}
.cbh-text{min-width:0}
.cat-block-head .eyebrow{margin-bottom:.5rem}
.cat-block-head .btn{display:inline-flex;align-items:center;gap:.4rem;flex:0 0 auto}
/* Pulled up so the gap before the grid matches the no-intro case. */
.cat-block-intro{font-size:.95rem;line-height:1.85;margin:-.5rem 0 1.4rem;max-width:78ch}

/* --- justified body copy ----------------------------------------------- */
/* hyphens:auto keeps the word spacing even instead of opening up "rivers"
   between words on the narrower lines. Centred copy is left out on purpose —
   justifying it fights the centring. */
.about-section .lead-text,
.pd-copy > p,
.cat-overview > p,
.cat-block-intro,
.tpl-copy > p,
.post-body p{text-align:justify;hyphens:auto}

/* Sub-heading under the section H2, as the original site had it. */
.about-sub{
  font-size:1.15rem;font-weight:700;color:var(--brand);
  letter-spacing:-.01em;margin:-.35rem 0 1rem;
}
/* The photo already carries a framed treatment, so the only overlay here is
   the accreditation badge hanging off its bottom-left corner. */
.about-media{position:relative;padding:0 0 1.75rem 1.75rem}
/* The copy beside it can run to several hundred words. Pinning the photo to
   the top of its column keeps it level with the heading and lets it travel
   with the reader instead of stranding whitespace above and below it. */
@media (min-width:992px){
  .about-media{position:sticky;top:calc(var(--header-h) + 28px)}
}
.about-media > img{
  position:relative;z-index:1;width:100%;display:block;
  border-radius:var(--radius);box-shadow:var(--shadow-lg);
}
.about-badge{
  position:absolute;left:0;bottom:0;z-index:2;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:.85rem 1rem;text-align:center;
}
.ab-logos{display:flex;gap:.5rem;justify-content:center;margin-bottom:.5rem}
.ab-logos img{height:46px;width:auto;border-radius:6px}
.ab-label{
  display:block;font-size:.7rem;font-weight:700;color:var(--brand);
  text-transform:uppercase;letter-spacing:.08em;
}

.about-features{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.1rem 1.5rem;margin:1.75rem 0 0;
}
.about-feature{display:flex;gap:.8rem;align-items:flex-start}
.af-ico{
  width:38px;height:38px;flex:0 0 auto;border-radius:10px;
  background:var(--brand-tint);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
}
.af-text{display:flex;flex-direction:column;min-width:0}
.af-text strong{font-size:.92rem;color:var(--ink);font-weight:700;line-height:1.35}
.af-text span{font-size:.85rem;color:var(--muted);line-height:1.5;margin-top:.15rem}

.about-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 2rem;margin-top:2.25rem}
.about-call{display:inline-flex;align-items:center;gap:.7rem}
.ac-ico{
  width:42px;height:42px;flex:0 0 auto;border-radius:50%;
  background:var(--brand-tint);color:var(--brand);
  display:flex;align-items:center;justify-content:center;transition:all .22s ease;
}
.about-call:hover .ac-ico{background:var(--brand);color:#fff}
.ac-text{display:flex;flex-direction:column;line-height:1.25}
.ac-text small{font-size:.72rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.ac-text strong{font-size:1rem;color:var(--ink);font-weight:700}
.about-call:hover .ac-text strong{color:var(--brand)}

/* --- services ---------------------------------------------------------- */
.service-card{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand)}
/* On-site photos, not cut-outs, so they fill the frame. */
.sc-media{position:relative;aspect-ratio:16/10;background:var(--bg-soft);overflow:hidden}
.sc-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.service-card:hover .sc-media img{transform:scale(1.05)}
.sc-tag{
  position:absolute;top:1rem;left:1rem;
  background:var(--accent);color:var(--ink);
  font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.35rem .8rem;border-radius:999px;
}
.sc-num{
  position:absolute;bottom:1rem;right:1.15rem;
  font-size:2.6rem;font-weight:800;line-height:1;color:#fff;opacity:.85;
  text-shadow:0 2px 14px rgba(1,32,58,.55);letter-spacing:-.03em;
}
.sc-body{padding:1.6rem 1.6rem 1.75rem;display:flex;flex-direction:column;flex:1}
/* The first card on the services page carries the page's h2, so match on
   either level and keep the size the same. */
.sc-body :is(h2,h3){font-size:1.3rem;margin-bottom:.85rem}
.sc-body p{font-size:.95rem;text-align:justify;hyphens:auto}
.sc-body .check-list{margin-bottom:1.5rem}
.sc-foot{margin-top:auto}

/* how it works — numbered steps joined by a rule */
.process-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.75rem}
.process-steps::before{
  content:"";position:absolute;top:26px;left:12%;right:12%;height:2px;
  background:repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 18px);
}
.step{position:relative;text-align:center}
.step-num{
  position:relative;z-index:1;width:52px;height:52px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:1.15rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;
  box-shadow:0 0 0 6px var(--bg-soft);
  transition:background .22s ease,transform .22s ease;
}
.step:hover .step-num{background:var(--accent);color:var(--ink);transform:translateY(-3px)}
.step h3{font-size:1.02rem;margin-bottom:.5rem}
.step p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.6}

/* Category chips — a compact index of the ranges, used on the About page. */
.cat-chips{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center}
.cat-chip{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.6rem 1.1rem;border-radius:999px;background:#fff;
  border:1px solid var(--line);color:var(--ink);
  font-size:.88rem;font-weight:600;
  transition:border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.cat-chip svg{color:var(--brand);transition:transform .2s ease}
.cat-chip:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.cat-chip:hover svg{transform:translateX(3px)}

/* Numbered pillar cards (Our Mission / Our Team / Why Us). */
.pillar-card{position:relative;overflow:hidden;padding:1.9rem 1.6rem}
.pillar-num{
  position:absolute;top:.15rem;right:1rem;z-index:0;
  font-size:3.4rem;font-weight:800;line-height:1;color:var(--brand-tint);letter-spacing:-.03em;
}
.pillar-ico{
  position:relative;z-index:1;width:54px;height:54px;border-radius:14px;
  background:var(--brand-tint);color:var(--brand);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem;
  transition:background .22s ease,color .22s ease;
}
.pillar-card:hover .pillar-ico{background:var(--brand);color:#fff}
.pillar-card :is(h2,h3),.pillar-card p{position:relative;z-index:1}
.pillar-card :is(h2,h3){font-size:1.12rem;margin-bottom:.65rem}
.pillar-card p{font-size:.94rem;margin:0;text-align:justify;hyphens:auto}

/* --- why choose us ----------------------------------------------------- */
/* Split layout: the three points carry long paragraphs that read badly in
   narrow columns, so they stack as full-width rows beside the heading. */
.why-intro{position:sticky;top:calc(var(--header-h) + 24px)}
.why-quote{
  position:relative;margin:1.75rem 0 0;padding:1.5rem 1.5rem 1.5rem 3.5rem;
  background:var(--brand-tint-2);border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
}
.why-quote::before{
  content:"\201C";position:absolute;left:.9rem;top:.35rem;
  font-family:Georgia,'Times New Roman',serif;font-size:3.5rem;line-height:1;
  color:var(--accent);
}
.why-quote p{margin:0;font-size:1.02rem;font-style:italic;color:var(--ink);line-height:1.7}
.why-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

.why-list{display:flex;flex-direction:column}
.why-item{
  display:flex;gap:1.25rem;padding:1.75rem 0;
  border-bottom:1px dashed var(--line);
}
.why-item:first-child{padding-top:0}
.why-item:last-child{border-bottom:0;padding-bottom:0}
.wi-ico{
  position:relative;width:60px;height:60px;flex:0 0 auto;border-radius:16px;
  background:var(--brand-tint);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
  transition:background .22s ease,color .22s ease;
}
.why-item:hover .wi-ico{background:var(--brand);color:#fff}
.wi-num{
  position:absolute;top:-8px;right:-8px;
  min-width:26px;height:26px;padding:0 .3rem;border-radius:13px;
  background:var(--ink);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.02em;
  display:inline-flex;align-items:center;justify-content:center;
}
.why-item:hover .wi-num{background:var(--accent);color:var(--ink)}
.wi-body{min-width:0}
.wi-body h3{font-size:1.08rem;margin:0 0 .5rem}
.wi-body p{margin:0;font-size:.95rem;text-align:justify;hyphens:auto}

/* --- split media ------------------------------------------------------- */
.split-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.split-media img{width:100%;display:block}
.check-list{list-style:none;padding:0;margin:1.25rem 0 0}
.check-list li{position:relative;padding:.35rem 0 .35rem 1.85rem;font-size:.96rem}
.check-list li::before{
  content:"";position:absolute;left:0;top:.72rem;width:1.05rem;height:.55rem;
  border-left:2.5px solid var(--brand);border-bottom:2.5px solid var(--brand);transform:rotate(-45deg);
}

/* --- closing CTA ------------------------------------------------------- */
/* An inset panel on a white section. The footer is the same navy, so a
   full-bleed dark band here merged into it as one slab. */
.cta-section{background:var(--bg);padding:clamp(3rem,5.5vw,4.5rem) 0}
.cta-panel{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:calc(var(--radius) + 8px);
  padding:clamp(1.9rem,4vw,3.1rem);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(1.5rem,4vw,3.5rem);
  background:linear-gradient(115deg,#013156 0%,var(--brand-deep) 45%,var(--brand) 100%);
  box-shadow:0 20px 44px rgba(1,59,102,.26);
}
/* Faint workshop photograph, then a wash over it to keep the text legible. */
.cta-panel::before{
  content:"";position:absolute;inset:0;z-index:-2;opacity:.11;
  background:url(../img/slider-banner-2.jpg) center/cover no-repeat;
}
/* Accent glow in the top-right corner, so the panel is not a flat rectangle. */
.cta-panel::after{
  content:"";position:absolute;z-index:-1;top:-45%;right:-8%;width:min(460px,55%);aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(245,196,0,.22),rgba(245,196,0,0) 68%);
}
.cta-copy{flex:1 1 460px;min-width:0}
.cta-eyebrow{
  display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.65rem;
}
.cta-panel :is(h2,h3){color:#fff;font-size:clamp(1.5rem,2.6vw,2.05rem);margin-bottom:.6rem}
.cta-panel p{color:rgba(255,255,255,.82);font-size:.98rem;line-height:1.75;margin:0;max-width:56ch}

.cta-actions{flex:0 0 auto;display:flex;flex-direction:column;gap:.85rem;min-width:250px}
.cta-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem}

/* Phone number as a bordered plate rather than a second button, so the yellow
   Request a Quote stays the single obvious primary action. */
.cta-call{
  display:flex;align-items:center;gap:.75rem;padding:.7rem .95rem;
  border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.07);text-decoration:none;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.cta-call:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
.cta-call-ico{
  width:36px;height:36px;flex:0 0 auto;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--ink);
}
.cta-call-text{display:flex;flex-direction:column;line-height:1.3}
.cta-call-text small{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.cta-call-text strong{font-size:1.02rem;font-weight:700;color:#fff}

@media (max-width:991.98px){
  .cta-panel{flex-direction:column;align-items:stretch;gap:1.6rem}
  /* flex-basis is the height once the panel stacks, so the 460px basis above
     would leave a tall empty gap under the copy. */
  .cta-copy{flex:0 1 auto}
  .cta-actions{width:100%;min-width:0}
}

/* The copy beside the callback form. Its picture is decoration, so it sits
   behind the words as a faint watermark rather than under them as a cut-out —
   which is what made it read as stray clip art. */
.enq-copy{position:relative}
.enq-copy > *{position:relative;z-index:1}
.enq-copy.has-art::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:0;bottom:-3rem;width:min(300px,72%);aspect-ratio:1;
  background:var(--enq-art) left bottom/contain no-repeat;
  /* Faint enough to sit under the paragraph without fighting it for the eye. */
  opacity:.07;
}
/* Nothing to sit behind on a phone: the column is only as tall as its text. */
@media (max-width:991.98px){ .enq-copy.has-art::after{display:none} }

/* --- forms ------------------------------------------------------------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.75rem}
.form-label{font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:.35rem}
.form-control,.form-select{
  border:1.5px solid var(--line);border-radius:8px;padding:.68rem .9rem;font-size:.93rem;color:var(--ink);
}
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(2,103,177,.12)}
.form-note{font-size:.78rem;color:var(--muted);line-height:1.6}

/* --- gallery ----------------------------------------------------------- */
.gal-tabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;
  margin:0 auto 2rem;padding:.35rem;width:max-content;max-width:100%;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;
}
.gal-tab{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.4rem;border:0;border-radius:999px;background:transparent;
  font-size:.9rem;font-weight:700;color:var(--muted);letter-spacing:.01em;
  transition:background .22s ease,color .22s ease,box-shadow .22s ease;
}
.gal-tab:hover{color:var(--brand)}
.gal-tab.active{background:var(--brand);color:#fff;box-shadow:var(--shadow-sm)}
.gal-tab-n{
  min-width:24px;padding:0 .35rem;border-radius:999px;
  background:rgba(0,0,0,.07);color:inherit;
  font-size:.72rem;font-weight:800;line-height:1.6;text-align:center;
}
.gal-tab.active .gal-tab-n{background:rgba(255,255,255,.22)}

.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.gallery-item{
  position:relative;display:block;padding:0;width:100%;
  border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:4/3;
  background:var(--bg-soft);border:1px solid var(--line);cursor:zoom-in;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.gallery-item:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-3px)}
.gallery-item:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.gallery-item:hover img{transform:scale(1.07)}

/* Caption and zoom cue, revealed on hover. */
.gi-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:flex-end;gap:.5rem;padding:.9rem;
  background:linear-gradient(0deg,rgba(1,32,58,.88) 0%,rgba(1,32,58,.25) 45%,rgba(1,32,58,0) 75%);
  opacity:0;transition:opacity .25s ease;
}
.gallery-item:hover .gi-overlay,.gallery-item:focus-visible .gi-overlay{opacity:1}
.gi-zoom{
  position:absolute;top:.75rem;right:.75rem;
  width:36px;height:36px;border-radius:50%;
  background:var(--accent);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transform:scale(.8);transition:transform .25s ease;
}
.gallery-item:hover .gi-zoom{transform:scale(1)}
.gi-caption{
  color:#fff;font-size:.8rem;font-weight:600;line-height:1.4;text-align:left;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* --- lightbox ---------------------------------------------------------- */
/* relative, so the close button and arrows anchor to the image block rather
   than to the fixed modal (which put them outside the viewport). */
.lightbox .modal-content{background:transparent;border:0;position:relative}
.lightbox .modal-dialog{max-width:min(1100px,94vw)}
.lb-stage{
  background:#fff;border-radius:var(--radius);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  max-height:76vh;
}
.lb-stage img{max-width:100%;max-height:76vh;width:auto;height:auto;display:block}
.lb-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  color:#fff;padding:.85rem .25rem 0;font-size:.9rem;
}
.lb-caption{font-weight:600}
.lb-count{color:rgba(255,255,255,.7);font-weight:700;white-space:nowrap}
.lb-close{
  position:absolute;top:-52px;right:0;z-index:3;
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.1);color:#fff;font-size:1.5rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:all .2s ease;
}
.lb-close:hover{background:#fff;color:var(--ink);border-color:#fff}
.lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);background:rgba(1,32,58,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;backdrop-filter:blur(4px);
}
.lb-nav:hover{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.lb-prev{left:-58px}
.lb-next{right:-58px}
@media (max-width:1250px){
  .lb-prev{left:.5rem}
  .lb-next{right:.5rem}
}

/* --- FAQ --------------------------------------------------------------- */
.accordion-item{border:1px solid var(--line);border-radius:var(--radius-sm)!important;margin-bottom:.75rem;overflow:hidden}
.accordion-button{font-weight:600;color:var(--ink);font-size:.98rem;padding:1.05rem 1.25rem;background:#fff}
.accordion-button:not(.collapsed){background:var(--brand-tint);color:var(--brand);box-shadow:none}
.accordion-button:focus{box-shadow:0 0 0 3px rgba(2,103,177,.12);border-color:var(--brand)}
.accordion-body{font-size:.94rem;padding:1.1rem 1.25rem;color:var(--body)}

/* --- blog -------------------------------------------------------------- */
/* Article cards. Unlike a product card these carry an excerpt and a meta line,
   so they get their own shell rather than borrowing the product one: the media
   is a banner crop and the body is prose, not a label. */
.blog-card{
  display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--brand)}
/* 16:9 to match the artwork: the article banners carry their headline as part
   of the image, and a shallower crop sliced the first and last word off. */
.bc-media{
  display:block;aspect-ratio:16/9;background:var(--bg-soft);overflow:hidden;
  border-bottom:1px solid var(--line-soft);
}
/* contain, not cover: these are designed banners with the headline set into
   the artwork, and they arrive both 16:9 and square. Cropping a square one to
   this frame cut the last line of its title off. */
.bc-media img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .45s ease}
.blog-card:hover .bc-media img{transform:scale(1.05)}
.bc-body{display:flex;flex-direction:column;flex:1;gap:.55rem;padding:1.15rem 1.25rem 1.35rem}
.bc-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;
  font-size:.75rem;font-weight:600;color:var(--muted);line-height:1.4;
}
.bc-sep{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6;flex:none}
.bc-body :is(h2,h3){font-size:1.05rem;font-weight:700;margin:0;line-height:1.4;letter-spacing:-.01em}
.bc-body :is(h2,h3) a{color:var(--ink)}
.blog-card:hover .bc-body :is(h2,h3) a{color:var(--brand)}
/* Excerpts clamp to three lines so a long opening paragraph cannot push one
   card taller than the rest of its row. */
.bc-body p{
  margin:0;font-size:.88rem;line-height:1.65;color:var(--body);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
/* Sits at the foot of the card as a link. align-self keeps it hugging its own
   text rather than stretching across the card, which inline-flex on a flex
   child would otherwise do. */
.bc-more{
  margin-top:auto;padding-top:.55rem;font-size:.8rem;font-weight:700;color:var(--brand);
  display:inline-flex;align-items:center;gap:.35rem;
  align-self:flex-start;text-decoration:none;
}
.bc-more:hover{color:var(--brand-deep)}
.bc-more svg{transition:transform .2s ease}
.blog-card:hover .bc-more svg{transform:translateX(3px)}

/* Banners arrive both 16:9 and square; show all of one rather than crop into
   the headline that is set into the artwork. */
.post-hero{aspect-ratio:16/9;background:var(--bg-soft)}
.post-hero img{width:100%;height:100%;object-fit:contain;display:block}
.post-body{max-width:820px}

/* Headings.
   The imported articles use h3 as their section level — 841 of them across
   the 90 posts against 84 h2s, about one per piece — so h2 and h3 are set as
   siblings here. Both start a section; h4 numbers the sub-points inside one.

   A section start is marked by a rule across the column with a heavier accent
   segment sitting at its left end. The rule is the section break, which is
   what an article of ten sections actually needs, and the accent marks where
   it begins — so it is doing structural work rather than sitting there as
   trim. Colour then separates the three tiers on its own: navy for section
   heads, brand blue for sub-points, grey for the copy. */
.post-body > :is(h2,h3),
.post-faq{position:relative;border-top:1px solid var(--line)}
.post-body > :is(h2,h3)::before,
.post-faq::before{
  content:'';position:absolute;left:0;top:-2px;
  width:56px;height:3px;border-radius:2px;background:var(--accent);
}
.post-body > :is(h2,h3){margin:3.25rem 0 1rem;padding-top:1.4rem;color:var(--brand-deep)}
.post-body h2{font-size:1.62rem;letter-spacing:-.024em;line-height:1.24}
.post-body h3{font-size:1.38rem;letter-spacing:-.02em;line-height:1.3}
/* Sub-points inside a section. The imported markup set these a hundredth of a
   rem above body copy, so they read as a bold paragraph rather than a heading;
   the size step and the brand blue put them back into the hierarchy. Most
   already carry their own "1." "2." numbering, which is marker enough. */
.post-body h4:not(.accordion-header){
  font-size:1.12rem;margin:2rem 0 .55rem;
  color:var(--brand);letter-spacing:-.012em;line-height:1.35;
}
.post-body h5{
  font-size:.82rem;margin:1.4rem 0 .45rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;font-weight:800;
}
.post-body :is(h2,h3,h4,h5):first-child{margin-top:0}
/* Nothing to divide from at the top of the article. */
.post-body > :is(h2,h3):first-child{padding-top:0;border-top:0}
.post-body > :is(h2,h3):first-child::before{content:none}
.post-body p{font-size:1.02rem}
.post-body ul,.post-body ol{padding-left:1.15rem;margin-bottom:1.15rem}
.post-body li{margin-bottom:.4rem}
.post-body a{font-weight:600;text-decoration:underline;text-underline-offset:2px}
.post-body strong{color:var(--ink)}
/* Wide spec tables scroll inside the article, never widening the page. */
.table-scroll{overflow-x:auto;margin:1.25rem 0;-webkit-overflow-scrolling:touch}
.post-body table{
  width:100%;min-width:520px;border-collapse:collapse;
  border:1px solid var(--line);font-size:.94rem;
}
.post-body :is(th,td){padding:.6rem .8rem;border:1px solid var(--line);text-align:left;vertical-align:top}
.post-body th{background:var(--bg-soft);color:var(--ink);font-weight:700}
.post-body tbody tr:nth-child(even){background:#fbfcfe}

/* Date and reading time, sitting between the hero image and the copy. */
.post-meta{margin:0 0 1.25rem;padding-bottom:1.25rem;border-bottom:1px solid var(--line-soft)}
.post-meta .bc-meta{font-size:.82rem}

/* --- article layout: contents rail beside the copy ---------------------- */
/* Stacked by default, two columns from lg. The rail carries the contents
   list, the offer and the way back to the index, and travels with the reader.
   Stacked it drops below the copy — a quote card ahead of the article would
   push the piece the reader came for off the screen. */
.article-grid{display:grid;gap:1.75rem}
.ag-rail{order:2}
.ag-main{order:1}
@media (min-width:992px){
  .article-grid{grid-template-columns:minmax(0,320px) minmax(0,1fr);column-gap:3rem;align-items:start}
  .ag-rail,.ag-main{order:0}
  /* On most of these articles the contents list runs longer than the window,
     so a top pin would hold the rail's foot — and the quote card sitting on
     it — permanently below the fold. Scripts lower --rail-top on those pages
     until the rail pins by its bottom edge instead. Without scripts the plain
     top pin applies, which is the right fallback. */
  .ag-rail{position:sticky;top:var(--rail-top,calc(var(--header-h) + 20px))}
}
.ag-main{min-width:0}

/* Byline: who wrote it, when, how long it runs, and the share controls. */
.post-byline{
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
  margin-bottom:2rem;padding-bottom:1.25rem;border-bottom:1px solid var(--line);
}
.pb-mark{
  flex:none;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-tint);color:var(--brand);
}
.pb-who{display:flex;flex-direction:column;gap:.1rem;line-height:1.35}
.pb-who strong{font-size:.9rem;color:var(--ink)}
.post-byline .bc-meta{font-size:.78rem}
.post-byline .post-meta{display:none}

.share{display:flex;align-items:center;gap:.4rem;margin-left:auto}
.share-label{
  font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-right:.15rem;
}
.share-btn{
  width:34px;height:34px;flex:none;border-radius:50%;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:#fff;color:var(--body);cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.share-btn:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.share-btn.copied{background:var(--accent);border-color:var(--accent);color:var(--ink)}

/* --- recurring article blocks ------------------------------------------- */
/* Nearly every article ends the same way: takeaways up top, then the pitch,
   the FAQs and a conclusion. Setting them as pieces gives the page a rhythm
   the plain column did not have. */
.post-block{margin:2rem 0}
.post-block > :is(h2,h3):first-child{margin-top:0}

.post-takeaways{
  background:var(--brand-tint-2);border:1px solid #cfe4f6;
  border-left:4px solid var(--brand);border-radius:var(--radius);
  padding:1.35rem 1.5rem;
}
.post-takeaways > :is(h2,h3){font-size:1.05rem;color:var(--brand-deep);margin-bottom:.75rem}
.post-takeaways ul{list-style:none;padding-left:0;margin-bottom:0}
.post-takeaways li{position:relative;padding-left:1.6rem;margin-bottom:.55rem;font-size:.95rem}
/* A tick, not a chevron: taller than it is wide before the 45° turn. */
.post-takeaways li::before{
  content:'';position:absolute;left:3px;top:.28em;width:6px;height:11px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(45deg);
}
.post-takeaways li:last-child{margin-bottom:0}

/* The FAQ run takes the section divider on the block's own top edge — its
   heading sits flush against it, so a second rule on the heading would double
   the line. The border and accent come from the heading rules above. */
.post-faq{margin-top:3.25rem;padding-top:1.4rem}
.post-faq > :is(h2,h3){margin-bottom:1.1rem;color:var(--brand-deep)}

/* The questions fold away, using the same accordion as the FAQ page so the
   two read as one component. These refinements are for the article context:
   a marker that answers the "can I open this?" question, and a heading that
   carries no weight of its own since the button inside supplies it. */
.faq-accordion .accordion-item{
  border:1px solid var(--line);border-radius:var(--radius-sm)!important;
  margin-bottom:.65rem;background:#fff;transition:border-color .18s ease,box-shadow .18s ease;
}
.faq-accordion .accordion-item:hover{border-color:#cfdcec}
.faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)){
  border-color:var(--brand);box-shadow:var(--shadow-sm);
}
.faq-accordion .accordion-header{margin:0;font-size:inherit;line-height:inherit}
.faq-accordion .accordion-button{
  padding:.95rem 1.15rem;font-size:.95rem;font-weight:700;color:var(--ink);
  gap:.85rem;align-items:flex-start;text-align:left;
}
.faq-accordion .accordion-button::after{
  flex:none;width:1.05rem;height:1.05rem;margin-top:.15rem;background-size:1.05rem;
}
.faq-accordion .accordion-body{padding:0 1.15rem 1.1rem;font-size:.94rem}
.faq-accordion .accordion-body > :last-child{margin-bottom:0}

.post-pitch{
  background:var(--bg-soft);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.5rem 1.65rem;
}
.post-pitch > :is(h2,h3){margin-top:0;font-size:1.22rem;color:var(--brand-deep)}

.post-conclusion{
  border-left:3px solid var(--accent);padding:.15rem 0 .15rem 1.35rem;
}
.post-conclusion > :is(h2,h3){margin-top:0;font-size:1.22rem;color:var(--brand-deep)}

.ag-rail .sticky-cta{margin:0}
/* Headings are scroll targets; clear the sticky header when one is jumped to. */
.article .post-body :is(h2,h3){scroll-margin-top:calc(var(--header-h) + 20px)}

.toc{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.15rem 1.3rem;margin-bottom:1.25rem;box-shadow:var(--shadow-sm);
}
.toc-title{
  display:flex;align-items:center;gap:.45rem;margin:0;
  font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);cursor:pointer;list-style:none;
}
.toc-title::-webkit-details-marker{display:none}
.toc-title svg{flex:none}
/* A closed rail on a phone shows only its title; the caret says so. */
.toc-title::after{
  content:'';margin-left:auto;width:8px;height:8px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;
}
.toc[open] .toc-title::after{transform:rotate(-135deg) translateY(-2px)}

/* A continuous track down the list, with each entry able to claim its own
   segment of it — the docs-rail pattern, and it reads at a glance. */
.toc-list{
  list-style:none;margin:.85rem 0 0;padding:0;
  border-left:2px solid var(--line-soft);
}
.toc-list li{margin:0}
.toc-list a{
  display:block;margin-left:-2px;padding:.36rem .5rem .36rem .85rem;
  border-left:2px solid transparent;border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:.855rem;line-height:1.5;color:var(--body);
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.toc-list a:hover{color:var(--brand);border-left-color:var(--line);background:var(--brand-tint-2)}
.toc-list a.active{
  color:var(--brand-deep);font-weight:700;
  border-left-color:var(--brand);background:var(--brand-tint-2);
}
/* Depth is relative to the article's own top heading level, so a sub-point
   reads as one wherever the writer started. */
.toc-d1 a{padding-left:1.55rem;font-size:.81rem;color:var(--muted)}
.toc-d1 a.active{color:var(--brand)}

@media (min-width:992px){
  /* Beside the copy the rail is always open, so the summary stops being a
     control and goes back to being a label. */
  .toc-title{pointer-events:none;cursor:default}
  .toc-title::after{display:none}
}

/* --- pagination --------------------------------------------------------- */
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid var(--line);
}
.pg-step{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.5rem .95rem;border:1px solid var(--line);border-radius:999px;
  font-size:.85rem;font-weight:700;color:var(--brand);background:#fff;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.pg-step:hover{border-color:var(--brand);background:var(--brand-tint-2)}
.pg-step.is-off{color:var(--muted);border-color:var(--line-soft);pointer-events:none}
/* The Previous arrow is the shared arrow glyph turned around. */
.pg-step[rel=prev] svg,.pg-step.is-off:first-child svg{transform:rotate(180deg)}
.pg-nums{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.pg-num{
  min-width:38px;height:38px;padding:0 .5rem;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.88rem;font-weight:700;color:var(--ink);
  transition:background .18s ease,color .18s ease;
}
.pg-num:hover{background:var(--brand-tint);color:var(--brand)}
.pg-num.is-here{background:var(--brand);color:#fff}
.pg-gap{color:var(--muted);padding:0 .15rem}
@media (max-width:575.98px){
  .pager{justify-content:center}
  .pg-nums{order:-1;width:100%;justify-content:center}
}

/* --- markets / countries ----------------------------------------------- */
.markets{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.markets h3{font-size:1rem;margin-bottom:.75rem}
.markets p{font-size:.85rem;color:var(--muted);line-height:1.85;margin:0}

/* --- footer ------------------------------------------------------------ */
.site-footer{background:var(--brand-deep);color:#a9bdd8;font-size:.9rem}
.footer-main{padding:clamp(2.75rem,5vw,4.25rem) 0 clamp(2rem,3.5vw,3rem)}
.site-footer h4{
  color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:1.25rem;position:relative;padding-bottom:.7rem;
}
.site-footer h4::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2.5px;border-radius:2px;background:var(--accent)}
/* :not(.btn) so this does not override a button's own text colour — it was
   painting "Get a Quote" pale blue on yellow. */
.site-footer a:not(.btn){color:#a9bdd8;transition:color .18s ease}
.site-footer a:not(.btn):hover{color:var(--accent)}
.site-footer ul{list-style:none;padding:0;margin:0}

/* Main logo and the two accreditation marks sit on one row, all the same
   plate height; they wrap to a second line when the column gets narrow. */
.footer-brand{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:1.35rem}
.footer-logo{background:#fff;border-radius:12px;padding:.7rem .9rem;display:inline-block}
.footer-logo img{height:56px;width:auto;display:block}
.footer-about{line-height:1.75;margin-bottom:1.35rem}

.footer-links li{margin-bottom:.6rem;line-height:1.5}

.footer-accred{display:flex;gap:.7rem;flex-wrap:wrap}
.footer-accred img{height:80px;width:auto;background:#fff;border-radius:12px;padding:7px}

/* social row */
.footer-social{margin-top:1.5rem}
.fs-label{
  display:block;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.65rem;
}
.fs-links{display:flex;gap:.6rem;flex-wrap:wrap}
.fs-links a{
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:#cfdcec;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
/* White on hover: the marks are drawn with currentColor, so the whole glyph
   turns with it. The brand blue behind keeps it legible. */
.fs-links a:hover,
.fs-links a:focus-visible{
  background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px);
}
/* WhatsApp keeps its own green so it reads as the chat route, not a profile. */
.fs-links .fs-wa:hover,
.fs-links .fs-wa:focus-visible{background:#1eaf55;border-color:#1eaf55;color:#fff}

/* contact list in the Get in Touch column */
.footer-contact{margin-bottom:1.35rem}
.footer-contact li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.9rem;line-height:1.6}
.fc-ico{
  width:30px;height:30px;flex:0 0 auto;border-radius:8px;
  background:rgba(255,255,255,.08);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.site-footer .btn{font-size:.85rem;padding:.62rem 1rem}

/* SEO link strip: a band of its own, the label held on the left and all forty
   searches on one rail that scrolls sideways. Wrapping them made the footer
   taller than the page above it. */
.footer-tags{
  border-top:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.035);
  padding:1rem 0;
}
.ft-strip{display:flex;align-items:center;gap:1.25rem;min-width:0}

.ft-label{display:flex;align-items:center;gap:.7rem;flex:none}
.ft-ico{
  display:grid;place-items:center;width:40px;height:40px;flex:none;
  border-radius:10px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);color:var(--accent);
}
.ft-text{display:flex;flex-direction:column;justify-content:center;line-height:1.3}
.ft-text strong{
  font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#fff;
}

/* One line that scrolls itself. Forty pills will not fit on any screen, so
   rather than hide the overflow behind a control the rail drifts left on a
   loop and holds while the pointer is over it. */
.ft-rail{
  flex:1 1 auto;min-width:0;overflow:hidden;
  /* Soft edges so pills arrive and leave rather than being chopped off. */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);
          mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);
}
/* Two identical sets side by side. Moving the track left by half its width
   lands the copy exactly where the original started, so the loop has no seam.
   The trailing padding is what keeps the gap even across the join. */
.ft-track{display:flex;width:max-content;animation:ftMarquee 110s linear infinite}
.ft-set{display:flex;align-items:center;gap:.45rem;padding-right:.45rem}
@keyframes ftMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Hold while it is being read, and while a pill inside it has keyboard focus. */
.footer-tags:hover .ft-track,
.ft-track:focus-within{animation-play-state:paused}
/* Scoped to .site-footer so these beat `.site-footer a:not(.btn)` above, which
   is a class heavier and was turning the label the same yellow as the pill's
   own hover background — a chip that emptied itself when you pointed at it. */
/* Movement is a preference, not a feature: with it turned off the rail stops
   and goes back to being something you scroll yourself. */
@media (prefers-reduced-motion:reduce){
  .ft-track{animation:none}
  .ft-rail{overflow-x:auto;scrollbar-width:none}
  .ft-rail::-webkit-scrollbar{display:none}
}

.site-footer .ft-rail a{
  display:inline-flex;align-items:center;gap:.4rem;flex:none;white-space:nowrap;
  padding:.35rem .8rem;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  color:#8fa6c4;font-size:.74rem;line-height:1.5;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
/* The small marker each pill carries, as a rotated square. */
.site-footer .ft-rail a::before{
  content:"";width:6px;height:6px;flex:none;
  background:var(--accent);transform:rotate(45deg);
  transition:background .18s ease;
}
.site-footer .ft-rail a:hover,
.site-footer .ft-rail a:focus-visible{
  background:var(--accent);border-color:var(--accent);color:var(--ink);
}
.site-footer .ft-rail a:hover::before,
.site-footer .ft-rail a:focus-visible::before{background:var(--ink)}

/* On a phone the label sits above the rail, which then runs the full width. */
@media (max-width:767.98px){
  .ft-strip{flex-direction:column;align-items:stretch;gap:.75rem}
  .ft-label{gap:.6rem}
  .ft-ico{width:34px;height:34px;border-radius:9px}
}

.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:1.15rem 0;font-size:.8rem;color:#7f95b4}
.fb-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.5rem}
.fb-links{display:flex;gap:1.25rem}
.fb-credit a{color:#a9bdd8;font-weight:600}

/* --- floating actions --------------------------------------------------- */
/* Quick Connect owns the bottom-right corner — its two 58px buttons and the
   18px between them stand 134px tall from 28px up. Back-to-top sits above
   that, centred on the same column; before this it was underneath them and
   never visible. */
.float-actions{
  position:fixed;right:32px;bottom:178px;z-index:9997;
  display:flex;flex-direction:column;gap:.6rem;
}
@media (max-width:480px){
  /* Down here the pair turns into a full-width row, so clear its height. */
  .float-actions{right:12px;bottom:70px}
}
.float-btn{
  width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(16,38,72,.25);border:0;color:#fff;transition:transform .2s ease;
}
.float-btn:hover{transform:translateY(-3px);color:#fff}
.float-wa{background:#25d366}
.float-call{background:var(--brand)}
.float-qc{background:var(--brand-deep)}

.float-top{background:#fff;color:var(--brand);border:1px solid var(--line);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .2s ease}
.float-top.show{opacity:1;pointer-events:auto}

/* --- responsive -------------------------------------------------------- */
@media (max-width:1199.98px){
  .site-nav .nav-link{padding:.6rem .55rem;font-size:.82rem}
  .cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Matches the nav swap above, so the header shrinks on the same screens that
   get the off-canvas menu. */
@media (max-width:1024.98px){
  .header-inner{min-height:72px}
  .navbar-brand img{height:48px}
  .site-header.is-stuck .navbar-brand img{height:44px}
  .hero-slide{min-height:clamp(480px,70vh,620px)}
  .hero-body{padding:3rem 0 5rem}
  .hero-controls{bottom:1.4rem}
  .hero-body{padding:2.5rem 0}
  /* 2x2 on tablets and phones: keep the grid lines that still make sense. */
  .stat-strip .row > div:nth-child(2n){border-right:0}
  .stat-strip .row > div:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .stat-item{padding:1.35rem .5rem;gap:.75rem}
  .stat-ico{width:46px;height:46px;border-radius:12px}
  .about-media{padding:0 0 1.5rem 1.5rem}
  .about-badge{padding:.7rem .85rem}
  .ab-logos img{height:38px}
  .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}
  .process-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.5rem}
  .process-steps::before{display:none}
  .pd-gallery{position:static}
}
@media (max-width:767.98px){
  /* Only the phone number survives in the utility bar on phones; the rest
     lives in the hamburger menu. */
  .topbar-inner{justify-content:center;min-height:36px}
  .topbar-right{justify-content:center}
  /* No room for arrows beside the copy — the slider auto-advances and
     Bootstrap handles swipe, so drop the controls rather than overlap. */
  .hero-controls{display:none}
  .hero-body{padding:2.75rem 0 3.25rem}
}
@media (max-width:575.98px){
  /* g-5 gutters (-24px row margins) exceed the container's 12px padding and
     push 12px past the viewport on phones. Tighten them instead of clipping. */
  .row.g-5,.row.g-4{--bs-gutter-x:1.5rem;--bs-gutter-y:1.5rem}
  .pd-thumbs{grid-template-columns:repeat(3,1fr)}
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .ct-body{padding:.75rem .8rem .9rem}
  .ct-name{font-size:.85rem}
  .fb-inner{justify-content:center;text-align:center;flex-direction:column;gap:.5rem}
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.65rem}
  .topbar{font-size:.76rem}
  .float-btn{width:46px;height:46px}
  .hero-count{display:none}
  .hero-arrow{width:42px;height:42px}
  /* One column of points, and the badge sits under the photo rather than on it. */
  /* Too narrow to justify without ugly gaps. */
  .about-section .lead-text,.wi-body p,.pillar-card p,.sc-body p{text-align:left}
  .why-intro{position:static}
  .why-item{gap:1rem;padding:1.4rem 0}
  .wi-ico{width:52px;height:52px;border-radius:14px}
  .about-features{grid-template-columns:1fr;gap:1rem}
  .about-media{padding:0}
  .about-badge{position:static;margin-top:1rem;display:inline-block}
  .about-actions{gap:1rem}
  .hero-trust{gap:.45rem 1.25rem;margin-top:1.75rem}
  .hero-trust li{font-size:.8rem}
}

/* --- quick connect ------------------------------------------------------- */
/* The floating call/WhatsApp pair and the two panels behind them, matching
   the widget used across the other Clients Now sites. Ported as-is; only the
   brand colour and the typeface follow this site. */
/* ---------- Floating Action Buttons (stack) ---------- */
  .cn-cb-fab-stack {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-end;
  }

  .cn-cb-fab {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand) 0%, #3a6593 100%);
    border: 2px solid rgba(255, 255, 255, 0.85);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(35, 71, 106, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .cn-cb-fab--wa {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
  }

  .cn-cb-fab--wa:hover {
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5), 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .cn-cb-fab--wa .cn-cb-fab-pulse {
    background: #25D366;
  }

  .cn-cb-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 30px rgba(35, 71, 106, 0.5), 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .cn-cb-fab:active {
    transform: scale(0.96);
  }

  .cn-cb-fab svg {
    width: 26px;
    height: 26px;
    position: relative;
    z-index: 2;
  }

  /* Tooltip label on hover */
  .cn-cb-fab[data-label]::before {
    content: attr(data-label);
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: #0f172a;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;   
    padding: 7px 12px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  }

  .cn-cb-fab[data-label]::after {
    content: '';
    position: absolute;
    right: calc(100% + 6px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    border: 6px solid transparent;
    border-left-color: #0f172a;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .cn-cb-fab[data-label]:hover::before,
  .cn-cb-fab[data-label]:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }

  .cn-cb-fab-pulse {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: var(--brand);
    opacity: 0.45;
    animation: cnCbPulse 2.4s ease-out infinite;
    z-index: 0;
  }

  .cn-cb-fab--wa .cn-cb-fab-pulse {
    animation-delay: 1.2s;
  }

  @keyframes cnCbPulse {
    0% {
      transform: scale(1);
      opacity: 0.45;
    }

    100% {
      transform: scale(1.35);
      opacity: 0;
    }
  }

  /* ---------- Overlay ---------- */
  .cn-cb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: hidden;
    animation: cnCbFadeIn 0.25s ease forwards;
  }

  .cn-cb-overlay[hidden] {
    display: none;
  }

  @keyframes cnCbFadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }


  /* ---------- Modal Container ---------- */
  .cn-cb-modal {
    background: #0f172a;
    border-radius: 16px;
    width: 100%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
    max-width: 460px;
    margin: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    position: relative;
    font-family: inherit;   
    color: #f1f5f9;
    animation: cnCbSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    background-image:
      radial-gradient(circle at 20% 0%, rgba(58, 101, 147, 0.18) 0%, transparent 45%),
      radial-gradient(circle at 80% 100%, rgba(245, 166, 35, 0.10) 0%, transparent 45%);
    flex-shrink: 0;
  }

  @keyframes cnCbSlideUp {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.96);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  /* Custom scrollbar inside modal */
  .cn-cb-modal {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  }

  .cn-cb-modal::-webkit-scrollbar {
    width: 6px;
  }

  .cn-cb-modal::-webkit-scrollbar-track {
    background: transparent;
  }

  .cn-cb-modal::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
  }

  .cn-cb-modal::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0;
  }

  /* ---------- Close button ---------- */
  .cn-cb-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
    z-index: 10;
  }

  .cn-cb-close:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
  }

  /* ---------- Tabs ---------- */
  .cn-cb-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 58px 22px 0;
  }

  .cn-cb-tab {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 12px 6px;
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    transition: color 0.2s, background 0.2s;
    text-align: center;
    line-height: 1.2;
  }

  .cn-cb-tab svg {
    transition: transform 0.2s;
  }

  .cn-cb-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
  }

  .cn-cb-tab.is-active {
    color: #3a6593;
    background: rgba(58, 101, 147, 0.18);
  }

  .cn-cb-tab.is-active svg {
    transform: translateY(-2px);
  }

  /* ---------- Header ---------- */
  .cn-cb-header {
    padding: 24px 28px 16px;
    text-align: center;
  }

  .cn-cb-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
  }

  .cn-cb-brand-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), #3a6593);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(35, 71, 106, 0.35);
  }

  .cn-cb-brand-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: #fff;
  }

  .cn-cb-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.3px;
    color: #fff;
  }

  /* ---------- Body ---------- */
  .cn-cb-body {
    padding: 8px 28px 24px;
    position: relative;
  }

  /* Panes */
  .cn-cb-pane {
    display: none;
  }

  .cn-cb-pane.is-active {
    display: block;
    animation: cnCbPaneIn 0.3s ease forwards;
  }

  @keyframes cnCbPaneIn {
    from {
      opacity: 0;
      transform: translateY(6px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ---------- Form fields ---------- */
  .cn-cb-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
    margin: 10px 0 6px;
  }

  .cn-cb-input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s;
    outline: none;
  }

  .cn-cb-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
  }

  .cn-cb-input:focus {
    border-color: #3a6593;
    background: rgba(255, 255, 255, 0.09);
    box-shadow: 0 0 0 3px rgba(58, 101, 147, 0.18);
  }

  .cn-cb-input.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
  }

  .cn-cb-textarea {
    resize: vertical;
    min-height: 88px;
    font-family: inherit;
  }

  /* color-scheme makes native date/time pickers dark-mode aware */
  .cn-cb-input[type="date"],
  .cn-cb-input[type="time"] {
    color-scheme: dark;
  }

  /* Phone */
  .cn-cb-phone-wrap {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 8px;
  }

  .cn-cb-cc {
    padding: 13px 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s;
  }

  .cn-cb-cc:focus {
    border-color: #3a6593;
  }

  .cn-cb-cc option {
    background: #1e293b;
    color: #fff;
  }

  /* Two-column row */
  .cn-cb-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* ---------- Submit ---------- */
  .cn-cb-submit {
    width: 100%;
    margin-top: 22px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--brand) 0%, #3a6593 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.15s, box-shadow 0.2s, opacity 0.2s;
    box-shadow: 0 6px 18px rgba(35, 71, 106, 0.3);
    letter-spacing: 0.2px;
  }

  .cn-cb-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(35, 71, 106, 0.45);
  }

  .cn-cb-submit:active:not(:disabled) {
    transform: translateY(0);
  }

  .cn-cb-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }

  .cn-cb-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cnCbSpin 0.7s linear infinite;
    display: inline-block;
  }

  @keyframes cnCbSpin {
    to {
      transform: rotate(360deg);
    }
  }

  /* ---------- Fine print ---------- */
  .cn-cb-fineprint {
    font-size: 11.5px;
    color: #94a3b8;
    text-align: center;
    margin: 14px 0 0;
    line-height: 1.5;
  }

  .cn-cb-fineprint a {
    color: #3a6593;
    text-decoration: none;
  }

  .cn-cb-fineprint a:hover {
    text-decoration: underline;
  }

  /* ---------- Success state ---------- */
  .cn-cb-success {
    text-align: center;
    padding: 32px 16px;
    animation: cnCbPaneIn 0.4s ease;
  }

  .cn-cb-success-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.15);
    border: 2px solid rgba(16, 185, 129, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cnCbPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .cn-cb-success-icon svg {
    stroke: #10b981;
  }

  @keyframes cnCbPop {
    0% {
      transform: scale(0);
    }

    100% {
      transform: scale(1);
    }
  }

  .cn-cb-success h3 {
    margin: 0 0 8px;
    font-size: 22px;
    color: #fff;
  }

  .cn-cb-success-msg {
    margin: 0;
    color: #94a3b8;
    font-size: 14.5px;
    line-height: 1.55;
  }

  /* ---------- Error banner ---------- */
  .cn-cb-error-banner {
    margin-top: 16px;
    padding: 12px 14px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 10px;
    color: #fecaca;
    font-size: 13.5px;
    text-align: center;
  }

  /* ---------- Footer ---------- */
  .cn-cb-footer {
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }

  .cn-cb-footer strong {
    color: #fff;
    font-weight: 600;
  }

  /* ---------- Mobile ---------- */
  @media (max-width: 480px) {
    .cn-cb-fab-stack {
      bottom: 12px;
      right: 12px;
      left: 12px;
      gap: 10px;
      flex-direction: row;
      align-items: stretch;
      justify-content: stretch;
    }

    .cn-cb-fab {
      flex: 1 1 50%;
      width: auto;
      height: 46px;
      border-radius: 999px;
      border: 1.5px solid rgba(255, 255, 255, 0.25);
      gap: 8px;
      padding: 0 12px;
      box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .cn-cb-fab:active {
      transform: scale(0.97);
    }

    .cn-cb-fab:hover {
      transform: none;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
    }

    .cn-cb-fab svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    .cn-cb-fab[data-label]::before {
      position: static;
      transform: none;
      background: transparent;
      box-shadow: none;
      padding: 0;
      opacity: 1;
      color: #fff;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.2px;
    }

    /* Shorter mobile labels */
    #cnCbFab[data-label]::before {
      content: 'Call Us';
    }

    #cnCbWaFab[data-label]::before {
      content: 'WhatsApp';
    }

    .cn-cb-fab[data-label]::after {
      display: none;
    }

    .cn-cb-fab-pulse {
      display: none;
    }

    .cn-cb-modal {
      max-width: 100%;
    }

    .cn-cb-tab span {
      font-size: 11px;
    }

    .cn-cb-title {
      font-size: 18px;
    }

    .cn-cb-header {
      padding: 20px 20px 12px;
    }

    .cn-cb-body {
      padding: 6px 20px 20px;
    }

    .cn-cb-phone-wrap {
      grid-template-columns: 100px 1fr;
    }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {

    .cn-cb-fab-pulse,
    .cn-cb-modal,
    .cn-cb-overlay,
    .cn-cb-pane,
    .cn-cb-success-icon,
    .cn-cb-spinner {
      animation: none !important;
    }
  }
  /* only one WhatsApp option remains, so the tab strip has nothing to switch */
  .cn-cb-wa-tabs { display: none; }
  .cn-cb-modal .cn-cb-wa-tabs + .cn-cb-header { padding-top: 26px; }

@media print{.site-header,.site-footer,.float-actions,.cta-section,.qc-modal{display:none!important}}