/* ============================================================
   Auto Protect Security & Sounds Ltd
   Design system — "Dark Showcase": premium dark slate + action red.
   Feature-Rich Showcase structure, Outfit headings / Rubik body,
   tactile cards with depth. Dark theme, retail-grade.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,800;9..144,900&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#06080b;
  --bg-2:#0a0e14;
  --surface:#10161f;
  --surface-2:#171f2b;
  --slate:#0b1220;
  --ink:#f6f8fb;
  --ink-2:#ccd6e3;
  --muted:#8d9bad;
  /* Was #5d6b7d, which measured 3.0–3.7:1 on these backgrounds — under the 4.5:1
     AA floor everywhere it was used (breadcrumbs, the contact card labels, the
     footer line, "TTD"). This holds 4.9:1 at worst and still reads a clear step
     quieter than --muted above it. */
  --muted-2:#7f8d9e;
  --line:rgba(226,232,240,.08);
  --line-2:rgba(226,232,240,.16);
  --red:#ef4444;
  --red-deep:#c81e1e;
  --red-hot:#ff5a3c;
  --red-ink:#ff8a75;
  --red-bright:#ff8a75;
  --red-soft:rgba(239,68,68,.13);
  --glow:rgba(239,68,68,.45);
  /* White on --red is only 3.76:1, and on a #ff5a3c→#ef4444 gradient just 3.1:1 —
     both fail AA. These two are the same red family taken deep enough that white
     clears 4.5:1, and are used wherever white text sits ON a red fill (buttons,
     the ticker, badges, chips). --red itself stays bright for the accent work it
     does everywhere else: rules, borders, icons, glows. */
  --red-fill:#d92d20;
  --grad-red-fill:linear-gradient(135deg,#d92d20,#c81e1e 55%,#b81a1a);
  --wa:#22c55e;
  --wa-deep:#16a34a;
  --maxw:1200px;
  --maxw-wide:1440px;
  /* The single side gutter for every .wrap on the site. One token so a section
     can never quietly disagree with the header about where the edge is. */
  --gutter:28px;
  --r:14px;
  --r-lg:20px;
  --ease:cubic-bezier(.22,.61,.28,1);
  --sh-sm:0 1px 2px rgba(0,0,0,.4);
  --sh:0 6px 16px -6px rgba(0,0,0,.55);
  --sh-lg:0 18px 40px -14px rgba(0,0,0,.7);
  --sh-xl:0 40px 90px -24px rgba(0,0,0,.85);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink-2);
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;position:relative;
}
/* layered ambient light — gives the black depth instead of flatness */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(58% 44% at 82% -8%,rgba(255,90,60,.16),transparent 62%),
    radial-gradient(46% 38% at 6% 22%,rgba(56,84,168,.10),transparent 66%),
    radial-gradient(70% 50% at 50% 104%,rgba(239,68,68,.07),transparent 60%);
}
/* fine film grain — kills banding on the big dark gradients */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
/* Reachable by screen reader, invisible on screen. Used for the section heading
   above card grids that are laid out with no visible heading: without it a page
   goes straight from its h1 to the h3 on the first card, so anyone navigating by
   heading gets no signal that a list of products started. */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
::selection{background:var(--red-fill);color:#fff}

/* Keyboard users landed on the logo and then had to tab through the whole header
   on every page before reaching the content. This jumps straight past it; it is
   off-screen until focused, which is the only time it is any use. */
.skiplink{position:fixed;top:10px;left:10px;z-index:100;transform:translateY(-160%);
  background:var(--surface-2);color:var(--ink);border:1.5px solid var(--red);
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:15px;
  padding:12px 20px;border-radius:11px;box-shadow:var(--sh-lg);transition:transform .2s var(--ease)}
.skiplink:focus{transform:translateY(0)}
/* the header is sticky, so an un-offset #main jump hides the first heading behind it */
#main{scroll-margin-top:116px}

/* A visible focus ring everywhere, matched to the brand red rather than the
   browser default, which was invisible against these dark surfaces. :focus-visible
   keeps it off for mouse clicks. */
:focus-visible{outline:3px solid var(--red-ink);outline-offset:3px}

h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:800;color:var(--ink);
  line-height:1.06;letter-spacing:-.02em}
h3,h4{font-weight:700}

/* Fraunces draws a swashy display ampersand. It is a signature glyph in the hero
   and section headings, but below roughly 24px the loops close up and it reads as
   an ink blob rather than "&" — worst in card titles like "Android Radios &
   Frames". This face covers U+0026 only: `local()` finds whichever plain sans the
   OS already has, so small headings get a legible ampersand with no extra
   download, while every other character still comes from Fraunces. */
@font-face{
  font-family:'AmpSans';
  src:local('Segoe UI'),local('Helvetica Neue'),local('Helvetica'),local('Arial'),local('Liberation Sans');
  unicode-range:U+0026;
  font-display:swap;
}
.catcard h3,.cat h3,.pcard h3,.prow h3,.tier h3,.step h3,.reason h3,.fcard h3,
.bcard h3{font-family:'AmpSans','Fraunces',Georgia,serif}
/* A word longer than its container does not widen the element's box, but it does
   widen the document — which is a sideways scroll on the whole page and nothing
   visibly wrong to point at. "Straightforward," in an about-page h2 did exactly
   that at 320px. Let long words break instead. */
h1,h2,h3,h4,p,li,a,dd,dt,figcaption{overflow-wrap:break-word}
/* padding-inline, never the `padding` shorthand: an inner rule that sets its own
   vertical padding with the shorthand (.pagehead-inner, .band-inner, .hero-inner
   all did) resets the side gutter to 0 and puts the text against the screen
   edge. Invisible on desktop, where max-width leaves slack anyway; on a phone it
   is the whole page. Inner rules use padding-block for the same reason. */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

.kicker{display:inline-flex;align-items:center;gap:9px;font-family:'Hanken Grotesk',sans-serif;
  font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--red-ink)}
.kicker::before{content:"";width:18px;height:3px;background:var(--red);border-radius:3px}
.muted{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font-family:'Hanken Grotesk',sans-serif;
  font-weight:600;font-size:15.5px;letter-spacing:.005em;overflow:hidden;
  padding:16px 28px;border-radius:12px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s var(--ease),background .18s,border-color .18s,color .18s,box-shadow .28s}
