/* ==========================================================================
   Multistock Building Resources
   Design system: Multistock navy base, cool paper, logo-blue accent
   (token names keep the 'brass' label from the source system)
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
:root {
  --ink:        #060B33;
  --ink-soft:   #0D1550;
  --ink-mute:   #474E6B;
  --paper:      #FAFBFE;
  --paper-warm: #EEF1FA;
  --white:      #FFFFFF;
  --brass:      #1A34D1;
  --brass-lt:   #A3B3FF;
  --brass-dk:   #001080;
  --brass-ink:  #001080;   /* small text on light surfaces — WCAG AA */
  --line:       rgba(6, 11, 51, .18);
  --line-dark:  rgba(255, 255, 255, .28);

  --font-display: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --container: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(76px, 9vw, 132px);
  --stack: clamp(18px, 2vw, 28px);   /* one gap value everywhere */
  --radius: 2px;

  --shadow-sm: 0 1px 2px rgba(20, 23, 26, .06), 0 4px 16px rgba(20, 23, 26, .05);
  --shadow-md: 0 8px 30px rgba(20, 23, 26, .10);
  --shadow-lg: 0 24px 70px rgba(20, 23, 26, .16);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --header-h: 98px;
}

/* 2. Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:target, [id] { scroll-margin-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--brass); color: #fff; }

/* 3. Typography --------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -.025em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 5.1rem); font-weight: 500; }
h2 { font-size: clamp(2rem, 3.9vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
h4 { font-size: 1.07rem; letter-spacing: -.01em; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--ink-soft); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .7em;
  font-size: .72rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; color: var(--brass-ink); margin-bottom: 1.2em;
}
.eyebrow::before {
  content: ""; width: 36px; height: 1.5px; background: var(--brass-ink); opacity: .8;
}
.eyebrow.is-centered { justify-content: center; }

.text-muted { color: var(--ink-mute); }

/* 4. Layout ------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: 1560px; }
.container-narrow { max-width: 820px; }
.section { padding-block: var(--section-y); }
.section-sm { padding-block: clamp(52px, 6vw, 84px); }
.section-head { max-width: 760px; margin-bottom: clamp(44px, 5vw, 76px); }
.section-head.is-centered { margin-inline: auto; text-align: center; }
.bg-ink { background: var(--ink); color: var(--paper); }
.bg-ink h1, .bg-ink h2, .bg-ink h3 { color: var(--white); }
.bg-ink .lead, .bg-ink p { color: rgba(246, 244, 241, .88); }
.bg-warm { background: var(--paper-warm); }
.bg-white { background: var(--white); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* 5. Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--white); --btn-bd: var(--ink);
  position: relative; display: inline-flex; align-items: center; gap: .75em;
  padding: 1.05em 2.1em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--radius);
  font-family: var(--font-body); font-size: .85rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease), transform .3s var(--ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--brass); transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: #fff; border-color: var(--brass); }
.btn:active { transform: translateY(1px); }
.btn .btn-arrow { transition: transform .45s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(5px); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn-ghost:hover { border-color: var(--brass); }
.btn-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.4); }
.btn-paper { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-bd: var(--paper); }
.btn-brass { --btn-bg: var(--brass); --btn-fg: #fff; --btn-bd: var(--brass); }
.btn-brass::after { background: var(--ink); }
.btn-brass:hover { border-color: var(--ink); }
.btn-sm { padding: .8em 1.5em; font-size: .74rem; }

.link-underline {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .82rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  padding-bottom: .35em; border-bottom: 1px solid var(--line);
  transition: border-color .4s var(--ease), color .4s var(--ease), gap .4s var(--ease);
}
.link-underline:hover { color: var(--brass-ink); border-color: var(--brass-ink); gap: .95em; }

/* 6. Header ------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: rgba(246, 244, 241, 0);
  transition: background .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: rgba(250, 251, 254, .97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom-color: var(--line);
}
.site-header { transition: background .45s var(--ease), box-shadow .45s var(--ease),
               border-color .45s var(--ease), transform .5s var(--ease); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  height: var(--header-h);
  transition: height .45s var(--ease);
}
.site-header.is-solid { --header-h: 76px; }
.site-header.is-solid .brand img { height: clamp(40px, 3.3vw, 50px); }

.brand { display: block; flex-shrink: 0; }
.brand img {
  height: clamp(44px, 3.9vw, 60px); width: auto; max-width: 62vw;
  transition: height .45s var(--ease);
}
.brand .logo-light { display: none; }

.nav { display: flex; align-items: center; gap: clamp(.85rem, 2vw, 2.2rem); }
.nav > a, .nav-dd > button {
  position: relative; padding: .4em 0;
  font-size: .81rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
  transition: color .35s var(--ease);
}
.nav a::after, .nav-dd > button::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--brass); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after,
.nav-dd:hover > button::after { transform: scaleX(1); transform-origin: left; }
.nav a:hover, .nav-dd:hover > button { color: var(--brass-ink); }
.nav a[aria-current="page"] { color: var(--brass-ink); }

.nav-dd { position: relative; }
.nav-dd > button { display: inline-flex; align-items: center; gap: .45em; }
.nav-dd > button svg { width: 9px; transition: transform .4s var(--ease); }
.nav-dd:hover > button svg { transform: rotate(180deg); }
.nav-dd-menu {
  /* Fixed + viewport-centred so a wide panel can never run off the edge
     on narrow desktop widths */
  position: fixed; top: calc(var(--header-h) + 8px); left: 50%; translate: -50% 0;
  min-width: 248px; max-width: calc(100vw - 2 * var(--gutter)); padding: .6rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
}
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dd-menu::before {
  content: ""; position: absolute; inset: -22px 0 100% 0;
}
.nav-dd-menu a {
  display: flex; flex-direction: column; gap: .2rem; padding: .8rem 1rem;
  border-radius: var(--radius); text-transform: none; letter-spacing: 0;
  font-size: .95rem; font-weight: 500;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.nav-dd-menu a span { font-size: .78rem; color: var(--ink-mute); font-weight: 400; }
.nav-dd-menu a::after { display: none; }
.nav-dd-menu a:hover { background: var(--paper-warm); color: var(--brass-ink); }
.nav-dd-menu a:hover span { color: var(--ink-mute); }

.header-actions { display: flex; align-items: center; gap: clamp(.9rem, 1.4vw, 1.5rem); }

/* click-to-call in the header */
.header-phone {
  display: inline-flex; align-items: center; gap: .55em; white-space: nowrap;
  font-size: .86rem; font-weight: 600; letter-spacing: .03em; color: var(--ink);
  transition: color .35s var(--ease);
}
.header-phone svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.header-phone:hover { color: var(--brass-ink); }
.has-hero .site-header:not(.is-solid) .header-phone { color: rgba(255, 255, 255, .94); }
.has-hero .site-header:not(.is-solid) .header-phone:hover { color: var(--brass-lt); }
@media (max-width: 1180px) { .header-phone span { display: none; } }
/* between the mobile breakpoint and ~980px the nav, phone and CTA together
   are wider than the bar, so the CTA steps out first */
@media (max-width: 980px) { .header-actions .btn { display: none; } }
@media (max-width: 900px)  { .header-phone { display: none; } }

.nav-toggle {
  display: none; width: 46px; height: 46px; position: relative;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.nav-toggle span {
  position: absolute; left: 13px; width: 20px; height: 1.5px; background: var(--ink);
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  background: var(--ink); color: var(--paper);
  padding: calc(var(--header-h) + 24px) var(--gutter) 44px;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
  overflow-y: auto;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }
.mobile-nav a { display: block; }
.mobile-nav-links a {
  font-family: var(--font-display); font-size: clamp(1.9rem, 7vw, 2.6rem);
  font-weight: 500; letter-spacing: -.02em; padding: .28em 0;
  border-bottom: 1px solid var(--line-dark);
  display: flex; align-items: center; justify-content: space-between;
}
.mobile-nav-links a span { font-size: .7rem; letter-spacing: .2em; color: var(--brass); font-family: var(--font-body); }
.mobile-nav-foot { padding-top: 32px; font-size: .9rem; color: rgba(246,244,241,.65); }
.mobile-nav-foot a { color: var(--brass-lt); display: inline; }
.mobile-nav-foot a[href^="tel:"] { font-size: 1.15rem; font-weight: 600; letter-spacing: .02em; }

/* 6b. Header over a hero image ----------------------------------------- */
.has-hero .site-header:not(.is-solid) .brand .logo-dark { display: none; }
.has-hero .site-header:not(.is-solid) .brand .logo-light { display: block; }
.has-hero .site-header:not(.is-solid) .nav > a,
.has-hero .site-header:not(.is-solid) .nav-dd > button { color: rgba(255, 255, 255, .92); }
.has-hero .site-header:not(.is-solid) .nav > a:hover,
.has-hero .site-header:not(.is-solid) .nav-dd:hover > button { color: var(--brass-lt); }
.has-hero .site-header:not(.is-solid) .nav > a[aria-current="page"] { color: var(--brass-lt); }
.has-hero .site-header:not(.is-solid) .nav a::after,
.has-hero .site-header:not(.is-solid) .nav-dd > button::after { background: var(--brass-lt); }
.has-hero .site-header:not(.is-solid) .header-actions .btn {
  --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .45);
}
.has-hero .site-header:not(.is-solid) .nav-toggle { border-color: rgba(255, 255, 255, .4); }
.has-hero .site-header:not(.is-solid) .nav-toggle span { background: #fff; }
.mobile-nav.is-open ~ * .nav-toggle span, .nav-toggle.is-open span { background: #fff; }

/* 7. Hero --------------------------------------------------------------- */
.hero { position: relative; min-height: min(92vh, 880px); display: flex; align-items: flex-end;
        overflow: hidden; background: var(--ink); }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform; transform: translateZ(0); backface-visibility: hidden;
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(10,12,14,.74) 0%, rgba(10,12,14,.34) 48%, rgba(10,12,14,.04) 80%),
    linear-gradient(185deg, rgba(10,12,14,.50) 0%, rgba(10,12,14,.14) 42%, rgba(10,12,14,.82) 100%);
}
.hero-body {
  position: relative; z-index: 2; width: 100%; color: #fff;
  padding-block: calc(var(--header-h) + clamp(44px, 7vh, 86px)) clamp(56px, 7vh, 88px);
}
.hero h1 { color: #fff; max-width: 15ch; margin-bottom: .45em; }
.hero .eyebrow { color: var(--brass-lt); }
.hero .eyebrow::before { background: var(--brass-lt); }
.hero-lead { max-width: 54ch; font-size: clamp(1.05rem, 1.4vw, 1.26rem); color: rgba(255,255,255,.95); margin-bottom: 2.4em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-bar {
  position: relative; z-index: 2; margin-top: clamp(48px, 7vh, 80px);
  border-top: 1px solid rgba(255,255,255,.2); padding-top: 28px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.hero-bar div { color: rgba(255,255,255,.85); font-size: .86rem; line-height: 1.45; }
.hero-bar strong {
  display: block; font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 500; color: #fff; letter-spacing: -.02em; margin-bottom: .15em;
}
.hero-scroll {
  position: absolute; right: var(--gutter); bottom: 42px; z-index: 3;
  writing-mode: vertical-rl; font-size: .68rem; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(255,255,255,.78); display: flex; align-items: center; gap: 14px;
}
.hero-scroll::after { content: ""; width: 1px; height: 54px; background: rgba(255,255,255,.4); }

/* Page banner (interior pages) */
.page-hero { position: relative; display: flex; align-items: flex-end; min-height: min(62vh, 580px);
             background: var(--ink); overflow: hidden; }
.page-hero .hero-media::after {
  background: linear-gradient(180deg, rgba(10,12,14,.62) 0%, rgba(10,12,14,.26) 46%, rgba(10,12,14,.78) 100%);
}
.page-hero-body {
  position: relative; z-index: 2; width: 100%; color: #fff;
  padding-block: calc(var(--header-h) + clamp(44px, 7vh, 82px)) clamp(48px, 6vh, 68px);
}
.page-hero h1 { color: #fff; max-width: 18ch; margin-bottom: .3em; }
.page-hero p { max-width: 58ch; color: rgba(255,255,255,.94); }
.breadcrumb { display: flex; align-items: center; gap: .6em; font-size: .76rem; letter-spacing: .14em;
              text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: 1.6em; }
.breadcrumb a:hover { color: var(--brass-lt); }
.breadcrumb span { opacity: .5; }

/* Contact: narrower details column beside a wider form, collapsing cleanly */
.split.split-contact { align-items: flex-start; grid-template-columns: .85fr 1.15fr; }

/* Section header with a link pushed to the right */
.section-head-row {
  max-width: none; display: flex; flex-wrap: wrap; gap: 2rem;
  justify-content: space-between; align-items: flex-end;
}
.section-head-row-text { max-width: 620px; }

/* 8. Split media -------------------------------------------------------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 84px); align-items: center;
}
/* Grid and flex children default to min-width:auto, which lets long
   content force the page wider than the screen. */
.split > *, .card-grid > *, .field-grid > *, .cta-inner > * { min-width: 0; }
.split.is-reverse .split-media { order: 2; }
.split-media { position: relative; }
.split-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.split-media.is-tall img { aspect-ratio: 4 / 5; height: auto; }
.split-body { max-width: 56ch; }
.media-frame { position: relative; }
.media-frame::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  border: 1.5px solid var(--brass); opacity: .75; border-radius: var(--radius); z-index: -1;
  transform-origin: left bottom;
}
/* armed by JS only, so a no-JS page keeps the frame visible */
.media-frame.frame-armed::before { opacity: 0; transform: scale(.965) translateY(14px); }
.media-frame.frame-in::before {
  opacity: .75; transform: none;
  transition: opacity .9s var(--ease) .25s, transform 1s var(--ease) .25s;
}
.media-stack img { will-change: clip-path, transform; }
.media-stack { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--stack); align-items: start; }
.media-stack img:nth-child(1) { aspect-ratio: 3 / 4; height: auto; }
.media-stack img:nth-child(2) { aspect-ratio: 1 / 1; height: auto; margin-top: clamp(32px, 6vw, 72px); }
.media-stack img { width: 100%; object-fit: cover; border-radius: var(--radius); }

.badge-float {
  position: absolute; right: -16px; bottom: -22px; z-index: 3;
  background: var(--brass); color: #fff; padding: 1.3rem 1.6rem;
  text-align: center; border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.badge-float strong { display: block; font-family: var(--font-display); font-size: 2.1rem; font-weight: 500; line-height: 1; }
.badge-float span { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; opacity: .9; }

/* 9. Service cards ------------------------------------------------------ */
.card-grid { display: grid; gap: var(--stack); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }

.service-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 420px; padding: clamp(24px, 2.6vw, 34px); overflow: hidden;
  border-radius: var(--radius); color: #fff; isolation: isolate;
}
.service-card img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.service-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,12,14,.18) 12%, rgba(10,12,14,.55) 58%, rgba(10,12,14,.92) 100%);
  transition: background .5s var(--ease);
}
.service-card:hover img { transform: scale(1.06); }
.service-card:hover::after { background: linear-gradient(180deg, rgba(10,12,14,.3) 10%, rgba(14,11,8,.9) 100%); }
.service-card h3 { color: #fff; margin-bottom: .35em; }
.service-card p { font-size: .97rem; color: rgba(255,255,255,.9); margin-bottom: 1.2em; }
.service-card .link-underline { color: #fff; border-color: rgba(255,255,255,.4); align-self: flex-start; }
.service-card:hover .link-underline { color: var(--brass-lt); border-color: var(--brass-lt); }
.service-card .card-index {
  position: absolute; top: clamp(22px, 2.4vw, 30px); left: clamp(24px, 2.6vw, 34px);
  font-family: var(--font-display); font-size: .8rem; letter-spacing: .2em; color: rgba(255,255,255,.72);
}

/* Feature tiles */
.feature { padding: clamp(26px, 3vw, 38px); background: var(--white); border: 1px solid var(--line);
           border-radius: var(--radius); height: 100%; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.feature-icon { width: 46px; height: 46px; margin-bottom: 1.4rem; color: var(--brass); }
.feature-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.25; }
.feature h3 { font-size: 1.16rem; margin-bottom: .5em; }
.feature p { font-size: 1rem; color: var(--ink-mute); }

/* 10. Stats ------------------------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 48px); }
.stat { border-top: 1px solid var(--line); padding-top: 22px; }
.bg-ink .stat { border-color: var(--line-dark); }
.stat strong {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem); line-height: 1; letter-spacing: -.03em;
  color: var(--brass); margin-bottom: .22em;
}
.stat > span { font-size: .89rem; color: var(--ink-mute); letter-spacing: .02em; }
.bg-ink .stat > span { color: rgba(246,244,241,.78); }

/* 11. Process timeline -------------------------------------------------- */
.process { position: relative; display: grid; gap: 0; }
.process-track { position: absolute; left: 27px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.bg-ink .process-track { background: var(--line-dark); }
.process-progress {
  position: absolute; left: 27px; top: 10px; bottom: 10px; width: 1px;
  background: var(--brass);
  transform: scaleY(0); transform-origin: top; will-change: transform;
}
.process-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: clamp(20px, 3vw, 40px);
                padding-block: clamp(22px, 3vw, 34px); }
.process-num {
  position: relative; z-index: 2; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line);
  font-family: var(--font-display); font-size: .95rem; color: var(--ink);
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.bg-ink .process-num { background: var(--ink); border-color: var(--line-dark); color: #fff; }
.process-step.is-active .process-num { background: var(--brass); border-color: var(--brass); color: #fff; }
.process-step h3 { margin-bottom: .35em; }
.process-step p { color: var(--ink-mute); max-width: 62ch; margin: 0; }
.bg-ink .process-step p { color: rgba(246,244,241,.84); }

/* 12. Reviews — 3D coverflow -------------------------------------------- */
.reviews {
  position: relative;
  /* the neighbouring cards sit outside the container on small screens;
     clip horizontally only so their drop shadows still show vertically */
  overflow-x: clip; overflow-y: visible;
  padding-inline: 2px;
}
.review-stage {
  position: relative; height: 330px;
  margin-inline: auto; max-width: 1180px;
}
.review-card {
  position: absolute; top: 0; left: 50%; width: min(470px, 86%);
  margin: 0; padding: clamp(24px, 2.6vw, 34px);
  border-radius: 10px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(26,52,209,.08) 0%, transparent 58%),
    linear-gradient(168deg, #FFFFFF 0%, var(--paper) 62%, var(--paper-warm) 100%);
  color: var(--ink);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 6px rgba(0,0,0,.22),
    0 18px 40px rgba(0,0,0,.34),
    0 44px 90px rgba(0,0,0,.30);
  transform-origin: center center;
  cursor: pointer;
  transform: translate(-50%, 0);
}
/* hairline of brass along the top edge of the front card */
.review-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, transparent, var(--brass) 22%, var(--brass-lt) 50%, var(--brass) 78%, transparent);
  opacity: 0; transition: opacity .5s var(--ease);
}
.review-card.is-active::before { opacity: .95; }
.review-card.is-active { cursor: default; }
/* neighbours sit back: softened and dimmed, so the front card reads clearly */
.review-card:not(.is-active) { filter: blur(1.4px) saturate(.85); }

/* stars + source mark across the top of each card */
.review-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.review-stars { display: inline-flex; gap: 3px; }
.review-stars svg { width: 15px; height: 15px; fill: #F5A623; flex-shrink: 0; }
.review-src { display: inline-flex; }
.review-src svg { width: 17px; height: 17px; }

/* rating summary beneath the section heading */
.review-score {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.3rem;
  padding: .55em 1.1em; border: 1px solid var(--line-dark); border-radius: 100px;
  color: rgba(246, 244, 241, .9); transition: background .4s var(--ease), border-color .4s var(--ease);
}
.review-score:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.4); }
.review-score strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: #fff; }
.review-score .review-stars svg { width: 16px; height: 16px; }
.review-score > span:last-child { font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(246,244,241,.65); }

.review-mark { display: none; }
.review-card blockquote {
  margin: 0; font-size: clamp(.88rem, 1vw, .97rem); line-height: 1.6;
  color: var(--ink-soft); text-wrap: pretty; overflow-wrap: break-word;
}
.review-by {
  display: flex; align-items: center; gap: .85rem;
  margin-top: 1.2rem; padding-top: 1.1rem;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, var(--line), rgba(20,23,26,.04)) 1;
}
.review-avatar {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--brass-lt), var(--brass-dk));
  color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 4px 10px rgba(0,16,128,.35);
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 500;
}
.review-who { display: flex; flex-direction: column; gap: .1em; }
.review-who strong {
  font-family: var(--font-display); font-weight: 500; font-size: .97rem;
  letter-spacing: -.01em; color: var(--ink);
}
.review-who span {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-ink);
}

/* controls */
.quote-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap; margin-top: clamp(22px, 2.6vw, 32px);
}
.quote-btn {
  position: relative; width: 48px; height: 48px; flex-shrink: 0;
  border: 1px solid var(--line-dark); border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.quote-btn:hover { background: var(--brass); border-color: var(--brass); }
.quote-btn svg { width: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.quote-count {
  margin-left: .5rem; display: flex; align-items: baseline; gap: .35em;
  font-family: var(--font-display); font-size: .95rem; letter-spacing: .04em;
  color: rgba(246, 244, 241, .5);
}
.quote-count b { font-weight: 500; font-size: 1.25rem; color: var(--brass-lt); }

.review-google {
  margin-left: clamp(8px, 2vw, 28px); display: inline-flex; align-items: center; gap: .6em;
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(246, 244, 241, .9);
  padding: .75em 1.15em; border: 1px solid var(--line-dark); border-radius: 100px;
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
  white-space: nowrap;
}
.review-google:hover { background: #fff; color: var(--ink); border-color: #fff; }
.review-g { width: 17px; height: 17px; flex-shrink: 0; }

@media (max-width: 1080px) {
  .review-stage { height: 360px; }
  .review-card { width: min(440px, 76%); }
}
@media (max-width: 680px) {
  .review-stage { height: 400px; }
  .review-card { width: 84%; padding: 22px 20px; }
  /* stars + source mark across the top of each card */
.review-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.review-stars { display: inline-flex; gap: 3px; }
.review-stars svg { width: 15px; height: 15px; fill: #F5A623; flex-shrink: 0; }
.review-src { display: inline-flex; }
.review-src svg { width: 17px; height: 17px; }

/* rating summary beneath the section heading */
.review-score {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.3rem;
  padding: .55em 1.1em; border: 1px solid var(--line-dark); border-radius: 100px;
  color: rgba(246, 244, 241, .9); transition: background .4s var(--ease), border-color .4s var(--ease);
}
.review-score:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.4); }
.review-score strong { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: #fff; }
.review-score .review-stars svg { width: 16px; height: 16px; }
.review-score > span:last-child { font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(246,244,241,.65); }

.review-mark { font-size: 2.8rem; }
  .quote-nav { gap: 10px; }
  .review-google { margin-left: 0; width: 100%; justify-content: center; margin-top: .6rem; }
}
@media (max-width: 380px) { .review-stage { height: 450px; } }

/* 13. Portfolio --------------------------------------------------------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(30px, 4vw, 48px); }
.filter-btn {
  padding: .72em 1.5em; border: 1px solid var(--line); border-radius: 100px;
  font-size: .79rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-mute);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.filter-btn:hover { border-color: var(--brass-ink); color: var(--brass-ink); }
.filter-btn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter-count { font-size: .68em; opacity: .55; margin-left: .5em; }

.masonry { columns: 3; column-gap: var(--stack); }
.masonry-item {
  break-inside: avoid; margin-bottom: var(--stack);
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  background: var(--paper-warm); cursor: zoom-in;
}
.masonry-item img { width: 100%; height: auto; transition: transform 1s var(--ease), filter .6s var(--ease); }
.masonry-item::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,12,14,.78) 100%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.masonry-item:hover img { transform: scale(1.045); }
.masonry-item:hover::after { opacity: 1; }
.masonry-cap {
  position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; color: #fff;
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.masonry-item:hover .masonry-cap { opacity: 1; transform: translateY(0); }
.masonry-cap strong { display: block; font-family: var(--font-display); font-size: 1.08rem; font-weight: 500; }
.masonry-cap span { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-lt); }
.masonry-item.is-hidden { display: none; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(9, 10, 12, .96); padding: clamp(16px, 4vw, 54px);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-figure {
  width: min(1180px, 100%); max-height: 100%; min-width: 0;
  display: flex; flex-direction: column; gap: 14px; margin: 0;
}
.lightbox-figure > img { max-height: calc(100vh - 230px); max-width: 100%; width: auto; margin-inline: auto; object-fit: contain; border-radius: var(--radius); }
.lightbox-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; color: rgba(255,255,255,.75); font-size: .85rem; }
.lightbox-meta strong { color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; }
.lightbox-meta em { font-style: normal; letter-spacing: .14em; text-transform: uppercase; font-size: .7rem; color: var(--brass-lt); }
.lightbox-btn {
  position: absolute; z-index: 3; width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); color: #fff; display: grid; place-items: center;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.lightbox-btn:hover { background: var(--brass); border-color: var(--brass); }
.lightbox-btn svg { width: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.lightbox-close { top: clamp(16px, 3vw, 34px); right: clamp(16px, 3vw, 34px); }
.lightbox-prev { left: clamp(10px, 2.4vw, 34px); top: 50%; translate: 0 -50%; }
.lightbox-next { right: clamp(10px, 2.4vw, 34px); top: 50%; translate: 0 -50%; }

/* On two-column FAQ sections the question list starts above the heading
   beside it. Drop it so the first question lines up with the title,
   clearing the eyebrow label's block (0.72rem text + 1.2em margin). */
@media (min-width: 901px) {
  .split > .accordion { margin-top: 2.8rem; }
}

/* 14. Accordion --------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-trigger {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem;
  padding: clamp(20px, 2.4vw, 30px) 0; text-align: left;
  font-family: var(--font-display); font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 500;
  letter-spacing: -.015em; transition: color .35s var(--ease);
}
.acc-trigger:hover { color: var(--brass-ink); }
.acc-icon { position: relative; flex-shrink: 0; width: 20px; height: 20px; margin-top: .3em; }
.acc-icon::before, .acc-icon::after {
  content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform .45s var(--ease);
}
.acc-icon::after { transform: rotate(90deg); }
.acc-item.is-open .acc-icon::after { transform: rotate(0); }
.acc-item.is-open .acc-trigger { color: var(--brass-ink); }
.acc-panel { overflow: hidden; height: 0; }
.acc-panel-inner { padding-bottom: clamp(20px, 2.4vw, 30px); max-width: 72ch; color: var(--ink-mute); }

/* FAQ aside portrait */
.faq-portrait {
  /* <figure> carries a default 40px side margin, which pushed the photo
     out of line with the copy above it */
  margin: clamp(32px, 4vw, 48px) 0 0; max-width: 440px; width: 100%;
}
.faq-portrait img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--radius); display: block;
}
.faq-portrait figcaption { margin-top: 1rem; }
.faq-portrait strong {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: 1.14rem; letter-spacing: -.01em;
}
.faq-portrait span {
  display: block; font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brass-ink); margin-top: .25em;
}

