/* ==========================================================================
   GERMAN POWER SOLUTIONS — design system  v2

   DIRECTION: German heavy-industry trade catalogue. Condensed uppercase display
   type at large scale, near-black surfaces, German Red as the ONE accent used
   sparingly, hard 2px corners, technical information set like a spec sheet.
   Descends from DIN signage and German industrial print — not from SaaS.

   Carried by three things: Barlow Condensed display · near-black surface ·
   the flag rule as a structural motif.

   Palette is LOCKED (GPS-Color-Palette-and-Tagline.pdf). Contrast values are
   computed by .claude/skills/wp-design/references/contrast.py, never estimated.
   ========================================================================== */

/* ── Fonts: self-hosted. Hotlinking Google costs a DNS round trip on every
      page load and carries a GDPR question in the EU. ───────────────────── */

@font-face{
  font-family:'GPS Display';
  src:url('fonts/barlow-condensed.woff2') format('woff2');
  font-weight:600 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'GPS Heavy';
  src:url('fonts/archivo-display.woff2') format('woff2');
  font-weight:600 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'GPS Text';
  src:url('fonts/inter.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}

:root{
  /* LOCKED brand */
  --red:#dd0000; --yellow:#ffce00; --black:#111111; --white:#ffffff;

  /* derived neutrals only — never a fifth hue */
  --ink:#111111;
  --n900:#17181a; --n800:#202225; --n700:#32353a;
  --n500:#6b6f76; --n300:#c9ccd2; --n150:#e6e8ec; --n50:#f6f7f9;

  /* type scale — 1.28, fluid 390→1440 */
  --step--2: clamp(0.63rem, 0.60rem + 0.12vw, 0.71rem);
  --step--1: clamp(0.81rem, 0.77rem + 0.15vw, 0.90rem);
  --step-0:  clamp(1.03rem, 0.98rem + 0.19vw, 1.16rem);
  --step-1:  clamp(1.32rem, 1.26rem + 0.24vw, 1.48rem);
  --step-2:  clamp(1.69rem, 1.61rem + 0.31vw, 1.89rem);
  --step-3:  clamp(2.16rem, 2.07rem + 0.40vw, 2.42rem);
  --step-4:  clamp(2.77rem, 2.64rem + 0.51vw, 3.10rem);
  --step-5:  clamp(3.54rem, 3.38rem + 0.65vw, 3.97rem);
  --step-6:  clamp(3.10rem, 2.20rem + 4.60vw, 6.20rem);

  /* spacing */
  --s-2xs:.25rem; --s-xs:.5rem; --s-s:1rem; --s-m:1.5rem;
  --s-l:2.5rem; --s-xl:4rem; --s-2xl:6.5rem;
  --sec-y:clamp(3.75rem,8vw,7.5rem);

  --max:1280px;
  --pad:clamp(20px,5vw,72px);
  --r:2px;                       /* hard edges — this brand is a flag, not a bubble */

  --display:'GPS Display','Barlow Condensed',system-ui,sans-serif;
  --heavy:'GPS Heavy','Archivo',system-ui,sans-serif;
  --text:'GPS Text','Inter',system-ui,-apple-system,sans-serif;

  --ease:cubic-bezier(.2,.7,.3,1);
}

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

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

body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--text); font-size:var(--step-0); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

h1,h2,h3,h4{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  line-height:.98; letter-spacing:-.005em; margin:0 0 .4em; text-wrap:balance;
}

p{ text-wrap:pretty; }
a{ color:var(--red); }

/* Focus rings use box-shadow, not outline — outline ignores border-radius. */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--yellow), 0 0 0 5px var(--black);
  border-radius:var(--r);
}
::selection{ background:var(--yellow); color:var(--black); }

/* Decorative things must not eat clicks. */
[aria-hidden="true"]:not(button):not(a){ pointer-events:none; }

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

/* ── Shared atoms ───────────────────────────────────────────────────────── */

