/*
Theme Name: Gripline Customs
Theme URI: https://griplinecustoms.com
Author: Atlas Reach
Description: Custom classic theme for Gripline Customs - off-road & marine EVA foam decking. Dark industrial/marine register drawn from the client's logo (black / chrome / cobalt). Token-driven: every brand colour lives in the :root block below, so a palette change is a token swap, not a rebuild.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: Proprietary - client work
Text Domain: gripline
*/

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Surfaces - near-black base, the logo's own background */
  --ink-0: #07080a;
  --ink-1: #0d1014;
  --ink-2: #141922;
  --ink-3: #1b212b;
  --ink-4: #232b37;

  /* Hairlines carry the structure; shadows are used sparingly */
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.17);

  /* Text */
  --text: #eef2f6;
  --text-2: #a9b4c1;
  --text-3: #79848f;

  /* Cobalt, sampled from the wave in the logo */
  --accent: #1f90e2;
  --accent-bright: #47b6f5;
  --accent-deep: #0a4a80;
  --accent-wash: rgba(31, 144, 226, 0.12);
  --accent-wash-strong: rgba(31, 144, 226, 0.22);

  /* Status */
  --ok: #35c07a;
  --warn: #e8b23c;
  --danger: #e0563f;

  /* Type */
  --ff-head: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --ff-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tracking-caps: 0.06em;
  --tracking-wide: 0.14em;

  /* Geometry */
  --radius: 4px;
  --radius-lg: 6px;
  --maxw: 1260px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 8vw, 6.5rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 140ms;
  --med: 260ms;
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
video,
svg { max-width: 100%; display: block; height: auto; }

/* gripline_img() renders <picture><source><img></picture>. A <picture> is an
   inline box by default, so an inner `height: 100%` would resolve against the
   picture rather than the fill container and object-fit would never crop -
   images ended up scaled to width and arbitrarily cut off. Every fill
   container therefore stretches its <picture> explicitly. */
.hero__media picture,
.page-hero__bg picture,
.tile__media picture,
.split__media picture,
.gallery-item picture { width: 100%; height: 100%; }

a { color: var(--accent-bright); text-decoration: none; }
a:hover { color: #fff; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--ff-head);
  font-weight: 700;
  line-height: 1.04;
  margin: 0 0 0.5em;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}

h1 { font-size: clamp(2.4rem, 1.5rem + 4.4vw, 4.6rem); }
h2 { font-size: clamp(1.85rem, 1.25rem + 2.5vw, 3.05rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem); }
h4 { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.28rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: 0.4em; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
}
.skip-link:focus {
  left: 1rem; top: 1rem;
  background: var(--accent);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 820px; }
.wrap--wide { max-width: 1480px; }

.section { padding-block: var(--section-y); }
.section--alt { background: var(--ink-1); }
.section--tight { padding-block: clamp(2.2rem, 5vw, 3.6rem); }

.section-head {
  max-width: 760px;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head p {
  color: var(--text-2);
  font-size: 1.08em;
  margin-bottom: 0;
}

/* Small mono-ish overline label, used above section titles */
.overline {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ff-head);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-bright);
  margin-bottom: 0.9rem;
}
.overline::before {
  content: '';
  width: 26px;
  height: 2px;
  background: var(--accent);
}
.section-head--center .overline { justify-content: center; }

.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.stack > * + * { margin-top: 1rem; }
.text-center { text-align: center; }
.muted { color: var(--text-2); }
.lede { font-size: 1.16em; color: var(--text-2); }

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.82rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--ff-head);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--fast) var(--ease),
              background var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              color var(--fast) var(--ease);
}
.btn:hover {
  --btn-bg: var(--accent-bright);
  color: #fff;
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0) scale(0.99); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  --btn-bg: rgba(255, 255, 255, 0.06);
  border-color: var(--accent);
  color: #fff;
}

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--ink-0);
}
.btn--light:hover { --btn-bg: #e6edf4; --btn-fg: var(--ink-0); }

.btn--lg { padding: 1rem 1.9rem; font-size: 1.12rem; }
.btn--sm { padding: 0.55rem 1rem; font-size: 0.9rem; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* ==========================================================================
   5. HEADER / NAV
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7, 8, 10, 0.86);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--line);
  transition: background var(--med) var(--ease);
}
.site-header--scrolled { background: rgba(7, 8, 10, 0.97); }