/* 15. Forms ------------------------------------------------------------- */
.form-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
             padding: clamp(26px, 3.4vw, 48px); box-shadow: var(--shadow-sm); }
.form-steps { display: flex; align-items: center; gap: 10px; margin-bottom: clamp(26px, 3vw, 36px); }
.form-step-pip { display: flex; align-items: center; gap: 10px; font-size: .74rem; letter-spacing: .14em;
                 text-transform: uppercase; color: var(--ink-mute); }
.form-step-pip b { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
                   display: grid; place-items: center; font-weight: 600; font-size: .72rem;
                   transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.form-step-pip.is-active b { background: var(--brass); border-color: var(--brass); color: #fff; }
.form-step-pip.is-done b { background: var(--ink); border-color: var(--ink); color: #fff; }
.form-step-line { flex: 1; height: 1px; background: var(--line); }

.form-panel { display: none; }
.form-panel.is-active { display: block; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--stack); }
.field { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 18px; }
.field.is-full { grid-column: 1 / -1; }
.field label { font-size: .77rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.field label .req { color: var(--brass-ink); }
.field input, .field textarea, .field select {
  width: 100%; padding: .95em 1.1em; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brass); background: var(--white);
  box-shadow: 0 0 0 3px rgba(26, 52, 209, .16);
}
.field.has-error input, .field.has-error textarea { border-color: #C0433A; }
.field-error { font-size: .78rem; color: #C0433A; display: none; }
.field.has-error .field-error { display: block; }

.chip-set { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: block; padding: .72em 1.35em; border: 1px solid var(--line); border-radius: 100px;
  font-size: .82rem; cursor: pointer;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(26,52,209,.3); }
.chip span:hover { border-color: var(--brass); }

.form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; }
.form-note { font-size: .82rem; color: var(--ink-mute); }
.form-status { margin-top: 18px; padding: 1em 1.2em; border-radius: var(--radius); font-size: .92rem; display: none; }
.form-status.is-ok { display: block; background: rgba(60, 130, 90, .1); border: 1px solid rgba(60,130,90,.3); }
.form-status.is-err { display: block; background: rgba(192, 67, 58, .08); border: 1px solid rgba(192,67,58,.28); }
.hp-field { position: absolute; left: -9999px; opacity: 0; }

/* Map: responsive by aspect ratio, and the Google embed is only fetched
   as it comes into range so the page never waits on it */
.map-embed {
  position: relative; aspect-ratio: 21 / 8;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--paper-warm);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.map-placeholder {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem; padding: clamp(20px, 4vw, 40px); text-align: center;
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(20,23,26,.045) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(20,23,26,.045) 38px 39px),
    var(--paper-warm);
  transition: opacity .5s var(--ease), visibility .5s;
}
.map-embed.is-loaded .map-placeholder { opacity: 0; visibility: hidden; }
.map-pin { width: 38px; height: 38px; color: var(--brass-ink); }
.map-pin svg { width: 100%; height: 100%; }
.map-address {
  display: flex; flex-direction: column; gap: .2em;
  font-size: .95rem; color: var(--ink-mute); line-height: 1.5;
}
.map-address strong {
  font-family: var(--font-display); font-weight: 500; font-size: 1.1rem;
  letter-spacing: -.01em; color: var(--ink);
}
.map-cta {
  font-size: .76rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brass-ink);
  padding-bottom: .3em; border-bottom: 1px solid currentColor;
}
.map-placeholder:hover .map-cta { color: var(--ink); }

@media (max-width: 1080px) { .map-embed { aspect-ratio: 16 / 9; } }
@media (max-width: 760px)  { .map-embed { aspect-ratio: 4 / 3; } }
@media (max-width: 480px)  { .map-embed { aspect-ratio: 1 / 1; } }

/* 16. Contact details --------------------------------------------------- */
.contact-list { display: grid; gap: 2px; }
.contact-item { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.bg-ink .contact-item { border-color: var(--line-dark); }
.contact-item:first-child { border-top: 1px solid var(--line); }
.bg-ink .contact-item:first-child { border-color: var(--line-dark); }
.contact-icon { flex-shrink: 0; width: 22px; color: var(--brass); margin-top: 4px; }
.contact-icon svg { width: 100%; stroke: currentColor; fill: none; stroke-width: 1.4; }
.contact-item h4 { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
                   color: var(--ink-mute); margin-bottom: .35em; font-family: var(--font-body); font-weight: 600; }
.bg-ink .contact-item h4 { color: rgba(246,244,241,.72); }
.contact-item p, .contact-item a { font-size: 1.02rem; margin: 0; }
.contact-item a:hover { color: var(--brass-ink); }

/* 17. Team -------------------------------------------------------------- */
.team-card { text-align: left; }
.team-card .team-photo { position: relative; overflow: hidden; border-radius: var(--radius); margin-bottom: 1.1rem; background: var(--paper-warm); }
.team-card img { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; transition: transform 1s var(--ease), filter .6s var(--ease); }
.team-card:hover img { transform: scale(1.05); }
.team-card h3 { font-size: 1.14rem; margin-bottom: .1em; }
.team-card span { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); }

/* 18. CTA band ---------------------------------------------------------- */
.cta-band { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.cta-band-media { position: absolute; inset: 0; z-index: 0; opacity: .3; }
.cta-band-media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band .container { position: relative; z-index: 2; }
.cta-band h2 { color: #fff; max-width: 18ch; }
.cta-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: clamp(26px, 4vw, 56px); }
.cta-inner > div:first-child { max-width: 44ch; }

/* 19. Accreditation strip ----------------------------------------------- */
.accred { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 5vw, 64px); }
.accred img { height: 52px; width: auto; opacity: 1;
              transition: transform .4s var(--ease); }
.accred img:hover { transform: translateY(-3px); }
.accred-note { font-size: .88rem; color: var(--ink-mute); letter-spacing: .04em; }

/* 20. Footer ------------------------------------------------------------ */
.site-footer { background: var(--ink); color: rgba(246,244,241,.84); padding-top: clamp(60px, 7vw, 96px); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: clamp(28px, 4vw, 56px); padding-bottom: clamp(44px, 5vw, 64px); }
.site-footer .brand img { height: 56px; width: auto; margin-bottom: 1.7rem; }
/* The logo is 48px tall against a 9px heading cap, so matching their box
   tops left it sitting 18px low. Lift it so the centres line up and the
   top of the footer reads as one row. */
@media (min-width: 901px) {
  .site-footer .brand { display: block; margin-top: -18px; }
}
/* stacked, the logo dominates the column at full size */
@media (max-width: 680px) { .site-footer .brand img { height: 38px; margin-bottom: 1.4rem; } }
.footer-blurb { font-size: .96rem; max-width: 42ch; }
.footer-col h4 { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #fff;
                 font-family: var(--font-body); font-weight: 600; margin-bottom: 1.3em; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .72rem; }
.footer-col a { font-size: .97rem; transition: color .35s var(--ease), padding-left .35s var(--ease); }
.footer-col a:hover { color: var(--brass); padding-left: 5px; }
.footer-social { display: flex; align-items: center; gap: 10px; margin-top: 1.4rem; }
.footer-social a {
  width: 42px; height: 42px; border: 1px solid var(--line-dark); border-radius: 50%;
  display: grid; place-items: center; color: rgba(246,244,241,.8);
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.footer-social a:hover { background: var(--brass); border-color: var(--brass); color: #fff; transform: translateY(-3px); }

/* Social icons in their own brand colours, filling in on hover */
.footer-social .soc-fb { color: #1877F2; }
.footer-social .soc-li { color: #0A66C2; }
.footer-social .soc-ig svg path { fill: url(#igGrad); transition: fill .4s var(--ease); }

.footer-social .soc-fb:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.footer-social .soc-li:hover { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.footer-social .soc-ig:hover {
  background: linear-gradient(45deg, #FFD521 0%, #F50000 30%, #B900B4 62%, #4C68D7 100%);
  border-color: transparent;
}
.footer-social .soc-ig:hover svg path { fill: #fff; }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; }
/* Each brand mark covers a different share of its 24x24 box: Facebook and
   Instagram are inset by ~2 units, LinkedIn fills the lot. Sizing them
   equally made LinkedIn render 21% bigger, so it is scaled to match. */
.footer-social .soc-li svg { width: 14px; height: 14px; }
.footer-licence { font-size: .84rem; line-height: 1.8; color: rgba(246,244,241,.74); }
.footer-licence strong { color: rgba(246,244,241,.8); font-weight: 500; }
.footer-bottom {
  border-top: 1px solid var(--line-dark); padding-block: 26px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: .84rem; color: rgba(246,244,241,.68);
}
.footer-bottom a:hover { color: var(--brass); }
.footer-credit { white-space: nowrap; }
.footer-credit::before {
  content: "/"; margin-inline: .7em .6em; color: rgba(246, 244, 241, .35);
}
@media (max-width: 560px) {
  .footer-credit { display: block; white-space: normal; }
  .footer-credit::before { display: none; }
}

/* 21. Motion / reveal --------------------------------------------------- */
[data-reveal] { opacity: 0; }
.no-js [data-reveal] { opacity: 1; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink); color: #fff; padding: 1em 1.4em; font-size: .85rem;
}
.skip-link:focus { left: 12px; top: 12px; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* A continuous collection ribbon matched to the supplied navy reference. */
.collection-ribbon {
  --ribbon-text: #f4f4f4; --ribbon-accent: #a6a6a6;
  position: relative; isolation: isolate; overflow: hidden; cursor: default;
  background: #070b31;
  border-top: 1px solid #ffffff26; border-bottom: 1px solid #00000080;
  box-shadow: inset 0 1px 0 #ffffff05, 0 10px 28px -22px #000000;
}
.collection-ribbon::before, .collection-ribbon::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, #ffffff18 25%, #ffffff18 75%, transparent);
}
.collection-ribbon::before { top: 8px; }
.collection-ribbon::after { bottom: 8px; }
.marquee-window {
  overflow: hidden; padding-block: 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: collection-scroll 65s linear infinite; }
.marquee-group { display: flex; align-items: center; justify-content: space-around; flex: 0 0 auto; min-width: 100vw; }
.marquee-item {
  display: flex; align-items: center; gap: clamp(32px, 3.8vw, 72px);
  padding: 24px 0 24px clamp(32px, 3.8vw, 72px);
  font-family: var(--font-display); font-size: clamp(1.1rem, 1.65vw, 1.6rem);
  line-height: 1.3; font-weight: 300; letter-spacing: .045em; white-space: nowrap;
  color: var(--ribbon-text); text-shadow: 0 1px 10px #00000015;
}
.marquee-item::after {
  content: ''; flex: 0 0 6px; height: 6px; border: 1px solid var(--ribbon-accent);
  transform: rotate(45deg); background: #ffffff12;
}
@keyframes collection-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 600px) {
  .marquee-window { padding-block: 8px; }
  .marquee-item { padding-block: 20px; letter-spacing: .035em; }
  .marquee-track { animation-duration: 55s; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; width: 100%; }
  .marquee-group { min-width: 0; width: 100%; flex-wrap: wrap; justify-content: center; padding: 10px; }
  .marquee-group + .marquee-group { display: none; }
  .marquee-item { font-size: .9rem; padding: 8px 12px; gap: 24px; }
  .marquee-window { -webkit-mask-image: none; mask-image: none; }
}

/* 22. Responsive -------------------------------------------------------- */
@media (max-width: 1180px) {
  .cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1080px) {
  .masonry { columns: 2; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --header-h: 80px; }
  .split.split-contact { grid-template-columns: 1fr; }
  .cols-5 { grid-template-columns: repeat(3, 1fr); }
  .nav, .header-actions .btn { display: none; }
  .nav-toggle { display: block; }
  .split { grid-template-columns: 1fr; }
  .split.is-reverse .split-media { order: 0; }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  .hero-bar { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .hero-scroll { display: none; }
  .media-frame::before { inset: 12px -12px -12px 12px; }
}
@media (max-width: 680px) {
  body { font-size: 16.5px; }
  .masonry { columns: 1; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .cols-5 { grid-template-columns: repeat(2, 1fr); }
  .field-grid { grid-template-columns: 1fr; }
  .hero { min-height: 86vh; }
  .service-card { min-height: 360px; }
  .media-stack { grid-template-columns: 1fr; }
  .media-stack img:nth-child(2) { margin-top: 0; }
  .badge-float { right: 12px; bottom: -16px; padding: 1rem 1.2rem; }
  .process-step { grid-template-columns: 44px 1fr; gap: 16px; }
  .process-num { width: 44px; height: 44px; font-size: .85rem; }
  .process-track, .process-progress { left: 22px; }
  .footer-top { grid-template-columns: 1fr; }
  .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; }
  .lightbox-btn { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

@media print {
  .site-header, .mobile-nav, .cta-band, .site-footer, .hero-scroll { display: none; }
  body { background: #fff; }
}

/* ==========================================================================
   23. Premium layer — transitions, overlays, refined motion
   ========================================================================== */

/* Native cross-document view transitions where supported */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .32s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .46s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(12px); } }

/* Scroll progress ------------------------------------------------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 110;
  height: 2px; width: 100%; background: var(--brass);
  transform: scaleX(0); transform-origin: left;
}

/* Word-mask heading reveal ---------------------------------------------- */
.word-mask { display: inline-block; overflow: hidden; vertical-align: top;
              padding-bottom: .16em; margin-bottom: -.16em; }
.word-mask > span { display: inline-block; will-change: transform; }

/* Clip reveal for media -------------------------------------------------- */
/* clip-path is set inline by JS, never in CSS, so images can never be
   left invisible if scripting fails */

/* Magnetic buttons ------------------------------------------------------- */

/* Mega menu -------------------------------------------------------------- */
.nav-dd-menu.is-mega {
  min-width: min(780px, 92vw); padding: 1.4rem;
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 1.1rem; row-gap: .5rem;
}
.nav-dd-menu.is-mega a.mega-item {
  display: grid !important; grid-template-columns: 88px 1fr;
  gap: 1.15rem; align-items: center;
  padding: .95rem 1rem;
}
.mega-item img {
  width: 88px; height: 72px; object-fit: cover; border-radius: var(--radius);
  transition: transform .5s var(--ease);
}
.mega-item:hover img { transform: scale(1.06); }
.mega-item > span { display: block; min-width: 0; }
.mega-item b {
  font-family: var(--font-display); font-weight: 500; font-size: 1.02rem;
  line-height: 1.25; letter-spacing: -.01em; display: block; margin-bottom: .3em;
}
.nav-dd-menu.is-mega .mega-item span span,
.mega-item > span > span {
  display: block; font-size: .83rem; line-height: 1.5;
  color: var(--ink-mute); font-weight: 400; text-wrap: pretty;
}
.mega-foot {
  grid-column: 1 / -1; margin-top: .7rem; padding: 1.1rem 1rem .2rem;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  font-size: .88rem; color: var(--ink-mute);
}
.mega-foot a {
  font-size: .76rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brass-ink); white-space: nowrap;
  transition: gap .35s var(--ease), color .35s var(--ease);
}
.mega-foot a:hover { color: var(--ink); }

/* Back to top ------------------------------------------------------------ */
.to-top {
  position: fixed; right: clamp(16px, 2.4vw, 34px); bottom: clamp(16px, 2.4vw, 34px); z-index: 90;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, background .35s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--brass); }
.to-top svg { width: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* Mobile sticky CTA ------------------------------------------------------ */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(6, 11, 51, .95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-dark);
  transform: translateY(110%); transition: transform .45s var(--ease);
}
.mobile-cta.is-visible { transform: translateY(0); }
.mobile-cta .btn { flex: 1; justify-content: center; padding: .95em 1em; font-size: .72rem; }
@media (max-width: 760px) {
  .mobile-cta { display: flex; }
  .to-top { bottom: 84px; width: 44px; height: 44px; }
}

/* Lightbox thumbnail strip ----------------------------------------------- */
.lightbox-strip {
  display: flex; gap: 8px; justify-content: flex-start; flex-wrap: nowrap;
  width: 100%; max-width: 100%; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  padding: 4px 2px 0; scrollbar-width: none;
}
.lightbox-strip::-webkit-scrollbar { display: none; }
.lightbox-strip button {
  flex: 0 0 auto; width: 62px; height: 46px; border-radius: var(--radius); overflow: hidden;
  opacity: .42; transition: opacity .35s var(--ease), outline-color .35s var(--ease);
  outline: 1px solid transparent; outline-offset: 2px;
}
.lightbox-strip button img { width: 100%; height: 100%; object-fit: cover; }
.lightbox-strip button:hover { opacity: .8; }
.lightbox-strip button.is-active { opacity: 1; outline-color: var(--brass); }
@media (max-width: 680px) { .lightbox-strip { justify-content: flex-start; } }

/* Service areas ---------------------------------------------------------- */
.area-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.area-cell { background: var(--paper); padding: 1.15rem 1.3rem; font-size: .95rem; transition: background .4s var(--ease), color .4s var(--ease); }
.bg-warm .area-cell { background: var(--paper-warm); }
.area-cell:hover { background: var(--ink); color: #fff; }
.area-cell span { display: block; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: .2em; }

/* Pull-quote ------------------------------------------------------------- */
.pullquote {
  font-family: var(--font-display); font-weight: 300; letter-spacing: -.025em;
  font-size: clamp(1.5rem, 3.4vw, 2.7rem); line-height: 1.3; text-wrap: balance;
  max-width: 22ch;
}

/* Wider-screen refinements ------------------------------------------------ */
@media (min-width: 1700px) {
  :root { --container: 1420px; --section-y: clamp(100px, 8vw, 168px); }
  body { font-size: 18px; }
}
@media (min-width: 2200px) {
  :root { --container: 1560px; }
  .container-wide { max-width: 1840px; }
}

/* Tablet-specific ---------------------------------------------------------*/
@media (min-width: 681px) and (max-width: 1080px) {
  .hero-bar { grid-template-columns: repeat(4, 1fr); }
  .hero-bar strong { font-size: clamp(1.2rem, 3vw, 1.6rem); }
  .area-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .area-grid { grid-template-columns: 1fr; }
  .nav-dd-menu.is-mega { grid-template-columns: 1fr; }
}

/* Very small screens ------------------------------------------------------ */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .brand img { height: 30px; }
  .hero-bar { grid-template-columns: 1fr 1fr; gap: 16px; }
  .btn { padding: .95em 1.4em; font-size: .74rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
}

/* Short landscape phones -------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 560px; }
  .page-hero { min-height: 420px; }
  .mobile-nav { padding-top: 90px; }
  .mobile-nav-links a { font-size: 1.4rem; padding: .18em 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-clip] { clip-path: none !important; }
  .word-mask > span { transform: none !important; }
  @view-transition { navigation: none; }
}

/* Brass on dark surfaces keeps the brighter tone for contrast */
.bg-ink .eyebrow, .cta-band .eyebrow, .site-footer .eyebrow,
section[style*="--ink-soft"] .eyebrow { color: var(--brass-lt); }
.bg-ink .eyebrow::before, .cta-band .eyebrow::before { background: var(--brass-lt); }
.site-footer .footer-col a:hover { color: var(--brass-lt); }
.mobile-nav-links a span { color: var(--brass-lt); }


/* ==========================================================================
   24. Multistock — product ranges, hubs and supply-specific blocks
   ========================================================================== */


/* Intro copy under an interior hero */
.intro-copy { max-width: 820px; }
.intro-copy p:not(.lead) { color: var(--ink-mute); }
.intro-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* Hero video (tiles) */
.hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Range grid: colours, finishes and products ----------------------------- */
.colour-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: clamp(22px, 2.6vw, 36px) var(--stack);
}
.colour-grid-lg { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.colour-swatch { margin: 0; min-width: 0; }
.colour-img {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
  background-color: var(--paper-warm); background-size: cover;
  background-position: center; background-repeat: no-repeat;
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: zoom-in; overflow: hidden;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.colour-img:not([data-full]):not(.swatch-carousel) { cursor: default; }
.colour-swatch:hover .colour-img { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.colour-swatch figcaption {
  margin-top: 1rem; font-family: var(--font-display); font-weight: 500;
  font-size: 1.08rem; line-height: 1.3; letter-spacing: -.01em; color: var(--ink);
  text-wrap: balance;
}
.colour-swatch .swatch-dim, .colour-swatch .colour-code {
  display: block; font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brass-ink);
}
.colour-swatch .swatch-dim { margin-bottom: .35em; }
.colour-swatch .colour-code { margin-top: .45em; color: var(--ink-mute); }
.colour-swatch .swatch-name { display: block; }

/* Arrows on a multi-image card */
.carousel-arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(251, 250, 248, .94); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  font-size: 1.25rem; line-height: 1; opacity: 0;
  transition: opacity .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }
.swatch-carousel:hover .carousel-arrow, .carousel-arrow:focus-visible { opacity: 1; }
.carousel-arrow:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
.carousel-count {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  padding: .3em .7em; border-radius: 100px;
  background: rgba(20, 23, 26, .78); color: #fff;
  font-size: .68rem; font-weight: 600; letter-spacing: .12em;
}
@media (hover: none), (max-width: 900px) { .carousel-arrow { opacity: 1; } }

/* Hub cards without a photo */
.service-card.is-plain { background: var(--ink-soft); }
.service-card.is-plain::after { display: none; }
.service-card .card-fill { position: absolute; inset: 0; z-index: -2; }
div.service-card { cursor: default; }
.cat-benchtops { background: linear-gradient(135deg, #ded9d2, #a89f8f); }
.cat-splashbacks { background: linear-gradient(135deg, #e7e9ea, #b7c0c4); }
.cat-sinks { background: linear-gradient(135deg, #dfe3e6, #9aa4ab); }
.cat-handles { background: linear-gradient(135deg, #e8dcc4, #b89b6a); }

/* Supplier logos */
.accred.is-suppliers { justify-content: space-between; }
.accred.is-suppliers img { height: clamp(46px, 5vw, 68px); max-width: 240px; object-fit: contain; }

/* Checklist (why builders choose us) */
.checklist { list-style: none; padding: 0; margin: 2rem 0 0; }
.checklist li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.checklist li:first-child { border-top: 1px solid var(--line); }
.bg-ink .checklist li { border-color: var(--line-dark); }
.checklist svg { flex-shrink: 0; width: 20px; height: 20px; margin-top: 4px; color: var(--brass); stroke: currentColor; fill: none; stroke-width: 1.6; }
.bg-ink .checklist svg { color: var(--brass-lt); }

/* Partnership */
.partner-mark { display: inline-block; padding: clamp(22px, 3vw, 36px) clamp(28px, 4vw, 52px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.partner-mark img { height: clamp(70px, 8vw, 104px); width: auto; }

/* Single product page */
.product-gallery { display: grid; grid-template-columns: 78px 1fr; gap: var(--stack); align-items: start; }
.product-thumbs-rail { display: grid; gap: 10px; }
.product-thumb {
  aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white) center / contain no-repeat; cursor: pointer; opacity: .55;
  transition: opacity .35s var(--ease), border-color .35s var(--ease);
}
.product-thumb:hover, .product-thumb.active { opacity: 1; border-color: var(--brass); }
.product-main-img {
  aspect-ratio: 4 / 5; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white) center / contain no-repeat; cursor: zoom-in;
}
.product-specs { list-style: none; padding: 0; margin: 1.8rem 0; border-top: 1px solid var(--line); }
.product-specs li { padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: .98rem; }
.spec-label { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); margin-right: .5em; }
.product-package-title { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: .6em; }
.product-package-list { margin: 0 0 1.8rem; padding-left: 1.1em; color: var(--ink-mute); }
.product-price { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 500; letter-spacing: -.02em; }
@media (max-width: 680px) {
  .product-gallery { grid-template-columns: 1fr; }
  .product-thumbs-rail { grid-template-columns: repeat(4, 1fr); order: 2; }
}
.lightbox.is-single .lightbox-prev, .lightbox.is-single .lightbox-next { display: none; }
@media (min-width: 1081px) { .area-grid.is-three { grid-template-columns: repeat(3, 1fr); } }


/* ==========================================================================
   25. Multistock palette — blue accent needs its light tone on navy
   ========================================================================== */
.bg-ink .stat strong, .bg-ink .contact-icon, .bg-ink .feature-icon,
.bg-ink .checklist svg, .quote-count b { color: var(--brass-lt); }
.btn-brass::after { background: var(--white); }
.btn-brass:hover, .btn-brass:focus-visible { color: var(--ink); border-color: var(--white); }
.btn-ghost:hover, .btn-ghost:focus-visible { color: #fff; }
.review-avatar { background: linear-gradient(145deg, #3D57F0, #001080); }
.mobile-nav, .site-footer, .cta-band, .hero, .page-hero { background-color: var(--ink); }
.site-footer .footer-col a:hover, .footer-bottom a:hover { color: var(--brass-lt); }
.footer-social a:hover { background: var(--brass); border-color: var(--brass); }
.acc-item.is-open .acc-trigger, .acc-trigger:hover { color: var(--brass); }

/* ==========================================================================
   26. Advanced layer — catalogue, hero slideshow, tilt, spotlight, cursor
   ========================================================================== */

/* Hero slideshow -------------------------------------------------------- */
.hero-slides { position: absolute; inset: 0; will-change: transform; }
.hero-slides img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.6s var(--ease);
}
.hero-slides img.is-active { opacity: 1; animation: ms-kenburns 9s linear both; }
@keyframes ms-kenburns { from { scale: 1; } to { scale: 1.09; } }
.hero-progress { display: flex; gap: 8px; margin-top: clamp(36px, 5vh, 56px); }
.hero-progress button {
  position: relative; width: 54px; height: 22px; padding: 0; cursor: pointer;
}
.hero-progress button::before, .hero-progress button::after {
  content: ""; position: absolute; left: 0; top: 10px; height: 2px; border-radius: 2px;
}
.hero-progress button::before { width: 100%; background: rgba(255, 255, 255, .28); }
.hero-progress button::after { width: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.hero-progress button.is-active::after { animation: ms-fill var(--slide-ms, 6000ms) linear both; }
.hero-progress button.is-done::after { transform: scaleX(1); }
@keyframes ms-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-progress + .hero-bar { margin-top: 18px; }

/* Hero — 2026 style. The video plays clean (no tint) inside a large rounded
   frame that fills the screen. The menu is a floating glass bar, the wording
   sits on a glass "island" along the bottom, and the stats are rounded tiles
   underneath. ------------------------------------------------------------ */
.hero.is-island { display: block; min-height: 0; overflow: visible; padding: 12px; background: var(--paper); }
.hero-frame { position: relative; height: calc(100vh - 24px); height: calc(100svh - 24px); min-height: 540px; max-height: 1060px; overflow: hidden; border-radius: 30px; background: var(--paper-warm); isolation: isolate; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* the wording floats straight on the video: no box and no shade over the
   picture, only a soft shadow behind the letters themselves */
.hero-float { position: absolute; left: clamp(20px, 3.4vw, 56px); right: clamp(20px, 3.4vw, 56px); bottom: clamp(20px, 3.6vw, 52px); z-index: 2; color: #fff; }
.hero.is-island .eyebrow { color: #fff; margin-bottom: .7rem; font-weight: 700; text-shadow: 0 0 1px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.75), 0 2px 16px rgba(0,0,0,.7); }
.hero.is-island .eyebrow::before { background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,.5); }
.hero.is-island h1 { color: #fff; font-weight: 600; font-size: clamp(2.8rem, 8.4vw, 8rem); line-height: .94; letter-spacing: -.045em; max-width: none; margin: 0 0 clamp(14px, 1.6vw, 26px);
  text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 28px rgba(0,0,0,.42), 0 0 90px rgba(0,0,0,.38); }
.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(20px, 4vw, 72px); }
.hero.is-island .hero-lead { color: #fff; font-weight: 600; font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.5; max-width: 50ch; margin: 0;
  text-shadow: 0 0 1px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.75), 0 2px 16px rgba(0,0,0,.7), 0 0 46px rgba(0,0,0,.55); }
.hero.is-island .hero-actions { flex: none; flex-wrap: nowrap; align-items: center; gap: .6rem; }
.hero.is-island .btn { border-radius: 999px; box-shadow: 0 14px 34px -16px rgba(0,0,0,.6); }
.btn-glass { --btn-bg: rgba(14,18,40,.42); --btn-fg: #fff; --btn-bd: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); text-shadow: 0 1px 8px rgba(0,0,0,.45); }

/* pause / play, with a ring that fills as the video plays */
.hero-pause { position: relative; width: 52px; height: 52px; flex: none; display: grid; place-items: center; color: var(--ink); border-radius: 50%; background: rgba(255,255,255,.86); box-shadow: 0 14px 34px -16px rgba(0,0,0,.6); transition: background .35s var(--ease), color .35s; }
.hero-pause:hover { background: var(--ink); color: #fff; }
.hero-pause svg { grid-area: 1 / 1; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.hero-pause .ring { width: 52px; height: 52px; transform: rotate(-90deg); color: var(--brass); }
.hero-pause .ring circle { stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--vp, 0)); transition: stroke-dashoffset .3s linear; }
.hero-pause .ic-play { display: none; fill: currentColor; }
.hero-pause.is-paused .ic-play { display: block; }
.hero-pause.is-paused .ic-pause { display: none; }

/* stats: rounded tiles under the video */
.hero-strip { background: var(--paper); padding: 0 12px clamp(26px, 4vw, 60px); }
.hero-strip .hero-bar { margin-top: 0; padding: 0; border-top: 0; gap: 12px; }
.hero-strip .hero-bar div { padding: clamp(18px, 2vw, 30px); border-radius: 22px; background: #fff; border: 1px solid var(--line); color: var(--ink-mute); font-size: .9rem; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.hero-strip .hero-bar div:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(6,11,51,.45); }
.hero-strip .hero-bar strong { color: var(--ink); }
.hero-strip .hero-bar div:first-child { background: var(--ink); border-color: var(--ink); color: rgba(255,255,255,.82); }
.hero-strip .hero-bar div:first-child strong { color: #fff; }

@media (max-width: 1180px) {
  .hero.is-island .btn { padding: 1em 1.45em; font-size: .76rem; letter-spacing: .1em; }
}
@media (max-width: 860px) {
  .hero-row { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 680px) {
  .hero.is-island { padding: 8px; }
  .hero-frame { height: calc(100vh - 16px); height: calc(100svh - 16px); border-radius: 24px; min-height: 520px; }
  .hero-float { left: 18px; right: 18px; bottom: 20px; }
  .hero.is-island .hero-actions { flex-wrap: wrap; width: 100%; }
  .hero.is-island .btn { padding: .95em 1.3em; font-size: .72rem; flex: 1 1 auto; justify-content: center; }
  .hero-pause { width: 46px; height: 46px; }
  .hero-pause .ring { width: 46px; height: 46px; }
  .hero-strip { padding-inline: 8px; }
  .hero-strip .hero-bar { gap: 8px; }
  .hero-strip .hero-bar div { border-radius: 18px; }
}

/* Cursor spotlight on navy sections ------------------------------------- */
.has-spot { position: relative; isolation: isolate; }
.has-spot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, -40%), rgba(90, 116, 255, .24), transparent 62%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.has-spot.is-lit::before { opacity: 1; }

/* 3D tilt with a moving sheen ------------------------------------------- */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt-sheen {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 60%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.tilt:hover .tilt-sheen { opacity: 1; }
.feature { position: relative; overflow: hidden; }
.feature .tilt-sheen { background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(26, 52, 209, .10), transparent 62%); }

/* Product cards rise in one by one -------------------------------------- */
.fx-ready .colour-swatch { opacity: 0; transform: translateY(26px) scale(.985); }
.fx-ready .colour-swatch.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease) var(--d, 0s), transform .8s var(--ease) var(--d, 0s);
}
.colour-swatch.is-hidden { display: none; }
.colour-img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .5) 50%, transparent 60%);
  transform: translateX(-120%);
}
.colour-swatch:hover .colour-img::after { transform: translateX(120%); transition: transform .9s var(--ease); }

/* Catalogue ------------------------------------------------------------- */
.catalogue-tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 28px; margin-bottom: clamp(18px, 2vw, 26px);
}
.catalogue-search { position: relative; flex: 1 1 280px; max-width: 420px; }
.catalogue-search input {
  width: 100%; padding: .95em 1.1em .95em 2.9em; background: var(--white);
  border: 1px solid var(--line); border-radius: 100px;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.catalogue-search input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(26, 52, 209, .16); }
.catalogue-search svg { position: absolute; left: 1.1em; top: 50%; translate: 0 -50%; width: 17px; height: 17px; stroke: var(--ink-mute); fill: none; stroke-width: 1.6; }
.catalogue-count { font-size: .8rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mute); }
.catalogue-count b { color: var(--brass); font-weight: 600; }
.catalogue-empty { display: none; padding: clamp(40px, 6vw, 80px) 0; text-align: center; color: var(--ink-mute); }
.catalogue-empty.is-on { display: block; }
.filter-bar.is-sticky {
  position: sticky; top: 76px; z-index: 20; padding-block: 14px; margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter); background: rgba(238, 241, 250, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.filter-bar.is-sticky::-webkit-scrollbar { display: none; }
.filter-bar.is-sticky .filter-btn { white-space: nowrap; flex: 0 0 auto; background: var(--white); }
.filter-bar.is-sticky .filter-btn.is-active { background: var(--ink); }
.colour-swatch a.swatch-link { display: inline-block; margin-top: .5em; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-ink); border-bottom: 1px solid var(--line); padding-bottom: .2em; font-family: var(--font-body); }
.colour-swatch a.swatch-link:hover { border-color: var(--brass); }

@media (prefers-reduced-motion: reduce) {
  .fx-ready .colour-swatch { opacity: 1; transform: none; }
  .hero-slides img.is-active { animation: none; }
}

/* Product walls: names stay on show where there is no hover (phones, tablets) */
@media (hover: none), (pointer: coarse) {
  .masonry-item::after { opacity: 1; }
  .masonry-cap { opacity: 1; transform: none; }
}
.masonry-item { background: var(--white); }

/* ==========================================================================
   27. About — moving photo wall. Two columns of real project photos glide in
   opposite directions, fading out at the top and bottom. Every photo is shown
   whole; nothing overlaps. Blue corner brackets frame the wall.
   ========================================================================== */
.ag { position: relative; padding: 14px; }
.ag::before, .ag::after { content: ""; position: absolute; width: 64px; height: 64px; border: 3px solid var(--brass); pointer-events: none; z-index: 2; }
.ag::before { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.ag::after { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.ag-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; height: clamp(460px, 46vw, 640px); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 13%, #000 87%, transparent 100%); }
.ag-col { min-width: 0; }
.ag-track { display: flex; flex-direction: column; will-change: transform; }
.ag-tile { display: block; margin-bottom: 14px; overflow: hidden; border-radius: var(--radius); background: var(--paper-warm); }
.ag-tile img { display: block; width: 100%; height: auto; transition: transform .9s var(--ease); }
.ag-tile:hover img { transform: scale(1.06); }
@media (max-width: 860px) {
  .ag { padding: 10px; }
  .ag-wall { height: clamp(380px, 110vw, 520px); gap: 10px; }
  .ag-tile { margin-bottom: 10px; }
  .ag::before, .ag::after { width: 44px; height: 44px; }
}

/* Pointer glow removed on request (navy-section spotlight + card sheen). */
.has-spot::before, .tilt-sheen { display: none !important; }

/* ==========================================================================
   28. Home hero — the Formatt hero over a looping, auto-playing video
   (js/hero-video.js pauses it while it is off screen).
   ========================================================================== */
.hero-scrub .hero-media video {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* The hero's size comes from the Formatt rules above (section 7 and the responsive rules):
   min(92vh, 880px) on desktop, 86vh on tablets, at least 560px on phones. */
/* A lighter wash than the standard hero so the video shows through; it stays darkest
   behind the wording (left) and the figures (bottom), which carry a soft shadow instead. */
.hero-scrub .hero-media::after {
  background:
    linear-gradient(100deg, rgba(10,12,14,.50) 0%, rgba(10,12,14,.16) 46%, rgba(10,12,14,0) 76%),
    linear-gradient(185deg, rgba(10,12,14,.34) 0%, rgba(10,12,14,.03) 40%, rgba(10,12,14,.56) 100%);
}
.hero-scrub .hero-body { text-shadow: 0 1px 18px rgba(10,12,14,.5); }
.hero-scrub .hero-body .btn { text-shadow: none; }
.hero-pin { background: var(--paper); }

/* Same height as the Formatt hero. The sizing rules are already Formatt's, but Formatt's
   heading and intro run to more lines than "Complete Renovations", which made its hero
   taller. This spacer above the wording adds exactly the missing lines: --hero-h1 heading
   lines, --hero-lead intro lines and --hero-px of other differences (buttons that stack on
   Formatt, wrapped labels). The numbers were measured against the Formatt page at every
   width where its wrapping changes. */
.hero-scrub { --hero-h1: 2; --hero-lead: 1; --hero-px: 0px; }
.hero-scrub .hero-body::before {
  content: ""; display: block;
  font-size: clamp(2.6rem, 6.2vw, 5.1rem);   /* the heading's size, so 1.07em is one heading line */
  height: calc(var(--hero-h1) * 1.07em + var(--hero-lead) * clamp(28.9px, 2.41vw, 34.7px) + var(--hero-px));
}
@media (max-width: 367px) { .hero-scrub { --hero-h1: 2; --hero-lead: 2; --hero-px: 10px; } }
@media (min-width: 368px) and (max-width: 403px) { .hero-scrub { --hero-h1: 2; --hero-lead: 1; --hero-px: 10px; } }
@media (min-width: 404px) and (max-width: 422px) { .hero-scrub { --hero-h1: 1; --hero-lead: 1; --hero-px: 10px; } }
@media (min-width: 423px) and (max-width: 438px) { .hero-scrub { --hero-h1: 1; --hero-lead: 1; --hero-px: 0px; } }
@media (min-width: 439px) and (max-width: 447px) { .hero-scrub { --hero-h1: 2; --hero-lead: 1; --hero-px: 0px; } }
@media (min-width: 448px) and (max-width: 474px) { .hero-scrub { --hero-h1: 2; --hero-lead: 1; --hero-px: 20px; } }
@media (min-width: 475px) and (max-width: 492px) { .hero-scrub { --hero-h1: 2; --hero-lead: 1; --hero-px: 90px; } }
@media (min-width: 493px) and (max-width: 520px) { .hero-scrub { --hero-h1: 2; --hero-lead: 1; --hero-px: 50px; } }
@media (min-width: 521px) and (max-width: 560px) { .hero-scrub { --hero-h1: 2; --hero-lead: 1; --hero-px: 70px; } }
@media (min-width: 561px) and (max-width: 574px) { .hero-scrub { --hero-h1: 2; --hero-lead: 2; --hero-px: 70px; } }
@media (min-width: 575px) and (max-width: 600px) { .hero-scrub { --hero-h1: 2; --hero-lead: 1; --hero-px: 70px; } }
@media (min-width: 1022px) and (max-width: 1077px) { .hero-scrub { --hero-h1: 2; --hero-lead: 1; --hero-px: -20px; } }

/* ==========================================================================
   29. Product cards (refined in this preview at the user's request)
   ========================================================================== */
/* Product cards: the Formatt gallery card — the photo fills the card and the range label
   and product name sit over the bottom of it on a light dark fade. Every card is the same
   landscape rectangle (3:2), lined up in even rows; photos are cropped to fit. On products
   the wording is always shown (on the project gallery it still appears on hover). */
.masonry:has(> .masonry-item[data-category]) {
  columns: auto; column-count: auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--stack);
}
.masonry-item[data-category] { margin: 0; aspect-ratio: 3 / 2; border-radius: var(--radius); }
.masonry-item[data-category] img { width: 100%; height: 100%; object-fit: cover; }
.masonry-item[data-category]::after {
  opacity: 1; background: linear-gradient(180deg, rgba(10, 12, 14, 0) 52%, rgba(10, 12, 14, .58) 100%);
}
.masonry-item[data-category] .masonry-cap {
  opacity: 1; transform: none; left: 18px; right: 18px; bottom: 15px;
  text-shadow: 0 1px 10px rgba(10, 12, 14, .55);
}
.masonry-item[data-category] .masonry-cap span { display: block; margin-bottom: .35em; font-size: .68rem; letter-spacing: .2em; color: #fff; opacity: .88; }
.masonry-item[data-category] .masonry-cap strong { font-size: clamp(1.2rem, 1.5vw, 1.45rem); line-height: 1.1; color: #fff; }
/* The filter buttons hide products with .is-hidden; this must stay stronger than any card rule. */
.masonry-item[data-category].is-hidden { display: none; }
@media (max-width: 1100px) { .masonry:has(> .masonry-item[data-category]) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .masonry:has(> .masonry-item[data-category]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 420px) {
  .masonry-item[data-category] { aspect-ratio: 4 / 3; }
  .masonry-item[data-category] .masonry-cap { left: 11px; right: 11px; bottom: 10px; }
  .masonry-item[data-category] .masonry-cap span { font-size: .58rem; letter-spacing: .14em; }
  .masonry-item[data-category] .masonry-cap strong { font-size: 1rem; }
}

/* ==========================================================================
   30. Hover zoom on every photo — the slow zoom inside a fixed frame that the
   Formatt cards and gallery use, extended to the photos that did not have it:
   the About photo, the page banners, the contact band and the product photos
   on the multi-photo pages. It uses the separate "scale" property so it adds
   to any movement a photo already has (parallax, reveals).
   ========================================================================== */
.split-media, .cta-band-media, .page-hero .hero-media, .product-main-img, .product-thumb, .review-card img { overflow: hidden; }
.split-media { border-radius: var(--radius); }
.split-media img, .cta-band-media img, .page-hero .hero-media img, .page-hero .hero-media video,
.carousel-slide img, .swatch-carousel img {
  transition: scale 1.1s var(--ease), transform 1.1s var(--ease);
}
.product-main-img, .colour-img { transition: scale 1.1s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
@media (hover: hover) {
  .split-media:hover img,
  .cta-band:hover .cta-band-media img,
  .page-hero:hover .hero-media img, .page-hero:hover .hero-media video,
  .swatch-carousel:hover img { scale: 1.06; }
  .product-showcase:hover .product-main-img { scale: 1.03; }
}
@media (prefers-reduced-motion: reduce) {
  .split-media:hover img, .cta-band:hover .cta-band-media img, .page-hero:hover .hero-media img,
  .page-hero:hover .hero-media video, .swatch-carousel:hover img, .product-showcase:hover .product-main-img { scale: 1; }
}

/* ==========================================================================
   31. About section, a little larger (about 10%) at the user's request:
   a wider block, a taller photo wall, and slightly bigger wording.
   ========================================================================== */
.section:has(.ag) .ag-wall { height: clamp(510px, 51vw, 720px); }
.section:has(.ag) h2 { font-size: clamp(2.2rem, 4.3vw, 3.75rem); }
.section:has(.ag) .lead { font-size: clamp(1.16rem, 1.62vw, 1.42rem); }
.section:has(.ag) .split-body { max-width: 60ch; }
.section:has(.ag) .split-body p:not(.lead) { font-size: 1.08em; }
@media (max-width: 860px) {
  .section:has(.ag) .ag-wall { height: clamp(420px, 120vw, 580px); }
}

/* ==========================================================================
   32. Menu links: the coloured lettering and underline appear only while a
   link is being hovered (or focused with the keyboard). The link for the page
   you are on is no longer shown highlighted all the time.
   ========================================================================== */
.nav a[aria-current="page"] { color: var(--ink); }
.has-hero .site-header:not(.is-solid) .nav > a[aria-current="page"] { color: rgba(255, 255, 255, .92); }
.nav a[aria-current="page"]:not(:hover):not(:focus-visible)::after { transform: scaleX(0); }
.nav a[aria-current="page"]:hover { color: var(--brass-ink); }
.has-hero .site-header:not(.is-solid) .nav > a[aria-current="page"]:hover { color: var(--brass-lt); }

/* ==========================================================================
   33. Stats band — the same four figures in the same row, redesigned: large
   white numbers, a short blue marker above each, a thin divider between the
   columns, tidier descriptions and a soft blue light across the navy.
   ========================================================================== */
.bg-ink:has(.stat-row) {
  padding-block: clamp(64px, 7vw, 104px);
  background:
    radial-gradient(70% 140% at 12% 0%, rgba(61, 91, 255, .22), transparent 62%),
    radial-gradient(60% 120% at 100% 100%, rgba(61, 91, 255, .12), transparent 60%),
    var(--ink);
}
.bg-ink .stat-row { gap: 0; }
.bg-ink .stat {
  position: relative; border-top: 0; padding: 4px clamp(18px, 2.6vw, 44px) 6px;
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.bg-ink .stat:first-child { border-left: 0; padding-left: 0; }
.bg-ink .stat::before {
  content: ""; display: block; width: 44px; height: 3px; margin-bottom: clamp(18px, 2vw, 28px);
  background: var(--brass-lt); transform-origin: left; transition: width .6s var(--ease);
}
.bg-ink .stat strong {
  display: block; margin-bottom: .28em; color: #fff;
  font-size: clamp(2.9rem, 5.2vw, 4.9rem); font-weight: 500; line-height: 1; letter-spacing: -.035em;
}
.bg-ink .stat > span {
  display: block; max-width: 26ch; font-size: clamp(.95rem, 1.05vw, 1.06rem); line-height: 1.5;
  letter-spacing: 0; color: rgba(255, 255, 255, .74);
}
@media (hover: hover) { .bg-ink .stat:hover::before { width: 88px; } }
@media (max-width: 900px) {
  .bg-ink .stat-row { grid-template-columns: repeat(2, 1fr); row-gap: clamp(34px, 6vw, 52px); }
  .bg-ink .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 420px) {
  .bg-ink .stat { padding-inline: 16px 4px; }
  .bg-ink .stat strong { font-size: 2.6rem; }
}

/* ==========================================================================
   34. Products menu (the panel under "Products") — the same four ranges in
   the same two-by-two layout with the same footer. Each range is a bordered
   card: the photo fills the left side edge to edge, the number, name and
   description sit beside it, and a round arrow button fills with blue when
   the card is hovered. The footer is a navy strip.
   ========================================================================== */
.nav-dd-menu.is-mega {
  width: min(880px, calc(100vw - 2 * var(--gutter))); padding: 16px 16px 0; gap: 12px;
  border: 0; border-radius: 6px; overflow: hidden;
  box-shadow: 0 34px 80px -22px rgba(6, 11, 51, .42), 0 0 0 1px var(--line);
  counter-reset: range;
}
.nav-dd-menu.is-mega a.mega-item {
  position: relative; display: grid !important; grid-template-columns: 150px minmax(0, 1fr); align-items: stretch; gap: 0;
  min-height: 142px; padding: 0; overflow: hidden; counter-increment: range;
  border: 1px solid var(--line); border-radius: 6px; background: var(--white);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.nav-dd-menu.is-mega a.mega-item::after { display: none; }
/* The photo is pinned to the card's left edge so a tall photo cannot make its card taller than the others. */
.mega-item img { position: absolute; left: 0; top: 0; width: 150px; height: 100%; object-fit: cover; border-radius: 0; transition: transform 1.1s var(--ease); }
.mega-item > span { grid-column: 2; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 14px 58px 14px 18px; }
.mega-item b {
  display: block; margin-bottom: .32em; font-family: var(--font-display); font-size: 1.24rem; font-weight: 500;
  line-height: 1.14; letter-spacing: -.012em; color: var(--ink); transition: color .35s var(--ease);
}
.mega-item b::before {
  content: counter(range, decimal-leading-zero); display: block; margin-bottom: .55em;
  font-family: var(--font-body); font-size: .64rem; font-weight: 600; letter-spacing: .22em; color: var(--brass);
}
.nav-dd-menu.is-mega .mega-item span span, .mega-item > span > span {
  display: block; padding: 0; font-size: .88rem; line-height: 1.45; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ink-mute);
}
/* round arrow button on the right of each card */
.mega-item > span::after {
  content: "\2192"; position: absolute; right: 14px; top: 50%; translate: 0 -50%;
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line); color: var(--ink); font-size: .95rem; line-height: 1;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), translate .35s var(--ease);
}
@media (hover: hover) {
  .nav-dd-menu.is-mega a.mega-item:hover { border-color: var(--brass); box-shadow: 0 16px 34px -18px rgba(6, 11, 51, .45); transform: translateY(-2px); }
  .mega-item:hover b { color: var(--brass-ink); }
  .mega-item:hover > span::after { background: var(--brass); border-color: var(--brass); color: #fff; translate: 3px -50%; }
}
.mega-foot {
  margin: 4px -16px 0; padding: 15px 26px; border-top: 0; background: var(--ink); color: rgba(255, 255, 255, .8);
}
.mega-foot > span { font-size: .9rem; color: rgba(255, 255, 255, .8); }
.mega-foot a { display: inline-flex; align-items: center; gap: .5em; padding: 0; font-weight: 600; color: #fff; }
.mega-foot a::after { display: none; }
/* No highlight box behind the link on hover; only the lettering changes colour. */
.nav-dd-menu.is-mega .mega-foot a, .nav-dd-menu.is-mega .mega-foot a:hover, .nav-dd-menu.is-mega .mega-foot a:focus-visible { background: none; }
@media (hover: hover) { .mega-foot a:hover { color: var(--brass-lt); } }

/* ==========================================================================
   35. Range cards (the four product cards on the home page, and the type and
   category cards on each range page) — the same cards in the same row,
   redesigned: brighter photos with a navy fade only at the foot, the number
   in a small glass pill, a short description on the home page, an "Explore"
   label with a round arrow that fills blue on hover, a lift, and a blue line
   that draws along the bottom edge.
   ========================================================================== */
.service-card {
  min-height: clamp(420px, 34vw, 540px); border-radius: 6px;
  box-shadow: 0 0 0 1px var(--line);
  transition: translate .55s var(--ease), box-shadow .55s var(--ease);
}
.service-card::after {
  background: linear-gradient(180deg, rgba(6, 11, 51, .30) 0%, rgba(6, 11, 51, 0) 24%, rgba(6, 11, 51, 0) 42%, rgba(6, 11, 51, .88) 100%);
}
.service-card:hover::after {
  background: linear-gradient(180deg, rgba(6, 11, 51, .34) 0%, rgba(6, 11, 51, .04) 26%, rgba(6, 11, 51, .10) 42%, rgba(6, 11, 51, .93) 100%);
}
.service-card::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 3px;
  background: var(--brass-lt); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.service-card .card-index {
  padding: 6px 12px; border-radius: 999px; font-family: var(--font-body); font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; color: #fff; background: rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}
.service-card h3 { font-size: clamp(1.45rem, 2vw, 1.9rem); line-height: 1.12; margin-bottom: .3em; }
.service-card p { max-width: 28ch; font-size: .93rem; line-height: 1.45; color: rgba(255, 255, 255, .86); margin-bottom: 1.25em; }
.service-card .link-underline {
  display: inline-flex; align-items: center; gap: .9em; padding: 0; border: 0;
  font-weight: 600; color: #fff;
}
.service-card .link-underline::after { display: none; }
.service-card .link-underline span {
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5); font-size: .95rem; line-height: 1;
  transition: background .4s var(--ease), border-color .4s var(--ease), translate .4s var(--ease);
}
.service-card:hover .link-underline { color: #fff; }
@media (hover: hover) {
  .service-card:hover { translate: 0 -6px; box-shadow: 0 0 0 1px var(--line), 0 34px 60px -30px rgba(6, 11, 51, .6); }
  .service-card:hover::before { transform: scaleX(1); }
  .service-card:hover .link-underline span { background: var(--brass); border-color: var(--brass); translate: 4px 0; }
}

/* ==========================================================================
   36. Why builders choose us — the redesign applied to the left column only
   (heading, summary line and paragraph). The list of reasons on the right is
   left as the plain ticked list, at the user's request.
   ========================================================================== */
.split:has(.checklist) h2 em { color: var(--brass); }
.split:has(.checklist) .lead {
  margin-block: 1.5em 1.1em; padding: .15em 0 .15em 18px; border-left: 3px solid var(--brass);
  font-family: var(--font-display); font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.3; color: var(--ink);
}
.split:has(.checklist) > div:first-child > p:not(.lead) { color: var(--ink-mute); max-width: 52ch; }

/* ==========================================================================
   37. Perfect for — the same six items in the same three-by-two grid,
   redesigned: separate white cards instead of a ruled table, a larger name
   in the heading font, the number in blue with a short rule beside it, and a
   navy fill that sweeps up from the bottom on hover.
   ========================================================================== */
.section-sm:has(.area-grid) h2 em { color: var(--brass); }
.area-grid { gap: clamp(12px, 1.4vw, 20px); background: none; border: 0; }
.area-cell, .bg-warm .area-cell {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(22px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px) clamp(24px, 2.6vw, 34px);
  background: var(--white); border-radius: 6px;
  box-shadow: 0 0 0 1px var(--line), 0 18px 36px -30px rgba(6, 11, 51, .5);
  font-family: var(--font-display); font-size: clamp(1.18rem, 1.6vw, 1.5rem); font-weight: 500; line-height: 1.18;
  letter-spacing: -.012em; color: var(--ink);
  transition: color .45s var(--ease), translate .45s var(--ease), box-shadow .45s var(--ease);
}
/* the navy fill that rises on hover */
.area-cell::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  transform: translateY(101%); transition: transform .55s var(--ease);
}
.area-cell span {
  display: flex; align-items: center; gap: 12px; margin-bottom: clamp(18px, 2.2vw, 30px);
  font-family: var(--font-body); font-size: .7rem; font-weight: 600; letter-spacing: .2em; color: var(--brass);
  transition: color .45s var(--ease);
}
.area-cell span::after { content: ""; width: 28px; height: 1px; background: currentColor; transition: width .5s var(--ease); }
.area-cell:hover { background: var(--white); color: #fff; }
@media (hover: hover) {
  .area-cell:hover { translate: 0 -4px; box-shadow: 0 0 0 1px var(--ink), 0 28px 50px -30px rgba(6, 11, 51, .6); }
  .area-cell:hover::before { transform: translateY(0); }
  .area-cell:hover span { color: var(--brass-lt); }
  .area-cell:hover span::after { width: 56px; }
}
@media (hover: none) { .area-cell:hover { color: var(--ink); } }

/* ==========================================================================
   38. Business owner — the Formatt portrait block (.faq-portrait, section 14):
   a square photo with the name and title underneath, placed under the
   "Ask a question" link in the Frequently asked questions section (where
   Formatt has its director). The name carries a blue marker bar.
   ========================================================================== */
.faq-portrait { max-width: 260px; margin-top: clamp(34px, 3.6vw, 48px); }
.faq-portrait img { width: 260px; max-width: 100%; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); }
.faq-portrait figcaption { margin-top: 22px; padding: .15em 0 .15em 18px; border-left: 3px solid var(--brass); }
.faq-portrait strong { font-size: clamp(1.2rem, 1.7vw, 1.45rem); font-weight: 500; line-height: 1.25; color: var(--ink); }
.faq-portrait span { margin-top: .45em; font-size: .72rem; font-weight: 600; letter-spacing: .2em; color: var(--brass-ink); }

/* ==========================================================================
   39. Reviews — the same carousel (front card, two neighbours, arrows and
   count), redesigned: everything in the card is centred, the review is set
   large in the heading font under a round quote badge, and the neighbouring
   cards are clean dark-glass cards instead of blurred white ones.
   ========================================================================== */
/* the same background as the stats band (section 33): deep navy with a soft blue light in two corners */
section:has(.reviews) {
  background:
    radial-gradient(70% 140% at 12% 0%, rgba(61, 91, 255, .22), transparent 62%),
    radial-gradient(60% 120% at 100% 100%, rgba(61, 91, 255, .12), transparent 60%),
    var(--ink) !important;
}
section:has(.reviews) h2 em { color: var(--brass-lt); }
.review-card {
  width: min(620px, 88%); min-height: 340px; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3.4vw, 52px) clamp(26px, 2.8vw, 36px);
  border-radius: 10px; background: #fff;
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
.review-card::before { display: none; }
/* round quote badge at the top of the card */
.review-top { flex-direction: column; gap: 16px; margin-bottom: 1.2rem; }
.review-top::before {
  content: "\201C"; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: var(--brass); color: #fff; font-family: Georgia, serif; font-size: 2rem; line-height: 1; padding-top: .28em; box-sizing: border-box;
}
.review-stars { gap: 4px; }
.review-card .review-stars svg { width: 18px; height: 18px; }
.review-card blockquote {
  margin: 0 0 1.5rem; max-width: 24em; font-family: var(--font-display); font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  font-weight: 400; line-height: 1.34; letter-spacing: -.012em; color: var(--ink); text-wrap: balance;
  transition: color .5s var(--ease);
}
.review-by {
  margin-top: auto; padding-top: 1.2rem; width: 100%; justify-content: center; text-align: left;
  border-image: none; border-top: 1px solid var(--line); transition: border-color .5s var(--ease);
}
.review-avatar { width: 46px; height: 46px; font-size: 1.08rem; background: linear-gradient(145deg, #4A68FF, var(--brass-dk)); box-shadow: none; }
.review-who strong { font-size: 1.02rem; transition: color .5s var(--ease); }
.review-who span { color: var(--brass-ink); font-weight: 600; transition: color .5s var(--ease); }

/* neighbours: dark glass, sharp, with pale lettering */
.review-card:not(.is-active) {
  filter: none; background: rgba(255, 255, 255, .07);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.review-card:not(.is-active) blockquote { color: rgba(255, 255, 255, .86); }
.review-card:not(.is-active) .review-by { border-top-color: rgba(255, 255, 255, .16); }
.review-card:not(.is-active) .review-who strong { color: #fff; }
.review-card:not(.is-active) .review-who span { color: var(--brass-lt); }

.quote-nav { gap: 14px; margin-top: clamp(26px, 3vw, 38px); }
.quote-btn { width: 52px; height: 52px; border-color: rgba(255, 255, 255, .4); }
.quote-btn svg { width: 16px; stroke-width: 1.8; }
.quote-btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.quote-count { margin-left: .9rem; padding-left: 1.3rem; border-left: 1px solid rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .6); }
.quote-count b { font-size: 1.45rem; color: #fff; }
@media (max-width: 680px) {
  .review-card { min-height: 330px; }
}

/* ==========================================================================
   40. The difference — the same three points in the same row, redesigned:
   the icon sits in a blue tile that fills solid on hover, the title is larger, and a blue line draws along the top of
   the card as it lifts. "Build with confidence." is blue.
   ========================================================================== */
.section:has(.feature) h2 em { color: var(--brass); }
.feature {
  position: relative; overflow: hidden;
  padding: clamp(28px, 3vw, 42px) clamp(26px, 3vw, 40px) clamp(30px, 3.2vw, 44px);
  border-radius: 6px; box-shadow: 0 20px 40px -34px rgba(6, 11, 51, .5);
}
/* blue line along the top edge */
.feature::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brass);
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease);
}
.feature-icon {
  box-sizing: border-box; width: 62px; height: 62px; padding: 15px; margin-bottom: 1.7rem; border-radius: 12px;
  background: rgba(26, 52, 209, .09); color: var(--brass);
  transition: background .45s var(--ease), color .45s var(--ease);
}
.feature-icon svg { stroke-width: 1.5; }
.feature h3 { font-size: clamp(1.3rem, 1.7vw, 1.55rem); margin-bottom: .45em; }
.feature p { font-size: 1.02rem; line-height: 1.55; max-width: 30ch; }
.feature:hover { border-color: var(--line); box-shadow: 0 34px 60px -36px rgba(6, 11, 51, .55); }
@media (hover: hover) {
  .feature:hover::before { transform: scaleX(1); }
  .feature:hover .feature-icon { background: var(--brass); color: #fff; }
}

/* ==========================================================================
   41. Contact band (above the footer on every page) — the same wording on the
   left and the same two buttons on the right, redesigned: the photo is shown
   clearly on the right and fades into solid navy behind the wording, the
   heading is larger with its highlighted words in light blue, and the buttons
   are solid: the main one white, the Call button navy.
   ========================================================================== */
.cta-band-media { opacity: 1; }
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(50% 110% at 0% 0%, rgba(61, 91, 255, .22), transparent 60%),
    linear-gradient(90deg, rgba(6, 11, 51, .95) 0%, rgba(6, 11, 51, .86) 26%, rgba(6, 11, 51, .34) 52%, rgba(6, 11, 51, .08) 78%, rgba(6, 11, 51, 0) 100%);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0 0 auto 0; z-index: 2; height: 3px;
  background: linear-gradient(90deg, var(--brass), var(--brass-lt) 40%, transparent 80%);
}
/* a slimmer band: less space above and below, and a smaller heading */
/* a tall band, so much more of the (portrait) photo shows; same design as the slim band: the
   wording sits on a navy fade on the left, vertically centred, and the photo is clear on the right */
.cta-band.section { padding-block: clamp(30px, 3.4vw, 48px); min-height: clamp(340px, 35.5vw, 540px); display: flex; align-items: center; }
.cta-band > .container { width: 100%; }
.cta-band-media img { object-position: 50% 42%; }
.cta-band .eyebrow { margin-bottom: .8em; }
.cta-band .cta-inner > div:first-child { max-width: none; }
.cta-band h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.08; max-width: none; margin-bottom: .3em; }   /* on one line */
.cta-band h2 em { color: var(--brass-lt); }
.cta-band .cta-inner > div:first-child { text-shadow: 0 1px 22px rgba(6, 11, 51, .7); }
.cta-band .cta-inner p { font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.45; color: rgba(255, 255, 255, .84); max-width: none; }
/* the Contact us button under the wording */
.cta-band .cta-inner p.cta-action { margin: clamp(22px, 2.4vw, 32px) 0 0; max-width: none; text-shadow: none; }
.cta-band .btn-brass { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.cta-band .btn-brass::after { background: var(--brass); }
.cta-band .btn-brass:hover, .cta-band .btn-brass:focus-visible { color: #fff; border-color: var(--brass); }
/* no panel behind the buttons; the Call button is solid navy so it reads over the bright photo */
.cta-band .btn-light { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.cta-band .btn { box-shadow: 0 18px 36px -20px rgba(6, 11, 51, .7); }
@media (max-width: 760px) {
  .cta-band::after { background: linear-gradient(180deg, rgba(6, 11, 51, .86) 0%, rgba(6, 11, 51, .7) 48%, rgba(6, 11, 51, .38) 100%); }
  .cta-band .hero-actions { width: 100%; }
}

/* ==========================================================================
   42. Hero figures (the four figures along the bottom of the home hero) — the
   same four in the same row, redesigned without changing their size or
   spacing (the hero is matched to the Formatt hero's height, so nothing here
   may add or remove height): a short light-blue marker sits on the line above
   each figure, thin dividers separate the columns, the figures are brighter
   and the marker stretches on hover.
   ========================================================================== */
.hero-scrub .hero-bar { border-top-color: rgba(255, 255, 255, .28); }
.hero-scrub .hero-bar div { position: relative; color: rgba(255, 255, 255, .92); }
.hero-scrub .hero-bar strong { color: #fff; font-weight: 500; }
/* marker on the line (the bar has 28px of space above the figures, plus its 1px line) */
.hero-scrub .hero-bar div::before {
  content: ""; position: absolute; left: 0; top: -30px; width: 44px; height: 3px;
  background: var(--brass-lt); transition: width .6s var(--ease);
}
@media (hover: hover) { .hero-scrub .hero-bar div:hover::before { width: 88px; } }
/* dividers between the columns, only where the four sit in one row */
@media (min-width: 681px) {
  .hero-scrub .hero-bar div + div::after {
    content: ""; position: absolute; left: -12px; top: 2px; bottom: 2px; width: 1px; background: rgba(255, 255, 255, .2);
  }
}
/* two-by-two on phones: the lower pair has no line above it, so no marker there */
@media (max-width: 680px) {
  .hero-scrub .hero-bar div:nth-child(n+3)::before { display: none; }
}

/* ==========================================================================
   43. Product ribbon (the moving navy strip under the hero) — made thinner at
   the user's request: less space above and below the words, slightly smaller
   lettering, and the two fine inner lines moved in to suit.
   ========================================================================== */
.collection-ribbon .marquee-window { padding-block: 7px; }
.collection-ribbon .marquee-item { padding-block: 14px; font-size: clamp(1.05rem, 1.4vw, 1.4rem); }
.collection-ribbon::before { top: 6px; }
.collection-ribbon::after { bottom: 6px; }
@media (max-width: 600px) {
  .collection-ribbon .marquee-window { padding-block: 6px; }
  .collection-ribbon .marquee-item { padding-block: 12px; }
}

/* ==========================================================================
   44. Even spacing across the whole site.
   Before this, sections used four different amounts of space above and below
   (130, 101, 86 and 84px on a desktop), two different gaps under their
   headings (72 and 43px) and three different left/right edges (64, 69 and
   144px). Now:
   - every section has the same space above and below (--section-y);
   - every section heading has the same gap beneath it;
   - where two sections with the same plain background follow each other, the
     second drops its top space, so the gap between them is not doubled;
   - every section lines up on the same left and right edge as the menu bar,
     the hero and the footer.
   The slim contact band and the product ribbon keep their own sizes, which
   were set on request.
   ========================================================================== */
:root { --section-y: clamp(64px, 7vw, 104px); --container: 1560px; }
main > .section, main > .section-sm, main > section[style] { padding-bottom: var(--section-y) !important; }
main > .section:not(:first-child), main > .section-sm:not(:first-child), main > section[style]:not(:first-child) { padding-top: var(--section-y) !important; }
.section-head, .showcase-head { margin-bottom: clamp(32px, 3.6vw, 52px) !important; }
main > section:not(.bg-warm):not(.bg-ink):not(.page-hero):not(.hero):not(:has(.reviews))
  + section:not(.bg-warm):not(.bg-ink):not(:has(.reviews)) { padding-top: 0 !important; }

/* ==========================================================================
   45. Supplied by — the same four supplier logos in the same row, redesigned
   as one panel: a single white bar with the four logos in equal cells,
   separated by thin dividers, under a centred "Supplied by" label with a rule
   on each side. A cell tints pale blue on hover.
   ========================================================================== */
section:has(.is-suppliers) .section-head { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); max-width: none; }
section:has(.is-suppliers) .section-head .eyebrow { margin-bottom: 0; flex: none; }
section:has(.is-suppliers) .section-head .eyebrow::before { display: none; }
section:has(.is-suppliers) .section-head::before,
section:has(.is-suppliers) .section-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.accred.is-suppliers {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; overflow: hidden;
  background: #fff; border-radius: 8px;
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -44px rgba(6, 11, 51, .55);
}
.accred.is-suppliers img {
  box-sizing: border-box; width: 100%; max-width: none; height: clamp(120px, 11.5vw, 168px);
  padding: clamp(26px, 2.8vw, 42px) clamp(24px, 3.4vw, 56px); object-fit: contain;
  border-left: 1px solid var(--line); transition: background .4s var(--ease);
}
.accred.is-suppliers img:first-child { border-left: 0; }
.accred.is-suppliers img:hover { transform: none; }
@media (hover: hover) { .accred.is-suppliers img:hover { background: var(--paper-warm); } }
@media (max-width: 760px) {
  .accred.is-suppliers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accred.is-suppliers img { height: 104px; }
  .accred.is-suppliers img:nth-child(odd) { border-left: 0; }
  .accred.is-suppliers img:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ==========================================================================
   46. Partnership — the wording on the left and the NSL logo on the right,
   straight on the section background: no panel, no box, no dividing line (the
   user removed each in turn). "One Team. One Solution." is blue, the
   paragraph is toned down, and the logo is shown large in its own black.
   ========================================================================== */
.split:has(.partner-mark) h2 em { color: var(--brass); }
.split:has(.partner-mark) .split-body p { color: var(--ink-mute); max-width: 56ch; }
.split > div:has(> .partner-mark) { display: grid; place-items: center; }
.partner-mark { padding: 0; border: 0; background: none; }
/* multiply lets the logo's white background take on the section colour */
.partner-mark img { height: clamp(104px, 11vw, 156px); mix-blend-mode: multiply; }

/* ==========================================================================
   47. Home page extension — more detail about Multistock: a short intro under
   section headings, the "What we do" cards, the Google rating under the
   reviews heading, and the "Visit us" showroom block.
   ========================================================================== */
.section-intro { margin: 1.1em 0 0; max-width: 60ch; font-size: clamp(1.02rem, 1.25vw, 1.16rem); line-height: 1.6; color: var(--ink-mute); }
.section-head-row-text .section-intro { max-width: 52ch; }
.card-grid.cols-4:has(.feature) .feature h3 { font-size: clamp(1.15rem, 1.4vw, 1.32rem); line-height: 1.2; }
.card-grid.cols-4:has(.feature) .feature p { font-size: .97rem; max-width: none; }
@media (max-width: 1100px) { .card-grid.cols-4:has(.feature) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .card-grid.cols-4:has(.feature) { grid-template-columns: 1fr; } }

/* Google rating under "What our customers say." */
.section-head .review-score { margin-top: 1.4rem; }
.review-score:hover { background: none; border-color: var(--line-dark); }

/* Visit us */
/* wording and buttons on top, the three detail cards in a full-width row beneath */
.visit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 3.4vw, 48px) clamp(32px, 5vw, 84px); align-items: end; }
.visit-copy { display: contents; }
.visit-copy > .eyebrow, .visit-copy > h2, .visit-copy > .section-intro { grid-column: 1; }
.visit-copy > .eyebrow { margin-bottom: -.6em; align-self: end; }
.visit-copy > h2 { margin: 0; }
.visit-copy > .section-intro { margin-top: -.6em; }
.visit-copy > .visit-actions { grid-column: 2; grid-row: 2 / span 2; margin: 0; align-self: end; }
.visit-cards { grid-column: 1 / -1; }
.visit h2 em { color: var(--brass); }
.visit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin: clamp(24px, 2.6vw, 34px) 0 0; }
.visit-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--stack); }
.visit-card {
  padding: clamp(22px, 2.4vw, 32px); background: var(--white); border-radius: 6px;
  box-shadow: 0 0 0 1px var(--line), 0 20px 40px -34px rgba(6, 11, 51, .5);
}
.visit-card h3 {
  display: flex; align-items: center; gap: 12px; margin-bottom: 1.1em;
  font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink);
}
.visit-card h3::before { content: ""; width: 24px; height: 2px; background: var(--brass); }
.visit-card p, .visit-card dd, .visit-card dt { margin: 0; font-size: 1.02rem; line-height: 1.5; color: var(--ink); }
.visit-card p + p { margin-top: .35em; }
.visit-card a { overflow-wrap: anywhere; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease), color .3s var(--ease); }
.visit-card a:hover { color: var(--brass); background-size: 100% 1px; }
.visit-card dl { margin: 0; }
.visit-card dl div { display: flex; justify-content: space-between; gap: 12px; padding: .42em 0; border-bottom: 1px solid var(--line); }
.visit-card dl div:last-child { border-bottom: 0; }
.visit-card dt { color: var(--ink-mute); }
.visit-card .visit-note { margin-top: 1em; font-size: .9rem; color: var(--ink-mute); }
@media (max-width: 900px) {
  .visit { grid-template-columns: 1fr; }
  .visit-copy > .visit-actions { grid-column: 1; grid-row: auto; }
}
@media (max-width: 700px) { .visit-cards { grid-template-columns: 1fr; } }

/* ==========================================================================
   48. Google reviews button — beside the review arrows; opens the business's
   reviews on Google in a new tab.
   ========================================================================== */
.review-google { padding: .95em 1.4em; border-color: rgba(255, 255, 255, .4); color: #fff; }
.review-google .review-g, .review-google svg { width: 17px; height: 17px; flex: none; }

/* ==========================================================================
   49. Slimmer footer — the same content with less space above, between and
   below it, at the user's request.
   ========================================================================== */
.site-footer { padding-top: clamp(34px, 3.6vw, 52px); }
.footer-top { gap: clamp(22px, 3vw, 44px); padding-bottom: clamp(24px, 2.8vw, 36px); }
.site-footer .brand img { height: 46px; margin-bottom: 1.1rem; }
.footer-blurb { font-size: .92rem; line-height: 1.55; }
.footer-col h4 { margin-bottom: .95em; }
.footer-col ul { gap: .42rem; }
.footer-col a, .footer-col li, .footer-col p { font-size: .92rem; }
.footer-social { margin-top: 1rem; }
.footer-social a { width: 38px; height: 38px; }
.footer-bottom { padding-block: 16px; }

/* ==========================================================================
   50. Footer — the same four columns and the same wording, in the stats
   band's navy with its two soft blue lights. Headings carry a short blue
   marker, columns are split by hairlines, the contact details have icons,
   the opening hours line up as a table, and the bottom rule stops short of
   the back-to-top button so the two no longer cross.
   ========================================================================== */
.site-footer {
  position: relative; isolation: isolate;
  background:
    radial-gradient(70% 140% at 12% 0%, rgba(61, 91, 255, .22), transparent 62%),
    radial-gradient(60% 120% at 100% 100%, rgba(61, 91, 255, .12), transparent 60%),
    var(--ink);
}
.site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, var(--brass), var(--brass-lt) 38%, transparent 82%);
}
.footer-blurb { color: #fff; max-width: 38ch; }

/* Headings: small caps over a short blue marker. */
.footer-col h4 { position: relative; padding-bottom: .85em; margin-bottom: .95em; letter-spacing: .22em; }
.footer-col h4::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px;
  background: var(--brass-lt);
}

/* Hairlines between the columns while they sit side by side. */
@media (min-width: 1081px) {
  .footer-top { gap: 0; grid-template-columns: 1.35fr 1.1fr .95fr 1.3fr; }
  .footer-top > div:first-child { padding-right: clamp(28px, 4vw, 64px); }
  .footer-col { padding-left: clamp(22px, 2.6vw, 40px); border-left: 1px solid rgba(255, 255, 255, .12); }
}

/* Links: a short blue dash slides in on hover. */
.footer-col:not(.footer-contact) ul a {
  position: relative; display: inline-block; color: #fff;
  transition: color .35s var(--ease), padding-left .35s var(--ease);
}
.footer-col:not(.footer-contact) ul a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px;
  background: var(--brass-lt); transition: width .35s var(--ease);
}
.site-footer .footer-col:not(.footer-contact) ul a:hover { color: #fff; padding-left: 18px; }
.footer-col:not(.footer-contact) ul a:hover::before { width: 11px; }

/* Contact details with icons. */
.footer-contact ul { gap: .7rem; }
.footer-contact ul a {
  display: flex; align-items: center; gap: 12px; padding-left: 0; color: #fff;
  line-height: 1.45; transition: color .35s var(--ease);
}
.site-footer .footer-contact ul a:hover { padding-left: 0; color: #fff; }
.fc-ico {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--brass-lt);
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04);
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.fc-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.footer-contact ul a:hover .fc-ico { background: var(--brass); border-color: var(--brass); color: #fff; }
.footer-contact li:first-child a { font-weight: 600; color: #fff; letter-spacing: .01em; }

/* Opening hours as a small table. */
.footer-hours { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .88rem; }
.footer-hours strong {
  display: block; margin-bottom: .6rem; font-size: .68rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: #fff;
}
.footer-hours dl { margin: 0; display: grid; gap: .32rem; max-width: 250px; }
.footer-hours dl > div { display: flex; justify-content: space-between; gap: 16px; }
.footer-hours dt { color: #fff; }
.footer-hours dd { margin: 0; color: #fff; font-variant-numeric: tabular-nums; }
.footer-hours .is-closed dd { color: #fff; }

/* Social buttons sit on the same glass as the contact icons. */
.footer-social a { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .16); }

/* Bottom strip: the rule fades out before the back-to-top button. */
.footer-bottom { position: relative; border-top: 0; font-size: .8rem; color: #fff; align-items: center; }
.footer-bottom::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: rgba(255, 255, 255, .14);
}
@media (min-width: 761px) {
  .footer-bottom { padding-right: 70px; }
  .footer-bottom::before { right: 70px; background: linear-gradient(90deg, rgba(255, 255, 255, .14) 82%, transparent); }
}
.to-top { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), var(--shadow-md); }
/* Phones: leave room so the fixed Call us / Contact us bar never covers the last line. */
@media (max-width: 760px) {
  .site-footer { padding-bottom: 68px; }
  .footer-bottom { padding-right: 58px; }
}
@media (min-width: 1340px) { .footer-col:not(.footer-contact) ul a { white-space: nowrap; } }
@media (min-width: 1081px) and (max-width: 1339px) { .footer-col h4 { white-space: nowrap; letter-spacing: .14em; } }

/* ==========================================================================
   51. Visit us — one column: the heading and wording, then the showroom
   address straight underneath with no box around it (pin, label, address,
   wholesale line), then the Get directions link.
   ========================================================================== */
.visit.is-stacked { display: block; }
.visit-copy { display: block; }
.visit-copy > .eyebrow { margin-bottom: 0; }
.visit-copy > h2 { margin: .5em 0 0; }
.visit-copy > .section-intro { margin-top: 1.1em; max-width: 62ch; }
.visit-showroom {
  display: flex; align-items: flex-start; gap: clamp(16px, 1.6vw, 22px);
  margin-top: clamp(26px, 2.8vw, 38px);
}
.visit-ico {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: var(--brass);
  background: rgba(26, 52, 209, .08); box-shadow: inset 0 0 0 1px rgba(26, 52, 209, .18);
}
.visit-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.visit-showroom h3 {
  margin: 0 0 .7em; font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink);
}
.visit-showroom .visit-address {
  margin: 0; font-family: var(--font-display); font-size: clamp(1.4rem, 1.8vw, 1.8rem); font-weight: 500;
  line-height: 1.22; letter-spacing: -.01em; color: var(--ink);
}
.visit-showroom .visit-address a { transition: color .3s var(--ease); }
.visit-showroom .visit-address a:hover { color: var(--brass); }
.visit-showroom .visit-note { margin: .8em 0 0; font-size: .95rem; line-height: 1.5; color: var(--ink-mute); }
.visit-copy > .visit-actions { margin: clamp(22px, 2.4vw, 30px) 0 0; padding-left: calc(52px + clamp(16px, 1.6vw, 22px)); }
@media (max-width: 480px) {
  .visit-copy > .visit-actions { padding-left: 0; }
}

/* Centred: everything in the section sits on the middle line, with the pin
   above the showroom label. */
.visit.is-stacked { text-align: center; }
.visit-copy > .eyebrow { justify-content: center; }
.visit-copy > .section-intro { margin-inline: auto; }
.visit-showroom { flex-direction: column; align-items: center; gap: 14px; }
.visit-copy > .visit-actions { padding-left: 0; justify-content: center; }

/* ==========================================================================
   52. Inner pages in the home page's colours — colour only, no wording or
   layout changes. The grey-black washes left from the template become the
   home page's navy: page heroes fade to navy behind the heading like the
   contact band, product cards and gallery photos darken to navy, and the
   italic heading accents are the home page's blue.
   ========================================================================== */
.page-hero {
  background:
    radial-gradient(70% 140% at 12% 0%, rgba(61, 91, 255, .22), transparent 62%),
    radial-gradient(60% 120% at 100% 100%, rgba(61, 91, 255, .12), transparent 60%),
    var(--ink);
}
/* A soft navy tint: darkest behind the heading (bottom left), easing away in many small
   steps so there is no visible edge, and the photo stays clear across the rest. */
.page-hero .hero-media::after {
  background:
    linear-gradient(180deg, rgba(6, 11, 51, .46) 0%, rgba(6, 11, 51, .2) 14%, rgba(6, 11, 51, 0) 32%),
    linear-gradient(0deg, rgba(6, 11, 51, .44) 0%, rgba(6, 11, 51, .24) 24%, rgba(6, 11, 51, .08) 48%, rgba(6, 11, 51, 0) 68%),
    linear-gradient(90deg, rgba(6, 11, 51, .56) 0%, rgba(6, 11, 51, .46) 14%, rgba(6, 11, 51, .33) 28%, rgba(6, 11, 51, .2) 42%, rgba(6, 11, 51, .1) 56%, rgba(6, 11, 51, .04) 70%, rgba(6, 11, 51, 0) 84%);
}
.page-hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; z-index: 2; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--brass), var(--brass-lt) 40%, transparent 80%);
}
.page-hero-body { text-shadow: 0 1px 3px rgba(6, 11, 51, .35), 0 2px 26px rgba(6, 11, 51, .6); }
@media (max-width: 760px) {
  .page-hero .hero-media::after {
    background: linear-gradient(180deg, rgba(6, 11, 51, .5) 0%, rgba(6, 11, 51, .16) 26%, rgba(6, 11, 51, .22) 50%, rgba(6, 11, 51, .56) 78%, rgba(6, 11, 51, .74) 100%);
  }
}

/* Product cards and gallery photos: navy fade, light-blue range label. */
.masonry-item::after { background: linear-gradient(180deg, transparent 45%, rgba(6, 11, 51, .82) 100%); }
.masonry-item[data-category]::after { background: linear-gradient(180deg, rgba(6, 11, 51, 0) 44%, rgba(6, 11, 51, .8) 100%); }
.masonry-item[data-category] .masonry-cap { text-shadow: 0 1px 10px rgba(6, 11, 51, .6); }
.masonry-item[data-category] .masonry-cap span { color: var(--brass-lt); opacity: 1; }

/* Italic heading accents in the home page's blue on light sections. */
main > section:not(.bg-ink):not(.cta-band):not(.hero):not(.page-hero):not(:has(.reviews)) :is(h1, h2) em { color: var(--brass); }

/* Filter pills: blue on hover, navy when chosen (as the home page buttons). */
.filter-btn:hover { border-color: var(--brass); color: var(--brass); }
.filter-btn.is-active, .filter-btn.is-active:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter-btn.is-active .filter-count { color: var(--brass-lt); opacity: 1; }

/* ==========================================================================
   53. Home hero, brighter — the video itself is lifted a little and the dark
   wash over it is roughly halved; the wording keeps a soft shadow so it still
   reads over the lighter picture.
   ========================================================================== */
.hero-scrub .hero-media video { filter: brightness(1.08) saturate(1.05); }
.hero-scrub .hero-media::after {
  background:
    /* a thin shade behind the menu, one behind the figures, and a soft one behind the wording,
       so all three still read when the video shows a white room */
    linear-gradient(180deg, rgba(10,12,14,.42) 0%, rgba(10,12,14,.18) 11%, rgba(10,12,14,0) 24%),
    linear-gradient(0deg, rgba(10,12,14,.42) 0%, rgba(10,12,14,.14) 20%, rgba(10,12,14,0) 38%),
    linear-gradient(100deg, rgba(10,12,14,.34) 0%, rgba(10,12,14,.13) 40%, rgba(10,12,14,0) 68%);
}
.hero-scrub .hero-body { text-shadow: 0 1px 3px rgba(10,12,14,.4), 0 2px 22px rgba(10,12,14,.55); }

/* ==========================================================================
   54. Why builders choose us — a new layout with the same wording and fonts.
   Everything reads down the left: label, heading, the summary line with its
   blue marker, the paragraph, then the seven reasons as a two-column ticked
   list (the last, longest reason runs the full width). The basin photo is a
   tall upright panel on the right, the full height of the wording.
   ========================================================================== */
.why {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(36px, 5.5vw, 96px); align-items: stretch;
}
.why-body h2 { margin: .5em 0 0; }
.why-body h2 em { color: var(--brass); }
.why-body .lead {
  margin-block: 1.5em 1.1em; padding: .15em 0 .15em 18px; border-left: 3px solid var(--brass);
  font-family: var(--font-display); font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.3; color: var(--ink);
}
.why-body .why-text { margin: 0; color: var(--ink-mute); max-width: 62ch; }

/* The reasons: two columns, round tick badges, hairlines. No hover effect (removed at the user's request). */
.why-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.6vw, 40px); margin: clamp(26px, 2.8vw, 38px) 0 0; }
.why-list li {
  position: relative; align-items: center; gap: 14px; padding: 15px 0;
  font-size: 1rem; line-height: 1.4; color: var(--ink);
  transition: padding-left .45s var(--ease);
}
.why-list li:nth-child(2) { border-top: 1px solid var(--line); }
.why-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.why-list svg {
  box-sizing: border-box; width: 36px; height: 36px; margin-top: 0; padding: 9px; border-radius: 50%;
  color: var(--brass); stroke-width: 2;
  background: rgba(26, 52, 209, .08); box-shadow: inset 0 0 0 1px rgba(26, 52, 209, .16);
  transition: background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}

/* The photo: an upright panel as tall as the wording, with the site's slow hover zoom. */
.why-photo {
  position: relative; margin: 0; overflow: hidden; border-radius: var(--radius);
  min-height: 420px; background: var(--paper-warm);
  box-shadow: 0 34px 64px -44px rgba(6, 11, 51, .6);
}
.why-photo img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 84% 50%; transition: scale 1.1s var(--ease);
}
@media (hover: hover) { .why-photo:hover img { scale: 1.06; } }
@media (prefers-reduced-motion: reduce) { .why-photo:hover img { scale: 1; } }

@media (min-width: 961px) and (max-width: 1240px) {
  /* a narrower, taller panel: a slightly wider photo column, centred on the basin and bottle */
  .why { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 4vw, 56px); }
  .why-photo img { object-position: 62% 50%; }
}
@media (max-width: 960px) {
  /* stacked: the wording, then the photo as a wide frame */
  .why { grid-template-columns: 1fr; }
  .why-photo { min-height: 0; aspect-ratio: 3 / 2; }
  .why-photo img { object-position: 60% 50%; }
}
@media (max-width: 560px) {
  .why-list { grid-template-columns: 1fr; }
  .why-list li:nth-child(2) { border-top: 0; }
}

/* ==========================================================================
   55. Perfect for — no boxes. The label, heading and summary line run across
   the top. Under them, side by side: the upright living-room photo on the left
   (shown whole) and the six kinds of project on
   the right as a two-column list — number, name and one line of detail —
   split only by hairlines and sharing the photo's height. No hover effects
   on the list and no line under the photo.
   ========================================================================== */
.pfx { display: block; }
.pfx-head h2 { margin: .5em 0 0; }
.pfx-head h2 em { color: var(--brass); }
/* the summary line under the heading (same grey paragraph as Why builders choose us) */
.pfx-intro { margin: 1.1em 0 0; max-width: 70ch; color: var(--ink-mute); }

.pfx-row {
  display: grid; grid-template-columns: clamp(300px, 33vw, 380px) minmax(0, 1fr);   /* photo about as tall as the list */
  gap: clamp(32px, 4.6vw, 76px); align-items: stretch;
  margin-top: clamp(30px, 3.4vw, 48px);
}
.pfx-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr;
  column-gap: clamp(24px, 3vw, 48px);
}
.pfx-list li {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(16px, 1.7vw, 24px) 0; border-top: 1px solid rgba(6, 11, 51, .14);
}
.pfx-list li:nth-last-child(-n+2) { border-bottom: 1px solid rgba(6, 11, 51, .14); }
.pfx-list span {
  display: flex; align-items: center; gap: 12px; margin-bottom: .95em;
  font-size: .7rem; font-weight: 600; letter-spacing: .2em; color: var(--brass);
}
.pfx-list span::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.pfx-list strong {
  display: block; font-family: var(--font-display); font-size: clamp(1.16rem, 1.45vw, 1.42rem); font-weight: 500;
  line-height: 1.18; letter-spacing: -.012em; color: var(--ink);
}
.pfx-list p { margin: .6em 0 0; font-size: .95rem; line-height: 1.55; color: var(--ink-mute); }

/* The photo: the user's upright living-room photo, shown whole. The frame has the photo's own
   2:3 shape, so nothing is cropped and there is nothing to fill above or below it. */
.pfx-photo {
  position: relative; margin: 0; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 2 / 3; width: 100%; align-self: center; background: var(--white);   /* sized by its column, never by the list */
  box-shadow: 0 34px 64px -44px rgba(6, 11, 51, .6);
}
.pfx-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease); }
@media (hover: hover) { .pfx-photo:hover img { scale: 1.05; } }
@media (prefers-reduced-motion: reduce) { .pfx-photo:hover img { scale: 1; } }

@media (max-width: 960px) {
  /* stacked: the photo (kept upright and whole, at a modest width), then the list */
  .pfx-row { grid-template-columns: 1fr; }
  .pfx-photo { width: min(100%, 340px); }
  .pfx-list { grid-auto-rows: auto; }
}
@media (max-width: 560px) {
  .pfx-list { grid-template-columns: 1fr; }
  .pfx-list li:nth-last-child(2) { border-bottom: 0; }
}

/* ==========================================================================
   56. Supplied by, no boxes — just the four logos in a row on the page
   background: no white panel, no outline, no dividers, no shadow and no
   hover tint. The logos blend into the page so a logo with a white
   background (RAP Global) does not show as a white patch.
   ========================================================================== */
.accred.is-suppliers {
  /* the page colour (not "none"), so the logos always have something to blend into */
  background: var(--paper); border-radius: 0; box-shadow: none; overflow: visible;
  align-items: center; column-gap: clamp(24px, 4vw, 72px);
}
.accred.is-suppliers img {
  border: 0 !important; background: none !important; padding: 0;
  height: clamp(64px, 6.4vw, 96px); mix-blend-mode: multiply;
}
@media (max-width: 760px) {
  .accred.is-suppliers { row-gap: 30px; }
  .accred.is-suppliers img { height: 62px; }
}

/* ==========================================================================
   57. The difference, no boxes — the three points sit straight on the
   section: no white card, outline, shadow, top line or hover lift. Each is
   centred under the centred heading (icon tile, title, line of text), with a
   thin divider between the columns.
   ========================================================================== */
.card-grid.is-unboxed { gap: 0; }
.card-grid.is-unboxed .feature {
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  padding: clamp(6px, 1vw, 14px) clamp(20px, 3vw, 48px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transform: none; translate: none;
}
.card-grid.is-unboxed .feature + .feature { border-left: 1px solid rgba(6, 11, 51, .14); }
.card-grid.is-unboxed .feature::before { display: none; }
.card-grid.is-unboxed .feature:hover { background: none; border-color: rgba(6, 11, 51, .14); box-shadow: none; transform: none; translate: none; }
.card-grid.is-unboxed .feature:hover .feature-icon { background: rgba(26, 52, 209, .09); color: var(--brass); }
.card-grid.is-unboxed .feature-icon { margin-bottom: 1.4rem; }
.card-grid.is-unboxed .feature p { margin-inline: auto; }
@media (max-width: 760px) {
  /* stacked: the dividers run between the rows instead */
  .card-grid.is-unboxed { grid-template-columns: 1fr; }
  .card-grid.is-unboxed .feature { padding: 26px 0; }
  .card-grid.is-unboxed .feature:first-child { padding-top: 0; }
  .card-grid.is-unboxed .feature:last-child { padding-bottom: 0; }
  .card-grid.is-unboxed .feature + .feature { border-left: 0; border-top: 1px solid rgba(6, 11, 51, .14); }
}

/* ==========================================================================
   58. Partnership, centred — one centred column: the label, the heading,
   the NSL logo under the heading, then the paragraph under the logo. Still
   no panel, box or line.
   ========================================================================== */
.partner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.partner h2 { margin: .5em 0 0; max-width: 20ch; }
.partner h2 em { color: var(--brass); }
.partner .partner-mark { margin: clamp(28px, 3.2vw, 46px) 0; }
.partner .partner-mark img { display: block; height: clamp(96px, 10vw, 140px); }
.partner p { margin: 0; max-width: 62ch; color: var(--ink-mute); }

/* ==========================================================================
   59. One set of text sizes for the whole site, taken from the About section
   (the sizes the user picked). Every page now uses the same five steps:
     heading     — every section heading            (About's heading size)
     lead        — the larger opening line           (About's first paragraph)
     body        — paragraphs and intro lines        (About's paragraphs)
     item title  — the title of a card or list item
     detail      — the line of text under an item title
   Sizes only: fonts, weights and colours are untouched. The big titles over
   the hero photos and the small labels were already the same on every page.
   ========================================================================== */
:root {
  --t-h2: clamp(2.2rem, 4.3vw, 3.75rem);
  --t-lead: clamp(1.16rem, 1.62vw, 1.42rem);
  --t-item: clamp(1.22rem, 1.5vw, 1.4rem);
  --t-detail: 1rem;
}
/* heading */
main h2, .cta-band h2 { font-size: var(--t-h2); }
/* lead */
main > section:not(.hero):not(.page-hero) .lead { font-size: var(--t-lead); }
/* body (1.08 x the page's base size, as in About) */
.section-intro, .why-body .why-text, .pfx-intro, .partner p,
.split > div > p:not(.lead), .intro-copy > p, .section-head > p:not(.lead),
.acc-panel-inner > p, .cta-band .cta-inner p { font-size: 1.08em; line-height: 1.72; }
/* item title */
.feature h3, .card-grid.cols-4:has(.feature) .feature h3, .pfx-list strong { font-size: var(--t-item); }
/* detail */
.service-card p, .feature p, .card-grid.cols-4:has(.feature) .feature p, .pfx-list p, .why-list li,
.visit-showroom .visit-note, .contact-item p { font-size: var(--t-detail); line-height: 1.55; }

/* Partnership heading: "One Team. One Solution." on its own line above the rest. */
.partner h2 { max-width: 24ch; }
.partner h2 em { display: block; }

/* ==========================================================================
   61. About — the layout from the user's mock-up (three photos on the left:
   one tall, two stacked beside it and set slightly lower; wording on the
   right), with the site's own text styles and colours on the plain page
   background. Text sizes are the site's shared sizes (59).
   ========================================================================== */
.about {
  display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 104px); align-items: center;
}
/* photos */
.about-photos { display: grid; grid-template-columns: 1.38fr 1fr; gap: 12px; }
.about-photo { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--paper-warm); }
.about-photo.is-tall { aspect-ratio: 241 / 444; }
.about-photo-col { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; margin-top: 8.2%; }
.about-photo img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
  transition: scale 1.1s var(--ease);
}
@media (hover: hover) { .about-photo:hover img { scale: 1.06; } }
@media (prefers-reduced-motion: reduce) { .about-photo:hover img { scale: 1; } }
/* wording — the same text styles and colours as "Why builders choose us": blue label, bold
   heading with its highlighted words in blue italics, the opening line in the heading font
   beside a blue marker, grey paragraphs, and the site's Contact us link. */
.about-body h2 { margin: .5em 0 0; }
.about-body h2 em { color: var(--brass); }
.about-body .lead {
  margin-block: 1.5em 1.1em; padding: .15em 0 .15em 18px; border-left: 3px solid var(--brass);
  font-family: var(--font-display); line-height: 1.3; color: var(--ink); max-width: 46ch;
}
.about-body > p:not(.lead):not(.about-tag):not(.about-link) { font-size: 1.08em; line-height: 1.72; color: var(--ink-mute); max-width: 60ch; }
.about-tag { margin: 1.4em 0 0; }
.about-tag span { font-family: var(--font-display); font-size: var(--t-item); font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.about-link { margin: 1.6em 0 0; }
@media (max-width: 960px) {
  .about { grid-template-columns: 1fr; }
  .about-photos { max-width: 560px; }
}

/* ==========================================================================
   62. Products intro — the longer summary under "Products" gets a wider
   measure so it stays at three lines beside the "View all products" link.
   ========================================================================== */
#products .section-head-row-text { max-width: min(100%, 900px); }
#products .section-head-row-text .section-intro { max-width: 78ch; }

/* ==========================================================================
   63. What we do, no boxes — the four points keep their own design (icon
   tile, title, line of text, left-aligned under the left-aligned heading)
   but sit straight on the page: no white card, outline, shadow or hover. A
   hairline runs across the top of the row and thin dividers separate the
   columns.
   ========================================================================== */
.card-grid.is-unboxed.is-left { border-top: 1px solid rgba(6, 11, 51, .14); }
.card-grid.is-unboxed.is-left .feature {
  align-items: flex-start; text-align: left;
  padding: clamp(28px, 2.8vw, 40px) clamp(20px, 2.4vw, 36px) 0;
}
.card-grid.is-unboxed.is-left .feature:first-child { padding-left: 0; }
.card-grid.is-unboxed.is-left .feature:last-child { padding-right: 0; }
.card-grid.is-unboxed.is-left .feature p { margin-inline: 0; }
@media (max-width: 1100px) {
  /* two across: dividers only between the pairs, a hairline between the rows */
  .card-grid.is-unboxed.is-left { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid.is-unboxed.is-left .feature { padding-bottom: clamp(28px, 2.8vw, 40px); }
  .card-grid.is-unboxed.is-left .feature:nth-child(odd) { padding-left: 0; border-left: 0; }
  .card-grid.is-unboxed.is-left .feature:nth-child(even) { padding-right: 0; border-left: 1px solid rgba(6, 11, 51, .14); border-top: 0; }
  .card-grid.is-unboxed.is-left .feature:nth-child(n+3) { border-top: 1px solid rgba(6, 11, 51, .14); }
  .card-grid.is-unboxed.is-left .feature:nth-last-child(-n+2) { padding-bottom: 0; }
}
@media (max-width: 600px) {
  /* one column: hairlines between the points */
  .card-grid.is-unboxed.is-left { grid-template-columns: 1fr; }
  .card-grid.is-unboxed.is-left .feature { padding: 26px 0; border-left: 0 !important; }
  .card-grid.is-unboxed.is-left .feature + .feature { border-top: 1px solid rgba(6, 11, 51, .14); }
  .card-grid.is-unboxed.is-left .feature:nth-last-child(2) { padding-bottom: 26px; }
  .card-grid.is-unboxed.is-left .feature:last-child { padding-bottom: 0; }
}

/* ==========================================================================
   64. Products text, coloured like About — the opening line is the navy lead
   in the heading font beside a blue marker (the same style as About's
   opening line), and the rest stays the grey paragraph.
   ========================================================================== */
#products .section-head-row-text .lead {
  margin-block: 1.2em .9em; padding: .15em 0 .15em 18px; border-left: 3px solid var(--brass);
  font-family: var(--font-display); line-height: 1.3; color: var(--ink);
}
#products .section-head-row-text .section-intro { margin-top: 0; }

/* ==========================================================================
   65. Subtext, more visible — on every page. The grey-blue used for
   paragraphs and supporting lines keeps its colour but is a clear step
   darker (#474E6B -> #2B3252), and the supporting lines that sit on navy or
   on photos go from a dimmed white to almost full white.
   ========================================================================== */
:root { --ink-mute: #2B3252; }
/* on navy / over photos */
.bg-ink .lead, .bg-ink p, .bg-ink .stat > span, .stat-row .stat > span,
.service-card p, .cta-band .cta-inner p, .page-hero p, .page-hero .lead,
.hero-scrub .hero-lead, .hero-scrub .hero-bar div,
.review-card:not(.is-active) blockquote, .review-score > span:last-child, .quote-count,
.page-hero .breadcrumb, .lightbox-meta { color: rgba(255, 255, 255, .96); }

/* ==========================================================================
   66. What we do intro — the longer summary gets a wider measure so it stays
   at three lines on desktop.
   ========================================================================== */
.section-head.is-wide-intro { max-width: min(100%, 940px); }
.section-head.is-wide-intro .section-intro { max-width: 80ch; }

/* ==========================================================================
   67. Stats band, thinner — the same four figures with about half the space
   above and below, a smaller gap under the markers and slightly smaller
   numbers, so the navy band is roughly a third shorter.
   ========================================================================== */
main > section.bg-ink:has(.stat-row) { padding-block: clamp(34px, 3.6vw, 52px) !important; }
.bg-ink .stat::before { margin-bottom: clamp(12px, 1.3vw, 18px); }
.bg-ink .stat strong { font-size: clamp(2.5rem, 4.3vw, 4rem); margin-bottom: .22em; }
@media (max-width: 900px) { .bg-ink .stat-row { row-gap: clamp(26px, 4.5vw, 38px); } }
@media (max-width: 420px) { .bg-ink .stat strong { font-size: 2.3rem; } }

/* ==========================================================================
   68. The difference — a line with three points on it. The heading is
   centred; under it one blue line runs across, and each of the three points
   is a round blue marker sitting on the line (its icon in white), with the
   title and its line of text underneath. Same wording and colours; no boxes,
   no dividers, no hover. It plays once when it scrolls into view: Premium
   Quality appears, the line draws across to Expert Support, then on to Fast
   Delivery (about a second and a half; never repeats). (Earlier tries, all replaced at the user's request:
   cards, plain columns, a split with ruled rows, a staircase.)
   ========================================================================== */
.track-head { text-align: center; margin-bottom: clamp(40px, 4.6vw, 68px); }
.track-head h2 { margin: .5em auto 0; }
.track-head h2 em { display: block; color: var(--brass); }
.track-row { position: relative; }
.track-list {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px);
}
/* the line: from the first marker to the last, behind them */
.track-line {
  position: absolute; top: 35px; left: 16.666%; right: 16.666%; height: 2px;
  background: var(--brass); transform-origin: left center;   /* drawn left to right by js/site.js (initTrack) */
}
.track-list li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.track-node {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: var(--brass); color: #fff; margin-bottom: clamp(20px, 2vw, 28px);
  box-shadow: 0 0 0 8px var(--paper-warm);   /* a gap in the line either side of the marker */
}
.track-node svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.track-list h3 { margin: 0 0 .4em; font-size: var(--t-item); line-height: 1.18; }
.track-list p { margin: 0; max-width: 30ch; font-size: var(--t-detail); line-height: 1.55; color: var(--ink-mute); }
@media (max-width: 700px) {
  /* phones: the line runs down the left with the three markers on it */
  .track-head { text-align: left; }
  .track-head .eyebrow { justify-content: flex-start; }
  .track-head h2 { margin-inline: 0; }
  .track-list { grid-template-columns: 1fr; row-gap: 30px; }
  .track-line { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; transform-origin: center top; }
  .track-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; align-items: center; text-align: left; }
  .track-node { width: 56px; height: 56px; margin: 0; grid-row: 1 / span 2; box-shadow: 0 0 0 6px var(--paper-warm); }
  .track-node svg { width: 22px; height: 22px; }
  .track-list h3 { align-self: end; margin-bottom: .2em; }
  .track-list p { align-self: start; max-width: none; }
}

/* ==========================================================================
   69. Home hero photo — the hero now shows a still photo (the kitchen) in
   place of the video. It fills the hero exactly as the video did, so the
   hero's size is unchanged; the same light shades sit over it behind the
   menu, the wording and the figures.
   ========================================================================== */
.hero-scrub .hero-media img.hero-photo {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%;
  transform: none; filter: none;
}
@media (max-width: 760px) { .hero-scrub .hero-media img.hero-photo { object-position: 46% 50%; } }
/* narrower windows put the wording over the pale stone bench: a slightly stronger shade behind it */
@media (max-width: 1100px) {
  .hero-scrub .hero-media::after {
    background:
      linear-gradient(180deg, rgba(10,12,14,.42) 0%, rgba(10,12,14,.18) 11%, rgba(10,12,14,0) 24%),
      linear-gradient(0deg, rgba(10,12,14,.5) 0%, rgba(10,12,14,.2) 22%, rgba(10,12,14,0) 42%),
      linear-gradient(100deg, rgba(10,12,14,.5) 0%, rgba(10,12,14,.34) 50%, rgba(10,12,14,.14) 100%);
  }
}

/* ==========================================================================
   70. Home hero parallax — the Formatt hero effect: as the page scrolls, the
   photo drifts down more slowly than the wording, so it seems to sit still
   behind it (js/site.js, initParallax, driven by data-parallax on the image).
   The photo needs spare room to move, so it fills the hero edge to edge
   (the earlier "whole photo with a blurred reflection under it" is gone);
   the hero itself is the same size as before.
   ========================================================================== */
.hero-scrub .hero-media { overflow: hidden; }
.hero-scrub .hero-media img.hero-photo {
  object-fit: cover; object-position: 50% 50%;
  will-change: transform; backface-visibility: hidden;
}
@media (max-width: 760px) { .hero-scrub .hero-media img.hero-photo { object-position: 62% 50%; } }

/* ==========================================================================
   72. Why builders choose us photo — the user's upright basin photo
   (1122 x 1402). Side by side with the wording (961px and up) it runs the
   full height of the wording, top and bottom level with the text; the frame
   is then narrower than the photo's shape, so a strip is cropped from the
   left, keeping the basin and tap in view. Stacked (phones, tablets) it
   shows whole in its own shape. Reveal on scroll and hover zoom unchanged.
   ========================================================================== */
@media (min-width: 961px) {
  .why { align-items: stretch; }
  .why-photo { align-self: stretch; aspect-ratio: auto; min-height: 420px; }
  .why-photo img { object-position: 82% 50%; }
}
/* the narrowest side-by-side widths: the frame is slimmest, so centre the crop on basin and tap */
@media (min-width: 961px) and (max-width: 1100px) { .why-photo img { object-position: 78% 50%; } }
@media (max-width: 960px) {
  .why-photo { min-height: 0; aspect-ratio: 1122 / 1402; width: min(100%, 420px); }
  .why-photo img { object-position: 50% 50%; }
}

/* ==========================================================================
   73. Small fixes, 2026-10-06
   ========================================================================== */
/* "What we do" heading: the dash after "supplier" is gone, so the blue words always start
   their own line (otherwise a wide window would run the two halves together). */
.section-head.is-wide-intro h2 em { display: block; }

/* Logo over the hero photo: the real colour logo (navy and green) in a pale pill, in place
   of the all-white logo. The pill is the colour the bar turns when you scroll, and the logo
   stays in the same spot, so nothing jumps when the bar becomes solid. */
.has-hero .site-header .brand {
  padding: 8px 26px 8px 20px; margin-left: -20px; border-radius: 999px;
  background: transparent; transition: background .45s var(--ease), box-shadow .45s var(--ease);
}
.has-hero .site-header:not(.is-solid) .brand {
  background: var(--paper); box-shadow: 0 12px 30px -14px rgba(6, 11, 51, .55);
}
.has-hero .site-header:not(.is-solid) .brand .logo-dark { display: block; }
.has-hero .site-header:not(.is-solid) .brand .logo-light { display: none; }
/* A thinner pill. The logo file has empty space above and below the artwork (the artwork is
   the middle half of the file), so the pill is cut to about three-quarters of the logo's
   height and the logo is centred in it; none of the artwork is clipped. */
.has-hero .site-header .brand {
  display: flex; align-items: center; overflow: hidden; padding-block: 0;
  height: calc(clamp(44px, 3.9vw, 60px) * .7);
}
.has-hero .site-header .brand img { flex: none; }
.has-hero .site-header.is-solid .brand { height: calc(clamp(40px, 3.3vw, 50px) * .7); }
@media (max-width: 680px) {
  .has-hero .site-header .brand, .has-hero .site-header.is-solid .brand { height: 31px; padding-inline: 12px 16px; margin-left: -6px; }
}
@media (max-width: 380px) {
  .has-hero .site-header .brand, .has-hero .site-header.is-solid .brand { height: 23px; }
}

/* ==========================================================================
   74. Product ribbon, white — the same moving ribbon under the home hero
   (same wording, diamonds, height and speed) on a white background, with
   the wording and the diamonds in black.
   ========================================================================== */
.collection-ribbon {
  --ribbon-text: #000; --ribbon-accent: #000;   /* black wording and diamonds, as the user asked */
  background: #fff;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.collection-ribbon::before, .collection-ribbon::after {
  background: linear-gradient(90deg, transparent, rgba(6, 11, 51, .1) 25%, rgba(6, 11, 51, .1) 75%, transparent);
}
.collection-ribbon .marquee-item { font-weight: 400; text-shadow: none; }
.collection-ribbon .marquee-item::after { background: rgba(0, 0, 0, .06); }

/* ==========================================================================
   75. Spacing after a white section — two neighbouring plain sections share
   one gap (section 44), but a WHITE section next to a plain (off-white) one
   is a visible change of background, so the second keeps its own top space.
   (Needed once "Visit us" was removed and Partnership came to sit directly
   under the white FAQ section.)
   ========================================================================== */
main > section.bg-white:not(.bg-warm):not(.bg-ink):not(.page-hero):not(.hero):not(:has(.reviews))
  + section:not(.bg-white):not(.bg-warm):not(.bg-ink):not(:has(.reviews)),
main > section:not(.bg-white):not(.bg-warm):not(.bg-ink):not(.page-hero):not(.hero):not(:has(.reviews))
  + section.bg-white:not(.bg-warm):not(.bg-ink):not(:has(.reviews)) { padding-top: var(--section-y) !important; }

/* ==========================================================================
   76. Home hero, black overlay — an even black tint over the whole photo
   (it replaces the lighter, patchy shades from before), a little deeper
   along the top behind the menu and along the bottom behind the figures.
   The same at every screen size.
   ========================================================================== */
.hero-scrub .hero-media::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .26) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, .28) 100%),
    rgba(0, 0, 0, .32);   /* was .44; made a bit lighter at the user's request */
}

/* ==========================================================================
   77. Product boxes without cut-offs — the same box design (photo, navy
   fade at the foot, range label and name in white on it), but:
   - a product photo is fitted WHOLE inside its box instead of being cropped;
     the space beside it takes the photo's own edge colour (--fit-bg, set per
     box by tools/build.py), so it reads as part of the photo;
   - the label no longer lies on top of the photo. The photo has its own area
     and the navy foot sits under it, as tall as the name needs, so a long
     name makes the box taller instead of covering the product. Boxes in the
     same row stay the same height.
   Flooring, carpet and tile swatches (textures) still fill their boxes.
   ========================================================================== */
.masonry-item.is-fit[data-category] {
  display: flex; flex-direction: column; align-self: stretch;
  aspect-ratio: auto;                       /* the box is as tall as its photo area plus its label */
  background: var(--fit-bg, #fff); box-shadow: 0 0 0 1px var(--line);
}
.masonry-item.is-fit[data-category]::after { display: none; }   /* the fade is on the label itself */
.masonry-item.is-fit[data-category] img {
  flex: 1 0 auto; aspect-ratio: 2 / 1; height: auto; width: 100%;
  box-sizing: border-box; padding: 4% 4% 0; object-fit: contain; object-position: 50% 50%;
}
.masonry-item.is-fit[data-category] .masonry-cap {
  position: relative; left: auto; right: auto; bottom: auto; flex: none; z-index: 1;
  margin-top: -6px; padding: 30px 18px 15px;
  background: linear-gradient(180deg, rgba(6, 11, 51, 0) 0, rgba(6, 11, 51, .8) 24px, rgba(6, 11, 51, .9) 100%);
  opacity: 1; transform: none;
}
@media (max-width: 760px) { .masonry-item.is-fit[data-category] img { aspect-ratio: 3 / 2; } }
@media (max-width: 420px) {
  .masonry-item.is-fit[data-category] { aspect-ratio: auto; }
  .masonry-item.is-fit[data-category] .masonry-cap { left: auto; right: auto; bottom: auto; padding: 26px 11px 10px; }
}
/* The filter buttons hide boxes with .is-hidden; this must stay stronger than the box's own
   display rule above (without it the buttons light up but nothing is filtered). */
.masonry-item.is-fit[data-category].is-hidden { display: none; }

/* ==========================================================================
   78. FAQ, centred in one column — the title first (label, heading and the
   Ask a question link, all centred), then the questions underneath in a
   centred column. The questions themselves stay left-aligned with their
   plus sign on the right, so they are easy to scan.
   ========================================================================== */
.faq-stack { display: flex; flex-direction: column; align-items: center; }
.faq-head { text-align: center; margin-bottom: clamp(30px, 3.6vw, 52px); }
.faq-head h2 { margin: .5em 0 0; }
.faq-ask { margin: 1.6rem 0 0; }
.faq-stack .accordion { width: 100%; max-width: 920px; }
.faq-stack .acc-panel-inner { max-width: none; }

/* ==========================================================================
   79. Bigger logo in the menu bar — about 50% larger than the original (enlarged twice at the user's request), both in its pale pill
   over a hero photo and in the white bar after scrolling. The bar's height
   is unchanged (the logo file has empty space around the artwork, so the
   larger logo still fits), and the pill grows with it.
   ========================================================================== */
.site-header { --logo-h: clamp(86px, 7.6vw, 116px); }
.site-header.is-solid { --logo-h: clamp(74px, 6.3vw, 96px); }
.site-header .brand img, .site-header.is-solid .brand img { height: var(--logo-h); }
.has-hero .site-header .brand, .has-hero .site-header.is-solid .brand { height: calc(var(--logo-h) * .7); }
@media (max-width: 680px) {
  .site-header, .site-header.is-solid { --logo-h: 76px; }
}
@media (max-width: 380px) {
  .site-header, .site-header.is-solid { --logo-h: 56px; }
}

/* ==========================================================================
   80. Testimonials — the same heading, 5.0 Google rating, three Google
   reviews and Google link, on the same navy background as before (deep
   navy, soft blue light, faint dot grid). A header row — heading on the
   left, a glass rating panel on the right — then the reviews as a row of
   equal glass cards built to take ANY number of reviews: three whole cards
   show at a time (two on tablets, one on phones), and when there are more
   the row slides with arrows, a "1–3 of 7" count and a progress line
   (js/site.js, initReviewRow). Reviews are listed in tools/build.py
   (REVIEWS). Cards arrive once as the section scrolls into view.
   ========================================================================== */
main > section.bg-ink:has(.tm) {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(60% 90% at 8% 0%, rgba(61, 91, 255, .30), transparent 62%),
    radial-gradient(50% 80% at 100% 100%, rgba(61, 91, 255, .20), transparent 60%),
    var(--ink);
}
/* a faint dot grid that fades out towards the edges */
main > section.bg-ink:has(.tm)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1.4px) 0 0 / 26px 26px;
  -webkit-mask-image: radial-gradient(75% 85% at 62% 45%, #000 0%, transparent 78%);
          mask-image: radial-gradient(75% 85% at 62% 45%, #000 0%, transparent 78%);
}

/* --- layout (rewritten): a header row, then a row of review cards that can hold any number --- */
.tm-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 24px 28px; margin-bottom: clamp(30px, 3.6vw, 52px);
}
.tm-title h2 { margin: .5em 0 0; color: #fff; }
.tm-title h2 em { color: var(--brass-lt); }

/* glass panels: the rating panel and every review card */
.tm-panel, .tm-card {
  position: relative; border-radius: 6px; overflow: hidden;
  background: linear-gradient(155deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .035) 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.tm-panel::before, .tm-card::before {   /* light catching the top edge */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55) 30%, rgba(163, 179, 255, .5) 60%, transparent);
}

/* rating panel: Google mark, 5.0, stars — and the link to every review */
.tm-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(18px, 2vw, 30px); padding: clamp(14px, 1.4vw, 20px) clamp(18px, 1.8vw, 26px); }
.tm-rating { display: flex; align-items: center; gap: clamp(12px, 1.2vw, 18px); }
.tm-g { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.tm-g svg { width: 22px; height: 22px; }
.tm-rating strong {
  font-family: var(--font-display); font-size: clamp(2.3rem, 3.2vw, 3rem); font-weight: 500;
  line-height: 1; letter-spacing: -.04em; color: #fff;
}
.tm-rating-meta { display: grid; gap: 6px; }
.tm-rating-meta em { font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .92); }
.tm .review-stars { display: inline-flex; gap: 4px; color: #F5A623; }
.tm .review-stars svg { width: 16px; height: 16px; fill: currentColor; }
.tm-link {
  display: inline-flex; align-items: center; gap: 14px; padding-left: clamp(18px, 2vw, 30px);
  border-left: 1px solid rgba(255, 255, 255, .16);
  font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff;
  transition: color .3s var(--ease);
}
.tm-link span {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .4); font-size: .95rem; letter-spacing: 0;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.tm-link:hover { color: var(--brass-lt); }
.tm-link:hover span { background: #fff; border-color: #fff; color: var(--ink); }

/* the row of reviews: three whole cards across (two on tablets, one on phones). It scrolls
   sideways when there are more, always stopping on whole cards, so none is ever cut in half. */
.tm-slider { --tm-gap: clamp(12px, 1.3vw, 18px); --tm-per: 3; }
.tm-track {
  display: flex; gap: var(--tm-gap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; outline-offset: 6px;
}
.tm-track::-webkit-scrollbar { display: none; }
.tm-card {
  flex: 0 0 calc((100% - (var(--tm-per) - 1) * var(--tm-gap)) / var(--tm-per));
  scroll-snap-align: start; display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px);
}
.tm-mark {
  position: absolute; right: clamp(16px, 2vw, 28px); top: -.1em; pointer-events: none;
  font-family: var(--font-display); font-size: clamp(5.5rem, 7.5vw, 7.6rem); font-weight: 600; line-height: 1;
  color: var(--brass-lt); opacity: .14;
}
.tm-card blockquote {
  position: relative; flex: 1; margin: 18px 0 0; padding: 0; border: 0; color: #fff;
  font-family: var(--font-display); font-size: clamp(1.18rem, 1.5vw, 1.45rem); font-weight: 400; line-height: 1.36; letter-spacing: -.01em;
}
.tm-by { display: flex; align-items: center; gap: 14px; margin-top: clamp(24px, 2.6vw, 38px); padding-top: clamp(16px, 1.6vw, 22px); border-top: 1px solid rgba(255, 255, 255, .13); }
.tm-avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, #3D5BFF, var(--brass)); color: #fff;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 500; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}
.tm-who { display: grid; gap: 4px; min-width: 0; }
.tm-who strong { font-family: var(--font-display); font-size: 1.06rem; font-weight: 500; color: #fff; }
.tm-who span { font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-lt); }
.tm-src { margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.tm-src svg { width: 15px; height: 15px; }

/* arrows, "1–3 of 7" and a progress line: only shown when there are more reviews than fit */
.tm-nav { display: flex; align-items: center; gap: 12px; margin-top: clamp(22px, 2.4vw, 32px); }
.tm-nav[hidden] { display: none; }
.tm-btn {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), opacity .3s var(--ease);
}
.tm-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.tm-btn:hover:not(:disabled) { background: #fff; border-color: #fff; color: var(--ink); }
.tm-btn:disabled { opacity: .35; cursor: default; }
.tm-count { margin-left: 8px; font-family: var(--font-display); font-size: 1rem; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tm-bar { flex: 1; height: 2px; margin-left: 10px; background: rgba(255, 255, 255, .16); border-radius: 2px; overflow: hidden; }
.tm-bar i { display: block; height: 100%; width: 30%; background: var(--brass-lt); border-radius: 2px; transform-origin: left; }

@media (max-width: 1040px) { .tm-slider { --tm-per: 2; } }
@media (max-width: 640px) {
  .tm-slider { --tm-per: 1; }
  .tm-panel { width: 100%; }
  .tm-link { padding-left: 0; border-left: 0; width: 100%; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14); }
}

/* ==========================================================================
   81. Range groups — one product family (e.g. Rushy Toilet Paper Holder) is a
       small heading over its own row of boxes, one box per finish
   ========================================================================== */
.range-group { margin-bottom: clamp(34px, 4vw, 58px); padding-bottom: clamp(34px, 4vw, 58px); border-bottom: 1px solid var(--line); }
.range-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.range-group-title { margin: 0 0 clamp(18px, 2vw, 26px); font-size: var(--t-item); line-height: 1.18; }
.range-group .colour-img { background-color: #fff; }

/* ==========================================================================
   82. Range category pills (Accessories) — a centred row of pills under
       "Our Range"; pressing one shows that type of product only
   ========================================================================== */
.range-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: clamp(32px, 4vw, 54px); }
.range-nav .filter-btn { background: var(--white); }
.range-nav .filter-btn.is-active { background: var(--ink); }
.range-group.is-hidden { display: none; }
.range-group.is-last { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* ==========================================================================
   83. Every range page in the Accessories card design, and no delays
       - product photos are shown whole in their box (floor swatches still fill it)
       - boxes come in together with no stagger; a pill shows its boxes at once
   ========================================================================== */
.colour-img.is-fit { background-size: contain; background-color: var(--fit-bg, #fff); }
.fx-ready .colour-swatch.is-in { transition: opacity .4s var(--ease), transform .45s var(--ease); }
.fx-ready .colour-swatch.is-now { transition: none; }
.colour-swatch[data-category].is-hidden { display: none; }

/* 84. A sectioned range page (Tapware) ends with a note under its last section: no rule there */
.range-group:last-of-type { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

/* 85. Product boxes are there straight away: no fade or rise as they scroll into view */
.fx-ready .colour-swatch, .fx-ready .colour-swatch.is-in { opacity: 1; transform: none; transition: none; }

/* ==========================================================================
   86. Enlarged photo: the arrows and the close button are always fully seen.
       The photo keeps clear of them (a gutter each side); on phones, where there
       is no room for a gutter, the buttons sit on a dark disc over the photo's edge.
   ========================================================================== */
.lightbox-btn { background: rgba(9, 10, 12, .78); border-color: rgba(255, 255, 255, .45); }
.lightbox-figure > img {
  max-width: min(100%, calc(100vw - 2 * (clamp(10px, 2.4vw, 34px) + 54px + 22px)));
}
@media (max-width: 680px) {
  .lightbox-figure > img { max-width: 100%; }
}

/* ==========================================================================
   87. Back button over a page banner
   ========================================================================== */
.back-btn {
  display: inline-flex; align-items: center; gap: .55em; width: max-content;
  margin-bottom: 1.15rem; padding: .62em 1.3em .62em .95em;
  border: 1px solid rgba(255, 255, 255, .6); border-radius: 100px;
  background: rgba(6, 11, 51, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.back-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.back-btn:hover, .back-btn:focus-visible { background: #fff; border-color: #fff; color: var(--ink); }
.back-btn.is-dark { background: var(--white); border-color: var(--line); color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.back-btn.is-dark:hover, .back-btn.is-dark:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ==========================================================================
   88. Contact form card (Contact page) — a navy heading band over a white
       body, every field the same height, a proper drop-down, and the phone
       number beside the button. The details on the left are unchanged.
   ========================================================================== */
.form-card { padding: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
.form-head {
  padding: clamp(24px, 2.8vw, 36px) clamp(22px, 3.2vw, 44px);
  background: var(--ink); border-bottom: 3px solid var(--brass); color: #fff;
}
.form-kicker { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-lt); }
.form-card .form-head h3 { margin: .55rem 0 .5rem; color: #fff; font-size: clamp(1.5rem, 2.1vw, 1.85rem); line-height: 1.15; }
.form-head p { margin: 0; max-width: 44ch; font-size: 1rem; line-height: 1.55; color: rgba(255, 255, 255, .96); }
.form-body { padding: clamp(24px, 3vw, 40px) clamp(22px, 3.2vw, 44px) clamp(24px, 3vw, 38px); }

.form-card .field-grid { gap: 2px var(--stack); }
.form-card .field { gap: .55rem; margin-bottom: 18px; }
.form-card .field label { font-size: .72rem; color: var(--ink); }
.form-card .field input, .form-card .field select, .form-card .field textarea {
  background: var(--white); border-color: rgba(6, 11, 51, .24); color: var(--ink); font-size: 1rem; line-height: 1.4;
}
.form-card .field input, .form-card .field select { height: 54px; padding: 0 1.05em; }
.form-card .field textarea { min-height: 150px; padding: .95em 1.05em; }
.form-card .field input:hover, .form-card .field select:hover, .form-card .field textarea:hover { border-color: rgba(6, 11, 51, .5); }
.form-card .field input:focus, .form-card .field select:focus, .form-card .field textarea:focus { border-color: var(--brass); }
.form-card .field ::placeholder { color: #6B7290; opacity: 1; }
.form-card .field select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 2.9em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23060B33' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.05em center; background-size: 14px;
}
.form-card .field.has-error input, .form-card .field.has-error textarea { border-color: #C0433A; }

.form-card .form-actions { gap: 16px 24px; margin-top: 6px; padding-top: 24px; border-top: 1px solid var(--line); }
.form-card .form-actions .btn { min-height: 56px; padding-inline: 2.1em; }
.form-call { font-size: .95rem; color: var(--ink-mute); }
.form-call a { color: var(--ink); font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--line); transition: border-color .3s var(--ease), color .3s var(--ease); }
.form-call a:hover { color: var(--brass); border-color: var(--brass); }
.form-card .form-note { margin: 16px 0 0; font-size: .8rem; color: var(--ink-mute); }
.form-card .form-note .req { color: var(--brass-ink); font-weight: 600; }
@media (max-width: 680px) {
  .form-card .form-actions .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   89. Contact page layout — the title sits centred above; below it the contact
       details on the left and a larger form box on the right
   ========================================================================== */
.contact-head { margin-bottom: clamp(34px, 4.2vw, 60px); }
.contact-head h2 { margin-bottom: 0; }
.split.split-contact { grid-template-columns: minmax(280px, .58fr) 1.42fr; gap: clamp(32px, 4.5vw, 72px); }
.split-contact .form-head { padding-block: clamp(28px, 3.2vw, 44px); }
.split-contact .form-card .form-head h3 { font-size: clamp(1.65rem, 2.4vw, 2.15rem); }
.split-contact .form-head p { font-size: 1.06rem; max-width: 52ch; }
.split-contact .form-body { padding: clamp(26px, 3.4vw, 48px) clamp(22px, 3.6vw, 52px) clamp(26px, 3.2vw, 44px); }
.split-contact .form-card .field { margin-bottom: 22px; }
.split-contact .form-card .field input, .split-contact .form-card .field select { height: 60px; }
.split-contact .form-card .field textarea { min-height: 210px; }
.split-contact .form-card .form-actions .btn { min-height: 60px; padding-inline: 2.4em; }
@media (max-width: 900px) {
  .split.split-contact { grid-template-columns: 1fr; }
}

/* ==========================================================================
   90. Contact page: the form box centred on its own, and the contact details
       in one row underneath it (hairline above and below, dividers between)
   ========================================================================== */
.contact-form-wrap { max-width: 1040px; margin-inline: auto; }
.contact-form-wrap .form-head { padding-block: clamp(28px, 3.2vw, 44px); }
.contact-form-wrap .form-card .form-head h3 { font-size: clamp(1.65rem, 2.4vw, 2.15rem); }
.contact-form-wrap .form-head p { font-size: 1.06rem; max-width: 52ch; }
.contact-form-wrap .form-body { padding: clamp(26px, 3.4vw, 48px) clamp(22px, 3.6vw, 52px) clamp(26px, 3.2vw, 44px); }
.contact-form-wrap .form-card .field { margin-bottom: 22px; }
.contact-form-wrap .form-card .field input, .contact-form-wrap .form-card .field select { height: 60px; }
.contact-form-wrap .form-card .field textarea { min-height: 210px; }
.contact-form-wrap .form-card .form-actions .btn { min-height: 60px; padding-inline: 2.4em; }

.contact-row {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
  margin-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.contact-row .contact-item, .contact-row .contact-item:first-child {
  border: 0; border-left: 1px solid var(--line); gap: 14px;
  padding: clamp(22px, 2.4vw, 32px) clamp(14px, 1.6vw, 26px);
}
.contact-row .contact-item:first-child { border-left: 0; padding-left: 0; }
.contact-row .contact-item > div { min-width: 0; }
.contact-row .contact-item p, .contact-row .contact-item a { overflow-wrap: anywhere; }
@media (max-width: 1180px) {
  .contact-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-row .contact-item:nth-child(4) { border-left: 0; padding-left: 0; }
  .contact-row .contact-item:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .contact-row { grid-template-columns: 1fr; border-bottom: 0; }
  .contact-row .contact-item, .contact-row .contact-item:first-child, .contact-row .contact-item:nth-child(4) {
    border-left: 0; padding-left: 0; padding-right: 0; border-top: 0; border-bottom: 1px solid var(--line);
  }
}

/* 91. Contact page map: a bit taller on desktop and laptop screens */
@media (min-width: 761px) { .map-embed { aspect-ratio: 3 / 2; } }
@media (min-width: 1081px) { .map-embed { aspect-ratio: 21 / 10; } }

/* 92. Small phones: the category pills are a little more compact, so two fit on a row
       where they can instead of one long pill per line */
@media (max-width: 430px) {
  .range-nav { gap: 8px; }
  .range-nav .filter-btn { padding: .66em 1.05em; font-size: .7rem; letter-spacing: .09em; }
}

/* 93. Contact form: the Submit button is the site's navy (it turns blue on hover) */
.form-card .form-actions .btn-brass { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.form-card .form-actions .btn-brass::after { background: var(--brass); }
.form-card .form-actions .btn-brass:hover, .form-card .form-actions .btn-brass:focus-visible { color: #fff; border-color: var(--brass); }

/* ==========================================================================
   94. Home hero, at the owner's request: the title "Complete Renovations" in the
       site navy, and the "See our products" button on a navy background
   ========================================================================== */
/* navy could not be read on the dark photo, so the title is a brighter blue of the same family,
   with a soft dark shadow behind the letters */
.hero h1 { color: #7F95FF; text-shadow: 0 2px 22px rgba(4, 7, 30, .6), 0 1px 2px rgba(4, 7, 30, .5); }
.hero .hero-actions .btn-paper { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.hero .hero-actions .btn-paper::after { background: var(--brass); }
.hero .hero-actions .btn-paper:hover, .hero .hero-actions .btn-paper:focus-visible { color: #fff; border-color: var(--brass); }

/* 95. Footer logo: larger (about 60% bigger than before) */
.site-footer .brand img { height: 74px; margin-bottom: 1.3rem; }
@media (min-width: 961px) { .site-footer .brand { margin-top: -20px; } }
@media (max-width: 680px) { .site-footer .brand img { height: 60px; margin-bottom: 1.2rem; } }

/* 96. Home hero title: "Complete" is white, "Renovations" stays the bright blue.
       (.word-mask is the first word once the title has been split for its entrance.) */
.hero h1 .hero-first, .hero h1 > .word-mask:first-child { color: #fff; }

/* 97. Home hero title: "Renovations" in white and italic, like the blue words in
       the section headings ("of every size.") */
/* white, like "Complete"; still italic. No edge round the letters. */
.hero h1 .hero-fancy, .hero h1 > .word-mask:last-child { color: #fff; font-style: italic; }
.hero h1 > .word-mask:last-child { padding-right: .14em; margin-right: -.14em; }

/* 98. Home hero: the "One team. One solution." label is larger (about half as big again) */
.hero .eyebrow { font-size: clamp(.86rem, 1.35vw, 1.2rem); letter-spacing: .2em; gap: .8em; margin-bottom: 1.1em; }
.hero .eyebrow::before { width: clamp(30px, 3.4vw, 52px); height: 2px; }
@media (min-width: 700px) { .hero .eyebrow { font-size: clamp(1rem, 1.35vw, 1.2rem); } }

/* 99. Home hero label "One team. One solution.": a little bigger again, and white */
.hero .eyebrow { color: #fff; font-size: .9rem; }
.hero .eyebrow::before { background: #fff; opacity: 1; }
@media (min-width: 700px) { .hero .eyebrow { font-size: clamp(1.05rem, 1.42vw, 1.28rem); } }

/* Contact band photo (2026-10-08): the user's bathroom photo (corner bath, twin showers, timber
   floor) on every page. ONE image, filling the whole band edge to edge (the user rejected both
   "whole photo beside plain navy" and "whole photo plus a blurred copy"). The band is a much
   wider strip than the 4:3 photo, so the top and bottom of the photo fall outside it; this
   position keeps the bath and the shower handsets in view. The navy fade on the left is the
   band's original one. */
.cta-band-media img { object-position: 50% 62%; }
@media (max-width: 760px) { .cta-band-media img { object-position: 62% 55%; } }

/* ==========================================================================
   81. Menu bar stacked above the hero, on a solid white bar — the bar no
   longer lies over the top of the hero photo. It is a white strip fixed to
   the top of the window, and every page's hero starts underneath it (the
   hero itself is unchanged in size). It was see-through at first; that was
   removed, so nothing shows through it. Because the bar is white, its contents are the dark set
   everywhere: colour logo (no pill needed), navy links, navy Contact us.
   ========================================================================== */
.site-header, .site-header.is-solid {
  background: #fff;                       /* solid: the see-through look was removed at the user's request */
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: rgba(6, 11, 51, .1);
}
body.has-hero main { padding-top: var(--header-h); }      /* the hero begins below the bar */

/* the dark set, also before scrolling */
.has-hero .site-header:not(.is-solid) .nav > a,
.has-hero .site-header:not(.is-solid) .nav-dd > button,
.has-hero .site-header:not(.is-solid) .nav > a[aria-current="page"] { color: var(--ink); }
.has-hero .site-header:not(.is-solid) .nav > a:hover,
.has-hero .site-header:not(.is-solid) .nav > a[aria-current="page"]:hover,
.has-hero .site-header:not(.is-solid) .nav-dd:hover > button { color: var(--brass-ink); }
.has-hero .site-header:not(.is-solid) .nav a::after,
.has-hero .site-header:not(.is-solid) .nav-dd > button::after { background: var(--brass); }
.has-hero .site-header:not(.is-solid) .header-phone { color: var(--ink); }
.has-hero .site-header:not(.is-solid) .header-phone:hover { color: var(--brass-ink); }
.has-hero .site-header:not(.is-solid) .header-actions .btn { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.has-hero .site-header:not(.is-solid) .nav-toggle { border-color: var(--line); }
.has-hero .site-header:not(.is-solid) .nav-toggle:not(.is-open) span { background: var(--ink); }
.has-hero .site-header:not(.is-solid) .brand { background: transparent; box-shadow: none; }   /* no pill on a white bar */

/* phone menu open: the bar clears so the navy menu shows, with the white logo and close button */
body:has(.mobile-nav.is-open) .site-header {
  background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent;
}
body:has(.mobile-nav.is-open) .site-header .brand .logo-dark { display: none; }
body:has(.mobile-nav.is-open) .site-header .brand .logo-light { display: block; }
body:has(.mobile-nav.is-open) .site-header .nav-toggle { border-color: rgba(255, 255, 255, .4); }

/* About tall photo (2026-10-08): the bathroom photo. The slot is narrower than the photo, so it
   is framed on the shower, glass screen and toilet (the left and middle of the picture). */
.about-photo.is-tall img { object-position: 12% 50%; }

/* Perfect for list with an odd number of items (five, since "New home builds" was removed):
   the last item runs the full width so no half-row is left empty. */
@media (min-width: 561px) {
  .pfx-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pfx-list li:nth-last-child(2):nth-child(even) { border-bottom: 0; }
}

/* ==========================================================================
   82. Menu bar with five links, evenly spaced — "Projects / Management" was
   added between Gallery and Contact. On desktop every item in the bar is
   spaced evenly: the gap from the logo to HOME, the gaps between the five
   links, and the gaps to the phone and the Contact us button are all the
   same (the links are laid out directly in the bar, which shares the spare
   width equally between them). What shows at each width:
     1500px and up   logo, five links, phone number, Contact us button
     1321–1499px     the phone number becomes just its icon
     901–1320px      logo and the five links ("Contact" is one of them)
     900px and down  the menu button, as before
   ========================================================================== */
@media (min-width: 901px) {
  .header-inner { justify-content: space-between; gap: 12px; }
  .nav, .header-actions { display: contents; }          /* their children become items of the bar itself */
  .header-actions .nav-toggle { display: none; }
  /* the logo file has blank space at its right edge and the old pill padding: trim both, so the
     first gap is measured from the lettering like the others */
  .site-header .brand, .has-hero .site-header .brand { padding-right: 0; margin-right: calc(var(--logo-h) * -.119); }
}
@media (min-width: 901px) and (max-width: 1499px) {
  .header-phone span { display: none; }
}
@media (min-width: 901px) and (max-width: 1320px) {
  .header-actions .btn, .header-phone { display: none; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .nav > a, .nav-dd > button { font-size: .76rem; letter-spacing: .11em; }
}
@media (min-width: 901px) and (max-width: 1040px) {
  .site-header, .site-header.is-solid { --logo-h: 76px; }
}

/* Menu items level with each other: "Products" is a button inside a wrapper while the other four
   are plain links, and at the smaller menu size it sat one pixel lower than HOME and the rest.
   Every item is now the same kind of box with the same line height, so their lettering lines up. */
@media (min-width: 901px) {
  .nav-dd { display: flex; align-items: center; }
  .nav > a, .nav-dd > button { display: inline-flex; align-items: center; line-height: 1.6; }
}

/* What we do subtitle (Projects / Management page; client's wording, 2026-10-10): an opening
   line in the site's lead style (heading font, blue marker), the paragraph, then the closing
   line in bold. */
.section-head.is-wide-intro .lead {
  margin-block: 1.4em .9em; padding: .15em 0 .15em 18px; border-left: 3px solid var(--brass);
  font-family: var(--font-display); line-height: 1.3; color: var(--ink);
}
.section-head.is-wide-intro .section-intro { margin-top: 0; }
.section-head.is-wide-intro .section-tag {
  margin: 1.1em 0 0; font-family: var(--font-display); font-size: var(--t-item); font-weight: 600;
  letter-spacing: -.01em; line-height: 1.25; color: var(--ink);
}

/* Hero facts bar: three items now (client removed "One team, one solution", 2026-10-15) */
@media (min-width: 681px) {
  .hero-bar { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Bathroom Ware & Kitchen Ware banner (2026-10-16): show the WHOLE photo.
   The photo is 4:3 and the banner is wide, so the full photo sits uncropped
   on the right and a soft blurred copy of it fills the rest behind the heading.
   ========================================================================== */
.page-hero:has(img[src*="bathroomware-hero-3"]) { min-height: min(78vh, 760px); }
.page-hero:has(img[src*="bathroomware-hero-3"]) .hero-media::before {
  content: ""; position: absolute; inset: -60px; z-index: 0;
  background: url("images/bathroomware-hero-3.webp") center / cover no-repeat;
  filter: blur(34px) brightness(.62) saturate(1.1);
}
.page-hero .hero-media img[src*="bathroomware-hero-3"] {
  position: relative; z-index: 1;
  object-fit: contain; object-position: right center;
  /* keep the banner effects (scroll parallax + hover zoom); grow from the right edge so the photo stays in view */
  transform-origin: right center;
}
.page-hero:has(img[src*="bathroomware-hero-3"]) .hero-media::after { z-index: 2; }
@media (max-width: 760px) {
  .page-hero:has(img[src*="bathroomware-hero-3"]) { min-height: 560px; }
  .page-hero .hero-media img[src*="bathroomware-hero-3"] { object-position: center top; transform-origin: center top; }
}
/* blend the photo's edge into the blurred fill (no hard seam) */
.page-hero:has(img[src*="bathroomware-hero-3"]) .hero-media { container-type: size; }
@supports (width: 1cqh) {
  .page-hero .hero-media img[src*="bathroomware-hero-3"] {
    -webkit-mask-image: linear-gradient(90deg, transparent calc(100% - 133.3cqh), #000 calc(100% - 133.3cqh + 140px));
            mask-image: linear-gradient(90deg, transparent calc(100% - 133.3cqh), #000 calc(100% - 133.3cqh + 140px));
  }
  @media (max-width: 760px) {
    .page-hero .hero-media img[src*="bathroomware-hero-3"] {
      -webkit-mask-image: linear-gradient(180deg, #000 calc(75cqw - 90px), transparent 75cqw);
              mask-image: linear-gradient(180deg, #000 calc(75cqw - 90px), transparent 75cqw);
    }
  }
}

/* Home Products card 02: the vertical vanity photo is cropped at the sides by the card,
   so anchor it to the left edge to keep the whole mirror in view (2026-10-16) */
.service-card img[src*="bathroomware-card-3"] { object-position: 0% 30%; transform-origin: 0% 30%; }

/* Bathroom Ware hero: no hover zoom (user, 2026-10-16) - it only drifts with the scroll, like the home hero */
.page-hero:hover .hero-media img[src*="bathroomware-hero-3"] { scale: 1; }

/* Home hero overlay lighter again (user, 2026-10-16: "too much overlay, too dark") —
   was rgba(0,0,0,.32) plus .26/.28 at the top and bottom */
.hero-scrub .hero-media::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, .24) 100%),
    rgba(0, 0, 0, .16);
}

/* Flooring hero (flooring-hero-4, 1536x1024, user-supplied 2026-10-16): the whole photo, like the
   Bathroom Ware hero — fitted inside the banner on the right, a blurred copy fills the rest, the
   photo's inner edge fades into it, no hover zoom; it only drifts with the scroll */
.page-hero:has(img[src*="flooring-hero-4"]) { min-height: min(78vh, 760px); }
.page-hero:has(img[src*="flooring-hero-4"]) .hero-media::before {
  content: ""; position: absolute; inset: -60px; z-index: 0;
  background: url("images/flooring-hero-4.webp") center / cover no-repeat;
  filter: blur(34px) brightness(.62) saturate(1.1);
}
.page-hero .hero-media img[src*="flooring-hero-4"] {
  position: relative; z-index: 1;
  object-fit: contain; object-position: right center; transform-origin: right center;
}
.page-hero:has(img[src*="flooring-hero-4"]) .hero-media::after { z-index: 2; }
.page-hero:hover .hero-media img[src*="flooring-hero-4"] { scale: 1; }
@media (max-width: 760px) {
  .page-hero:has(img[src*="flooring-hero-4"]) { min-height: 560px; }
  .page-hero .hero-media img[src*="flooring-hero-4"] { object-position: center top; transform-origin: center top; }
}
.page-hero:has(img[src*="flooring-hero-4"]) .hero-media { container-type: size; }
@supports (width: 1cqh) {
  .page-hero .hero-media img[src*="flooring-hero-4"] {
    -webkit-mask-image: linear-gradient(90deg, transparent calc(100% - 150cqh), #000 calc(100% - 150cqh + 140px));
            mask-image: linear-gradient(90deg, transparent calc(100% - 150cqh), #000 calc(100% - 150cqh + 140px));
  }
  @media (max-width: 760px) {
    .page-hero .hero-media img[src*="flooring-hero-4"] {
      -webkit-mask-image: linear-gradient(180deg, #000 calc(66.7cqw - 90px), transparent 66.7cqw);
              mask-image: linear-gradient(180deg, #000 calc(66.7cqw - 90px), transparent 66.7cqw);
    }
  }
}

/* Lighter overlays everywhere (user, 2026-10-16: "not a lot of overlay, need to see the image more"
   — all page banners and all category cards). About half the earlier tint; the white wording keeps a
   soft shadow and a light shade right behind it so it stays readable. */
.page-hero .hero-media::after {
  background:
    linear-gradient(180deg, rgba(6, 11, 51, .24) 0%, rgba(6, 11, 51, .08) 14%, rgba(6, 11, 51, 0) 30%),
    linear-gradient(0deg, rgba(6, 11, 51, .3) 0%, rgba(6, 11, 51, .14) 24%, rgba(6, 11, 51, .03) 48%, rgba(6, 11, 51, 0) 66%),
    linear-gradient(90deg, rgba(6, 11, 51, .3) 0%, rgba(6, 11, 51, .22) 16%, rgba(6, 11, 51, .12) 32%, rgba(6, 11, 51, .05) 50%, rgba(6, 11, 51, 0) 68%);
}
@media (max-width: 760px) {
  .page-hero .hero-media::after {
    background: linear-gradient(180deg, rgba(6, 11, 51, .26) 0%, rgba(6, 11, 51, .06) 26%, rgba(6, 11, 51, .1) 50%, rgba(6, 11, 51, .34) 78%, rgba(6, 11, 51, .5) 100%);
  }
}
.page-hero-body { text-shadow: 0 1px 3px rgba(6, 11, 51, .45), 0 2px 22px rgba(6, 11, 51, .55); }
/* the blurred fill beside a whole-photo banner, brighter to match */
.page-hero:has(img[src*="bathroomware-hero-3"]) .hero-media::before,
.page-hero:has(img[src*="flooring-hero-4"]) .hero-media::before { filter: blur(34px) brightness(.82) saturate(1.1); }

.service-card::after {
  background: linear-gradient(180deg, rgba(6, 11, 51, .14) 0%, rgba(6, 11, 51, 0) 22%, rgba(6, 11, 51, 0) 50%, rgba(6, 11, 51, .66) 100%);
}
.service-card:hover::after {
  background: linear-gradient(180deg, rgba(6, 11, 51, .18) 0%, rgba(6, 11, 51, .02) 24%, rgba(6, 11, 51, .06) 50%, rgba(6, 11, 51, .74) 100%);
}
.service-card h3, .service-card p, .service-card .link-underline { text-shadow: 0 1px 3px rgba(6, 11, 51, .5), 0 2px 16px rgba(6, 11, 51, .45); }

/* Bathroom Ware hero: no blur (user, 2026-10-16). The photo itself fills the whole banner again
   (no blurred copy beside it, no faded edge); the banner stays taller so only a sliver of the
   ceiling and floor is trimmed on wide screens. Still no hover zoom; it drifts with the scroll. */
.page-hero:has(img[src*="bathroomware-hero-3"]) .hero-media::before { content: none; }
.page-hero .hero-media img[src*="bathroomware-hero-3"] {
  object-fit: cover; object-position: 50% 45%; transform-origin: 50% 50%;
  -webkit-mask-image: none; mask-image: none;
}
@media (max-width: 760px) {
  .page-hero .hero-media img[src*="bathroomware-hero-3"] { object-position: 35% 50%; transform-origin: 50% 50%; -webkit-mask-image: none; mask-image: none; }
}

/* Home hero as clear as the Bathroom Ware banner (user, 2026-10-16): no even tint over the whole
   photo any more — only the same light navy shade the page banners use, behind the wording (left)
   and the figures (bottom) — and the photo itself a touch brighter */
.hero-scrub .hero-media::after {
  background:
    linear-gradient(180deg, rgba(6, 11, 51, .2) 0%, rgba(6, 11, 51, 0) 18%),
    linear-gradient(0deg, rgba(6, 11, 51, .34) 0%, rgba(6, 11, 51, .14) 22%, rgba(6, 11, 51, 0) 42%),
    linear-gradient(90deg, rgba(6, 11, 51, .3) 0%, rgba(6, 11, 51, .2) 18%, rgba(6, 11, 51, .1) 36%, rgba(6, 11, 51, .03) 54%, rgba(6, 11, 51, 0) 70%);
}
.hero-scrub .hero-media img.hero-photo { filter: brightness(1.1) saturate(1.04); }
.hero-scrub .hero-body { text-shadow: 0 1px 3px rgba(6, 11, 51, .45), 0 2px 22px rgba(6, 11, 51, .5); }

/* Home hero shade in black instead of navy (user, 2026-10-16) — same strength and placement */
.hero-scrub .hero-media::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 18%),
    linear-gradient(0deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, .14) 22%, rgba(0, 0, 0, 0) 42%),
    linear-gradient(90deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .2) 18%, rgba(0, 0, 0, .1) 36%, rgba(0, 0, 0, .03) 54%, rgba(0, 0, 0, 0) 70%);
}
.hero-scrub .hero-body { text-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 2px 22px rgba(0, 0, 0, .5); }

/* Black shades instead of navy on every page banner and on the photo cards (user, 2026-10-16),
   same strengths as before (matches the home hero) */
.page-hero .hero-media::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, .08) 14%, rgba(0, 0, 0, 0) 30%),
    linear-gradient(0deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .14) 24%, rgba(0, 0, 0, .03) 48%, rgba(0, 0, 0, 0) 66%),
    linear-gradient(90deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .22) 16%, rgba(0, 0, 0, .12) 32%, rgba(0, 0, 0, .05) 50%, rgba(0, 0, 0, 0) 68%);
}
@media (max-width: 760px) {
  .page-hero .hero-media::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .26) 0%, rgba(0, 0, 0, .06) 26%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .34) 78%, rgba(0, 0, 0, .5) 100%);
  }
}
.page-hero-body { text-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 2px 22px rgba(0, 0, 0, .5); }

.service-card::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .14) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .66) 100%);
}
.service-card:hover::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .18) 0%, rgba(0, 0, 0, .02) 24%, rgba(0, 0, 0, .06) 50%, rgba(0, 0, 0, .74) 100%);
}
.service-card h3, .service-card p, .service-card .link-underline { text-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 2px 16px rgba(0, 0, 0, .45); }

.masonry-item::after { background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .72) 100%); }
.masonry-item[data-category]::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, .72) 100%); }
.masonry-item[data-category] .masonry-cap { text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }

/* Carpet hero (carpet-hero-4, user-supplied sample-board photo 1448x1086, 2026-10-16): same as the
   Bathroom Ware banner — the photo fills a taller banner (only a sliver of top and bottom trimmed),
   no blur, no hover zoom; it drifts with the scroll */
.page-hero:has(img[src*="carpet-hero-4"]) { min-height: min(78vh, 760px); }
.page-hero .hero-media img[src*="carpet-hero-4"] { object-fit: cover; object-position: 50% 50%; transform-origin: 50% 50%; }
.page-hero:hover .hero-media img[src*="carpet-hero-4"] { scale: 1; }
@media (max-width: 760px) {
  .page-hero:has(img[src*="carpet-hero-4"]) { min-height: 560px; }
  .page-hero .hero-media img[src*="carpet-hero-4"] { object-position: 50% 50%; }
}

/* Home Products card 04: the tile stand sits low in the vertical photo, so frame it a little lower */
.service-card img[src*="tiles-card-3"] { object-position: 50% 70%; transform-origin: 50% 70%; }

/* Home Products cards (the user's four upright 2:3 photos, 2026-10-16): the card takes the photo's
   own shape so each photo shows whole — nothing trimmed off the sides or top — at every width */
.service-card:has(img[src*="flooring-card-3"]),
.service-card:has(img[src*="bathroomware-card-3"]),
.service-card:has(img[src*="carpet-card-3"]),
.service-card:has(img[src*="tiles-card-3"]) { min-height: 0; aspect-ratio: 2 / 3; }
.service-card img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]) {
  object-position: 50% 50%; transform-origin: 50% 50%;
}

/* Home Products cards, readable wording (user, 2026-10-16: "the text on it looks terrible, I need to
   see what I'm looking at"). Same dark card, same wording and effects, but the wording no longer
   sits on top of the products: the whole photo stays at the top of the card, its foot fades into
   the card's dark panel, and the heading, description and Explore sit in that panel (starting over
   the photo's countertop, below the sample boards / vanity). */
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"])) {
  aspect-ratio: auto; min-height: 0;
  justify-content: flex-start;
  padding-top: 112%;            /* % of the card's width: the wording starts 75% of the way down the photo */
  background: #0c0c0e;
}
.service-card img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]) {
  inset: 0 0 auto 0; height: auto; aspect-ratio: 2 / 3; object-fit: cover;
  object-position: 50% 50%; transform-origin: 50% 40%;
}
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]))::after {
  inset: 0 0 auto 0; height: auto; aspect-ratio: 2 / 3;
  background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 58%, rgba(12, 12, 14, .62) 78%, #0c0c0e 100%);
}
.service-card:hover:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]))::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, .04) 58%, rgba(12, 12, 14, .7) 78%, #0c0c0e 100%);
}