.btn svg{width:18px;height:18px;position:relative;z-index:1}
.btn>*{position:relative;z-index:1}
/* light sweeps across the button on hover */
.btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transition:left .55s var(--ease)}
.btn:hover::after{left:130%}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-red{background:var(--grad-red-fill);color:#fff;box-shadow:0 14px 34px -12px var(--glow),inset 0 1px 0 rgba(255,255,255,.22)}
.btn-red:hover{transform:translateY(-3px);box-shadow:0 24px 50px -14px var(--glow),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-line{border-color:rgba(255,255,255,.22);color:var(--ink);background:rgba(255,255,255,.04);backdrop-filter:blur(10px)}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.1);transform:translateY(-3px)}
.btn-wa{background:linear-gradient(135deg,#34d97a,#22c55e 45%,#15a34a);color:#04240f;
  box-shadow:0 14px 34px -12px rgba(34,197,94,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-wa:hover{color:#032a11;transform:translateY(-3px);box-shadow:0 24px 50px -14px rgba(34,197,94,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-lg{padding:19px 34px;font-size:16.5px;border-radius:13px}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(12,15,20,.78);
  backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--line);
  transition:background .3s,box-shadow .3s,border-color .3s}
.site-header.scrolled{background:rgba(12,15,20,.96);box-shadow:var(--sh);border-color:var(--line-2)}
/* The header carries the real logo artwork now, not a car icon beside a retyped
   wordmark, so it is sized around the lockup: 104px gives the 506x227 image a
   72px height (~160px wide) with room to breathe, and the condensed scrolled
   state keeps the same proportions. */
.hdr-inner{display:flex;align-items:center;justify-content:space-between;height:104px;transition:height .3s var(--ease)}
.site-header.scrolled .hdr-inner{height:86px}
.logo{display:flex;align-items:center;gap:12px}
/* Height-locked with width:auto so the lockup always keeps its own proportions —
   it must never be stretched or cropped. */
.logo img.lockup{width:auto;height:72px;transition:height .3s var(--ease),transform .45s var(--ease)}
.site-header.scrolled .logo img.lockup{height:58px}
.logo:hover img.lockup{transform:scale(1.03)}
.nav{display:flex;align-items:center;gap:32px}
.nav a{font-family:'Hanken Grotesk',sans-serif;font-size:15px;font-weight:600;color:var(--muted);
  transition:.15s;position:relative;padding:6px 0}
.nav a:hover,.nav a.active{color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2.5px;background:var(--red);
  border-radius:3px;transition:right .28s var(--ease)}
.nav a:hover::after,.nav a.active::after{right:0}
.hdr-cta{display:flex;align-items:center;gap:16px}
.hdr-phone{font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em;color:var(--ink);line-height:1}
/* This caption tells people the number takes WhatsApp, which is how most of them
   get in touch, so it is worth a readable size. */
.hdr-phone span{color:var(--muted-2);font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:10.5px;
  display:block;letter-spacing:.1em;margin-top:3px;text-transform:uppercase}
.burger{display:none;background:none;border:none;color:var(--ink);cursor:pointer;
  padding:11px;margin:-11px;align-items:center;justify-content:center}
@media(max-width:940px){
  /* The closed menu is only slid off-screen, so without visibility:hidden its four
     links stayed in the tab order — pressing Tab from the logo sent focus to a link
     nobody could see. visibility is transitioned with a delay so it flips to hidden
     only after the slide-up finishes, and instantly back on open. */
  /* The open menu hangs off the bottom of the header, so its inset has to match
     the header height at this breakpoint exactly — a mismatch leaves a seam. */
  .hdr-inner,.site-header.scrolled .hdr-inner{height:88px}
  .logo img.lockup,.site-header.scrolled .logo img.lockup{height:60px}
  .nav{position:fixed;inset:88px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
    /* Was rgba(16,21,29,.98) + backdrop-filter. The 2% let the hero headline
       ghost through the open menu — faint, but measurable and visible on the
       big display type. A full-screen menu over a photograph wants to be solid;
       the translucent glass treatment stays on .site-header, which is a thin
       bar where it reads as intended. */
    background:var(--surface);border-bottom:1px solid var(--line);padding:8px 28px 20px;
    transform:translateY(-140%);visibility:hidden;
    transition:transform .38s var(--ease),visibility 0s linear .38s;box-shadow:var(--sh-lg)}
  .nav.open{transform:translateY(0);visibility:visible;transition:transform .38s var(--ease),visibility 0s}
  .nav a{width:100%;padding:15px 0;font-size:18px;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav a.active{color:var(--red-ink)}
  .hdr-cta .hdr-phone{display:none}
  .burger{display:flex}
}
/* Below ~480px the lockup and a full-width header WhatsApp button no longer both
   fit next to the burger. Drop the WA button (the floating WhatsApp bubble and the
   hero CTA already cover that action) and step the lockup down so the mobile header
   stays a single clean row at any width. */
@media(max-width:480px){
  .hdr-cta .btn-wa{display:none}
  .hdr-inner,.site-header.scrolled .hdr-inner{height:74px}
  .logo img.lockup,.site-header.scrolled .logo img.lockup{height:50px}
  .nav{inset:74px 0 auto 0}
}

/* ---------- hero (home) — full-bleed cinematic ---------- */
.hero{position:relative;min-height:94svh;display:flex;align-items:flex-end;overflow:hidden;
  border-bottom:1px solid var(--line);isolation:isolate}
.hero-photo{position:absolute;inset:0;z-index:0}
/* Framed for the shop interior: pulled right of centre so the display case and
   the radio wall stay in shot behind the type, and the heavy left scrim falls on
   the emptier part of the room rather than over the gear. */
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:58% 46%;
  transform:scale(1.06);animation:heroDrift 24s ease-in-out infinite alternate}
@keyframes heroDrift{to{transform:scale(1.13) translate3d(-1.4%,-1%,0)}}
/* scrim: darkens left-to-right so the type always has contrast, plus a floor gradient */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(4,6,9,.94) 0 26%,rgba(4,6,9,.72) 48%,rgba(4,6,9,.34) 72%,rgba(4,6,9,.55)),
    linear-gradient(0deg,var(--bg) 1%,rgba(6,8,11,.55) 26%,transparent 62%)}
/* red light leak from the top right, echoing the dash glow in the photo */
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(46% 42% at 88% 6%,rgba(255,90,60,.3),transparent 64%);mix-blend-mode:screen}
.hero-inner{position:relative;z-index:2;width:100%;padding-block:120px 0}
/* The "Open Mon to Sat in Montrose, Chaguanas" pill that sat above the h1 was
   removed; .hero-tag, its pulsing dot and the livedot keyframe went with it.
   The hours still appear in the footer, on About and on Contact. */
.hero h1{font-size:clamp(3rem,8.2vw,7rem);font-weight:900;margin:0 0 26px;max-width:13ch;
  letter-spacing:-.045em;line-height:.92;text-wrap:balance;
  text-shadow:0 18px 60px rgba(0,0,0,.75)}