/* Thin utility strip above the nav: phone + pitch */
.topbar {
  background: linear-gradient(90deg, var(--accent-deep), var(--accent) 60%, var(--accent-bright));
  color: #fff;
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 0.42rem 0;
  font-family: var(--ff-head);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  text-align: center;
}
.topbar a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap; /* never break a phone number mid-digits */
}
.topbar__sep { opacity: 0.55; }

/* On narrow screens the bar keeps the phone number - the actual CTA - and
   drops the marketing line rather than wrapping onto three lines. */
@media (max-width: 620px) {
  .topbar__inner { gap: 0; }
  .topbar__inner > span:first-child,
  .topbar__sep { display: none; }
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.7rem;
}

.brand { flex: 0 0 auto; }
.brand img {
  width: clamp(148px, 17vw, 224px);
  height: auto;
}
.brand--text {
  font-family: var(--ff-head);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text);
}

.nav { margin-left: auto; }
.nav ul {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav li { margin: 0; position: relative; }
.nav a {
  display: block;
  padding: 0.6rem 0.72rem;
  color: var(--text-2);
  font-family: var(--ff-head);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav .current-menu-parent > a,
.nav .current-page-ancestor > a {
  color: #fff;
  background: var(--accent-wash);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Dropdowns */
.nav .sub-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  min-width: 232px;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0.4rem;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), visibility var(--fast);
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav .sub-menu a {
  padding: 0.56rem 0.7rem;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0.01em;
}
.nav .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0.38em; height: 0.38em;
  margin-left: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.header__cta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 0 auto;
}
.header__phone {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.15;
  font-family: var(--ff-head);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
}
.header__phone small {
  font-size: 0.66rem;
  color: var(--text-3);
  letter-spacing: var(--tracking-wide);
}
.header__phone strong {
  font-size: 1.14rem;
  color: #fff;
  font-weight: 700;
}
.header__phone:hover strong { color: var(--accent-bright); }

/* Mobile toggle */
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 46px; height: 42px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  position: relative;
  display: block;
  width: 20px; height: 2px;
  background: var(--text);
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: var(--text);
  transition: transform var(--med) var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }
  .header__cta { display: none; }
  .nav {
    position: fixed;
    inset: auto 0 0 0;
    top: var(--header-h, 74px);
    margin: 0;
    background: var(--ink-1);
    border-top: 1px solid var(--line);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--med) var(--ease), visibility var(--med);
  }
  .nav[data-open='true'] { transform: translateX(0); visibility: visible; }
  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 2rem;
  }
  .nav li { border-bottom: 1px solid var(--line); }
  .nav a { padding: 1rem 0.2rem; font-size: 1.12rem; }
  .nav .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0 0 0.5rem 0.9rem;
    min-width: 0;
  }
  .nav .menu-item-has-children > a::after { float: right; }
  .nav__mobile-cta {
    display: grid;
    gap: 0.6rem;
    padding: 1.2rem var(--gutter) 2.5rem;
  }
}
@media (min-width: 1001px) {
  .nav__mobile-cta { display: none; }
}

/* ==========================================================================
   6. HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(84vh, 780px);
  display: grid;
  align-items: end;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Weighted low: in the hero shot the product (the sidestep) sits along the
     bottom of the frame, the truck door fills the top. */
  object-position: center 78%;
}
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 8, 10, 0.72) 0%, rgba(7, 8, 10, 0.35) 34%, rgba(7, 8, 10, 0.9) 88%),
    linear-gradient(90deg, rgba(7, 8, 10, 0.85) 0%, rgba(7, 8, 10, 0.25) 62%);
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 9vw, 6rem);
  max-width: 820px;
}
.hero h1 { margin-bottom: 0.35em; }
.hero h1 em {
  font-style: normal;
  color: var(--accent-bright);
}
.hero__sub {
  font-size: clamp(1.06rem, 1rem + 0.5vw, 1.3rem);
  color: #d3dbe4;
  max-width: 60ch;
  margin-bottom: 1.7rem;
}
.hero .btn-row { margin-bottom: 1.6rem; }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--ff-head);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-2);
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}
.hero__trust li::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