/* Home Products cards, softer and natural (user, 2026-10-16: "way too dark, it splits when I hover").
   - the panel under each photo is a deep version of that photo's own countertop colour (not black),
     and the photo melts into it, so it reads as one picture;
   - hover zoom grows the photo upward from its foot, so the photo never pulls away from the panel;
   - Explore sits at the foot of every card, level across the row. */
.service-card:has(img[src*="flooring-card-3"])     { --panel: 60, 46, 35; }
.service-card:has(img[src*="bathroomware-card-3"]) { --panel: 70, 56, 42; }
.service-card:has(img[src*="carpet-card-3"])       { --panel: 58, 44, 33; }
.service-card:has(img[src*="tiles-card-3"])        { --panel: 64, 58, 52; }
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"])) {
  background: rgb(var(--panel));
}
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]))::after,
.service-card:hover:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]))::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 14%, rgba(var(--panel), 0) 62%, rgba(var(--panel), .55) 80%, rgba(var(--panel), .9) 93%, rgb(var(--panel)) 100%);
}
.service-card img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]) {
  transform-origin: 50% 100%;
}
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"])) .link-underline { margin-top: auto; }
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"])) p { margin-bottom: 1.1em; }

/* Home Products cards shorter (user, 2026-10-16: "the cards are too long"): the photo keeps every
   product but drops the empty ceiling/wall above them (shown 4:5 from the bottom of the 2:3 photo),
   the wording starts just below the stands, and the type is a little more compact */
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"])) {
  padding: 92% clamp(18px, 2vw, 26px) clamp(18px, 2vw, 24px);
}
.service-card img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]) {
  aspect-ratio: 4 / 5; object-position: 50% 100%;
}
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]))::after,
.service-card:hover:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]))::after {
  aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 14%, rgba(var(--panel), 0) 58%, rgba(var(--panel), .55) 76%, rgba(var(--panel), .9) 92%, rgb(var(--panel)) 100%);
}
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"])) h3 {
  font-size: clamp(1.2rem, 1.55vw, 1.6rem); margin-bottom: .25em;
}
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"])) p {
  font-size: .84rem; line-height: 1.4; margin-bottom: .9em;
}