.hero h1 .r{background:linear-gradient(100deg,#ff8a75,#ef4444 62%);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.hero p{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--ink-2);max-width:52ch;margin-bottom:36px;line-height:1.55}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
/* trust bar welded to the bottom of the hero */
.hero-trust{margin-top:64px;border-top:1px solid rgba(255,255,255,.12);
  display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.hero-trust div{padding:26px 26px 34px;border-left:1px solid rgba(255,255,255,.09)}
.hero-trust div:first-child{border-left:none;padding-left:0}
.hero-trust b{display:block;font-family:'Fraunces',Georgia,serif;font-weight:900;font-size:clamp(1.7rem,2.6vw,2.5rem);
  line-height:1;color:#fff;letter-spacing:-.03em}
.hero-trust b em{font-style:normal;color:var(--red-ink)}
.hero-trust span{display:block;margin-top:9px;font-size:13px;color:var(--muted);font-weight:500;line-height:1.4}
@media(max-width:860px){
  .hero{min-height:auto}
  .hero-inner{padding-block:104px 0}
  .hero::before{background:linear-gradient(180deg,rgba(4,6,9,.86) 0 40%,rgba(4,6,9,.9)),linear-gradient(0deg,var(--bg) 2%,transparent 55%)}
  .hero-trust{grid-template-columns:1fr 1fr;margin-top:44px}
  .hero-trust div{padding:20px 18px}
  .hero-trust div:nth-child(odd){border-left:none;padding-left:0}
  .hero-trust div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.09)}
}
@media(prefers-reduced-motion:reduce){.hero-photo img{animation:none;transform:none}}

/* ---------- ticker ---------- */
.ticker{background:var(--red-fill);overflow:hidden;padding:15px 0}
.ticker-track{display:flex;width:max-content;animation:tick 32s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:1.05rem;color:#fff;
  padding:0 26px;white-space:nowrap;display:inline-flex;align-items:center;letter-spacing:.01em;
  border-left:1px solid rgba(255,255,255,.28)}
.ticker-track span:first-child{border-left:none}
@keyframes tick{to{transform:translateX(-50%)}}

/* legacy brand rail (interior) — quiet static row */
.brandrail{border-bottom:1px solid var(--line);background:var(--bg-2);padding:24px 0;overflow:hidden}
.brandrail-track{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 38px;
  max-width:var(--maxw);margin:0 auto;padding:0 28px}
.brandrail-track span{font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-2);white-space:nowrap;transition:color .2s}
.brandrail-track span:hover{color:var(--ink)}
.brandrail-track span:nth-child(n+11){display:none}

/* ---------- interior page head ---------- */
.pagehead{border-bottom:1px solid var(--line);position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.pagehead::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(50% 120% at 88% 0%,rgba(239,68,68,.12),transparent 60%)}
.pagehead-inner{padding-block:70px 58px;position:relative;z-index:1}
.pagehead h1{font-size:clamp(2.3rem,4.8vw,3.6rem);font-weight:800;margin:18px 0 14px;letter-spacing:-.03em}
.pagehead p{color:var(--muted);max-width:58ch;font-size:1.12rem}
.crumb{font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.05em;
  color:var(--muted-2);text-transform:uppercase}
.crumb a:hover{color:var(--red-ink)}

/* ---------- section frame ---------- */
.section{padding:112px 0;position:relative}
.section.tight{padding:60px 0}
.section-head{max-width:60ch;margin-bottom:52px}
.section-head h2{font-size:clamp(2.3rem,4.6vw,3.9rem);font-weight:900;margin:16px 0 16px;
  letter-spacing:-.04em;line-height:.98;text-wrap:balance}
.section-head p{color:var(--muted);font-size:1.12rem;max-width:56ch}
@media(max-width:700px){.section{padding:76px 0}}

/* full-bleed statement band — breaks the card-grid rhythm */
.bleed{position:relative;min-height:60vh;display:flex;align-items:center;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bleed-photo{position:absolute;inset:0;z-index:0}
.bleed-photo img{width:100%;height:100%;object-fit:cover;object-position:center 46%}
.bleed::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(92deg,rgba(4,6,9,.93) 0 34%,rgba(4,6,9,.66) 58%,rgba(4,6,9,.3))}
.bleed .wrap{position:relative;z-index:2;width:100%;padding-top:70px;padding-bottom:70px}
.bleed h2{font-size:clamp(2.1rem,4.4vw,3.6rem);font-weight:900;letter-spacing:-.04em;line-height:1;
  max-width:16ch;color:#fff;text-shadow:0 14px 44px rgba(0,0,0,.7)}
.bleed p{margin-top:20px;max-width:48ch;color:var(--ink-2);font-size:1.1rem}
.bleed .btn{margin-top:30px}
.alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section.dark{background:linear-gradient(120deg,var(--slate),#111a2e);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.section.dark::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 130% at 15% 50%,rgba(239,68,68,.16),transparent 55%)}
.section.dark>*{position:relative}

/* ---------- stats band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:40px 28px;border-left:1px solid var(--line)}
.stat:first-child{border-left:none}
.stat b{font-family:'Fraunces',Georgia,serif;font-weight:800;font-size:2.9rem;line-height:1;display:block;color:var(--ink);letter-spacing:-.02em}
.stat b em{color:var(--red-ink);font-style:normal}
.stat span{display:block;margin-top:11px;font-size:14px;color:var(--muted);font-weight:500}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}.stat{border-top:1px solid var(--line)}.stat:nth-child(-n+2){border-top:none}.stat:nth-child(odd){border-left:none}}

/* ---------- category cards (home + products) — rebuilt ---------- */
.cats,.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:840px){.cats,.catgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.cats,.catgrid{grid-template-columns:1fr}}
.cat,.catcard{position:relative;background:var(--surface);padding:34px 30px 30px;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .26s var(--ease),box-shadow .26s,border-color .26s,background .26s}
.catcard{min-height:250px}
/* red accent bar that grows on hover */
.cat::before,.catcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--red),var(--red-deep));transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)}
.cat:hover,.catcard:hover{transform:translateY(-6px);background:var(--surface-2);border-color:rgba(239,68,68,.4);
  box-shadow:var(--sh-lg),0 0 0 1px rgba(239,68,68,.12)}
.cat:hover::before,.catcard:hover::before{transform:scaleY(1)}
.cat .cnum{display:none}
.cat .ci,.catcard .ci{width:52px;height:52px;padding:13px;border-radius:14px;background:var(--red-soft);color:var(--red-ink);
  margin-bottom:22px;transition:transform .3s var(--ease),background .3s}