/* Compact hero for interior pages */
.page-hero {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5.2rem);
  background: var(--ink-1);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.page-hero--media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7, 8, 10, 0.94) 0%, rgba(7, 8, 10, 0.62) 70%, rgba(7, 8, 10, 0.8) 100%);
}
.page-hero__bg {
  position: absolute; inset: 0; z-index: 0;
}
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { margin-bottom: 0.3em; }
.page-hero p {
  color: var(--text-2);
  max-width: 62ch;
  font-size: 1.1em;
  margin-bottom: 0;
}

.breadcrumbs {
  font-family: var(--ff-head);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.9rem;
}
.breadcrumbs a { color: var(--text-2); }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs span + span::before {
  content: '/';
  margin: 0 0.5rem;
  color: var(--text-3);
  opacity: 0.6;
}

/* ==========================================================================
   7. CARDS
   ========================================================================== */

.card {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--med) var(--ease), transform var(--med) var(--ease);
}
.card:hover { border-color: var(--line-strong); }
.card__body { padding: clamp(1.1rem, 2vw, 1.5rem); }
.card__body h3 { margin-bottom: 0.4rem; }
.card__body p { color: var(--text-2); margin-bottom: 0; font-size: 0.99em; }

/* Category / product tile with image + hover lift */
.tile {
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: inherit;
  transition: border-color var(--med) var(--ease), transform var(--med) var(--ease);
}
a.tile:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  color: inherit;
}
.tile__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-3);
}
.tile__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}
a.tile:hover .tile__media img { transform: scale(1.045); }
.tile__media--tall { aspect-ratio: 3 / 4; }
.tile__body {
  padding: 1.05rem 1.15rem 1.2rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.4rem;
}
.tile__body h3 {
  font-size: 1.24rem;
  margin: 0;
}
.tile__body p {
  color: var(--text-2);
  font-size: 0.96em;
  margin: 0;
  flex: 1 1 auto;
}
.tile__more {
  font-family: var(--ff-head);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-bright);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.tile__more::after {
  content: '';
  width: 0.42em; height: 0.42em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--fast) var(--ease);
}
a.tile:hover .tile__more::after { transform: rotate(45deg) translate(2px, -2px); }

/* "Photos coming soon" state - used where the client hasn't supplied imagery */
.tile__media--placeholder {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.022) 0 12px, transparent 12px 24px),
    var(--ink-3);
}
.tile__media--placeholder span {
  font-family: var(--ff-head);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
  padding: 0 1rem;
}

/* Feature card - the 8 EVA foam properties */
.feature {
  padding: clamp(1.15rem, 2vw, 1.5rem);
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color var(--med) var(--ease);
}
.feature:hover { border-color: var(--line-strong); }
.feature h4 { margin-bottom: 0.4rem; }
.feature p { color: var(--text-2); font-size: 0.96em; margin: 0; }
.feature__icon {
  width: 30px; height: 30px;
  margin-bottom: 0.75rem;
  color: var(--accent-bright);
}
.feature__icon svg { width: 100%; height: 100%; }

/* Numbered process step */
.step {
  position: relative;
  padding-top: 1.6rem;
}
.step__num {
  font-family: var(--ff-head);
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--accent);
  display: block;
  margin-bottom: 0.5rem;
}
.step h4 { margin-bottom: 0.35rem; }
.step p { color: var(--text-2); font-size: 0.97em; margin: 0; }

/* ==========================================================================
   8. SPLIT / MEDIA SECTIONS
   ========================================================================== */

.split {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: center;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--reverse .split__media { order: 2; }
  .split--wide-media { grid-template-columns: 1.15fr 1fr; }
}
.split__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.split__media img { width: 100%; }
.split__body h2 { margin-bottom: 0.6rem; }