/* ...a bit bigger again (user, 2026-10-16: "make them a bit bigger, too small") — between the
   compact and the long version: slightly larger wording, a little more photo */
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"])) {
  padding: 100% clamp(20px, 2.3vw, 30px) clamp(20px, 2.2vw, 28px);
}
.service-card img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]),
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]))::after,
.service-card:hover:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]))::after { aspect-ratio: 3 / 4; }
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"])) h3 {
  font-size: clamp(1.35rem, 1.85vw, 1.8rem);
}
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"])) p {
  font-size: .92rem; line-height: 1.45;
}

/* Home Products cards: no thin blue line along the bottom on hover (user, 2026-10-16) */
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]))::before { content: none; }

/* Home Products cards: the photo is fully faded into the panel by the time the wording starts, so no
   light band of photo shows behind the description (user, 2026-10-16) */
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]))::after,
.service-card:hover:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]))::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 14%,
    rgba(var(--panel), 0) 50%, rgba(var(--panel), .35) 60%, rgba(var(--panel), .75) 67%, rgba(var(--panel), .95) 72%, rgb(var(--panel)) 75%);
}
/* ...and no hairline where the photo ends: the fade reaches a few pixels past the photo's edge */
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]))::after { transform: scaleY(1.02); transform-origin: 50% 0; }

