/*
Theme Name: Heritage Production Studio
Theme URI: https://example.com/
Author: Sellmark Corporation — Marketing
Author URI: https://www.sellmark.com
Description: Classic WordPress theme for Heritage Production Studio, a commercial photo and video production studio. Draft — not approved for launch. The site name is configurable; do not hardcode it into templates.
Version: 0.4.1
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 8.0
License: Proprietary — Sellmark Corporation
Text Domain: heritage-production-studio
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, block-styles, wide-blocks

NOTE: The static preview at ../_preview/ links THIS FILE directly. Any change here
changes the preview. There is no second stylesheet — keep it that way.
*/

/* ==========================================================================
   DESIGN TOKENS
   --------------------------------------------------------------------------
   Direction: a working production studio, not a wellness brand and not a
   consumer storefront. Near-black ground so photography carries the page,
   warm paper for reading surfaces, one high-energy accent used sparingly.
   Rationale and alternatives: _docs/design-direction.md
   ========================================================================== */
:root {
  /* Ground + paper */
  --hps-ink:        #0E0F11;   /* near-black; primary dark ground */
  --hps-ink-2:      #17191D;   /* raised dark surface */
  --hps-ink-3:      #23262C;   /* borders on dark */
  --hps-paper:      #F6F4F0;   /* warm off-white; main reading ground */
  --hps-paper-2:    #EDE9E2;   /* subtle panel on paper */
  --hps-line:       #D8D2C8;   /* hairline on paper */

  /* Type colours */
  --hps-text:       #1A1C20;
  --hps-text-mute:  #6B6863;
  --hps-text-inv:   #F6F4F0;
  --hps-text-inv-mute: #9A9691;

  /* Accent — used for action and emphasis only, never decoration */
  --hps-accent:     #D2541F;   /* burnt orange */
  --hps-accent-hi:  #EC6A31;
  --hps-accent-lo:  #A63F14;
  --hps-accent-soft:#FBEDE5;

  /* Secondary — cool steel, for meta and quiet UI */
  --hps-steel:      #4A5A63;
  --hps-steel-soft: #E7ECEE;

  /* Review annotation colours (preview only, never public) */
  --hps-warn:       #B8860B;
  --hps-warn-bg:    #FDF6E3;
  --hps-gate:       #B02020;
  --hps-gate-bg:    #FCEDED;
  --hps-info:       #2E5C6E;
  --hps-info-bg:    #EDF4F7;

  /* Type */
  --hps-display: "Oswald", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --hps-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hps-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;

  /* Rhythm */
  --hps-gut: 24px;
  --hps-max: 1180px;
  --hps-narrow: 760px;
  --hps-radius: 2px;   /* nearly square; studio/industrial, not friendly-rounded */
}