.gps-eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--text); font-size:var(--step--2); font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--red);
  margin:0 0 var(--s-s);
}
.gps-eyebrow::before{
  content:""; width:28px; height:3px; background:var(--red); flex:none;
}
.gps-sec--dark .gps-eyebrow{ color:var(--yellow); }
.gps-sec--dark .gps-eyebrow::before{ background:var(--yellow); }

.gps-btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--text); font-size:var(--step--1); font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
  padding:1.05em 2.1em; border:2px solid transparent; border-radius:var(--r);
  cursor:pointer; user-select:none;
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.gps-btn::after{ content:"→"; font-size:1.1em; line-height:1; transform:translateY(-1px); }
/* white on German Red = 5.15:1 → clears AA for body text */
.gps-btn--primary{ background:var(--red); color:var(--white); border-color:var(--red); }
.gps-btn--primary:hover{ background:var(--yellow); color:var(--black); border-color:var(--yellow); }
.gps-btn--ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.45); }
.gps-btn--ghost:hover{ background:var(--white); color:var(--black); border-color:var(--white); }
.gps-btn--dark{ background:var(--black); color:var(--white); border-color:var(--black); }
.gps-btn--dark:hover{ background:var(--red); border-color:var(--red); }

/* The flag rule — the structural motif, used as a divider and an accent. */
.gps-flag{ display:flex; height:4px; width:100%; }
.gps-flag span{ flex:1; }
.gps-flag span:nth-child(1){ background:var(--black); }
.gps-flag span:nth-child(2){ background:var(--red); }
.gps-flag span:nth-child(3){ background:var(--yellow); }

/* ── Header ─────────────────────────────────────────────────────────────── */

