/* ============================================================================
   BULLSEYE PRECISION — styles.css
   Licensed firearms & tactical equipment dealership, D.H.A. Phase 6, Karachi.

   Design language: institutional / Swiss-industrial. The page is set like the
   regulator's own paperwork — gunmetal registry bands over warm bone paper,
   one brass accent, hairline rules, near-sharp corners. Restraint signals
   legitimacy, and legitimacy is the entire value proposition.

   Everything tunable lives in the :root token block directly below.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1 · DESIGN TOKENS — edit this block to retune the whole design language
   ------------------------------------------------------------------------- */
:root {

  /* ---- COLOUR · gunmetal ------------------------------------------------
     A cold, slightly blue-cast charcoal ramp. 950 is the page-dark ground
     (hero, B2B band, footer), 900 the band/header tone, 800 raised panels
     on dark, 700 borders and hairlines on dark. */
  --gunmetal-950: #14171B;
  --gunmetal-900: #1B1F24;
  --gunmetal-800: #242930;
  --gunmetal-700: #2C323A;

  /* ---- COLOUR · bone ----------------------------------------------------
     A warm paper ramp for the document body. The warm/cool tension against
     gunmetal is deliberate: cold steel bands stitched onto warm paper.
     100 is the default page ground, 50 the lighter sheet, 200 a tinted
     panel (disclaimer, pressed states). */
  --bone-50:  #FAF8F2;
  --bone-100: #F3F0E7;
  --bone-200: #E9E4D6;

  /* ---- COLOUR · ink & text ---------------------------------------------
     Primary/secondary text on each ground. Secondary tones are tinted warm
     (never neutral grey) so they sit inside the bone/brass family.
     All pairs verified ≥ 4.5:1 (WCAG AA, normal text) against their grounds. */
  --ink:            #1B1F24;  /* primary text on bone            (14.5:1) */
  --ink-2:          #575349;  /* secondary text on bone           (6.7:1) */
  --bone-text:      #EDEAE2;  /* primary text on gunmetal        (14.9:1) */
  --bone-text-2:    #B5B1A4;  /* secondary text on gunmetal       (8.4:1) */
  --steel-text:     #8A8D93;  /* faint cool data on gunmetal      (5.4:1) */

  /* ---- COLOUR · accent — MUTED BRASS -----------------------------------
     Why brass, not steel blue or deep olive:
     · Brass is the material of institutional legitimacy here — engraved
       dealership plaques, court seals, door hardware of established firms.
       It says "registered and inspected", which is the whole pitch.
     · Steel blue collapses into generic corporate-trust blue at these
       saturations; olive drifts toward the military-surplus/"operator"
       aesthetic the brief explicitly bans.
     · One warm accent against a cold gunmetal ground gives the page its
       single point of warmth — the human note in "by a shooter, for
       shooters" — without breaking restraint.
     400 = text/fills on dark (7.7:1 on gunmetal-950). 500 = borders on
     dark. 600 = borders on light (≥3:1 non-text). 700 = text on bone
     (5.8:1). Hover tone lifts 400 slightly. */
  --brass-400:   #C8A560;
  --brass-450:   #D4B375;   /* hover lift of 400 */
  --brass-500:   #A98B4F;
  --brass-600:   #8F7439;
  --brass-700:   #6E5A2B;

  /* ---- COLOUR · lines & rules ------------------------------------------
     1px hairlines carry the document grid; 2px ink rules open sections. */
  --line-on-light: #D9D3C3;
  --line-on-dark:  #2E343C;
  --rule-strong:   var(--ink);      /* 2px section-opening rule on paper  */
  --rule-w:        2px;

  /* ---- COLOUR · contextual slots ---------------------------------------
     Components read these, never raw ramps. `.surface-dark` re-points them,
     so any block dropped on a dark band recolours itself. */
  --bg:         var(--bone-100);
  --tx-1:       var(--ink);
  --tx-2:       var(--ink-2);
  --line:       var(--line-on-light);
  --brass-text: var(--brass-700);   /* brass at AA on the current ground */
  --focus:      var(--brass-600);   /* focus-ring colour on current ground */

  /* ---- TYPE · families --------------------------------------------------
     Display: Archivo (self-hosted variable, /assets/fonts) — a grotesque
     with technical/industrial roots; width axis 62–125% gives the wordmark
     its signage voice. Body: system grotesk stack — zero network cost,
     native rendering (privacy is a feature). Mono: system mono, reserved
     strictly for registration data — licence numbers, hours, coordinates,
     prices, step indices. */
  --font-display: 'Archivo', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'SF Mono', 'Roboto Mono', 'Segoe UI Mono', monospace;

  /* ---- TYPE · scale ------------------------------------------------------
     Minor-third-ish steps; display sizes fluid via clamp. Body stays 1rem
     with generous 1.7 leading (brief: generous line height on body copy). */
  --fs-xs:   0.6875rem;                                   /* 11px labels   */
  --fs-sm:   0.8125rem;                                   /* 13px          */
  --fs-md:   0.9375rem;                                   /* 15px          */
  --fs-base: 1rem;
  --fs-lg:   1.0625rem;                                   /* 17px ledes    */
  --fs-xl:   1.25rem;                                     /* item names    */
  --fs-2xl:  1.5rem;                                      /* band titles   */
  --fs-h2:   clamp(1.75rem, 1.30rem + 2.4vw, 2.625rem);   /* section h2    */
  --fs-h1:   clamp(2.5rem, 1.40rem + 5vw, 5.25rem);       /* hero wordmark */

  --lh-body:  1.7;
  --lh-tight: 1.12;

  /* ---- TYPE · tracking ---------------------------------------------------
     Wide caps-tracking is reserved for SMALL labels only (brief). Display
     tightens slightly; floor is −0.025em. */
  --track-display: -0.02em;
  --track-tight:   -0.01em;
  --track-caps:     0.14em;

  /* ---- TYPE · display axis ----------------------------------------------
     Archivo's width axis: wordmark runs expanded, headings semi-expanded. */
  --stretch-wordmark: 118%;
  --stretch-heading:  108%;
  --wt-display: 640;
  --wt-medium:  600;

  /* ---- SPACE -------------------------------------------------------------
     4px base. --sect is the vertical rhythm between sections; --gut the
     page gutter (mobile-first: comfortable at 360px, wide margins on
     desktop, per brief). */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sect: clamp(4.5rem, 3rem + 6vw, 7.5rem);
  --gut:  clamp(1.25rem, 4vw, 2.5rem);

  /* ---- CONTAINERS -------------------------------------------------------- */
  --container:        74rem;
  --container-narrow: 52rem;

  /* ---- RADII — near-sharp only (brief: 2–4px, no pills) ------------------ */
  --r-1: 2px;
  --r-2: 3px;

  /* ---- ELEVATION ---------------------------------------------------------
     Rules over shadows. The floating WhatsApp button is the one element
     allowed a real shadow (it must sit above content). */
  --shadow-fab: 0 6px 16px rgba(10, 12, 14, 0.28);

  /* ---- MOTION ------------------------------------------------------------
     Minimal and functional. One authored moment (the process rail draws
     itself); everything else is hover/accordion at these speeds. */
  --ease:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 150ms;
  --dur-2: 280ms;
  --dur-rail: 800ms;

  /* ---- Z-INDEX ----------------------------------------------------------- */
  --z-header: 50;
  --z-fab:    60;
  --z-skip:   100;

  /* ---- TEXTURE -----------------------------------------------------------
     Faint drafting-grid verticals on dark bands (hero, B2B): the survey-
     sheet materiality of the document world. Effectively invisible at a
     glance, felt in the surface. */
  --grid-line-dark: rgba(237, 234, 226, 0.045);
  --grid-gap: 72px;
  --hatch-dark: rgba(237, 234, 226, 0.05);
}

