/* ============================================================================
   assets/css/cato-hexglow.css - the HEX GLOW homepage.

   Carl picked direction B, "Hex Glow", from the three homepage directions
   (Claude\homepage-directions-2026-09-25\, PDFs in www\mock-ups\) on
   2026-09-28. This file is that direction, ported from the mock's
   .hp[data-dir="b"] rules into real classes.

   HOMEPAGE ONLY. index.php sets $page_css = 'cato-hexglow.css' and
   $page_mast = true; no other page loads this file, so nothing here can leak
   into the catalog, the brand pages or the admin. Every rule is scoped under
   .hg (the page wrapper) or body.has-mast (the header band + nav).

   The look, in one line each:
   - light pages; the hex grille shows faintly on white and lights up blue
     around the pointer (it rests beside the photo, so a still screenshot
     shows it too)
   - stats are black hexagon tiles with a glowing blue edge, overlapping the hero
   - photos, buttons, cards and logo tiles have chamfered corners, cut like the hex
   - headings in Barlow Condensed 800 italic, the accent word in blue chrome
   - dark bands (brands, contact) carry a blue LED strip on both edges
   ============================================================================ */

/* --- Tokens --------------------------------------------------------------- */
.hg, body.has-mast {
  --hg-ink: #0c0d12;
  --hg-muted: #545966;            /* 7.0:1 on white */
  --hg-alt: #f4f6fa;
  --hg-tint: #f1f4fa;
  --hg-chip: #e8ecf4;
  --hg-blue: #0000fe;             /* brand blue, text/fills on light only (8.6:1) */
  --hg-blue-lift: #7ea8ff;        /* blue for text on black (8.4:1) */
  --hg-led: #2f6bff;
  --hg-black: #050608;
  --hg-ch: 18px;                  /* chamfer size */
  --hg-disp: "Barlow Condensed", Oswald, "Arial Narrow", sans-serif;
  --hg-hex-ink: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34.641'%20height='60'%20viewBox='0%200%2034.641%2060'%3E%3Cpath%20d='M17.32,-20L0,-10L0,10L17.32,20L34.64,10L34.64,-10Z%20M17.32,40L0,50L0,70L17.32,80L34.64,70L34.64,50Z%20M0,10L-17.32,20L-17.32,40L0,50L17.32,40L17.32,20Z%20M34.64,10L17.32,20L17.32,40L34.64,50L51.96,40L51.96,20Z'%20fill='none'%20stroke='%230c0d12'%20stroke-width='1.2'/%3E%3C/svg%3E");
  --hg-hex-white: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34.641'%20height='60'%20viewBox='0%200%2034.641%2060'%3E%3Cpath%20d='M17.32,-20L0,-10L0,10L17.32,20L34.64,10L34.64,-10Z%20M17.32,40L0,50L0,70L17.32,80L34.64,70L34.64,50Z%20M0,10L-17.32,20L-17.32,40L0,50L17.32,40L17.32,20Z%20M34.64,10L17.32,20L17.32,40L34.64,50L51.96,40L51.96,20Z'%20fill='none'%20stroke='%23ffffff'%20stroke-width='1.6'/%3E%3C/svg%3E");
  --hg-hex-glow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34.641'%20height='60'%20viewBox='0%200%2034.641%2060'%3E%3Cpath%20d='M17.32,-20L0,-10L0,10L17.32,20L34.64,10L34.64,-10Z%20M17.32,40L0,50L0,70L17.32,80L34.64,70L34.64,50Z%20M0,10L-17.32,20L-17.32,40L0,50L17.32,40L17.32,20Z%20M34.64,10L17.32,20L17.32,40L34.64,50L51.96,40L51.96,20Z'%20fill='none'%20stroke='%232f6bff'%20stroke-width='1.6'/%3E%3C/svg%3E");
  --hg-hex-glow-dk: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34.641'%20height='60'%20viewBox='0%200%2034.641%2060'%3E%3Cpath%20d='M17.32,-20L0,-10L0,10L17.32,20L34.64,10L34.64,-10Z%20M17.32,40L0,50L0,70L17.32,80L34.64,70L34.64,50Z%20M0,10L-17.32,20L-17.32,40L0,50L17.32,40L17.32,20Z%20M34.64,10L17.32,20L17.32,40L34.64,50L51.96,40L51.96,20Z'%20fill='none'%20stroke='%234d8cff'%20stroke-width='1.8'/%3E%3C/svg%3E");
}

/* One chamfer shape, used everywhere the old design rounded a corner. */
.hg-cut {
  clip-path: polygon(var(--hg-ch) 0, 100% 0, 100% calc(100% - var(--hg-ch)),
                     calc(100% - var(--hg-ch)) 100%, 0 100%, 0 var(--hg-ch));
}

/* --- Header band (the rebuilt emailer mast) ------------------------------- */
/* One inline SVG, viewBox 3000 wide centred on the 1196px emailer art and
   sliced: up to 1196 it is exactly the emailer layout, wider screens see more
   grille and swash. height:auto matters - the width/height attributes would
   otherwise beat aspect-ratio. */