.cat:hover .ci,.catcard:hover .ci{transform:translateY(-2px) scale(1.06);background:rgba(239,68,68,.2)}
.cat h3,.catcard h3{font-size:1.42rem;font-weight:700;margin-bottom:10px;letter-spacing:-.015em}
.cat p,.catcard p{color:var(--muted);font-size:14.5px;flex:1}
.catcard .eg{display:inline-block;align-self:flex-start;margin:16px 0 20px;font-family:'Hanken Grotesk',sans-serif;font-size:11.5px;
  font-weight:600;letter-spacing:.02em;color:var(--red-ink);background:var(--red-soft);border:1px solid rgba(239,68,68,.2);
  padding:5px 12px;border-radius:100px}
.cat .more,.catcard .go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:'Hanken Grotesk',sans-serif;
  font-size:13.5px;font-weight:600;color:var(--red-ink)}
.cat .more svg,.catcard .go svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.cat:hover .more svg,.catcard:hover .go svg{transform:translateX(5px)}

/* ---------- product cards ---------- */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:860px){.products{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.products{grid-template-columns:1fr}}
.pcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:rgba(239,68,68,.35)}
/* dark product staging with a spotlight — replaces the white boxes that made
   scraped supplier shots look mismatched next to each other */
.pcard .stage{aspect-ratio:5/4;position:relative;overflow:hidden;padding:30px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(72% 62% at 50% 34%,#26313f 0%,#141c27 46%,#0b1017 100%)}
.pcard .stage::before{content:"";position:absolute;left:50%;top:46%;width:76%;height:60%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(255,138,117,.24),transparent 72%);filter:blur(6px)}
.pcard .stage::after{content:"";position:absolute;left:50%;bottom:12%;width:58%;height:14px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(0,0,0,.72),transparent 76%);filter:blur(5px)}
.pcard .stage img{position:relative;z-index:1;max-height:100%;width:auto;object-fit:contain;
  transition:transform .45s var(--ease);
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.6)) drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.pcard:hover .stage img{transform:scale(1.06)}
.pcard .brand{position:absolute;top:14px;left:14px;font-family:'Hanken Grotesk',sans-serif;font-size:11px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--red-fill);
  padding:5px 12px;border-radius:100px;box-shadow:0 6px 14px -4px var(--glow)}
.pcard .pbody{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.pcard .model{font-family:'Hanken Grotesk',sans-serif;font-size:12px;color:var(--red-ink);font-weight:600;
  letter-spacing:.03em;margin-bottom:8px;text-transform:uppercase}
.pcard h3{font-size:1.35rem;font-weight:700;margin-bottom:10px;letter-spacing:-.015em}
.pcard p{color:var(--muted);font-size:14.5px;flex:1}
.specs{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 18px}
.specs span{font-family:'Hanken Grotesk',sans-serif;font-size:11.5px;font-weight:500;letter-spacing:.01em;color:var(--ink-2);
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:100px;padding:4px 11px}
.pcard .ask{font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.pcard .ask svg{width:16px;height:16px;color:var(--wa);transition:transform .25s var(--ease)}
.pcard .ask:hover{color:var(--red-ink)}.pcard .ask:hover svg{transform:translateX(4px)}

/* ---------- product rows (category pages) ---------- */
.prow{display:grid;grid-template-columns:132px 1fr auto;gap:28px;align-items:center;
  padding:26px;margin-bottom:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);transition:transform .22s var(--ease),box-shadow .22s,border-color .22s}
.prow:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:rgba(239,68,68,.35)}
.prow .picon{width:132px;height:104px;border:1px solid var(--line);border-radius:12px;
  display:flex;align-items:center;justify-content:center;background:var(--surface-2);position:relative;overflow:hidden}
.prow .picon svg{width:40px;height:40px;color:var(--red-ink)}
.prow .picon img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.prow h3{font-size:1.4rem;font-weight:700;margin-bottom:6px;letter-spacing:-.015em}
.prow p{color:var(--muted);font-size:15px;max-width:60ch}
.prow .rlink{white-space:nowrap}
/* Grid items default to min-width:auto, so the 1fr column refuses to shrink below
   its longest word and shoves the row past the viewport — a sideways scroll on
   320px phones. min-width:0 lets it shrink; break-word handles model names that
   are one long unbreakable token. */
.prow>*{min-width:0}
.prow h3,.prow p{overflow-wrap:break-word}
@media(max-width:680px){
  .prow{grid-template-columns:64px 1fr;gap:16px;padding:18px}
  .prow .picon{width:64px;height:64px}.prow .picon svg{width:26px;height:26px}
  .prow .rlink{grid-column:2;justify-self:start}
}
/* At the narrowest sizes the button's own nowrap text is wider than its column. */
@media(max-width:380px){.prow .rlink{white-space:normal}}

/* ---------- price tiers (gps.html) ----------
   The GPS trackers are the only things on the site sold at a fixed price rather
   than quoted per vehicle, so they get a card that leads with the number. Three
   across on desktop, and the middle one is marked as the one most people take.
   .tier is a flex column so the price sits at a consistent height whatever the
   heading wraps to, and the CTA always pins to the bottom edge. */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
@media(max-width:940px){.tiers{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}
.tier{position:relative;display:flex;flex-direction:column;padding:32px 28px 28px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  transition:transform .24s var(--ease),box-shadow .24s,border-color .24s}
.tier:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:rgba(239,68,68,.35)}
/* the picked tier reads as picked without a second colour: brighter surface,
   red hairline, and the badge doing the talking */
.tier.pick{background:var(--surface-2);border-color:rgba(239,68,68,.42);box-shadow:var(--sh)}
.tier-badge{position:absolute;top:-11px;left:28px;font-family:'Hanken Grotesk',sans-serif;font-size:11px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;padding:5px 12px;border-radius:100px;
  background:var(--grad-red-fill);box-shadow:0 10px 24px -10px var(--glow)}
.tier-kind{font-family:'Hanken Grotesk',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red-ink)}
.tier h3{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:10px 0 8px}
.tier>p{color:var(--muted);font-size:14.5px}
.tier-price{display:flex;align-items:baseline;gap:8px;margin:20px 0 4px;
  padding-top:20px;border-top:1px solid var(--line)}
.tier-price b{font-family:'Fraunces',Georgia,serif;font-weight:900;font-size:2.6rem;line-height:1;
  letter-spacing:-.03em;color:var(--ink)}
.tier-price span{font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;
  color:var(--muted-2)}
