/* One stylesheet for every brand on this engine. Mobile first, no
   framework, no build step.

   The palette and the product-shot blend mode arrive as custom properties
   from brand.json (see `theme` there and the inline <style> in base.html),
   so a new brand needs no CSS of its own. --red/--red-dark are kept as
   aliases because a lot of rules below were written against them. */
:root{
  --ink:#14171a; --ink-2:#3c444d; --muted:#6b747d;
  --paper:#ffffff; --paper-2:#f4f5f6; --line:#e2e5e8;
  --accent:#c8102e; --accent-dark:#9c0c23; --sea:#0e5a7a;
  --red:var(--accent); --red-dark:var(--accent-dark);
  /* multiply suits a cut-out product shot on an alpha background (Halco's
     whole catalogue); normal suits a photographed rod on white. */
  --shot-blend:multiply;
  /* Header logo height. A landscape lockup reads fine at 48px; a portrait
     one (Assassin's wordmark arcs over a caster) would be 29px wide there
     and unreadable, so the brand sets its own. */
  --logo-h:38px; --logo-h-wide:48px; --logo-h-foot:38px;
  /* The footer is dark and most marks are one-colour artwork with no
     reversed version, so they sit on a white chip. A disc-shaped mark
     brings its own and turns these off. */
  --foot-chip:#fff; --foot-chip-pad:8px 12px;
  --radius:10px; --wrap:1180px;
  --shadow:0 1px 2px rgba(20,23,26,.06), 0 6px 18px rgba(20,23,26,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3{line-height:1.2; margin:0 0 .5rem}
h1{font-size:1.75rem; letter-spacing:-.02em}
h2{font-size:1.25rem}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 16px}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}

/* header — white, because Halco's mark is a red wordmark over a NAVY fish
   and there is no reversed version; on the old charcoal bar the fish
   disappeared. See static/ASSETS.md. */
.site-head{position:sticky;top:0;z-index:20;background:#fff;color:var(--ink);
  border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;gap:12px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0;
  flex-wrap:nowrap}
/* Capped, never scaled up: the source file is 448px wide and without a cap
   the header logo renders at its intrinsic size. */
.brand-logo{height:var(--logo-h);width:auto;flex:none}
.brand-nz{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border-left:1px solid var(--line);padding-left:10px;white-space:nowrap}
.menu-btn{margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;
  width:42px;height:36px;display:grid;place-items:center;cursor:pointer}