/* Dark-band context: drop `.surface-dark` on any block and every component
   inside re-reads the contextual slots. */
.surface-dark {
  --bg:         var(--gunmetal-950);
  --tx-1:       var(--bone-text);
  --tx-2:       var(--bone-text-2);
  --line:       var(--line-on-dark);
  --brass-text: var(--brass-400);
  --focus:      var(--brass-400);
  background-color: var(--bg);
  color: var(--tx-1);
}

/* ----------------------------------------------------------------------------
   2 · FONT — Archivo variable (self-hosted, SIL OFL; licence in /assets/fonts)
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/Archivo-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ----------------------------------------------------------------------------
   3 · RESET & BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5.5rem;      /* clear the sticky header on anchor jumps */
  scrollbar-color: var(--gunmetal-700) var(--bone-100);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--tx-1);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Browser surfaces carry the palette too */
::selection { background: var(--brass-400); color: var(--gunmetal-950); }

body::-webkit-scrollbar { width: 12px; }
body::-webkit-scrollbar-track { background: var(--bone-100); }
body::-webkit-scrollbar-thumb {
  background: var(--gunmetal-700);
  border: 3px solid var(--bone-100);
  border-radius: var(--r-2);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 1px;
}

img, svg, iframe { display: block; max-width: 100%; }