.tier-fitted{font-family:'Hanken Grotesk',sans-serif;font-size:13px;color:var(--muted);margin-bottom:22px}
.tier-list{list-style:none;display:grid;gap:11px;flex:1;margin-bottom:26px}
.tier-list li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.45}
.tier-list li svg{width:19px;height:19px;flex:0 0 auto;margin-top:1px;color:var(--wa)}
/* the two spec lines that make a tier different from the one below it. The tick
   stays green on every row: a red tick beside a feature the customer is getting
   reads as a cross at a glance. Brighter text and weight carry the emphasis. */
.tier-list li.key{color:var(--ink);font-weight:600}
.tier .btn{width:100%;justify-content:center}

/* the four promises that hold for every tracker, so they are stated once */
.assure{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.assure{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.assure{grid-template-columns:1fr}}
/* Direct-child selector, not `.assure div`: the cell holds a second div for the
   text, which would otherwise inherit the card's own padding, border and flex
   row and squash the label and body into two narrow columns. */
.assure>div{display:flex;gap:13px;align-items:flex-start;padding:20px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r)}
.assure>div>div{min-width:0}
.assure svg{width:22px;height:22px;flex:0 0 auto;color:var(--red-ink)}
.assure b{display:block;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:15px;color:var(--ink)}
.assure small{display:block;margin-top:4px;font-size:13.5px;color:var(--muted);line-height:1.45}

/* ---------- fit-frame stock list (frames.html) ---------- */
.ftools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:30px;padding:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)}
.fsearch{position:relative;flex:1 1 280px;min-width:0}
.fsearch svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted-2);pointer-events:none}
.fsearch input{width:100%;background:var(--bg);border:1.5px solid var(--line-2);border-radius:11px;color:var(--ink);
  padding:12px 14px 12px 42px;font-family:'Hanken Grotesk',sans-serif;font-size:15.5px;outline:none;transition:.15s}
.fsearch input::placeholder{color:var(--muted-2)}
.fsearch input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,.16)}
.fsearch input::-webkit-search-cancel-button{filter:invert(.7)}
.fchips{display:flex;gap:8px}
.chip{font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;
  background:rgba(255,255,255,.02);border:1.5px solid var(--line-2);border-radius:100px;padding:10px 17px;transition:.16s var(--ease)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--red-fill);border-color:var(--red-fill);color:#fff;box-shadow:0 8px 20px -8px var(--glow)}
.ftoggle{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-family:'Hanken Grotesk',sans-serif;
  font-size:14px;font-weight:600;color:var(--ink-2);user-select:none}
.ftoggle input{width:18px;height:18px;accent-color:var(--red);cursor:pointer;flex:0 0 auto}
.fcount{margin-left:auto;font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap}
@media(max-width:700px){.fcount{margin-left:0;width:100%}}

.brandblock{margin-bottom:44px}
.brandblock[hidden]{display:none}
.bb-head{display:flex;align-items:center;gap:20px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.bb-shot{width:118px;height:74px;flex:0 0 auto;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);
  box-shadow:var(--sh);position:relative}
.bb-shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.bb-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(6,9,13,.45))}
.brandblock:hover .bb-shot img{transform:scale(1.07)}
.bb-title h2{font-size:1.75rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.bb-title p{margin-top:7px;font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2)}
@media(max-width:520px){.bb-shot{width:84px;height:56px}.bb-title h2{font-size:1.45rem}}

/* brand chooser (frames.html) */
.brandgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:880px){.brandgrid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:520px){.brandgrid{grid-template-columns:1fr}}
.bcard{position:relative;display:flex;flex-direction:column;padding:30px 28px 26px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .26s var(--ease),box-shadow .26s,border-color .26s,background .26s}
.bcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(var(--red),var(--red-deep));transform:scaleY(0);transform-origin:top;
  transition:transform .35s var(--ease)}
.bcard:hover{transform:translateY(-6px);background:var(--surface-2);border-color:rgba(239,68,68,.4);
  box-shadow:var(--sh-lg),0 0 0 1px rgba(239,68,68,.12)}
.bcard:hover::before{transform:scaleY(1)}
.bcard-mark{display:inline-flex;align-items:center;justify-content:center;width:104px;height:104px;border-radius:24px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);margin-bottom:20px;
  transition:background .3s,border-color .3s,transform .3s var(--ease)}
.bcard:hover .bcard-mark{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.28);transform:translateY(-2px)}
.blogo{width:62px;height:62px;color:var(--ink);transition:color .3s}
.bcard:hover .blogo{color:#fff}
.bcard h3{font-size:1.55rem;font-weight:800;letter-spacing:-.02em;margin-bottom:8px}
.bcard-models{font-size:14px;color:var(--muted);flex:1;line-height:1.5}
.bcard-meta{margin-top:18px;font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;color:var(--ink-2);font-weight:600}
.bcard-meta b{font-family:'Fraunces',Georgia,serif;font-size:1.7rem;font-weight:800;color:var(--red-ink);
  letter-spacing:-.02em;margin-right:6px;line-height:1}
.bcard-meta span{color:var(--muted-2);font-weight:500}
.bcard .go{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;font-weight:600;color:var(--red-ink)}
.bcard .go svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.bcard:hover .go svg{transform:translateX(5px)}

/* brand page header */
.bhead{display:flex;align-items:center;gap:22px;margin:20px 0 16px}
.bhead-mark{display:inline-flex;align-items:center;justify-content:center;width:112px;height:112px;flex:0 0 auto;
  border-radius:20px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);box-shadow:var(--sh)}
.bhead-logo{width:70px;height:70px;color:#fff}
.brandhead h1{margin:0;font-size:clamp(2rem,4.4vw,3.2rem)}
.bhead-sub{margin-top:9px;font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2)}
.bhead-sub b{color:var(--red-ink);font-size:15px}
@media(max-width:520px){.bhead{gap:15px}.bhead-mark{width:82px;height:82px;border-radius:19px}.bhead-logo{width:50px;height:50px}}

/* other-makes strip */
.obrands{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
@media(max-width:900px){.obrands{grid-template-columns:repeat(4,1fr)}}
@media(max-width:480px){.obrands{grid-template-columns:repeat(2,1fr)}}
.obrand{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 10px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;transition:.2s var(--ease)}
.obrand:hover{background:var(--surface-2);border-color:rgba(239,68,68,.35);transform:translateY(-3px);box-shadow:var(--sh)}
.obrand-mark{width:28px;height:28px;color:var(--muted);transition:color .2s}
.obrand:hover .obrand-mark{color:#fff}
.obrand span{font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;font-weight:600;color:var(--ink-2)}

.tmnote{margin-top:28px;font-size:12.5px;line-height:1.7;color:var(--muted-2);max-width:88ch}

/* frame product cards */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.fgrid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.fcard{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm);
  transition:transform .24s var(--ease),box-shadow .24s,border-color .24s}
.fcard:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:rgba(239,68,68,.38)}
.fcard[hidden]{display:none}
.fc-shot{position:relative;aspect-ratio:4/3;overflow:hidden;
  background:radial-gradient(72% 62% at 50% 32%,#232e3d 0%,#131b26 48%,#090e15 100%)}
.fc-shot>img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.fcard:hover .fc-shot>img{transform:scale(1.06)}
.fc-shot::before{content:"";position:absolute;left:50%;top:34%;width:74%;height:56%;
  transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,138,117,.22),transparent 72%);
  filter:blur(8px);pointer-events:none}
