/* =====================================================================
   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__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 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);
  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 .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}
/* 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))}
body.hv-7 .page-hero.page-hero--sized,body.hv-11 .page-hero.page-hero--sized{padding-top:calc(var(--hero-lift) + 48px)}
/* 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)}
.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>h2,.blk-steps>.blk-kicker{text-align:center}
.blk-steps>h2{margin-bottom:28px}
.blk-steps 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 li,.blk-steps 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 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 strong{display:block;font-size:17px;margin-bottom:6px}
.blk-steps span{color:#555;font-size:15px}

/* 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:#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,.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__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}