.gps-header{ background:var(--white); position:relative; z-index:60; }
.gps-header__bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-m);
  max-width:var(--max); margin-inline:auto; padding:var(--s-s) var(--pad);
}
.gps-logo{ display:block; text-decoration:none; line-height:.9; flex:none; }
.gps-logo__mark{
  display:block; font-family:var(--heavy); font-weight:900;
  font-size:clamp(1.35rem,2.7vw,1.85rem); color:var(--red);
  text-transform:uppercase; letter-spacing:-.035em;
}
.gps-logo__sub{
  display:inline-block; margin-top:5px; padding:3px 6px;
  background:var(--yellow); color:var(--black);
  font-family:var(--text); font-size:.58rem; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
}
.gps-nav{ display:flex; align-items:center; gap:clamp(16px,2.2vw,34px); }
.gps-nav ul{ display:contents; }
.gps-nav li{ list-style:none; margin:0; padding:0; }
.gps-nav a{
  position:relative; color:var(--ink); text-decoration:none;
  font-family:var(--text); font-size:var(--step--1); font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; padding:.55em 0;
}
.gps-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:3px;
  background:var(--red); transition:right .18s var(--ease);
}
.gps-nav a:hover::after,.gps-nav .current-menu-item>a::after{ right:0; }
.gps-header__cta{ display:flex; align-items:center; gap:var(--s-m); }
.gps-header__phone{
  font-family:var(--display); font-size:var(--step-1); font-weight:700;
  color:var(--ink); text-decoration:none; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.gps-burger{
  display:none; background:none; border:0; padding:10px; cursor:pointer; flex:none;
}
.gps-burger span{ display:block; width:26px; height:2px; background:var(--ink); margin:6px 0; }

/* ── Section scaffolding ────────────────────────────────────────────────── */

.gps-sec{ padding:var(--sec-y) var(--pad); position:relative; }
.gps-sec>*{ max-width:var(--max); margin-inline:auto; }
.gps-sec--dark{ background:var(--black); color:var(--white); }
.gps-sec--dark h2,.gps-sec--dark h3{ color:var(--white); }
.gps-sec--tint{ background:var(--n50); }

.gps-sec__head{ margin-bottom:clamp(2rem,4vw,3.4rem); max-width:44rem; }
.gps-sec__title{ font-size:var(--step-4); margin:0; }
.gps-sec__sub{
  font-size:var(--step-0); color:var(--n500); margin:var(--s-s) 0 0; max-width:52ch;
}
.gps-sec--dark .gps-sec__sub{ color:var(--n300); }

.gps-grid{ display:grid; gap:clamp(14px,1.6vw,22px); }
.gps-grid--cats{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.gps-grid--products{ grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }

/* ── HERO ───────────────────────────────────────────────────────────────── */

.gps-banner{ position:relative; background:var(--black); overflow:hidden; }
.gps-banner__track{ position:relative; }
.gps-banner__slide{ display:none; position:relative; min-height:clamp(440px,62vh,660px); }
.gps-banner__slide.is-active{ display:block; }

.gps-banner__media{ position:absolute; inset:0; }
.gps-banner__media img{ width:100%; height:100%; object-fit:cover; }

/* Scrim: equipment photography is busy — type over it fails contrast without one. */
.gps-banner__slide::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  /* Measured: the sub-headline reaches ~67% across, so the dark zone has to
     carry that far. Real machinery photography is high-contrast and unpredictable. */
  background:linear-gradient(100deg,
    rgba(8,8,8,.95) 0%, rgba(8,8,8,.90) 42%,
    rgba(8,8,8,.70) 64%, rgba(8,8,8,.28) 86%, rgba(8,8,8,.10) 100%);
}

.gps-banner__content{
  position:relative; z-index:2;
  max-width:var(--max); margin-inline:auto; padding:clamp(3.5rem,9vh,6rem) var(--pad);
  min-height:clamp(440px,62vh,660px);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  color:var(--white); padding-bottom:clamp(5rem,11vh,7rem);
  max-width:min(var(--max), 100%);
}
.gps-banner__content>*{ max-width:min(46rem,92%); }
.gps-banner__heading{
  font-family:var(--display); font-size:var(--step-6); font-weight:700;
  line-height:.92; letter-spacing:-.02em; margin:0; max-width:13ch; color:var(--white);
  text-shadow:0 2px 26px rgba(0,0,0,.5);
}
.gps-banner__sub{
  font-size:var(--step-1); color:rgba(255,255,255,.88);
  margin:var(--s-m) 0 var(--s-l); max-width:34ch; line-height:1.45;
  text-shadow:0 1px 14px rgba(0,0,0,.6);
}
.gps-banner__cta{ margin:0; }

/* Slide counter — a spec-sheet detail, not a decoration. */
.gps-banner__index{
  position:absolute; z-index:3; left:var(--pad); bottom:var(--s-m);
  display:flex; align-items:baseline; gap:.45em;
  font-family:var(--display); font-size:var(--step-0); font-weight:700;
  letter-spacing:.14em; color:rgba(255,255,255,.75); font-variant-numeric:tabular-nums;
}
.gps-banner__index i{ font-style:normal; color:var(--yellow); }
.gps-banner__index s{ text-decoration:none; opacity:.4; }

.gps-banner__nav{
  position:absolute; z-index:3; bottom:var(--s-l); right:var(--pad);
  display:flex; gap:8px;
}
.gps-banner__nav button{
  width:52px; height:52px; border:1px solid rgba(255,255,255,.28); background:transparent;
  color:var(--white); font-size:1.2rem; cursor:pointer; border-radius:var(--r);
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.gps-banner__nav button:hover{ background:var(--red); border-color:var(--red); }

.gps-banner__dots{
  position:absolute; z-index:3; right:var(--pad); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:10px;
}
.gps-banner__dot{
  width:3px; height:26px; padding:0; border:0; background:rgba(255,255,255,.3);
  cursor:pointer; transition:background .18s var(--ease), height .18s var(--ease);
}
.gps-banner__dot.is-active{ background:var(--yellow); height:40px; }

.gps-banner--empty{ padding:var(--s-xl); background:#fff8e5; border:1px dashed #dba617; color:var(--ink); }

/* ── Category tiles — dark, image-led, not white cards ──────────────────── */

.gps-cat{
  position:relative; display:block; text-decoration:none; color:var(--white);
  background:var(--black); border-radius:var(--r); overflow:hidden;
  min-height:300px; isolation:isolate;
}
.gps-cat__media{ position:absolute; inset:0; z-index:0; }
.gps-cat__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease); transform:scale(1.01);
}
.gps-cat::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Real photography varies wildly in brightness; the label zone needs a floor,
     not an average. Measured against the brightest tile in the set. */
  background:linear-gradient(180deg,
    rgba(8,8,8,.20) 0%, rgba(8,8,8,.45) 38%, rgba(8,8,8,.82) 72%, rgba(8,8,8,.96) 100%);
}
.gps-cat:hover .gps-cat__media img,
.gps-cat:focus-visible .gps-cat__media img{ transform:scale(1.06); }