.fc-shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,9,13,.42) 0 18%,transparent 46%)}
/* rendered fit-frame sits on the stage rather than filling the box */
.fc-shot>img.fc-kit{object-fit:contain;padding:14px 14px 20px;position:relative;z-index:1}
.fcard:hover .fc-shot>img.fc-kit{transform:scale(1.05) translateY(-3px)}
/* the real dashboard the frame drops into, kept as context */
.fc-fits{position:absolute;left:11px;bottom:11px;z-index:3;display:flex;align-items:center;gap:9px;
  padding:5px 13px 5px 5px;border-radius:100px;background:rgba(8,11,16,.74);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14)}
.fc-fits img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  filter:brightness(1.16) saturate(1.05);border:1px solid rgba(255,255,255,.18)}
.fc-fits b{font-family:'Hanken Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(255,255,255,.8);line-height:1.3}
.fc-brand,.fc-size{position:absolute;top:12px;z-index:2;font-family:'Hanken Grotesk',sans-serif;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;font-size:10.5px;padding:5px 11px;border-radius:100px}
.fc-brand{left:12px;background:rgba(10,13,18,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.16);color:#fff}
.fc-size{right:12px;background:var(--red-fill);color:#fff;letter-spacing:-.01em;font-size:13px;font-weight:800;
  text-transform:none;box-shadow:0 6px 16px -5px var(--glow)}
.fc-size-na{background:rgba(10,13,18,.72);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.16);
  color:var(--muted);cursor:help}
.fc-body{display:flex;flex-direction:column;flex:1;padding:18px 18px 16px}
.fc-body h3{font-size:1.28rem;font-weight:700;letter-spacing:-.015em;line-height:1.15}
.fc-year{margin-top:4px;font-family:'Hanken Grotesk',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--red-ink)}
.fc-fin{margin-top:10px;flex:1;font-size:14.5px;color:var(--muted)}
.fc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line)}
.pill{display:inline-flex;align-items:center;gap:7px;font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;
  font-weight:600;letter-spacing:.01em;padding:5px 12px;border-radius:100px;border:1px solid var(--line-2);
  background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.pill.s-ok{color:#4ade80;border-color:rgba(74,222,128,.3);background:rgba(74,222,128,.1)}
.pill.s-low{color:#fbbf24;border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.1)}
.pill.s-out{color:var(--muted-2)}
.pill.s-ask{color:var(--red-ink);border-color:rgba(239,68,68,.28);background:var(--red-soft)}
.fc-ask{display:inline-flex;align-items:center;gap:7px;font-family:'Hanken Grotesk',sans-serif;font-size:14px;
  font-weight:600;color:var(--ink);white-space:nowrap}
.fc-ask svg{width:15px;height:15px;color:var(--wa);transition:transform .22s var(--ease)}
.fc-ask:hover{color:var(--red-ink)}
.fc-ask:hover svg{transform:translateX(4px)}
.shopnote{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 15px;font-size:14px;
  color:var(--ink-2);background:var(--red-soft);border:1px solid rgba(239,68,68,.2);border-radius:11px;max-width:72ch}
.shopnote svg{width:18px;height:18px;flex:0 0 auto;color:var(--red-ink);margin-top:2px}
.fempty{margin:8px 0 0;padding:34px;text-align:center;color:var(--muted);font-size:15.5px;
  background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r)}
.fempty a{color:var(--red-bright);font-weight:600}
.fnote{margin-top:30px;font-size:14.5px;max-width:76ch}
.credits{margin-top:14px;font-size:12.5px;color:var(--muted-2);max-width:90ch;line-height:1.7}
.credits a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.credits a:hover{color:var(--ink-2)}

/* ---------- feature split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:56px}
.split .s-media{align-self:stretch;min-height:440px;position:relative;overflow:hidden;border-radius:var(--r-lg);
  box-shadow:var(--sh-xl);border:1px solid var(--line-2)}
.split .s-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.split .s-media:hover img{transform:scale(1.05)}
.split .s-body h2{font-size:clamp(2rem,3.6vw,2.8rem);font-weight:800;margin:16px 0 18px;letter-spacing:-.025em}
.split .s-body p{color:var(--muted);margin-bottom:14px}
.checks{list-style:none;margin:20px 0 30px;display:grid;gap:13px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink-2);font-weight:500}
.checks li svg{width:22px;height:22px;color:#fff;background:var(--wa);border-radius:50%;padding:4px;flex:0 0 auto}

/* ---------- photo figure ----------
   A real photograph with a caption under it, for the shop interior on the about
   and contact pages. The caption is part of the frame, not floating text, so it
   reads as documentation rather than decoration. */
.photo{margin:0;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);box-shadow:var(--sh-lg)}
.photo img{width:100%;height:auto;display:block}
.photo figcaption{padding:16px 20px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}
/* Map beside shop photo on the contact page. The row is as tall as the map's
   fixed 450px, and the photo stretches to match it rather than running to its
   own natural height, which at full width was taller than the map twice over. */
.visitgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;align-items:stretch}
@media(max-width:860px){.visitgrid{grid-template-columns:1fr}}
.visitgrid .photo{display:flex;flex-direction:column;min-width:0}
.visitgrid .photo img{flex:1;min-height:0;object-fit:cover}

/* ---------- company mark (about.html) ----------
   The winged emblem runs to its own edges by design, so it is used full-bleed
   inside the card rather than centred with air around it, which would read as a
   badly cropped image. Kept quiet behind the lockup, which is the primary mark. */
.brandmark{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  padding:48px 32px;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:radial-gradient(74% 120% at 50% 0%,#1a222f,#0a0e14 72%);box-shadow:var(--sh-lg)}
.brandmark-wings{position:absolute;top:-6%;left:50%;transform:translateX(-50%);width:min(760px,118%);
  opacity:.17;pointer-events:none;filter:saturate(.55)}
.brandmark-logo{position:relative;width:min(340px,78%);height:auto}
.brandmark p{position:relative;margin-top:22px;text-align:center;font-size:14.5px;color:var(--muted);max-width:46ch}
@media(max-width:560px){.brandmark{padding:36px 22px}}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:30px}.split .s-media{min-height:280px}}