/* Home Products cards: BLACK fade (user, 2026-10-16: "the fade is supposed to be black, and I need to
   see the image more"). The photo stays clear further down and only melts into black near its foot;
   the panel under it is black too. */
.service-card:has(img[src*="flooring-card-3"]),
.service-card:has(img[src*="bathroomware-card-3"]),
.service-card:has(img[src*="carpet-card-3"]),
.service-card:has(img[src*="tiles-card-3"]) { --panel: 10, 10, 11; }
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]))::after,
.service-card:hover:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]))::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, 0) 12%,
    rgba(10, 10, 11, 0) 64%, rgba(10, 10, 11, .3) 74%, rgba(10, 10, 11, .62) 84%, rgba(10, 10, 11, .88) 93%, rgb(10, 10, 11) 100%);
}

/* ...a smooth black fade (user, 2026-10-16): an eased curve over the lower half of the photo,
   in many small steps, so there is no band or edge where it darkens */
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]))::after,
.service-card:hover:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"]))::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .08) 0%, rgba(0, 0, 0, 0) 12%, rgba(10, 10, 11, 0.000) 52.0%, rgba(10, 10, 11, 0.020) 56.0%, rgba(10, 10, 11, 0.074) 60.0%, rgba(10, 10, 11, 0.156) 64.0%, rgba(10, 10, 11, 0.259) 68.0%, rgba(10, 10, 11, 0.376) 72.0%, rgba(10, 10, 11, 0.500) 76.0%, rgba(10, 10, 11, 0.624) 80.0%, rgba(10, 10, 11, 0.741) 84.0%, rgba(10, 10, 11, 0.844) 88.0%, rgba(10, 10, 11, 0.926) 92.0%, rgba(10, 10, 11, 0.980) 96.0%, rgba(10, 10, 11, 1.000) 100.0%);
}