/* ==========================================================================
   RESET + BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--hps-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--hps-text);
  background: var(--hps-paper);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--hps-accent-lo); text-decoration: none; }
a:hover { color: var(--hps-accent); text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--hps-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0 0 0.5em;
  color: var(--hps-ink);
}
h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); text-transform: uppercase; letter-spacing: 0.005em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); text-transform: uppercase; }
h3 { font-size: 1.22rem; text-transform: uppercase; letter-spacing: 0.03em; }
h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; }

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

code {
  font-family: var(--hps-mono);
  font-size: 0.86em;
  background: var(--hps-paper-2);
  padding: 1px 5px;
  border-radius: var(--hps-radius);
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.hps-wrap { width: min(var(--hps-max), calc(100% - 2 * var(--hps-gut))); margin-inline: auto; }
.hps-narrow { width: min(var(--hps-narrow), calc(100% - 2 * var(--hps-gut))); margin-inline: auto; }

.hps-section { padding: 72px 0; }
.hps-section--tight { padding: 44px 0; }
.hps-section--dark { background: var(--hps-ink); color: var(--hps-text-inv); }
.hps-section--dark h1,
.hps-section--dark h2,
.hps-section--dark h3,
.hps-section--dark h4 { color: var(--hps-text-inv); }
.hps-section--dark a { color: var(--hps-accent-hi); }
.hps-section--panel { background: var(--hps-paper-2); }

.hps-eyebrow {
  font-family: var(--hps-display);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--hps-accent);
  margin: 0 0 14px;
}
.hps-section--dark .hps-eyebrow { color: var(--hps-accent-hi); }

.hps-lede { font-size: 1.16rem; color: var(--hps-text-mute); max-width: 62ch; }
.hps-section--dark .hps-lede { color: var(--hps-text-inv-mute); }

.hps-rule { height: 1px; background: var(--hps-line); border: 0; margin: 0; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hps-header {
  background: var(--hps-ink);
  color: var(--hps-text-inv);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--hps-ink-3);
}
.hps-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 74px;
}
.hps-brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.hps-brand:hover { text-decoration: none; }
.hps-brand__mark {
  font-family: var(--hps-display);
  font-size: 1.32rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--hps-text-inv);
  white-space: nowrap;
}
.hps-brand__mark em { font-style: normal; color: var(--hps-accent-hi); }
.hps-brand__sub {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--hps-text-inv-mute);
  white-space: nowrap;
}

.hps-nav ul { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; align-items: center; }
.hps-nav a {
  font-family: var(--hps-display);
  font-size: 0.86rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hps-text-inv);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.hps-nav a:hover { color: var(--hps-accent-hi); border-bottom-color: var(--hps-accent-hi); text-decoration: none; }
.hps-nav a[aria-current="page"] { border-bottom-color: var(--hps-accent); color: var(--hps-accent-hi); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.hps-btn {
  display: inline-block;
  font-family: var(--hps-display);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 13px 26px;
  border: 2px solid var(--hps-accent);
  background: var(--hps-accent);
  color: #fff;
  border-radius: var(--hps-radius);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hps-btn:hover { background: var(--hps-accent-hi); border-color: var(--hps-accent-hi); color: #fff; text-decoration: none; }
.hps-btn--ghost { background: transparent; color: var(--hps-accent); }
.hps-btn--ghost:hover { background: var(--hps-accent); color: #fff; }
.hps-section--dark .hps-btn--ghost { color: var(--hps-text-inv); border-color: var(--hps-text-inv); }
.hps-section--dark .hps-btn--ghost:hover { background: var(--hps-text-inv); color: var(--hps-ink); border-color: var(--hps-text-inv); }
.hps-btn--sm { padding: 9px 18px; font-size: 0.8rem; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hps-hero {
  background: var(--hps-ink);
  color: var(--hps-text-inv);
  padding: 96px 0 84px;
  position: relative;
  overflow: hidden;
}
.hps-hero::after {
  /* quiet diagonal light-sweep; suggests a lit set without needing an image */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(210,84,31,.14) 62%, transparent 78%);
  pointer-events: none;
}
.hps-hero__inner { position: relative; z-index: 1; }
.hps-hero h1 { color: var(--hps-text-inv); max-width: 22ch; margin-bottom: 20px; }
.hps-hero__sub {
  font-size: 1.24rem;
  line-height: 1.5;
  color: var(--hps-text-inv-mute);
  max-width: 58ch;
  margin: 0 0 32px;
}
.hps-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hps-hero--compact { padding: 62px 0 54px; }
.hps-hero--compact h1 { font-size: clamp(2rem, 4vw, 3rem); }

/* ==========================================================================
   CARDS
   ========================================================================== */
.hps-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; margin-top: 34px; }
.hps-card {
  background: #fff;
  border: 1px solid var(--hps-line);
  border-top: 3px solid var(--hps-accent);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
}
.hps-card__meta {
  font-family: var(--hps-display);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--hps-steel);
  margin-bottom: 10px;
}
.hps-card h3 { margin-bottom: 10px; font-size: 1.08rem; }
.hps-card p { color: var(--hps-text-mute); font-size: 0.97rem; margin: 0; }
.hps-card--link:hover { border-color: var(--hps-accent); }
.hps-card__more {
  margin-top: 16px;
  font-family: var(--hps-display);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--hps-accent);
}

/* ==========================================================================
   CHECKLIST
   ========================================================================== */
