/* =====================================================================
   SVCS Platform - 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}

/* ---------------------------------------------------------------- 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{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{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;
  background:#fff;border:1px solid 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>a:hover{background:var(--soft);color:var(--brand)}
.submenu__item small{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:1px}
.submenu__heading{padding:8px 12px 4px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.submenu__divider{height:1px;background:var(--line);margin:6px 8px}
.submenu--deep{top:-9px;left:100%;margin-left:2px}

/* --- 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);
  background:#fff;border-top:1px solid 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}
.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;color:var(--muted);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(--brand);margin:0 0 12px;padding-bottom:9px;
  border-bottom:1px solid var(--line);
}
.mega__title a:hover{color:var(--brand-dark)}
.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 a:hover{background:var(--soft);color:var(--brand)}
.mega__links small{display:block;font-size:12.5px;color:var(--muted);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__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}
.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}}

/* ================================================================ 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);
  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{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.mnav__close{font-size:32px;line-height:1;width:44px;height:44px;color:var(--muted)}
.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{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:8px 8px 20px;-webkit-overflow-scrolling:touch}
.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{border-top:1px solid var(--line);padding:16px;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}
.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 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}
body.hv-7 .page-hero{padding-top:calc(var(--header-h) + 70px)}
@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}}

/* --- 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:#25d366;color:#fff}
.floater--wa:hover{background:#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{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
/* 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{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}
.footer__strip{background:rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.08)}
.footer__strip p{margin:0;padding-block:14px;font-size:13.5px;text-align:center}
.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}