/* Home Products cards: the 01-04 badges sit higher, tucked into the top corner, clear of the products */
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"])) .card-index {
  top: 10px; left: 10px; padding: 4px 9px; font-size: .6rem;
}
/* ...badges back to their fuller size (user: "make the boxes bigger"), still up in the corner */
.service-card:has(img:is([src*="flooring-card-3"], [src*="bathroomware-card-3"], [src*="carpet-card-3"], [src*="tiles-card-3"])) .card-index {
  top: 10px; left: 10px; padding: 7px 13px; font-size: .72rem;
}

/* Home Products cards bigger (user, 2026-10-16): the row reaches further across the page (into most
   of the side margin, up to 1480px) with a slightly tighter gap, so each card is larger; the photo,
   wording and panel scale with it */
.card-grid.cols-4:has(img[src*="flooring-card-3"]) {
  --row-w: min(1480px, calc(100vw - 2 * max(16px, calc(var(--gutter) * .4))));
  width: var(--row-w); margin-inline: calc((100% - var(--row-w)) / 2);
  gap: clamp(14px, 1.4vw, 22px);
}

/* Tiles banner: a still photo now (the video was removed), framed on the tiled floor and staircase */
.page-hero .hero-media img[src*="tiles-hero-large"] { object-position: 50% 62%; }