ul, ol, dl, dd { padding: 0; }
ul, ol { list-style: none; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--wt-display);
  font-stretch: var(--stretch-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* Mono is for data only: licence numbers, hours, prices, coordinates. */
.data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.data--brass { color: var(--brass-text); }

.icon { flex: none; }

/* ----------------------------------------------------------------------------
   4 · LAYOUT PRIMITIVES
   ------------------------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gut), var(--container));
  margin-inline: auto;
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--sect); }

/* Section head: strong 2px rule, then the heading — more air above the
   heading than below it. */
.section__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head::before {
  content: "";
  display: block;
  height: var(--rule-w);
  background: var(--rule-strong);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.section__title {
  font-size: var(--fs-h2);
  letter-spacing: var(--track-display);
  color: var(--tx-1);
}
.section__lede {
  margin-top: var(--sp-4);
  max-width: 62ch;
  font-size: var(--fs-lg);
  color: var(--tx-2);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-4);
  background: var(--gunmetal-950);
  color: var(--bone-text);
  font-size: var(--fs-md);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--brass-500);
  border-radius: var(--r-1);
}
.skip-link:focus-visible { top: var(--sp-4); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------------------------
   5 · BUTTONS
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3rem;                    /* ≥44px tap target */
  padding: 0.625rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  font-family: var(--font-display);
  font-weight: var(--wt-medium);
  font-stretch: 104%;
  font-size: var(--fs-md);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--brass {
  background: var(--brass-400);
  border-color: var(--brass-400);
  color: var(--gunmetal-950);
}
.btn--brass:hover { background: var(--brass-450); border-color: var(--brass-450); }

/* outline button for dark grounds */
.btn--ghost-dark {
  border-color: rgba(237, 234, 226, 0.38);
  color: var(--bone-text);
}
.btn--ghost-dark:hover {
  border-color: var(--bone-text);
  background: rgba(237, 234, 226, 0.06);
}

/* outline button for paper grounds */
.btn--ghost-light {
  border-color: var(--ink);
  color: var(--ink);
}
.btn--ghost-light:hover { background: var(--ink); color: var(--bone-text); }

/* solid ink button for paper grounds */
.btn--dark {
  background: var(--gunmetal-900);
  border-color: var(--gunmetal-900);
  color: var(--bone-text);
}
.btn--dark:hover { background: var(--gunmetal-800); border-color: var(--gunmetal-800); }

.btn--compact {
  min-height: 2.75rem;                 /* keeps the 44px tap-target floor */
  padding: 0.375rem 1rem;
  font-size: var(--fs-sm);
}

/* ----------------------------------------------------------------------------
   6 · UTILITY BAR
   ------------------------------------------------------------------------- */
.utility {
  --bg: var(--gunmetal-950);
  --tx-1: var(--bone-text);
  --tx-2: var(--bone-text-2);
  --line: var(--line-on-dark);
  --brass-text: var(--brass-400);
  --focus: var(--brass-400);
  background: var(--bg);
  color: var(--tx-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
}
.utility__row {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--sp-6);
  row-gap: var(--sp-1);
  padding-block: var(--sp-2);
}
.utility__item { display: inline-flex; gap: var(--sp-2); align-items: baseline; }
.utility__key {
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  font-size: 0.625rem;
  color: var(--steel-text);
}
.utility__link { color: var(--tx-1); text-decoration: none; }
.utility__link:hover { color: var(--brass-400); }
.utility__licence { margin-left: auto; }
@media (max-width: 559px) {
  .utility__hours { display: none; }   /* 360px: keep phone + licence no. */
}

/* ----------------------------------------------------------------------------
   7 · STICKY HEADER
   ------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  --bg: var(--gunmetal-900);
  --tx-1: var(--bone-text);
  --tx-2: var(--bone-text-2);
  --line: var(--line-on-dark);
  --brass-text: var(--brass-400);
  --focus: var(--brass-400);
  background: var(--bg);
  color: var(--tx-1);
  border-bottom: 1px solid var(--line);
}
.header__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 4rem;
}
@media (min-width: 900px) { .header__row { gap: var(--sp-4); } }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--tx-1);
}
/* White-on-transparent logo image; intrinsic 752×140, scaled by width */
.wordmark__logo {
  display: block;
  width: 240px;
  height: auto;
}

.nav { margin-left: auto; }
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: var(--sp-2) var(--sp-3);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  color: var(--tx-1);
  font-family: var(--font-display);
  font-weight: var(--wt-medium);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.nav__toggle:hover { border-color: var(--bone-text-2); }
.no-js .nav__toggle { display: none; }

/* No JS, narrow screens: the nav degrades to an always-open list in flow
   (mirrors the FAQ's no-JS treatment) and the header stops being sticky so
   it doesn't pin a tall block over content. */
@media (max-width: 899px) {
  .no-js .header { position: static; }
  .no-js .header__row { flex-wrap: wrap; padding-block: var(--sp-2); }
  .no-js .nav { order: 3; flex-basis: 100%; margin-left: 0; }
  .no-js .nav__panel { position: static; grid-template-rows: 1fr; border-bottom: 0; }
  .no-js .nav__list { visibility: visible; }
}

/* Mobile: panel drops below the header, full width */
.nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--gunmetal-900);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-2) var(--ease);
}
.nav__list {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-2);
}
.nav--open .nav__panel { grid-template-rows: 1fr; }
.nav--open .nav__list { visibility: visible; transition-delay: 0s; }

