/**
 * Buleedi Distributors — wholesale storefront.
 *
 * Design tokens come from the project brief and are shared with the admin
 * panel so the two cannot drift apart. They were chosen from the trade: the
 * navy of a chilled store, the blue of a plastic crate, the red of a bottle
 * cap.
 *
 * The layout priority throughout is a wholesale buyer placing a repeat order
 * quickly — dense rows, quantity entry on the card itself, item codes always
 * visible — not a consumer browsing for pleasure.
 */

/* -------------------------------------------------------------- tokens
 *
 * The palette follows the ledger, not the brochure. A deep ground that is
 * near-black but never neutral; a warm paper the cool photographs sit forward
 * of; one cool mid-tone that draws every rule, cell and border on the site;
 * and a single warm accent spent sparingly — twice on a page, not twenty
 * times. An accent used everywhere is not an accent.
 *
 * Names are unchanged from the first build so every existing screen follows
 * automatically. Only the values moved.
 */
:root {
  --cold-store: #07202a;        /* the ground */
  --cold-store-soft: #0e3340;
  --frost: #f2ede2;             /* paper */
  --crate: #1b6ca8;             /* structure */
  --crate-dark: #14568a;
  --cap: #cf2e23;               /* accent — 5.2:1 with white, unlike the old #e23a2e */
  --milk: #fffdf6;
  --ink: #101a1e;
  --ink-soft: #55666d;
  --line: #ddd5c6;              /* hairline on paper */
  --line-cool: #c6d9e2;         /* hairline on white */
  --ok: #1a7f5a;
  --warn: #a8610a;

  /* ---- the badge palette -------------------------------------------
   *
   * Sampled straight out of the logo artwork rather than picked to sit near
   * it, because the header is now built from the mark and a near-miss on a
   * large flat field is the most visible mistake a screen can make.
   *
   * Scoped to the header on purpose. The page below it stays on the paper-and-
   * ledger palette: the whole point of the badge's blue is that it announces
   * the top of the site, and a colour used everywhere announces nothing. */
  --badge-ink:   #040514;       /* the artwork's ground, 52% of its pixels */
  --badge-deep:  #07155C;       /* the field it graduates into */
  --badge-blue:  #2a57b9;       /* the rim */
  --badge-lit:   #5ca2e3;       /* the highlight on the rim */
  --badge-red:   #e81208;       /* the swoosh */
  --badge-silver:#dbdcde;       /* the wordmark */

  /* A draughtsman's corner, not a pill. */
  --radius: 3px;
  --radius-sm: 2px;

  /* Weight comes from rules and ground, not from soft shadow. */
  --shadow: 0 1px 0 rgba(7, 32, 42, .04);
  --shadow-lift: 0 1px 0 rgba(7, 32, 42, .07), 0 10px 26px rgba(7, 32, 42, .10);

  --font-head: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1240px;
}

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

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

body {
  margin: 0;
  background: var(--frost);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.2;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}