.hps-check { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2px 30px; }
.hps-check li { padding: 11px 0 11px 30px; position: relative; border-bottom: 1px solid var(--hps-line); }
.hps-check li::before {
  content: "";
  position: absolute;
  left: 4px; top: 19px;
  width: 9px; height: 9px;
  background: var(--hps-accent);
}
.hps-section--dark .hps-check li { border-bottom-color: var(--hps-ink-3); }

/* ==========================================================================
   SPECS TABLE
   ========================================================================== */
.hps-specs { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 0.97rem; }
.hps-specs th, .hps-specs td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--hps-line); vertical-align: top; }
.hps-specs th {
  font-family: var(--hps-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  color: var(--hps-steel);
  width: 38%;
}
.hps-specs tr:nth-child(odd) td, .hps-specs tr:nth-child(odd) th { background: rgba(0,0,0,.015); }
.hps-specs td em { font-style: normal; color: var(--hps-gate); font-weight: 600; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.hps-faq { margin-top: 28px; border-top: 1px solid var(--hps-line); }
.hps-faq__item { border-bottom: 1px solid var(--hps-line); padding: 20px 0; }
.hps-faq__q { font-family: var(--hps-display); font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 8px; color: var(--hps-ink); }
.hps-faq__a { margin: 0; color: var(--hps-text-mute); }

/* ==========================================================================
   CTA
   ========================================================================== */
.hps-cta { background: var(--hps-ink); color: var(--hps-text-inv); padding: 62px 0; text-align: center; }
.hps-cta h2 { color: var(--hps-text-inv); margin-bottom: 12px; }
.hps-cta p { color: var(--hps-text-inv-mute); max-width: 52ch; margin: 0 auto 26px; font-size: 1.08rem; }

/* ==========================================================================
   PAGE SCAFFOLD — breadcrumbs, hub children, conversion rail
   ========================================================================== */
.hps-crumbs { font-size: 0.82rem; color: var(--hps-text-mute); padding: 18px 0 0; }
.hps-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.hps-crumbs li::after { content: "/"; margin-left: 8px; color: var(--hps-line); }
.hps-crumbs li:last-child::after { content: ""; }

.hps-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.hps-body--full { grid-template-columns: minmax(0, 1fr); }
.hps-rail { position: sticky; top: 96px; }
.hps-rail__box { background: var(--hps-paper-2); border: 1px solid var(--hps-line); padding: 22px; margin-bottom: 18px; }
.hps-rail__box h4 { margin-bottom: 10px; color: var(--hps-ink); }
.hps-rail__box p { font-size: 0.92rem; color: var(--hps-text-mute); }
.hps-rail__list { list-style: none; margin: 0; padding: 0; font-size: 0.94rem; }
.hps-rail__list li { padding: 8px 0; border-bottom: 1px solid var(--hps-line); }
.hps-rail__list li:last-child { border-bottom: 0; }

.hps-tag {
  display: inline-block;
  font-family: var(--hps-display);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 3px 9px;
  background: var(--hps-steel-soft);
  color: var(--hps-steel);
  border-radius: var(--hps-radius);
}

/* ==========================================================================
   REVIEW NOTES — PREVIEW/INTERNAL ONLY
   --------------------------------------------------------------------------
   These mark unconfirmed facts and launch blockers. They are review
   annotations, NOT site content. The future WXR builder must strip every
   `note` section so none of this can ever reach a published page.
   ========================================================================== */
.hps-note {
  border-left: 4px solid var(--hps-info);
  background: var(--hps-info-bg);
  padding: 18px 22px;
  margin: 30px 0;
  font-size: 0.95rem;
}
.hps-note h4 {
  margin: 0 0 8px;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  color: var(--hps-info);
}
.hps-note p { margin-bottom: 0.7em; }
.hps-note p:last-child { margin-bottom: 0; }
.hps-note--warn { border-left-color: var(--hps-warn); background: var(--hps-warn-bg); }
.hps-note--warn h4 { color: #8A6508; }
.hps-note--gate { border-left-color: var(--hps-gate); background: var(--hps-gate-bg); }
.hps-note--gate h4 { color: var(--hps-gate); }
.hps-note__flag {
  display: inline-block;
  font-family: var(--hps-display);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(0,0,0,.08);
  padding: 2px 7px;
  margin-left: 8px;
  vertical-align: 2px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.hps-footer { background: var(--hps-ink); color: var(--hps-text-inv-mute); padding: 56px 0 30px; font-size: 0.93rem; }
.hps-footer h4 { color: var(--hps-text-inv); margin-bottom: 12px; font-size: 0.82rem; letter-spacing: 0.1em; }
.hps-footer a { color: var(--hps-text-inv-mute); }
.hps-footer a:hover { color: var(--hps-accent-hi); }
.hps-footer__cols { display: grid; grid-template-columns: 1.6fr repeat(2, 1fr); gap: 40px; }
.hps-footer__cols ul { list-style: none; margin: 0; padding: 0; }
.hps-footer__cols li { padding: 5px 0; }
.hps-footer__bottom {
  margin-top: 42px;
  padding-top: 20px;
  border-top: 1px solid var(--hps-ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  font-size: 0.82rem;
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0;
  overflow: hidden; position: absolute !important; word-wrap: normal !important;
}
.hps-skip:focus {
  position: fixed; top: 10px; left: 10px; z-index: 999;
  background: var(--hps-accent); color: #fff; padding: 10px 18px;
  clip: auto; clip-path: none; width: auto; height: auto;
}
:focus-visible { outline: 3px solid var(--hps-accent); outline-offset: 2px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .hps-body { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hps-rail { position: static; }
  .hps-footer__cols { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  .hps-header__inner { min-height: 60px; flex-wrap: wrap; padding: 10px 0; }
  .hps-brand__sub { display: none; }
  .hps-nav ul { gap: 16px; flex-wrap: wrap; }
  .hps-nav a { font-size: 0.78rem; letter-spacing: 0.06em; }
  .hps-hero { padding: 62px 0 52px; }
  .hps-section { padding: 52px 0; }
  .hps-footer__cols { grid-template-columns: 1fr; }
}

@media print {
  .hps-header, .hps-nav, .hps-cta, .hps-rail { display: none !important; }
  body { background: #fff; font-size: 12pt; }
}

/* ==========================================================================
   HOMEPAGE CONCEPT A — built to _docs/homepage-mockup-reference.jpg
   --------------------------------------------------------------------------
   Every value below resolves to a token declared in :root. No new colours are
   introduced here — if a shade is needed that the palette does not have, the
   palette is what should change, in one place, or the whole "one accent used
   sparingly" direction in _docs/design-direction.md quietly erodes.
   ========================================================================== */

/* --- Header: wordmark | nav | button ------------------------------------- */
.hps-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  min-height: 82px;
}
.hps-brand { flex-direction: column; align-items: flex-start; gap: 3px; }
.hps-brand__mark { font-size: 1.44rem; letter-spacing: 0.15em; line-height: 1; }
.hps-brand__sub { font-size: 0.56rem; letter-spacing: 0.34em; line-height: 1; }
.hps-nav { justify-self: center; }
.hps-nav ul { gap: 30px; }
.hps-nav a { font-size: 0.78rem; letter-spacing: 0.13em; font-weight: 600; }
.hps-header__cta { justify-self: end; }
.hps-header__cta .hps-btn { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }

.hps-ico { width: 1em; height: 1em; flex: none; }
.hps-btn .hps-ico { width: 1.05em; height: 1.05em; }

/* Mobile nav toggle. Hidden until the nav actually needs collapsing. */
.hps-navtoggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.hps-navtoggle__bar,
.hps-navtoggle__bar::before,
.hps-navtoggle__bar::after {
  display: block; width: 24px; height: 2px; background: var(--hps-text-inv); content: "";
}
.hps-navtoggle__bar::before { transform: translateY(-7px); }
.hps-navtoggle__bar::after { transform: translateY(5px); }

/* --- Split hero ---------------------------------------------------------- */
.hps-splithero {
  position: relative;
  background: var(--hps-ink);
  color: var(--hps-text-inv);
  overflow: hidden;
  isolation: isolate;
}
.hps-splithero__media {
  position: absolute;
  inset: 0 0 0 34%;
  background-size: cover;
  background-position: center 42%;
  z-index: -2;
}
.hps-splithero__media::after {
  /* Scrim, not a wash. The copy column needs contrast; the set photo needs to
     stay readable as a photo. Two stops left-to-right plus a floor gradient. */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--hps-ink) 0%, var(--hps-ink) 20%, rgba(14,15,17,.80) 44%, rgba(14,15,17,.58) 58%, rgba(14,15,17,.22) 80%, rgba(14,15,17,.40) 100%),
    linear-gradient(0deg, rgba(14,15,17,.65) 0%, transparent 46%);
}
.hps-splithero__inner { position: relative; padding: 104px 0 92px; }
/* NOT in ch. The ch unit resolves against the INHERITED body font, not the
   display face used by the h1 inside — 46ch measured 435px, which forced the
   headline into five ragged lines instead of the three in the mockup. A length
   is the honest unit for a column whose contents use two different fonts. */
.hps-splithero__copy { max-width: 760px; }
.hps-eyebrow--rule { display: flex; align-items: center; gap: 12px; }
.hps-eyebrow--rule::after { content: ""; height: 1px; width: 34px; background: var(--hps-accent); }
.hps-splithero__h1 {
  color: var(--hps-text-inv);
  /* Sized so the mockup's THREE-line break holds in every plausible face, not
     just Oswald. Measured on the real element with text-transform applied —
     measuring the lowercase source is how this got tuned wrong twice. The
     longest line is "BUILT BY A BRAND TEAM,": at 54.4px it needs 687px in
     DejaVu Sans Condensed (wider than Oswald, so the pessimistic case) and
     ~600px in Oswald itself. Both clear the 760px column. Choosing the ceiling
     off the widest fallback rather than the intended font is what stops the
     headline reflowing to four ragged lines on a machine with no Oswald. */
  font-size: clamp(2.3rem, 4.2vw, 3.4rem);
  line-height: 0.99;
  letter-spacing: -0.005em;
  margin: 0 0 22px;
  text-wrap: balance;
}
.hps-splithero__h1 em { font-style: normal; color: var(--hps-accent-hi); display: block; }
.hps-splithero__sub {
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--hps-text-inv-mute);
  max-width: 48ch;
  margin: 0 0 30px;
}
.hps-splithero .hps-btn { display: inline-flex; align-items: center; gap: 9px; }

/* --- In-house brand roster ----------------------------------------------
   NOT a client logo strip. The label is load-bearing: it is what keeps this
   row honest, so it is not optional styling. See hps_brand_roster().        */
.hps-roster {
  background: var(--hps-ink);
  border-top: 2px solid var(--hps-accent);
  padding: 26px 0;
}
.hps-roster__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.hps-roster__label {
  font-family: var(--hps-display);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--hps-text-inv-mute);
  margin: 0;
  flex: none;
  max-width: 15ch;
  line-height: 1.5;
}
.hps-roster__label span {
  display: block;
  color: var(--hps-accent);
  letter-spacing: 0.24em;
}
.hps-roster__list {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 520px;
  flex-wrap: wrap;
  gap: 18px 30px;
  margin: 0;
  padding: 0;
}
/* Real logo art, normalized to one white set by tools/build_brand_logos.py.
   Constrained by HEIGHT, never width: the seven marks run from 1.9:1 (KJI) to
   4.9:1 (Sightmark), so matching widths would make the wordmarks tiny and the
   symbols huge. Height plus a max-width ceiling keeps them optically even. */
.hps-roster__item {
  display: flex;
  align-items: center;
  opacity: .46;
  transition: opacity .16s ease;
}
.hps-roster__item:hover { opacity: .9; }
.hps-roster__logo {
  display: block;
  height: 26px;
  width: auto;
  max-width: 148px;
  object-fit: contain;
}
/* Per-brand optical trims. The normalizer equalises height; these correct for
   marks whose art carries more or less visual mass at the same height. */
.hps-roster__item--sightmark .hps-roster__logo { height: 22px; max-width: 152px; }
.hps-roster__item--pulsar    .hps-roster__logo { height: 23px; max-width: 156px; }
.hps-roster__item--inforce   .hps-roster__logo { height: 16px; max-width: 130px; }
.hps-roster__item--kji       .hps-roster__logo { height: 30px; max-width: 96px; }
.hps-roster__item--dark30    .hps-roster__logo { height: 25px; }
.hps-roster__item--firefield .hps-roster__logo { height: 27px; }
.hps-roster__item--bulletsafe .hps-roster__logo { height: 23px; }

/* Text fallback, per the root Dashboard Visual Asset Rule. Renders only when a
   logo file is absent, so the row degrades to legible type instead of gaps. */
.hps-roster__text {
  font-family: var(--hps-display);
  font-size: 1.02rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--hps-text-inv);
  white-space: nowrap;
}

/* --- Alternating image / copy bands -------------------------------------- */
.hps-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--hps-ink-2);
  color: var(--hps-text-inv);
  align-items: stretch;
}
/* Media is already first in the DOM, so `order: -1` was a no-op — the class
   named a behaviour it did not have, which is worse than not having the class.
   Order 2 genuinely puts the image on the right. Neither homepage band uses it
   (the mockup has both images left); it exists for inner pages. */
