/* ===========================================================================
   JCH Steel — shared design system
   ---------------------------------------------------------------------------
   The visual language established on the homepage, factored out so every page
   uses the same tokens, type scale, buttons, cards and scroll behaviour.
   Loaded after css/style.css, which still carries the legacy page rules.
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --brand: #c8102e;
  --brand-dark: #97071f;
  --brand-tint: #fdeaed;
  --gold: #ffc107;
  --ink: #14161b;
  --muted: #5b6270;
  --surface: #f5f6f8;
  --navy: #0c1622;
  --line: #e6e8ec;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(16, 18, 25, 0.08);
  --shadow-hover: 0 22px 50px rgba(16, 18, 25, 0.19);
  --display: "Space Grotesk", "Poppins", sans-serif;
}

/* ---------------------------------------------------------------------------
   Page shell
   --------------------------------------------------------------------------- */
/* `clip` rather than `hidden`: hidden would make .jch-page a scroll container
   and silently break position: sticky on the product category rail. */
html { overflow-x: hidden; }
.jch-page {
  color: var(--ink);
  overflow-x: clip;
  font-feature-settings: "kern" 1, "liga" 1;
}
.jch-page section { position: relative; }
.jch-page img { max-width: 100%; }
.jch-page h1,
.jch-page h2,
.jch-page h3 { font-family: var(--display); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }
.jch-section-pad { padding: clamp(3.75rem, 7vw, 6.75rem) 0; }
.jch-body-pad { padding: clamp(2.75rem, 5vw, 4.5rem) 0; }

/* ---------------------------------------------------------------------------
   Navigation — transparent over the hero, solid once scrolled
   --------------------------------------------------------------------------- */
.navbar.nav-transparent {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background-color: transparent !important;
  box-shadow: none;
  transition: background-color 0.35s ease, box-shadow 0.35s ease;
}
.navbar.nav-transparent .nav-link { transition: color 0.35s ease; }
.navbar.nav-transparent:not(.nav-scrolled) .nav-link { color: #14161b; }
.navbar.nav-transparent:not(.nav-scrolled) .nav-link:hover { color: rgba(20, 22, 27, 0.6); }
.navbar.nav-transparent:not(.nav-scrolled) .navbar-toggler { border-color: rgba(20, 22, 27, 0.2); }
.navbar.nav-transparent.nav-scrolled {
  background-color: #f8f9fa !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
}
/* Collapsed menu needs a readable plate over the hero image */
@media (max-width: 767px) {
  .navbar.nav-transparent .navbar-collapse.show,
  .navbar.nav-transparent .navbar-collapse.collapsing {
    background-color: #f8f9fa;
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    box-shadow: var(--shadow);
  }
}
.navbar-nav .nav-link {
  font-weight: 500;
  position: relative;
}
.navbar-nav .nav-item .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15rem;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.navbar-nav .nav-item .nav-link:hover::after,
.navbar-nav .nav-item.active .nav-link::after { transform: scaleX(1); }
.navbar-nav .nav-item.active .nav-link { color: var(--brand); }

/* ---------------------------------------------------------------------------
   Scroll progress bar
   --------------------------------------------------------------------------- */
.jch-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 1080;
  background: linear-gradient(90deg, var(--brand), var(--gold));
  transition: width 0.1s linear;
}

/* ---------------------------------------------------------------------------
   Section headings
   --------------------------------------------------------------------------- */
.jch-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 0.85rem;
}
.jch-eyebrow .num {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
  opacity: 0.32;
}
.jch-heading {
  font-family: var(--display);
  font-size: clamp(1.95rem, 3.7vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 0.9rem;
}
.jch-heading--sm { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.jch-sub { color: var(--muted); font-size: 1.06rem; line-height: 1.65; max-width: 46rem; }
.jch-center { text-align: center; }
.jch-center .jch-eyebrow { justify-content: center; }
.jch-center .jch-sub { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn-modern {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
}
.btn-modern:hover { text-decoration: none; transform: translateY(-2px); }
.btn-modern:focus-visible { outline: 3px solid rgba(200, 16, 46, 0.45); outline-offset: 3px; }
.btn-modern::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.btn-modern:hover::after { left: 140%; }
.btn-modern--sm { font-size: 0.9rem; padding: 0.6rem 1.25rem; }
.btn-primary-modern { background: var(--brand); color: #fff; box-shadow: 0 10px 24px rgba(200, 16, 46, 0.35); }
.btn-primary-modern:hover { background: var(--brand-dark); color: #fff; }
.btn-ghost-modern { background: rgba(255, 255, 255, 0.72); color: var(--ink); border-color: rgba(20, 22, 27, 0.22); }
.btn-ghost-modern:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-outline-modern { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-outline-modern:hover { background: var(--brand); color: #fff; }
.btn-gold-modern { background: var(--gold); color: var(--ink); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22); }
.btn-gold-modern:hover { background: #ffcd39; color: var(--ink); }

/* ---------------------------------------------------------------------------
   Reveal on scroll
   --------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

/* ---------------------------------------------------------------------------
   Hero — shared chrome for the homepage hero and the inner-page heroes
   --------------------------------------------------------------------------- */
.hero,
.jch-hero {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--ink);
  background: #eef1f5;
  overflow: hidden;
}
.hero { min-height: min(94vh, 840px); }
/* The inner hero anchors its copy to the top rather than centring it: with
   centring, a page with short hero copy (or an extra product logo) got a
   different amount of slack above the breadcrumbs than a page with long
   copy, so the trail sat at a different height on every page. */
.jch-hero { min-height: min(62vh, 520px); align-items: flex-start; }

.hero__bg,
.jch-hero__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.06);
  animation: heroZoom 22s ease-out forwards;
  transition: opacity 0.7s ease;
}
/* Held blank by the script until the photograph has arrived, so it fades in
   rather than popping, and the zoom starts from the frame you actually see. */
.hero__bg.is-loading,
.jch-hero__bg.is-loading { opacity: 0; animation: none; }
.hero__bg { background-image: url("../img/homepage-slide-roofing.jpg"); }
/* A page with a portrait crop for phones paints both and shows one. The image
   stays on the element's own style attribute rather than being passed through
   a custom property, because a url() inside a custom property resolves against
   the stylesheet that reads it -- from here that is /css/, not the page. */
.jch-hero__bg--mobile { display: none; }
@keyframes heroZoom { to { transform: scale(1); } }

.hero__scrim,
.jch-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.82) 46%, rgba(255, 255, 255, 0.18) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(238, 241, 245, 0.5) 100%);
}
.hero__grid,
.jch-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(20, 22, 27, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 22, 27, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 60%);
  -webkit-mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 60%);
}
.hero .wrap,
.jch-hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero__inner { max-width: 680px; padding: 6rem 0; }
.jch-hero__inner { max-width: 46rem; padding: 7.5rem 0 3.5rem; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(20, 22, 27, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(4px);
  margin-bottom: 1.6rem;
}
.hero__badge span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.18);
}
.hero h1 {
  font-size: clamp(2.6rem, 5.8vw, 4.35rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 1.2rem;
}
.hero h1 .accent { position: relative; color: var(--brand); white-space: nowrap; }
.hero h1 .accent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.08em;
  width: 100%;
  height: 0.09em;
  background: var(--brand);
  opacity: 0.3;
  transform: scaleX(0);
  transform-origin: left;
  animation: underline 0.9s 0.6s ease forwards;
}
@keyframes underline { to { transform: scaleX(1); } }
.hero p {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 35rem;
  margin: 0 0 2.1rem;
}
.hero__cta,
.jch-hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.jch-hero__cta { margin-top: 1.9rem; }