.hg-mast { background: #000; line-height: 0; }
.hg-mast svg {
  display: block; width: 100%; height: auto;
  max-width: 3000px; max-height: 526px; margin-inline: auto;
  aspect-ratio: 1196 / 526;
}

/* --- Nav under the band --------------------------------------------------- */
/* The oval logo is already in the band directly above, so the nav drops it and
   spreads the links across the whole bar instead of huddling in the middle. */
body.has-mast .site-header {
  background: #fff;
  backdrop-filter: none;
  border-bottom: 1px solid #dfe3ea;
}
body.has-mast .site-header .brand { display: none; }
body.has-mast .site-header__inner { max-width: 1200px; padding: 14px 32px; gap: 48px; }
body.has-mast .nav-desktop { flex: 1; }
body.has-mast .nav-desktop ul {
  justify-content: space-between; gap: 12px;
  font: 600 16px/1 Roboto, Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase;
}
body.has-mast .nav-desktop a { display: block; padding: 10px 0; color: var(--hg-ink); font-weight: 600; }
body.has-mast .nav-desktop a:hover { color: var(--hg-blue); text-decoration: none; }
body.has-mast .nav-desktop a[aria-current="page"] { color: var(--hg-blue); box-shadow: inset 0 -3px 0 var(--hg-blue); }
body.has-mast .site-header .site-header__cta {
  border: 0; border-radius: 0; padding: 15px 26px;
  font: 600 16px/1 Roboto, Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: linear-gradient(180deg, #2a4dff, #0000fe 55%, #0000d0);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
body.has-mast .site-header .site-header__cta:hover { text-decoration: none; filter: brightness(1.12); }

/* Phones: "Menu" on the left, the phone button on the right. The chassis hides
   the CTA under 900px; with the logo gone it is the only way to call from the
   bar, so it comes back here (two classes + body, so it beats theme.css). */
@media (max-width: 900px) {
  body.has-mast .site-header__inner { padding: 10px 18px; gap: 12px; flex-direction: row-reverse; }
  body.has-mast .site-header__actions { flex: 1; flex-direction: row-reverse; justify-content: space-between; }
  body.has-mast .site-header .site-header__cta { display: inline-flex; padding: 12px 16px; font-size: 14px; }
  body.has-mast .nav-toggle { width: auto; padding: 0 12px; gap: 8px; border-color: #dfe3ea;
    font: 600 15px/1 Roboto, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--hg-ink); }
  body.has-mast .nav-toggle svg { width: 22px; height: 22px; }
  body.has-mast .nav-toggle::after { content: "Menu"; }
}

/* --- Page base ------------------------------------------------------------ */
.hg { background: #fff; color: var(--hg-ink); font: 16px/1.6 Roboto, Arial, sans-serif; overflow-x: clip; }
.hg img { display: block; max-width: 100%; }
/* :not(.hg-btn): a bare `.hg a` would repaint the buttons' white text - the
   same specificity trap cato.css documents for .cato-page. */
.hg a:not(.hg-btn) { color: inherit; text-decoration: none; }
.hg a:not(.hg-btn):hover { color: var(--hg-blue); }
/* :where() keeps these at element weight, so they beat theme.css's bare p /
   section rules on source order WITHOUT outranking .hg-sub, .hg-sec etc. */
:where(.hg) p { max-width: none; }
.hg-hero, .hg-stats { padding-block: 0; }

.hg h1, .hg h2, .hg h3, .hg-disp {
  font-family: var(--hg-disp); font-style: italic; font-weight: 800;
  letter-spacing: .005em; text-transform: uppercase; line-height: 1.02; margin: 0; text-wrap: balance;
}
/* Accent word: blue chrome on light, white chrome on dark. */
.hg h1 em, .hg h2 em {
  font-style: inherit;
  background: linear-gradient(180deg, #3b6cff 0%, #1a3cff 45%, #0000fe 50%, #0000b8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--hg-blue);
}
.hg-dark h2 em {
  background: linear-gradient(180deg, #fff 0%, #fff 52%, #cfd2d8 54%, #aeb3bc 100%);
  -webkit-background-clip: text; background-clip: text; color: #fff;
}

.hg-in { max-width: 1200px; margin: 0 auto; padding-inline: 32px; }
.hg-sec { padding-block: 72px; position: relative; isolation: isolate; }
.hg-sec--alt { background: var(--hg-alt); }
.hg-head { margin-bottom: 36px; }
.hg-h2 { font-size: 52px; }
.hg-sub { color: var(--hg-muted); max-width: 60ch; margin: 14px 0 0; font-size: 17px; }
.hg-dark .hg-sub { color: #c3c7cf; }

.hg-eyebrow {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font: 600 12px/1 Roboto, Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--hg-blue);
}
.hg-eyebrow::before {
  content: ""; flex: none; width: 14px; height: 16px; background: var(--hg-blue);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.hg-dark .hg-eyebrow { color: var(--hg-blue-lift); }
.hg-dark .hg-eyebrow::before { background: #4d8cff; box-shadow: 0 0 10px #4d8cff; }

/* Faint ink grille behind every light section. */
.hg-sec:not(.hg-dark)::before, .hg-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--hg-hex-ink); background-size: 30px 51.96px; opacity: .07;
}

/* --- Buttons -------------------------------------------------------------- */
.hg-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hg-btn {
  display: inline-flex; align-items: center; gap: 8px; position: relative; overflow: hidden;
  padding: 14px 24px; border: 0; border-radius: 0;
  font: 600 15px/1 Roboto, Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.hg-btn:hover { text-decoration: none; }
.hg-btn svg { width: 18px; height: 18px; flex: none; }
.hg-btn--p { background: linear-gradient(180deg, #2a4dff, #0000fe 55%, #0000d0); color: #fff; }
.hg-btn--p::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.hg-btn--p:hover::after { left: 130%; }
.hg-btn--p:hover { color: #fff; }
/* Ghost buttons get a fill, not a border: the chamfer clips a border's corners off. */
.hg-btn--g { background: #e3e8f2; color: var(--hg-ink); }
.hg-btn--g:hover { background: #d6ddeb; color: var(--hg-ink); }
.hg-dark .hg-btn--g { background: rgba(255,255,255,.14); color: #fff; }
.hg-dark .hg-btn--g:hover { background: rgba(255,255,255,.22); color: #fff; }
/* The chamfer would clip a normal outline, so focus draws inside. */
.hg-btn:focus-visible { outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 6px var(--hg-ink); }

/* --- Hero ----------------------------------------------------------------- */
/* 2026-10-01: the old site's full-width slideshow (photo behind the words)
   inside the chamfered Hex Glow frame. The frame keeps a margin on all four
   sides, grows with the screen up to 1480px, and holds everything: h1, slide
   copy, brand logo, buttons, dots. */
.hg-hero {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, #fff 0%, var(--hg-alt) 100%);
  --mx: 50%; --my: 50%;
}
/* The lit grille, masked to a circle around the pointer. On the homepage it
   shows in the margin around the frame. */
.hg-hero::after, .hg-dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--hg-hex-glow); background-size: 30px 51.96px;
  -webkit-mask: radial-gradient(circle 340px at var(--mx) var(--my), rgba(0,0,0,.8) 0%, rgba(0,0,0,.28) 45%, transparent 75%);
          mask: radial-gradient(circle 340px at var(--mx) var(--my), rgba(0,0,0,.8) 0%, rgba(0,0,0,.28) 45%, transparent 75%);
}
.hg-hero__in { max-width: 1480px; margin: 0 auto; padding: 32px 32px 120px; }
.hg-media { position: relative; filter: drop-shadow(0 22px 34px rgba(0,40,220,.30)); }
.hg-frame {
  position: relative; isolation: isolate; overflow: hidden; background: var(--hg-black);
  display: grid; align-items: center; min-height: clamp(480px, 64vh, 640px);
  clip-path: polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
}

/* Photos fill the frame. They SLIDE (2026-09-28, Carl: the hero should
   visibly scroll). Every slide waits off to the right, hidden and with no
   transition, so it can snap there unseen; the active one slides in to 0 and
   the one it replaces slides out to the left. */
.hg-slides { position: absolute; inset: 0; z-index: 0; }
.hg-slide { position: absolute; inset: 0; visibility: hidden; transform: translateX(100%); transition: none; }
.hg-slide.is-active { visibility: visible; transform: translateX(0); transition: transform .8s cubic-bezier(.65,0,.35,1); }
.hg-slide.is-leaving { visibility: visible; transform: translateX(-100%); transition: transform .8s cubic-bezier(.65,0,.35,1); }
.hg-hero:not(.is-ready) .hg-slide:first-child { visibility: visible; transform: none; }
.hg-slide img.hg-slide__ph { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The veil: dark enough behind the words for white text at AA on every
   photo, lighter toward the edges so the work still reads. */
.hg-slides::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(5,6,8,.60) 0%, rgba(5,6,8,.42) 70%, rgba(5,6,8,.32) 100%),
    linear-gradient(180deg, rgba(5,6,8,.10) 0%, rgba(5,6,8,.35) 100%);
}

/* Copy: centred over the photo, like the old site. */
.hg-hero__copy {
  position: relative; z-index: 1; text-align: center; color: #fff;
  padding: 56px 72px 40px; display: flex; flex-direction: column; align-items: center;
}
.hg-kick { font: 600 12px/1.3 Roboto, Arial, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--hg-blue); margin: 0 0 14px; }
.hg-hero h1.hg-kick {
  font-family: Roboto, Arial, sans-serif; font-style: normal; font-weight: 600; font-size: 13px; line-height: 1.3;
  letter-spacing: .18em; margin: 0 0 18px; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6);
}

/* Slide titles: all in one grid cell; only the active one shows. WITHOUT JS
   the first shows and nothing moves - the visitor still gets a complete hero. */
.hg-stack { display: grid; width: 100%; }
.hg-stack > * { grid-area: 1 / 1; }
.hg-ttl { visibility: hidden; opacity: 0; transition: opacity .6s ease, visibility 0s .6s;
  display: flex; flex-direction: column; align-items: center; }
.hg-ttl.is-active, .hg-hero:not(.is-ready) .hg-ttl:first-child {
  visibility: visible; opacity: 1; transition: opacity .6s ease, visibility 0s;
}
.hg .hg-ttl h2 { font-size: 72px; color: #fff; max-width: 18ch; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
/* Accent word on a photo: pale blue chrome. A text-shadow shows through
   transparent chrome text, so the em drops it. */
.hg .hg-ttl h2 em {
  background: linear-gradient(180deg, #e4ecff 0%, #b9ccff 50%, #8fb0ff 52%, #7ea8ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #b9ccff; text-shadow: none;
}
.hg-ttl p { font-size: 19px; line-height: 1.5; color: #fff; max-width: 52ch; margin: 18px auto 0; text-shadow: 0 1px 8px rgba(0,0,0,.55); }

/* Brand logo under the copy. Linked only where the brand's site shows no
   prices (see index.php). */
.hg-ttl__brand { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 24px; color: #fff; }
.hg-ttl__brand img { height: 44px; width: auto; max-width: 260px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.hg-ttl__brand--link { text-decoration: none; }
.hg-ttl__brand--link > span {
  font: 600 13px/1 Roboto, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 2px solid var(--hg-led); padding-bottom: 5px; text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.hg-ttl__brand--link:hover { color: #fff; }
.hg-ttl__brand--link:hover > span { border-bottom-color: #fff; }
.hg-ttl__brand--link:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }

.hg-hero .hg-btns { justify-content: center; margin-top: 28px; }
.hg-hero .hg-btn--g { background: rgba(255,255,255,.16); color: #fff; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hg-hero .hg-btn--g:hover { background: rgba(255,255,255,.26); color: #fff; }

/* Dots + pause button: one row, built by cato-hexglow.js, white on the photo. */
.hg-dotbar { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; }
.hg-dots { display: flex; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none; }
.hg-dotbar .hg-dots { margin: 0; }
.hg-hero:not(.is-ready) .hg-dots { display: none; }
.hg-dots button { position: relative; width: 28px; height: 4px; border-radius: 4px; border: 0; padding: 0; background: rgba(255,255,255,.45); cursor: pointer;
  /* 4px is too small to tap; the hit area grows without changing the look */
  background-clip: content-box; padding-block: 10px; box-sizing: content-box; }
.hg-dots button.is-active { background-color: #fff; }
/* While it plays, the active dot FILLS over the interval: a visible sign the
   hero is moving on its own. Paused, the active dot is simply solid white. */
.hg-dots button::after { content: ""; position: absolute; left: 0; top: 10px; height: 4px; width: 0; border-radius: 4px; background: #fff; }
.hg-hero.is-playing .hg-dots button.is-active { background-color: rgba(255,255,255,.45); }
.hg-hero.is-playing .hg-dots button.is-active::after { animation: hg-fill 6.5s linear forwards; }
@keyframes hg-fill { from { width: 0; } to { width: 100%; } }
.hg-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hg-pause {
  display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 0; cursor: pointer;
  background: rgba(255,255,255,.18); color: #fff;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.hg-pause:hover { background: rgba(255,255,255,.3); }
.hg-pause svg { width: 14px; height: 14px; }
.hg-pause:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff; }

/* --- Stats: black hexagons with an LED edge, overlapping the hero ---------- */
.hg-stats { position: relative; z-index: 3; margin-top: -92px; }
.hg-stats ul { display: flex; justify-content: center; gap: 18px; list-style: none; margin: 0; padding: 0; }
.hg-stat {
  width: 210px; aspect-ratio: 1.1547; display: grid; place-content: center; text-align: center;
  position: relative; isolation: isolate; padding: 0 18px;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: linear-gradient(135deg, #6fa0ff, #0b3fd6 50%, #6fa0ff);
}
.hg-stat::before { content: ""; position: absolute; inset: 3px; z-index: -1; clip-path: inherit;
  background: radial-gradient(circle at 50% 30%, #101a3a, #030408 70%); }
.hg-stat b { display: block; font: 900 40px/1 Orbitron, var(--hg-disp); color: #fff; text-shadow: 0 0 18px rgba(77,140,255,.9); }
.hg-stat span { display: block; margin-top: 8px; font: 600 11px/1.35 Roboto, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #c9d3ea; }

/* --- Service cards -------------------------------------------------------- */
.hg-svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.hg-card { background: var(--hg-tint); display: flex; flex-direction: column; margin: 0; }
.hg-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
.hg-card__b { position: relative; padding: 26px 18px 20px; display: grid; gap: 6px; }
.hg-card h3 { font-size: 22px; }
.hg-card p { margin: 0; font-size: 14.5px; color: var(--hg-muted); }
.hg-num {
  position: absolute; top: -22px; left: 16px; width: 40px; height: 44px; display: grid; place-items: center;
  color: #fff; background: var(--hg-blue); font: 900 13px/1 Orbitron, sans-serif;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* --- Gear chips ----------------------------------------------------------- */
.hg-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.hg-chip { background: var(--hg-chip); padding: 11px 22px; font: 500 14.5px/1 Roboto, Arial, sans-serif;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); }

/* --- Showroom ------------------------------------------------------------- */
.hg-show { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.hg-show > img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; height: auto; }
.hg-areas-label { margin: 22px 0 0; font-weight: 600; }
.hg-towns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; list-style: none; padding: 0; margin: 12px 0 0; font-weight: 500; }
.hg-towns li::before { content: ""; display: inline-block; width: 12px; height: 2px; background: var(--hg-blue); vertical-align: middle; margin-right: 10px; }
.hg-towns a { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: #9aa6c4 !important; }

/* --- Gallery mosaic: one tall, one wide, four square - no orphan ---------- */
.hg-gal { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; grid-auto-rows: 210px; gap: 14px; grid-auto-flow: dense; }
.hg-gal a { display: block; overflow: hidden; }
.hg-gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.hg-gal a:hover img { transform: scale(1.04); }
.hg-gal a:nth-child(1) { grid-row: span 2; }
.hg-gal a:nth-child(3) { grid-column: span 2; }
.hg-gal a:focus-visible { outline: 3px solid var(--hg-blue); outline-offset: 3px; }

/* --- Royal ---------------------------------------------------------------- */
.hg-royal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.hg-royal figure { margin: 0; background: #fff; padding: 16px; box-shadow: 0 8px 24px rgba(12,13,18,.07); }
.hg-royal img { aspect-ratio: 4 / 3; object-fit: contain; width: 100%; height: auto; }
.hg-royal figcaption { font: italic 800 19px/1.1 var(--hg-disp); text-transform: uppercase; margin-top: 10px; text-align: center; }
.hg-royal-link { display: inline-block; margin-top: 18px; font-weight: 600; color: var(--hg-blue) !important; }
.hg-fin { margin-top: 40px; }
.hg-fin a { display: block; max-width: 728px; margin: 0 auto; }
.hg-fin img { width: 100%; height: auto; }

/* --- Dark bands: LED strip on both edges, grille lit around the pointer ---- */
.hg-dark {
  background: var(--hg-black); color: #fff;
  border-block: 3px solid var(--hg-led); box-shadow: 0 0 22px rgba(47,107,255,.55);
  --mx: 72%; --my: 40%;
}
.hg-dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--hg-hex-white); background-size: 30px 51.96px; opacity: .10;
}
.hg-dark::after {
  background-image: var(--hg-hex-glow-dk);
  -webkit-mask: radial-gradient(circle 360px at var(--mx) var(--my), #000, rgba(0,0,0,.3) 45%, transparent 75%);
          mask: radial-gradient(circle 360px at var(--mx) var(--my), #000, rgba(0,0,0,.3) 45%, transparent 75%);
}

/* --- Brands --------------------------------------------------------------- */
/* flex, not a 6-col grid: 22 logos in a grid leaves a 4-logo orphan row hard
   left. Centred flex rows keep the last row in the middle. */
.hg-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; list-style: none; margin: 0; padding: 0; }
.hg-logos li { flex: 0 0 calc((100% - 5 * 14px) / 6); }
.hg-logos a { display: grid; place-items: center; height: 78px; padding: 12px 16px; background: #fff;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: transform .2s ease; }
.hg-logos a:hover { transform: translateY(-2px); }
.hg-logos a:focus-visible { outline: 3px solid #4d8cff; outline-offset: -3px; }
.hg-logos img { max-height: 46px; width: auto; height: auto; object-fit: contain; }

/* --- Reviews (ReviewManager stream) --------------------------------------- */
.hg-reviews .reviewmgr-stream { margin-top: 8px; }

/* --- NTEA ----------------------------------------------------------------- */
.hg-ntea { display: grid; grid-template-columns: 200px 1fr; gap: 44px; align-items: center; }
.hg-ntea__lg { background: #fff; padding: 26px; box-shadow: 0 8px 24px rgba(12,13,18,.07); }
.hg-ntea__lg img { width: 100%; height: auto; }
.hg-ntea .hg-h2 { font-size: 40px; }

/* --- Contact -------------------------------------------------------------- */
.hg-contact-sec { padding-block: 84px 88px; }
.hg-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hg-contact .hg-h2 { font-size: 56px; }
.hg-clist { list-style: none; padding: 0; margin: 24px 0 0; }
.hg-clist li { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-weight: 500; }
.hg-clist b { display: block; font: 600 11px/1.4 Roboto, Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--hg-blue-lift); }
.hg-dark a:not(.hg-btn):hover { color: var(--hg-blue-lift); }
.hg-map { aspect-ratio: 4 / 3; background: #1a1c22; }
.hg-map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* --- Phones --------------------------------------------------------------- */
@media (max-width: 700px) {
  .hg-in { padding-inline: 18px; }
  .hg-sec { padding-block: 52px; }
  .hg-h2, .hg-ntea .hg-h2 { font-size: 36px; }
  .hg-contact .hg-h2 { font-size: 40px; }
  .hg-hero__in { padding: 16px 16px 96px; }
  .hg-frame { min-height: 540px; clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); }
  .hg-hero__copy { padding: 40px 20px 28px; }
  .hg .hg-ttl h2 { font-size: 40px; }
  .hg-ttl p { font-size: 16px; }
  .hg-ttl__brand img { height: 34px; max-width: 200px; }
  .hg-stats { margin-top: -74px; }
  .hg-stats ul { flex-wrap: wrap; gap: 8px; }
  .hg-stat { width: 170px; padding: 0 12px; }
  .hg-stat b { font-size: 28px; }
  .hg-stat span { font-size: 9.5px; }
  .hg-svc { grid-template-columns: 1fr 1fr; gap: 14px; }
  .hg-card h3 { font-size: 18px; }
  .hg-card p { font-size: 13.5px; }
  .hg-card__b { padding: 26px 12px 16px; }
  .hg-show, .hg-contact, .hg-ntea { grid-template-columns: 1fr; gap: 28px; }
  .hg-ntea__lg { max-width: 200px; }
  .hg-gal { grid-template-columns: 1fr 1fr; grid-auto-rows: 130px; gap: 10px; }
  .hg-gal a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .hg-gal a:nth-child(3) { grid-column: span 2; }
  .hg-royal { grid-template-columns: 1fr; }
  .hg-logos { gap: 10px; }
  .hg-logos li { flex-basis: calc((100% - 2 * 10px) / 3); }
  .hg-logos a { height: 62px; padding: 10px; }
}
/* In between, 4 cards and 6 logos across are too tight. */
@media (min-width: 701px) and (max-width: 1000px) {
  .hg-hero__in { padding-inline: 24px; }
  .hg-hero__copy { padding-inline: 40px; }
  .hg .hg-ttl h2 { font-size: 54px; }
  .hg-svc { grid-template-columns: repeat(2, 1fr); }
  .hg-logos li { flex-basis: calc((100% - 3 * 14px) / 4); }
  .hg-stat { width: 170px; }
  .hg-stat b { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .hg-btn--p::after { display: none; }
  .hg-ttl, .hg-slide, .hg-slide.is-active, .hg-slide.is-leaving { transition: none; }
  .hg-hero.is-playing .hg-dots button.is-active::after { animation: none; }
  .hg-gal img, .hg-logos a { transition: none; }
}


/* ============================================================================
   SITE-WIDE HEX GLOW (2026-09-28)

   Carl liked the homepage and asked for the change on every page. Rather than
   re-mark-up twelve templates, this restyles the SHARED components they are
   built from (cato.css's .cato-display / .cato-eyebrow / .cato-btn / cards /
   dark bands, and the chassis .btn / .eyebrow / .section / .shop-card) so
   every page picks the look up at once. Everything is behind body.has-mast,
   which header.php now sets on every public page; the admin never loads
   header.php, so none of this can reach it.

   The homepage's own .hg-* rules above are unaffected.
   ============================================================================ */

body.has-mast {
  /* The same grilles as the tokens above, with the opacity BAKED INTO the
     stroke so they go straight into background-image. No ::before needed, so
     no clash with components that already use their pseudo-elements. */
  --hg-hex-faint: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34.641'%20height='60'%20viewBox='0%200%2034.641%2060'%3E%3Cpath%20d='M17.32,-20L0,-10L0,10L17.32,20L34.64,10L34.64,-10Z%20M17.32,40L0,50L0,70L17.32,80L34.64,70L34.64,50Z%20M0,10L-17.32,20L-17.32,40L0,50L17.32,40L17.32,20Z%20M34.64,10L17.32,20L17.32,40L34.64,50L51.96,40L51.96,20Z'%20fill='none'%20stroke='%230c0d12'%20stroke-opacity='.07'%20stroke-width='1.2'/%3E%3C/svg%3E");
  --hg-hex-dark: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34.641'%20height='60'%20viewBox='0%200%2034.641%2060'%3E%3Cpath%20d='M17.32,-20L0,-10L0,10L17.32,20L34.64,10L34.64,-10Z%20M17.32,40L0,50L0,70L17.32,80L34.64,70L34.64,50Z%20M0,10L-17.32,20L-17.32,40L0,50L17.32,40L17.32,20Z%20M34.64,10L17.32,20L17.32,40L34.64,50L51.96,40L51.96,20Z'%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='.10'%20stroke-width='1.6'/%3E%3C/svg%3E");
  --hg-cut-poly: polygon(var(--hg-ch) 0, 100% 0, 100% calc(100% - var(--hg-ch)), calc(100% - var(--hg-ch)) 100%, 0 100%, 0 var(--hg-ch));
  --hg-cut-sm: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  --hg-hexagon: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --hg-hex-ends: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}
body.has-mast .cato-page { --cato-bg: #ffffff; --cato-surface: #f4f6fa; }

/* --- Headings ------------------------------------------------------------- */
body.has-mast .cato-display,
body.has-mast main h1:not(.hg-kick),
body.has-mast .shop-empty h2,
body.has-mast .shop-callband h2,
body.has-mast .post-more h2,
body.has-mast .cato-frost__title, body.has-mast .cato-why__title, body.has-mast .cato-team__name,
body.has-mast .cato-mission__title, body.has-mast .cato-area-card__city, body.has-mast .cato-post-card__title,
body.has-mast .shop-card__title, body.has-mast .shop-lines__item h3 {
  font-family: var(--hg-disp); font-style: italic; font-weight: 800;
  letter-spacing: .005em; text-transform: uppercase; line-height: 1.02; text-wrap: balance;
}
body.has-mast .cato-display { font-size: clamp(36px, 4.6vw, 60px); }
body.has-mast .cato-display--lg { font-size: clamp(40px, 5.6vw, 72px); }
body.has-mast main h1:not(.hg-kick):not(.cato-display) { font-size: clamp(36px, 4.2vw, 56px); }
body.has-mast .cato-display em {
  font-style: inherit;
  background: linear-gradient(180deg, #3b6cff 0%, #1a3cff 45%, #0000fe 50%, #0000b8 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* On dark: white chrome, never brand blue (1.6:1 on black). */
body.has-mast .cato-display--inverse em,
body.has-mast .cato-mission .cato-display em,
body.has-mast .section--dark .cato-display em {
  background: linear-gradient(180deg, #fff 0%, #fff 52%, #cfd2d8 54%, #aeb3bc 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* --- Eyebrows: blue caps with a hex bullet --------------------------------- */
body.has-mast .cato-eyebrow,
body.has-mast main .eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 600 12px/1 Roboto, Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase;
  color: var(--hg-blue);
}
body.has-mast .cato-eyebrow::before,
body.has-mast main .eyebrow::before {
  content: ""; display: block; flex: none; width: 14px; height: 16px;
  background: var(--hg-blue); clip-path: var(--hg-hexagon);
}
body.has-mast .cato-eyebrow--light,
body.has-mast .cato-mission .cato-eyebrow,
body.has-mast .section--dark .cato-eyebrow { color: var(--hg-blue-lift); }
body.has-mast .cato-eyebrow--light::before,
body.has-mast .cato-mission .cato-eyebrow::before,
body.has-mast .section--dark .cato-eyebrow::before { background: #4d8cff; box-shadow: 0 0 10px #4d8cff; }
body.has-mast .cato-quote .cato-eyebrow::before { display: block; }

/* --- Buttons: chamfered; primary is gloss blue with a light sweep ---------- */
body.has-mast .cato-btn--primary, body.has-mast .cato-btn--ghost, body.has-mast .cato-btn--ghost-inverse,
body.has-mast main .btn {
  position: relative; overflow: hidden; border: 0; border-radius: 0;
  clip-path: var(--hg-cut-sm);
  font: 600 15px/1 Roboto, Arial, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  transform: none; box-shadow: none;
}
body.has-mast .cato-btn--primary,
body.has-mast main .btn-primary, body.has-mast main .btn-accent {
  background: linear-gradient(180deg, #2a4dff, #0000fe 55%, #0000d0); color: #fff;
}
body.has-mast .cato-btn--primary:hover, body.has-mast .cato-btn--primary:focus-visible,
body.has-mast main .btn-primary:hover, body.has-mast main .btn-accent:hover {
  background: linear-gradient(180deg, #2a4dff, #0000fe 55%, #0000d0); color: #fff;
  transform: none; box-shadow: none; filter: brightness(1.12); text-decoration: none;
}
body.has-mast .cato-btn--primary::after,
body.has-mast main .btn-primary::after, body.has-mast main .btn-accent::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); transition: left .6s ease; pointer-events: none;
}
body.has-mast .cato-btn--primary:hover::after,
body.has-mast main .btn-primary:hover::after, body.has-mast main .btn-accent:hover::after { left: 130%; }
/* Ghost and plain buttons get a fill, not a border: the chamfer clips a border's corners. */
body.has-mast .cato-btn--ghost, body.has-mast .cato-btn--ghost-inverse,
body.has-mast main .btn:not(.btn-primary):not(.btn-accent) { background: #e3e8f2; color: var(--hg-ink); }
body.has-mast .cato-btn--ghost:hover, body.has-mast .cato-btn--ghost:focus-visible,
body.has-mast .cato-btn--ghost-inverse:hover, body.has-mast .cato-btn--ghost-inverse:focus-visible,
body.has-mast main .btn:not(.btn-primary):not(.btn-accent):hover {
  background: #d6ddeb; color: var(--hg-ink); transform: none; box-shadow: none; text-decoration: none;
}
body.has-mast .cato-mission .cato-btn--ghost, body.has-mast .cato-mission .cato-btn--ghost-inverse,
body.has-mast .section--dark .cato-btn--ghost { background: rgba(255,255,255,.14); color: #fff; }
/* The chamfer clips an outside outline, so focus draws inside. */
body.has-mast .cato-btn:focus-visible, body.has-mast main .btn:focus-visible {
  outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 6px var(--hg-ink);
}
body.has-mast .cato-btn--text { color: var(--hg-blue); border-bottom-color: var(--hg-blue); }

/* --- Sections: faint ink grille on every light section --------------------- */
body.has-mast .cato-section,
body.has-mast main > .section,
body.has-mast .cato-why,
body.has-mast .cato-cta {
  background-image: var(--hg-hex-faint); background-size: 30px 51.96px;
}
body.has-mast .cato-why, body.has-mast .cato-cta { background-color: #f4f6fa; border: 0; }

/* Inner-page heroes: light, with the grille lit blue around the pointer. */
body.has-mast .cato-hero-band {
  position: relative; isolation: isolate; --mx: 72%; --my: 40%;
  background: var(--hg-hex-faint) 0 0 / 30px 51.96px, linear-gradient(180deg, #fff 0%, #f4f6fa 100%);
  border-bottom: 3px solid var(--hg-led);
  box-shadow: 0 6px 18px -8px rgba(47,107,255,.55);
}
body.has-mast .cato-hero-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--hg-hex-glow); background-size: 30px 51.96px;
  -webkit-mask: radial-gradient(circle 340px at var(--mx) var(--my), rgba(0,0,0,.8) 0%, rgba(0,0,0,.28) 45%, transparent 75%);
          mask: radial-gradient(circle 340px at var(--mx) var(--my), rgba(0,0,0,.8) 0%, rgba(0,0,0,.28) 45%, transparent 75%);
}

/* --- Dark bands: black hex with a blue LED strip on both edges ------------- */
body.has-mast .cato-mission,
body.has-mast .section--dark {
  position: relative; isolation: isolate; --mx: 72%; --my: 40%;
  background: var(--hg-hex-dark) 0 0 / 30px 51.96px, var(--hg-black);
  border-block: 3px solid var(--hg-led); box-shadow: 0 0 22px rgba(47,107,255,.55);
}
body.has-mast .cato-mission::after,
body.has-mast .section--dark::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--hg-hex-glow-dk); background-size: 30px 51.96px;
  -webkit-mask: radial-gradient(circle 360px at var(--mx) var(--my), #000, rgba(0,0,0,.3) 45%, transparent 75%);
          mask: radial-gradient(circle 360px at var(--mx) var(--my), #000, rgba(0,0,0,.3) 45%, transparent 75%);
}
body.has-mast .cato-mission__item { border-top-color: var(--hg-led); }
body.has-mast .cato-mission__icon { color: var(--hg-blue-lift); }

/* --- Cards: chamfered corners, a cool tint instead of border + shadow ------ */
body.has-mast .cato-why__item, body.has-mast .cato-team__card, body.has-mast .cato-area-card,
body.has-mast .cato-quote, body.has-mast .cato-form-slot, body.has-mast .cato-post-card,
body.has-mast .shop-card, body.has-mast .shop-empty, body.has-mast .shop-callband,
body.has-mast .shop-lines__item {
  border: 0; border-radius: 0; box-shadow: none; clip-path: var(--hg-cut-poly);
  background-color: var(--hg-tint);
}
body.has-mast .cato-form-slot { background-color: #fff; outline: 1px solid #dfe3ea; outline-offset: -1px; }
body.has-mast .cato-why__item:hover, body.has-mast .cato-team__card:hover,
body.has-mast .cato-area-card:hover, body.has-mast .cato-post-card:hover,
body.has-mast .shop-card:hover { box-shadow: none; background-color: #e8edf8; }
body.has-mast .cato-area-card:focus-visible { box-shadow: inset 0 0 0 3px var(--hg-blue); outline: none; }
body.has-mast .cato-area-card--home { background: linear-gradient(180deg, rgba(0,0,254,.08) 0%, var(--hg-tint) 60%); }
body.has-mast .cato-area-card__tag { border-radius: 0; clip-path: var(--hg-hex-ends); padding: 5px 14px; }
body.has-mast .shop-lines__item { border-left: 0; box-shadow: inset 4px 0 0 var(--hg-blue); }
/* A clip-path clips an outside focus ring, so the brand card draws it inside. */
body.has-mast .shop-card--brand:focus-within { outline: none; box-shadow: inset 0 0 0 3px var(--hg-blue); }
body.has-mast .cato-team__photo { border-radius: 0; }

/* Round icon discs become blue hexagons. */
body.has-mast .cato-why__icon, body.has-mast .cato-area-card__icon {
  border-radius: 0; clip-path: var(--hg-hexagon); background: var(--hg-blue); color: #fff;
}

/* Photos and frames: chamfered. */
body.has-mast .cato-gallery__item, body.has-mast .shop-photos__grid img,
body.has-mast .shop-pdp__img, body.has-mast .cato-map-sec__frame, body.has-mast .post-cover,
body.has-mast .cato-showroom__media-img {
  border-radius: 0; box-shadow: none; clip-path: var(--hg-cut-poly);
}

/* Service-area service cards: the homepage card, not frosted glass. Photo sharp
   on top, number badge riding the edge, title and text below on a tint. */
body.has-mast .cato-frost {
  aspect-ratio: auto; display: flex; flex-direction: column; overflow: visible;
  border-radius: 0; box-shadow: none; background: var(--hg-tint); clip-path: var(--hg-cut-poly);
}
body.has-mast .cato-frost::after { display: none; }
body.has-mast .cato-frost__img {
  position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 4 / 3; max-width: 100%;
  filter: none; transform: none;
}
body.has-mast .cato-frost:hover .cato-frost__img,
body.has-mast .cato-frost:focus-within .cato-frost__img { filter: none; transform: none; }
body.has-mast .cato-frost__panel {
  position: relative; inset: auto; padding: 26px 18px 20px; margin: 0;
  background: none; border: 0; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.has-mast .cato-frost__num {
  position: absolute; top: -22px; left: 16px; width: 40px; height: 44px; margin: 0;
  display: grid; place-items: center; clip-path: var(--hg-hexagon);
  background: var(--hg-blue); color: #fff; text-shadow: none;
  font: 900 13px/1 Orbitron, sans-serif; letter-spacing: 0;
}
body.has-mast .cato-frost__title { color: var(--hg-ink); text-shadow: none; font-size: 22px; }
body.has-mast .cato-frost__desc { color: var(--hg-muted); text-shadow: none; font-size: 14.5px; line-height: 1.5; }

/* --- Filter chips: hex-ended ----------------------------------------------- */
body.has-mast .cato-chip, body.has-mast .shop-cats a {
  border: 0; border-radius: 0; clip-path: var(--hg-hex-ends); padding: 10px 20px;
  background: var(--hg-chip); color: var(--hg-ink);
}
body.has-mast .cato-chip:hover, body.has-mast .shop-cats a:hover { background: #d6ddeb; color: var(--hg-ink); }
body.has-mast .cato-chip.is-active, body.has-mast .shop-cats a.is-active {
  background: linear-gradient(180deg, #2a4dff, #0000fe 55%, #0000d0); color: #fff;
}
/* Chip focus: the ring would be clipped, so it goes inside. */
body.has-mast .cato-chip:focus-visible, body.has-mast .shop-cats a:focus-visible {
  outline: none; box-shadow: inset 0 0 0 3px var(--hg-ink);
}

/* --- Footer ---------------------------------------------------------------- */
body.has-mast .site-footer { background: #f4f6fa; border-top: 3px solid var(--hg-led); }

/* --- Fixes from the first site-wide pass (screenshots of every page) ------- */

/* White pages, not the chassis cream (#FAFAF7): the posts, legal pages and 404
   sat on cream while everything else went white. */
body.has-mast { --color-bg: #ffffff; background: #ffffff; }

/* Dark photo heroes (What We Do, and the homepage's old hero class): the accent
   word stays plain white. cato.css gives it a dark text-shadow for legibility on
   the photo, and a shadow shows THROUGH text whose fill is transparent, so the
   chrome treatment turned "shop floor" near-black. */
body.has-mast .cato-hero .cato-display em {
  background: none; -webkit-text-fill-color: currentColor; color: inherit;
}

/* Plain h2s outside article text (brand pages: "What Royal makes", "About
   Royal", the call band) get the display face too. Article and legal body copy
   keeps its quieter headings. */
body.has-mast main h2:not(.post-body *):not(.prose *):not(.cato-display) {
  font-family: var(--hg-disp); font-style: italic; font-weight: 800;
  letter-spacing: .005em; text-transform: uppercase; line-height: 1.05;
}

/* Brand cards: every cover is now the brand's logo on a white square
   (2026-09-28), so the media box is white too, not the sunk cream that used to
   frame product photos. */
body.has-mast .shop-card__media { background: #fff; }

/* Our Work filters: they sat flush against the hero band's LED edge (the
   section had an inline padding-top:0 from before the band had an edge). */
body.has-mast .cato-gallery__filter-sec { padding-top: 40px; padding-bottom: 40px; }
@media (max-width: 700px) { body.has-mast .cato-gallery__filter-sec { padding-top: 28px; padding-bottom: 28px; } }

@media (prefers-reduced-motion: reduce) {
  body.has-mast .cato-btn--primary::after,
  body.has-mast main .btn-primary::after, body.has-mast main .btn-accent::after { display: none; }
}

/* --- Social links (2026-10-01): in the header to the right of the phone
   button, in the mobile menu, in the footer. Markup: includes/cato-social.php. */
.cato-social { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.cato-social a {
  display: grid; place-items: center; width: 40px; height: 40px; color: #fff;
  background: rgba(255,255,255,.12);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background .2s ease, color .2s ease;
}
.cato-social a:hover { background: var(--hg-blue, #0000fe); color: #fff; }
.cato-social a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #fff; }
.cato-social--header { gap: 6px; }
.cato-social--header a { background: var(--hg-ink, #0c0d12); }
/* Mid widths: the three icons take room from the menu, so it tightens a
   little rather than wrapping "Brands We Carry" onto two lines. */
@media (min-width: 901px) and (max-width: 1240px) {
  body.has-mast .site-header__inner { gap: 24px; padding-inline: 24px; }
  body.has-mast .nav-desktop ul { font-size: 14px; letter-spacing: .03em; gap: 8px; white-space: nowrap; }
  body.has-mast .site-header .site-header__cta { padding: 13px 16px; font-size: 14px; white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  body.has-mast .nav-desktop ul { font-size: 13px; letter-spacing: .02em; }
  body.has-mast .site-header__inner { gap: 16px; padding-inline: 18px; }
  .cato-social--header { gap: 4px; }
  .cato-social--header a { width: 32px; height: 32px; }
  .cato-social--header a { width: 36px; height: 36px; }
}
.cato-social--menu { justify-content: center; margin-top: 20px; }
.cato-social--menu a { background: var(--hg-ink, #0c0d12); }
/* theme.css's ".site-footer ul" (a flex COLUMN, 0,1,1) outranks the single class
   above and stacked the footer icons vertically (2026-10-01); same for the
   mobile menu's ".nav-mobile ul". These win on specificity. */
.site-footer ul.cato-social--footer { flex-direction: row; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.nav-mobile ul.cato-social--menu { flex-direction: row; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 20px 0 0; }
.nav-mobile ul.cato-social--menu a { padding: 0; }   /* .nav-mobile a pads every menu link */
.cato-social--footer a { background: var(--hg-ink, #0c0d12); }
/* Under 900px the actions row is row-reverse (Menu left, phone right), so the
   lowest order sits at the far right, after the phone button; the Menu
   button's auto margin keeps it on the left. */
@media (max-width: 900px) {
  body.has-mast .site-header__actions { gap: 8px; justify-content: flex-start; }
  body.has-mast .site-header__actions .nav-toggle { margin-right: auto; }
  .cato-social--header { order: -1; gap: 4px; }
  .cato-social--header a { width: 34px; height: 34px; }
  .cato-social--header svg { width: 17px; height: 17px; }
}
/* Narrow phones: Menu keeps its icon, drops the word, so the phone number and
   all three icons still fit on one row. */
@media (max-width: 420px) {
  body.has-mast .nav-toggle::after { content: none; }
  body.has-mast .site-header .site-header__cta { padding: 12px 12px; font-size: 13.5px; }
  .cato-social--header a { width: 30px; height: 30px; }
  .cato-social--header svg { width: 15px; height: 15px; }
}
@media (prefers-reduced-motion: reduce) { .cato-social a { transition: none; } }

/* --- Crew on the contact page: one row of five (2026-10-01, option A) ------
   The photo fills each card edge to edge (cato.css's negative-margin bleed
   left a strip down the right side once the card was chamfered), all five
   share one row, and the name block sits under a blue rule with the message
   link pinned to the bottom so they line up. Markup: contact.php. */
body.has-mast .cato-team--row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
body.has-mast .cato-team--row .cato-team__card {
  width: calc((100% - 4 * 16px) / 5); padding: 0; display: flex; flex-direction: column;
}
body.has-mast .cato-team--row .cato-team__card:hover { transform: none; }
body.has-mast .cato-team--row .cato-team__photo {
  width: 100%; height: auto; margin: 0; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 15%; background: #fff;
}
body.has-mast .cato-team__body {
  flex: 1; display: flex; flex-direction: column; gap: 14px;
  padding: 16px 16px 18px; border-top: 3px solid var(--hg-blue);
}
body.has-mast .cato-team--row .cato-team__name { margin: 0; font-size: 22px; }
body.has-mast .cato-team--row .cato-team__role { margin: 6px 0 0; letter-spacing: .14em; }
body.has-mast .cato-team--row .cato-team__email { margin-top: auto; word-break: normal; }
@media (max-width: 980px) {
  body.has-mast .cato-team--row .cato-team__card { width: calc((100% - 2 * 16px) / 3); }
}
@media (max-width: 640px) {
  body.has-mast .cato-team--row { gap: 14px; }
  body.has-mast .cato-team--row .cato-team__card { width: calc((100% - 14px) / 2); }
  body.has-mast .cato-team--row .cato-team__name { font-size: 19px; }
  body.has-mast .cato-team__body { padding: 14px 12px 16px; }
}


/* --- Contrast pass 2 (launch, 2026-10-27) ----------------------------------
   From the WCAG gate of 2026-10-26, measured pixel by pixel under each word.
   The look stays; each rule only takes the edge off where text sits on it. */

/* Inner-page heroes: the lit grille ran up to #5c8afc under the heading, the
   kicker and the muted intro. Same glow, about 40% as strong. */
body.has-mast .cato-hero-band::after {
  -webkit-mask: radial-gradient(circle 340px at var(--mx) var(--my), rgba(0,0,0,.34) 0%, rgba(0,0,0,.12) 45%, transparent 75%);
          mask: radial-gradient(circle 340px at var(--mx) var(--my), rgba(0,0,0,.34) 0%, rgba(0,0,0,.12) 45%, transparent 75%);
}
/* The accent word's top stop was #3b6cff, 1.9:1 on the lit grille. A deeper
   blue at the top keeps the chrome sweep and clears 3:1. */
body.has-mast .cato-display em,
.hg h1 em, .hg h2 em {
  background: linear-gradient(180deg, #2448ff 0%, #0a1fff 45%, #0000fe 50%, #0000b8 100%);
  -webkit-background-clip: text; background-clip: text;
}
body.has-mast .cato-display--inverse em,
body.has-mast .cato-mission .cato-display em,
body.has-mast .section--dark .cato-display em,
.hg-dark h2 em {
  background: linear-gradient(180deg, #fff 0%, #fff 52%, #cfd2d8 54%, #aeb3bc 100%);
  -webkit-background-clip: text; background-clip: text;
}
/* Muted intro and breadcrumbs on the hero band: one step darker ink. */
body.has-mast .cato-hero-band .cato-lead--muted,
body.has-mast .cato-hero-band .breadcrumbs,
body.has-mast .cato-hero-band .breadcrumbs a { color: #454a55; }

/* Dark bands (About mission, home Brands and Contact): the lit grille behind
   white chrome and the blue eyebrow went as bright as #4b88f9. Same glow,
   about a third as strong, so the words sit on near-black. */
body.has-mast .cato-mission::after,
body.has-mast .section--dark::after,
.hg-dark::after {
  -webkit-mask: radial-gradient(circle 360px at var(--mx) var(--my), rgba(0,0,0,.34), rgba(0,0,0,.12) 45%, transparent 75%);
          mask: radial-gradient(circle 360px at var(--mx) var(--my), rgba(0,0,0,.34), rgba(0,0,0,.12) 45%, transparent 75%);
}
body.has-mast .cato-mission__text { color: rgba(255,255,255,.9); }

/* Home slideshow (revised 2026-10-27, Carl: photos a touch too dark). Dark only
   behind the words, so the trucks at the edges show brighter; phones keep the
   even veil because there the words fill most of the photo. */
.hg-slides::after {
  background:
    radial-gradient(ellipse 54% 78% at 50% 46%, rgba(5,6,8,.70) 0%, rgba(5,6,8,.62) 55%, rgba(5,6,8,.30) 85%, rgba(5,6,8,.16) 100%),
    linear-gradient(180deg, rgba(5,6,8,.06) 0%, rgba(5,6,8,.20) 100%);
}
@media (max-width: 760px) {
  .hg-slides::after {
    background:
      radial-gradient(ellipse 70% 80% at 50% 50%, rgba(5,6,8,.70) 0%, rgba(5,6,8,.52) 70%, rgba(5,6,8,.36) 100%),
      linear-gradient(180deg, rgba(5,6,8,.10) 0%, rgba(5,6,8,.35) 100%);
  }
}
.hg .hg-ttl h2 em {
  background: linear-gradient(180deg, #ffffff 0%, #eef3ff 50%, #d6e2ff 52%, #c7d6ff 100%);
  -webkit-background-clip: text; background-clip: text;
}