/* Stat / spec row */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 1.6rem;
}
.specs > div {
  background: var(--ink-2);
  padding: 1rem 1.1rem;
}
.specs dt {
  font-family: var(--ff-head);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.25rem;
}
.specs dd {
  margin: 0;
  font-family: var(--ff-head);
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
}

/* ==========================================================================
   9. COLOUR PICKER (page-colors)
   ========================================================================== */

.colors__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.8rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.chip {
  padding: 0.5rem 0.95rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-family: var(--ff-head);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--fast) var(--ease);
}
.chip:hover { color: #fff; border-color: var(--accent); }
.chip[aria-pressed='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.swatch {
  margin: 0;
  text-align: center;
}
.swatch__chip {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: var(--ink-3);
  transition: transform var(--med) var(--ease), border-color var(--med) var(--ease);
}
.swatch__chip img { width: 100%; height: 100%; object-fit: cover; }
.swatch:hover .swatch__chip {
  transform: scale(1.06);
  border-color: var(--accent);
}
.swatch__name {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--ff-head);
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  line-height: 1.2;
}
.swatch__tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}
.tag {
  font-family: var(--ff-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 0.12rem 0.42rem;
  border-radius: 2px;
  border: 1px solid var(--line-strong);
  color: var(--text-3);
}
.tag--new { background: var(--accent); border-color: var(--accent); color: #fff; }
.tag--two-tone { color: var(--accent-bright); border-color: var(--accent-wash-strong); }

.swatch[hidden] { display: none; }

/* ==========================================================================
   10. GALLERY
   ========================================================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
}
.gallery-item {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ink-2);
  aspect-ratio: 4 / 3;
}
.gallery-item--tall { aspect-ratio: 3 / 4; }
.gallery-item--wide { grid-column: span 2; aspect-ratio: 16 / 9; }
@media (max-width: 640px) {
  .gallery-item--wide { grid-column: span 1; }
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem 0.9rem 0.7rem;
  background: linear-gradient(180deg, transparent, rgba(7, 8, 10, 0.9));
  font-family: var(--ff-head);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: #fff;
}
.gallery-item video { width: 100%; height: 100%; object-fit: cover; }
.gallery-item__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.gallery-item__play::after {
  content: '';
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(31, 144, 226, 0.9);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  background-image: linear-gradient(var(--accent), var(--accent));
  box-shadow: 0 0 0 1px rgba(255,255,255,0.25) inset;
}
.gallery-item__play svg { width: 54px; height: 54px; color: #fff; }

/* ==========================================================================
   11. WOOCOMMERCE
   ========================================================================== */

.woocommerce-products-header { margin-bottom: 2rem; }
.woocommerce-notices-wrapper:empty { display: none; }

/* Product loop */
ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 262px), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.products::before,
ul.products::after { display: none !important; }
ul.products li.product {
  margin: 0 !important;
  width: auto !important;
  float: none !important;
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--med) var(--ease), transform var(--med) var(--ease);
}
ul.products li.product:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
ul.products li.product a.woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  color: inherit;
}
ul.products li.product img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  margin: 0 !important;
}
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ff-head);
  font-size: 1.16rem !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text);
  padding: 1rem 1.1rem 0.3rem !important;
  margin: 0;
}
ul.products li.product .price,
ul.products li.product .gripline-cfp {
  padding: 0 1.1rem 1rem;
  margin: 0;
  font-family: var(--ff-head);
  font-size: 1.02rem !important;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-bright);
}
ul.products li.product .button { margin: 0 1.1rem 1.1rem; }

/* "Call for pricing" treatment */
.gripline-cfp {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--ff-head);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--accent-bright);
}
.gripline-cfp::before {
  content: '';
  width: 7px; height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
}
.gripline-price-note {
  color: var(--text-3);
  font-size: 0.92rem;
  margin-top: 0.35rem;
}