a { color: var(--crate); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* Keyboard focus must always be obvious — staff use this all day. */
:focus-visible {
  outline: 3px solid var(--crate);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* Urdu runs right-to-left and needs a face that has the glyphs. */
[lang="ur"], .ur {
  direction: rtl;
  font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", serif;
  line-height: 2.1;
}

/* ---------------------------------------------------------------- header */

/* THE HEADER IS BUILT FROM THE LOGO.
 *
 * Owner's direction, 2026-08-14: the menu header should be the design of the
 * logo. So the three bars at the top of every page are the badge taken apart
 * and laid flat —
 *
 *   topbar    the artwork's darkest ground
 *   masthead  its field, graduating exactly as the badge's does, with a soft
 *             light behind the mark where the badge has its own inner glow
 *   ribbon    the red-white-blue swoosh that arcs over the badge, straightened
 *             into the rule between masthead and nav. It is the one gesture
 *             that makes the mark recognisable at a glance, and it is the
 *             cheapest thing on the page to reproduce.
 *   nav       the rim blue
 *
 * It stops at the nav. Everything below stays on the paper-and-ledger palette
 * the catalogue is built in — a shopkeeper reordering forty cases needs the
 * product rows quiet, and a glossy blue running the length of the page would
 * be the site shouting at the person already inside it.
 */

.topbar {
  background: var(--badge-ink);
  color: #cfe6ee;
  font-size: 13px;
}
.topbar .wrap {
  display: flex; gap: 18px; align-items: center;
  justify-content: space-between; min-height: 38px; flex-wrap: wrap;
}
.topbar a { color: #cfe6ee; }
.topbar strong { color: #fff; }

/* The masthead reproduces the badge's own lighting: a deep ground, a field
   graduating up out of it, and a pool of light behind the mark. The radial is
   positioned at the mark, not at the centre of the bar, which is why it is
   written in absolute units from the left edge rather than percentages. */
.masthead {
  background:
    radial-gradient(58ch 150% at 90px 62%, rgba(42, 87, 185, .40), transparent 70%),
    linear-gradient(180deg, var(--badge-ink) 0%, var(--badge-deep) 100%);
  color: #fff;
  position: relative;
}
.masthead .wrap {
  display: flex; align-items: center; gap: 24px;
  padding-top: 16px; padding-bottom: 16px;
}

/* The swoosh, straightened.
   Three bands rather than a border, in the artwork's own order — red over
   white over blue. 4px total: enough to register as the logo's gesture, not
   enough to become a stripe the eye has to keep stepping over. */
.masthead::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(180deg,
    var(--badge-red)    0 40%,
    var(--badge-silver) 40% 65%,
    var(--badge-blue)   65% 100%);
}

.brand { display: flex; align-items: center; gap: 15px; color: #fff; }
.brand:hover { text-decoration: none; }

/* THE MARK IS BIG ON PURPOSE.
   It was 48px and the owner asked for it larger — correctly: this artwork is
   dense (a wordmark, a row of bottles, a mountain range and a domain inside
   one circle) and below about 64px it stops being a logo and becomes a blue
   smudge. 76px is the point where the wordmark resolves and the bottles read
   as bottles. It is served from the 256px file for that reason; anything
   smaller is soft on a phone.

   The wrapper exists so the gloss sweep has somewhere to live and so the drift
   has something to move that is not the <img> itself — the image keeps its own
   transform for the hover lift, and two animations fighting over one transform
   property is the usual way this effect breaks. */
.brand-badge {
  position: relative; flex: none;
  width: 76px; height: 76px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

/* THE RING HAS TO BE A PSEUDO-ELEMENT, AND THAT IS NOT FUSSiness.
   An inset box-shadow paints with the element's background — before its
   descendants — so on a wrapper whose child <img> fills it completely, an
   inset ring is covered by the photograph and never appears. Putting the
   border on the <img> instead works until the hover zoom, which scales the
   border along with the picture and pulls the frame off the edge. A
   positioned pseudo-element paints above in-flow content and does not scale,
   so the frame stays put while the artwork moves inside it. */
.brand-badge::before {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}
.brand-mark {
  width: 100%; height: 100%;
  display: block;
  border-radius: inherit;
}
.brand-name {
  font-family: var(--font-head); font-weight: 800; font-size: 22px;
  letter-spacing: -.02em; line-height: 1.15;
}
.brand-sub {
  font-size: 12px; color: #a8c6ec; margin-top: 1px;
  font-family: var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
}

/* The search box is the primary tool on this site, so it takes the space. */
.masthead-search { flex: 1 1 auto; max-width: 560px; }
.searchbox { display: flex; }
.searchbox input {
  flex: 1; min-width: 0;
  border: 1px solid transparent; border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 11px 14px; font: inherit; font-size: 15px;
}
.searchbox button {
  border: 0; background: var(--cap); color: #fff;
  padding: 0 18px; font: inherit; font-weight: 700; cursor: pointer;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.searchbox button:hover { background: #c72f24; }

.masthead-actions { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }

.nav {
  background: var(--badge-deep);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}
.nav .wrap { display: flex; gap: 4px; flex-wrap: wrap; }
/* Nav labels are set in the clinical register — small, tracked wide, mono.
   They are an index to the site, not a row of buttons. */
.nav a {
  color: #d6ecf4; padding: 12px 14px;
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.nav a:hover { text-decoration: none; background: rgba(255,255,255,.09); }
.nav a[aria-current="page"] { border-bottom-color: var(--badge-red); color: #fff; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 10px 16px; font: inherit; font-weight: 700; font-size: 14px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--cap); color: #fff; }
.btn-primary:hover { background: #c72f24; }
.btn-crate { background: var(--crate); color: #fff; }
.btn-crate:hover { background: var(--crate-dark); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-quiet { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { border-color: var(--crate); color: var(--crate); }
.btn-sm { padding: 7px 11px; font-size: 13px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------- layout */

.page { padding: 24px 0 56px; }
.cols { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }

.panel {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.panel-pad { padding: 16px; }
.panel h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); margin: 0 0 10px;
}

.facet { border-top: 1px solid var(--line); padding: 14px 16px; }
.facet:first-child { border-top: 0; }
.facet ul { list-style: none; margin: 0; padding: 0; }
.facet li { margin: 0 0 2px; }
.facet a {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 5px 8px; border-radius: var(--radius-sm);
  color: var(--ink); font-size: 14px;
}
.facet a:hover { background: var(--frost); text-decoration: none; }
.facet a[aria-current="true"] { background: var(--crate); color: #fff; font-weight: 700; }
.facet .count { color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.facet a[aria-current="true"] .count { color: #d6ecf4; }

/* ---------------------------------------------------------------- toolbar */

.toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.toolbar .result-count { color: var(--ink-soft); font-size: 14px; }
.toolbar select {
  font: inherit; font-size: 14px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}

/* ---------------------------------------------------------------- products */

.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.card {
  background: var(--milk); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .15s, border-color .15s;
}
.card:hover { box-shadow: var(--shadow-lift); border-color: #b8d6e2; }

.card-media {
  aspect-ratio: 4 / 3; background: #fff;
  display: grid; place-items: center; border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }

/* Items with no photograph yet still need to look deliberate, not broken. */
.card-media .noimg {
  font-family: var(--font-head); font-weight: 800;
  font-size: 26px; color: #c3dae4; letter-spacing: -.02em;
  text-align: center; padding: 8px; line-height: 1.15;
}

.card-body { padding: 11px 12px 12px; display: flex; flex-direction: column; flex: 1; gap: 7px; }
.card-code {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft);
  letter-spacing: .02em;
}
.card-name {
  font-weight: 700; font-size: 14.5px; line-height: 1.3; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-brand { font-size: 12px; color: var(--ink-soft); }
.card-foot { margin-top: auto; display: flex; align-items: end; justify-content: space-between; gap: 8px; }
.price { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--cold-store); }
.price small { font-weight: 600; font-size: 11px; color: var(--ink-soft); display: block; }

/* Quantity entry sits on the card: a wholesale buyer should never have to
   open a product page to order a case of something they buy every week. */
.qty-row { display: flex; gap: 6px; align-items: center; }
.qty-input {
  width: 100%; min-width: 0; font: inherit; font-size: 14px;
  padding: 8px 9px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.qty-input:focus { border-color: var(--crate); }

.badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 99px; letter-spacing: .02em;
}
.badge-in { background: #e3f4ec; color: var(--ok); }
.badge-out { background: #fdeceb; color: var(--cap); }
.badge-unknown { background: #f2f6f8; color: var(--ink-soft); }

.stock-line { display: flex; align-items: center; gap: 6px; font-size: 12px; }

/* ---------------------------------------------------------------- misc */

.empty {
  text-align: center; padding: 60px 20px; color: var(--ink-soft);
  background: #fff; border: 1px dashed var(--line); border-radius: var(--radius);
}
.empty h2 { color: var(--ink); }

.pager { display: flex; gap: 6px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.pager a, .pager span {
  padding: 8px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums;
}
.pager a:hover { border-color: var(--crate); text-decoration: none; }
.pager [aria-current="page"] { background: var(--crate); color: #fff; border-color: var(--crate); font-weight: 700; }

.notice {
  padding: 11px 14px; border-radius: var(--radius-sm); font-size: 14px;
  border: 1px solid; margin-bottom: 16px;
}
.notice-info { background: #eef7fb; border-color: #bcdcea; color: #16536e; }
.notice-warn { background: #fdf5e8; border-color: #edd6a8; color: var(--warn); }

.syncline { font-size: 12px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- footer */

.foot { background: var(--cold-store); color: #a9cddb; margin-top: 40px; padding: 34px 0 22px; }
.foot h4 { color: #fff; font-size: 14px; margin-bottom: 10px; }
.foot a { color: #cfe6ee; }
.foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 26px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 6px; font-size: 14px; }
.foot-base {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 13px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; }
  .facets-mobile { order: -1; }
  .masthead .wrap { flex-wrap: wrap; }
  .masthead-search { order: 3; flex-basis: 100%; max-width: none; }
}

@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
  .card-body { padding: 9px 10px 10px; }
  .card-name { font-size: 13.5px; }
  .price { font-size: 16px; }
  .brand-sub { display: none; }
  .wrap { padding: 0 14px; }

  /* The mark comes down to 60px on a phone but no further. Below that the
     wordmark inside it closes up and the whole thing goes back to being a
     blue smudge, which is the state the owner asked to get out of. The name
     beside it takes the reduction instead — it is still legible at 18px and
     the badge is what is being recognised. */
  .brand-badge { width: 60px; height: 60px; border-radius: 13px; }
  .brand-name { font-size: 18px; }
  .brand { gap: 12px; }
  .masthead .wrap { padding-top: 12px; padding-bottom: 12px; }
}

@media print {
  .topbar, .nav, .masthead-search, .masthead-actions, .pager, .foot { display: none; }
}

/* =========================================================================
 * HOMEPAGE — Ledger Grammar
 *
 * The front page of a distributor is a claim about depth of stock, and the
 * photographs are the evidence. So the page is built the way a plate book is
 * built: a measured armature, three scale registers that never blur into each
 * other, and colour spent so sparingly that the one accent still means
 * something when it arrives.
 *
 *   MONUMENTAL  the headline and the full-bleed plates. Read across a room.
 *   SYSTEMATIC  the ruled field of counts, the product grid, the brand index.
 *               One module, repeated exactly.
 *   CLINICAL    mono numerals and tracked labels at the margins — the section
 *               index, the plate marks, the sync time. Annotations, whispered.
 *
 * Nothing sits in the comfortable middle. A heading is either 82px or it is an
 * 11px tracked label; there is no 20px semibold anywhere on this page.
 *
 * Vertical rhythm is one variable. Every rule on the page is 1px of --line.
 * ====================================================================== */

:root {
  --section: clamp(58px, 7.6vw, 106px);
  --fs-display: clamp(38px, 6.6vw, 82px);
  --fs-h2: clamp(25px, 3.4vw, 42px);
}

.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }

/* The hero sits flush under the nav; .page's top padding is for inner pages. */
.page > .hero:first-child { margin-top: -24px; }

/* ------------------------------------------------- the clinical register */

.eyebrow,
.reg-name,
.plate-mark,
.plate-cap,
.syncline,
.field-cell span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  line-height: 1.5;
}

.eyebrow { color: #8fc4d8; margin: 0 0 16px; }
.eyebrow-dark { color: var(--crate); }

/* A section opens the way a plate is labelled: index, rule, name. The rule is
   the armature made briefly visible. */
.reg {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 30px;
}
.reg-line { flex: 1 1 auto; height: 1px; background: var(--line); }
.reg-name { color: var(--ink-soft); flex: none; }

.section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.section-head h2 { font-size: var(--fs-h2); margin: 0; letter-spacing: -.03em; }
.section-head .syncline { margin: 8px 0 0; color: var(--ink-soft); }

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative; isolation: isolate;
  min-height: clamp(500px, 80vh, 760px);
  display: grid; align-items: end;
  background: var(--cold-store);
  overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
/* The shopfront sits in the lower half of the frame; on a tall viewport the
   crop must hold the building and the sign, not the empty sky above it. */
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }

/* Four stops, not two. Dense under the headline, gone by the roofline, so the
   sky still reads as sky. Measured against the brightest pixel that falls
   under the type — the whitewashed wall, not the average of the frame. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top,
      rgb(4 18 24 / .93) 0%,
      rgb(4 18 24 / .82) 26%,
      rgb(4 18 24 / .48) 58%,
      rgb(4 18 24 / .10) 100%),
    linear-gradient(to right, rgb(4 18 24 / .60), rgb(4 18 24 / 0) 68%);
}
.hero-in {
  position: relative; z-index: 2;
  padding-block: clamp(40px, 6vw, 76px);
}
.hero-title {
  color: #fff; margin: 0 0 18px;
  font-size: var(--fs-display);
  line-height: .97; letter-spacing: -.035em; max-width: 14ch;
  text-wrap: balance;
}
.hero-title .accent { color: #7fc4e6; }
.hero-lede {
  color: #d7e8ef; font-size: clamp(15px, 1.45vw, 18.5px);
  max-width: 54ch; margin: 0 0 30px; line-height: 1.6;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-lg { padding: 15px 26px; font-size: 15px; }

/* The plate mark: what this photograph is, and where. Bottom right, quiet. */
.hero-mark {
  position: absolute; z-index: 2; right: 20px; bottom: 16px;
  color: rgb(255 255 255 / .62);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .17em; text-transform: uppercase;
  text-align: right; max-width: 46vw;
}

/* ------------------------------------------------------- the ruled field */

/* Counts, in cells, ruled. The grid line is the background showing through a
   1px gap — one border drawn once, never a border per cell fighting its
   neighbour. */
.field {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--line);
  margin-top: calc(var(--section) * -0.44);
  position: relative; z-index: 3;
}
.field-cell { background: var(--milk); padding: 26px 20px 22px; }
.field-cell b {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(30px, 4vw, 46px); line-height: .94;
  letter-spacing: -.035em; color: var(--cold-store);
  font-variant-numeric: tabular-nums;
}
.field-cell span { display: block; color: var(--ink-soft); margin-top: 11px; }

/* ---------------------------------------------------------------- plate */

/* A full-bleed photograph, given the whole width and nothing to compete with.
   This is the monumental register: one image, one caption, no headline. */
.plate { margin-block: var(--section); }
.plate-media {
  aspect-ratio: 21 / 9;
  background: var(--cold-store);
  border-block: 1px solid var(--line);
}
.plate-cap {
  max-width: var(--wrap); margin: 0 auto; padding: 12px 20px 0;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  color: var(--ink-soft);
}
.plate-cap b { color: var(--ink); font-weight: 500; }

@media (max-width: 700px) {
  /* 21:9 is a letterbox on a phone. Give the plate back some height. */
  .plate-media { aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------------- bands */

/* Asymmetric on purpose: the photograph carries more of the width than the
   text, because the photograph is the evidence and the text is the caption
   to it. */
.band {
  display: grid; grid-template-columns: 1.12fr .88fr;
  gap: clamp(26px, 4.5vw, 66px); align-items: center;
}
.band-reverse .band-text { order: 2; }
.band-text h2 {
  font-size: var(--fs-h2); margin: 0 0 14px; letter-spacing: -.03em;
  text-wrap: balance;
}
.band-text p { color: var(--ink-soft); font-size: 16.5px; max-width: 46ch; margin: 0 0 15px; }
.band-text .btn { margin-top: 10px; }
.band-rule { height: 1px; background: var(--line); margin: 0 0 22px; }

.band-media { margin: 0; }
.band-media .media,
.band-media picture { display: block; }
.band-media .media {
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line);
  background-color: var(--frost);
}
.band-media img { width: 100%; height: 100%; object-fit: cover; }
.band-media figcaption {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line);
  line-height: 1.6;
}

/* A slot with no photograph must look like unfilled capacity, not breakage. */
.band-media-empty .ph {
  aspect-ratio: 3/2; border: 1px dashed var(--line); background: var(--milk);
  display: grid; place-items: center; padding: 26px; text-align: center;
}
.band-media-empty .ph span {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: #a99e8c; max-width: 28ch; line-height: 1.8;
}

/* The portrait plate.
   Square, because the photograph is. Two people and a signboard do not
   survive being poured into the 3:2 the room shots use — the crop takes the
   sign off the top and their feet off the bottom. It is also capped and
   pushed to the outer edge of its column: a full-width square in the wider
   half of the band stands taller than the text beside it and turns a portrait
   into a poster. */
.band-media-square .media,
.band-media-square.band-media-empty .ph { aspect-ratio: 1 / 1; }
.band-media-square { max-width: 520px; }
.band-reverse .band-media-square { margin-inline-end: auto; }

/* ---------------------------------------------------------------- named
 *
 * A plate label, not a staff directory. The name carries in the text face and
 * the line under it stays in the mono caption voice the photographs use, so
 * the two read as one object even though they sit in different columns. */
.named { list-style: none; margin: 24px 0 0; padding: 0; }
.named li {
  padding: 13px 0; border-top: 1px solid var(--line);
}
.named li:last-child { border-bottom: 1px solid var(--line); }
.named b {
  display: block; font-family: var(--font-head); font-weight: 700;
  font-size: 17px; letter-spacing: -.01em; color: var(--ink);
}
.named span {
  display: block; margin-top: 3px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* ---------------------------------------------------------------- steps */

.steps { list-style: none; margin: 22px 0 0; padding: 0; }
.steps li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 13px 0; border-top: 1px solid var(--line);
  font-size: 15.5px; color: var(--ink);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li span {
  flex: none; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; color: var(--cap);
}

/* --------------------------------------------------------------- values */

.valueband {
  background: var(--cold-store); color: #fff;
  padding-block: var(--section); margin-block: var(--section);
}
.valueband .eyebrow { color: #7fa9bc; }
.valueband-title { color: #fff; font-size: var(--fs-h2); margin: 0 0 10px; letter-spacing: -.03em; }
.valueband-lede { color: #9dc4d4; max-width: 56ch; margin: 0 0 34px; font-size: 16.5px; }

.values {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px; background: rgb(255 255 255 / .14);
  border: 1px solid rgb(255 255 255 / .14);
}
.value { background: var(--cold-store); padding: 24px 20px 26px; }
.value h3 {
  color: #fff; font-size: 16px; margin: 0 0 8px; letter-spacing: -.01em;
}
.value p { color: #9dc4d4; font-size: 14px; margin: 0; }

/* ---------------------------------------------------------- brand index */

/* An index, not a row of pills: name left, count right, ruled between. It is
   the same object as a page of stock figures, and it reads faster. */
.index {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  column-gap: clamp(24px, 4vw, 56px);
  border-top: 1px solid var(--line);
}
.index a {
  display: grid; grid-template-columns: 2.4rem 1fr auto;
  align-items: baseline; gap: 12px;
  padding: 13px 6px; border-bottom: 1px solid var(--line);
  color: var(--ink); font-size: 15px; font-weight: 600;
}
.index a:hover { background: rgb(27 108 168 / .06); text-decoration: none; color: var(--crate); }
.index .n,
.index .c {
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: .1em; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.index .n { color: var(--crate); }

/* ------------------------------------------------------------------ cta */

.cta {
  background: var(--cold-store); color: #fff;
  padding: clamp(34px, 5.5vw, 68px) clamp(22px, 4vw, 56px);
  border: 1px solid var(--cold-store);
}
.cta h2 { color: #fff; font-size: var(--fs-h2); margin: 0 0 12px; letter-spacing: -.03em; }
.cta p { color: #bcdcea; max-width: 52ch; margin: 0 0 26px; font-size: 16.5px; }
.cta-foot {
  color: #7fa9bc !important; margin: 28px 0 0 !important;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.8;
}

/* --------------------------------------------------- catalogue offline */

/* The live counts come from a database shared with the trading counter. When
   that is unreachable the story, the photographs and the phone number are all
   still true, so the page keeps them and says plainly what is missing. A
   distributor's front page going blank because a query failed is the worst
   available outcome. */
.offline {
  border: 1px solid var(--line); border-left: 3px solid var(--warn);
  background: var(--milk); padding: 22px 24px;
}
.offline h2 { font-size: 19px; margin: 0 0 8px; }
.offline p { color: var(--ink-soft); margin: 0 0 6px; font-size: 15px; }

/* --------------------------------------------------------------- narrow */

@media (max-width: 900px) {
  .band { grid-template-columns: 1fr; }
  .band-reverse .band-text { order: 0; }
}

@media (max-width: 640px) {
  .field { margin-top: 0; }
  .hero { min-height: auto; }
  .hero-mark { display: none; }
  .hero-title { max-width: 100%; }
  .index { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- questions
   The FAQ on the homepage. A ruled list, not a card grid: these are sentences
   to be read, and the ledger rule is the site's grammar for "a row in a book".

   <details> rather than a JavaScript accordion — it opens without script, it
   is keyboard-operable for free, and, the part that matters here, the closed
   answers are still real text in the document. A crawler or an assistant that
   does not run JavaScript reads all of it either way. */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 34px 18px 0; position: relative;
  font-family: var(--font-head); font-weight: 700; font-size: 17px; letter-spacing: -.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  font-family: var(--font-mono); font-size: 19px; font-weight: 400; color: var(--crate);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--crate); }
.faq-item summary:focus-visible { outline: 2px solid var(--crate); outline-offset: 3px; }
.faq-item p {
  margin: 0 0 20px; padding-right: 34px; max-width: 74ch;
  color: var(--ink-soft); font-size: 15.5px; line-height: 1.62;
}

/* ------------------------------------------------------------------ the NAP
   Name, address, phone — the block every local-search guide calls the NAP, and
   the one thing that has to read identically here, on Google Business and on
   any directory that lists the shop. A definition list because that is what it
   is: labelled facts, not prose. */
.nap { margin: 0; }
.nap div { display: grid; grid-template-columns: 128px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.nap div:last-child { border-bottom: 0; }
.nap dt { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); padding-top: 3px; }
.nap dd { margin: 0; font-size: 15px; }
@media (max-width: 560px) { .nap div { grid-template-columns: 1fr; gap: 2px; } }

/* An item the counter has not priced. Deliberately quieter than a price and
   in the body face, not the numeral face — it is a sentence, not a figure, and
   it must never be mistaken for one at a glance. */
.price-onrequest {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0;
}