.hero__float {
  position: absolute;
  right: 0;
  bottom: 4.5rem;
  z-index: 2;
  width: 15.5rem;
  padding: 1.4rem 1.5rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-hover);
  animation: floatY 5s ease-in-out infinite;
}
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero__float-num { font-family: var(--display); font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--brand); }
.hero__float-num small { font-size: 1.1rem; }
.hero__float-label { margin-top: 0.35rem; font-size: 0.9rem; color: var(--ink); line-height: 1.4; }
.hero__float-rule { height: 1px; background: var(--line); margin: 0.9rem 0; }
.hero__float-sub { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--muted); }
.hero__float-sub::before { content: "\2713"; color: var(--brand); font-weight: 700; }

/* Inner-page hero specifics */
.jch-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.jch-crumbs a { color: var(--muted); text-decoration: none; }
.jch-crumbs a:hover { color: var(--brand); text-decoration: none; }
.jch-crumbs .sep { opacity: 0.45; }
.jch-crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.jch-hero__title {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.032em;
  margin: 0 0 1rem;
}
.jch-hero__sub {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
  color: var(--muted);
  max-width: 40rem;
  margin: 0;
}
.jch-hero__logo {
  display: flex;
  width: max-content;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.3rem;
  padding: 0.6rem 0.95rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.jch-hero__logo img { width: auto; height: 3rem; object-fit: contain; }

/* ---------------------------------------------------------------------------
   Panels — the generic content card used across the inner pages
   --------------------------------------------------------------------------- */
.jch-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: 1.5rem;
}
.jch-panel--flush { padding: 0; overflow: hidden; }
.jch-panel__title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 1.15rem;
}
.jch-panel__title::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 1.15rem;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), var(--gold));
}
.jch-panel p { color: #3d4350; line-height: 1.7; }
.jch-panel p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Product card grid (homepage + product category page)
   --------------------------------------------------------------------------- */
.prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.35rem; margin-top: 2.75rem; }
.prod-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.prod-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.prod-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: transparent; text-decoration: none; color: inherit; }
.prod-card:hover::before { transform: scaleX(1); }
.prod-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(160deg, #ffffff 0%, #eef1f4 100%);
  overflow: hidden;
}
.prod-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.prod-card__media--contain img { object-fit: contain; padding: 1.25rem; background: #fff; }
.prod-card:hover .prod-card__media img { transform: scale(1.08); }
.prod-card__name {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(200, 16, 46, 0.94);
  padding: 0.28rem 0.68rem;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(200, 16, 46, 0.3);
}
.prod-card__view {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1rem;
  background: linear-gradient(180deg, rgba(20, 22, 27, 0) 55%, rgba(20, 22, 27, 0.66) 100%);
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.prod-card:hover .prod-card__view { opacity: 1; }
.prod-card__body { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.1rem; }
.prod-card__tag { font-weight: 600; font-size: 1rem; line-height: 1.25; }
.prod-card__arrow {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand);
  font-size: 1.05rem;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.prod-card:hover .prod-card__arrow { background: var(--brand); color: #fff; transform: translateX(2px); }
.products__foot,
.gallery__foot { text-align: center; margin-top: 2.75rem; }

/* ---------------------------------------------------------------------------
   Product category grouping (product category page)
   --------------------------------------------------------------------------- */
.prod-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 2.25rem;
}
.prod-cats__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.prod-cats__chip:hover,
.prod-cats__chip:focus-visible {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}
.prod-cats__count {
  min-width: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4rem;
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.prod-cats__chip:hover .prod-cats__count,
.prod-cats__chip:focus-visible .prod-cats__count { background: rgba(255, 255, 255, 0.22); color: #fff; }

.prod-cat {
  margin-top: 3.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 8rem;
}
.prod-cat:first-of-type { border-top: 0; padding-top: 0; }
.prod-cat__head { display: flex; align-items: baseline; gap: 1rem; }
.prod-cat__num {
  flex: 0 0 auto;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--brand);
  opacity: 0.55;
}
.prod-cat__title {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0 0 0.35rem;
}
.prod-cat__covers { color: var(--muted); font-size: 0.98rem; line-height: 1.6; max-width: 52rem; margin: 0; }
.prod-cat .prod-grid { margin-top: 1.6rem; }

/* ---------------------------------------------------------------------------
   Product detail layout — sticky category rail + content column
   --------------------------------------------------------------------------- */
.product-layout {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.product-aside { position: sticky; top: 6rem; }
.product-main { min-width: 0; }

/* Category rail (inc/sidebar.php) */
.product-menu {
  position: relative;
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.product-menu__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.15rem;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(120deg, var(--brand), var(--brand-dark));
}
.product-menu__list {
  max-height: calc(100vh - 9rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
/* Fade the cut-off edge so the rail reads as scrollable, not clipped */
.product-menu::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 2.5rem;
  border-radius: 0 0 var(--radius) var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 85%);
  pointer-events: none;
}
.product-menu__group + .product-menu__group { border-top: 1px solid var(--line); }
/* The heading stays put while its own products scroll past under it. */
.product-menu__group-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.6rem 1.15rem 0.5rem;
  background: var(--surface);
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.product-menu__group-head + a { border-top: 0; }
.product-menu a {
  position: relative;
  display: block;
  padding: 0.72rem 1.15rem;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid var(--line);
  transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}
.product-menu a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand);
  transform: scaleY(0);
  transition: transform 0.2s ease;
}
.product-menu a:hover { background: var(--surface); color: var(--ink); text-decoration: none; padding-left: 1.35rem; }
.product-menu a:hover::before { transform: scaleY(1); }
.product-menu a strong { font-family: var(--display); font-size: 0.95rem; letter-spacing: 0.01em; }
.product-menu a small { display: block; color: var(--muted); font-size: 0.78rem; line-height: 1.35; }
.product-menu a.active { background: var(--brand-tint); color: var(--brand); }
.product-menu a.active::before { transform: scaleY(1); }
.product-menu a.active strong { color: var(--brand); }
.product-menu a.active small { color: rgba(151, 7, 31, 0.75); }

/* Floating category button — the rail's second shape.
   Beside a product there is room for the rail, so the button, its backdrop and
   the panel's close control are all off here; the ≤992px block under
   "Responsive" is what turns them on and floats the menu. */
.product-cat__fab,
.product-cat__backdrop,
.product-menu__close { display: none; }

/* Legacy product-content blocks, restyled as panels */
.product-content,
.project-content,
.contact-content { margin-bottom: 1.5rem; }
.product-main .product-content {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.35rem, 3vw, 2.1rem);
}
.product-main .product-content > h2,
.product-main .product-content > h3 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 1.15rem;
}
.product-main .product-content > h2::before,
.product-main .product-content > h3::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 1.15rem;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand), var(--gold));
}
.product-main .product-content p { color: #3d4350; line-height: 1.7; }
.product-main .product-content-img,
.product-main .product-content-dimension,
.product-main .product-content-accessories {
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, #ffffff 0%, #eef1f4 100%);
  border: 1px solid var(--line);
  padding: 0.5rem;
  object-fit: contain;
}
/* Gallery thumbnails inside product pages */
.product-main [data-toggle="modal"] { border-radius: var(--radius-sm); cursor: zoom-in; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.product-main [data-toggle="modal"]:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

/* ---------------------------------------------------------------------------
   Product page motion
   The panels carry .reveal, so js/modern.js fades them up on scroll exactly
   like the homepage sections. Everything below is the product-page layer on
   top of that: a rail entrance on load, a cascade for the gallery thumbnails
   inside a panel, and hover feedback on the panels themselves. The hero is
   deliberately left alone so it animates exactly like the homepage hero --
   the shared heroZoom background, nothing more.
   --------------------------------------------------------------------------- */
@keyframes jchFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes jchFadeLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }

/* Category rail slides in from the side, its links following one by one */
.jch-product .product-aside { animation: jchFadeLeft 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
/* `--i` is the running position of each heading and link, written by
   inc/sidebar.php: nth-child cannot count them any more now that they are
   nested one category group deep. Capped so a long rail still finishes early. */
.jch-product .product-menu__group-head,
.jch-product .product-menu a {
  animation: jchFadeUp 0.45s ease both;
  animation-delay: calc(0.16s + min(var(--i, 0) * 0.035s, 0.45s));
}

/* Panels lift under the pointer once they have been revealed.
   The reveal transition has to be repeated here: `transition` is one property,
   and this selector outranks .reveal, so listing only the hover properties
   would drop the opacity/transform fade and make the panels snap into view. */
.product-main .product-content {
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.35s ease, border-color 0.35s ease;
}
.product-main .product-content:hover { box-shadow: var(--shadow-hover); border-color: rgba(151, 7, 31, 0.22); }
.product-main .product-content-img,
.product-main .product-content-dimension,
.product-main .product-content-accessories { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease; }
.product-main .product-content-img:hover,
.product-main .product-content-dimension:hover,
.product-main .product-content-accessories:hover { transform: scale(1.02); box-shadow: var(--shadow-hover); }

/* Gallery thumbnails.
   Each column is its own .reveal, so a thumbnail animates when it reaches the
   viewport rather than when its panel does: the gallery panel is several
   screens tall, so a panel-wide cascade would play out off-screen and the
   images would be sitting there finished by the time you scrolled to them.
   The image settles out of a slight zoom as it arrives, echoing the hero
   backdrop. */
.product-gallery__item [data-toggle="modal"] {
  transform: scale(1.05);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease;
}
.product-gallery__item.is-visible [data-toggle="modal"] { transform: none; }
.product-gallery__item.is-visible [data-toggle="modal"]:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

/* Inline text links inside product copy. Real buttons opt out via .btn-modern,
   whose own colour and ::after shine this rule would otherwise override. */
.jch-product .product-content > p > a:not(.btn-modern) {
  position: relative;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.jch-product .product-content > p > a:not(.btn-modern)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.jch-product .product-content > p > a:not(.btn-modern):hover { text-decoration: none; }
.jch-product .product-content > p > a:not(.btn-modern):hover::after { transform: scaleX(1); }

/* Tables */
.jch-page .table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92rem;
}
.jch-page .table thead th {
  position: sticky;
  top: 0;
  background: var(--ink);
  color: #fff;
  border: 0;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
  padding: 0.75rem 0.85rem;
}
.jch-page .table tbody th,
.jch-page .table tbody td {
  border-top: 1px solid var(--line);
  padding: 0.7rem 0.85rem;
  vertical-align: middle;
}
.jch-page .table tbody tr { transition: background 0.2s ease; }
.jch-page .table tbody tr:nth-child(even) { background: var(--surface); }
.jch-page .table tbody tr:hover { background: var(--brand-tint); }
.jch-page .table-responsive {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: auto;
}

/* ---------------------------------------------------------------------------
   Feature cards
   --------------------------------------------------------------------------- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.35rem; margin-top: 2.75rem; }
.feat-grid--2 { grid-template-columns: repeat(2, 1fr); }
.feat-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.4rem 1.85rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  overflow: hidden;
}
.feat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.feat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.feat-card:hover::before { transform: scaleX(1); }
.feat-card__icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 1.3rem;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #fff2f4, #ffe1e6);
}
.feat-card__icon img { width: 50px; height: 50px; object-fit: contain; }
.feat-card__glyph {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
}
.feat-card h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.65rem; }
.feat-card p { color: var(--muted); margin: 0; font-size: 0.98rem; line-height: 1.6; }
.feat-card--left { text-align: left; }
.feat-card--left .feat-card__icon { margin-left: 0; }

/* ---------------------------------------------------------------------------
   Homepage sections
   --------------------------------------------------------------------------- */
.marquee {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 1.05rem 0;
}
.marquee__track { display: flex; width: max-content; gap: 0; animation: marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0 1.6rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}
.marquee__item::after { content: "\25C6"; color: var(--brand); font-size: 0.6rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

.certstrip {
  background: linear-gradient(180deg, #ffffff, var(--surface));
  color: var(--ink);
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.certstrip__row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.75rem 1.4rem; }
.certstrip__label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 0.5rem;
}
.certstrip__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0.35rem 0.9rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.certstrip__chip:hover { border-color: rgba(200, 16, 46, 0.45); background: var(--brand-tint); }
.certstrip__chip::before { content: "\2713"; color: var(--brand); font-size: 0.85rem; font-weight: 700; }

.about__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.about__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-hover);
  /* The branch collage is a 16:9 panel of four tiles; a taller card would crop
     the labels off the top and bottom rows. */
  aspect-ratio: 16 / 9;
}
.about__media::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  pointer-events: none;
}
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__checklist { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.8rem; }
.about__checklist li { display: flex; align-items: flex-start; gap: 0.7rem; color: #333; font-weight: 500; }
.about__checklist li::before {
  content: "\2713";
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.05rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: 0.85rem;
  font-weight: 700;
}
.about__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.about__stat-num {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--brand);
  letter-spacing: -0.02em;
}
.about__stat-num small { font-size: 1rem; }
.about__stat-label { margin-top: 0.35rem; font-size: 0.82rem; color: var(--muted); line-height: 1.3; }