/* ---------- big statement (dark band) ---------- */
.statement{text-align:center;max-width:22ch;margin:0 auto}
.statement .q{font-family:'Fraunces',Georgia,serif;font-weight:800;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.1;letter-spacing:-.02em;
  letter-spacing:-.03em;color:#fff}
.statement .q em{color:var(--red-ink);font-style:normal}
.statement .by{margin-top:24px;font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{padding:32px 28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)}
.step .sn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;
  background:var(--red-soft);color:var(--red-ink);font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:1.1rem;margin-bottom:18px}
.step h3{font-size:1.3rem;font-weight:700;margin-bottom:9px;letter-spacing:-.015em}
.step p{color:var(--muted);font-size:15px}
@media(max-width:760px){.steps{grid-template-columns:1fr;gap:16px}}

/* ---------- reasons ---------- */
.reasons{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:760px){.reasons{grid-template-columns:1fr}}
.reason{position:relative;padding:30px 26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)}
/* These were numbered 1-2-3 directly beneath the numbered process steps, which
   made two near-identical grids in a row and implied an order that does not
   exist — these three are simultaneous, not sequential. Icons instead. */
.reason .rn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;
  background:var(--red-soft);color:var(--red-ink);margin-bottom:16px}
.reason .rn svg{width:23px;height:23px}
.reason h3{font-size:1.3rem;font-weight:700;margin-bottom:9px;letter-spacing:-.015em}
.reason p{color:var(--muted);font-size:15px}

/* ---------- CTA band ---------- */
.band{position:relative;background:linear-gradient(120deg,var(--slate),#111a2e);overflow:hidden;border-top:1px solid var(--line)}
.band::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 130% at 88% 15%,rgba(239,68,68,.28),transparent 55%)}
.band-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:34px;flex-wrap:wrap;padding-block:62px}
.band h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800;letter-spacing:-.025em;color:#fff}
.band p{color:var(--ink-2);margin-top:9px}
.band-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:52px;align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:38px}}
.contact-list{list-style:none;display:grid;gap:14px}
.contact-list li{display:flex;gap:16px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);align-items:flex-start;transition:.2s}
.contact-list li:hover{border-color:rgba(239,68,68,.35);box-shadow:var(--sh)}
.contact-list .ic{width:44px;height:44px;border-radius:11px;background:var(--red-soft);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.contact-list .ic svg{width:20px;height:20px;color:var(--red-ink)}
.contact-list small{display:block;font-family:'Hanken Grotesk',sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:5px}
.contact-list b{font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:1.2rem;color:var(--ink);word-break:break-word}
.contact-list a b:hover{color:var(--red-ink)}
.socials{display:flex;gap:12px;margin-top:22px}
.socials a{width:46px;height:46px;border:1px solid var(--line-2);border-radius:11px;display:flex;
  align-items:center;justify-content:center;background:var(--surface);color:var(--ink);transition:.2s var(--ease)}
.socials a:hover{background:var(--red-fill);border-color:var(--red-fill);color:#fff;transform:translateY(-3px);box-shadow:var(--sh)}
.socials a svg{width:20px;height:20px}

form .field{margin-bottom:17px}
form label{display:block;font-family:'Hanken Grotesk',sans-serif;font-size:12px;font-weight:600;letter-spacing:.02em;
  color:var(--ink);margin-bottom:7px}
form input,form select,form textarea{width:100%;background:var(--bg);border:1.5px solid var(--line-2);border-radius:11px;
  color:var(--ink);padding:13px 15px;font-family:'Hanken Grotesk',sans-serif;font-size:15.5px;outline:none;transition:.15s}
form input:focus,form select:focus,form textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,.16)}
form textarea{resize:vertical;min-height:120px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:17px}
@media(max-width:480px){.f2{grid-template-columns:1fr}}
.formcard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:36px;box-shadow:var(--sh-lg);overflow:hidden}
.formcard::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--red)}
.formcard h2{font-size:1.8rem;font-weight:800;letter-spacing:-.02em}
.formnote{font-size:13px;color:var(--muted-2);margin-top:15px}

/* ---------- map ---------- */
.map{height:450px;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;position:relative;box-shadow:var(--sh)}
.map iframe{width:100%;height:100%;border:0;filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.65)}


.map .mapdir{position:absolute;right:14px;bottom:14px;z-index:2;background:rgba(8,11,15,.92);backdrop-filter:blur(4px);box-shadow:var(--sh)}

/* ---------- callout ---------- */
.callout{position:relative;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;overflow:hidden;
  background:linear-gradient(120deg,var(--slate),#111a2e);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:40px;box-shadow:var(--sh-lg)}
.callout::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 160% at 100% 50%,rgba(239,68,68,.24),transparent 60%)}
.callout>*{position:relative}
@media(max-width:640px){.callout{grid-template-columns:1fr}}
.callout h3{font-size:1.7rem;font-weight:800;margin-bottom:9px;letter-spacing:-.02em;color:#fff}
.callout p{color:var(--ink-2)}

/* ---------- footer ---------- */
.site-footer{background:#080b0f;color:var(--muted);padding:70px 0 32px;position:relative;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}
/* The footer column is wider than the header slot, so the lockup gets more room
   here — this is the one place on a typical page where the wordmark and the
   "Security & Sounds Ltd" line are comfortably legible. */
.site-footer .logo img.lockup{height:96px}
.foot-grid p{color:var(--muted);font-size:14.5px;margin-top:16px;max-width:34ch}
/* 11px uppercase at .1em tracking was below the point where the column headings
   stayed comfortably readable against the near-black footer; 12.5px holds the
   same visual weight without straining. */
/* h2, not h4: these are the headings of the footer's own nav groups, and an h4
   straight after a page's h2 skipped a level on all 21 pages. They stay small
   labels visually — the level is for structure, not size. */
.foot-grid h2{font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red-ink);margin-bottom:16px;line-height:1.2}
.foot-grid ul{list-style:none;display:grid;gap:11px}
.foot-grid ul a,.foot-grid ul li{color:var(--muted);font-size:14.5px}
.foot-grid ul a{transition:.15s}
.foot-grid ul a:hover{color:#fff}
/* The floating WhatsApp bubble is fixed at right:22px/bottom:22px and was sitting
   on top of the right-hand line here ("Montrose, Chaguanas, Trinidad & Tobago").
   Reserve the bubble's width plus its gutter so the last line always clears it. */
.foot-bottom{border-top:1px solid var(--line);margin-top:46px;padding-top:24px;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted-2);padding-right:96px}
@media(max-width:520px){.foot-bottom{padding-right:0;padding-bottom:74px}}

/* ---------- floating whatsapp ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--wa);
  display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(0,0,0,.5);
  transition:transform .2s var(--ease),background .2s}
.wa-float:hover{background:var(--wa-deep);transform:translateY(-2px)}
.wa-float svg{width:30px;height:30px;color:#fff}
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(34,197,94,.55);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 16px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@media (prefers-reduced-motion:reduce){.wa-float::before{animation:none}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.06s}.rv[data-d="2"]{transition-delay:.12s}
.rv[data-d="3"]{transition-delay:.18s}.rv[data-d="4"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .ticker-track{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- whole-tile tap targets ----------
   Product cards and fit-frame cards used to expose only the small "Ask" link
   as the clickable area — 22px tall, and just 46px wide on the frames pages.
   Everything else on the tile (photo, title, year, specs) was dead space, so
   on a phone you had to hit a thumbnail-sized link to enquire.

   Stretched-link pattern: the existing anchor grows a transparent overlay that
   fills its card, so a tap anywhere on the tile opens the same WhatsApp
   enquiry. Chosen over nesting the card in an <a> (invalid — the cards contain
   other links) or a JS click handler (breaks long-press, "open in new tab" and
   middle-click). The real anchor text stays in the markup, so the per-product
   aria-labels, screen-reader output and crawlable hrefs are unchanged. */
.pcard .ask::after,
.fcard .fc-ask::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit}
/* The category-page rows end in .rlink, which is a .btn — and .btn is
   position:relative with overflow:hidden for its light-sweep effect, so an
   overlay on it would anchor to the button and get clipped to it. Neutralise
   both on this one button, drop its sweep, and stretch ::before instead
   (::after is the sweep). backdrop-filter has to go too: like transform and
   filter it makes the element a containing block for absolutely-positioned
   descendants, which pinned the overlay to the button even at
   position:static. */