.hps-band--reverse .hps-band__media { order: 2; }
.hps-band__media { position: relative; min-height: 380px; overflow: hidden; }
.hps-band__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hps-band__copy { display: flex; align-items: center; padding: 76px clamp(28px, 5vw, 78px); }
.hps-band__copyinner { max-width: 52ch; }
.hps-band__copy h2 {
  color: var(--hps-text-inv);
  font-size: clamp(1.7rem, 2.7vw, 2.35rem);
  line-height: 1.06;
  margin: 0 0 22px;
}
.hps-band__copy p { color: var(--hps-text-inv-mute); font-size: 1rem; line-height: 1.68; }
.hps-band__copy p strong { color: var(--hps-text-inv); font-weight: 600; }
.hps-band .hps-eyebrow { color: var(--hps-accent-hi); }

/* --- What we produce ----------------------------------------------------- */
.hps-produce { background: var(--hps-ink); color: var(--hps-text-inv); padding: 74px 0 82px; }
.hps-produce__h2 {
  color: var(--hps-text-inv);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin: 0 0 12px;
}
.hps-produce__h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 2px;
  background: var(--hps-accent);
  margin-top: 18px;
}
.hps-produce__grid {
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 34px;
  text-align: center;
}
.hps-produce__icon { display: block; color: var(--hps-accent); margin: 0 auto 18px; }
.hps-produce__icon .hps-ico { width: 34px; height: 34px; stroke-width: 1.25; }
.hps-produce__item h3 {
  color: var(--hps-text-inv);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  margin: 0 0 10px;
}
.hps-produce__item p {
  color: var(--hps-text-inv-mute);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
  max-width: 24ch;
  margin-inline: auto;
}