/* Single product */
.single-product div.product {
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
}
@media (min-width: 900px) {
  .single-product div.product { grid-template-columns: 1.05fr 1fr; align-items: start; }
  .single-product div.product .woocommerce-product-gallery { grid-column: 1; }
  .single-product div.product .summary { grid-column: 2; }
  .single-product div.product .woocommerce-tabs,
  .single-product div.product .related,
  .single-product div.product .up-sells { grid-column: 1 / -1; }
}
.single-product div.product .woocommerce-product-gallery {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-2);
  width: 100% !important;
  float: none !important;
}
.single-product div.product .summary { float: none !important; width: auto !important; }
.single-product .product_title {
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
  margin-bottom: 0.4rem;
}
.single-product .woocommerce-product-details__short-description {
  color: var(--text-2);
  font-size: 1.06em;
  margin-bottom: 1.3rem;
}
.single-product .product_meta {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--text-3);
}
.single-product .product_meta a { color: var(--text-2); }
/* Woo emits SKU and Category as bare sibling spans, which run together. */
.single-product .product_meta > span { display: block; margin-bottom: 0.3rem; }
.single-product .product_meta > span:last-child { margin-bottom: 0; }

.gripline-quote-box {
  margin: 1.5rem 0;
  padding: 1.3rem;
  background:
    linear-gradient(180deg, var(--accent-wash), transparent 70%),
    var(--ink-2);
  border: 1px solid var(--accent-wash-strong);
  border-radius: var(--radius-lg);
}
.gripline-quote-box .gripline-cfp { font-size: 1.32rem; }
.gripline-quote-box p { color: var(--text-2); font-size: 0.97em; margin: 0.5rem 0 1rem; }
.gripline-quote-box .btn-row { gap: 0.6rem; }

/* Tabs */
.woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0 0 0.9rem;
  border-bottom: 1px solid var(--line);
}
.woocommerce-tabs ul.tabs::before { display: none !important; }
.woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  font-family: var(--ff-head);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-2) !important;
}
.woocommerce-tabs ul.tabs li.active a {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff !important;
}
.woocommerce-tabs .panel h2 { font-size: 1.4rem; }

/* Woo message/notice styling to match the theme. Status reads from the
   diamond marker + tint (the same marker used across the site), not from a
   coloured slab down one edge. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  --notice: var(--accent);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  background: var(--ink-2) !important;
  border: 1px solid var(--line-strong) !important;
  border-top: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-lg);
  color: var(--text) !important;
  padding: 1rem 1.2rem !important;
  margin-bottom: 1.4rem !important;
  list-style: none;
}
.woocommerce-message { --notice: var(--ok); }
.woocommerce-error { --notice: var(--danger); }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  content: '' !important;
  position: static !important;
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin: 0.55em 0 0 0 !important;
  background: var(--notice);
  transform: rotate(45deg);
  font-size: 0 !important;
  border-radius: 0;
  animation: none !important;
}

/* Category tiles on the shop archive */
ul.products li.product-category a { display: block; }
ul.products li.product-category h2 {
  font-family: var(--ff-head) !important;
  font-size: 1.2rem !important;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  padding: 1rem 1.1rem !important;
  margin: 0;
  color: var(--text);
}
ul.products li.product-category mark { background: transparent; color: var(--text-3); }

/* ==========================================================================
   12. FORMS (incl. Contact Form 7)
   ========================================================================== */

.form-card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 3vw, 2.1rem);
}

label,
.wpcf7-form label {
  display: block;
  font-family: var(--ff-head);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 0.4rem;
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='number'],
input[type='search'],
input[type='date'],
select,
textarea {
  width: 100%;
  padding: 0.72rem 0.85rem;
  background: var(--ink-0);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
  font-family: var(--ff-body);
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  background: #040506;
  outline: none;
}
textarea { min-height: 140px; resize: vertical; }
select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}
::placeholder { color: var(--text-3); opacity: 1; }

.form-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 620px) {
  .form-grid--2 { grid-template-columns: 1fr 1fr; }
  .form-grid .full { grid-column: 1 / -1; }
}