.prow{position:relative}
.prow .rlink{position:static;overflow:visible;backdrop-filter:none}
.prow:hover .rlink,.prow .rlink:hover{transform:none}
.prow .rlink::after{display:none}
.prow .rlink::before{content:"";position:absolute;inset:0;z-index:5}
.pcard,.fcard,.prow{cursor:pointer;-webkit-tap-highlight-color:rgba(239,68,68,.14)}
/* absolutely-positioned decoration inside the cards would otherwise punch dead
   zones through the overlay */
.pcard .brand,.fc-brand,.fc-size,.fc-fits{pointer-events:none}
/* the "Ask" affordance now responds to a hover anywhere on its card */
.pcard:hover .ask,.fcard:hover .fc-ask{color:var(--red-ink)}
.pcard:hover .ask svg,.fcard:hover .fc-ask svg{transform:translateX(4px)}
.prow:hover .rlink{border-color:#fff;background:rgba(255,255,255,.1)}
/* keyboard parity: focusing the link outlines the whole tile, not the text */
.pcard:focus-within,.fcard:focus-within,.prow:focus-within{outline:2px solid var(--red-bright);outline-offset:3px}
.pcard .ask:focus-visible,.fcard .fc-ask:focus-visible,.prow .rlink:focus-visible{outline:none}

/* ---------- touch tuning ----------
   Touch browsers latch :hover onto the last element tapped, so a tapped card
   stayed lifted until you tapped somewhere else. Drop the lift on touch and
   give a real press state instead. */
@media(hover:none){
  .pcard:hover,.fcard:hover,.cat:hover,.catcard:hover,.bcard:hover,.prow:hover,.obrand:hover,.tier:hover{
    transform:none;box-shadow:var(--sh-sm)}
  /* the picked tier keeps its raised look — that is state, not a hover effect */
  .tier.pick:hover{box-shadow:var(--sh)}
  .pcard:hover .stage img,.fcard:hover .fc-shot>img,.fcard:hover .fc-shot>img.fc-kit{transform:none}
  .cat:hover .ci,.catcard:hover .ci{transform:none}
  .pcard:active,.fcard:active,.cat:active,.catcard:active,.bcard:active,.prow:active{
    transform:scale(.985);border-color:rgba(239,68,68,.45);transition-duration:.08s}
}

/* ---------- minimum touch target sizes (44px) ---------- */
.pcard .ask,.fcard .fc-ask{min-height:44px}
@media(max-width:940px){
  /* footer link lists were 19px rows — too tight to hit reliably one-handed */
  /* the list gap becomes link padding, so the rows grow a hit area rather than
     dead space between them; text-only items keep roughly their old rhythm */
  .foot-grid ul{gap:0}
  .foot-grid ul li{padding:0}
  .foot-grid ul li a{display:block;padding:11px 0;line-height:1.35}
  .foot-grid ul li:not(:has(a)){padding:6px 0}
  /* "Home" measured 39px wide — 1px under target. Horizontal padding cancelled
     by an equal negative margin grows the hit area without moving the text, so
     the crumb still lines up with the heading beneath it. */
  .crumb a{display:inline-block;padding:11px 4px;margin-inline:-4px}
  .logo{min-height:44px}
  .foot-bottom a{display:inline-block;padding:11px 0}
  /* contact card email / phone links were 22-26px rows */
  .contact-grid a[href^="mailto:"],.contact-grid a[href^="tel:"]{display:block;padding:9px 0}
  /* "In stock only" was an 18px box on a 20px label. The label already toggles
     the checkbox, so growing the label gives the whole row a real hit area, and
     the box itself goes up to 22px so it is visible next to a 44px search field. */
  .ftoggle{min-height:44px;padding-inline:2px}
  .ftoggle input{width:22px;height:22px}
  /* iOS Safari zooms the entire page when you focus a field whose text is under
     16px, and it does not zoom back out — you are left scrolled sideways in a
     magnified page mid-enquiry. 16px is the threshold, so every field that takes
     typing gets exactly that on touch widths. The desktop size is unchanged. */
  form input,form select,form textarea,.fsearch input{font-size:16px}
}
/* sub-12px label text is hard to read on a phone; nudge the badge/eyebrow
   sizes up on small screens only, so the desktop composition is untouched */
@media(max-width:560px){
  .fc-fits b{font-size:11px}
  .fc-brand{font-size:12px}
  .catcard .eg{font-size:12px}
  .kicker{font-size:13px}
  .contact-list small{font-size:12px}
  .fc-size{font-size:13.5px}
  .pcard .brand{font-size:12px}
  .specs span{font-size:12px}
  .foot-grid h2{font-size:12.5px}
}
/* stop iOS inflating text when the phone is turned to landscape */
html{-webkit-text-size-adjust:100%}