.nav__link {
  display: block;
  padding: 0.875rem var(--gut);
  font-family: var(--font-display);
  font-weight: var(--wt-medium);
  font-size: var(--fs-base);
  color: var(--tx-1);
  text-decoration: none;
  border-top: 1px solid var(--line);
}
.nav__link:hover { color: var(--brass-400); background: rgba(237, 234, 226, 0.04); }

.header__cta { white-space: nowrap; }

/* Small screens: WhatsApp CTA collapses to an icon square, the menu toggle to
   its glyph — labels stay in the accessibility tree via .visually-hidden-like
   clipping. Sized so the row clears 320px with room. */
@media (max-width: 559px) {
  .header__cta {
    width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
  }
  .header__cta span {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-width: 479px) {
  .nav__toggle { width: 2.75rem; justify-content: center; padding: 0; }
  .nav__toggle-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (min-width: 900px) {
  .nav__panel {
    position: static;
    display: block;
    background: none;
    border: 0;
  }
  .nav__list {
    display: flex;
    gap: var(--sp-1);
    overflow: visible;
    visibility: visible;
  }
  .nav__link {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--tx-2);
    border: 0;
    border-radius: var(--r-1);
    text-underline-offset: 6px;
  }
  .nav__link:hover { color: var(--tx-1); background: none; text-decoration: underline; text-decoration-color: var(--brass-400); }
  .nav__toggle { display: none; }
}

/* ----------------------------------------------------------------------------
   8 · HERO
   ------------------------------------------------------------------------- */
.hero {
  --bg: var(--gunmetal-950);
  --tx-1: var(--bone-text);
  --tx-2: var(--bone-text-2);
  --line: var(--line-on-dark);
  --brass-text: var(--brass-400);
  --focus: var(--brass-400);
  background-color: var(--bg);
  background-image: repeating-linear-gradient(
    90deg,
    var(--grid-line-dark) 0 1px,
    transparent 1px var(--grid-gap)
  );
  color: var(--tx-1);
  padding-block: clamp(3.5rem, 3rem + 5vw, 7rem) clamp(3rem, 2.5rem + 4vw, 5.5rem);
}

.hero__grid { display: grid; gap: var(--sp-7); }

.hero__title {
  font-size: var(--fs-h1);
  font-stretch: var(--stretch-wordmark);
  font-weight: 660;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  line-height: 0.96;
}
.hero__tagline {
  margin-top: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-weight: var(--wt-medium);
  font-size: var(--fs-lg);
  color: var(--brass-400);
}
.hero__tagline::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--brass-400);
}
.hero__lede {
  margin-top: var(--sp-5);
  max-width: 58ch;
  font-size: var(--fs-lg);
  color: var(--tx-2);
}
.hero__actions {
  margin-top: var(--sp-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
@media (max-width: 479px) {
  .hero__actions .btn { flex: 1 1 100%; }
}
.hero__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--steel-text);
}

/* Registration plate — the dealership's papers as hero furniture */
.plate {
  align-self: start;
  border: 1px solid rgba(237, 234, 226, 0.28);
  border-radius: var(--r-1);
  background: rgba(237, 234, 226, 0.03);
}
.plate__head {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid rgba(237, 234, 226, 0.28);
  font-family: var(--font-display);
  font-weight: var(--wt-medium);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--brass-400);
}
.plate__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding: 0.7rem var(--sp-4);
}
.plate__row + .plate__row { border-top: 1px solid rgba(237, 234, 226, 0.13); }
.plate__row dt { font-size: var(--fs-sm); color: var(--bone-text-2); }
.plate__row dd { font-size: var(--fs-sm); color: var(--bone-text); text-align: right; }

.hero__ph { margin-top: clamp(2.5rem, 5vw, 4rem); }

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--sp-8);
    align-items: start;
  }
  .plate { margin-top: 0.5rem; }
}

/* ----------------------------------------------------------------------------
   9 · PHOTO PLACEHOLDERS — hatched drafting blocks with registration ticks
   ------------------------------------------------------------------------- */