.gps-cat__body{
  position:relative; z-index:2; height:100%; min-height:300px;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--s-m) var(--s-m) var(--s-m);
}
.gps-cat__name{
  display:block; font-family:var(--display); font-weight:700;
  font-size:var(--step-2); line-height:1; text-transform:uppercase; color:var(--white);
  text-shadow:0 2px 16px rgba(0,0,0,.7);
}
.gps-cat__subs{
  display:block; margin-top:.45em; font-size:var(--step--1);
  color:rgba(255,255,255,.80); line-height:1.4;
  text-shadow:0 1px 10px rgba(0,0,0,.8);
}
.gps-cat__go{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-top:var(--s-m);
  border:1px solid rgba(255,255,255,.35); color:var(--white);
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.gps-cat:hover .gps-cat__go{ background:var(--red); border-color:var(--red); }

/* ── Product cards — spec-sheet, rules not boxes ────────────────────────── */

.gps-card{
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  background:var(--white); border:1px solid var(--n150); border-radius:var(--r);
  overflow:hidden; transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.gps-card:hover{ border-color:var(--ink); box-shadow:0 12px 30px rgba(17,17,17,.10); }
.gps-card__media{
  position:relative; display:block; aspect-ratio:4/3; background:var(--n50); overflow:hidden;
}
.gps-card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .45s var(--ease);
}
.gps-card:hover .gps-card__media img{ transform:scale(1.045); }
.gps-card__brand{
  position:absolute; z-index:2; top:12px; left:12px;
  background:var(--white); color:var(--ink);
  font-family:var(--text); font-size:var(--step--2); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; padding:5px 9px; border-radius:var(--r);
}
.gps-card__body{
  display:flex; flex-direction:column; gap:.3em; padding:var(--s-m) var(--s-m) var(--s-s);
  flex:1;
}
.gps-card__title{
  font-family:var(--display); font-weight:700; font-size:var(--step-1);
  line-height:1.05; text-transform:uppercase;
}
.gps-card__power{
  font-size:var(--step--1); color:var(--n500); font-weight:600;
  font-variant-numeric:tabular-nums;
}
.gps-card__go{
  margin-top:auto; padding-top:var(--s-s); border-top:1px solid var(--n150);
  margin-inline:calc(var(--s-m) * -1); padding-inline:var(--s-m);
  color:var(--red); font-size:var(--step--1); font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
}

/* ── Stats — the dark band that breaks the scroll ───────────────────────── */

.gps-sec--stats{ background:var(--black); color:var(--white); padding-block:clamp(3rem,6vw,5rem); }
.gps-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--s-m);
}
.gps-stat{ padding-left:var(--s-m); border-left:2px solid var(--n700); }
.gps-stat:first-child{ border-left-color:var(--red); }
.gps-stat__value{
  display:block; font-family:var(--heavy); font-weight:900;
  font-size:var(--step-5); line-height:.88; color:var(--white);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.gps-stat__label{
  display:block; margin-top:.7em; font-size:var(--step--2); font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--n500);
}