/* Tiles banner: plain black for now (user, 2026-10-16 — a new picture will be added later) */
.page-hero .hero-media:has(img[src*="tiles-hero-large"]) { background: #000; }
.page-hero .hero-media img[src*="tiles-hero-large"] { visibility: hidden; }

/* Tiles banner slideshow (owner's three tile photos, 2026-10-16). Each photo fills the banner and
   slowly drifts/zooms (Ken Burns); the next one wipes in from the right while sharpening from a soft
   blur, the old one eases back and dims. Progress bars bottom right; click one to jump. Motion drives
   it (js/site.js, initHeroSlides). The banner stays black under the photos. */
.page-hero:has(.banner-slides) { min-height: min(78vh, 760px); background: #000; }
.page-hero .hero-media:has(.banner-slides) { background: #000; }
.banner-slides { position: absolute; inset: 0; overflow: hidden; z-index: 0; will-change: transform; }
.banner-slides .banner-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
  opacity: 0; transform-origin: 50% 50%; will-change: transform, clip-path, filter, opacity;
  backface-visibility: hidden;
}
.banner-slides .banner-slide.is-active { opacity: 1; }
.page-hero:hover .hero-media .banner-slide { scale: 1; }
.page-hero:has(.banner-slides) .hero-media::after { z-index: 1; }
.banner-slide-nav {
  position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(26px, 4.5vh, 46px);
  display: flex; align-items: center; gap: 10px; color: #fff;
}
.banner-slide-count { font-family: var(--font-body); font-size: .72rem; letter-spacing: .18em; color: rgba(255,255,255,.75); margin-right: 8px; white-space: nowrap; }
.banner-slide-count b { color: #fff; font-weight: 600; }
.banner-slide-dot {
  position: relative; width: clamp(34px, 4vw, 56px); height: 22px; padding: 0; border: 0; background: none; cursor: pointer;
}
.banner-slide-dot::before, .banner-slide-dot span {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px;
}
.banner-slide-dot::before { background: rgba(255,255,255,.32); }
.banner-slide-dot span { background: #fff; transform: scaleX(0); transform-origin: left center; }
.banner-slide-dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 760px) {
  .page-hero:has(.banner-slides) { min-height: 560px; }
  .banner-slide-nav { left: var(--gutter); right: auto; bottom: 18px; }
  .page-hero:has(.banner-slides) .page-hero-body { padding-bottom: 64px; }
}

/* Tiles slideshow, modern version (user, 2026-10-16: "more advanced, better effects"):
   shutter strips, next-photo preview, arrows, mouse parallax, swipe */
.page-hero:has(.banner-slides) { --mx: 0px; --my: 0px; }
.banner-slides .banner-slide, .banner-strip { translate: var(--mx) var(--my); transition: translate .9s cubic-bezier(.22,1,.36,1); }
.banner-slides { inset: -18px; }
.banner-strip {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-size: cover; background-repeat: no-repeat; will-change: clip-path, transform;
}
.banner-slide-nav { gap: 14px; }
.banner-slide-count { display: inline-flex; align-items: center; gap: 10px; margin-right: 4px; }
.banner-slide-count b { display: inline-block; min-width: 1.6em; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: .04em; overflow: hidden; }
.banner-slide-count i { width: 26px; height: 1px; background: rgba(255,255,255,.5); }
.banner-slide-bars { display: inline-flex; gap: 8px; }
.banner-slide-arrow {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45); background: rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: grid; place-items: center; cursor: pointer;
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}
.banner-slide-arrow svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.banner-slide-arrow.is-next svg { transform: scaleX(-1); }
.banner-slide-arrow:hover { background: #fff; border-color: #fff; }
.banner-slide-arrow:hover svg { stroke: #000; }
.banner-slide-next {
  position: relative; width: 74px; height: 92px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 14px 30px -12px rgba(0,0,0,.7); background: #111;
}
.banner-slide-next img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .8s cubic-bezier(.22,1,.36,1); }
.banner-slide-next:hover img { scale: 1.08; }
.banner-slide-next em {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; font-style: normal; font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.7));
}
.banner-slide-arrow:focus-visible, .banner-slide-next:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width: 760px) {
  .banner-slide-next { display: none; }
  .banner-slide-arrow { width: 34px; height: 34px; }
  .banner-slide-nav { gap: 10px; }
}