.ph { position: relative; }
.ph__frame {
  aspect-ratio: 3 / 2;
  border: 1px solid rgba(237, 234, 226, 0.22);
  border-radius: var(--r-1);
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 10px,
    var(--hatch-dark) 10px 11px
  );
}
/* brass registration ticks, top-left and bottom-right */
.ph::before, .ph::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.ph::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--brass-500);
  border-left: 2px solid var(--brass-500);
}
.ph::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--brass-500);
  border-right: 2px solid var(--brass-500);
}
.ph__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  text-align: center;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--steel-text);
}
@media (min-width: 900px) {
  .hero__ph .ph__frame { aspect-ratio: 21 / 9; }
}

/* ----------------------------------------------------------------------------
   10 · CREDENTIALS STRIP
   ------------------------------------------------------------------------- */
.creds {
  background: var(--bone-100);
  border-bottom: 1px solid var(--line-on-light);
}
.creds__grid { display: grid; }
.creds__item { padding: var(--sp-6) 0; }
.creds__item + .creds__item { border-top: 1px solid var(--line-on-light); }
.creds__icon { color: var(--brass-600); }
.creds__title {
  margin-top: var(--sp-4);
  font-size: var(--fs-lg);
}
.creds__body {
  margin-top: var(--sp-2);
  max-width: 44ch;
  font-size: var(--fs-md);
  color: var(--ink-2);
  line-height: 1.6;
}
@media (min-width: 800px) {
  .creds__grid { grid-template-columns: repeat(3, 1fr); }
  .creds__item { padding: var(--sp-7) var(--sp-6); }
  .creds__item:first-child { padding-left: 0; }
  .creds__item:last-child { padding-right: 0; }
  .creds__item + .creds__item { border-top: 0; border-left: 1px solid var(--line-on-light); }
}

/* ----------------------------------------------------------------------------
   11 · PROCESS RAIL — the page's one authored motion moment
   ------------------------------------------------------------------------- */
.rail {
  position: relative;
  display: grid;
  gap: var(--sp-6);
  counter-reset: step;
}
.rail__line {
  position: absolute;
  left: 1.1875rem;             /* centred on the 2.5rem chip */
  top: var(--sp-2);
  bottom: var(--sp-2);
  width: 2px;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-rail) var(--ease);
}
.rail__step {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: var(--sp-4);
}
.rail__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--ink);
  border-radius: var(--r-1);
  background: var(--bone-100);
  font-size: var(--fs-sm);
  color: var(--brass-700);
  position: relative;         /* sits above the rail line */
}
.rail__title {
  align-self: center;
  font-size: var(--fs-lg);
}
.rail__body {
  grid-column: 2;
  margin-top: var(--sp-2);
  max-width: 38ch;
  font-size: var(--fs-md);
  color: var(--ink-2);
  line-height: 1.65;
}

/* reveal choreography (JS adds .is-in once, on first intersection) */
.js .rail__step {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
  transition-delay: calc(var(--i) * 130ms + 250ms);
}
.js .rail.is-in .rail__step { opacity: 1; transform: none; }
.rail.is-in .rail__line { transform: scaleY(1); }
.no-js .rail__line { transform: scaleY(1); }

@media (min-width: 980px) {
  .rail {
    grid-template-columns: repeat(5, 1fr);
    gap: 0 var(--sp-5);
  }
  .rail__line {
    left: 0;
    right: 0;
    top: 1.1875rem;
    bottom: auto;
    width: auto;
    height: 2px;
    transform: scaleX(0);
    transform-origin: left;
  }
  .rail.is-in .rail__line { transform: scaleX(1); }
  .no-js .rail__line { transform: scaleX(1); }
  .rail__step { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .rail__num { margin-bottom: var(--sp-4); }
  .rail__title { align-self: start; }
  .rail__body { grid-column: 1; margin-top: var(--sp-2); }
}

.process__foot {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-on-light);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.process__reminder {
  font-size: var(--fs-md);
  color: var(--ink-2);
  max-width: 44ch;
}

/* ----------------------------------------------------------------------------
   12 · CATEGORIES — the legal split, made structural:
        regulated arms live on a gunmetal registry band (no prices, brass
        seal); open-sale equipment lives on paper with prices in mono.
   ------------------------------------------------------------------------- */
.cats { padding-bottom: 0; }
.cats .section__head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.seal {
  display: inline-block;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--brass-500);
  border-radius: var(--r-1);
  background: rgba(200, 165, 96, 0.07);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--brass-400);
  white-space: nowrap;
}
.seal--open {
  border-color: var(--gunmetal-700);
  background: none;
  color: var(--ink-2);
}

.cats__band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-6);
}
.cats__band-title { font-size: var(--fs-2xl); }