/* ── Brand wall — quiet texture, not a feature ──────────────────────────── */

.gps-brands{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:1px; background:var(--n150); border:1px solid var(--n150);
}
.gps-brand{
  display:flex; align-items:center; justify-content:center; min-height:104px;
  background:var(--white); text-decoration:none; padding:var(--s-s); text-align:center;
  transition:background .18s var(--ease);
}
.gps-brand:hover{ background:var(--n50); }
.gps-brand__name{
  font-family:var(--display); font-weight:700; font-size:var(--step-0);
  color:var(--n500); text-transform:uppercase; letter-spacing:.06em;
  transition:color .18s var(--ease);
}
.gps-brand:hover .gps-brand__name{ color:var(--ink); }

/* ── CTA band — the single loudest element on the page ──────────────────── */

.gps-cta{ background:var(--red); color:var(--white); }
.gps-cta__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s-l); max-width:var(--max); margin-inline:auto;
}
.gps-cta__title{ color:var(--white); font-size:var(--step-4); margin:0; max-width:18ch; }
.gps-cta__text{ margin:var(--s-s) 0 0; font-size:var(--step-0); max-width:46ch; color:rgba(255,255,255,.9); }
.gps-cta .gps-btn--primary{ background:var(--white); color:var(--red); border-color:var(--white); }
.gps-cta .gps-btn--primary:hover{ background:var(--black); color:var(--white); border-color:var(--black); }

/* ── Page header ────────────────────────────────────────────────────────── */

.gps-phead{
  background:var(--black); color:var(--white);
  padding:clamp(3rem,7vw,5.5rem) var(--pad) clamp(2.5rem,5vw,4rem);
  position:relative;
}
.gps-phead__inner{ max-width:var(--max); margin-inline:auto; }
.gps-phead__title{ color:var(--white); font-size:var(--step-5); margin:0; max-width:20ch; }
.gps-phead__desc{ color:var(--n300); max-width:56ch; margin:var(--s-m) 0 0; font-size:var(--step-0); }
.gps-crumbs{
  font-size:var(--step--2); color:var(--n500); margin-bottom:var(--s-m);
  letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
.gps-crumbs a{ color:var(--n300); text-decoration:none; }
.gps-crumbs a:hover{ color:var(--yellow); }

/* ── Single product ─────────────────────────────────────────────────────── */

.gps-product{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4.5rem);
  align-items:start;   /* without this the media column stretches and leaves a void */
}
.gps-product__media{ position:sticky; top:24px; }
.gps-product__media img{ width:100%; border:1px solid var(--n150); border-radius:var(--r); }
.gps-product__meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s-m); }
.gps-chip{
  display:inline-block; padding:6px 12px; border:1px solid var(--n300);
  font-family:var(--text); font-size:var(--step--2); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; border-radius:var(--r);
  text-decoration:none; color:var(--ink);
}
.gps-chip--brand{ background:var(--black); color:var(--white); border-color:var(--black); }
.gps-product__info h2{ font-size:var(--step-2); margin-top:var(--s-l); }

.gps-specs-table{ width:100%; border-collapse:collapse; margin:var(--s-m) 0; }
.gps-specs-table th,.gps-specs-table td{
  text-align:left; padding:.85em 0; border-bottom:1px solid var(--n150);
  font-size:var(--step--1); font-variant-numeric:tabular-nums;
}
.gps-specs-table th{
  width:46%; font-weight:600; color:var(--n500);
  letter-spacing:.06em; text-transform:uppercase; font-size:var(--step--2);
}
.gps-specs-table td{ font-weight:600; }

/* ── Forms ──────────────────────────────────────────────────────────────── */