.bars,.bars::before,.bars::after{display:block;width:18px;height:2px;background:var(--ink);content:""}
.bars{position:relative}
.bars::before{position:absolute;top:-6px}
.bars::after{position:absolute;top:6px}
.nav{display:none;width:100%;padding-bottom:10px}
.nav.open{display:block}
.nav > ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.nav a{display:block;padding:10px 8px;color:var(--ink-2);text-decoration:none;border-radius:8px;font-weight:600}
.nav a:hover{background:var(--paper-2);color:var(--ink)}
.nav a.cta{background:var(--red);color:#fff;margin-top:6px;text-align:center}
.nav a.cta:hover{background:var(--red-dark);color:#fff}
@media (min-width:560px){.brand-logo{height:var(--logo-h-wide)}}
@media (min-width:900px){
  .menu-btn{display:none}
  .nav{display:block;width:auto;margin-left:auto;padding:0}
  .nav > ul{flex-direction:row;align-items:center;gap:4px}
  .nav a{padding:8px 12px}
  .nav a.cta{margin:0}
}

/* hero — a real photograph beside the copy, not a gradient */
.hero{background:var(--paper-2);border-bottom:1px solid var(--line);padding:28px 0 0}
.hero-grid{display:grid;gap:22px;align-items:center}
.hero h1{font-size:2rem;max-width:16ch}
.hero p{max-width:52ch;color:var(--ink-2);font-size:1.05rem}
.hero .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.hero-shot{margin:0 -16px}
.hero-shot img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover}
@media (min-width:860px){
  .hero{padding:0}
  .hero-grid{grid-template-columns:1fr 1fr;gap:40px;min-height:420px}
  .hero-copy{padding:56px 0}
  .hero h1{font-size:2.9rem}
  .hero-shot{margin:0;height:100%}
  .hero-shot img{height:100%;aspect-ratio:auto;border-radius:0}
}
.hero .btn.ghost{border-color:var(--line);color:var(--ink)}
.hero .btn.ghost:hover{background:#fff}

.btn{display:inline-block;padding:11px 18px;border-radius:8px;text-decoration:none;font-weight:700;
  background:var(--red);color:#fff;border:1px solid transparent}
.btn:hover{background:var(--red-dark)}
.btn.ghost{background:transparent;border-color:#4a5761;color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
.btn.small{padding:8px 13px;font-size:.9rem}

section{padding:34px 0}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.section-head p{margin:0}

/* Ranges are the structure of a category page: page-title size, a clear gap
   above so each reads as a section break, and a rule under the heading
   separating it from its cards. Deliberately not styled as a link — the
   chip strip at the top of the page is what navigates. */
.home-section{margin-top:48px}
.home-section:last-of-type{margin-bottom:8px}
@media (min-width:760px){.home-section{margin-top:64px}}
.section-head.stacked{display:block;margin-bottom:18px;padding-bottom:12px;
  border-bottom:1px solid var(--line)}
.section-head.stacked p{margin:4px 0 0;font-size:.95rem}

.range-section{padding:0 0 10px}
.range-section .section-head{margin:0 0 18px;padding:0 0 12px;
  border-bottom:1px solid var(--line);align-items:flex-end}
.range-section{margin-top:48px}
.range-section:first-of-type{margin-top:16px}
.range-title{font-size:1.75rem;letter-spacing:-.02em;line-height:1.2;margin:0;
  text-decoration:none}
.range-title,.range-title a{color:var(--ink);text-decoration:none}
.range-title a:hover{text-decoration:none}
.range-more{font-size:.88rem;font-weight:600;white-space:nowrap}
.range-more a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.range-more a:hover{color:var(--red);border-color:var(--red)}
@media (min-width:760px){
  .range-title{font-size:2rem}
  .range-section{margin-top:64px}
}

/* grids */
.grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.grid{grid-template-columns:repeat(4,1fr)}}
.grid.wide{grid-template-columns:1fr}
@media (min-width:640px){.grid.wide{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid.wide{grid-template-columns:repeat(3,1fr)}}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;text-decoration:none;box-shadow:var(--shadow)}
.card:hover{border-color:#c8ced4}
/* The image box is a FIXED FRAME and every product shot sits inside it,
   whatever shape the file is. `aspect-ratio` alone did not do that: the box
   is a grid container, a grid item's automatic minimum size is its content,
   and `height:100%` on the image resolves against an indefinite height and
   falls back to the file's intrinsic one — so a portrait shot pushed the row
   taller and `aspect-ratio`, which only sets a PREFERRED size, gave way.
   Hayabusa made it obvious: a 1/1 box measured 275x497 on the Float Rig and
   275x275 on the Snapper Adjustable Rig beside it, and the cards in a row
   came out different heights. `min-height:0` lets the item shrink below its
   content, which is what holds the ratio; `overflow:hidden` is the backstop.
   Nothing here crops — `object-fit:contain` still letterboxes the whole
   image inside the frame. */
.card .shot{aspect-ratio:1/1;background:var(--paper-2);display:grid;place-items:center;
  padding:8px;overflow:hidden}
.card .shot img{width:100%;height:100%;min-width:0;min-height:0;
  object-fit:contain;mix-blend-mode:var(--shot-blend)}
.card .body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.card .name{font-weight:700;font-size:.98rem;line-height:1.25}
.card .meta{font-size:.82rem;color:var(--muted)}
.card .rrp{font-weight:700;font-size:.95rem;margin-top:auto}

.grid.tiles{grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.grid.tiles{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.grid.tiles{grid-template-columns:repeat(5,1fr)}}
.cat-tile .name{font-size:1.02rem}
.cat-tile .shot{aspect-ratio:4/3}

/* badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:99px}
.badge.nz{background:#e7f4ea;color:#1c6b34;border:1px solid #bfe3c9}
.badge.na{background:var(--paper-2);color:var(--muted);border:1px solid var(--line)}

/* breadcrumbs + filter bar */
.crumbs{font-size:.85rem;color:var(--muted);padding:14px 0 0}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 4px}
.chip{display:inline-block;padding:7px 13px;border:1px solid var(--line);border-radius:99px;
  text-decoration:none;font-size:.88rem;font-weight:600;background:#fff}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* range strip */
.strip{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;-webkit-overflow-scrolling:touch}
/* The region pills WRAP rather than scroll: a horizontal scroller hides
   half the regions behind a gesture nobody is told about, and on a desktop
   it draws a scrollbar under the row. Scoped to `.regions` so the category
   page's range strip — a short list where scrolling is fine — is untouched. */
.strip.regions{flex-wrap:wrap;overflow-x:visible;row-gap:8px}
/* Below this width the pills wrap to four or five rows and push the first
   shop off the screen, so a select does the same job in one line. Exactly
   one of the two is ever in the document flow. */
.region-jump{display:block;padding:4px 0 12px}
.region-jump select{width:100%;padding:10px 12px;font:inherit;font-size:.95rem;
  color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:10px;-webkit-appearance:menulist}
@media (min-width:640px){
  .region-jump{display:none}
}
@media (max-width:639px){
  .strip.regions{display:none}
}
.strip a{white-space:nowrap;padding:7px 13px;border:1px solid var(--line);border-radius:99px;
  text-decoration:none;font-size:.88rem;font-weight:600;background:#fff}
.strip a:hover{border-color:var(--ink)}

/* product page */
.pdp{display:grid;gap:22px;padding-top:8px}
@media (min-width:900px){.pdp{grid-template-columns:1.1fr .9fr;gap:38px;align-items:start}}
.gallery .main{background:var(--paper-2);border-radius:var(--radius);aspect-ratio:1/1;
  display:grid;place-items:center;padding:14px;border:1px solid var(--line)}
.gallery .main img{width:100%;height:100%;object-fit:contain;mix-blend-mode:var(--shot-blend)}
.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
@media (min-width:640px){.thumbs{grid-template-columns:repeat(8,1fr)}}
.thumbs button{padding:4px;background:var(--paper-2);border:1px solid var(--line);border-radius:8px;cursor:pointer;aspect-ratio:1/1}
.thumbs button[aria-current="true"]{border-color:var(--ink)}
.thumbs img{width:100%;height:100%;object-fit:contain;mix-blend-mode:var(--shot-blend)}

.pricebox{border:1px solid var(--line);border-radius:var(--radius);padding:14px;background:var(--paper-2);margin:14px 0}
.pricebox .amount{font-size:1.5rem;font-weight:800}
.pricebox .label{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}

.colours{list-style:none;margin:0;padding:0;display:grid;gap:6px;grid-template-columns:1fr}
@media (min-width:480px){.colours{grid-template-columns:1fr 1fr}}
.colours li{display:block}
.colour{width:100%;display:flex;justify-content:flex-start;gap:9px;align-items:center;
  border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:.9rem;
  background:#fff;cursor:pointer;text-align:left;font:inherit;font-size:.9rem;color:inherit}
.colour:hover{border-color:var(--ink-2)}
.colour[aria-current="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.colour.nz{border-color:#bfe3c9;background:#f6fbf7}
.colour.nz[aria-current="true"]{border-color:#2c8a4b;box-shadow:inset 0 0 0 1px #2c8a4b}
.colour .dot{width:8px;height:8px;border-radius:99px;background:#c9ced3;flex:none}
.colour.nz .dot{background:#2c8a4b}
.colour .cname{flex:1}
.colour .cprice{color:var(--muted);font-variant-numeric:tabular-nums}
.more-colours{margin-top:12px}
.more-colours summary{cursor:pointer;font-size:.88rem;color:var(--muted);padding:6px 0}
.more-colours summary:hover{color:var(--ink)}
.more-colours .colours{margin-top:8px}

.rte{max-width:68ch}
.rte img{border-radius:8px;margin:12px 0}
.rte h2,.rte h3{margin-top:1.2em}

.panel{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
/* `section{padding:34px 0}` never reaches a `<section class="wrap">`: the
   class selector wins and its `padding:0 16px` zeroes the vertical padding,
   so the In-store heading sat flush against the Online cards — a measured
   0px, against 16px between the intro and "Online". Other pages space their
   sections with their own classes (.home-section, .range-section); this page
   had none. 1rem is exactly the gap it is matching: a paragraph's bottom
   margin, which is what separates the intro from "Online". */
.wtb-section{margin-top:1rem}

.stockist{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;background:#fff;box-shadow:var(--shadow);height:100%}
.stockist h3{margin:0}
.stockist .region{font-size:.85rem;color:var(--muted)}
/* `margin-top:auto` is what stops the row staggering. The cards are already
   equal height (grid stretches them), but a card whose region line wraps to
   two lines pushed its link a line lower than its neighbours'. Pinning the
   link to the card's foot lines them all up. */
.stockist-go{margin:14px 0 0 !important;padding-top:2px;margin-top:auto !important}
/* A plain text link in the brand's own accent, not a button: three solid
   red blocks in a row read as three calls to action competing with each
   other, on a section whose job is to list places evenly. */
.stockist-link{color:var(--accent);font-weight:600;text-decoration:none;
  display:inline-flex;align-items:baseline;gap:.35em}
.stockist-link:hover,.stockist-link:focus-visible{text-decoration:underline}
.stockist-arrow{transition:transform .15s ease}
.stockist-link:hover .stockist-arrow{transform:translateX(2px)}

/* stockist regions */
.region-block{margin-top:26px}
.region-block h3{font-size:1.15rem;margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
/* One column. A multi-column grid read as "<town> <next store name>" down
   the column gutters, which is how "Kaitaia Mccoy and Thomas" happened. */
.shops{list-style:none;margin:0;padding:0}
.shops li{padding:10px 0;border-bottom:1px solid var(--paper-2)}
.shops li:last-child{border-bottom:0}
.shop-line{margin:0;line-height:1.35}
.shop-name{font-weight:600}
.shop-town{color:var(--ink-2)}
.shop-contact{margin:2px 0 0;font-size:.86rem;color:var(--muted);line-height:1.45}
.shop-contact a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.shop-contact a:hover{color:var(--red);border-color:var(--red)}

/* Page intro: full content width, just a touch larger than body copy. The
   70ch .prose measure is right for an essay and wrong for one line above a
   directory. */
.lede{font-size:1.05rem;color:var(--ink-2);max-width:none}

.prose{max-width:70ch}
.prose h1{margin-bottom:.6rem}

/* footer */
.site-foot{background:var(--ink);color:#c9d1d8;margin-top:40px;padding:34px 0 22px;font-size:.92rem}
.foot-grid{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:700px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.site-foot h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:#8e9aa4}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.site-foot a{color:#dfe3e7;text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-logo{margin:0 0 12px}
.foot-logo img{height:var(--logo-h-foot);width:auto;background:var(--foot-chip);
  border-radius:8px;padding:var(--foot-chip-pad)}
.foot-logo{display:flex;align-items:center;gap:10px}
/* A brand's own knockout artwork already works on a dark ground; the white
   chip exists for marks that have none, and around one it draws a second
   edge. */
.foot-logo.reversed img{background:none;padding:0}
.foot-fine{border-top:1px solid #262d34;margin-top:26px;padding-top:16px;font-size:.82rem;color:#8e9aa4}
.foot-fine p{margin:0 0 .4rem}

/* warranty checklist */
.checklist{margin:0 0 1rem;padding:0;list-style:none;display:grid;gap:8px}
.checklist li{position:relative;padding-left:26px;line-height:1.5}
.checklist li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:7px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:rotate(-45deg)}

/* guide cards: a wide hero, a title and one line */
.card.guide{text-decoration:none}
.card.guide .shot.wide-shot{aspect-ratio:16/9;padding:0}
.card.guide .shot.wide-shot img{width:100%;height:100%;object-fit:cover;mix-blend-mode:normal}
.card.guide .name{font-size:1.02rem;line-height:1.3}
.card.guide .excerpt{font-size:.9rem;color:var(--ink-2);line-height:1.45}
.card.guide .meta{margin-top:auto;padding-top:4px}

/* Instagram strip — a square grid, same shape as Halco's own */
.social-grid{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}
@media (min-width:640px){.social-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:900px){.social-grid{grid-template-columns:repeat(6,1fr)}}
.social-tile{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  border-radius:8px;background:var(--paper-2)}
.social-tile img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .25s ease}
.social-tile:hover img{transform:scale(1.04)}
.social-tile .play{position:absolute;right:7px;top:7px;width:0;height:0;
  border-left:10px solid #fff;border-top:7px solid transparent;
  border-bottom:7px solid transparent;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.trademark{color:#8e9aa4;margin:0 0 .4rem}


/* ── brand engine additions ────────────────────────────────────────────── */

/* A brand with no logo file sets its wordmark as type instead. Assassin
   arrived without artwork; a placeholder image would read as broken and
   another brand's mark would be worse. */
.wordmark{font-weight:800;letter-spacing:-.02em;font-size:1.45rem;
  text-transform:uppercase;color:var(--ink);white-space:nowrap;flex:none}
@media (min-width:560px){.wordmark{font-size:1.75rem}}
.foot-logo .wordmark{color:#fff;font-size:1.35rem}

/* A badge-shaped mark carries no readable brand name at header size, so the
   name is set beside it. Smaller than a wordmark standing on its own: here
   it is the second half of a lockup, not the whole mark. */
.wordmark-beside{font-size:1.25rem;letter-spacing:.01em}
@media (min-width:560px){.wordmark-beside{font-size:1.45rem}}
.foot-logo .wordmark-beside{font-size:1.2rem}

/* Only ever on a product the distributor does not carry, so it marks the
   exception rather than decorating every card. */
.card .shot{position:relative}
.flag{position:absolute;left:8px;top:8px;z-index:1;
  background:var(--ink);color:#fff;border-radius:999px;
  font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 9px;max-width:calc(100% - 16px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.panel.exclusive{background:var(--paper);border-left:3px solid var(--accent);
  margin:0 0 16px}
.panel.exclusive .label{font-size:.8rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--accent);font-weight:700}

/* A size on an exclusive page links straight to that size's page at the
   retailer — the product-level link can only be the collection when one
   model family maps to six listings. */
.at-retailer{display:inline-block;margin:2px 0 0 26px;font-size:.78rem;
  font-weight:600;letter-spacing:.01em;color:var(--accent);text-decoration:none}
.at-retailer:hover{text-decoration:underline}

/* The brand's published specification, one block per size. A definition list
   because that is what it is — a label and its value — and it keeps the
   run-on source text off the page. */
.specs{display:grid;gap:10px;margin:0 0 14px}
.spec{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;
  background:var(--paper-2)}
.spec-head{margin:0;font-weight:700;display:flex;gap:10px;align-items:baseline;
  flex-wrap:wrap}
.spec-sku{font-weight:500;font-size:.78rem;color:var(--muted);letter-spacing:.02em}
.spec-lead{margin:2px 0 8px;font-size:.88rem;color:var(--ink-2)}
.spec dl{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;margin:0;
  font-size:.88rem}
.spec dt{color:var(--muted)}
.spec dd{margin:0}
@media (max-width:480px){.spec dl{grid-template-columns:1fr}
  .spec dt{margin-top:6px}}


/* Product videos. A facade, not an iframe: the button carries our own
   mirrored still and is swapped for the player only when a reader clicks,
   so nothing of YouTube's loads — player, image or cookie — until asked. */
.videos{display:grid;gap:10px;margin:14px 0 0}
.video{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:var(--paper-2);cursor:pointer;
  text-align:left;font:inherit;color:inherit}
.video img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.video .play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;
  border-radius:50%;background:rgba(20,23,26,.72);pointer-events:none}
.video .play::after{content:"";position:absolute;left:21px;top:16px;border-style:solid;
  border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.video:hover .play{background:var(--accent)}
.video-title{display:block;padding:9px 12px;font-weight:600;font-size:.9rem}
.video-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--radius);display:block}

/* ONE video is a section, not the first card of a row. Left in the grid so
   the card, the facade and the mirrored still are all the same component,
   but given a column of its own: at three columns a lone card sat a third
   of the way across with two empty columns beside it, which reads as a
   missing row rather than as a feature. Capped rather than stretched edge
   to edge — a 16:9 still at full page width is a banner, and this is a
   brand film under a heading. Only ever applied when the strip holds
   exactly one, so every other brand is untouched. */
/* `justify-content` and not `margin:auto` or `text-align`: the column is
   a grid track, so centring it is the container's job. The heading above
   stays left with every other section head on the page — it is the video
   that is centred, not the section. */
.video-grid.solo{grid-template-columns:minmax(0,560px);justify-content:center}
/* One featured film below the hero (`home.featured_video`): the shared
   16:9 frame, capped so it reads as a film rather than a banner, and the
   heading above it left-aligned like every other section head. */
.featured-video .video-frame{max-width:960px;margin:0 auto;background:var(--paper-2)}
.video-grid .video-card{display:flex;flex-direction:column}
.video-grid .video{border:0;border-radius:0}
.video-grid .body{gap:4px}
.video-grid .meta a{color:var(--accent);text-decoration:none;font-weight:600}
.video-grid .meta a:hover{text-decoration:underline}

/* Guide pages — authored long-form copy for one brand. New classes only, so
   nothing here reaches a page that does not use them. */
/* Copy left, comparison table right. Capping the measure on the paragraphs
   alone left the right half of the page empty; the column does the capping
   now, and the table fills what it used to waste. */
.guide-layout{display:grid;gap:30px;align-items:start}
/* A grid item defaults to min-width:auto, so the table's min-width pushed the
   whole page sideways on a phone instead of scrolling inside its own box. */
.guide-layout>*{min-width:0}
@media (min-width:900px){
  .guide-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:44px}
  .guide-side{position:sticky;top:88px}
}
.guide-body h2{margin:26px 0 8px;font-size:1.25rem}
.guide-body h2:first-child{margin-top:0}
.guide-body p{margin:0 0 14px;line-height:1.65;color:var(--ink-2)}
.guide-body .claim{margin-bottom:16px}
.guide-body .claim b{color:var(--ink)}
.guide-side h2{margin:0 0 12px;font-size:1.25rem}
.short-version{background:var(--paper-2);border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;padding:14px 18px;margin:0 0 24px}
.short-version p{margin:0 0 6px;color:var(--ink);font-weight:600;line-height:1.5}
.short-version p:last-child{margin:0;font-weight:500;color:var(--ink-2)}
.sv-label{font-size:.72rem!important;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted)!important;font-weight:700!important;margin-bottom:8px!important}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 8px}
.compare{border-collapse:collapse;width:100%;min-width:430px;font-size:.9rem}
.compare th,.compare td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);
  vertical-align:top}
.compare thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);border-bottom-width:2px}
.compare tbody th{font-weight:600;color:var(--ink);width:34%}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:none}
.guide-link{margin:0 0 4px;font-weight:600}

/* Assassin's header is a badge, a wordmark and nine nav entries, which wrapped
   the nav to a second line at every desktop width. Scoped with :has() to the
   badge-plus-wordmark lockup, so a brand with a single logo image keeps the
   roomier nav it fits in. */
@media (min-width:900px){
  .head-row:has(.wordmark-beside) .brand{gap:8px}
  .head-row:has(.wordmark-beside) .wordmark-beside{font-size:1.15rem}
  .head-row:has(.wordmark-beside) .brand-nz{padding-left:8px;font-size:.68rem}
  .head-row:has(.wordmark-beside) .nav ul{gap:2px}
  .head-row:has(.wordmark-beside) .nav a{padding:8px 9px}
}
/* Between 900 and 1200 the nav still does not fit. The location line goes
   rather than the nav links: it is repeated in the footer and the page title,
   and cramping nine tap targets to save it would be the wrong trade. */
@media (min-width:900px) and (max-width:1199px){
  .head-row:has(.wordmark-beside) .brand-nz{display:none}
}

/* Cross-links (lib/relations.py). A compatibility group is a labelled band
   of cards inside one section: the label is the brand's own row heading
   ("Mounts that fit it"), so it has to read as a sub-heading of "What fits
   this", not as another page section. Only brands that publish a
   compatibility model render these at all. */
.xlink-head{font-size:1rem;font-weight:600;letter-spacing:.01em;
  margin:22px 0 12px;color:var(--muted)}
.xlink-head:first-of-type{margin-top:4px}

/* ── grouped navigation (catalogue.nav_groups) ──────────────────────────────
   Ten flat categories wrapped to three rows on a laptop, so a brand with a
   deep range groups them the way its own header does: a handful of menus,
   each opening on the ranges beneath. One set of markup serves both widths —
   on mobile the panel is a block the chevron expands in place, on desktop it
   is absolutely positioned and opens on hover or keyboard focus as well.
   A brand with no groups declared renders no `.has-menu` at all. */

.nav .has-menu{display:flex;flex-wrap:wrap;align-items:center}
.nav .has-menu > a{flex:1 1 auto}

/* The chevron is a second control beside the link, not a replacement for it:
   the menu title still navigates to the category, which is what a reader
   tapping the word expects. Hit area is the full row height. */
.submenu-btn{flex:none;background:none;border:0;padding:10px;cursor:pointer;
  color:var(--ink-2);line-height:0;border-radius:8px}
.submenu-btn:hover{background:var(--paper-2)}
.chev{display:inline-block;width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .15s ease}
.submenu-btn[aria-expanded="true"] .chev{transform:rotate(-135deg) translate(-2px,-2px)}

.submenu{display:none;width:100%}
.submenu-btn[aria-expanded="true"] + .submenu{display:block}
.submenu-inner{display:flex;flex-direction:column;gap:2px}
.submenu-col{min-width:auto}
.submenu-head{font-size:.78rem!important;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted)!important;padding-bottom:4px!important}
.submenu ul{list-style:none;margin:0;padding:0 0 6px 12px}
.submenu a{font-weight:500;padding:8px}

@media (min-width:900px){
  .nav .has-menu{position:relative;flex-wrap:nowrap}
  .nav .has-menu > a{flex:0 0 auto;padding-right:4px}
  .submenu-btn{padding:8px 8px 8px 0}
  .submenu-btn:hover{background:none}
  /* Opens on hover for a pointer, on focus-within for a keyboard, and on the
     button for a touch screen that reports neither. */
  .nav .has-menu:hover > .submenu,
  .nav .has-menu:focus-within > .submenu{display:block}
  /* `max-content`, not `auto`: an absolutely positioned box shrink-to-fits
     against its containing block, and the containing block here is the menu
     item — about 110px — so `auto` collapses a three-column panel into one
     very tall column. max-content asks for the full width, max-width clamps
     it, and the columns wrap inside that. */
  .submenu{position:absolute;top:100%;left:0;width:max-content;
    max-width:min(88vw,660px);min-width:230px;padding-top:6px;z-index:30}
  .submenu-inner{flex-direction:row;flex-wrap:wrap;gap:14px 26px;background:#fff;
    border:1px solid var(--line);border-radius:12px;padding:14px 18px;
    box-shadow:0 12px 28px rgba(0,0,0,.13)}
  /* The nav is right-aligned, so the last menu's panel would hang off the
     window if it opened leftwards like the others. Marked in the template
     rather than guessed with :nth-last-of-type, which would misfire the
     moment a brand's nav is a different length. */
  .submenu.align-right{left:auto;right:0}
  .submenu ul{padding:0}
  /* Fourteen ranges in one column is taller than most laptop screens. */
  .submenu ul.split{display:grid;grid-template-columns:repeat(2,max-content);
    gap:0 22px}
  .submenu a{white-space:nowrap;padding:6px 8px}
  .submenu-head{padding:0 8px 6px!important}
}

/* "Coming soon" (catalogue.coming_soon) — a range the distributor has taken
   on but cannot sell yet. Muted rather than loud: it is a statement of fact,
   not a promotion, and it sits where the price would be. */
.soon-panel{background:var(--paper-2);border:1px solid var(--line)}
.soon-panel .label{color:var(--ink-2)}
.flag.soon{background:var(--ink);color:#fff}
/* A dot beside the nav entry, because the word would not fit in a menu and
   the category page says it properly. title= carries it for a pointer, and
   the page itself for everyone else. */
.soon-dot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-left:6px;vertical-align:middle}


/* Stockist tier badge (stockists.tiers) — shared by every brand that sets
   tiers, so nothing in here is Scotty-specific.

   A LABEL, not a number (see lib/stockists.apply_tiers). Outlined rather
   than filled and set in the brand red: a solid red pill in caps read as a
   sale sticker on a page whose whole job is naming other people's shops
   respectfully. No `text-transform` — the case is whatever the brand wrote
   in `premier_label`, because deciding a brand's own wording in CSS is how
   a config value stops meaning anything.

   `inline-flex` + `vertical-align:middle` centres the pill on the shop
   name's x-height rather than sitting it on the baseline; sizing is all in
   `em` so it tracks the name if the type scale ever changes. */
.shop-tier{display:inline-flex;align-items:center;gap:.34em;
  margin-left:8px;padding:.12em .6em .12em .5em;
  /* The outline follows the BRAND's accent, not a hardcoded red: Halco and
     Scotty are red but Assassin's is navy (#1d2a35), and a red ring round
     navy type would be nobody's mark. Softened with color-mix where it is
     supported; the fallback is the accent at full strength, which is right
     rather than merely tolerable. */
  border:1px solid var(--accent);border-radius:999px;
  color:var(--accent);background:none;
  font-size:.73rem;font-weight:500;letter-spacing:.005em;line-height:1.45;
  white-space:nowrap;vertical-align:middle}
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .shop-tier{border-color:color-mix(in srgb, var(--accent) 42%, transparent)}
}
.shop-tier-mark{width:.8em;height:.8em;fill:currentColor;flex:none;
  /* the star's own optical centre sits a shade high against the cap line */
  margin-top:-.04em}

/* The other Monster Distribution brand sites, under the footer. Greyscale so
   four other brands' marks sit quietly beneath this one's, and colour on
   hover so the row is plainly clickable. */
.network{background:var(--paper-2);border-top:1px solid var(--line);padding:16px 0}
.network-row{display:flex;align-items:center;gap:18px 26px;flex-wrap:wrap}
a.network-label{text-decoration:none}
a.network-label:hover,a.network-label:focus-visible{text-decoration:underline}
.network-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);font-weight:700;white-space:nowrap}
.network ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;
  gap:14px 26px;flex-wrap:wrap}
.network a{display:block;line-height:0;border-radius:6px}
.network img{height:28px;width:auto;max-width:150px;object-fit:contain;
  filter:grayscale(1);opacity:.75;transition:filter .15s,opacity .15s}
.network a:hover img,.network a:focus-visible img{filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){.network img{transition:none}}

/* ── technology explainers (lib/technology.py, templates/technology.html) ──
   A brand whose value is the technology in a part (Fuji) gets a /technology
   page, a section of it on the home page above the range, a panel on every
   product page and a link strip on every category. Nothing here is
   brand-specific: the accent, the paper and the line colours are the
   brand's own custom properties, the same as every other block. */
.tech-home .tech-intro{max-width:70ch;margin:0 0 18px}
.tech-home .tech-intro p{color:var(--ink-2);line-height:1.65}
.tech-code{margin:0 0 18px}
.tech-code-lead{margin:0 0 10px;font-weight:600}
.tech-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.tech-chips li{display:flex;flex-direction:column;gap:4px;min-width:96px}
.chip-code{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:700;font-size:1.05rem;letter-spacing:.04em;padding:4px 10px;border-radius:6px;
  background:var(--paper);border:1px solid var(--line);color:var(--accent);width:max-content}
.chip-meaning{font-size:.86rem;color:var(--ink-2);max-width:18ch;line-height:1.35}
.tech-code-foot{margin:12px 0 0;font-size:.86rem}
.tech-cards .tech-card{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;
  transition:box-shadow .15s,border-color .15s}
.tech-cards .tech-card:hover{box-shadow:var(--shadow);border-color:var(--accent)}
.tech-card h3{margin:0;font-size:1.1rem}
.tech-card p{margin:0;color:var(--ink-2);font-size:.95rem;line-height:1.5}
.tech-kicker{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);font-weight:700}
.tech-more{margin-top:auto;padding-top:8px;font-weight:700;color:var(--accent);font-size:.9rem}
.tech-all{margin:18px 0 0}
/* the page */
.tech-head{padding-top:8px}
.tech-toc{margin:18px 0 8px;padding:12px 16px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius)}
.tech-toc ol{margin:0;padding:0 0 0 1.2em;columns:2;column-gap:24px;font-size:.95rem}
.tech-toc li{break-inside:avoid;padding:2px 0}
.tech-toc a{color:var(--ink);text-decoration:none;font-weight:600}
.tech-toc a:hover{color:var(--accent)}
.tech-section{padding:34px 0 8px;border-top:1px solid var(--line);margin-top:26px;scroll-margin-top:16px}
.tech-section:first-of-type{border-top:none;margin-top:8px}
.tech-body h2{font-size:1.6rem;letter-spacing:-.01em}
.tech-body h3{font-size:1.12rem;margin:22px 0 8px}
.tech-body p{line-height:1.65;color:var(--ink-2)}
.tech-body .claim b{color:var(--ink)}
.tech-body .lede{color:var(--ink);font-weight:500}
.tech-bullets{margin:0 0 1rem;padding-left:1.2em;color:var(--ink-2);line-height:1.6}
.tech-note{font-size:.88rem}
.codes{margin:6px 0 18px;display:grid;gap:10px}
.code-row{display:grid;gap:4px;padding:10px 12px;background:var(--paper-2);border:1px solid var(--line);border-radius:8px}
.code-row dt{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.code-name{font-weight:700}
.code-row dd{margin:0;color:var(--ink-2);line-height:1.55;font-size:.95rem}
@media (min-width:760px){
  .code-row{grid-template-columns:230px 1fr;align-items:start;gap:16px}
  .code-row dt{flex-direction:column;align-items:flex-start;gap:4px}
}
.tech-examples{margin-top:22px}
.tech-examples .range-title{font-size:1.05rem}
.tech-closing{padding:34px 0 8px;border-top:1px solid var(--line);margin-top:26px}
/* on product, category and card */
.tech-panel{margin:0 0 18px}
.tech-panel .label{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin-bottom:8px}
.tech-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tech-list li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;line-height:1.4}
.tech-list a{text-decoration:none;color:var(--ink)}
.tech-list a b{color:var(--accent)}
.tech-list a:hover b{text-decoration:underline}
.tech-sec{font-size:.84rem}
.tech-strip{margin:0 0 14px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;font-size:.95rem}
.tech-strip a{font-weight:700;color:var(--accent);text-decoration:none}
.tech-strip a:hover{text-decoration:underline}
.card .tech{font-size:.8rem;color:var(--accent);font-weight:600;line-height:1.3}


/* ── network (umbrella) site ───────────────────────────────────────────── */

/* A hero with no photograph: the umbrella's picture IS the brand grid
   beneath it, so the copy sits alone on the tinted band. */
.hero-umbrella{padding:34px 0 30px}
.hero-umbrella .hero-copy{max-width:none}
.hero-umbrella h1{max-width:24ch}
.hero-umbrella p{max-width:70ch}
@media (min-width:760px){.hero-umbrella{padding:54px 0 46px}.hero-umbrella h1{font-size:2.5rem}}
/* With a photograph: full-bleed behind the copy, a dark gradient over it
   so white type reads across the whole band, heaviest on the left where
   the words sit. The image is a custom property from the template, so no
   CSS names a file. */
.hero-umbrella.has-photo{position:relative;color:#fff;border-bottom:0;
  background:linear-gradient(90deg,rgba(14,17,20,.78) 0%,rgba(14,17,20,.55) 55%,rgba(14,17,20,.35) 100%),
    var(--hero-photo) center/cover no-repeat #14171a;
  padding:64px 0 58px}
@media (min-width:760px){.hero-umbrella.has-photo{padding:96px 0 88px;min-height:440px;display:flex;align-items:center}
  .hero-umbrella.has-photo .wrap{width:100%}}
.hero-umbrella.has-photo h1,.hero-umbrella.has-photo p{color:#fff}
.hero-umbrella.has-photo p{opacity:.92}
.hero-umbrella.has-photo .btn.ghost{border-color:rgba(255,255,255,.55);color:#fff}
.hero-umbrella.has-photo .btn.ghost:hover{background:rgba(255,255,255,.12)}

/* One card per brand site: a logo on a white box, one line, the domain. The
   logo box is 5/3 rather than square so a landscape lockup fills it; the
   image is contained, never cropped, and never blended — these are marks,
   not product shots. */
.brand-grid{grid-template-columns:1fr}
@media (min-width:420px){.brand-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.brand-grid{grid-template-columns:repeat(4,1fr)}}
.brand-card{text-decoration:none;color:inherit}
.brand-card.soon{opacity:.85}
.brand-card .logo-box{aspect-ratio:5/3;background:#fff;padding:18px 22px}
.brand-card .logo-box img{width:auto;height:auto;max-width:100%;max-height:72px;
  object-fit:contain;mix-blend-mode:normal}
.brand-card .line{font-size:.88rem;color:var(--ink-2);line-height:1.4}
.brand-card .meta{margin-top:auto;padding-top:4px;color:var(--accent);font-weight:600}
.brand-card.soon .meta{color:var(--muted);font-weight:500}
.wordmark-tile{font-weight:800;letter-spacing:-.01em;font-size:1.3rem;text-transform:uppercase;
  color:var(--ink)}

/* Logos only, a plain wall like the wholesale portal's: no card outlines,
   each mark centred in its cell on the page's own white, sized to fill the
   cell rather than sit small inside it. Three across on a phone, up to six
   on a desktop; the cell height is what keeps the rows even. */
.logo-row{list-style:none;margin:0;padding:0;display:grid;gap:18px 24px;
  grid-template-columns:repeat(3,1fr)}
@media (min-width:640px){.logo-row{grid-template-columns:repeat(4,1fr);gap:24px 32px}}
@media (min-width:1000px){.logo-row{grid-template-columns:repeat(6,1fr)}}
.logo-row li{min-height:110px;display:grid;place-items:center;padding:6px}
.logo-row a{display:grid;place-items:center;width:100%;height:100%;text-decoration:none}
.logo-row img{width:auto;height:auto;max-width:100%;max-height:96px;object-fit:contain}

/* The cross-brand finder: a region select and a row of brand chips above
   the same region blocks the brand sites use, and a tag per brand on each
   row. */
.finder-controls{display:grid;gap:14px;margin:4px 0 8px}
@media (min-width:760px){.finder-controls{grid-template-columns:240px 1fr;align-items:start}}
.finder-field label,.finder-label{display:block;font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:6px}
.finder-field select{width:100%;padding:10px 12px;font:inherit;font-size:.95rem;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:.9rem;padding:7px 13px;border:1px solid var(--line);
  border-radius:99px;background:#fff;color:var(--ink);cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.shop-brands{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.brand-tag{font-size:.72rem;font-weight:600;letter-spacing:.02em;padding:2px 8px;
  border-radius:99px;background:var(--paper-2);border:1px solid var(--line);color:var(--ink-2)}
.finder-empty{padding:18px 0}

/* Forms: the trade enquiry is the only one on the engine. */
.form{max-width:760px}
.form-grid{display:grid;gap:14px}
@media (min-width:640px){.form-grid{grid-template-columns:1fr 1fr}}
.field{display:block;margin:0 0 14px}
.form-grid .field{margin:0}
.field > span,.field legend{display:block;font-size:.88rem;font-weight:600;margin-bottom:5px}
.field em{color:var(--accent);font-style:normal}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
  width:100%;padding:10px 12px;font:inherit;font-size:.95rem;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink)}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.field.invalid input,.field.invalid select{border-color:var(--accent)}
.field small{display:block;color:var(--accent);font-size:.82rem;margin-top:4px}
.checks{border:0;padding:0;margin:0 0 14px}
.check-grid{display:grid;gap:6px 14px;grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.check-grid{grid-template-columns:repeat(3,1fr)}}
.check-grid label{font-size:.92rem;display:flex;gap:8px;align-items:center}
.form-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notice{margin:0 0 16px}
.notice.ok{border-left:3px solid #1f8a4c}
.notice.warn{border-left:3px solid var(--accent)}
.stockist.rep h3{margin:0}
.addr{font-style:normal;line-height:1.55}
.contact-list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.small{font-size:.86rem}

/* ── umbrella home: featured carousel and brand blocks ─────────────────── */

/* One slide at a time once the script runs; before it, and without it,
   the slides stack. Image left, copy right, a single column on a phone. */
.carousel{position:relative;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.slide{display:grid;gap:18px;padding:18px}
.carousel.js .slide{display:none}
.carousel.js .slide.on{display:grid}
@media (min-width:760px){.slide{grid-template-columns:1.1fr .9fr;align-items:center;gap:32px;padding:26px 30px}}
.slide-shot img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:8px;
  background:#fff;display:block}
.slide-kicker{display:block;font-size:.78rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.slide-copy h2{font-size:1.5rem;margin:0 0 .5rem}
@media (min-width:760px){.slide-copy h2{font-size:1.9rem}}
.slide-copy p{color:var(--ink-2);max-width:48ch}
.carousel-nav{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:0 0 14px}
.carousel-btn{font:inherit;font-size:1.4rem;line-height:1;width:36px;height:36px;
  border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}
.carousel-btn:hover{border-color:var(--ink)}
.carousel-dots{display:flex;gap:8px}
.carousel-dots button{width:10px;height:10px;padding:0;border:0;border-radius:50%;
  background:#c8ced4;cursor:pointer}
.carousel-dots button[aria-selected="true"]{background:var(--accent)}

/* The brand blocks: the old site's shape. A band in the brand's own colour
   (--band, from its site's theme accent unless the umbrella overrides it)
   with the mark on a white plate and a sentence beside it, then four
   products on white. Two columns from tablet width, one on a phone. */
.brand-blocks{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:760px){.brand-blocks{grid-template-columns:1fr 1fr;gap:26px}}
.brand-block{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:#fff;display:flex;flex-direction:column}
/* Equal bands across a row, so the product rows line up: each block spans
   two rows of the outer grid and lays its band and its row on them
   (subgrid), and the band row is as tall as the tallest band beside it.
   Browsers without subgrid fall back to the flex column above. */
@supports (grid-template-rows: subgrid){
  /* One explicit column of minmax(0,1fr): without it the block's implicit
     column is content-sized, the band and the row size to their content,
     and the row's four 1fr tiles turn into four intrinsic widths. */
  .brand-block{display:grid;grid-template-rows:subgrid;grid-row:span 2;
    grid-template-columns:minmax(0,1fr);
    /* A subgrid inherits the outer grid's row gap (26px) between its own
       two rows, which floated the product row off the band. The band
       track still equalises across the row; the band itself stretches to
       fill it (min-height, not a pushed-down row). */
    row-gap:0}
  .brand-block > *{min-width:0}
  .brand-blocks{grid-auto-rows:auto}
}
.brand-block .band{display:flex;align-items:center;gap:16px;padding:16px 18px;
  background:var(--band,#c8102e);color:var(--band-ink,#fff);text-decoration:none;min-height:104px}
a.band:hover .band-go{text-decoration:underline}
.brand-block .plate{flex:none;width:150px;height:76px;background:#fff;border-radius:8px;
  padding:8px 12px;display:grid;place-items:center}
/* Explicit pixels, not percentages: a portrait mark (Assassin's wordmark,
   Fuji's disc) overran the plate when max-height resolved against the
   grid cell rather than the plate. */
.brand-block .plate img{max-width:126px;max-height:60px;width:auto;height:auto;object-fit:contain}
.brand-block .plate .wordmark-tile{font-size:1.05rem}
.band-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.band-blurb{font-weight:600;line-height:1.35;font-size:.98rem}
.band-go{font-size:.82rem;opacity:.85}
.brand-block.soon .band{opacity:.9}
.brand-block .thumbs{list-style:none;margin:0;padding:16px 12px 12px;display:grid;width:100%;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-content:start}
.brand-block .thumbs li{min-width:0}
.brand-block .thumbs a{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit}
.brand-block .thumbs img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
  border:1px solid var(--line);border-radius:8px;background:#fff;display:block}
.brand-block .thumbs a:hover img{border-color:var(--band,#c8102e)}
.thumb-title{font-size:.74rem;line-height:1.3;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){.brand-block .plate{width:118px;height:64px}.brand-block .plate img{max-width:94px;max-height:48px}
  .brand-block .band{gap:12px;padding:14px}.thumb-title{display:none}}

/* A logo beside a submenu link (the umbrella's "Brand sites" menu). Small,
   on its own white chip so a mark shipped on white matches one on alpha,
   and the text stays the link. */
.submenu-logo{display:inline-block;vertical-align:middle;width:auto;height:18px;max-width:64px;
  object-fit:contain;margin:-2px 8px 0 0;background:#fff;border-radius:3px;padding:1px 2px}