/* — regulated band — */
.cats__regulated {
  --bg: var(--gunmetal-900);
  --tx-1: var(--bone-text);
  --tx-2: var(--bone-text-2);
  --line: var(--line-on-dark);
  --brass-text: var(--brass-400);
  --focus: var(--brass-400);
  background: var(--bg);
  color: var(--tx-1);
  padding-block: clamp(3rem, 2.5rem + 3vw, 4.5rem);
}
.cats__band-grid { display: grid; gap: var(--sp-7); }
@media (min-width: 1000px) {
  .cats__band-grid { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; }
}
.cats__ph .ph__frame { aspect-ratio: 4 / 5; }
@media (max-width: 999px) {
  .cats__ph { max-width: 26rem; }
  .cats__ph .ph__frame { aspect-ratio: 3 / 2; }
}

.ledger { border-top: 1px solid var(--line-on-dark); }
.ledger__row {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line-on-dark);
}
.ledger__name { font-size: var(--fs-xl); }
.ledger__desc {
  margin-top: var(--sp-1);
  font-size: var(--fs-md);
  color: var(--bone-text-2);
  max-width: 52ch;
}
.ledger__cta {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid rgba(169, 139, 79, 0.55);
  border-radius: var(--r-1);
  font-family: var(--font-display);
  font-weight: var(--wt-medium);
  font-size: var(--fs-sm);
  color: var(--brass-400);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.ledger__cta:hover {
  background: var(--brass-400);
  border-color: var(--brass-400);
  color: var(--gunmetal-950);
}
.ledger__cta .icon { transition: translate var(--dur-1) var(--ease); }
.ledger__cta:hover .icon { translate: 2px 0; }
@media (min-width: 640px) {
  .ledger__row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

.cats__band-foot {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--fs-sm);
  color: var(--bone-text-2);
  max-width: 76ch;
}

/* — open-sale band — */
.cats__open {
  background: var(--bone-50);
  border-bottom: 1px solid var(--line-on-light);
  padding-block: clamp(3rem, 2.5rem + 3vw, 4.5rem);
}
.gear {
  display: grid;
  gap: 1px;
  background: var(--line-on-light);
  border: 1px solid var(--line-on-light);
  border-radius: var(--r-1);
  overflow: hidden;
}
.gear__cell {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  background: var(--bone-50);
  transition: background-color var(--dur-1) var(--ease);
}
.gear__cell:hover { background: #FFFDF6; }
.gear__name { font-size: var(--fs-lg); }
.gear__desc {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.6;
  flex-grow: 1;
}
.gear__price {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink);
}
.gear__cta {
  margin-top: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  align-self: start;
  padding-block: var(--sp-1);
  font-family: var(--font-display);
  font-weight: var(--wt-medium);
  font-size: var(--fs-sm);
  color: var(--brass-700);
  text-decoration: none;
}
.gear__cta:hover { text-decoration: underline; text-underline-offset: 4px; }
.gear__cta .icon { transition: translate var(--dur-1) var(--ease); }
.gear__cta:hover .icon { translate: 2px 0; }
@media (min-width: 640px)  { .gear { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gear { grid-template-columns: repeat(3, 1fr); } }

.cats__band-foot--open { border-top: 0; padding-top: 0; color: var(--ink-2); }

/* ----------------------------------------------------------------------------
   13 · WHO WE SERVE
   ------------------------------------------------------------------------- */
.clients__grid {
  display: grid;
  gap: 1px;
  background: var(--line-on-light);
  border: 1px solid var(--line-on-light);
  border-radius: var(--r-1);
  overflow: hidden;
}
.clients__cell {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--bone-50);
}
.clients__name { font-size: var(--fs-xl); }
.clients__body {
  margin-top: var(--sp-3);
  font-size: var(--fs-md);
  color: var(--ink-2);
  line-height: 1.65;
  flex-grow: 1;
}
.clients__cta {
  margin-top: var(--sp-5);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: start;
  min-height: 2.75rem;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--brass-600);
  border-radius: var(--r-1);
  font-family: var(--font-display);
  font-weight: var(--wt-medium);
  font-size: var(--fs-sm);
  color: var(--brass-700);
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.clients__cta:hover { background: var(--brass-700); border-color: var(--brass-700); color: var(--bone-50); }
.clients__cta .icon { transition: translate var(--dur-1) var(--ease); }
.clients__cta:hover .icon { translate: 2px 0; }
@media (min-width: 900px) { .clients__grid { grid-template-columns: repeat(3, 1fr); } }

/* ----------------------------------------------------------------------------
   14 · LICENCE GUIDANCE
   ------------------------------------------------------------------------- */
.licensing { background: var(--bone-50); border-block: 1px solid var(--line-on-light); }

.licensing__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 900px) { .licensing__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }

.licensing__subtitle { font-size: var(--fs-lg); margin-bottom: var(--sp-4); }

.checklist__item {
  position: relative;
  padding: var(--sp-2) 0 var(--sp-2) 1.875rem;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink);
}
.checklist__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.8125rem;
  height: 0.8125rem;
  border: 1.5px solid var(--brass-600);
  border-radius: 1px;
}

.channels li + li { margin-top: var(--sp-3); }
.channels__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-on-light);
  border-radius: var(--r-1);
  background: var(--bone-100);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.channels__link:hover { border-color: var(--ink); background: var(--bone-50); }
.channels__name {
  font-family: var(--font-display);
  font-weight: var(--wt-medium);
  font-size: var(--fs-base);
  color: var(--ink);
}
.channels__desc {
  grid-column: 1;
  margin-top: 0.125rem;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.channels__icon { grid-column: 2; grid-row: 1 / span 2; color: var(--brass-700); }

.disclaimer {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: var(--sp-5) var(--sp-5);
  border: 1px solid var(--brass-600);
  border-radius: var(--r-1);
  background: var(--bone-200);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-2);
}
.disclaimer strong { color: var(--ink); }

/* ----------------------------------------------------------------------------
   15 · INSTITUTIONAL / B2B BAND
   ------------------------------------------------------------------------- */
.b2b {
  --bg: var(--gunmetal-950);
  --tx-1: var(--bone-text);
  --tx-2: var(--bone-text-2);
  --line: var(--line-on-dark);
  --brass-text: var(--brass-400);
  --focus: var(--brass-400);
  background-color: var(--bg);
  background-image: repeating-linear-gradient(
    90deg,
    var(--grid-line-dark) 0 1px,
    transparent 1px var(--grid-gap)
  );
  color: var(--tx-1);
  border-top: 3px solid var(--brass-500);
}
.b2b__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 1000px) {
  .b2b__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: var(--sp-9); align-items: center; }
}
.b2b__title { color: var(--bone-text); }
.b2b__lede {
  margin-top: var(--sp-4);
  max-width: 56ch;
  font-size: var(--fs-lg);
  color: var(--bone-text-2);
}
.b2b__points { margin-top: var(--sp-6); }
.b2b__points li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-md);
  color: var(--bone-text);
}
.b2b__points li + li { margin-top: var(--sp-3); }
.b2b__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--brass-400);
}
.b2b__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
}
@media (min-width: 1000px) { .b2b__actions { align-items: stretch; } }

/* ----------------------------------------------------------------------------
   16 · COMPLIANCE NOTICE — the statutory plate
   ------------------------------------------------------------------------- */
.notice__plate {
  position: relative;
  padding: clamp(2.5rem, 2rem + 4vw, 4rem) clamp(1.5rem, 1rem + 4vw, 3.5rem);
  border: 1px solid var(--ink);
  border-radius: var(--r-1);
  background: var(--bone-50);
  text-align: center;
}
/* inner frame — double-ruled, like a gazetted notice */
.notice__plate::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--line-on-light);
  border-radius: 1px;
  pointer-events: none;
}
/* brass registration ticks, consistent with the placeholder frames */
.notice__plate::after {
  content: "";
  position: absolute;
  top: -1px; left: -1px;
  width: 14px; height: 14px;
  border-top: 2px solid var(--brass-500);
  border-left: 2px solid var(--brass-500);
}
.notice__title {
  font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.25rem);
  letter-spacing: var(--track-display);
  max-width: 24ch;
  margin-inline: auto;
}
.notice__body {
  margin: var(--sp-5) auto 0;
  max-width: 62ch;
  text-align: left;
  font-size: var(--fs-md);
  line-height: 1.75;
  color: var(--ink-2);
}
.notice__warn {
  margin: var(--sp-4) auto 0;
  max-width: 62ch;
  text-align: left;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink);
}
.notice__ref {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-on-light);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}

/* ----------------------------------------------------------------------------
   17 · FAQ ACCORDION
   ------------------------------------------------------------------------- */
.faq { background: var(--bone-50); border-block: 1px solid var(--line-on-light); }

.faq__list { border-top: var(--rule-w) solid var(--ink); border-bottom: var(--rule-w) solid var(--ink); }
.faq__item + .faq__item { border-top: 1px solid var(--line-on-light); }