.gps-form{ display:grid; gap:var(--s-s); }
.gps-form__row{ display:grid; gap:6px; }
.gps-form label{
  font-size:var(--step--2); font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--n500);
}
.gps-form input,.gps-form textarea{
  width:100%; padding:.9em 1em; border:1px solid var(--n300); border-radius:var(--r);
  font:inherit; font-size:var(--step-0); background:var(--white); color:var(--ink);
}
.gps-form input:focus,.gps-form textarea:focus{ border-color:var(--ink); }
.gps-form button{ justify-self:start; margin-top:var(--s-xs); }
/* Honeypot — hidden from people, visible to bots. */
.gps-hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; }
/* Errors carry TEXT, never colour alone. */
.gps-form__errors{ background:#fff0f0; border-left:3px solid var(--red); padding:var(--s-s) var(--s-m); }
.gps-form__errors ul{ margin:0; padding-left:1.1em; }
.gps-form__ok{ background:#f1faf3; border-left:3px solid #067a2e; padding:var(--s-m); margin-bottom:var(--s-m); }
.gps-form__about{
  background:var(--white); border-left:3px solid var(--yellow);
  padding:.7em 1em; margin:0; font-size:var(--step--1);
}
.gps-enquiry-box{
  background:var(--n50); border:1px solid var(--n150);
  padding:clamp(1.4rem,3vw,2.2rem); border-radius:var(--r);
}
.gps-enquiry-box h2{ margin-top:0; font-size:var(--step-2); }

/* ── Interior page content ──────────────────────────────────────────────── */

.gps-page{ max-width:68ch; }
.gps-page h2{ font-size:var(--step-3); margin-top:1.4em; }
.gps-page ul{ padding-left:1.15em; }
.gps-page li{ margin-bottom:.45em; }
.gps-lead{ font-size:var(--step-1); line-height:1.45; color:var(--n700); }

/* The parent theme wraps pages in a narrow container and prints a title; our
   sections are full-bleed and manage their own padding. */
.gps-sec,.gps-phead,.gps-banner,.gps-cta{ width:100%; max-width:none; }
.page-content,.site-main,.entry-content{ max-width:none; padding:0; margin:0; }
.page-header{ display:none; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.gps-footer{ background:var(--black); color:var(--n500); padding:0 var(--pad); }
.gps-footer__cols{
  max-width:var(--max); margin-inline:auto; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--s-l); padding:var(--s-2xl) 0 var(--s-xl);
}
.gps-footer h3{
  color:var(--white); font-family:var(--text); font-size:var(--step--2);
  font-weight:700; letter-spacing:.19em; text-transform:uppercase; margin-bottom:var(--s-m);
}
.gps-footer a{ color:var(--n300); text-decoration:none; }
.gps-footer a:hover{ color:var(--yellow); }
.gps-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.65em; font-size:var(--step--1); }
.gps-footer p{ font-size:var(--step--1); line-height:1.65; margin:0 0 .8em; }
.gps-footer__bottom{
  max-width:var(--max); margin-inline:auto; padding:var(--s-m) 0;
  border-top:1px solid var(--n800); font-size:var(--step--2);
  display:flex; flex-wrap:wrap; gap:var(--s-s); justify-content:space-between;
  letter-spacing:.07em; text-transform:uppercase;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width:960px){
  .gps-product{ grid-template-columns:1fr; }
  .gps-product__media{ position:static; }
}

@media (max-width:767px){
  .gps-burger{ display:block; }
  .gps-nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0; background:var(--white);
    padding:var(--s-xs) var(--pad) var(--s-m);
    box-shadow:0 18px 36px rgba(17,17,17,.14); border-bottom:1px solid var(--n150);
  }
  .gps-nav.is-open{ display:flex; }
  .gps-nav a{ padding:.95em 0; border-bottom:1px solid var(--n150); font-size:var(--step-0); }
  .gps-nav a::after{ display:none; }
  .gps-header__phone{ display:none; }

  /* Measured at 375px: logo + burger + full-size CTA overflowed by 23px and
     produced horizontal scroll. Shrink the CTA rather than hiding the overflow. */
  .gps-header__bar{ gap:var(--s-xs); padding-inline:var(--s-s); }
  .gps-header__cta .gps-btn{ padding:.8em 1.05em; font-size:var(--step--2); letter-spacing:.06em; }
  .gps-header__cta .gps-btn::after{ display:none; }
  .gps-burger{ padding:8px 4px; }

  /* Side dots and bottom arrows both collide with type at 390px — swipe instead. */
  .gps-banner__dots,.gps-banner__nav{ display:none; }
  .gps-banner__slide,.gps-banner__content{ min-height:0; }
  .gps-banner__content{ padding:clamp(2.5rem,12vh,4rem) var(--pad) 4.25rem; }
  .gps-banner__slide::after{
    background:linear-gradient(180deg, rgba(10,10,10,.34) 0%, rgba(10,10,10,.72) 45%, rgba(10,10,10,.95) 100%);
  }
  .gps-banner__heading{ max-width:100%; }
  .gps-banner__index{ bottom:var(--s-m); }

  .gps-cat,.gps-cat__body{ min-height:250px; }
  .gps-cta__inner{ flex-direction:column; align-items:flex-start; }
  .gps-stat{ padding-left:var(--s-s); }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.1 — ported from the Stitch exploration (docs/reference/stitch/)
   Spec eyebrows, numbered sections, in-card spec tables, availability chips,
   stat units. Everything here is field-driven; no copy is hard-coded.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Numbered section marker: ■ .01 / CORE INVENTORY ────────────────────── */

.gps-eyebrow__num{ font-weight:800; letter-spacing:.06em; }
.gps-eyebrow__sep{ opacity:.45; margin:0 .1em; font-weight:400; }

/* ── Hero: two actions. The second is deliberately quieter — people who are
      not ready to enquire still want the catalogue. ──────────────────────── */

.gps-banner__cta{ display:flex; flex-wrap:wrap; gap:var(--s-s); align-items:center; }

/* ── Category tile: the specification range, above the name ─────────────── */

.gps-cat__spec{
  display:block; margin-bottom:.55em;
  font-family:var(--text); font-size:var(--step--2); font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--yellow);
  text-shadow:0 1px 10px rgba(0,0,0,.8);
}

