/* =====================================================================
   WebsiteHub - default theme
   Mobile first. Every breakpoint is min-width, so the phone layout is
   what loads first and desktop rules are added on top.
   ===================================================================== */

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0;font-family:var(--font-body);font-size:16px;line-height:1.65;
  color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4,h5{font-family:var(--font-head);font-weight:700;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(30px,6vw,52px)}
h2{font-size:clamp(24px,4.4vw,38px)}
h3{font-size:clamp(19px,3vw,26px)}
h4{font-size:18px}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.3em}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 55%,#fff);outline-offset:2px;border-radius:3px}

:root{
  --line:#e4e7ec; --muted:#667085; --soft:#f7f8fa; --ok:#067647; --warn:#b54708; --bad:#b42318;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow:0 4px 16px rgba(16,24,40,.08);
  --shadow-lg:0 18px 48px rgba(16,24,40,.16);
  --header-h:64px;
}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:16px}
/* Smallest phones still in use (iPhone SE and similar are 320 CSS pixels).
   Two pixels either side is the difference between the header row fitting
   and the whole page picking up a sideways scrollbar. */
@media (max-width:360px){.container{padding-inline:12px}}
@media (min-width:768px){.container{padding-inline:24px}}
@media (min-width:1200px){.container{padding-inline:32px}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- buttons */
/* The red is raised rather than flat: a light top edge, the shade of the
   brand underneath it, a hard darker lip along the bottom and a soft shadow
   below that. Pressing it moves the face down onto the lip, so the button
   physically goes in - which is the whole point, and is why the lip shrinks
   by exactly as much as the face moves.
   The shape is shared by everything filled in brand red, so the Add button,
   the Sale flash and an applied filter all read as the same material. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(180deg,
              color-mix(in srgb,var(--brand) 82%,#fff) 0%,
              var(--brand) 55%,
              color-mix(in srgb,var(--brand) 92%,#000) 100%);
  color:#fff;font-weight:700;font-size:15px;
  padding:13px 24px;border-radius:var(--radius);border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
             0 2px 0 var(--brand-dark),
             0 4px 10px rgba(16,24,40,.18);
  transition:background .18s,transform .09s,box-shadow .09s,filter .18s;
  text-align:center;min-height:46px;line-height:1.2;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{
  transform:translateY(2px);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.22),
             0 0 0 var(--brand-dark),
             0 1px 3px rgba(16,24,40,.2);
}
/* The flat variants keep their own surface - a raised edge in brand red
   under a transparent button is just a red line floating below it. */
.btn--outline,.btn--ghost{box-shadow:none}
.btn--outline:active,.btn--ghost:active{box-shadow:none;transform:translateY(1px)}
.btn--dark{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 0 #000,0 4px 10px rgba(16,24,40,.22)}
.btn--dark:active{box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 #000,0 1px 3px rgba(16,24,40,.2)}
@media (prefers-reduced-motion:reduce){.btn:active{transform:none}}
.btn--sm{padding:9px 16px;font-size:14px;min-height:38px}
.btn--lg{padding:16px 32px;font-size:17px;min-height:54px}
.btn--block{display:flex;width:100%}
.btn--dark{background:var(--ink);background-image:none}
.btn--dark:hover{background:#000}
.btn--accent{background:linear-gradient(180deg,
              color-mix(in srgb,var(--accent) 82%,#fff) 0%,
              var(--accent) 55%,
              color-mix(in srgb,var(--accent) 92%,#000) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
             0 2px 0 color-mix(in srgb,var(--accent) 70%,#000),
             0 4px 10px rgba(16,24,40,.18)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--line);
  background-image:none}
.btn--outline:hover{background:var(--soft);border-color:#cfd4dc}
.btn--ghost{background:transparent;background-image:none;border-color:currentColor;color:inherit}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none}

/* A button that is waiting on the server.
   Kept more legible than a plain disabled button (.72 rather than .5): this
   one is not unavailable, it is working, and the difference has to read at a
   glance or the visitor clicks again. The spinner is a bordered circle with
   one edge transparent - no image, no font, nothing to load at the exact
   moment the page is busy. */
.btn.is-busy{opacity:.72;pointer-events:none;position:relative;
  padding-left:calc(1em + 26px)}
.btn.is-busy::before{content:"";position:absolute;left:18px;top:50%;
  width:15px;height:15px;margin-top:-8px;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;
  animation:svcs-spin .7s linear infinite}
@keyframes svcs-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .btn.is-busy::before{animation-duration:2.4s}
}

/* ---------------------------------------------------------------- store notice */
.store-notice{background:var(--ink);color:#fff;font-size:13.5px;line-height:1.5}
.store-notice--light{background:#fff6e6;color:#6b4a00;border-bottom:1px solid #ffe3ab}
.store-notice--brand{background:var(--brand);color:#fff}
.store-notice__in{display:flex;align-items:center;gap:14px;padding-block:10px;flex-wrap:wrap}
.store-notice p{margin:0;flex:1;min-width:200px}
.store-notice__x{
  color:inherit;text-decoration:underline;font-size:12.5px;opacity:.85;
  padding:4px 8px;flex-shrink:0;
}
.store-notice__x:hover{opacity:1}

/* ================================================================ header */
.site-header{position:relative;z-index:900;background:var(--header-bg)}
.has-sticky .site-header{position:sticky;top:0}
.site-header.is-stuck{box-shadow:var(--shadow)}

.brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.brand__img{max-height:46px;width:auto;object-fit:contain}
.brand--lg .brand__img{max-height:64px}
.brand--sm .brand__img{max-height:34px}
.brand--footer .brand__img{max-height:52px}
.brand__text{font-family:var(--font-head);font-weight:700;font-size:22px;letter-spacing:-.4px;white-space:nowrap}
.brand--footer .brand__text,.hdr4 .brand__text,.hdr7 .brand__text,.hdr11 .brand__text{color:#fff}

/* --- header actions --------------------------------------------------- */
.hactions{display:flex;align-items:center;gap:2px;margin-left:auto;flex-shrink:0}
.hact{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  width:44px;height:44px;justify-content:center;border-radius:var(--radius);
  color:inherit;transition:background .16s;
}
.hact:hover{background:rgba(0,0,0,.05)}
.hdr4 .hact:hover,.hdr7 .hact:hover,.hdr11 .hact:hover{background:rgba(255,255,255,.12)}
.hact svg{width:21px;height:21px}
.hact__label{display:none;font-size:14px;font-weight:600;white-space:nowrap}
.hact--cart{width:auto;padding-inline:10px}
.hact__count{
  position:absolute;top:5px;right:4px;min-width:18px;height:18px;padding:0 5px;
  background:var(--brand);color:#fff;font-size:11px;font-weight:700;line-height:18px;
  border-radius:999px;text-align:center;
}
.hact--cart .hact__count{position:static;margin-left:2px}
.hact__count.is-empty{display:none}
/* The cart total and the account name are the first things to go when the bar
   gets tight. 1024 was too eager: on a 1024-1150 laptop the menu has just
   appeared and header 8, which also carries a call to action, ran past the
   right edge. They come back at 1200, where there is genuinely room. */
@media (min-width:1200px){
  .hactions:not(.hactions--compact) .hact__label{display:inline}
  .hactions:not(.hactions--compact) .hact--cart{gap:8px}
}

.burger{display:block;width:20px;height:14px;position:relative}
.burger i{position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;transition:transform .22s,opacity .18s}
.burger i:nth-child(1){top:0}
.burger i:nth-child(2){top:6px}
.burger i:nth-child(3){top:12px}
.is-menu-open .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.is-menu-open .burger i:nth-child(2){opacity:0}
.is-menu-open .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.burger--static i{transition:none}
@media (min-width:1024px){
  .hact--burger{display:none}
  .hdr6 .hact--burger{display:none}
}

/* --- what the header bar keeps on a phone --------------------------------
   A 360px screen has to hold the logo, the menu button and the cart, and
   that is already tight. The call to action, search, favourites and the
   account link all move into the drawer (partials/mobile-nav.php), which is
   why the bar stops wrapping onto a second line. Applies to every header
   design at once, so a new one inherits the behaviour.

   The cart stays put deliberately: a shopper mid-basket should be able to
   see the count and reach it in one tap, not two. */
@media (max-width:780px){
  .hdr-cta,
  .hactions .hact--search,
  .hactions .hact--fav,
  .hactions .hact--account{display:none}
  .hactions{gap:0}
  .hact{width:42px;height:42px}
  /* The cart still has to fit its badge, so it sizes to content and the
     icon is told not to give way when the badge appears. */
  .hact--cart{width:auto;min-width:42px;padding-inline:7px}
  .hact svg{width:20px;height:20px;flex:0 0 20px}
  .brand__img,.brand--lg .brand__img{max-height:38px}
  .brand__text{font-size:18px}
  /* Header 6 opens the same panel on every width, so it keeps its own CTA. */
  .hdr6 .hdr-cta{display:inline-flex}
}
/* Very narrow phones: the wordmark, not the row, is what gives. */
@media (max-width:380px){
  .brand__img,.brand--lg .brand__img{max-height:32px}
  .brand__text{font-size:16px}
  .hact--cart .hact__label{display:none}
}

/* --- desktop nav ------------------------------------------------------- */
.nav{display:none}
@media (min-width:1024px){
  .nav{display:block}
  .hdr6 .nav{display:none}
}
.nav__list{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.nav--centred .nav__list{justify-content:center;flex:1}
.nav--right .nav__list{justify-content:flex-end;flex:1}
.nav__item{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:6px;padding:14px 14px;
  font-size:14.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  border-radius:var(--radius);transition:color .16s,background .16s;white-space:nowrap;
}
.nav__link:hover{color:var(--brand)}
.nav__item.is-active>.nav__link{color:var(--brand)}
.nav--onDark .nav__link{color:rgba(255,255,255,.88)}
.nav--onDark .nav__link:hover,.nav--onDark .nav__item.is-active>.nav__link{color:#fff}
.nav__caret{width:10px;height:7px;opacity:.6;transition:transform .2s}
.nav__item.has-children:hover .nav__caret{transform:rotate(180deg)}
.nav__badge{
  font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;
  background:var(--brand);color:#fff;padding:2px 6px;border-radius:4px;
}

/* dropdown */
.submenu{
  position:absolute;top:100%;left:0;min-width:250px;margin:0;padding:8px;list-style:none;
  border:1px solid var(--drop-line,var(--line));border-radius:var(--radius);box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s,transform .18s,visibility .18s;z-index:60;
}
.nav__item:hover>.submenu,.nav__item:focus-within>.submenu{opacity:1;visibility:visible;transform:none}
.submenu__item{position:relative}
.submenu__item>a{display:block;padding:9px 12px;border-radius:7px;font-size:14.5px;transition:background .14s,color .14s}
.submenu__item small{display:block;font-size:12.5px;font-weight:400;margin-top:1px}
.submenu__heading{padding:8px 12px 4px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.submenu__divider{height:1px;margin:6px 8px}
.submenu--deep{top:-9px;left:100%;margin-left:2px}
/* Dropdown panels are always light, so they carry their own ink. On a dark
   header (designs 4, 7, 11, 12) the links used to inherit the header's white
   text and vanished against the white panel until hovered. */
/* Colours come from Appearance -> Dropdown menus (--drop-*), set in the
   layout <style>; the fallbacks here are the original white panel. */
.submenu,.mega{background:var(--drop-bg,#fff);color:var(--drop-text,var(--ink));text-shadow:none}
.submenu__item>a,.mega__links a{color:var(--drop-text,var(--ink))}
.submenu__item>a:hover,.mega__links a:hover{color:var(--drop-hover,var(--brand));background:var(--drop-hover-bg,color-mix(in srgb,var(--drop-text,var(--ink)) 7%,transparent))}
.mega__intro h3{color:var(--drop-text,var(--ink))}
.mega__title,.mega__title a{color:var(--drop-head,var(--brand))}
.submenu__heading{color:var(--drop-head,var(--muted))}
.submenu__item small,.mega__intro p,.mega__links small{color:color-mix(in srgb,var(--drop-text,var(--ink)) 62%,transparent)}
.submenu__divider{background:var(--drop-line,var(--line))}

/* --- mega menu ---------------------------------------------------------
   The panel is measured against the header, not the nav item, so it spans
   the full width of the site whichever menu item opens it. */
.nav__item.is-mega{position:static}
.site-header{position:relative}
.has-sticky .site-header{position:sticky}
.mega{
  position:absolute;top:100%;left:0;right:0;transform:translateY(8px);
  border-top:1px solid var(--drop-line,var(--line));
  box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;
  transition:opacity .2s,transform .2s,visibility .2s;z-index:55;
}
.nav__item.is-mega:hover>.mega,.nav__item.is-mega:focus-within>.mega{opacity:1;visibility:visible;transform:none}
/* A dark panel (mega menu builder -> Panel colour). It re-points the same
   --drop-* variables the light panel uses, so everything inside follows. */
.mega.mega--dark{
  --drop-bg:var(--mega-bg,color-mix(in srgb,var(--brand) 42%,#040a16));
  --drop-text:#fff;--drop-hover:#fff;--drop-hover-bg:rgba(255,255,255,.09);
  --drop-head:color-mix(in srgb,var(--brand) 30%,#fff);--drop-line:rgba(255,255,255,.14)}
.mega--dark .mega__promo{background:rgba(255,255,255,.07)}
.mega--dark .mega__intro h3{color:#fff}
.mega__inner{padding-block:32px 36px}
.mega__intro{margin-bottom:22px;max-width:640px}
.mega__intro h3{margin:0 0 4px;font-size:22px}
.mega__intro p{margin:0;font-size:14.5px}
.mega__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:28px 32px}
.mega[data-cols="5"] .mega__grid{grid-template-columns:repeat(4,1fr) 260px}
.mega__title{
  font-family:var(--font-body);font-size:11.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--drop-head,var(--brand));margin:0 0 12px;padding-bottom:9px;
  border-bottom:1px solid var(--drop-line,var(--line));
}
.mega__title a:hover{color:var(--brand-dark)}
/* A second heading in the same column needs air above it, or it sits right
   on the last link of the group before. The first heading keeps the top
   line so every column starts level. */
.mega__links+.mega__title,.mega__rule+.mega__title{margin-top:22px}
.mega__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.mega__links a{
  display:block;padding:7px 9px;margin-inline:-9px;border-radius:7px;
  font-size:14.5px;transition:background .14s,color .14s;
}
.mega__links small{display:block;font-size:12.5px;margin-top:1px}
.mega__links .tag{
  font-style:normal;margin-left:6px;font-size:10px;font-weight:800;letter-spacing:.05em;
  background:var(--accent);color:#fff;padding:2px 5px;border-radius:4px;vertical-align:middle;
}
.mega__rule{margin:14px 0}
.mega__promo{background:var(--soft);border-radius:var(--radius);padding:14px;align-self:start}
.mega__media{width:100%;border-radius:calc(var(--radius) - 3px);margin-bottom:12px;aspect-ratio:16/10;object-fit:cover}
.mega__media--embed{position:relative;overflow:hidden;background:#000}
.mega__vid{position:relative}
.mega__video{display:block;background:#000}
.mega__sound{position:absolute;right:10px;bottom:22px;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;transition:background .18s}
.mega__sound:hover{background:rgba(0,0,0,.8)}
.mega__sound svg{width:18px;height:18px}
.mega__sound[aria-pressed="false"] .mega__sound-w,.mega__sound[aria-pressed="true"] .mega__sound-x{display:none}
.mega__media--embed img{width:100%;height:100%;object-fit:cover;opacity:.82}
.mega__media--embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mega__play{
  position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;
  background:rgba(255,255,255,.94);box-shadow:var(--shadow);
}
.mega__play::after{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-left:15px solid var(--brand);border-top:9px solid transparent;border-bottom:9px solid transparent;
}

/* --- sub header -------------------------------------------------------- */
.subheader{background:var(--nav-bg);font-size:13.5px;border-bottom:1px solid var(--line)}
.subheader--dark{background:rgba(0,0,0,.28);border-bottom-color:rgba(255,255,255,.12);color:rgba(255,255,255,.9)}
.subheader__in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:9px;flex-wrap:wrap}
.subheader__text{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:12.5px}
.subheader__nav{display:flex;gap:4px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.subheader__nav a{padding:5px 10px;border-radius:6px;transition:background .14s}
.subheader__nav a:hover{background:rgba(0,0,0,.06)}
.subheader--dark .subheader__nav a:hover{background:rgba(255,255,255,.14)}

.subheader-inline{display:none;align-items:center;gap:12px;font-size:13px;margin-right:auto}
.subheader-inline__text{font-weight:800;letter-spacing:.05em;text-transform:uppercase;font-size:12px}
.subheader-inline__link{
  display:inline-flex;align-items:center;gap:6px;padding:7px 13px;background:#fff;
  border:1px solid var(--line);border-radius:999px;font-weight:600;font-size:13px;transition:border-color .16s,color .16s;
}
.subheader-inline__link:hover{border-color:var(--brand);color:var(--brand)}
@media (min-width:1024px){.subheader-inline{display:flex}}

/* ================================================================ header 1 */
.hdr1__top-in{display:flex;align-items:center;gap:16px;padding-block:12px}
.hdr1__search{display:none;flex:1;max-width:600px;margin-inline:auto}
.hdr1__search input{
  flex:1;min-width:0;padding:12px 16px;border:1px solid var(--line);border-right:0;
  border-radius:var(--radius) 0 0 var(--radius);font-size:15px;background:#fff;
}
.hdr1__search input:focus{outline:none;border-color:var(--brand)}
.btn--search{border-radius:0 var(--radius) var(--radius) 0;padding-inline:22px}
.hdr1__nav{background:var(--nav-bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hdr1__nav-in{display:flex;align-items:center;gap:16px;min-height:52px}
.hdr1__browse{display:none;margin-left:auto;white-space:nowrap}
@media (min-width:768px){.hdr1__search{display:flex}}
@media (min-width:1024px){
  .hdr1__nav-in .nav{margin-inline:auto}
  .hdr1__browse{display:inline-flex}
}
@media (max-width:1023px){.hdr1__nav{display:none}}

/* ================================================================ header 2 */
.hdr2__main-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:16px}
.hdr2__spacer{display:none;flex:1}
.hdr2 .brand{margin-inline:0}
.hdr2__nav{border-top:1px solid var(--line);background:var(--header-bg)}
@media (min-width:1024px){
  .hdr2__spacer{display:block}
  .hdr2 .brand{margin-inline:auto}
  .hdr2 .hactions{flex:1;justify-content:flex-end}
}
@media (max-width:1023px){.hdr2__nav{display:none}}

/* ================================================================ header 3 */
.hdr3__in{display:flex;align-items:center;gap:20px;padding-block:12px;min-height:var(--header-h)}
.hdr3__right{display:flex;align-items:center;gap:8px;margin-left:auto}
.hdr3__cta{display:none}
.hdr3 .nav__link{text-transform:none;font-size:15px;letter-spacing:0}
@media (min-width:1024px){.hdr3__cta{display:inline-flex}.hdr3__right{margin-left:0}}

/* ================================================================ header 4 */
.hdr4{background:var(--ink);color:#fff}
.hdr4__in{display:flex;align-items:center;gap:20px;padding-block:14px}
.hdr4__right{display:flex;align-items:center;gap:12px;margin-left:auto}
.hdr4__phone{display:none;align-items:center;gap:8px;font-weight:700;font-size:15px;white-space:nowrap}
.hdr4__phone svg{width:19px;height:19px;opacity:.85}
.hdr4__phone:hover{color:#fff;opacity:.85}
.hdr4 .hact{color:rgba(255,255,255,.9)}
@media (min-width:900px){.hdr4__phone{display:inline-flex}}
/* Between 1024 and 1200 the centred menu, the phone number and the call to
   action all want the same row. The number keeps its icon - still a one-tap
   call - and gives up its digits until there is room for them. */
@media (min-width:1024px) and (max-width:1199px){
  .hdr4__in{gap:12px}
  .hdr4__phone span{display:none}
  .hdr4 .nav__link{padding-inline:9px;font-size:13.5px}
}

/* ================================================================ header 5 */
.hdr5__utility{background:var(--ink);color:rgba(255,255,255,.86);font-size:13px}
.hdr5__utility-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:8px;flex-wrap:wrap}
.hdr5__contact{display:flex;gap:18px;flex-wrap:wrap}
.hdr5__contact a:hover{color:#fff}
.hdr5__hours{opacity:.7}
.hdr5__util-right{display:flex;align-items:center;gap:10px}
.hdr5__social{
  width:26px;height:26px;display:inline-grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.12);font-size:10px;font-weight:800;letter-spacing:-.02em;
}
.hdr5__social:hover{background:var(--brand)}
.hdr5__main-in{display:flex;align-items:center;gap:24px;padding-block:14px}
.hdr5__main-in .nav{margin-inline:auto}
@media (max-width:767px){.hdr5__contact{gap:12px;font-size:12.5px}.hdr5__hours{display:none}}

/* ================================================================ header 6 */
.hdr6__in{display:flex;align-items:center;gap:16px;padding-block:14px;min-height:var(--header-h)}
.hdr6__toggle{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:.06em;padding:8px 4px}
.hdr6__toggle-label{display:none}
.hdr6 .brand--centre{margin-inline:auto}
.hdr6__right{display:flex;align-items:center;gap:8px}
.hdr6__cta{display:none;color:var(--ink);border-color:var(--line)}
.hdr6__cta:hover{background:var(--soft)}
@media (min-width:768px){.hdr6__toggle-label{display:inline}}
@media (min-width:1024px){.hdr6__cta{display:inline-flex}}

/* ================================================================ header 7 */
.hdr7{background:transparent;padding-block:14px}
.has-sticky .hdr7{position:fixed;left:0;right:0;top:0}
body.hv-7 main{margin-top:calc(-1 * var(--header-h) - 28px)}
body.hv-7 .store-notice+.site-header{top:0}
.hdr7__pill{
  display:flex;align-items:center;gap:18px;padding:10px 12px 10px 20px;
  background:rgba(14,23,38,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#fff;
  transition:background .25s,border-color .25s;
}
.hdr7.is-stuck{box-shadow:none}
/* The pill's blur makes it the frame the mega menu is measured against, so on
   this design the panel floats as a rounded card the width of the pill, a
   little below it. The ::before bridges the gap so the menu stays open while
   the pointer crosses it. */
.hdr7 .mega{top:calc(100% + 10px);border:0;border-radius:22px;overflow:visible}
.hdr7 .mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.hdr7 .mega__inner{padding-inline:36px}
.hdr7.is-stuck .hdr7__pill{background:rgba(14,23,38,.95);border-color:rgba(255,255,255,.08)}
.hdr7__right{display:flex;align-items:center;gap:8px;margin-left:auto}
.hdr7 .hact{color:rgba(255,255,255,.92)}
@media (max-width:1023px){.hdr7__pill{border-radius:var(--radius);padding-inline:16px 8px}}

/* ================================================================ header 9 */
/* Contractor Classic: brand contact bar, white row, firm shadow. */
.hdr9{background:var(--header-bg);box-shadow:0 3px 6px rgba(0,0,0,.35);z-index:60}
.hdr9__top{background:linear-gradient(90deg,var(--brand-dark),var(--brand));color:rgba(255,255,255,.9);font-size:13.5px}
.hdr9__top-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:7px}
.hdr9__contact{display:flex;align-items:center;gap:22px;flex-wrap:wrap;min-width:0}
.hdr9__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.hdr9__item svg{width:15px;height:15px;opacity:.85;flex:none}
.hdr9__item a,.hdr9__item button{color:inherit}
.hdr9__item a:hover{color:#fff}
.hdr9__wa{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:999px;
  background:#25d366;color:#fff;font-weight:700;font-size:12.5px;white-space:nowrap}
.hdr9__wa svg{width:17px;height:17px}
.hdr9__wa:hover{background:#1ebe5a;color:#fff}
.hdr9__main-in{display:flex;align-items:center;gap:18px;padding-block:10px;min-height:var(--header-h)}
@media (min-width:1024px){.hdr9__main-in{padding-block:16px}}
.hdr9__main-in .nav{margin-left:auto}
.hdr9 .nav__link{letter-spacing:.03em}
.hdr9__cta{display:none}
@media (min-width:1024px){.hdr9__cta{display:inline-flex}}
@media (max-width:1023px){.hdr9__main-in .hactions{margin-left:auto}}
@media (max-width:599px){.hdr9__email,.hdr9__wa span{display:none}.hdr9__contact{gap:12px}}

/* ================================================================ header 10 */
/* Split Centre: the menu divided either side of a centred logo. */
.hdr10{background:var(--header-bg);border-bottom:1px solid var(--line)}
.hdr10__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding-block:14px;min-height:var(--header-h)}
.hdr10__side{display:flex;align-items:center;min-width:0}
.hdr10__side--l{justify-content:flex-end}
.hdr10__side--r{justify-content:flex-start;gap:8px}
.hdr10__side--r .hactions{margin-left:auto}
.hdr10__brand{justify-self:center}
.hdr10 .nav__link{text-transform:none;font-size:15.5px;letter-spacing:.01em;font-weight:500}
.hdr10 .nav__item.is-active>.nav__link{box-shadow:inset 0 -2px 0 var(--brand);border-radius:0}
@media (max-width:1023px){
  .hdr10__in{grid-template-columns:44px 1fr auto}
  .hdr10__brand{justify-self:center}
}

/* ================================================================ header 11 */
/* Glass Overlay: a full-width frosted bar over the hero. */
.hdr11{background:rgba(14,23,38,.35);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.14);color:#fff;transition:background .25s}
.has-sticky .hdr11{position:fixed;left:0;right:0;top:0}
body.hv-11 main{margin-top:calc(-1 * var(--header-h) - 2px)}
body.hv-11 .store-notice+.site-header{top:0}
.hdr11.is-stuck{background:rgba(14,23,38,.94)}
.hdr11__in{display:flex;align-items:center;gap:18px;padding-block:10px;min-height:var(--header-h)}
.hdr11__right{display:flex;align-items:center;gap:8px;margin-left:auto}
.hdr11 .hact{color:rgba(255,255,255,.92)}
.hdr11__cta{color:#fff;border:1px solid rgba(255,255,255,.55);background:transparent}
.hdr11__cta:hover{background:#fff;color:var(--ink)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.hdr11{background:rgba(14,23,38,.85)}}

/* ================================================================ header 12 */
/* Call Panel: white bar ending in a slanted brand panel with the number. */
.hdr12{background:var(--header-bg);box-shadow:0 1px 0 var(--line),0 6px 18px -10px rgba(14,23,38,.35)}
.hdr12__row{display:flex;align-items:stretch}
.hdr12__in{display:flex;align-items:center;gap:18px;padding-block:6px;flex:1;min-width:0}
.hdr12 .nav__link{padding-block:11px}
.hdr12__in .nav{margin-left:auto}
.hdr12__panel{display:none;align-items:center;gap:18px;padding:6px 28px 6px 54px;color:#fff;
  background:var(--brand);clip-path:polygon(28px 0,100% 0,100% 100%,0 100%)}
.hdr12__call{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap}
.hdr12__call small{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;opacity:.85}
.hdr12__call strong{font-size:19px;font-family:var(--font-head);letter-spacing:.01em}
.hdr12__call strong a,.hdr12__call strong button{color:#fff}
@media (min-width:1024px){
  .hdr12__panel{display:flex}
  .hdr12__in .hactions .hact--burger{display:none}
}
@media (min-width:1024px) and (max-width:1279px){
  .hdr12__call small{display:none}
  .hdr12 .nav__link{padding-inline:9px;font-size:13.5px}
  .hdr12__panel{padding-left:44px}
}

/* ================================================================ header 13
   Department Store: dark search bar, then a white bar starting with "Shop by
   category" (a big menu of departments from the header.departments hook). */
.hdr13{--h13-bg:#0b1220;background:#fff;position:relative}
.hdr13__top{background:var(--h13-bg);color:#fff}
.hdr13__top-in{display:flex;align-items:center;gap:24px;min-height:76px;padding-block:10px}
.hdr13 .brand{flex-shrink:0}
.hdr13 .brand__text{color:#fff}
.hdr13__burger{display:none;background:none;border:0;color:#fff;padding:8px;margin-left:-8px}
.hdr13__search{flex:1;display:flex;max-width:680px;height:46px;background:#fff;border-radius:12px;overflow:hidden}
.hdr13__in{position:relative;display:flex;align-items:center;background:#eef1f5;border-right:1px solid #d6dbe3;flex-shrink:0}
.hdr13__in select{appearance:none;-webkit-appearance:none;border:0;background:transparent;height:100%;padding:0 30px 0 14px;
  font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;max-width:190px;text-overflow:ellipsis}
.hdr13__in select:focus{outline:2px solid var(--brand);outline-offset:-2px}
.hdr13__in .hdr13__chev{position:absolute;right:11px;pointer-events:none;color:#667085}
@media (max-width:600px){.hdr13__in select{font-size:12.5px;padding:0 24px 0 10px}.hdr13__in .hdr13__chev{right:8px}}
.hdr13__search input{flex:1;min-width:0;border:0;padding:0 16px;font-size:15px;color:var(--ink);background:#fff}
.hdr13__search input:focus{outline:none}
.hdr13__search:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 45%,transparent)}
.hdr13__search button{width:54px;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer}
.hdr13__search svg{width:21px;height:21px}
.hdr13__acts{display:flex;align-items:center;gap:18px;margin-left:auto}
.hdr13__acts svg{width:22px;height:22px;display:block}
.hdr13__acc{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;line-height:1.15;white-space:nowrap}
.hdr13__acc small{display:block;font-size:12px;color:#aab6c8}
.hdr13__acc b{font-size:14px}
.hdr13__fav{color:#fff}
.hdr13__cart{position:relative;display:inline-flex;align-items:center;gap:9px;background:var(--brand);color:#fff;text-decoration:none;
  border-radius:12px;padding:10px 16px;font-weight:800;white-space:nowrap;transition:filter .18s}
.hdr13__cart:hover{filter:brightness(1.08);color:#fff}
.hdr13__cart .hact__count{position:absolute;top:-7px;left:26px;right:auto;background:#fff;color:var(--brand);font-style:normal}
.hdr13__bar{position:relative;background:#fff;border-bottom:1px solid var(--line)}
.hdr13__bar-in{display:flex;align-items:stretch;gap:18px;min-height:52px}
.hdr13__bar-in .nav{align-self:center}
.hdr13__dept{display:flex;align-items:center;gap:10px;border:0;border-inline:1px solid var(--line);background:var(--soft,#f5f6f8);
  color:var(--ink);font-weight:800;font-size:14.5px;padding:0 18px;white-space:nowrap;cursor:pointer;transition:background .18s,color .18s}
.hdr13__dept:hover,.hdr13__dept.is-open{background:var(--h13-bg);color:#fff;border-color:var(--h13-bg)}
.hdr13__chev{width:12px;height:12px;transition:transform .2s}
.hdr13__dept.is-open .hdr13__chev{transform:rotate(180deg)}
.hdr13__promises{list-style:none;margin:0 0 0 auto;padding:0;display:flex;align-items:center;gap:16px;font-size:13px;color:var(--muted);white-space:nowrap}
.hdr13__promises li{display:flex;align-items:center;gap:6px}
.hdr13__promises li::before{content:"";width:6px;height:6px;border-radius:50%;background:#0f7b6c}
/* "Shop by category" panel (design D): tiles left, complete systems right. */
.hdr13__mega{position:absolute;left:0;right:0;top:100%;z-index:60;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 30px 50px -24px rgba(16,24,40,.45);max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.hdr13__mega-in{display:grid;grid-template-columns:minmax(0,1fr) 400px;padding-inline:0}
.hdr13__mega--parts .hdr13__mega-in{grid-template-columns:minmax(0,1fr)}
.hdr13__parts{padding:20px 24px 22px}
.hdr13__h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 12px;
  font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hdr13__h a{letter-spacing:0;text-transform:none;font-size:13.5px;font-weight:700;color:var(--brand);text-decoration:none;white-space:nowrap}
.hdr13__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hdr13__mega--parts .hdr13__tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
/* 2.22.3 (Herold chose "Recommended"): a white card with a faint edge and a
   soft two-layer shadow, bigger pictures (146px); lifts on hover. */
.hdr13__tile{display:flex;flex-direction:column;gap:4px;padding:12px 12px 10px;border-radius:14px;background:#fff;
  border:1px solid rgba(16,24,40,.12);box-shadow:0 1px 2px rgba(16,24,40,.10),0 2px 6px -2px rgba(16,24,40,.10);
  color:var(--ink);text-decoration:none;transition:transform .2s,box-shadow .2s,border-color .2s}
.hdr13__tile:hover{transform:translateY(-3px);border-color:rgba(16,24,40,.18);
  box-shadow:0 2px 4px rgba(16,24,40,.08),0 16px 28px -14px rgba(16,24,40,.45);color:var(--ink)}
.hdr13__pic{height:150px;display:grid;place-items:center;margin-bottom:6px}
.hdr13__pic img{max-height:146px;max-width:100%;width:auto;object-fit:contain}
.hdr13__tile b{font-size:14.5px;line-height:1.25}
.hdr13__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px}
.hdr13__meta em{font-style:normal;background:#fff;border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:700;color:#344054;white-space:nowrap}
.hdr13__meta small{margin-left:auto;color:var(--muted);font-size:12.5px}
.hdr13__tile--all{background:#fff;border:1.5px dashed var(--line);box-shadow:none;justify-content:center;text-align:center}
.hdr13__tile--all b{color:var(--brand)}
.hdr13__tile--all small{color:var(--muted);font-size:12.5px}
.hdr13__brands{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:14px 0 0;font-size:12.5px;color:var(--muted)}
.hdr13__brands a{border:1px solid var(--line);border-radius:6px;padding:3px 9px;font-weight:700;color:var(--ink);font-size:12px;text-decoration:none}
.hdr13__brands a:hover{border-color:var(--brand);color:var(--brand)}
.hdr13__sys{position:relative;overflow:hidden;border-radius:0 0 0 0;background:linear-gradient(160deg,#10203a,#0b1220);color:#fff;padding:20px 22px 22px}
.hdr13__sys::before{content:"";position:absolute;inset:0;background:var(--h13-photo,none) center/cover;opacity:.16}
.hdr13__sys>*{position:relative}
.hdr13__sys .hdr13__h{color:#9fb0c8}
.hdr13__sys h3{margin:0 0 4px;font-size:20px;color:#fff}
.hdr13__sys-text{margin:0 0 12px;color:#c3ced9;font-size:13.5px}
.hdr13__kind{display:flex;align-items:center;gap:12px;margin-top:8px;padding:10px 12px;border-radius:12px;color:#fff;text-decoration:none;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);transition:background .18s}
.hdr13__kind:hover{background:rgba(255,255,255,.13);color:#fff}
.hdr13__kind em{flex:0 0 36px;height:36px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13px;color:#fff}
.hdr13__kind b{display:block;font-size:14.5px}
.hdr13__kind b i{font-style:normal;font-weight:600;font-size:12.5px;color:#7fd4c4;margin-left:6px}
.hdr13__kind small{display:block;color:#aab6c8;font-size:12.5px;line-height:1.35}
.hdr13__sizer{margin-top:14px}
.hdr13__sizer .sizer{display:flex;width:100%;border-radius:12px;padding:10px 14px;border:0}
.hdr13__sizer .sizer__text i{display:block}
.hdr13__chip-all{display:none}
.hdr13__chips{display:none}
@media (max-width:1180px){.hdr13__promises{display:none}.hdr13__acc span{display:none}}
/* 2.22.6: Size my system at the end of the bar, and the menu in the true
   centre (three columns: left and right share the room equally, so the menu
   is centred on the bar, not just in whatever is left beside it). */
.hdr13__bar-in>.sizer{align-self:center;padding-block:6px}
@media (min-width:1024px){
  .hdr13__bar-in.is-centred{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);gap:18px}
  .hdr13__bar-in.is-centred>.hdr13__dept{grid-column:1;justify-self:start}
  .hdr13__bar-in.is-centred>.nav{grid-column:2}
  .hdr13__bar-in.is-centred>.hdr13__promises,.hdr13__bar-in.is-centred>.sizer{grid-column:3;justify-self:end;margin:0}
}
@media (max-width:1023px){
  .hdr13__bar{display:none}
  .hdr13__burger{display:block}
  .hdr13__top-in{flex-wrap:wrap;gap:10px 14px;min-height:0;padding-block:10px 12px}
  .hdr13__search{order:5;flex-basis:100%;max-width:none;height:42px;border-radius:10px}
  .hdr13__acts{gap:14px}
  .hdr13__acc,.hdr13__fav{display:none}
  .hdr13__cart{padding:9px 12px}
  .hdr13__cart span{display:none}
  .hdr13__chips{display:flex;gap:8px;overflow-x:auto;padding:10px 16px;border-bottom:1px solid var(--line);background:#fff;scrollbar-width:none}
  .hdr13__chips::-webkit-scrollbar{display:none}
  .hdr13__chips a,.hdr13__chip-all{flex-shrink:0;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap;background:#fff}
  .hdr13__chip-all{display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:var(--h13-bg);color:#fff;border-color:var(--h13-bg)}
  .hdr13__chip-all .burger{width:14px;height:10px}.hdr13__chip-all .burger i:nth-child(2){top:4px}.hdr13__chip-all .burger i:nth-child(3){top:8px}
  .hdr13__mega-in{grid-template-columns:minmax(0,1fr)}
  .hdr13__parts{padding:14px 16px 16px}
  .hdr13__tiles,.hdr13__mega--parts .hdr13__tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hdr13__pic{height:72px}.hdr13__pic img{max-height:66px}
  .hdr13__sys{padding:16px}
  .hdr13__mega{max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px)}
  .hdr13__sys{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}
@media (max-width:600px){.hdr13 .brand__img{max-height:34px;width:auto}}

/* ================================================================ header 14
   Workshop: thin dark contact bar, white bar (logo, menu, search, cart, one
   strong button), then the moving strip. Mega menus open under the white bar. */
.hdr14{background:rgba(255,255,255,.98);box-shadow:0 4px 18px rgba(7,19,31,.04)}
@supports (backdrop-filter:blur(1px)){.hdr14{background:rgba(255,255,255,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}}
.hdr14__top{background:#07131f;color:#eef2f5;font-size:12px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.09)}
.hdr14__top-in{display:flex;align-items:center;gap:26px;min-height:38px;padding-block:6px}
.hdr14__item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.hdr14__item svg{width:14px;height:14px;color:var(--brand);flex-shrink:0}
.hdr14__top a,.hdr14__top button{color:inherit}
.hdr14__hours{margin-left:auto;color:#aab6c8;white-space:nowrap}
.hdr14__main{position:relative;border-bottom:1px solid #e8eaec}
.hdr14__main-in{display:flex;align-items:center;gap:18px;min-height:64px;padding-block:10px}
@media (min-width:1024px){.hdr14__main-in{min-height:84px}}
.hdr14__main-in .nav{margin-left:auto}
.hdr14__main-in .hactions{margin-left:0}
.hdr14__cta{white-space:nowrap;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.hdr14__cta:hover{transform:translateY(-2px);box-shadow:0 10px 22px -10px var(--brand)}
@media (max-width:1023px){.hdr14__main-in .hactions{margin-left:auto}}
.hdr14__end{display:contents}
@media (min-width:1024px){
  .hdr14__main-in.is-centred{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr)}
  .hdr14__main-in.is-centred>.brand{justify-self:start}
  .hdr14__main-in.is-centred>.nav{margin:0}
  .hdr14__main-in.is-centred>.hdr14__end{display:flex;align-items:center;gap:18px;justify-self:end}
}
@media (max-width:900px){.hdr14__addr,.hdr14__hours{display:none}}
@media (max-width:560px){.hdr14__email{display:none}.hdr14__top-in{justify-content:center}}

/* ================================================================ moving strip
   partials/marquee.php: header 14, and a page's tagline strip set to "Moving
   strip". Two copies of the words slide left by one copy's width, so the
   loop has no seam; it pauses under the pointer and stands still for anyone
   whose device asks for less motion. */
.marquee{overflow:hidden;white-space:nowrap;background:var(--brand);color:#fff}
.marquee--dark{background:#10202f;color:#eef2f5}
.marquee--ink{background:var(--ink)}
.marquee--accent{background:var(--accent)}
.marquee--light{background:var(--soft);color:var(--ink);border-bottom:1px solid var(--line)}
.marquee__track{display:inline-flex;animation:wh-marquee var(--marquee-s,40s) linear infinite}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
.marquee__group{display:inline-flex;flex-shrink:0}
.marquee__group>*{display:inline-flex;align-items:center;padding-block:14px;color:inherit;text-decoration:none;
  font-family:var(--font-head);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.marquee__group>*::after{content:"";width:7px;height:7px;background:var(--brand);transform:rotate(45deg);margin-inline:26px;flex-shrink:0}
.marquee:not(.marquee--dark):not(.marquee--light):not(.marquee--ink) .marquee__group>*::after{background:rgba(255,255,255,.55)}
.marquee__group a:hover{text-decoration:underline;text-underline-offset:4px}
@keyframes wh-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}.marquee__group[aria-hidden]{display:none}.marquee{overflow-x:auto}}


/* --- header 7: logo nudged in from the pill's edge (desktop only) ------ */
@media (min-width:1024px){.hdr7 .brand{margin-left:var(--hdr7-logo-offset,5%)}}

/* ================================================================ header button styles
   Appearance -> Call to action -> "Header button style" puts a cta-* class on
   <body>. "Header design default" (no class) leaves each design's own button
   alone. Every style has a light-header and a dark-header version: the dark
   headers are 4, 7 and 11, where a dark lip or a black shadow disappears. */
body[class*="cta-"] .site-header .hdr-cta{background-image:none;text-shadow:none;transition:background .18s,color .18s,box-shadow .12s,transform .09s,filter .18s}
body.ctasz-md .site-header .hdr-cta{padding:13px 24px;font-size:15px;min-height:46px}
body.ctash-pill .site-header .hdr-cta{border-radius:999px}
body.ctash-square .site-header .hdr-cta{border-radius:3px}

/* Solid 3D - flat colour, bright top edge, hard lip, soft drop.
   The lip is a darker shade of the brand rather than #1a1a1a, and the drop
   is .28 rather than .98, so it still reads as raised on a white header
   without turning into a black smear. */
body.cta-solid .site-header .hdr-cta{background:var(--brand);color:#fff;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 0 color-mix(in srgb,var(--brand) 55%,#000),0 4px 10px rgba(0,0,0,.28)}
body.cta-solid .site-header .hdr-cta:hover{filter:brightness(1.08)}
body.cta-solid .site-header .hdr-cta:active{transform:translateY(2px);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.25),0 0 0 transparent,0 1px 3px rgba(0,0,0,.25)}
/* On a dark header the lip and drop cannot be seen, so a thin light rim and a
   brighter top edge separate the button from the bar. */
body.cta-solid :is(.hdr4,.hdr7,.hdr11) .hdr-cta{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 0 1px rgba(255,255,255,.22),0 2px 0 color-mix(in srgb,var(--brand) 45%,#000),0 6px 16px rgba(0,0,0,.45)}

/* Outline - brand border on a light header, white on a dark one. */
body.cta-outline .site-header .hdr-cta{background:transparent;color:var(--brand);border:2px solid var(--brand);box-shadow:none}
body.cta-outline .site-header .hdr-cta:hover{background:var(--brand);color:#fff}
body.cta-outline :is(.hdr4,.hdr7,.hdr11) .hdr-cta{color:#fff;border-color:rgba(255,255,255,.75)}
body.cta-outline :is(.hdr4,.hdr7,.hdr11) .hdr-cta:hover{background:#fff;color:var(--ink);border-color:#fff}

/* Contrast - dark button on a light header, white button on a dark one.
   The safest choice when the brand colour is itself dark (navy, black). */
body.cta-contrast .site-header .hdr-cta{background:var(--ink);color:#fff;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 0 #000,0 4px 10px rgba(0,0,0,.22)}
body.cta-contrast .site-header .hdr-cta:hover{background:var(--brand)}
body.cta-contrast :is(.hdr4,.hdr7,.hdr11) .hdr-cta{background:#fff;color:var(--ink);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12),0 4px 14px rgba(0,0,0,.35)}
body.cta-contrast :is(.hdr4,.hdr7,.hdr11) .hdr-cta:hover{background:var(--brand);color:#fff}

/* Glass - frosted, sits into a transparent header. Light headers get a
   tinted brand glass so it is still a button and not a smudge. */
body.cta-glass .site-header .hdr-cta{background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand);
  border:1px solid color-mix(in srgb,var(--brand) 35%,transparent);box-shadow:none;backdrop-filter:blur(8px)}
body.cta-glass .site-header .hdr-cta:hover{background:var(--brand);color:#fff}
body.cta-glass :is(.hdr4,.hdr7,.hdr11) .hdr-cta{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.35)}
body.cta-glass :is(.hdr4,.hdr7,.hdr11) .hdr-cta:hover{background:#fff;color:var(--ink)}

/* ================================================================ mobile nav */
.mnav{position:fixed;inset:0;z-index:1200}
.mnav[hidden]{display:none}
.mnav__scrim{position:absolute;inset:0;background:rgba(14,23,38,.55);opacity:0;transition:opacity .25s}
.mnav.is-open .mnav__scrim{opacity:1}
.mnav__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(400px,88vw);height:100%;height:100dvh;
  background:#fff;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--shadow-lg);
}
.mnav.is-open .mnav__panel{transform:none}
.mnav__head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 10px 10px 16px;border-bottom:1px solid var(--line);background:#fff}
.mnav__head .brand{min-width:0}
.mnav__close{font-size:32px;line-height:1;width:44px;height:44px;color:var(--muted)}
/* 2.21.2: everything below the head scrolls as ONE area, so a swipe anywhere
   in the panel moves it with the phone's normal momentum - before, only a
   strip between the pinned top and the pinned footer scrolled. */
.mnav__scroll{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.mnav__icons{display:flex;align-items:center;gap:2px;flex:none}
.mnav__icon{position:relative;width:42px;height:42px;display:grid;place-items:center;border-radius:10px;color:var(--ink)}
.mnav__icon:hover{background:var(--soft);color:var(--brand)}
.mnav__icon svg{width:22px;height:22px}
.mnav__icon-n{position:absolute;top:3px;right:2px;font-style:normal;background:var(--brand);color:#fff;font-size:10.5px;font-weight:800;line-height:16px;min-width:16px;padding:0 4px;border-radius:999px;text-align:center}
.mnav__search{display:flex;margin:14px 16px 6px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}

/* The system designer, at the top of the phone menu.
   The header row that normally carries this link is hidden below 1024px, so
   without it a phone has no route to the sizer from anywhere but the home
   page. Styled as the one thing on the panel worth pressing. */
.mnav__sizer{
  display:flex;align-items:center;gap:12px;margin:14px 16px 4px;padding:13px 14px;
  border-radius:var(--radius);background:var(--ink);color:#fff;text-decoration:none;
  box-shadow:0 2px 10px rgba(14,23,38,.18);
}
.mnav__sizer:hover,.mnav__sizer:focus-visible{background:#1b2738;color:#fff}
.mnav__sizer-mark{flex:0 0 32px;width:32px;height:32px;color:var(--brand);display:grid;place-items:center}
.mnav__sizer-mark svg{width:32px;height:32px}
.mnav__sizer-text{flex:1;min-width:0;line-height:1.25}
.mnav__sizer-text b{display:block;font-size:15.5px;font-weight:700}
.mnav__sizer-text i{display:block;font-style:normal;font-size:12.5px;color:#9fb0c2;margin-top:2px}
.mnav__sizer-go{flex:none;font-size:19px;color:#9fb0c2}
.mnav__search input{flex:1;min-width:0;border:0;padding:12px 14px;font-size:15px;background:#fff}
.mnav__search input:focus{outline:none}
.mnav__search button{width:48px;display:grid;place-items:center;background:var(--soft);color:var(--muted)}
.mnav__search svg{width:19px;height:19px}
.mnav__body{padding:8px 8px 16px}
.mnav__list{list-style:none;margin:0;padding:0}
.mnav__row{display:flex;align-items:stretch}
.mnav__link{
  flex:1;display:flex;align-items:center;gap:8px;padding:14px 12px;
  font-size:16px;font-weight:600;border-radius:9px;min-height:48px;
}
.mnav__link:hover,.mnav__item.is-active>.mnav__row>.mnav__link{background:var(--soft);color:var(--brand)}
.mnav__link--heading{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);min-height:0;padding-block:14px 6px}
.mnav__toggle{width:48px;display:grid;place-items:center;color:var(--muted);border-radius:9px}
.mnav__toggle svg{width:15px;height:15px;transition:transform .22s}
.mnav__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.mnav__sub{padding-left:14px;border-left:2px solid var(--line);margin-left:12px}
.mnav__sub .mnav__link{font-size:15px;font-weight:500}
.mnav__list--1 .mnav__link{font-weight:500}
.mnav__divider{height:1px;background:var(--line);margin:8px 12px}
.mnav__foot{margin-top:auto;flex:none;border-top:1px solid var(--line);padding:16px 16px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;background:var(--soft)}
.mnav__foot-link{font-size:14.5px;font-weight:600;color:var(--muted)}
.mnav__foot-link:hover{color:var(--brand)}
.mnav__cta{margin-top:2px}

/* The controls that no longer fit in the header bar on a phone. Laid out as
   tap targets rather than a row of text links, because this is now the only
   way to reach the cart and the account on a small screen. */
.mnav__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mnav__tiles:has(a:only-child){grid-template-columns:1fr}
.mnav__tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:12px 6px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;color:var(--ink);font-size:12.5px;font-weight:600;text-align:center;
  transition:border-color .16s,color .16s;
}
.mnav__tile:hover{border-color:var(--brand);color:var(--brand)}
.mnav__tile svg{width:21px;height:21px}
.mnav__tile-n{
  font-style:normal;background:var(--brand);color:#fff;font-size:11px;font-weight:800;
  padding:1px 6px;border-radius:999px;margin-left:2px;
}
.mnav .tag{font-style:normal;font-size:10px;font-weight:800;background:var(--accent);color:#fff;padding:2px 5px;border-radius:4px}
body.is-menu-open{overflow:hidden}
@media (min-width:1024px){
  body:not(.hv-6) .mnav{display:none}
}

/* ================================================================ search overlay */
.search-overlay{position:fixed;inset:0;z-index:1300;background:rgba(14,23,38,.6);backdrop-filter:blur(4px);display:grid;place-items:start center;padding:12vh 16px 0}
.search-overlay[hidden]{display:none}
.search-overlay__panel{width:100%;max-width:680px;position:relative}
.search-overlay form{display:flex;gap:8px;background:#fff;padding:10px;border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.search-overlay input{flex:1;min-width:0;border:0;padding:14px 16px;font-size:17px;background:transparent}
.search-overlay input:focus{outline:none}
.search-overlay__close{position:absolute;top:-46px;right:0;color:#fff;font-size:34px;line-height:1;width:44px;height:44px}

/* ================================================================ flash */
.flash-wrap{padding-top:16px;display:flex;flex-direction:column;gap:8px}
/* 2.36.1: headers 7 and 11 float over the top of the page, so a notice up there was hidden
   behind them (a form said nothing). There it shows just under the header instead, over the page. */
body:is(.hv-7,.hv-11) .flash-wrap{position:fixed;top:calc(var(--header-h,64px) + 12px);left:50%;transform:translateX(-50%);width:min(calc(100% - 32px),720px);padding:0;z-index:950}
body:is(.hv-7,.hv-11) .flash{box-shadow:0 10px 28px rgba(14,23,38,.22)}
.flash{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-radius:var(--radius);font-size:14.5px;border:1px solid}
.flash span{flex:1}
.flash__x{font-size:22px;line-height:1;opacity:.5;width:24px}
.flash__x:hover{opacity:1}
.flash--success{background:#f0fdf4;border-color:#abefc6;color:#085d3a}
.flash--error{background:#fef3f2;border-color:#fecdca;color:#912018}
.flash--warning{background:#fffaeb;border-color:#fedf89;color:#93370d}
.flash--info{background:#eff8ff;border-color:#b2ddff;color:#175cd3}

/* ================================================================ page furniture */
.page-hero{
  position:relative;background:var(--ink);color:#fff;padding-block:56px 44px;
  background-size:cover;background-position:center;
}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,23,38,.55),rgba(14,23,38,.25))}
.page-hero__in{position:relative;z-index:2}
.page-hero .page-hero__eyebrow{color:#fff;opacity:.78}
.page-hero h1{margin:0 0 8px;text-transform:uppercase}
.page-hero p{margin:0;font-size:17px;color:rgba(255,255,255,.82);max-width:60ch}
/* The overlay headers sit on top of the hero, so the hero is made taller to
   give the picture room to show above the title. */
body.hv-7 .page-hero{padding-top:calc(var(--header-h) + 40vh)}
body.hv-11 .page-hero{padding-top:calc(var(--header-h) + 30vh)}
@media (min-width:768px){.page-hero{padding-block:84px 64px}}

/* A page with a picture behind the title needs room for the picture to read
   as one; the plain dark band does not. */
.page-hero--image{padding-block:88px 68px}
@media (min-width:768px){.page-hero--image{padding-block:130px 100px}}

/* --- banner options (page editor -> "Banner & layout") -------------------
   The picture sits on its own layer (.page-hero__bg) so it can fade and zoom
   without moving the title. Everything here is opt-in per page; a page with
   no options set looks exactly as before. */
.page-hero{overflow:hidden}
.page-hero__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
@media (max-width:480px){.page-hero__bg--ph{background-image:var(--bg-ph)!important}} /* 2.42: the phone's own banner */
/* A pattern over the picture (Banner & layout -> Pattern). It sits above the
   darkening layer so it keeps its colour, and below the words. */
.page-hero__pattern{position:absolute;inset:0;z-index:2;pointer-events:none;background-repeat:repeat}
.page-hero .page-hero__in{z-index:3}
/* Side panels are drawn at the banner's full height. A phone is too narrow
   for them - they would run through the words - so on a phone the banner
   shows the picture alone. The graphic designs and patterns stay. */
@media (max-width:760px){.page-hero__pattern--sides{display:none}}
:is(.page-hero--fade,.page-hero--zoom) .page-hero__pattern{animation:wh-pat-in 1.8s ease-out both}
@keyframes wh-pat-in{from{opacity:0}to{opacity:var(--pop,.2)}}
.page-hero::after{z-index:1}
.page-hero--ov::after{background:rgba(8,12,20,var(--hero-ov,.55))}
.page-hero--center .page-hero__in{text-align:center;display:flex;flex-direction:column;align-items:center}
.page-hero--center p{margin-inline:auto}
.page-hero--big h1{font-size:clamp(34px,6.4vw,76px);line-height:1.02;letter-spacing:.01em}
.page-hero--big p{font-size:clamp(17px,1.6vw,21px);max-width:62ch}
.page-hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.page-hero--center .page-hero__btns{justify-content:center}
.page-hero__btns .btn--ghost{color:#fff;border-color:rgba(255,255,255,.8)}
/* Height: a set height centres the words in the picture.
   --hero-lift is how far the overlay header pulls the banner up under itself;
   it is added to both the height and the top padding so the chosen height is
   what you actually see below the header. */
body.hv-7{--hero-lift:calc(var(--header-h) + 28px)}
body.hv-11{--hero-lift:calc(var(--header-h) + 2px)}
.page-hero.page-hero--sized{display:flex;align-items:center;padding-block:calc(var(--hero-lift,0px) + 48px) 48px}
.page-hero--sized>.page-hero__in{width:100%}
.page-hero--h40{min-height:calc(40vh + var(--hero-lift,0px))}
.page-hero--h60{min-height:calc(60vh + var(--hero-lift,0px))}
.page-hero--h80{min-height:calc(80vh + var(--hero-lift,0px))}
.page-hero--h100{min-height:calc(100svh + var(--hero-lift,0px))}
/* 2.30 banner options (page editor -> Banner & layout). All off unless chosen.
   Split: the words on the dark band, the photo beside them in a rounded box. */
.page-hero--split{background:var(--ink)}
.page-hero--split::after{display:none}
.page-hero--split>.page-hero__in{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,4vw,56px)}
.page-hero__words{flex:1 1 420px;min-width:0}
.page-hero__photo{flex:1 1 440px;min-width:0;align-self:stretch;min-height:clamp(240px,34vw,460px);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -24px rgba(0,0,0,.55)}
.page-hero__photo img{width:100%;height:100%;object-fit:cover;display:block}
.page-hero--split.page-hero--center .page-hero__words{text-align:left;align-items:flex-start}
/* Bottom edge: fade into the page below, or an angled cut with a stripe. */
.page-hero__edge{position:absolute;inset:0;z-index:2;pointer-events:none}
.page-hero--edge-fade .page-hero__edge{top:auto;height:min(45%,320px);background:linear-gradient(180deg,transparent,var(--edge-c,var(--page-bg,#fff)))}
body.has-mbg--dark .page-hero--edge-fade{--page-bg:#05070b}
.page-hero--edge-fade{padding-bottom:clamp(90px,10vw,150px)}
.page-hero--edge-angle{--cut:clamp(40px,7vw,110px);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),0 100%);padding-bottom:calc(var(--cut) + 56px)}
.page-hero--edge-angle .page-hero__edge{background:var(--edge-c,var(--brand,#c8102e));clip-path:polygon(0 calc(100% - 7px),100% calc(100% - var(--cut) - 7px),100% calc(100% - var(--cut)),0 100%)}
.page-hero--edge-angle.page-hero--sized{padding-bottom:calc(var(--cut) + 48px)}
/* The first section rises over the bottom of the banner (cards over the edge).
   The breadcrumb trail would sit under it, so it is not drawn (its schema stays). */
.page-hero.page-hero--overlap{padding-bottom:calc(var(--ov,120px) + 48px)}
/* 2.31.1: one rule for every case, so the gap under the buttons is always
   about 56px. The section after the banner gets a fixed top padding (it was
   48 or 72px, or 0 with "No space above and below" - and the flush setting
   did not always win), and the first section rises by the same amount.
   The angled cut needs no room of its own: the cards cover it. */
.page-hero--overlap~section.section--content{padding-top:56px}
/* A tall banner with cards over it: the words sit down by the cards, not in the middle with a gap under them. */
.page-hero.page-hero--sized.page-hero--overlap{align-items:flex-end}
.page-hero--overlap+.breadcrumbs,.page-hero--overlap+.hero-strip+.breadcrumbs{display:none}
.page-hero--overlap~.section .prose>.blk:first-child,.page-hero--overlap~section .prose>.blk:first-child{margin-top:calc(-1 * var(--ov,120px) - 48px);position:relative;z-index:4}
.page-hero--overlap~section .prose>.blk:first-child .blk-card{box-shadow:0 18px 40px rgba(14,23,38,.18)}
.page-hero--edge-fade+.breadcrumbs{background:transparent;border-top:0}
/* --ov is set on the section too: it is the banner's sibling, so it does not inherit it (2.31.1). */
@media (max-width:760px){.page-hero--overlap,.page-hero--overlap~section{--ov:72px}}
body.hv-7 .page-hero.page-hero--sized,body.hv-11 .page-hero.page-hero--sized{padding-top:calc(var(--hero-lift) + 48px)}
/* 2.31.1: with "Keep the header at the top" these two headers are fixed - they
   take no room of their own, yet the page is still pulled up under them - so a
   banner with a set height put its first line behind the header. Clear it. */
body.has-sticky:is(.hv-7,.hv-11) .page-hero.page-hero--sized:not(.page-hero--panel){padding-top:calc(var(--hero-lift) + var(--header-h) + 32px)}
/* Animation: the picture fades in (and, with zoom, settles from 112%), then
   the words rise in one after another. */
.page-hero--fade .page-hero__bg{animation:wh-hero-fade 1.4s ease-out both}
.page-hero--zoom .page-hero__bg{animation:wh-hero-fade 1.4s ease-out both,wh-hero-zoom 9s cubic-bezier(.2,.6,.3,1) both}
:is(.page-hero--fade,.page-hero--zoom) .page-hero__in>*{animation:wh-hero-up .8s cubic-bezier(.2,.7,.3,1) both}
:is(.page-hero--fade,.page-hero--zoom) .page-hero__in>*:nth-child(1){animation-delay:.35s}
:is(.page-hero--fade,.page-hero--zoom) .page-hero__in>*:nth-child(2){animation-delay:.5s}
:is(.page-hero--fade,.page-hero--zoom) .page-hero__in>*:nth-child(3){animation-delay:.65s}
:is(.page-hero--fade,.page-hero--zoom) .page-hero__in>*:nth-child(4){animation-delay:.8s}
@keyframes wh-hero-fade{from{opacity:0}to{opacity:1}}
@keyframes wh-hero-zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes wh-hero-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Tagline strip: the full-width band under the banner. With "flip" each word
   turns over on its own in 3D, one after another. */
.hero-strip{background:var(--brand);color:#fff;padding-block:18px;overflow:hidden}
.hero-strip--ink{background:var(--ink)}
.hero-strip--light{background:var(--soft);color:var(--ink);border-bottom:1px solid var(--line)}
.hero-strip--accent{background:var(--accent)}
.hero-strip__text{margin:0;text-align:center;font-family:var(--font-head);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:clamp(18px,2.6vw,32px);line-height:1.2;perspective:700px}
.hero-strip__w{display:inline-block;margin-inline:.14em;transform-origin:50% 50% -.5em;backface-visibility:hidden}
.hero-strip--flip .hero-strip__w{animation:wh-flip-in .9s cubic-bezier(.2,.8,.3,1.2) both;animation-delay:calc(.25s + var(--i) * .12s)}
.hero-strip--loop .hero-strip__w{animation:wh-flip-loop 7s cubic-bezier(.2,.8,.3,1.1) infinite;animation-delay:calc(var(--i) * .12s)}
@keyframes wh-flip-in{from{opacity:0;transform:rotateX(-100deg)}to{opacity:1;transform:none}}
@keyframes wh-flip-loop{
  0%{opacity:0;transform:rotateX(-100deg)} 9%{opacity:1;transform:none}
  86%{opacity:1;transform:none} 95%,100%{opacity:0;transform:rotateX(100deg)}}
@media (prefers-reduced-motion:reduce){
  .page-hero__bg,.page-hero__in>*,.hero-strip__w{animation:none!important}
}

/* Banner styles with a panel for the words (page editor -> Banner & layout
   -> Banner style). The shapes, colours and widths come from
   App\Core\PanelStyles as custom properties on the banner:
   --pp / --pl / --pc   the panel, the line (stripe or see-through shape) and
                        the corner triangle, as clip-path polygons
   --pbg --pline --pcorner   their colours
   --pin-l --pin-w      where the words sit (desktop)
   "text" styles are light panels with the words on the left in the accent
   colour; "bold" styles are colour panels with the words centred.
   The words' colour follows the panel: --panel-dark is added when it is dark. */
.page-hero--panel{--panel-ink:#5f6368;--panel-muted:#7a7f86;--panel-strong:#15181c;
  --panel-accent-c:var(--panel-accent,var(--accent,#b0862f))}
.page-hero--panel-dark{--panel-ink:#c9d1dc;--panel-muted:#aab3bf;--panel-strong:#fff}
.page-hero--panel-bold{--panel-title:var(--panel-accent,var(--panel-strong))}
.page-hero--panel-text{--panel-title:var(--panel-accent-c)}
.page-hero__line,.page-hero__panel,.page-hero__corner{position:absolute;inset:0;z-index:2;pointer-events:none}
.page-hero__line{background:var(--pline);clip-path:var(--pl)}
.page-hero__panel{background:var(--pbg);clip-path:var(--pp)}
.page-hero__corner{background:var(--pcorner);clip-path:var(--pc);opacity:.9}
.page-hero--panel-on-left .page-hero__bg{background-position:right center}
.page-hero--panel-on-right .page-hero__bg{background-position:left center}
.page-hero--panel .page-hero__in{max-width:none;margin:0 0 0 var(--pin-l);width:var(--pin-w);padding-inline:0;box-sizing:border-box;display:flex;flex-direction:column}
.page-hero--panel-text .page-hero__in{text-align:left;align-items:flex-start}
.page-hero--panel-bold .page-hero__in{text-align:center;align-items:center}
.page-hero--panel .page-hero__eyebrow{color:var(--panel-muted);opacity:1}
.page-hero--panel-text .page-hero__eyebrow{display:inline-block;padding-bottom:.5em;margin-bottom:.7em;border-bottom:2px solid var(--panel-accent-c)}
.page-hero--panel h1{color:var(--panel-title);line-height:1.05}
.page-hero--panel .page-hero__in p{color:var(--panel-ink);margin-inline:0}
.page-hero--panel-bold .page-hero__in>*{order:3}
.page-hero--panel-bold .page-hero__in>h1{order:1;margin:0;font-weight:800}
.page-hero--panel-bold .page-hero__in>.page-hero__eyebrow{order:2;margin:.55em 0 0;letter-spacing:.35em}
.page-hero--panel-bold .page-hero__in p{margin:1.2em auto 0;max-width:34em;text-transform:uppercase;letter-spacing:.04em;font-size:14px;line-height:1.6}
.page-hero--panel .page-hero__btns{justify-content:inherit}
.page-hero--panel-text .page-hero__btns{justify-content:flex-start}
.page-hero--panel-bold .page-hero__btns{justify-content:center}
.page-hero--panel .page-hero__btns .btn:not(.btn--ghost){background:var(--panel-accent-c);background-image:none;border-color:var(--panel-accent-c);color:#fff}
.page-hero--panel .page-hero__btns .btn--ghost{color:var(--panel-title);border-color:currentColor}
.page-hero__icons{order:4;display:flex;gap:10px;margin-top:clamp(16px,2.6vw,36px)}
.page-hero__icons a{width:32px;height:32px;border-radius:50%;background:var(--panel-strong);display:grid;place-items:center;transition:transform .15s}
.page-hero__icons a:hover{transform:scale(1.12)}
.page-hero__icons svg{width:16px;height:16px;fill:var(--pbg)}
:is(.page-hero--fade,.page-hero--zoom).page-hero--panel :is(.page-hero__panel,.page-hero__line,.page-hero__corner){animation:wh-panel-in .9s cubic-bezier(.2,.7,.3,1) both}
:is(.page-hero--fade,.page-hero--zoom).page-hero--panel .page-hero__line{animation-delay:.12s}
:is(.page-hero--fade,.page-hero--zoom).page-hero--panel-on-right :is(.page-hero__panel,.page-hero__line,.page-hero__corner){animation-name:wh-panel-in-r}
@keyframes wh-panel-in{from{transform:translateX(-12%);opacity:0}to{transform:none;opacity:1}}
@keyframes wh-panel-in-r{from{transform:translateX(12%);opacity:0}to{transform:none;opacity:1}}
/* Under a floating header the words must start below it, even when they fill the banner. */
body:is(.hv-7,.hv-11) .page-hero--panel.page-hero--sized{padding-top:calc(var(--hero-lift) + var(--header-h) + 20px)}
/* Phones. "Picture first" (pm-photo): a clear band of the photo, then the
   panel under it with an angled top edge. "See-through" (pm-glass): the panel
   covers the whole photo at the chosen strength, so all of the picture shows.
   --pm-at is where the panel starts: under the header, plus the photo band. */
@media (max-width:760px){
  .page-hero--panel .page-hero__in{width:auto;margin:0;padding-inline:16px}
  .page-hero--panel .page-hero__bg{background-position:center top}
  .page-hero--pm-photo{--pm-at:calc(var(--hero-lift,0px) + clamp(210px,62vw,340px))}
  body .page-hero.page-hero--pm-photo{padding-top:calc(var(--pm-at) + 56px)!important;padding-bottom:40px;align-items:flex-start}
  .page-hero--pm-photo .page-hero__panel{clip-path:polygon(0 calc(var(--pm-at) + 38px),100% var(--pm-at),100% 100%,0 100%)}
  .page-hero--pm-photo .page-hero__line{clip-path:polygon(0 calc(var(--pm-at) + 26px),100% calc(var(--pm-at) - 12px),100% 100%,0 100%)}
  .page-hero--pm-photo .page-hero__corner{clip-path:polygon(80% calc(var(--pm-at) + 2px),100% calc(var(--pm-at) - 1px),100% calc(var(--pm-at) + 70px))}
  .page-hero--pm-glass .page-hero__panel{clip-path:none;opacity:var(--pm-op,.8)}
  .page-hero--pm-glass :is(.page-hero__line,.page-hero__corner){display:none}
  .page-hero__pattern--ph-hide{display:none}
  .page-hero__pattern--ph-soft{opacity:calc(var(--pop,.2) / 2)!important;animation:none}
}
@media (prefers-reduced-motion:reduce){.page-hero__panel,.page-hero__line,.page-hero__corner{animation:none!important}}

/* Content width (page editor). Boxed is the default .container.
   Full width keeps a gutter; edge to edge has none, so blocks in the copy
   (cards, feature rows) meet the sides of the screen. Plain paragraphs and
   headings stay at a readable width in both. */
.container--full{max-width:none}
.container--edge{max-width:none;padding-inline:0}
.container--edge>.prose>:where(p,h1,h2,h3,h4,h5,h6,ul,ol,blockquote,table,pre,div:not(.blk)){max-width:var(--container);margin-inline:auto;padding-inline:24px}
/* Sections on a full-width page keep off the screen's edge too (not the
   picture panels - picture + text and call to action run edge to edge); a section's
   own padding (a background colour, edge to edge) still wins. */
:where(.container--edge>.prose>.blk:not(.blk-feature,.blk-cta)){padding-inline:24px}
.section--flush{padding-block:0}

/* ================================================================ sections
   Reusable sections (Content -> Sections), placed with [[section:name]].
   Colours: Appearance -> Sections, as --blk-accent (labels, numbers, lines)
   and --blk-deep (buttons, the text panel). Widths: --blk-max for the card
   and step grids, --blk-narrow for an intro. Every section also has the
   class blk--<its-name>, for CSS that should touch that one section only. */
.blk{--blk-accent-c:var(--blk-accent,var(--brand));--blk-deep-c:var(--blk-deep,color-mix(in srgb,var(--brand) 70%,#000));
  --blk-max-c:var(--blk-max,1200px);--blk-narrow-c:var(--blk-narrow,880px);
  font-size:16px;margin:0 0 72px;max-width:none}
.blk h2{line-height:1.15;margin:0 0 16px;font-size:clamp(26px,3.4vw,40px)}
.blk p{max-width:none}
.blk-kicker{text-transform:uppercase;letter-spacing:.12em;font-size:13px;font-weight:700;color:var(--blk-accent-c);margin:0 0 8px}
.blk-actions{margin:22px 0 0}
.prose .blk-btn,.blk-btn{display:inline-block;background:var(--blk-deep-c);color:#fff;text-decoration:none;
  padding:14px 28px;border-radius:6px;font-weight:700;transition:background .2s,color .2s}
.prose .blk-btn:hover,.blk-btn:hover{background:#111;color:#fff}
.prose .blk-btn--light,.blk-btn--light{background:#fff;color:var(--blk-deep-c)}
.prose .blk-btn--light:hover,.blk-btn--light:hover{background:#e8eef5;color:var(--blk-deep-c)}
.blk-head{max-width:var(--blk-narrow-c);margin:0 auto 32px;text-align:center}

/* text - ordinary writing between the other sections */
.blk-text{max-width:var(--blk-max-c);margin-inline:auto;padding-inline:20px}
.blk-text>*{max-width:var(--measure,82ch)}
.blk-text>:first-child{margin-top:0}

/* intro */
.blk-intro{max-width:var(--blk-narrow-c);margin-inline:auto;text-align:center;padding-inline:20px}
.blk-intro--left{text-align:left;max-width:var(--blk-max-c)}

/* cards */
.blk-cards{max-width:var(--blk-max-c);margin-inline:auto;padding-inline:20px}
.blk-cards__grid{--c:var(--blk-cols,3);--g:24px;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--g)}
/* Flex rather than grid, so a last row that is not full sits in the middle
   (4 cards three across: 3, then 1 centred) instead of hanging on the left. */
.blk-cards__grid>.blk-card{flex:0 0 calc((100% - (var(--c) - 1) * var(--g)) / var(--c));min-width:0}
.prose .blk-card,.blk-card{display:flex;flex-direction:column;background:#fff;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.08);
  text-align:center;color:inherit;text-decoration:none;overflow:hidden;transition:transform .3s,box-shadow .3s}
.blk-card:hover{transform:translateY(-8px);box-shadow:0 12px 24px rgba(0,0,0,.16)}
.blk-card__body{padding:24px;flex:1}
.blk-card h3{margin:0 0 10px;font-size:22px}
.blk-card p{margin:0 0 .6em;color:#555;font-size:15.5px}
.blk-card__more{display:inline-block;margin-top:6px;font-weight:700;color:var(--blk-accent-c)}
/* 2.31.1: the "Read more" links line up along the bottom of a row of cards,
   whatever the length of each card's words. */
.blk-card__body{display:flex;flex-direction:column}
.blk-card__body>.blk-card__more{margin-top:auto;padding-top:6px;align-self:center}
.blk-cards--photo .blk-card__body>.blk-card__more{align-self:flex-start}
.prose .blk-cards--icon .blk-card img,.blk-cards--icon .blk-card img{height:80px;width:auto;margin:24px auto 0;padding:8px;border-radius:0;transition:transform .3s}
.blk-cards--icon .blk-card__body{padding-top:12px}
.blk-cards--icon .blk-card:hover img{transform:scale(1.06)}
.prose .blk-cards--photo .blk-card img,.blk-cards--photo .blk-card img{width:100%;aspect-ratio:16/10;object-fit:cover;margin:0;border-radius:0}
.blk-cards--photo .blk-card{text-align:left}
@media (max-width:980px){.blk-cards__grid{--c:min(var(--blk-cols,3),2)}}
@media (max-width:600px){.blk-cards__grid{--c:1}}

/* feature: picture with an overlapping text panel */
.blk-feature{display:flex;align-items:center}
.blk-feature--tall{min-height:90vh}
.blk-feature--rev{flex-direction:row-reverse}
.blk-feature__img{flex:0 0 55%;align-self:stretch;min-height:420px;background-color:#1d3550;background-size:cover;background-position:center;border-radius:6px}
.blk-feature__text{flex:0 0 50%;margin-left:-5%;position:relative;z-index:2;color:#dce6f0;
  background:linear-gradient(color-mix(in srgb,var(--blk-accent-c) 93%,transparent),color-mix(in srgb,var(--blk-deep-c) 98%,transparent));
  padding:3.5% 4%;box-shadow:0 14px 22px -8px rgba(0,0,0,.6)}
.blk-feature--rev .blk-feature__text{margin-left:0;margin-right:-5%}
.blk-feature__text h2{color:#fff;font-size:clamp(26px,2.8vw,38px);margin:0 0 6px;text-shadow:1px 1px 2px rgba(0,0,0,.5)}
.blk-feature__text strong,.blk-feature__text a{color:#fff}
.blk-sub{font-style:italic;text-transform:uppercase;letter-spacing:.08em;font-size:14px;color:#fff;opacity:.9;margin:0 0 18px}
@media (max-width:860px){
  .blk-feature,.blk-feature--rev{flex-direction:column;min-height:0}
  .blk-feature__img{flex:none;align-self:auto;width:100%;min-height:280px}
  .blk-feature__text,.blk-feature--rev .blk-feature__text{flex:none;width:100%;margin:-40px 0 0;padding:28px 22px}
}

/* steps */
.blk-steps{max-width:var(--blk-max-c);margin-inline:auto;padding-inline:20px}
.blk-steps:not(.blk-steps--timeline)>:is(h2,.blk-kicker,.blk-lede){text-align:center}
.blk-steps:not(.blk-steps--timeline)>.blk-lede{margin:-16px auto 26px}
.blk-steps>h2{margin-bottom:28px}
.blk-steps:not(.blk-steps--timeline) ol{list-style:none;counter-reset:blk;margin:0;padding:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.prose .blk-steps:not(.blk-steps--timeline) li,.blk-steps:not(.blk-steps--timeline) li{counter-increment:blk;background:#f4f6f9;border-top:4px solid var(--blk-accent-c);border-radius:8px;padding:22px 20px 20px;margin:0}
.blk-steps:not(.blk-steps--timeline) li::before{content:counter(blk);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--blk-deep-c);color:#fff;font-weight:800;margin-bottom:12px}
.blk-steps:not(.blk-steps--timeline) strong{display:block;font-size:17px;margin-bottom:6px}
.blk-steps:not(.blk-steps--timeline) li>span{color:#555;font-size:15px}

/* --- shared by the sections below ---------------------------------------
   A box section (opening panel, highlight box, checklist/intro/areas in a
   box, the timeline) is the box itself; on a full-width page it keeps 16px
   off a phone's edge like the words do. */
.blk-lede{color:var(--muted,#5d6570);font-size:16px;line-height:1.62;max-width:80ch}
.blk-lede>p{margin:0 0 .6em}
.blk-after{margin-top:18px;color:var(--muted,#5d6570);font-size:15px;line-height:1.62;max-width:80ch}
.blk-after>p{margin:0 0 .6em}
.blk-actions{display:flex;flex-wrap:wrap;gap:10px}
.blk-intro .blk-actions{justify-content:center}
.blk-intro--left .blk-actions{justify-content:flex-start}
.prose .blk-btn--ghost,.blk-btn--ghost{background:transparent;color:var(--ink,#0e1726);box-shadow:inset 0 0 0 1.5px var(--line,#d5dae1)}
.prose .blk-btn--ghost:hover,.blk-btn--ghost:hover{background:transparent;color:var(--ink,#0e1726);box-shadow:inset 0 0 0 1.5px currentColor}
.blk--on-dark .blk-btn--ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.blk-box,.blk-lead,.blk-callout,.blk-steps--timeline{max-width:var(--blk-max-c);margin-inline:auto;box-sizing:border-box}
.container--edge>.prose>:is(.blk-box,.blk-lead,.blk-callout,.blk-steps--timeline){margin-inline:max(16px,calc((100% - var(--blk-max-c)) / 2))}
.blk-box{border-radius:14px;padding:26px 22px}
.blk-box--soft{background:var(--soft,#f6f7f9)}
.blk-box--line{border:1px solid var(--line,#e4e7ec)}
@media (min-width:760px){.blk-box{padding:32px 36px}}
.blk-box>h2,.blk-callout h2,.blk-steps--timeline>h2{font-size:clamp(21px,3vw,28px);margin:0 0 10px}
.blk-intro.blk-box{max-width:var(--blk-narrow-c)}
/* Headings in these sections sit right under their label (the page's own
   heading spacing, .prose h2/h3, is for ordinary writing). */
.prose :is(.blk-lead,.blk-callout,.blk-checklist,.blk-compare,.blk-prices,.blk-figures,.blk-areas,.blk-steps--timeline,.blk-box) :is(h2,h3,h4){margin-top:0}
.blk-intro.blk-box--soft .blk-btn--ghost{background:#fff}

/* steps as a timeline: numbers on a line, cards that float clear of the panel.
   On a phone the line runs down the left; from 880px it runs along the top. */
.blk-steps--timeline{border-radius:18px;padding:26px 20px 28px;background:linear-gradient(180deg,#f7f9fc 0%,#eef2f7 100%)}
@media (min-width:760px){.blk-steps--timeline{padding:32px 34px 36px}}
.blk-steps--timeline>h2,.blk-steps--timeline>.blk-kicker{text-align:left}
.blk-steps--timeline>h2{margin-bottom:8px}
.prose .blk-tl,.blk-tl{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:20px;grid-template-columns:none}
.prose .blk-tl>li.blk-tl__step,.blk-tl__step{position:relative;margin:0;padding:0 0 0 50px;background:none;border:0;border-radius:0}
.blk-tl__step::before{content:"";position:absolute;left:16px;top:34px;bottom:-20px;width:2px;background:linear-gradient(180deg,#cfd8e3,#dde4ec)}
.blk-tl__step:last-child::before{display:none}
.blk-tl__node{position:absolute;left:0;top:0;width:34px;height:34px;border-radius:999px;display:grid;place-items:center;
  background:var(--blk-deep-c);color:#fff;font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;box-shadow:0 0 0 5px #f2f5f9}
.blk-tl__step:last-child .blk-tl__node{background:var(--blk-accent-c)}
.blk-tl__card{background:#fff;color:var(--ink,#0e1726);border-radius:14px;padding:17px 18px 19px;
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 26px -14px rgba(16,24,40,.30);transition:transform .18s ease,box-shadow .18s ease}
@media (hover:hover){.blk-tl__card:hover{transform:translateY(-3px);box-shadow:0 2px 5px rgba(16,24,40,.06),0 20px 38px -18px rgba(16,24,40,.38)}}
.blk-tl__when{display:block;font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--blk-accent-c);margin-bottom:7px}
.blk-tl__card h3{font-size:17px;margin:0 0 7px;line-height:1.22}
.blk-tl__card p{font-size:14px;color:var(--muted,#5d6570);line-height:1.6;margin:0}
.blk-tl__card p+p{margin-top:8px}
.blk-tl__card em{font-style:normal;font-weight:700;color:var(--ink,#0e1726);font-variant-numeric:tabular-nums}
@media (min-width:880px){
  .prose .blk-tl:not(.blk-tl--long),.blk-tl:not(.blk-tl--long){grid-template-columns:repeat(var(--blk-n,4),minmax(0,1fr));gap:18px}
  .prose .blk-tl:not(.blk-tl--long)>li.blk-tl__step,.blk-tl:not(.blk-tl--long)>.blk-tl__step{padding:52px 0 0}
  .blk-tl:not(.blk-tl--long) .blk-tl__step::before{left:34px;right:-18px;top:16px;bottom:auto;width:auto;height:2px;background:linear-gradient(90deg,#cfd8e3,#dde4ec)}
  .blk-tl:not(.blk-tl--long) .blk-tl__card{height:100%}
}
@media (prefers-reduced-motion:reduce){.blk-tl__card{transition:none}.blk-tl__card:hover{transform:none}}

/* opening panel */
.blk-lead{border-radius:14px;padding:26px 20px;background:#0b1220;color:#c3ced9}
@media (min-width:760px){.blk-lead{padding:36px 40px}}
.blk-lead--brand{background:var(--blk-deep-c)}
.blk-lead--light{background:var(--soft,#f3f5f8);color:var(--muted,#5d6570)}
.blk-lead .blk-kicker{font-size:11.5px;letter-spacing:.15em;font-weight:800;margin-bottom:10px;color:color-mix(in srgb,var(--blk-accent-c) 45%,#fff)}
.blk-lead--light .blk-kicker{color:var(--blk-accent-c)}
.blk-lead h2{font-size:clamp(25px,4.4vw,38px);line-height:1.08;color:#fff;margin:0;text-wrap:balance}
.blk-lead--light h2{color:var(--ink,#0e1726)}
.blk-lead__cols{display:grid;gap:22px;margin-top:16px}
@media (min-width:860px){.blk-lead__cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}.blk-lead__cols--one{grid-template-columns:minmax(0,1fr)}}
.blk-lead__cols p{margin:0 0 12px;font-size:15.5px;line-height:1.64;color:inherit}
.blk-lead__cols b,.blk-lead__cols strong{color:#fff}
.blk-lead--light .blk-lead__cols :is(b,strong){color:var(--ink,#0e1726)}
.blk-lead a:not([class*="btn"]){color:#fff}
.blk-lead--light a:not([class*="btn"]){color:var(--link,var(--brand))}
.prose .blk-lead__pts,.blk-lead__pts{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.prose .blk-lead__pts li,.blk-lead__pts li{position:relative;padding-left:22px;margin:0;font-size:14.5px;line-height:1.55}
.blk-lead__pts li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:2px;background:var(--blk-accent-c)}
.blk-lead .blk-actions{margin-top:24px}
.blk-lead .blk-btn:not(.blk-btn--ghost){background:var(--blk-accent-c)}
.blk-lead--brand .blk-btn:not(.blk-btn--ghost){background:#fff;color:var(--blk-deep-c)}
.blk-lead:not(.blk-lead--light) .blk-btn--ghost{color:#e8edf4;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.blk-lead:not(.blk-lead--light) .blk-btn--ghost:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}

/* highlight box */
.blk-callout{--c:#0f7b6c;--c-bg:#f0f8f5;--c-line:#cfe9e0;--c-head:#0b5f52;--c-text:#14564b;--c-bold:#083b33;
  background:var(--c-bg);border:1px solid var(--c-line);border-left:5px solid var(--c);border-radius:0 14px 14px 0;padding:22px;color:var(--c-text)}
@media (min-width:760px){.blk-callout{padding:28px 32px}}
.blk-callout--gold{--c:#e0a11a;--c-bg:linear-gradient(180deg,#fffcf5 0%,#fff7e8 100%);--c-line:#f0e2b8;--c-head:#5c470f;--c-text:#6b5514;--c-bold:#3d2f0b}
.blk-callout--accent{--c:var(--blk-accent-c);--c-bg:color-mix(in srgb,var(--blk-accent-c) 7%,#fff);--c-line:color-mix(in srgb,var(--blk-accent-c) 22%,#fff);
  --c-head:color-mix(in srgb,var(--blk-accent-c) 75%,#000);--c-text:#3a4250;--c-bold:#111827}
.blk-callout--grey{--c:#98a2b3;--c-bg:#f6f7f9;--c-line:#e4e7ec;--c-head:#1d2939;--c-text:#475467;--c-bold:#101828}
.blk-callout__head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.blk-callout h2{color:var(--c-head);font-size:clamp(19px,3vw,24px);line-height:1.15;margin:0;text-wrap:balance}
.blk-callout__seal{flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:var(--c);display:grid;place-items:center;color:#fff;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 16%,transparent)}
.blk-callout__seal svg{width:24px;height:24px;display:block}
.blk-callout__text p{font-size:15.5px;line-height:1.68;color:var(--c-text);margin:0;max-width:78ch}
.blk-callout__text p+p{margin-top:11px}
.blk-callout :is(b,strong){color:var(--c-bold)}
.blk-callout__label{font-weight:800}
.blk-callout a:not([class*="btn"]){color:var(--c-head);text-decoration:underline}
.prose .blk-callout__items,.blk-callout__items{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.blk-callout__items+.blk-callout__text{margin-top:16px}
.prose .blk-callout__items li,.blk-callout__items li{background:#fff;border:1px solid var(--c-line);border-radius:10px;padding:13px 15px;margin:0;
  font-size:14.5px;line-height:1.55;color:var(--c-bold)}
.blk-callout__ask{margin-top:18px;background:#fff;border:1px solid var(--c-line);border-radius:11px;padding:16px 18px}
.blk-callout__ask b{display:block;color:var(--c-head);margin-bottom:5px;letter-spacing:.02em;text-transform:uppercase;font-size:11.5px;font-weight:800}
.blk-callout__ask q{font-size:16px;color:var(--c-bold);font-style:italic;quotes:"\201C" "\201D"}
.blk-callout__ask small{display:block;margin-top:8px;font-size:13.5px;color:var(--c-text);line-height:1.55}

/* checklist (also the points in Side by side) */
.blk-checklist:not(.blk-box){max-width:var(--blk-max-c);margin-inline:auto;padding-inline:20px}
.prose .blk-check,.blk-check{list-style:none;display:grid;gap:10px 26px;margin:18px 0 0;padding:0;counter-reset:blkc}
@media (min-width:640px){.blk-check--c2,.blk-check--c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.blk-check--c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.prose .blk-check>li,.blk-check>li{position:relative;padding-left:26px;margin:0;font-size:15px;line-height:1.55;counter-increment:blkc}
.blk-check>li::before{content:"";position:absolute;left:1px;top:7px;width:13px;height:8px;
  border-left:2.5px solid var(--blk-accent-c);border-bottom:2.5px solid var(--blk-accent-c);transform:rotate(-45deg)}
.blk-check--sm>li{font-size:14px}
.blk-check--sm>li::before{width:11px;height:7px;top:6px}
.blk-check--cross>li::before,.blk-check>li.is-no::before{border:0;top:5px;width:12px;height:12px;transform:none;
  background:linear-gradient(45deg,transparent 42%,#b54708 42%,#b54708 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,#b54708 42%,#b54708 58%,transparent 58%)}
.blk-check--warn>li::before{content:"!";border:0;transform:none;top:2px;left:0;width:18px;height:18px;border-radius:50%;background:#e0a11a;color:#fff;
  font-size:12px;font-weight:800;line-height:18px;text-align:center}
.blk-check--warn>li{padding-left:30px}
.blk-check--dot>li::before{border:0;transform:none;top:8px;width:9px;height:9px;border-radius:2px;background:var(--blk-accent-c)}
.blk-check--num>li{padding-left:34px}
.blk-check--num>li::before{content:counter(blkc);border:0;transform:none;top:0;left:0;width:24px;height:24px;border-radius:50%;
  background:var(--blk-deep-c);color:#fff;font-size:12.5px;font-weight:800;line-height:24px;text-align:center}
.blk-check b{font-weight:700}
.blk--on-dark .blk-check>li{color:#fff}

/* side by side */
.blk-compare,.blk-prices,.blk-figures{max-width:var(--blk-max-c);margin-inline:auto;padding-inline:20px}
.blk-cmp{display:grid;gap:18px;margin-top:22px}
@media (min-width:820px){.blk-cmp--2{grid-template-columns:repeat(2,minmax(0,1fr))}.blk-cmp--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.blk-cmp__opt{border:1px solid var(--line,#e4e7ec);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;background:#fff;color:var(--ink,#0e1726)}
.blk-cmp__opt.is-pick{border-color:var(--blk-accent-c);box-shadow:0 0 0 1px var(--blk-accent-c)}
.blk-cmp__top{padding:20px 22px 18px;background:#0b1220;color:#fff}
.blk-cmp__opt.is-pick .blk-cmp__top{background:linear-gradient(160deg,var(--blk-accent-c),color-mix(in srgb,var(--blk-accent-c) 70%,#000))}
.blk-cmp__kick{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9fb8c9;margin-bottom:6px}
.blk-cmp__opt.is-pick .blk-cmp__kick{color:rgba(255,255,255,.8)}
.blk-cmp__top h3{font-size:22px;margin:0 0 6px;color:#fff;line-height:1.15}
.blk-cmp__top p{font-size:14px;color:rgba(255,255,255,.72);line-height:1.55;margin:0}
.blk-cmp__body{padding:19px 22px 22px;display:flex;flex-direction:column;gap:14px;flex:1}
.blk-cmp__body>p{font-size:14.5px;line-height:1.62;color:var(--muted,#5d6570);margin:0}
.blk-cmp__body .blk-check{margin:0}
.blk-cmp__fit{margin-top:auto;padding-top:14px;border-top:1px solid var(--line,#e4e7ec);font-size:14px;line-height:1.55}
.blk-cmp__fit b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#5d6570);margin-bottom:5px}

/* price list */
.blk-rows{display:grid;gap:12px;margin-top:22px}
.blk-row{display:grid;gap:14px;border:1px solid var(--line,#e4e7ec);border-radius:12px;padding:18px 20px;background:#fff;color:var(--ink,#0e1726)}
@media (min-width:760px){.blk-row{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:28px;padding:20px 24px}}
.blk-row.is-pick{border-color:var(--blk-accent-c);box-shadow:0 0 0 1px var(--blk-accent-c);background:color-mix(in srgb,var(--blk-accent-c) 4%,#fff)}
.blk-row__flag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:var(--blk-accent-c);border-radius:99px;padding:3px 10px;margin-bottom:8px}
.blk-row h3{font-size:18px;margin:0 0 6px;line-height:1.25}
.blk-row__who p{font-size:14.5px;line-height:1.6;color:var(--muted,#5d6570);margin:0 0 6px}
.prose .blk-row__specs,.blk-row__specs{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.prose .blk-row__specs li,.blk-row__specs li{margin:0;font-size:12.5px;font-weight:600;background:#f2f4f7;border-radius:6px;padding:4px 9px;color:#344054}
.blk-row__price{font-size:13px;color:var(--muted,#5d6570);line-height:1.4}
@media (min-width:760px){.blk-row__price{text-align:right;min-width:190px}}
.blk-row__price b{display:block;font-size:clamp(19px,2.4vw,23px);color:var(--ink,#0e1726);font-variant-numeric:tabular-nums;white-space:nowrap}
.blk-row__price span{display:block}

/* big numbers */
.blk-figs{display:grid;gap:16px;margin-top:22px}
@media (min-width:640px){.blk-figs--2,.blk-figs--3,.blk-figs--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:980px){.blk-figs--3{grid-template-columns:repeat(3,minmax(0,1fr))}.blk-figs--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.blk-fig{background:#fff;border:1px solid var(--line,#e4e7ec);border-top:4px solid var(--blk-accent-c);border-radius:12px;padding:20px 22px;color:var(--ink,#0e1726)}
.blk-fig__n{display:block;font-size:clamp(28px,4vw,38px);font-weight:800;line-height:1.05;color:var(--blk-accent-c);font-variant-numeric:tabular-nums;margin-bottom:8px}
.blk-fig h3{font-size:17px;margin:0 0 6px}
.blk-fig p{font-size:14.5px;line-height:1.6;color:var(--muted,#5d6570);margin:0 0 6px}

/* where we work */
.blk-areas:not(.blk-box){max-width:var(--blk-max-c);margin-inline:auto;padding-inline:20px}
.blk-areas .areas{margin-top:18px}
.prose .blk-areas .areachips{padding-left:0;margin-left:0}

/* call to action */
.blk-cta{text-align:center;color:#fff;padding:64px 24px;
  background:linear-gradient(rgba(7,16,26,.9),rgba(0,11,30,.95)),var(--blk-cta-img,none) center/cover,var(--blk-deep-c)}
.blk-cta h2{color:#fff;margin:0 0 10px}
.blk-cta p{color:#cfd8e3;max-width:680px;margin-left:auto;margin-right:auto}

/* --- back link ---------------------------------------------------------- */
.backlink{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;
  font-size:14px;font-weight:600;color:var(--muted);
  padding:6px 12px 6px 8px;border-radius:999px;border:1px solid transparent;
  transition:color .16s,background .16s,border-color .16s;
}
.backlink svg{width:16px;height:16px}
.backlink:hover{color:var(--brand);background:var(--soft);border-color:var(--line)}

/* ================================================================ sizer link
   The route into Design Your Solution. Deliberately not another button: a
   ring that fills like something charging, a bold line and a quieter one
   saying what it actually does. */
.sizer{
  display:inline-flex;align-items:center;gap:11px;flex-shrink:0;
  padding:8px 16px 8px 10px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.sizer:hover{
  border-color:var(--brand);
  box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 16%,transparent);
  transform:translateY(-1px);
}
.sizer__mark{display:grid;place-items:center;width:30px;height:30px;color:var(--brand);flex-shrink:0}
.sizer__mark svg{width:30px;height:30px;overflow:visible}
.sizer__core{transform-origin:center}
/* The ring is drawn as a dash of the path's own length, so one rule fills it
   from nothing to whole regardless of the circle's radius. */
.sizer__ring{stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:center}
.sizer__text{display:flex;flex-direction:column;line-height:1.2}
.sizer__text b{font-size:14px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.sizer__text i{font-style:normal;font-size:11.5px;color:var(--muted);white-space:nowrap}

@media (prefers-reduced-motion:no-preference){
  .sizer__ring{animation:sizerCharge 5s ease-in-out infinite}
  .sizer__core{animation:sizerPulse 5s ease-in-out infinite}
  .sizer:hover .sizer__ring{animation-duration:1.6s}
  .sizer:hover .sizer__core{animation-duration:1.6s}
}
@keyframes sizerCharge{
  0%,8%   {stroke-dashoffset:100}
  55%,88% {stroke-dashoffset:0}
  100%    {stroke-dashoffset:0;opacity:.25}
}
@keyframes sizerPulse{
  0%,20%  {transform:scale(.72);opacity:.5}
  60%,88% {transform:scale(1);opacity:1}
  100%    {transform:scale(.72);opacity:.5}
}
/* In a nav bar it sits at the end, next to the shop button. */
.sizer--bar{margin-left:auto}
.hdr1__nav-in .sizer--bar + .hdr1__browse{margin-left:12px}
/* Between the menu appearing and there being real room, the second line goes
   before the row does - one pixel over is still a sideways scrollbar. */
@media (max-width:1199px){
  .sizer__text i{display:none}
  .sizer{padding:6px 12px 6px 8px;gap:8px}
  .sizer__mark,.sizer__mark svg{width:24px;height:24px}
}
@media (max-width:1023px){.sizer--bar{margin-left:0}}
/* Header 1's nav row carries the menu, the sizer and the shop button. At the
   narrow end of desktop the menu tightens rather than the row running over. */
@media (min-width:1024px) and (max-width:1149px){
  .hdr1 .nav__link{padding-inline:9px;font-size:13.5px}
  .hdr1__nav-in{gap:10px}
}
@media (max-width:600px){.sizer--bar{display:none}}

/* ================================================================ floaters
   WhatsApp and back-to-top, stacked in one column so they cannot land on top
   of each other however many are switched on. */
.floaters{
  position:fixed;right:16px;bottom:16px;z-index:1100;
  display:flex;flex-direction:column-reverse;gap:10px;align-items:flex-end;
}
.floater{
  position:relative;display:grid;place-items:center;
  width:52px;height:52px;border-radius:50%;
  box-shadow:0 6px 20px rgba(16,24,40,.22);
  transition:transform .18s,box-shadow .18s,background .18s;
}
.floater:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(16,24,40,.3)}
.floater svg{width:27px;height:27px}
.floater img{width:30px;height:30px;object-fit:contain;border-radius:50%}
.floater--wa{background:var(--wa-bg,#25d366);color:var(--wa-fg,#fff);
  -webkit-backdrop-filter:var(--wa-blur,none);backdrop-filter:var(--wa-blur,none)}
.floater--wa:hover{background:var(--wa-bg-hover,#1fb857)}
.floater--top{background:#fff;color:var(--ink);border:1px solid var(--line)}
.floater--top:hover{background:var(--soft)}
.floater--top[hidden]{display:none}
/* The label only appears on a device that can hover - on a phone the button
   is the whole affordance and a tooltip would just cover the page. */
.floater__tip{
  position:absolute;right:calc(100% + 10px);white-space:nowrap;
  background:var(--ink);color:#fff;font-size:13px;font-weight:600;
  padding:7px 12px;border-radius:8px;opacity:0;pointer-events:none;
  transition:opacity .16s;
}
@media (hover:hover){.floater:hover .floater__tip{opacity:1}}
@media (hover:none){.floater__tip{display:none}}
@media (max-width:640px){
  .floaters{right:12px;bottom:12px;gap:8px}
  .floater{width:48px;height:48px}
}
@media print{.floaters{display:none}}

.footer__lbl{color:rgba(255,255,255,.55);font-weight:600}

.breadcrumbs{background:var(--soft);border-bottom:1px solid var(--line);font-size:13.5px}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:12px 0}
.breadcrumbs li::after{content:"/";margin-left:6px;color:#b7bec9}
.breadcrumbs li:last-child::after{display:none}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--brand)}
.breadcrumbs [aria-current]{color:var(--ink);font-weight:600}

.section{padding-block:48px}
@media (min-width:768px){.section{padding-block:72px}}
.section--tight{padding-block:32px}
.section--soft{background:var(--soft)}
.section__head{max-width:70ch;margin-bottom:32px}
.section__head p{color:var(--muted);font-size:17px;margin:0}
.eyebrow{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand);margin-bottom:10px;
}

/* Page content fills the width the header uses. A paragraph on its own is
   still held to a readable measure, because a line of body text running the
   full 1 280px is hard to follow - but a table, a figure, a grid of cards or
   anything the editor has laid out deliberately gets the whole width. Both
   limits come from Appearance, so they can be changed without editing CSS. */
.prose{max-width:var(--prose-max,none)}
.prose > p,
.prose > ul,
.prose > ol,
.prose > dl,
.prose > blockquote,
.prose > h1,.prose > h2,.prose > h3,.prose > h4{max-width:var(--measure,82ch)}
.prose h2{margin-top:1.8em}
.prose h3{margin-top:1.5em}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin-bottom:.4em}
.prose a,.faq__a a,.faqs__more a{color:var(--link,var(--brand));text-decoration:var(--link-line,underline);text-underline-offset:2px}
/* :where keeps the hover rule as light as the one above, so buttons (.btn,
   .blk-btn) keep their own hover colours. */
.prose a:where(:hover),.faq__a a:where(:hover),.faqs__more a:where(:hover){color:var(--link-hover,var(--link,var(--brand-dark)));text-decoration:var(--link-line-hover,var(--link-line,underline))}
/* On the dark feature panel and call-to-action band a dark link cannot be read. */
.prose :where(.blk-feature__text,.blk-cta) a:not(.blk-btn,.btn),.blk-feature__text a:not(.blk-btn,.btn){color:var(--link-dark,#fff)}
.prose :where(.blk-feature__text,.blk-cta) a:not(.blk-btn,.btn):where(:hover){color:var(--link-dark-hover,var(--link-dark,#fff));opacity:.85}
/* A button placed in page content is still an <a>, and the rule above is more
   specific than .btn - which painted every button's label brand red on a brand
   red background and underlined it. Buttons opt back out. */
.prose .btn{color:#fff;text-decoration:none}
.prose .btn--outline{color:var(--ink)}
.prose .btn--ghost{color:inherit}
.prose img{border-radius:var(--radius);margin-block:1.4em}
.prose table{width:100%;border-collapse:collapse;font-size:14.5px;margin-block:1.4em;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{background:var(--soft);font-weight:700}
.prose blockquote{border-left:3px solid var(--brand);padding-left:18px;margin-left:0;color:var(--muted);font-style:italic}

/* cards / grids */
.grid{display:grid;gap:20px}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.grid--2{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:box-shadow .2s,transform .2s,border-color .2s}
.card:hover{box-shadow:var(--shadow);border-color:#d4d9e0}
.card__body{padding:18px}
.card__title{font-size:18px;margin:0 0 6px}
.card__text{color:var(--muted);font-size:14.5px;margin:0}

/* FAQ accordion */
/* ---- the questions section --------------------------------------------
   An accordion is only useful if the questions read as a list you can scan,
   so the bars are tight, the group headings carry a rule, and the open one
   is visibly open rather than differing by a plus sign alone. */
.faqs__head{margin-bottom:18px}
.faqs__head h2{margin:6px 0 0}
.faqs__intro{margin:9px 0 0;color:var(--muted);font-size:15px;max-width:68ch;line-height:1.6}
.faqs__group{
  font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:26px 0 12px;padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
.faqs__group:first-of-type{margin-top:0}
.faqs__more{
  margin-top:22px;font-size:14.5px;color:var(--muted);line-height:1.6;max-width:68ch;
}
.faq.is-open{border-color:#c9ced6;box-shadow:0 2px 10px rgba(14,23,38,.05)}
.faq.is-open .faq__q{background:var(--soft)}
/* FAQ page: jump links, then one group per page. */
.faqnav-bar{position:relative;display:flex;align-items:center;gap:6px}
.faqnav{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;flex:1;padding:4px 2px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
.faqnav-bar.is-start .faqnav{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent 100%)}
.faqnav-bar.is-end .faqnav{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px);mask-image:linear-gradient(90deg,transparent 0,#000 28px)}
.faqnav-bar.is-start.is-end .faqnav{-webkit-mask-image:none;mask-image:none}
.faqnav::-webkit-scrollbar{display:none}
.faqnav a{flex:0 0 auto;white-space:nowrap;padding:7px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;background:#fff}
.faqnav a:hover{border-color:var(--brand);color:var(--brand)}
.faqnav a.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.faqnav__arrow{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center}
.faqnav__arrow:hover{border-color:var(--brand);color:var(--brand)}
.faqnav__arrow[hidden]{display:none}

.faqnav-wrap{padding-bottom:0}
.faqgroup{max-width:900px}
.faqgroup__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:14px}
.faqgroup__title{margin:0 0 14px}
.faqgroup__head .faqgroup__title{margin:0}
.faqgroup__more{font-weight:600;font-size:15px}
[id^="faq-"]{scroll-margin-top:calc(var(--header-h,80px) + 16px)}
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.faq+.faq{margin-top:10px}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 18px;text-align:left;font-weight:700;font-size:16px;font-family:var(--font-head);
}
.faq__q:hover{background:var(--soft)}
.faq__icon{flex-shrink:0;width:22px;height:22px;position:relative}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background:var(--brand);border-radius:2px;transition:transform .22s}
.faq__icon::before{top:10px;left:2px;width:18px;height:2px}
.faq__icon::after{top:2px;left:10px;width:2px;height:18px}
.faq.is-open .faq__icon::after{transform:rotate(90deg);opacity:0}
.faq__a{padding:0 18px 18px;font-size:15px;color:#3f4a5a}
.faq__a>*:last-child{margin-bottom:0}
.faq[hidden]{display:none}

/* forms */
.field{margin-bottom:16px}
.field label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.field label .req{color:var(--brand)}
.field small{display:block;color:var(--muted);font-size:13px;margin-top:5px}
.input,.field input[type=text],.field input[type=email],.field input[type=tel],
.field input[type=number],.field input[type=password],.field input[type=search],
.field input[type=date],.field select,.field textarea{
  width:100%;padding:12px 14px;border:1px solid #cfd4dc;border-radius:var(--radius);
  font-size:16px;background:#fff;transition:border-color .16s,box-shadow .16s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,#fff)
}
.field textarea{min-height:130px;resize:vertical}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--bad)}
.field__error{color:var(--bad);font-size:13px;margin-top:5px;font-weight:600}
.field--check{display:flex;gap:10px;align-items:flex-start}
.field--check input{margin-top:4px;width:18px;height:18px;flex-shrink:0}
.field--check label{font-weight:400;font-size:14.5px;margin:0}
.form-row{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:640px){.form-row{grid-template-columns:repeat(2,1fr)}}

/* alerts inside pages */
.alert{padding:14px 16px;border-radius:var(--radius);font-size:14.5px;border:1px solid;margin-bottom:18px}
.alert--info{background:#eff8ff;border-color:#b2ddff;color:#175cd3}
.alert--warn{background:#fffaeb;border-color:#fedf89;color:#93370d}
.alert--error{background:#fef3f2;border-color:#fecdca;color:#912018}
.alert--ok{background:#f0fdf4;border-color:#abefc6;color:#085d3a}
.alert strong{display:block;margin-bottom:2px}

/* stock pills */
.stock{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px}
.stock::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.stock--in{background:#ecfdf3;color:var(--ok)}
.stock--back{background:#fffaeb;color:var(--warn)}
.stock--out{background:#fef3f2;color:var(--bad)}

/* ================================================================ footer */
.site-footer{background:var(--ink);color:rgba(255,255,255,.72);font-size:14.5px;margin-top:64px}
.footer__grid{display:grid;gap:32px;padding-block:48px;grid-template-columns:1fr}
@media (min-width:640px){.footer__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.footer__grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}}
.footer__title{color:#fff;font-size:12px;font-family:var(--font-body);font-weight:800;letter-spacing:.11em;text-transform:uppercase;margin:0 0 16px}
.footer__links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer__links a:hover{color:#fff}
.footer__tag{margin:14px 0 0;max-width:38ch;font-size:14px}
.footer__social{display:flex;gap:8px;margin-top:18px}
.footer__social a{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.1);font-size:11px;font-weight:800;color:#fff}
.footer__social a:hover{background:var(--brand)}
.footer__address{font-style:normal}
.footer__address p{margin:0 0 8px}
.footer__address a:hover{color:#fff}
.footer__hours{opacity:.65;font-size:13.5px}
/* The strip carries two lines now - packages and individual products - rather
 * than one. Padding moved off the paragraph and onto the strip so a second
 * line adds one line's height instead of a second block of padding, and the
 * label is emphasised so the pair scans as two cases rather than as one long
 * sentence that contradicts itself. */
.footer__strip{background:rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.08);
  padding-block:13px}
.footer__strip p{margin:0;font-size:13.5px;line-height:1.6;text-align:center}
.footer__strip p + p{margin-top:3px}
.footer__strip strong{font-weight:600;opacity:.92}
.footer__base{border-top:1px solid rgba(255,255,255,.08);font-size:13px}
.footer__base-in{display:flex;justify-content:space-between;gap:14px;padding-block:18px;flex-wrap:wrap}
.footer__base p{margin:0}
.footer__custom a{text-decoration:underline}

/* ================================================================ utilities */
.text-center{text-align:center}
.text-muted{color:var(--muted)}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.stack>*+*{margin-top:16px}
.hide-mobile{display:none}
@media (min-width:768px){.hide-mobile{display:initial}.hide-desktop{display:none}}


/* ================================================================ HEADER 8
   Three tier: dark contact bar, logo bar, coloured sub-menu bar.
   Each tier casts a shadow onto the one below, which is what gives the
   layered look. Shadows are kept subtle so the effect reads as depth rather
   than as a drop-shadow effect for its own sake. */
.hdr8{position:relative;z-index:60}
.hdr8__top{
  background:linear-gradient(#232a36,rgba(9,12,18,.96));
  color:#aab2c0;font-size:13.5px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);position:relative;z-index:3}
.hdr8__top-in{display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:38px;flex-wrap:wrap}
.hdr8__contact{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hdr8__contact a{color:#dfe4ec;text-decoration:none;font-weight:600}
.hdr8__contact a:hover{color:#fff;text-decoration:underline}
.hdr8__hours{color:#8f98a8}
.hdr8__top-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.hdr8__top-right a{color:#aab2c0;text-decoration:none}
.hdr8__top-right a:hover{color:#fff}
.hdr8__social{
  display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.10);font-size:11px;font-weight:700;letter-spacing:.02em}
.hdr8__social:hover{background:rgba(255,255,255,.22)}

.hdr8__main{
  background:var(--header-bg);
  box-shadow:0 3px 14px rgba(16,24,40,.16);position:relative;z-index:2}
.hdr8__main-in{display:flex;align-items:center;gap:24px;min-height:78px}
.hdr8__main-in .nav{margin-left:auto}
.hdr8__actions{display:flex;align-items:center;gap:10px}
.hdr8__cta{padding:11px 20px;font-size:14.5px;box-shadow:var(--shadow-sm)}

.hdr8__sub{
  background:var(--nav-bg);
  border-top:1px solid rgba(0,0,0,.06);
  box-shadow:0 4px 12px rgba(16,24,40,.14);position:relative;z-index:1}
.hdr8__sub-in{padding:0}
.hdr8__sub-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
.hdr8__sub-item{position:relative;flex:1 1 auto;min-width:150px;max-width:100%}
.hdr8__sub-link{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  padding:11px 14px;font:inherit;font-weight:700;font-size:14px;
  color:var(--ink);opacity:.72;background:none;border:0;
  border-bottom:2px solid transparent;text-decoration:none;text-align:center;
  cursor:pointer;transition:opacity .15s,border-color .15s,background .15s}
.hdr8__sub-link:hover,.hdr8__sub-item:hover>.hdr8__sub-link,
.hdr8__sub-link[aria-expanded="true"]{opacity:1;border-bottom-color:currentColor;
  background:rgba(255,255,255,.35)}
.hdr8__sub-link svg{flex:0 0 auto;transition:transform .18s}
.hdr8__sub-link[aria-expanded="true"] svg{transform:rotate(180deg)}

.hdr8__drop{
  list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:0;min-width:240px;
  background:#fff;border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 14px 34px rgba(16,24,40,.22);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s,transform .16s,visibility .16s;z-index:70}
.hdr8__sub-item:hover>.hdr8__drop,
.hdr8__sub-item:focus-within>.hdr8__drop,
.hdr8__drop.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.hdr8__drop a{
  display:block;padding:10px 12px;border-radius:8px;color:var(--ink);
  text-decoration:none;font-size:14.5px;white-space:nowrap}
.hdr8__drop a:hover{background:var(--soft)}

@media (max-width:900px){
  .hdr8__sub{display:none}
  .hdr8__hours,.hdr8__top-right a:not(.hdr8__social){display:none}
  .hdr8__main-in{min-height:64px}
}
/* Small laptops and landscape tablets. Header 8 carries the most in its
   middle row - logo, full menu, call to action and the icons - and at 1024
   the menu has only just reappeared, so the row is tightened rather than
   allowed to run past the edge of the screen. */
@media (min-width:1024px) and (max-width:1199px){
  .hdr8 .nav__link{padding-inline:9px;font-size:13.5px}
  .hdr8 .hact{width:38px;height:38px}
  .hdr8__cta{padding:9px 14px;font-size:13.5px}
  .hdr8__actions{gap:8px}
}

/* ================================================================ FOOTERS
   Four designs, chosen in Appearance. They share the column markup so the
   menus and contact details are written once. */

/* --- 2: frosted glass over the page background ---------------------------
   The look Herold asked for: the page's own background image shows through a
   blurred, tinted panel. backdrop-filter does the work where it is supported;
   where it is not, the solid tint underneath still reads correctly, so the
   footer never becomes unreadable. */
.site-footer--glass{
  position:relative;color:#eaeef5;
  background:linear-gradient(rgba(12,17,26,.80),rgba(12,17,26,.92));
  border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -8px 34px rgba(0,0,0,.28)}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .site-footer--glass{
    background:linear-gradient(rgba(14,20,30,.68),rgba(14,20,30,.86));
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    backdrop-filter:blur(18px) saturate(140%)}
}
/* The page background lives on body::before at z-index:-1 so it sits behind
   everything and stays put while the page scrolls. backdrop-filter only blurs
   what is painted behind the element, so the footer has to be on its own
   stacking layer for the fixed background to show through it rather than the
   plain body colour. */
.site-footer--glass{isolation:isolate}
body:has(.site-footer--glass){background:transparent}
.site-footer--glass a{color:#e8eef7}
.site-footer--glass a:hover{color:#fff}
.site-footer--glass .footer__title{color:#fff;letter-spacing:.04em}
.site-footer--glass .footer__base{
  background:rgba(0,0,0,.30);border-top:1px solid rgba(255,255,255,.12)}

/* --- 3: five columns with a newsletter sign-up --------------------------- */
.site-footer--wide .footer__grid{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px}
.footer__news{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.footer__news input{
  flex:1 1 150px;min-width:0;padding:11px 13px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);
  color:inherit;font-size:14.5px}
.footer__news input::placeholder{color:rgba(255,255,255,.55)}
.footer__news input:focus{outline:2px solid var(--brand);outline-offset:1px}
.footer__news button{
  padding:11px 20px;border:0;border-radius:var(--radius);background:var(--brand);
  color:#fff;font-weight:700;cursor:pointer;font-size:14.5px}
.footer__news button:hover{background:var(--brand-dark)}
.footer__section-label{
  display:block;font-size:11.5px;letter-spacing:.10em;text-transform:uppercase;
  opacity:.55;margin:14px 0 6px;font-weight:700}
.footer__col:first-child .footer__section-label{margin-top:0}

/* --- 4: map strip above the columns -------------------------------------- */
.footer__map{line-height:0;border-bottom:1px solid rgba(255,255,255,.10)}
.footer__map iframe{width:100%;height:340px;border:0;display:block;filter:saturate(.9)}
@media (max-width:768px){.footer__map iframe{height:220px}}

/* --- shared ------------------------------------------------------------- */
.footer__social a{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.12);font-size:12px;font-weight:700;margin-right:8px}
.footer__social a:hover{background:var(--brand)}

@media print{
  .site-header,.site-footer,.mnav,.store-notice,.search-overlay,.btn{display:none!important}
  body{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
}

/* The note under the address. Small, quiet, and on its own line - it is a
   condition of visiting, not part of the address. */
.contact-list__note{display:block;margin-top:5px;font-size:12px;line-height:1.5;
  color:var(--muted);font-weight:400;max-width:42ch}

/* ---- coverage chips, with the work behind them ------------------------
   A chip that has installations behind it is a button and says how many;
   one that does not is plain text. The panel is anchored to the LIST rather
   than to the chip, the same lesson the stock badge taught us: a popup hung
   off a 90px chip either runs off the page or gets clipped by whatever the
   chip sits in.

   1.40: only towns we can prove - plus home ground - get a chip. The rest
   are a sentence underneath. Nineteen boxes on a phone was three rows of
   furniture before the reader reached a single figure, and sixteen of them
   said nothing. Fewer chips also means each one can be bigger and easier to
   hit with a thumb. */
.areas{margin:18px 0 0}
.areachips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;
  position:relative}
.areachip{margin:0;position:static}
.areachip__btn{
  display:inline-flex;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:8px 15px;
  font-size:13.5px;font-weight:600;color:var(--ink);font-family:inherit;line-height:1.4;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition:border-color .15s,background .15s,box-shadow .15s,transform .15s;
}
.areachip.has-work .areachip__btn:hover{transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(16,24,40,.09)}

/* The long tail: every other town we cover, as one sentence. Same names in
   the page for a search engine, a fifth of the height on a phone. */
.areas__also{margin:14px 0 0;font-size:13.5px;line-height:1.75;color:var(--muted);
  max-width:80ch}
.areas__label{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);margin-right:7px;
}
.areachip.has-work .areachip__btn{cursor:pointer}
.areachip.has-work .areachip__btn:hover,
.areachip.has-work .areachip__btn:focus-visible{border-color:var(--brand);background:var(--soft)}
.areachip.is-home .areachip__btn{background:var(--brand);border-color:var(--brand);color:#fff}
.areachip.is-home.has-work .areachip__btn:hover{background:var(--brand-dark)}
.areachip__n{
  font-size:11px;font-weight:800;min-width:18px;height:18px;border-radius:999px;
  display:inline-grid;place-items:center;background:var(--soft);color:var(--muted);
  font-variant-numeric:tabular-nums;padding-inline:5px;
}
.areachip.is-home .areachip__n{background:rgba(255,255,255,.22);color:#fff}

.areachip__pop{
  position:absolute;left:0;right:auto;top:calc(100% + 10px);z-index:30;
  width:min(320px,100%);background:var(--ink);color:#fff;border-radius:12px;
  padding:15px 17px;box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s,transform .16s,visibility .16s;
}
/* On a phone the panel stops floating. An overlay that lands on top of the
   sentence underneath reads as a mistake on a narrow screen, so the open
   chip takes a row of its own and the figures push the page down instead -
   which is also what a thumb expects after a tap. */
@media (max-width:600px){
  .areachip.is-open{flex:1 0 100%}
  .areachip__pop{
    position:static;width:auto;padding:14px 15px;margin-top:10px;
    display:none;opacity:1;visibility:visible;transform:none;transition:none;
  }
  .areachip.is-open .areachip__pop{display:block}
}
.areachip.is-open .areachip__pop{opacity:1;visibility:visible;transform:none}
@media (hover:hover){
  .areachip.has-work:hover .areachip__pop{opacity:1;visibility:visible;transform:none}
}
.areachip__pop h4{font-size:16px;margin:0 0 4px;color:#fff;line-height:1.25}
.areachip__kw{margin:0 0 10px;font-size:13px;color:#9fb0c2}
.areachip__pop dl{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.16);font-size:13px}
.areachip__pop dt{font-weight:700;color:#fff}
.areachip__pop dd{margin:0;color:#c3ced9;font-variant-numeric:tabular-nums}

/* Checkout: the 'delivery and installation are included' panel. */
.co__included{margin:0 0 18px}
.co__included strong{display:block;margin-bottom:3px}
/* Shown in place of the "included" box once an out-of-area province is
   chosen. Same shape so the swap reads as the same box changing its mind
   rather than a second panel appearing. */
.co__away{margin:0 0 18px}
.co__away strong{display:block;margin-bottom:3px}

/* ---------------------------------------------------------------------
   Plain data table, used in the account area and on the order
   confirmation. It lived in the account shell until 1.51, which meant
   any page outside that shell - the checkout confirmation being the one
   that mattered - rendered it unstyled and shrunk to its content.
   --------------------------------------------------------------------- */
.acc-table{width:100%;border-collapse:collapse;font-size:14.5px}
.acc-table th,.acc-table td{padding:11px 8px;text-align:left;border-bottom:1px solid var(--line)}
.acc-table th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.acc-table tfoot td{border-bottom:0;padding-top:14px}
.acc-empty{padding:36px 0;text-align:center;color:var(--muted)}

/* =====================================================================
   Projects, gallery and the photo viewer (2.11)
   ===================================================================== */
.areachip__list{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:5px;font-size:13px;color:#dbe4ee}
.areachip__list li{margin:0;line-height:1.35}
.areachip__list small{color:#8fa1b5;font-size:11.5px;margin-left:4px}
.areachip__more{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:2px}

.blk-projects{max-width:var(--blk-max-c);margin-inline:auto;padding-inline:20px}
.blk-sample{background:#fff7e0;border:1px dashed #e2b93b;color:#6b5514;border-radius:10px;padding:9px 14px;font-size:13.5px;margin:0 0 18px;text-align:center}
.pgrid{--c:var(--pcols,3);display:grid;grid-template-columns:repeat(var(--c),minmax(0,1fr));gap:24px;margin:0}
.pgrid--gallery{--c:3}
@media (max-width:980px){.pgrid{--c:min(var(--pcols,3),2)}}
@media (max-width:600px){.pgrid{--c:1}}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(16,24,40,.05);transition:box-shadow .2s,transform .2s;text-align:left}
.pcard:hover{box-shadow:0 14px 30px -16px rgba(16,24,40,.35);transform:translateY(-2px)}
.pcard[hidden]{display:none}
.pcard__img{position:relative;display:block;width:100%;padding:0;border:0;background:#e9edf2;cursor:zoom-in;aspect-ratio:4/3;overflow:hidden}
.prose .pcard__img img,.pcard__img img{width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;transition:transform .4s}
.pcard:hover .pcard__img img{transform:scale(1.04)}
.pcard__count{position:absolute;right:10px;bottom:10px;background:rgba(10,16,28,.72);color:#fff;font-size:12px;font-weight:700;
  padding:4px 9px;border-radius:999px;letter-spacing:.02em}
.pcard__body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:4px;flex:1}
.prose .pcard__title,.pcard__title{font-size:18px;line-height:1.25;margin:0}
.pcard__title a{color:inherit;text-decoration:none}
.pcard__title a:hover{text-decoration:underline}
.prose .pcard__meta,.pcard__meta{margin:0;font-size:13.5px;color:var(--muted)}
.prose .pcard__svc,.pcard__svc{margin:0;font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.prose .pcard__more,.pcard__more{margin-top:auto;padding-top:8px;font-size:14px;font-weight:700;color:var(--link,var(--brand));text-decoration:none}

.gfilter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 18px;margin:0 0 28px;padding:14px 16px;
  background:var(--soft);border:1px solid var(--line);border-radius:var(--radius)}
.gfilter label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.gfilter select{min-width:190px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;font-size:15px;
  text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink);background:#fff}
.gfilter__n{font-size:13.5px;color:var(--muted);padding-bottom:10px}
.gallery__title{font-size:clamp(22px,2.6vw,30px);margin:0 0 18px}
.gmore{margin-top:48px}
.gmore[hidden],.ggroup[hidden]{display:none}
.ggroup{margin:0 0 34px}
.ggroup__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin:0 0 12px}
.ggroup__head h3{margin:0;font-size:19px}
.ggroup__head a{font-size:14px;font-weight:600}
.gphotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.gphotos--project{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.gphoto{display:block;width:100%;padding:0;border:0;background:#e9edf2;border-radius:8px;overflow:hidden;cursor:zoom-in;aspect-ratio:4/3}
.gphoto img{width:100%;height:100%;object-fit:cover;display:block;margin:0;transition:transform .35s}
.gphoto:hover img{transform:scale(1.05)}
.gphoto-fig{margin:0}
.gphoto-fig figcaption{font-size:13px;color:var(--muted);margin-top:6px}

.project{display:grid;gap:28px}
@media (min-width:900px){.project{grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start}}
.project__facts{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.project__facts dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0 0 18px;font-size:15px}
.project__facts dt{font-weight:700;color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;padding-top:2px}
.project__facts dd{margin:0}

.lbox{position:fixed;inset:0;z-index:1000;background:rgba(6,10,18,.94);display:flex;align-items:center;justify-content:center;padding:56px 64px}
.lbox[hidden]{display:none}
.lbox-open,.lbox-open body{overflow:hidden}
.lbox__fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.lbox__fig img{max-width:min(1400px,100%);max-height:calc(100vh - 150px);object-fit:contain;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lbox__fig figcaption{color:#dfe6ee;font-size:14.5px;text-align:center;max-width:70ch}
.lbox__btn[hidden]{display:none}  /* 2.44: a picture's own button (e.g. Quote me on this design) */
.lbox__fig:has(.lbox__btn:not([hidden])) img{max-height:calc(100vh - 210px)}
.lbox__x{position:absolute;top:12px;right:14px;width:44px;height:44px;border:0;border-radius:999px;background:rgba(255,255,255,.12);
  color:#fff;font-size:28px;line-height:1;cursor:pointer}
.lbox__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:64px;border:0;border-radius:10px;
  background:rgba(255,255,255,.1);color:#fff;font-size:40px;line-height:1;cursor:pointer}
.lbox__nav[hidden]{display:none}
.lbox__prev{left:10px}.lbox__next{right:10px}
.lbox__x:hover,.lbox__nav:hover{background:rgba(255,255,255,.22)}
.lbox__n{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);color:#aab6c4;font-size:13px}
@media (max-width:640px){.lbox{padding:56px 8px}.lbox__nav{width:40px;height:52px;font-size:32px;background:rgba(0,0,0,.35)}}
.prose .areachip__more,.prose .areachip__more:where(:hover){color:#fff}
.blk-projects .blk-actions{text-align:center;margin-top:26px}
.blk-projects>.blk-sample{max-width:720px;margin-inline:auto}

/* ---- 2.32 FAQ page, Tabs layout (partials/faq-tabs.php) ---- */
.faqt__tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;margin-bottom:32px;-webkit-overflow-scrolling:touch}
.faqt__tabs::-webkit-scrollbar{display:none}
.faqt__tab{flex:0 0 auto;padding:14px 2px;margin-bottom:-1px;border-bottom:3px solid transparent;color:var(--muted,#475467);font-weight:700;text-decoration:none;white-space:nowrap}
.faqt__tab:hover{color:var(--ink)}
.faqt__tab.is-on{color:var(--ink);border-bottom-color:var(--brand)}
.faqt__panel+.faqt__panel{margin-top:48px}
.faqt--js .faqt__panel+.faqt__panel{margin-top:0}
.faqt__name{margin:0 0 18px}
.faqt--js .faqt__name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.faqt__row{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.faqt__main{flex:999 1 560px;min-width:0}
.faqt__top{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px 28px;margin-bottom:28px}
.faqt__ans{border-left:3px solid var(--brand);padding:2px 0 2px 18px}
.faqt__ans h3{margin:0 0 6px;font-size:19px;line-height:1.3}
.faqt__text{color:var(--muted,#475467);line-height:1.6}
.faqt__text>:first-child{margin-top:0}.faqt__text>:last-child{margin-bottom:0}
.faqt__card{flex:1 1 260px;max-width:340px;background:var(--ink,#0e1726);color:#fff;border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:10px}
.faqt__card-title{margin:0;color:#fff;font-size:24px;line-height:1.1}
.faqt__card p{margin:0 0 8px;color:rgba(255,255,255,.8);line-height:1.55}
.faqt__card .btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)}
@media (max-width:760px){.faqt__tabs{gap:20px;margin-bottom:24px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);padding-right:24px}.faqt__card{max-width:none}}

/* ---- 2.33 Legal pages: three layouts, print, version and changes (pages/legal.php) ---- */
.legal__print-head{display:none}
.legal__bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end;margin-bottom:24px}
.legal__meta{margin-right:auto;color:var(--muted);font-size:14px}
.legal__row{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.legal__toc{flex:1 1 240px;max-width:290px;display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:12px;padding:14px;position:sticky;top:calc(var(--header-h,64px) + 16px)}
.legal__toc-head{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:4px 10px 8px}
.legal__toc a{display:flex;gap:10px;padding:7px 10px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:15px;line-height:1.35}
.legal__toc a span{color:var(--muted);min-width:20px}
.legal__toc a:hover{background:var(--soft);color:var(--brand)}
.legal__body{flex:999 1 560px;min-width:0;max-width:780px}
.legal__intro{font-size:1.08em;margin-bottom:12px}
.legal__sec{padding:22px 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--header-h,64px) + 20px)}
.legal__sec h2{margin-top:0}
.legal__n{color:var(--brand)}
.legal__narrow{max-width:860px}
.legal__short{background:var(--ink,#0e1726);color:#fff;border-radius:16px;padding:28px 30px 20px;margin-bottom:36px}
.legal__short-title{margin:0 0 4px;color:#fff}
.legal__short-note{margin:0 0 12px;color:rgba(255,255,255,.75)}
.legal__short ol{list-style:none;margin:0;padding:0;counter-reset:pt}
.legal__short li{counter-increment:pt;position:relative;padding:14px 0 14px 42px;border-top:1px solid rgba(255,255,255,.14);line-height:1.5}
.legal__short li::before{content:counter(pt);position:absolute;left:0;top:13px;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center}
.legal__short li strong{color:#fff}.legal__short li span{color:rgba(255,255,255,.8)}
.legal__full{margin:0 0 8px}
.legal__folds{display:flex;flex-direction:column;gap:10px}
.legal__fold{border:1px solid var(--line);border-radius:10px;padding:0 20px;background:#fff;scroll-margin-top:calc(var(--header-h,64px) + 20px)}
.legal__fold[open]{border-color:var(--ink,#0e1726)}
.legal__fold summary{cursor:pointer;list-style:none;padding:14px 0;display:flex;gap:14px;align-items:center}
.legal__fold summary::-webkit-details-marker{display:none}
.legal__fold summary h2{margin:0;font-size:18px;line-height:1.3}
.legal__fold summary::after{content:'+';margin-left:auto;color:var(--brand);font-size:22px;line-height:1}
.legal__fold[open] summary::after{content:'\2013'}
.legal__badge{flex:0 0 30px;height:30px;border-radius:8px;background:var(--soft);display:grid;place-items:center;font-size:14px;font-weight:700;color:var(--brand)}
.legal__fold .prose{padding:0 0 14px 44px}
.legal__history{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);max-width:860px;font-size:15px}
.legal__history h2{font-size:20px;margin:0 0 10px}
.legal__history ol{margin:0;padding-left:18px;color:var(--muted)}
.legal__history li{margin:6px 0}.legal__history strong{color:var(--ink)}
.legal__ch{display:block;font-size:14px}
@media (max-width:760px){.legal__toc{position:static;max-width:none}.legal__fold .prose{padding-left:0}}
/* Section: picker (List + details) - 2.34 */
.blk-picker__wrap{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;text-align:left}
.blk-picker__list{flex:1 1 260px;max-width:340px;border:1px solid var(--line,#e4e7ec);border-radius:14px;overflow:hidden;background:#fff}
.blk-picker .blk-picker__tab,.prose .blk-picker .blk-picker__tab{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line,#e4e7ec);color:var(--ink,#0e1726);font-weight:600;font-size:17px;line-height:1.25;text-decoration:none}
.blk-picker__tab:last-child{border-bottom:0}
.blk-picker__tab small{display:block;font-weight:500;font-size:13px;color:var(--muted,#667085);margin-top:2px}
.blk-picker .blk-picker__tab:hover{background:color-mix(in srgb,var(--ink,#0e1726) 5%,#fff);color:var(--ink,#0e1726)}
.blk-picker__arrow{font-size:22px;line-height:1;color:var(--muted,#98a2b3)}
.blk-picker--js .blk-picker__tab.is-on,.prose .blk-picker--js .blk-picker__tab.is-on{background:var(--ink,#0e1726);color:#fff}
.blk-picker--js .blk-picker__tab.is-on small,.blk-picker--js .blk-picker__tab.is-on .blk-picker__arrow{color:rgba(255,255,255,.75)}
.blk-picker__panels{flex:999 1 480px;min-width:0}
.blk-picker__panel+.blk-picker__panel{margin-top:56px;padding-top:40px;border-top:1px solid var(--line,#e4e7ec)}
.blk-picker--js .blk-picker__panel+.blk-picker__panel{margin-top:0;padding-top:0;border-top:0}
.blk-picker__img{aspect-ratio:16/8;border-radius:16px;overflow:hidden;background:#e9edf2;margin-bottom:22px}
.blk-picker .blk-picker__img img{width:100%;height:100%;max-width:none;object-fit:cover;display:block;margin:0;border-radius:0;box-shadow:none}
.blk-picker .blk-picker__tag{margin:0;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blk-accent-c,var(--brand))}
.blk-picker .blk-picker__title{margin:6px 0 12px;font-size:clamp(32px,4vw,46px);line-height:1;text-transform:uppercase}
.blk-picker__text{color:var(--muted,#475467);font-size:18px;line-height:1.6}
.blk-picker__text>:first-child{margin-top:0}.blk-picker__text>:last-child{margin-bottom:18px}
.blk-picker .blk-picker__points{margin:0 0 6px;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;max-width:640px}
.blk-picker__points li{position:relative;padding-left:22px;line-height:1.45}
.blk-picker__points li::before{content:'';position:absolute;left:0;top:.6em;width:10px;height:3px;background:var(--blk-accent-c,var(--brand))}
.blk-picker .blk-actions{margin-top:20px}
.blk-picker .blk-btn:not(.blk-btn--ghost){background:var(--blk-accent-c,var(--brand))}
.blk-picker .blk-btn:not(.blk-btn--ghost):hover{background:var(--blk-deep-c)}
@media (max-width:760px){
  .blk-picker__wrap{gap:20px}
  .blk-picker--js .blk-picker__list{flex:1 1 100%;max-width:none;display:flex;gap:8px;overflow-x:auto;border:0;border-radius:0;background:none;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 24px 2px 0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .blk-picker--js .blk-picker__list::-webkit-scrollbar{display:none}
  .blk-picker--js .blk-picker__tab,.prose .blk-picker--js .blk-picker__tab{flex:0 0 auto;border:1px solid var(--line,#d0d5dd);border-radius:99px;padding:9px 16px;font-size:15px;white-space:nowrap}
  .blk-picker--js .blk-picker__tab small,.blk-picker--js .blk-picker__arrow{display:none}
  .blk-picker__list{max-width:none;flex-basis:100%}
  .blk-picker .blk-picker__points{grid-template-columns:1fr}
  .blk-picker__text{font-size:17px}
}
/* Compact "Where we work" on service pages - 2.35 */
.areas-compact__head{margin-bottom:16px}
.areas-compact__head h2{margin:6px 0 0;font-size:clamp(24px,3vw,30px)}
.areas-compact .areas__also{font-size:15px;color:var(--muted,#475467);max-width:900px}
.areas-compact__call{margin:16px 0 0;font-size:15px;color:var(--muted,#475467)}
.areas-compact__call strong{color:var(--ink,#0e1726)}
@media print{
  .legal .container{max-width:none}
  .legal__print-title{display:block;font-size:24px;font-weight:700;color:#000;margin-bottom:4px}
  .legal__print-head{display:block;font-size:11px;color:#333;border-bottom:1px solid #999;padding-bottom:6px;margin-bottom:14px}
  .legal__bar,.legal__toc,.breadcrumbs,.page-hero,.hero-strip,.floaters,.faqt__card{display:none!important}
  .legal__row{display:block}.legal__body,.legal__narrow{max-width:none}
  .legal__short{background:none;color:#000;border:1px solid #999}
  .legal__short *{color:#000!important}.legal__short li::before{background:none;color:#000;border:1px solid #000}
  .legal__fold{border:0;padding:0}.legal__fold summary::after{display:none}.legal__fold .prose{padding-left:0}
  .legal__sec,.legal__fold{break-inside:auto}.legal h2{break-after:avoid}
  a[href^="#"]::after{content:none}
  .blk-picker__list{display:none!important}.blk-picker__panel[hidden]{display:block!important}
}