/* --- Closing conversion band -------------------------------------------- */
.hps-closer {
  position: relative;
  background-color: var(--hps-accent-lo);
  background-size: cover;
  background-position: center right;
  color: var(--hps-text-inv);
  padding: 58px 0;
  isolation: isolate;
}
.hps-closer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14,15,17,.86) 0%, rgba(14,15,17,.52) 58%, rgba(14,15,17,.34) 100%);
  z-index: -1;
}
.hps-closer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.hps-closer h2 {
  color: var(--hps-text-inv);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.03;
  margin: 0;
  max-width: 20ch;
}
.hps-closer__action p { color: var(--hps-text-inv); font-size: 0.95rem; line-height: 1.6; margin: 0 0 20px; }
.hps-closer .hps-btn { display: inline-flex; align-items: center; gap: 9px; }
.hps-closer .hps-eyebrow { color: var(--hps-accent-hi); }

/* --- Footer: four columns ----------------------------------------------- */
.hps-footer__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
  gap: 44px;
  padding: 66px 0 46px;
}
.hps-brand--footer { margin-bottom: 20px; }
.hps-footer__identity p { font-size: 0.88rem; line-height: 1.6; margin: 0 0 6px; }
.hps-footer__where { margin-top: 14px !important; }
.hps-footer__col h4,
.hps-footer__identity h4 {
  font-family: var(--hps-display);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  margin: 0 0 18px;
}
.hps-footer__col ul { list-style: none; margin: 0; padding: 0; }
.hps-footer__col li { margin-bottom: 10px; font-size: 0.88rem; }
.hps-social { list-style: none; display: flex; gap: 10px; margin: 20px 0 0; padding: 0; }
.hps-social a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--hps-ink-3);
  border-radius: var(--hps-radius);
  text-decoration: none;
}
.hps-social a:hover { border-color: var(--hps-accent); }
.hps-social__tag { font-family: var(--hps-display); font-size: 0.6rem; letter-spacing: 0.08em; }
.hps-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--hps-display);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--hps-accent-hi);
  margin-top: 6px;
}
.hps-footer__bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* --- Responsive ---------------------------------------------------------
   Three real breakpoints, each fixing a specific failure:
   1100px the five-across icon row stops fitting;
   900px  the split hero's copy column starts colliding with the subject;
   640px  the header's three-column grid runs out of room.               */