/* slideshow controls: bottom right only on wide screens; below 1280px they sit under the wording
   (bottom left) so they never cover the description */
@media (max-width: 1279px) {
  .page-hero:has(.banner-slides) .page-hero-body { padding-bottom: clamp(104px, 13vh, 128px); }
  .banner-slide-nav { left: var(--gutter); right: auto; bottom: clamp(24px, 4vh, 36px); }
  .banner-slide-next { width: 58px; height: 72px; }
}

/* Tiles liquid slideshow (WebGL canvas over the photos) */
.banner-slides .banner-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; display: block; translate: none; }

/* Tiles slideshow: controls removed (user, 2026-10-16) - the wording keeps the usual banner spacing */
.page-hero:has(.banner-slides) .page-hero-body { padding-bottom: clamp(48px, 6vh, 68px); }

/* the slideshow photos never take the hover zoom or mouse shift under the canvas */
.banner-slides .banner-slide { translate: none; transition: none; }

/* first slideshow photo framed exactly like the canvas's opening frame (zoom 1.14, drifted), so the
   canvas fading in over it shows no double image */
.banner-slides .banner-slide:first-child { transform: translateX(2.28%) translateY(1.14%) scale(1.14); transform-origin: 50% 50%; }

/* Tiles slideshow, parallax push (2026-10-16). No mouse movement, no hover zoom. */
.page-hero:has(.banner-slides) { --mx: 0px; --my: 0px; }
.banner-slides .banner-frame {
  position: absolute; inset: 0; overflow: hidden; visibility: hidden; will-change: transform;
  backface-visibility: hidden;
}
.banner-slides .banner-frame.is-active { visibility: visible; }
.banner-slides .banner-frame.is-entering { box-shadow: -40px 0 80px rgba(0, 0, 0, .55); }
.banner-slides .banner-frame .banner-slide {
  opacity: 1; translate: none; transition: none; transform-origin: 50% 50%;
}
.banner-slides .banner-slide:first-child, .banner-slides .banner-frame:first-child .banner-slide { transform: scale(1.07); }
.page-hero:hover .hero-media .banner-slide { scale: 1; }

/* Products dropdown: the home page's four upright photos, framed on the products */
.mega-item img[src*="flooring-card-3"], .mega-item img[src*="carpet-card-3"] { object-position: 50% 52%; }
.mega-item img[src*="bathroomware-card-3"] { object-position: 0% 32%; }
.mega-item img[src*="tiles-card-3"] { object-position: 50% 62%; }

/* Accessories hero (user sunset bath photo, 2026-10-17): like the Bathroom Ware banner - fills a
   taller banner, no hover zoom, drifts with the scroll */
.page-hero:has(img[src*="accessories-hero"]) { min-height: min(78vh, 760px); }
.page-hero .hero-media img[src*="accessories-hero"] { object-fit: cover; object-position: 50% 58%; transform-origin: 50% 50%; }
.page-hero:hover .hero-media img[src*="accessories-hero"] { scale: 1; }
@media (max-width: 760px) { .page-hero:has(img[src*="accessories-hero"]) { min-height: 560px; } }

/* Flooring hero: no blur (user, 2026-10-19) - the photo fills the whole banner, like Bathroom Ware */
.page-hero:has(img[src*="flooring-hero-4"]) .hero-media::before { content: none; }
.page-hero .hero-media img[src*="flooring-hero-4"] {
  object-fit: cover; object-position: 50% 50%; transform-origin: 50% 50%;
  -webkit-mask-image: none; mask-image: none;
}
@media (max-width: 760px) {
  .page-hero .hero-media img[src*="flooring-hero-4"] { object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; }
}

/* Showers + Aqua Stone 8.5mm heroes: plain full-width banner at the normal size (user, 2026-10-19:
   no black panel, no stretching) - the photo fills the banner, no hover zoom */
.page-hero .hero-media img:is([src*="showers-hero-4"], [src*="v8-flooring-hero"]) { object-fit: cover; object-position: 50% 50%; }
.page-hero:hover .hero-media img:is([src*="showers-hero-4"], [src*="v8-flooring-hero"]) { scale: 1; }
.page-hero .hero-media img[src*="showers-hero-4"] { object-position: 50% 26%; }
/* Showers hero shows the WHOLE photo (user, 2026-10-19): on tablets and computers the banner takes
   the photo's own 4:3 shape, so nothing is trimmed - no black, no blur, no stretching */
@media (min-width: 761px) {
  .page-hero:has(img[src*="showers-hero-4"]) { min-height: 0; aspect-ratio: 1448 / 1086; }
  .page-hero .hero-media img[src*="showers-hero-4"] { object-position: 50% 50%; }
}
/* Showers box on Bathroom Ware: tall shower photo framed on the rain head, hand shower and niche */
.service-card img[src*="shower-card-2"], .category-img[style*="shower-card-2"] { object-position: 50% 32%; background-position: 50% 32% !important; }

/* Baths hero = the sunset bath photo from the Baths box (user, 2026-10-19), same treatment as the Accessories hero */
.page-hero:has(img[src*="baths-hero-2"]) { min-height: min(78vh, 760px); }
.page-hero .hero-media img[src*="baths-hero-2"] { object-fit: cover; object-position: 50% 58%; transform-origin: 50% 50%; }
.page-hero:hover .hero-media img[src*="baths-hero-2"] { scale: 1; }
@media (max-width: 760px) { .page-hero:has(img[src*="baths-hero-2"]) { min-height: 560px; } }

.page-hero .hero-media img[src*="accessories-hero-2"] { object-position: 50% 45%; }

/* Tapware hero (tapware-hero-3, user ChatGPT image, 2026-10-19): fills the normal-size banner, no hover zoom */
.page-hero .hero-media img[src*="tapware-hero-3"] { object-fit: cover; object-position: 60% 50%; transform-origin: 50% 50%; }
.page-hero:hover .hero-media img[src*="tapware-hero-3"] { scale: 1; }

/* Gallery hero (gallery-hero-2, user ChatGPT image, 2026-10-19): fills the normal-size banner, no hover zoom */
.page-hero .hero-media img[src*="gallery-hero-2"] { object-fit: cover; object-position: 50% 55%; transform-origin: 50% 50%; }
.page-hero:hover .hero-media img[src*="gallery-hero-2"] { scale: 1; }

/* Gallery videos, feature layout (2026-10-19): one large film on the left, two stacked on the right.
   Each card: dark film frame, number pill, round play button, label, progress line along the foot.
   Filled cards play silently when in view (and on hover), click opens the film with sound.
   Empty cards show a slow light sweep and "Coming soon". */
.gallery-videos {
  display: grid; grid-template-columns: 1.7fr 1fr; grid-template-rows: 1fr 1fr;
  gap: clamp(12px, 1.4vw, 20px); margin-bottom: clamp(30px, 3.4vw, 48px);
  aspect-ratio: 2.55 / 1;
}
.gv-item {
  position: relative; overflow: hidden; border-radius: 8px; border: 0; padding: 0; text-align: left;
  background: radial-gradient(120% 140% at 15% 10%, #2b2e35 0%, #15171b 55%, #0d0e10 100%);
  box-shadow: 0 0 0 1px rgba(6,11,51,.12), 0 24px 50px -34px rgba(6,11,51,.55);
  color: #fff; isolation: isolate; cursor: default; font: inherit;
  transition: translate .6s var(--ease), box-shadow .6s var(--ease);
}
button.gv-item { cursor: pointer; }
.gv-item.is-feature { grid-row: 1 / 3; }
.gv-item video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: scale 1.2s var(--ease); }
.gv-shade { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.7) 100%); }
.gv-index {
  position: absolute; top: 14px; left: 14px; padding: 5px 11px; border-radius: 999px; font-size: .66rem; font-weight: 600;
  letter-spacing: .18em; background: rgba(255,255,255,.14); box-shadow: 0 0 0 1px rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.gv-play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: clamp(48px, 5vw, 70px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.14); box-shadow: 0 0 0 1px rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: scale .5s var(--ease), background .5s var(--ease);
}
.gv-item:not(.is-feature) .gv-play { width: clamp(40px, 3.6vw, 52px); }
.gv-play::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.25);
  animation: gv-pulse 2.6s var(--ease) infinite; }
@keyframes gv-pulse { 0% { scale: .85; opacity: .9; } 100% { scale: 1.35; opacity: 0; } }
.gv-play svg { width: 40%; height: 40%; fill: #fff; translate: 6% 0; }
.gv-meta { position: absolute; left: 16px; right: 16px; bottom: 18px; display: flex; flex-direction: column; gap: 4px; }
.gv-meta b { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 1.5vw, 1.35rem); letter-spacing: -.01em; }
.gv-item:not(.is-feature) .gv-meta b { font-size: clamp(.9rem, 1.1vw, 1.05rem); }
.gv-meta em { font-style: normal; font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.gv-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.14); }
.gv-bar i { display: block; height: 100%; width: 0; background: var(--brass-lt); }
.gv-shimmer { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.gv-shimmer::after { content: ""; position: absolute; inset: 0 -60%;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.07) 50%, transparent 65%);
  animation: gv-sweep 3.8s ease-in-out infinite; }
@keyframes gv-sweep { 0% { translate: -40% 0; } 100% { translate: 40% 0; } }
@media (hover: hover) {
  .gv-item:hover { translate: 0 -4px; box-shadow: 0 0 0 1px rgba(6,11,51,.18), 0 34px 60px -32px rgba(6,11,51,.7); }
  .gv-item:hover .gv-play { scale: 1.1; background: rgba(255,255,255,.26); }
  button.gv-item:hover video { scale: 1.04; }
}
@media (prefers-reduced-motion: reduce) { .gv-play::before, .gv-shimmer::after { animation: none; } }
.gv-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 4vw; background: rgba(5,6,8,.88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gv-modal[hidden] { display: none; }
.gv-modal video { width: min(1200px, 100%); max-height: 86vh; border-radius: 8px; background: #000; }
.gv-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
  background: transparent; color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
@media (max-width: 760px) {
  .gallery-videos { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; aspect-ratio: auto; }
  .gv-item { aspect-ratio: 16 / 10; }
  .gv-item.is-feature { grid-column: 1 / 3; grid-row: auto; aspect-ratio: 16 / 9; }
}
/* phones: all three videos full width, one under another, so the label and play button never overlap */
@media (max-width: 760px) {
  .gallery-videos { grid-template-columns: 1fr; }
  .gv-item, .gv-item.is-feature { grid-column: auto; aspect-ratio: 16 / 9; }
}

/* Gallery videos are upright phone films (2026-10-19): three tall 9:16 cards in a centred row,
   whole film visible; phones: two-and-a-bit across, swipeable row */
.gallery-videos { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; aspect-ratio: auto;
  max-width: 980px; margin-inline: auto; }
.gv-item, .gv-item.is-feature { grid-row: auto; grid-column: auto; aspect-ratio: 9 / 16; }
.gv-item:not(.is-feature) .gv-meta b, .gv-meta b { font-size: clamp(.95rem, 1.3vw, 1.2rem); }
.gv-item:not(.is-feature) .gv-play, .gv-play { width: clamp(46px, 4.4vw, 62px); }
.gv-modal video { width: auto; max-width: 100%; height: 86vh; max-height: 86vh; }
@media (max-width: 760px) {
  .gallery-videos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 6px;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .gallery-videos::-webkit-scrollbar { display: none; }
  .gv-item, .gv-item.is-feature { flex: 0 0 62%; scroll-snap-align: start; }
}

/* Gallery photos run left to right, row by row (newest at the end), packed tight like a masonry:
   each photo spans as many 8px grid rows as its height needs (js/site.js, initRowMasonry) */
.masonry.is-rows { columns: auto; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--stack); grid-auto-rows: 8px; }
.masonry.is-rows .masonry-item { margin-bottom: 0; }
@media (max-width: 900px) { .masonry.is-rows { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .masonry.is-rows { grid-template-columns: 1fr; } }
.masonry.is-rows .masonry-item { align-self: start; }