.jch-surface,
.products,
.features { background: var(--surface); }

.coverage {
  background: linear-gradient(180deg, #eef1f5 0%, #f8f9fb 100%);
  color: var(--ink);
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.coverage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(200, 16, 46, 0.07), transparent 55%);
}
.coverage .wrap { position: relative; z-index: 2; }
.coverage .jch-sub { color: var(--muted); }
.coverage__frame {
  margin-top: 2.75rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-hover);
  border: 1px solid var(--line);
}
.coverage__frame img { display: block; width: 100%; height: auto; }
.coverage__branches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2rem; }
.coverage__branches--2 { grid-template-columns: repeat(2, 1fr); margin-top: 1.35rem; }
.branch-card {
  min-width: 0;
  overflow-wrap: anywhere;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.branch-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.branch-card__name { display: flex; align-items: center; gap: 0.5rem; font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.branch-card__name span { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.branch-card__role { margin-top: 0.3rem; font-size: 0.85rem; color: var(--muted); }

/* Bento gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 150px; gap: 1rem; margin-top: 2.75rem; }
.gal { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: block; }
.gal--wide { grid-column: span 4; grid-row: span 2; }
.gal--tall { grid-column: span 2; grid-row: span 2; }
.gal--sm { grid-column: span 2; grid-row: span 1; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.62) 100%);
  transition: opacity 0.3s ease;
}
.gal__cap {
  position: absolute;
  left: 1.1rem;
  bottom: 1rem;
  z-index: 2;
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.01em;
  transform: translateY(5px);
  opacity: 0.92;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.gal:hover img { transform: scale(1.08); }
.gal:hover .gal__cap { transform: translateY(0); opacity: 1; }

.cta {
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, 0.13), transparent 42%),
    radial-gradient(circle at 85% 85%, rgba(0, 0, 0, 0.2), transparent 45%);
}
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 70%);
}
.cta .wrap { position: relative; z-index: 2; }
.cta h2 { font-size: clamp(2rem, 3.9vw, 3.1rem); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 0.9rem; }
.cta p { font-size: 1.14rem; color: rgba(255, 255, 255, 0.9); max-width: 40rem; margin: 0 auto 2rem; }

/* ---------------------------------------------------------------------------
   About page — timeline, values, quality policy
   --------------------------------------------------------------------------- */
.milestone-timeline {
  width: 100%;
  max-width: 56rem;
  margin: 2.75rem auto 0;
  padding-left: 0;
  list-style: none;
}
.milestone-item {
  position: relative;
  padding: 0 0 2rem 2.5rem;
  border-left: 2px solid var(--line);
}
.milestone-item:last-child { padding-bottom: 0; border-left-color: transparent; }
.milestone-item::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: -0.6rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 5px var(--brand-tint);
}
.milestone-year {
  display: block;
  font-family: var(--display);
  color: var(--brand);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.milestone-events {
  margin: 0.65rem 0 0;
  padding: 1rem 1.25rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.milestone-events li {
  position: relative;
  margin-bottom: 0.6rem;
  padding-left: 1.35rem;
  color: #3d4350;
  line-height: 1.6;
}
.milestone-events li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}
.milestone-events li:last-child { margin-bottom: 0; }

.policy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.35rem; margin-top: 2.75rem; }
.policy-card {
  position: relative;
  display: flex;
  gap: 1.15rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem 1.6rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.policy-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.policy-card__letter {
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #fff2f4, #ffe1e6);
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
}
.policy-card p { margin: 0; color: #3d4350; line-height: 1.6; }

/* ---------------------------------------------------------------------------
   Certificates page
   --------------------------------------------------------------------------- */
.cert-group { margin-top: 3rem; }
.cert-group:first-of-type { margin-top: 0; }
.cert-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.35rem; margin-top: 1.6rem; }
.cert-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.cert-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.cert-card__label {
  padding: 0.85rem 1.15rem;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.cert-card__media { padding: 1.15rem; background: #fff; }
.cert-card__media img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* Multi-page certificates are shown as a book: leaves on the right turn on
   the spine to carry each sheet over to the left. The spread keeps the same
   footprint as the two cards it replaces, however many pages it holds. */
.cert-book { margin-top: 1.6rem; }
.cert-book__stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  perspective: 2400px;
  perspective-origin: 50% 42%;
}
.cert-book__half {
  position: relative;
  aspect-ratio: 1 / 1.414;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.cert-book__half--left {
  border-radius: var(--radius) 0 0 var(--radius);
  border-right: none;
}
.cert-book__half--right {
  border-radius: 0 var(--radius) var(--radius) 0;
  border-left: none;
}
/* The spine: a crease painted across the gutter of both halves. */
.cert-book__half::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 26px;
  pointer-events: none;
  z-index: 3;
}
.cert-book__half--left::after {
  right: 0;
  background: linear-gradient(to right, rgba(12, 22, 34, 0) 0%, rgba(12, 22, 34, 0.16) 100%);
}
.cert-book__half--right::after {
  left: 0;
  background: linear-gradient(to left, rgba(12, 22, 34, 0) 0%, rgba(12, 22, 34, 0.16) 100%);
}

/* Static panels sit under the leaf: the cover on the left, the inside of the
   back cover on the right, each revealed as the leaf moves off it. */
.cert-book__panel {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.7rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  text-align: center;
}
.cert-book__panel-eyebrow {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.cert-book__panel-title {
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.2vw, 1.75rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.cert-book__panel-note {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
}
.cert-book__panel--back { justify-content: flex-end; padding-bottom: 2rem; }
.cert-book__panel--back .cert-book__panel-note {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* The leaf itself — hinged on the spine, i.e. its left edge. */
.cert-book__leaf {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 0.95s cubic-bezier(0.52, 0.02, 0.24, 1);
}
.cert-book__leaf.is-turned { transform: rotateY(-180deg); }
.cert-book__leaf:focus-visible { outline: none; }
.cert-book__leaf:focus-visible .cert-book__face {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}
.cert-book__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cert-book__face--front { border-radius: 0 var(--radius) var(--radius) 0; }
/* Counter-rotated so the reverse reads upright once the leaf has turned. */
.cert-book__face--back {
  transform: rotateY(180deg);
  border-radius: var(--radius) 0 0 var(--radius);
}
/* Paper shading along the bound edge of each face. */
.cert-book__face::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34px;
  pointer-events: none;
}
.cert-book__face--front::after {
  left: 0;
  background: linear-gradient(to right, rgba(12, 22, 34, 0.13), rgba(12, 22, 34, 0));
}
.cert-book__face--back::after {
  right: 0;
  background: linear-gradient(to left, rgba(12, 22, 34, 0.13), rgba(12, 22, 34, 0));
}
@keyframes certLeafIn { from { opacity: 0; } to { opacity: 1; } }
/* Lifted off the page while it swings, so it casts over both halves. */
.cert-book__leaf.is-turning {
  box-shadow: 0 26px 60px rgba(16, 18, 25, 0.28);
}
.cert-book__face-label {
  padding: 0.85rem 1.15rem;
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.cert-book__face-media {
  flex: 1;
  min-height: 0;
  padding: 1.15rem;
  background: #fff;
}
.cert-book__face-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.cert-book__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.1rem;
}
.cert-book__nav {
  width: 2.6rem;
  height: 2.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.cert-book__nav:hover:not(:disabled) {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.cert-book__nav:disabled { opacity: 0.35; cursor: default; }
.cert-book__status {
  min-width: 13rem;
  text-align: center;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Portfolio page — video cards
   --------------------------------------------------------------------------- */
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.35rem; margin-top: 2.75rem; }
.video-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.video-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.video-card__frame { position: relative; padding-top: 56.25%; background: #0c1622; }
.video-card__frame > iframe,
.video-card__frame > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-card__title {
  margin: 0;
  padding: 1rem 1.25rem;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------------------
   Projects page — masonry-ish gallery
   --------------------------------------------------------------------------- */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; margin-top: 2.75rem; }
.project-tile {
  position: relative;
  display: block;
  border: 0;
  padding: 0;
  background: #eef1f5;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.project-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.project-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.45) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.project-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.project-tile:hover img { transform: scale(1.07); }
.project-tile:hover::after { opacity: 1; }
.project-tile:focus-visible { outline: 3px solid rgba(200, 16, 46, 0.5); outline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Contact page
   --------------------------------------------------------------------------- */
.contact-grid { margin-top: 2.75rem; display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
/* Without this a wide child (the branch e-mails) stretches the track past the viewport. */
.contact-grid > * { min-width: 0; }
.contact-map-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.contact-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 1.6rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.contact-map-eyebrow {
  display: block;
  font-family: var(--display);
  color: var(--brand);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.contact-map-header h2 { margin: 0.35rem 0 0.3rem; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }
.contact-map-header p { max-width: 48rem; margin: 0; color: var(--muted); font-size: 0.95rem; }
.contact-map-frame { height: 26rem; }
.contact-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.contact-branch-buttons { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.contact-branch-selector { margin-top: 1.75rem; }
.contact-branch-button {
  width: auto;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.contact-branch-button:hover { border-color: var(--brand); color: var(--brand); }
.contact-branch-button.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.contact-branch-button:focus-visible { outline: 3px solid rgba(200, 16, 46, 0.4); outline-offset: 2px; }

.jch-page .form-control {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.98rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.jch-page .form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.12);
}
.jch-page .form-group label {
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.jch-page .form-control.is-invalid { border-color: var(--brand); }
.jch-page .form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.12); }

/* The outcome of a submission, in place of the alert() this used to raise. */
.contact-form-status {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-size: 0.95rem;
}
.contact-form-status--ok { border-color: #b7dfc2; background: #eef8f1; color: #1c6b38; }
.contact-form-status--error { border-color: #f0bcc4; background: var(--brand-tint); color: var(--brand-dark); }

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-social { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.9rem; }

.coverage-area-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  cursor: zoom-in;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.coverage-area-trigger:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.coverage-area-trigger:focus-visible { outline: 3px solid rgba(200, 16, 46, 0.45); outline-offset: 3px; }
.coverage-area-trigger img { display: block; width: 100%; height: auto; }

/* ---------------------------------------------------------------------------
   Career page
   --------------------------------------------------------------------------- */
.coming-soon-card {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(2.25rem, 5vw, 3.5rem);
}
.coming-soon-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand);
  font-family: var(--display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Social links — a monotone glyph in a round frame, shared by the footer and
   the contact page. The marks are inline SVG filled with currentColor, so the
   frame and the icon shift together on hover.
   --------------------------------------------------------------------------- */
.social-btn {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  vertical-align: middle;
  transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.social-btn:hover,
.social-btn:focus-visible {
  color: var(--brand);
  border-color: var(--brand);
  transform: translateY(-2px);
}
.social-btn__icon { width: 0.95rem; height: 0.95rem; display: block; }
.social-btn--lg { width: 3.25rem; height: 3.25rem; box-shadow: var(--shadow); }
.social-btn--lg:hover,
.social-btn--lg:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.social-btn--lg .social-btn__icon { width: 1.4rem; height: 1.4rem; }

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */
footer {
  border-top: 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  color: #3d4350;
  padding-top: 3rem;
  position: relative;
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--gold));
}
footer h5 {
  font-family: var(--display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
footer h6 { color: var(--muted); font-size: 0.82rem; }
footer p { font-size: 0.9rem; line-height: 1.6; margin-bottom: 0.65rem; }

/* Address slider — five branches share one slot instead of stacking.
   Until the script marks it ready the slides simply stack, so the addresses
   are all readable with JavaScript off. */
.footer-addr { max-width: 30rem; margin: 0 auto; }
.footer-addr__stage { display: grid; gap: 1rem; }
.footer-addr__slide { min-width: 0; overflow-wrap: anywhere; }
.footer-addr__nav { display: none; }

.footer-addr.is-ready .footer-addr__stage { gap: 0; }
/* Every slide now sits in the same grid cell, so the stage is as tall as the
   longest address and never jumps as the slides change. */
.footer-addr.is-ready .footer-addr__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.footer-addr.is-ready .footer-addr__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}
footer .footer-addr__slide p { color: var(--muted); }
footer .footer-addr__slide > p:first-child {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.footer-addr.is-ready .footer-addr__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.footer-addr__arrow {
  width: 2rem;
  height: 2rem;
  flex: none;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.footer-addr__arrow:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.footer-addr__dots { display: flex; align-items: center; gap: 0.4rem; }
.footer-addr__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--line);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.footer-addr__dot:hover { background: var(--muted); }
.footer-addr__dot.is-active { background: var(--brand); transform: scale(1.35); }
footer hr.bg-light {
  background-color: var(--line) !important;
  border: 0;
  height: 1px;
  width: 100%;
}
footer a { color: var(--brand); }
footer a:hover { color: var(--brand-dark); }

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) { .hero__float { display: none; } }

@media (max-width: 992px) {
  .prod-grid { grid-template-columns: repeat(3, 1fr); }
  .about__grid { grid-template-columns: 1fr; }
  /* No room for the rail beside the product, and below the article it went
     unseen. It leaves the flow entirely here — a floating button opens it over
     the page instead — so the layout is just the product column. */
  .product-layout { display: block; }
  /* The rail's entrance animation would make this a containing block and pin
     its "fixed" children to it rather than to the viewport. */
  .product-aside { position: static; animation: none !important; }
  .product-cat__fab {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    position: fixed;
    right: 1rem;
    bottom: 1.15rem;
    z-index: 1050;
    padding: 0.8rem 1.2rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--brand), var(--brand-dark));
    color: #fff;
    font-family: var(--display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: 0 12px 30px rgba(151, 7, 31, 0.4);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .product-cat__fab:hover,
  .product-cat__fab:focus { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-hover); }
  .product-cat__fab-ico { display: block; width: 1.15rem; height: 1.15rem; }
  .product-cat__ico { display: block; width: 100%; height: 100%; }
  /* Open, the button is the way back out, so it carries a cross instead. */
  .product-cat__ico--close,
  .product-cat.is-open .product-cat__ico--open { display: none; }
  .product-cat.is-open .product-cat__ico--close { display: block; }
  .product-cat__backdrop {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background: rgba(12, 22, 34, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }
  .product-cat.is-open .product-cat__backdrop { opacity: 1; visibility: visible; }
  .product-cat .product-menu {
    position: fixed;
    z-index: 1045;
    /* The rail is width: 100%; left and right cannot place a box that still
       insists on being as wide as the viewport. */
    width: auto;
    left: 1rem;
    right: 1rem;
    bottom: 5.1rem;
    max-width: 24rem;
    margin-left: auto;
    box-shadow: var(--shadow-hover);
    /* Grows up from the button to just under the fixed navbar -- 100px at its
       tallest below 992px -- and stops there. dvh so a phone's retracting
       browser chrome does not push the top of the panel off screen. */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 12.1rem);
    max-height: calc(100dvh - 12.1rem);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem) scale(0.98);
    transform-origin: 100% 100%;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  }
  .product-cat.is-open .product-menu { opacity: 1; visibility: visible; transform: none; }
  .product-cat .product-menu__head { flex: none; }
  /* Whatever the header leaves: min-height clears the flex item's automatic
     minimum, which would otherwise refuse to shrink below the list's content. */
  .product-cat .product-menu__list { flex: 1 1 auto; min-height: 0; max-height: none; }
  .product-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -0.35rem -0.35rem -0.35rem auto;
    padding: 0.35rem;
    width: 1.9rem;
    height: 1.9rem;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    cursor: pointer;
  }
  .product-menu__close:hover { background: rgba(255, 255, 255, 0.3); }
  .product-menu__close svg { width: 100%; height: 100%; }
  /* The page underneath must not scroll out from behind the open panel. */
  body.jch-cat-open { overflow: hidden; }
  .contact-grid { grid-template-columns: 1fr; }
  .policy-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-cat { margin-top: 2.5rem; padding-top: 1.75rem; }
  .prod-cat .prod-grid { margin-top: 1.25rem; }
  .feat-grid, .feat-grid--2 { grid-template-columns: 1fr; }
  .coverage__branches { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; }
  .gal--wide, .gal--tall, .gal--sm { grid-column: span 1; grid-row: span 1; }
  /* The navbar is fixed over the hero here, so the copy has to start below it */
  .navbar-brand img { width: 7rem; height: 3.1rem; }
  .hero__inner { padding: 7rem 0 4rem; }
  .jch-hero__inner { padding: 6.5rem 0 3rem; }
  .cert-grid { grid-template-columns: 1fr; }
  /* No room for a spread: drop the cover half and turn the leaf in place. */
  .cert-book__stage { grid-template-columns: 1fr; }
  .cert-book__half--left { display: none; }
  .cert-book__half--right { border: 1px solid var(--line); border-radius: var(--radius); }
  .cert-book__half::after { display: none; }
  .cert-book__leaf { transform-origin: center center; }
  /* Moving between sheets has no page to turn, so the new one fades up over
     the last. */
  .cert-book__leaf.is-swapping { animation: certLeafIn 0.4s ease both; }
  .cert-book__face--front, .cert-book__face--back { border-radius: var(--radius); }
  .cert-book__status { min-width: 0; }
  .video-grid { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-map-header { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .contact-map-frame { height: 20rem; }
}

@media (max-width: 520px) {
  .prod-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .prod-cats { gap: 0.45rem; }
  .prod-cats__chip { padding: 0.42rem 0.8rem; font-size: 0.75rem; }
  .prod-cat__head { gap: 0.7rem; }
  .about__stats { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
  .hero { min-height: 86vh; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .btn-modern { justify-content: center; }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .project-grid { grid-template-columns: 1fr; }
  .jch-hero { min-height: 50vh; }
  /* A product render sits on a white field with the item right of centre, so
     the headline gets a clear run. `cover` destroys that on a phone: the hero
     box turns portrait (around 0.7:1), so covering a 2.6:1 field magnifies it
     nearly four times and keeps only the middle quarter of its width -- the
     roll, the trim, the deck profile all became grey texture. These heroes fit
     the whole field instead and park it under the copy. */
  /* A product render sits on a wide white field with the item off to one
     side, so the headline has a clear run. A phone hero is nearly portrait,
     so covering it with that field crops away everything but the middle
     quarter. Pages that supply a portrait crop swap to it here, and it fills
     the frame the way a photograph does. */
  .jch-hero--hasmobile .jch-hero__bg--desktop { display: none; }
  .jch-hero--hasmobile .jch-hero__bg--mobile { display: block; }
  .coverage__branches, .coverage__branches--2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg, .jch-hero__bg, .hero__float, .hero h1 .accent::after, .marquee__track { animation: none !important; }
  .hero__bg, .jch-hero__bg { transition: none; }
  .hero h1 .accent::after { transform: scaleX(1); }
  .reveal { opacity: 1; transform: none; transition: none; }
  .jch-product .product-aside,
  .jch-product .product-menu__group-head,
  .jch-product .product-menu a { animation: none !important; }
  .product-cat .product-menu,
  .product-cat__backdrop,
  .product-cat__fab { transition: none; }
  .product-gallery__item [data-toggle="modal"] { transform: none; transition: none; }
  .cert-book__leaf { transition: none; }
  .cert-book__leaf.is-swapping { animation: none; }
}

/* ---------------------------------------------------------------------------
   Build-up slideshow — cutaway renders with a pin on each product category
   Markup: inc/build-up.php   Behaviour: js/modern.js
   --------------------------------------------------------------------------- */
.buildup__stage { position: relative; margin-top: 2.75rem; }

/* Slides are stacked in one grid cell so the viewport keeps the height of the
   tallest and nothing jumps as they cross-fade. It must not clip: the tooltips
   deliberately hang outside the picture. */
.buildup__viewport {
  display: grid;
  overflow: visible;
  border-radius: var(--radius);
}
.buildup__slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}
.buildup__slide.is-active { opacity: 1; visibility: visible; }

/* The pins are placed in percentages of this box, so it has to be exactly the
   picture and nothing else — no padding, and an image that fills it. */
.buildup__figure {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: visible;
}
.buildup__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.buildup__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.7rem;
  margin-top: 1rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.buildup__caption strong { font-family: var(--display); color: var(--ink); }

/* --- Pins ---------------------------------------------------------------- */
.buildup__pin {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px; /* centres the box on its own left/top percentage */
  z-index: 2;
  color: inherit;
  text-decoration: none;
}
.buildup__pin:hover,
.buildup__pin:focus-visible,
.buildup__pin.is-open { z-index: 6; text-decoration: none; }
.buildup__pin:focus { outline: none; }

.buildup__dot,
.buildup__ping {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.buildup__dot {
  width: 15px;
  height: 15px;
  background: var(--brand);
  border: 2.5px solid #fff;
  box-shadow: 0 2px 8px rgba(16, 18, 25, 0.35);
  transition: transform 0.25s ease, background 0.25s ease;
}
.buildup__ping {
  width: 15px;
  height: 15px;
  background: var(--brand);
  opacity: 0.65;
  animation: buildupPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes buildupPing {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.55; }
  70%  { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}
.buildup__pin:hover .buildup__dot,
.buildup__pin:focus-visible .buildup__dot,
.buildup__pin.is-open .buildup__dot { transform: translate(-50%, -50%) scale(1.35); background: var(--brand-dark); }

/* --- Tooltip ------------------------------------------------------------- */
.buildup__tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 6px);
  display: grid;
  gap: 0.15rem;
  width: max-content;
  max-width: 15rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: #fff;
  text-align: left;
  box-shadow: var(--shadow-hover);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.buildup__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: var(--navy);
}
/* The tooltip stands 6px clear of the pin, and only the link's own box keeps it
   open -- so a pointer reaching for "View products" would cross that gap, drop
   the hover and close the tooltip before the click landed. This invisible strip
   spans the gap across the tooltip's full width, so the reach is unbroken. */
.buildup__tip::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}
.buildup__tip--below::before { top: auto; bottom: 100%; }
.buildup__tip--below { bottom: auto; top: calc(100% + 6px); transform: translate(-50%, -6px); }
.buildup__tip--below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--navy); }
/* Near an edge the tooltip is pinned to that side instead of centred, so it
   stays inside the picture; the caret stays over the dot. */
.buildup__tip--start { left: 50%; transform: translate(-14px, 6px); }
.buildup__tip--start.buildup__tip--below { transform: translate(-14px, -6px); }
.buildup__tip--start::after { left: 14px; }
.buildup__tip--end { left: auto; right: 50%; transform: translate(14px, 6px); }
.buildup__tip--end.buildup__tip--below { transform: translate(14px, -6px); }
.buildup__tip--end::after { left: auto; right: 14px; margin: 0 -6px 0 0; }

.buildup__tip-part { font-size: 0.78rem; line-height: 1.35; color: rgba(255, 255, 255, 0.72); }
.buildup__tip-cat { font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.25; }
.buildup__tip-go { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold); }
.buildup__tip:hover .buildup__tip-go { text-decoration: underline; }

.buildup__pin:hover .buildup__tip,
.buildup__pin:focus-visible .buildup__tip,
.buildup__pin.is-open .buildup__tip { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.buildup__pin:hover .buildup__tip--start,
.buildup__pin:focus-visible .buildup__tip--start,
.buildup__pin.is-open .buildup__tip--start { transform: translate(-14px, 0); }
.buildup__pin:hover .buildup__tip--end,
.buildup__pin:focus-visible .buildup__tip--end,
.buildup__pin.is-open .buildup__tip--end { transform: translate(14px, 0); }

/* --- Slideshow controls --------------------------------------------------- */
.buildup__arrow {
  position: absolute;
  top: calc(50% - 2rem);
  z-index: 7;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  padding: 0 0 0.2rem;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.buildup__arrow:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.buildup__arrow--prev { left: -1.2rem; }
.buildup__arrow--next { right: -1.2rem; }

.buildup__dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.4rem;
}
.buildup__dot-btn {
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.buildup__dot-btn:hover { color: var(--ink); border-color: var(--ink); }
.buildup__dot-btn.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

@media (max-width: 900px) {
  .buildup__arrow--prev { left: 0.4rem; }
  .buildup__arrow--next { right: 0.4rem; }
}
@media (max-width: 600px) {
  .buildup__dot, .buildup__ping { width: 13px; height: 13px; }
  .buildup__tip { max-width: 11.5rem; padding: 0.5rem 0.65rem; }
  .buildup__tip-cat { font-size: 0.9rem; }
  .buildup__arrow { width: 2.4rem; height: 2.4rem; font-size: 1.5rem; }
  .buildup__dot-btn { padding: 0.38rem 0.75rem; font-size: 0.74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .buildup__ping { animation: none; opacity: 0.35; }
  .buildup__slide, .buildup__tip { transition: none; }
}

/* ---------------------------------------------------------------------------
   Brochure download CTA (inc/brochure-cta.php)
   --------------------------------------------------------------------------- */
.brochure-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin: 1.5rem 0 0;
}
.brochure-cta__icon { flex: none; }
/* The arrow slides down on hover, the way a download reads. */
.brochure-cta__btn .brochure-cta__icon { transition: transform 0.18s ease; }
.brochure-cta__btn:hover .brochure-cta__icon { transform: translateY(3px); }
@media (prefers-reduced-motion: reduce) {
  .brochure-cta__btn .brochure-cta__icon { transition: none; }
  .brochure-cta__btn:hover .brochure-cta__icon { transform: none; }
}