@media (max-width: 1100px) {
  .hps-produce__grid { grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
  .hps-footer__cols { grid-template-columns: 1fr 1fr; gap: 40px; }
  .hps-nav ul { gap: 18px; }
  .hps-nav a { font-size: 0.7rem; letter-spacing: 0.08em; }
}

/* 980px is where the seven-item nav plus the booking button stops fitting.
   Measured, not guessed — below this the nav pushed the page 294px wider than
   the viewport. Collapse to the toggle here rather than at 640px. */
@media (max-width: 980px) {
  .hps-header__inner { grid-template-columns: 1fr auto auto; gap: 16px; }
  .hps-nav {
    display: none;
    grid-column: 1 / -1;
    justify-self: stretch;
    border-top: 1px solid var(--hps-ink-3);
    margin-top: 4px;
  }
  .hps-nav.is-open { display: block; padding: 14px 0 18px; }
  .hps-nav.is-open ul { flex-direction: column; align-items: flex-start; gap: 2px; }
  .hps-nav.is-open a { font-size: 0.86rem; letter-spacing: 0.11em; padding: 9px 0; }
  .hps-navtoggle { display: block; justify-self: end; order: 3; }
}

@media (max-width: 900px) {
  .hps-splithero__media { inset: 0; background-position: center 38%; }
  .hps-splithero__media::after {
    background:
      linear-gradient(180deg, rgba(14,15,17,.62) 0%, rgba(14,15,17,.82) 100%),
      linear-gradient(90deg, var(--hps-ink) 0%, rgba(14,15,17,.5) 70%, rgba(14,15,17,.5) 100%);
  }
  .hps-splithero__inner { padding: 82px 0 74px; }
  .hps-splithero__copy { max-width: none; }
  .hps-band,
  .hps-closer__inner { grid-template-columns: 1fr; }
  .hps-band--reverse .hps-band__media { order: 0; }
  .hps-band__media { min-height: 300px; }
  .hps-band__copy { padding: 52px clamp(24px, 6vw, 48px); }
  .hps-roster__inner { gap: 22px; }
  .hps-roster__label { max-width: none; }
  .hps-roster__list { justify-content: flex-start; }
}

@media (max-width: 640px) {
  .hps-header__inner { grid-template-columns: 1fr auto; gap: 14px; min-height: 68px; }
  .hps-header__cta { display: none; }
  /* Long single-word marks must be allowed to shrink rather than push the
     page wide. nowrap on a full site name overflowed by 56px at 430px. */
  .hps-brand__mark { font-size: 1.18rem; white-space: normal; }
  .hps-brand__sub { white-space: normal; }
  .hps-produce__grid { grid-template-columns: repeat(2, 1fr); }
  .hps-produce__item p { max-width: none; }
  .hps-footer__cols { grid-template-columns: 1fr; gap: 34px; padding: 48px 0 32px; }
  .hps-splithero__h1 { font-size: clamp(2.1rem, 9vw, 2.9rem); }
}

/* Reduced motion: the only transitions here are colour/opacity fades, but a
   blanket stop is cheaper to maintain than auditing each one later. */
@media (prefers-reduced-motion: reduce) {
  .hps-roster__list li,
  .hps-btn,
  .hps-social a { transition: none; }
}