.wpcf7-form p { margin-bottom: 1rem; }
.wpcf7-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.8rem;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--ff-head);
  font-size: 1.06rem;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
  width: auto;
}
.wpcf7-form .wpcf7-submit:hover { background: var(--accent-bright); transform: translateY(-1px); }
.wpcf7-not-valid-tip { color: #ff9d8b; font-size: 0.88rem; margin-top: 0.3rem; }
.wpcf7 form .wpcf7-response-output {
  --notice: var(--accent);
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 1.2rem 0 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--ink-3);
  color: var(--text);
}
.wpcf7 form .wpcf7-response-output::before {
  content: '';
  flex: 0 0 auto;
  width: 8px; height: 8px;
  margin-top: 0.55em;
  background: var(--notice);
  transform: rotate(45deg);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { --notice: var(--danger); }
.wpcf7 form.sent .wpcf7-response-output { --notice: var(--ok); }
.wpcf7-list-item { margin: 0 1rem 0 0; display: inline-block; }
.wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--ff-body);
  font-size: 1rem;
  color: var(--text);
  margin: 0;
}
.wpcf7-list-item input[type='checkbox'],
.wpcf7-list-item input[type='radio'] { width: auto; accent-color: var(--accent); }

/* ==========================================================================
   12b. INLINE LEAD FORM
   ========================================================================== */

.lead-form {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
}
.lead-form__title { margin-bottom: 0.4rem; }
.lead-form__text {
  color: var(--text-2);
  font-size: 0.99em;
  margin-bottom: 1.2rem;
}
.lead-form__alt {
  margin: 1rem 0 0;
  font-size: 0.92rem;
  color: var(--text-3);
}
.lead-form__alt a { margin-left: 0.35rem; }

/* Tighter variant for narrow columns: the product summary and the CTA band. */
.lead-form--compact { padding: clamp(1rem, 2vw, 1.35rem); }
.lead-form--compact .wpcf7-form p { margin-bottom: 0.7rem; }
.lead-form--compact textarea { min-height: 84px; }
.lead-form--compact label {
  font-size: 0.78rem;
  margin-bottom: 0.25rem;
}
.lead-form--compact input,
.lead-form--compact select,
.lead-form--compact textarea { padding: 0.6rem 0.75rem; }

/* Copy beside the form, used mid-page on the longer templates. */
.lead-form-split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (min-width: 900px) {
  .lead-form-split { grid-template-columns: 1fr 1fr; }
}

/* The CTA band hosts the form on nearly every page. */
.cta-band .lead-form {
  background: rgba(7, 8, 10, 0.55);
  border-color: var(--line-strong);
}
.cta-band__aside {
  margin-top: 1rem;
  font-size: 0.92rem;
  color: #b9c4d0;
}
.cta-band .wpcf7 form .wpcf7-response-output { background: rgba(7, 8, 10, 0.6); }
@media (min-width: 880px) {
  .cta-band__inner { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* Product summary: the form replaces the buttons, so it needs no second box. */
.gripline-quote-box .lead-form {
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 1rem;
}

/* ==========================================================================
   13. FAQ / ACCORDION
   ========================================================================== */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--ff-head);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.22rem);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text);
  transition: color var(--fast) var(--ease);
}
.faq__q:hover { color: var(--accent-bright); }
.faq__q::after {
  content: '';
  flex: 0 0 auto;
  width: 12px; height: 12px;
  margin-top: 0.35em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--med) var(--ease);
}
.faq__q[aria-expanded='true'] { color: var(--accent-bright); }
.faq__q[aria-expanded='true']::after { transform: rotate(-135deg); }
.faq__a {
  padding: 0 0 1.4rem;
  color: var(--text-2);
  max-width: 76ch;
}
.faq__a[hidden] { display: none; }

/* ==========================================================================
   14. CTA BAND
   ========================================================================== */