.faq__h { font-size: inherit; }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  min-height: 3.5rem;
  padding: var(--sp-4) var(--sp-1);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-weight: var(--wt-medium);
  font-stretch: var(--stretch-heading);
  font-size: var(--fs-lg);
  line-height: 1.35;
  color: var(--ink);
  transition: color var(--dur-1) var(--ease);
}
.faq__q:hover { color: var(--brass-700); }
.faq__chev { color: var(--brass-700); transition: rotate var(--dur-2) var(--ease); }
.faq__q[aria-expanded="true"] .faq__chev { rotate: 180deg; }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-2) var(--ease);
}
.faq__a-inner {
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear var(--dur-2);
}
.faq__item.open .faq__a { grid-template-rows: 1fr; }
.faq__item.open .faq__a-inner { visibility: visible; transition-delay: 0s; }
.faq__a-inner p {
  padding: 0 var(--sp-1) var(--sp-5);
  max-width: 68ch;
  font-size: var(--fs-md);
  line-height: 1.7;
  color: var(--ink-2);
}
/* no JS: all answers stay open and readable */
.no-js .faq__a { grid-template-rows: 1fr; }
.no-js .faq__a-inner { visibility: visible; }
.no-js .faq__chev { display: none; }

/* ----------------------------------------------------------------------------
   18 · LOCATION & VISIT
   ------------------------------------------------------------------------- */
.visit__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 1000px) {
  .visit__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); }
}

.visit__rows { border-top: 1px solid var(--line-on-light); }
.visit__row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line-on-light);
}
.visit__row dt {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--ink-2);
  padding-top: 0.2em;
}
.visit__row dd { font-size: var(--fs-md); line-height: 1.6; }
.visit__info .btn { margin-top: var(--sp-6); }

.visit__map {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-on-light);
  border-radius: var(--r-1);
  overflow: hidden;
  background: var(--bone-200);
}
.visit__map iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  filter: grayscale(1) contrast(1.02);   /* map mutes into the palette…    */
  transition: filter var(--dur-2) var(--ease);
}
.visit__map:hover iframe,
.visit__map:focus-within iframe { filter: none; }  /* …and wakes on use */
@media (min-width: 1000px) {
  .visit__map iframe { aspect-ratio: auto; flex: 1; min-height: 26rem; }
}

/* ----------------------------------------------------------------------------
   19 · FOOTER
   ------------------------------------------------------------------------- */
.footer {
  --bg: var(--gunmetal-950);
  --tx-1: var(--bone-text);
  --tx-2: var(--bone-text-2);
  --line: var(--line-on-dark);
  --brass-text: var(--brass-400);
  --focus: var(--brass-400);
  background: var(--bg);
  color: var(--tx-2);
  padding: var(--sp-8) 0 var(--sp-6);
  font-size: var(--fs-md);
}
.footer__grid { display: grid; gap: var(--sp-7); }
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6); }
}
.wordmark--footer { color: var(--bone-text); }
.footer__strap { margin-top: var(--sp-3); color: var(--bone-text-2); }
.footer__licence { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--brass-400); }
.footer__head {
  font-size: var(--fs-xs);
  font-weight: var(--wt-medium);
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--steel-text);
  margin-bottom: var(--sp-4);
}
.footer__list li { line-height: 1.7; }
.footer__list li + li { margin-top: var(--sp-2); }
.footer__link { color: var(--bone-text-2); text-decoration: none; }
.footer__link:hover { color: var(--bone-text); text-decoration: underline; text-decoration-color: var(--brass-400); text-underline-offset: 4px; }
.footer__legal {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-on-dark);
  display: grid;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--steel-text);
  max-width: 90ch;
}

/* ----------------------------------------------------------------------------
   20 · FLOATING WHATSAPP BUTTON
   ------------------------------------------------------------------------- */
.fab {
  position: fixed;
  right: clamp(1rem, 3vw, 1.5rem);
  bottom: clamp(1rem, 3vw, 1.5rem);
  z-index: var(--z-fab);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;                        /* 56px tap target */
  height: 3.5rem;
  background: var(--brass-400);
  color: var(--gunmetal-950);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-fab);
  transition: opacity var(--dur-2) var(--ease), translate var(--dur-2) var(--ease),
              background-color var(--dur-1) var(--ease);
}
.fab:hover { background: var(--brass-450); translate: 0 -2px; }
.fab:focus-visible {
  outline: 2px solid var(--gunmetal-950);
  outline-offset: 2px;
  box-shadow: var(--shadow-fab), 0 0 0 5px rgba(243, 240, 231, 0.9);
}
/* JS arms the button, then reveals it after the hero scrolls past */
.fab-armed .fab { opacity: 0; translate: 0 10px; pointer-events: none; }
.fab-armed.past-hero .fab { opacity: 1; translate: 0 0; pointer-events: auto; }

/* ----------------------------------------------------------------------------
   21 · REDUCED MOTION — everything lands instantly, nothing is hidden
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .js .rail__step { opacity: 1; transform: none; }
  .rail__line { transform: none !important; }
}