/* ── Product card: model, availability, and a three-row spec preview ─────── */

.gps-card__stock{
  position:absolute; z-index:2; top:12px; right:12px;
  background:var(--yellow); color:var(--black);
  font-family:var(--text); font-size:var(--step--2); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:5px 9px;
  border-radius:var(--r);
}
.gps-card__model{
  font-family:var(--text); font-size:var(--step--2); font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--n500);
  font-variant-numeric:tabular-nums;
}
.gps-card__specs{
  display:block; margin-top:var(--s-s);
  border-top:1px solid var(--n150);
}
.gps-card__spec{
  display:flex; justify-content:space-between; gap:var(--s-s);
  padding:.5em 0; border-bottom:1px solid var(--n150);
  font-size:var(--step--2); line-height:1.3;
}
.gps-card__spec-k{
  color:var(--n500); letter-spacing:.08em; text-transform:uppercase;
  font-weight:600; flex:none; max-width:52%;
}
.gps-card__spec-v{
  color:var(--ink); font-weight:700; text-align:right;
  font-variant-numeric:tabular-nums;
}

/* ── Stats: the unit is set apart, so it reads as data not decoration ────── */

.gps-stat__eyebrow{
  display:block; margin-bottom:.7em; font-family:var(--text);
  font-size:var(--step--2); font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--red);
}
.gps-stat__unit{
  font-style:normal; font-size:.4em; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; margin-left:.25em; color:var(--yellow);
  vertical-align:.55em;
}

@media (max-width:767px){
  .gps-banner__cta{ flex-direction:column; align-items:stretch; }
  .gps-banner__cta .gps-btn{ justify-content:center; }
  .gps-card__spec-k{ max-width:56%; }
}