.cta-band {
  position: relative;
  padding-block: clamp(3rem, 7vw, 5rem);
  background:
    linear-gradient(120deg, rgba(10, 74, 128, 0.55), rgba(7, 8, 10, 0.85)),
    var(--ink-1);
  border-block: 1px solid var(--line);
  overflow: hidden;
}
.cta-band__inner {
  display: grid;
  gap: 1.6rem;
  align-items: center;
}
@media (min-width: 880px) {
  .cta-band__inner { grid-template-columns: 1.4fr auto; }
}
.cta-band h2 { margin-bottom: 0.4rem; }
.cta-band p { color: #cdd6e0; margin: 0; max-width: 58ch; }
.cta-band .btn-row { justify-content: flex-start; }
@media (min-width: 880px) {
  .cta-band .btn-row { justify-content: flex-end; }
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--ink-1);
  border-top: 1px solid var(--line);
  padding-top: clamp(2.6rem, 6vw, 4rem);
  color: var(--text-2);
}
.footer__grid {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
  padding-bottom: 2.6rem;
}
@media (min-width: 760px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
}
.footer__brand img { width: 200px; margin-bottom: 1rem; }
.footer__brand p { font-size: 0.98em; max-width: 34ch; }
.footer h4 {
  font-size: 0.88rem;
  letter-spacing: var(--tracking-wide);
  color: var(--text-3);
  margin-bottom: 1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 0.55rem; }
.footer a { color: var(--text-2); }
.footer a:hover { color: #fff; }
.footer__contact li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}
/* gripline_icon() emits a bare <svg> with no intrinsic size. Inside a flex row
   it will happily grow to fill the column, which is exactly what happened to
   the footer phone icon the moment real contact details were entered and these
   rows started rendering at all. Pin the size wherever an icon sits inline. */
.footer__contact svg,
.btn svg,
.gripline-cfp svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.footer__contact svg {
  margin-top: 0.22em;
  color: var(--accent-bright);
}
.footer__contact strong { color: #fff; font-weight: 600; white-space: nowrap; }
.footer__social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
}
.footer__social a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-2);
  transition: all var(--fast) var(--ease);
}
.footer__social a:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: #fff;
}
.footer__social svg { width: 19px; height: 19px; }

.footer__bar {
  border-top: 1px solid var(--line);
  padding-block: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.88rem;
  color: var(--text-3);
}
.footer__bar a { color: var(--text-3); }
.footer__bar a:hover { color: var(--text); }

/* Floating call button on mobile - the primary conversion path */
.call-fab {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 55;
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.2rem;
  background: var(--accent);
  color: #fff;
  border-radius: 100px;
  font-family: var(--ff-head);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.call-fab svg { width: 18px; height: 18px; }
@media (max-width: 760px) {
  .call-fab { display: inline-flex; }
  body { padding-bottom: 4.5rem; }
}

/* ==========================================================================
   16. CONTENT (blog / generic pages)
   ========================================================================== */

.entry-content > * + * { margin-top: 1.1em; }
.entry-content h2 { margin-top: 2.2em; }
.entry-content h3 { margin-top: 1.8em; }
.entry-content img { border-radius: var(--radius-lg); }
/* Left rule on a blockquote is a typographic convention, so it stays - but at
   hairline weight in a neutral tone rather than a coloured slab. */
.entry-content blockquote {
  margin: 1.6em 0;
  padding: 0.6em 0 0.6em 1.3em;
  border-left: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 1.1em;
}
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97em;
}
.entry-content th,
.entry-content td {
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.entry-content th {
  font-family: var(--ff-head);
  font-size: 0.84rem;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-3);
}

.pagination {
  display: flex;
  gap: 0.4rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px; height: 42px;
  padding: 0 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-2);
  font-family: var(--ff-head);
  font-weight: 600;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ==========================================================================
   17. MOTION / A11Y
   ========================================================================== */

/* Scroll-reveal is opt-IN, gated on the .gl-js class that main.js puts on
   <html>. Without that class - no JS, a blocked script, a renderer that never
   advances transitions - the content is simply visible. Never hide content
   behind a state only JS can undo. */
.gl-js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.gl-js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .gl-js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   18. PRINT
   ========================================================================== */

@media print {
  .site-header, .site-footer, .call-fab, .cta-band { display: none; }
  body { background: #fff; color: #000; }
}