@charset "UTF-8";

/* ==========================================================================
   מ.א. שיווק הפצה וייצור
   Design system

   Motif: engraving removes material. Nothing in this interface floats on the
   page — the things that matter are cut into it. Cards are recessed, section
   rules are incised, and the one bright material is brass, used sparingly
   because brass is what you engrave, not what you decorate with.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — self-hosted, no external requests
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/frank-ruhl-libre-hebrew-500-normal.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/frank-ruhl-libre-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/frank-ruhl-libre-hebrew-700-normal.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Frank Ruhl Libre";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/frank-ruhl-libre-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/assistant-hebrew-400-normal.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/assistant-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/assistant-hebrew-600-normal.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/assistant-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/assistant-hebrew-700-normal.woff2") format("woff2");
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Assistant";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/assistant-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces — cream, never a bright white. A cold white would make a
     40-year family workshop read like a SaaS dashboard. */
  --paper: #faf8f4;
  --card: #fffefc;
  --surface: #f3efe7;
  --surface-2: #eae4d9;

  /* Ink */
  --ink: #14181f;
  --ink-2: #38404c;
  --muted: #5f6772;

  /* Deep blue — structure, trust, the institutional side of the client list */
  --navy: #0e2f4b;
  --navy-2: #17456b;
  --navy-ink: #0a2338;

  /* The hero navy. Deep and quiet, so the gold has something to be gold
     against — this is the one place on the site that goes dark. */
  --hero-1: #14294a;
  --hero-2: #0d1b30;
  --hero-panel: #101f38;
  --hero-line: rgba(201, 162, 77, 0.28);

  /* Matte gold. Two values: one for surfaces and rules, one darkened to clear
     4.5:1 on cream for text. Nothing here should ever look like foil. */
  --gold: #a9873f;
  --gold-text: #856231;
  /* On the navy, gold is a surface colour, not just an accent */
  --gold-lift: #c9a24d;
  --gold-soft: #dcbd7c;

  /* Paper grain — an inline SVG so it costs no request. Applied to every
     surface that carries a background colour, otherwise the sections that
     paint over the body would show up flat next to the ones that don't. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.038'/%3E%3C/svg%3E");

  /* Lines */
  --rule: #e2dbce;
  --rule-strong: #cec5b4;

  /* Type */
  --display: "Frank Ruhl Libre", "Times New Roman", serif;
  --body: "Assistant", system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-hero: clamp(2.25rem, 6.4vw, 3.25rem);
  --t-h2: clamp(1.9rem, 6vw, 3.25rem);
  --t-h3: clamp(1.2rem, 3.2vw, 1.5rem);
  --t-lead: clamp(1.125rem, 2.8vw, 1.4375rem);
  --t-body: 1.125rem;
  --t-sm: 1rem;
  --t-xs: 0.875rem;

  /* Rhythm */
  --gutter: 1.4rem;
  --measure: 34rem;
  --section-y: clamp(4rem, 11vw, 8.5rem);

  --radius: 3px;
  --radius-lg: 5px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 160ms;
  --med: 280ms;

  /* Engraved depth: light from above, so the highlight sits below the cut */
  --cut: inset 0 1px 2px rgba(20, 24, 31, 0.07), inset 0 -1px 0 rgba(255, 255, 255, 0.85);
  --cut-deep: inset 0 2px 5px rgba(20, 24, 31, 0.1), inset 0 -1px 0 rgba(255, 255, 255, 0.9);

  --header-h: 4rem;
  --bar-h: 4.25rem;
}

@media (min-width: 48rem) {
  :root {
    --gutter: 2.75rem;
    --t-body: 1.1875rem;
    --header-h: 5rem;
    --bar-h: 0rem;
  }
}
@media (min-width: 80rem) {
  :root { --gutter: 4rem; }
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper) var(--grain);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Mobile action bar sits over the page bottom — keep the last content clear */
@media (max-width: 47.999rem) {
  body { padding-bottom: var(--bar-h); }
}

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

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.14;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--gold-lift);
  outline-offset: 3px;
  border-radius: 2px;
}
/* On cream the gold ring is too pale to read as focus */
.section:not(.section--dark) :focus-visible,
.railband :focus-visible { outline-color: var(--hero-1); }

::selection {
  background: var(--navy);
  color: #fff;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 56rem; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(3rem, 7vw, 5rem); }
.section--surface { background: var(--surface) var(--grain); }
/* The section straight after the hero band keeps the cream going rather than
   snapping back to the page white. */
.railband + .section { background: var(--paper) var(--grain); }
.section--dark {
  background: linear-gradient(168deg, var(--hero-1), var(--hero-2)), var(--grain);
  color: rgba(255, 255, 255, 0.78);
}
.section--dark h2, .section--dark h3 { color: #fff; }

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
}
.skip:focus { inset-inline-start: 1rem; }

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

/* --------------------------------------------------------------------------
   5. Section headers — the incised rule
   -------------------------------------------------------------------------- */

/* The first words of every section. They were set at the caption size, which
   made them read as a footnote to the heading rather than the label that
   opens it — on a phone, where one section fills the screen, that left every
   new subject starting quietly. Bigger, heavier, and closer to the heading it
   belongs to. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--gold-text);
  margin-bottom: 0.75rem;
}
@media (min-width: 44rem) { .eyebrow { font-size: 0.875rem; } }

.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  max-width: 5rem;
  background: var(--gold);
  opacity: 0.5;
  transform-origin: right center;
  transform: scaleX(var(--rule-scale, 1));
  transition: transform 700ms var(--ease) 120ms;
}

.section--dark .eyebrow { color: var(--gold-soft); }
.section--dark .eyebrow::after { background: var(--gold-lift); }

.section-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head h2 { font-size: var(--t-h2); }
.section-head p {
  margin-top: 1rem;
  max-width: var(--measure);
  font-size: var(--t-lead);
  color: var(--muted);
}
.section--dark .section-head p { color: rgba(255, 255, 255, 0.7); }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--hero-1);
  --btn-fg: #fff;
  --btn-bd: var(--hero-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease),
              border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn:hover { --btn-bg: var(--navy-2); --btn-bd: var(--navy-2); }

/* The gold outline is the second voice — used where an action matters but is
   not the one thing on the screen. */
.btn--gold {
  --btn-bg: transparent;
  --btn-fg: var(--gold-text);
  --btn-bd: var(--gold);
}
.btn--gold:hover { --btn-bg: var(--gold); --btn-fg: #fff; --btn-bd: var(--gold); }
.section--dark .btn--gold,
.hero .btn--gold { --btn-fg: var(--gold-soft); --btn-bd: var(--hero-line); }
.section--dark .btn--gold:hover,
.hero .btn--gold:hover { --btn-bg: var(--gold-lift); --btn-fg: var(--hero-2); --btn-bd: var(--gold-lift); }
.btn:active { transform: translateY(1px); }

/* The primary action is gold, not WhatsApp green. The glyph still says
   WhatsApp; the colour says which business this is. */
.btn--wa {
  --btn-bg: var(--gold-lift);
  --btn-bd: var(--gold-lift);
  --btn-fg: #14294a;
}
.btn--wa:hover { --btn-bg: var(--gold-soft); --btn-bd: var(--gold-soft); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--rule-strong);
}
.btn--ghost:hover { --btn-bg: var(--surface-2); --btn-bd: var(--ink); }

/* A ghost button inherits ink-on-paper colours. On any dark panel that leaves
   it all but invisible, so flip it wherever the ground is dark. */
.section--dark .btn--ghost,
.hero .btn--ghost,
.locate .btn--ghost,
.sheet .btn--ghost {
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.32);
}
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.locate .btn--ghost:hover,
.sheet .btn--ghost:hover {
  --btn-bg: rgba(255, 255, 255, 0.12);
  --btn-bd: rgba(255, 255, 255, 0.7);
}

.btn--gold {
  --btn-bg: transparent;
  --btn-fg: var(--gold-text);
  --btn-bd: var(--gold);
}
.btn--gold:hover { --btn-bg: var(--gold); --btn-fg: #fff; }

.btn--lg { min-height: 3.5rem; padding-inline: 2rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* On a phone every primary action gets the full width — a half-width tap
   target next to a full-width one reads as the lesser option. */
@media (max-width: 34rem) {
  .btn-row { display: grid; }
  .btn-row .btn { width: 100%; }
}

/* Four actions: the first leads, the other three share the row beneath it
   rather than stacking into a wall of buttons. */
.btn-row--four {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}
.btn-row--four .btn:first-child,
.btn-row--four .btn:last-child { grid-column: 1 / -1; }
@media (min-width: 34rem) {
  .btn-row--four { display: flex; flex-wrap: wrap; }
  .btn-row--four .btn:first-child,
  .btn-row--four .btn:last-child { grid-column: auto; }
}
.btn-row--four .btn { padding-inline: 1.15rem; }

/* Text link with an underline that reads as a scored line */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--gold-text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  transition: gap var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.link:hover { gap: 0.7rem; border-color: var(--gold-text); }
/* Same reasoning as the footer, for the standing links — "all articles",
   "all reviews" — without the scored underline moving. */
.link { padding-block: 0.55rem 0.35rem; }
.link svg { width: 0.85em; height: 0.85em; }

/* --------------------------------------------------------------------------
   6b. Top contact strip — the first line on the page is how to reach them
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--hero-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.62);
}
.topbar .wrap {
  display: flex;
  align-items: center;
  gap: 0.35rem 1.25rem;
  flex-wrap: wrap;
  min-height: 2.5rem;
  padding-block: 0.3rem;
}
.topbar a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--fast) var(--ease);
}
.topbar a:hover { color: var(--gold-lift); }
.topbar svg { width: 0.95rem; height: 0.95rem; color: var(--gold-lift); }
.topbar__hours { margin-inline-start: auto; }
.topbar__num { margin-inline-start: 0.35rem; }

/* On a phone the strip has to stay one row — a second row here costs the
   opening screen more than the numbers are worth, and the bar at the foot of
   the screen carries the same four actions anyway. */
@media (max-width: 40rem) {
  .topbar__hours,
  .topbar__num { display: none; }
  .topbar .wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding-block: 0;
  }
  .topbar a {
    justify-content: center;
    gap: 0.3rem;
    font-size: 0.8125rem;
    min-height: 2.5rem;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.08);
  }
  .topbar a:first-child { border-inline-start: none; }
}

.section--dark .link { color: var(--gold-soft); border-bottom-color: var(--hero-line); }
.section--dark .link:hover { border-bottom-color: var(--gold-lift); }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(13, 27, 48, 0.82);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--med) var(--ease), background var(--med) var(--ease);
}

.header[data-stuck="true"] {
  background: rgba(10, 21, 38, 0.94);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.header .wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding-block: 0.6rem;
  text-decoration: none;
  margin-inline-end: auto;
}
/* The seal, at the size it is actually used. The small version drops the ring
   of words on purpose — at 40px they would be a smudge, and a logo that has to
   be squinted at is not doing its job. */
.brand__mark {
  display: inline-flex;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
}
.brand__mark .seal { width: 100%; height: 100%; }
@media (min-width: 44rem) { .brand__mark { width: 2.75rem; height: 2.75rem; } }

.footer__seal {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  margin-bottom: 0.9rem;
}
.footer__seal .seal { width: 100%; height: 100%; }
/* The business is called מ.א. שיווק הפצה וייצור. The year rides on the same
   line, quieter — never on a line of its own, where it would read as though
   that were the name. Below 34rem the year drops and the name stays whole. */
.brand__name {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
}
.brand__name span {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
}
/* The name stays on a phone. Hiding it left a badge with no words beside it,
   which is the one thing a header must not do — the seal says מ.א., and only
   the line beside it says what מ.א. is. It steps down in size rather than
   stepping out, and drops to two lines before it drops the year. */
@media (max-width: 34rem) {
  .brand__name { font-size: 0.8rem; line-height: 1.25; }
  .brand__name span { display: block; font-size: 0.66rem; }
}
@media (max-width: 21rem) { .brand__name span { display: none; } }

.nav { display: none; }

@media (min-width: 62rem) {
  .nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
  }
  .nav a {
    font-size: var(--t-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    padding-block: 0.35rem;
    position: relative;
    transition: color var(--fast) var(--ease);
  }
  .nav a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: var(--gold-lift);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--med) var(--ease);
  }
  .nav a:hover { color: #fff; }
  .nav a:hover::after { transform: scaleX(1); }
}

.header__cta { display: none; }
@media (min-width: 48rem) {
  .header__cta {
    display: inline-flex;
    min-height: 2.5rem;
    padding: 0.4rem 1rem;
    font-size: var(--t-xs);
    /* A phone number that wraps reads as two numbers. Nothing in this button
       is ever worth breaking across lines. */
    white-space: nowrap;
  }
}

/* Menu toggle */
.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  cursor: pointer;
}
@media (min-width: 62rem) { .menu-btn { display: none; } }

.menu-btn span {
  position: relative;
  width: 1.15rem;
  height: 1px;
  background: #fff;
  transition: background var(--fast) var(--ease);
}
.menu-btn span::before,
.menu-btn span::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: #fff;
  transition: transform var(--med) var(--ease);
}
.menu-btn span::before { top: -6px; }
.menu-btn span::after { top: 6px; }

.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* Mobile sheet */
.sheet {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 55;
  background: var(--hero-2) var(--grain);
  color: rgba(255, 255, 255, 0.8);
  padding: 2rem var(--gutter) 3rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.75rem);
  transition: opacity var(--med) var(--ease), transform var(--med) var(--ease), visibility var(--med);
}
.sheet[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 62rem) { .sheet { display: none; } }

.sheet nav {
  display: grid;
  gap: 0.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.sheet nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0.25rem;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sheet nav a span {
  font-family: var(--body);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--gold-lift);
  letter-spacing: 0.1em;
}

.sheet__contact {
  margin-top: 2rem;
  display: grid;
  gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   8. Hero — the one dark room in the building
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
  background:
    radial-gradient(90% 70% at 78% 12%, rgba(201, 162, 77, 0.16), transparent 60%),
    linear-gradient(158deg, var(--hero-1) 0%, var(--hero-2) 100%),
    var(--grain);
  color: rgba(255, 255, 255, 0.82);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    align-items: stretch;
    min-height: min(42rem, 82svh);
  }
}

/* The copy column keeps the site's content edge; the photograph beside it
   runs off the far edge of the screen. */
.hero__copy {
  padding-block: clamp(2.25rem, 6vw, 4.5rem) clamp(1.25rem, 4vw, 3.5rem);
  padding-inline-start: max(var(--gutter), calc((100vw - 78rem) / 2));
  padding-inline-end: var(--gutter);
  align-self: center;
  max-width: 42rem;
}
@media (min-width: 62rem) {
  .hero__copy { padding-inline-end: clamp(2rem, 4vw, 3.5rem); }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold-soft);
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--hero-line);
  border-radius: 100px;
  margin-bottom: 1.5rem;
}
.hero__eyebrow::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-lift);
}
/* On an article the pill is the way back to the index, so it has to be a
   target and not just a label. The link fills the pill rather than sitting
   inside it, and on touch the pill grows to a thumb's worth of height. */
.hero__back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* Pulls back the pill's own padding, so the link fills a thumb-sized box
     without the pill growing past the height it already wanted to be. */
  margin-block: -0.45rem;
  color: inherit;
  text-decoration: none;
}

.hero h1 {
  font-size: var(--t-hero);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: #fff;
  margin-bottom: 1.25rem;
}
/* The subject of the sentence is the subject of the business */
.hero h1 em {
  font-style: normal;
  color: var(--gold-lift);
}

.hero__lead {
  font-size: var(--t-lead);
  color: rgba(255, 255, 255, 0.72);
  max-width: 32rem;
  margin-bottom: 2rem;
}

.hero .btn--ghost {
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, 0.28);
}
.hero .btn--ghost:hover { --btn-bg: rgba(255, 255, 255, 0.1); --btn-bd: rgba(255, 255, 255, 0.6); }

/* --------------------------------------------------------------------------
   8b. The photograph
   -------------------------------------------------------------------------- */

.hero__media {
  position: relative;
  min-height: 18rem;
  overflow: hidden;
}
@media (max-width: 61.999rem) {
  .hero__media { aspect-ratio: 4 / 3; min-height: 0; }
}

.hero__media .shot {
  position: absolute;
  inset: 0;
  width: auto;
  aspect-ratio: auto;
  border: none;
  border-radius: 0;
}
.hero__media .shot img,
.hero__media .shot video { width: 100%; height: 100%; object-fit: cover; }

/* The clip sits over the still and fades in once it can actually play, so a
   refused autoplay leaves the photograph on screen rather than a black box. */
.shot__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.shot__video.is-playing { opacity: 1; }
.shot__still { position: absolute; inset: 0; }

/* The photograph fades into the navy on the side that meets the copy, so the
   two halves read as one image rather than a panel pasted on. */
.hero__media--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to left, var(--hero-1) 0%, rgba(20, 41, 74, 0.55) 14%, transparent 40%);
}
@media (max-width: 61.999rem) {
  .hero__media--photo::after {
    background: linear-gradient(to bottom, rgba(20, 41, 74, 0.75) 0%, transparent 30%);
  }
}

/* The maker's mark, struck across the photograph */
.hero__seal {
  position: absolute;
  z-index: 2;
  inset-inline-end: clamp(1rem, 5vw, 3.5rem);
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  width: clamp(5rem, 11vw, 8rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--gold-lift);
  background: rgba(13, 27, 48, 0.72);
  border: 1px solid var(--hero-line);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.75);
}
.hero__seal svg { width: 88%; height: 88%; }

/* --------------------------------------------------------------------------
   8c. Trust bar — a dark card laid across the seam
   -------------------------------------------------------------------------- */

.trustbar {
  list-style: none;
  padding: 0;
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--hero-panel);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  margin-bottom: clamp(-4.5rem, -7vw, -3rem);
}
@media (min-width: 62rem) { .trustbar { grid-template-columns: repeat(4, 1fr); } }

.trustbar li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.08);
}
.trustbar li:nth-child(-n + 2) { border-top: none; }
.trustbar li:nth-child(odd) { border-inline-start: none; }
@media (min-width: 62rem) {
  .trustbar li { border-top: none; padding: 1.35rem 1.5rem; }
  .trustbar li:first-child { border-inline-start: none; }
  .trustbar li:nth-child(odd) { border-inline-start: 1px solid rgba(255, 255, 255, 0.08); }
  .trustbar li:first-child { border-inline-start: none; }
}

.trustbar svg {
  width: 1.5rem; height: 1.5rem;
  flex: none;
  color: var(--gold-lift);
}
.trustbar b {
  display: block;
  font-size: var(--t-sm);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.trustbar span {
  display: block;
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.1rem;
}

/* --------------------------------------------------------------------------
   8d. The band the card lands on — cream, never a bright white
   -------------------------------------------------------------------------- */

.railband {
  background: var(--surface) var(--grain);
  padding-top: calc(clamp(3rem, 7vw, 4.5rem) + 2rem);
  padding-bottom: clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.railband .rail { border-top: none; padding-top: 0; padding-bottom: 0; margin-top: 0; }

/* The drawn stamping scene stands in for the photograph. On the navy it is
   struck in gold; the paper it sits on is painted here rather than in the SVG
   so the drawing can centre in any crop without the sheet being cut. */
.scene {
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--gold-lift);
  background: radial-gradient(72% 62% at 46% 48%, rgba(201, 162, 77, 0.08), transparent 72%);
}
/* Deliberately held back. This drawing is reserved space for the photograph,
   not the artwork the hero was designed around — at full strength it competes
   with the headline and reads as a finished choice, which it is not. */
.scene svg { width: 100%; height: 100%; opacity: 0.4; padding: 11%; }

/* --------------------------------------------------------------------------
   8e. Inner page hero — the same room, smaller
   -------------------------------------------------------------------------- */

.hero--page { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.hero--page .hero__copy {
  padding-block: clamp(2rem, 5vw, 3.25rem) 0;
  max-width: 52rem;
}
.hero--page h1 { font-size: clamp(2rem, 5.5vw, 3rem); }
.hero--page .hero__lead { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   8f. Articles
   -------------------------------------------------------------------------- */

.posts {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 44rem) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .posts { grid-template-columns: repeat(3, 1fr); } }

.post {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.post:hover { border-color: var(--gold); box-shadow: 0 20px 44px -24px rgba(20, 41, 74, 0.45); }

.post__media {
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.post:hover .post__media img { transform: scale(1.03); }
.post__body {
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.post__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.post__mark {
  display: inline-flex;
  flex: none;
}
.post__mark svg { width: 1.4rem; height: 1.4rem; color: var(--gold); }
.post__body time {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-text);
}
.post__body h3 { font-size: var(--t-h3); }
.post__sum { font-size: var(--t-sm); color: var(--muted); }
.post__body .card__go { margin-top: auto; padding-top: 0.5rem; }

/* A coverless card carries the whole weight in type, so it gets more room to
   breathe and a gold hairline on the reading edge to hold the column together
   down a long index. */
.post--text {
  border-inline-start: 3px solid transparent;
  transition: border-color var(--med) var(--ease), box-shadow var(--med) var(--ease);
}
.post--text .post__body { padding: clamp(1.4rem, 4vw, 1.85rem); gap: 0.7rem; }
.post--text:hover { border-inline-start-color: var(--gold); }

/* The body of an article, as it came out of WordPress */
.article__cover {
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule);
  overflow: hidden;
  line-height: 0;
}
.article__cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
/* A guilloché plate is drawn, not photographed, so it carries the navy ground
   itself and wants a gold hairline rather than the paper-coloured rule. */
.article__cover--plate {
  border-color: rgba(201, 162, 77, 0.32);
  background: var(--navy);
}
.article__cover--plate img { aspect-ratio: 16 / 9; }

/* A workshop photograph rather than a drawn plate: shown whole on the paper
   tone, since cropping a trophy to a letterbox cuts off the trophy. */
.article__cover--photo {
  background: var(--surface);
  display: grid;
  place-items: center;
}
.article__cover--photo img {
  width: auto;
  max-width: 100%;
  max-height: 26rem;
  aspect-ratio: auto;
  object-fit: contain;
  padding: 1rem;
}

/* The band under an article title. Someone who arrives from a search and is
   ready to order should not have to read to the bottom to find a number. */
.quick {
  background: var(--surface);
  border-block: 1px solid var(--rule);
}
.quick__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
  padding-block: 1rem;
}
.quick__label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-weight: 700;
  margin-inline-end: auto;
}
.quick__hours {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.quick__ways {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.quick__way {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 0.95rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease),
    transform var(--fast) var(--ease);
}
.quick__way svg { width: 1.15rem; height: 1.15rem; color: var(--gold-text); flex: none; }
.quick__way:hover { border-color: var(--gold); transform: translateY(-1px); }
.quick__way.is-wa { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.quick__way.is-wa svg { color: currentColor; }
.quick__way.is-wa:hover { background: var(--gold-hi, var(--gold)); }

/* On a narrow screen the four routes want to be tap targets, not a sentence:
   two by two, each one the full half-width, nothing under the thumb's reach. */
@media (max-width: 34rem) {
  .quick__inner { padding-block: 0.9rem; gap: 0.75rem; }
  .quick__label { width: 100%; margin-inline-end: 0; }
  .quick__ways { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; width: 100%; }
  .quick__way { justify-content: center; padding-block: 0.7rem; }
}

.prose { font-size: 1.1875rem; line-height: 1.75; color: var(--ink-2); }
.prose > * + * { margin-top: 1.35rem; }
.prose h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin-top: 2.75rem; }
.prose h3 { font-size: clamp(1.2rem, 3vw, 1.5rem); margin-top: 2.25rem; }
.prose a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-inline-start: 1.35rem; }
.prose li + li { margin-top: 0.5rem; }
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
}
.prose blockquote {
  border-inline-start: 3px solid var(--gold);
  padding-inline-start: 1.25rem;
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--ink);
}
.prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--rule); padding: 0.6rem 0.85rem; text-align: start; }
.prose figure { margin: 0; }
.prose figcaption { font-size: var(--t-xs); color: var(--muted); margin-top: 0.5rem; }

/* Each imported article closes on a short panel the owner wrote. It arrived
   from WordPress in pale blue with a red button; here it reads as an aside —
   a gold rule on the reading edge, and the paper tone a shade deeper. */
.prose .callout {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-inline-start: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 4vw, 1.75rem);
  margin-top: clamp(2.25rem, 5vw, 3rem);
}
.prose .callout > * + * { margin-top: 0.85rem; }
.prose .callout h3 {
  margin-top: 0;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
  color: var(--ink);
}
.prose .callout p:last-child { margin-bottom: 0; }

.article__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
}

/* Nothing here yet, and saying so plainly beats an empty grid */
.empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1rem;
  max-width: 40rem;
  margin-inline: auto;
  padding: clamp(2.5rem, 7vw, 4.5rem) 1.5rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.empty__mark {
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: rgba(169, 135, 63, 0.12);
  border: 1px solid rgba(169, 135, 63, 0.35);
  color: var(--gold-text);
}
.empty__mark svg { width: 1.75rem; height: 1.75rem; }
.empty h2 { font-size: clamp(1.4rem, 4vw, 1.9rem); }
.empty p { color: var(--muted); }
.empty__how { font-size: var(--t-sm); }
.empty code {
  background: var(--surface-2);
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   9. Category rail — every field, on the first screen
   -------------------------------------------------------------------------- */

.rail {
  position: relative;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.rail__label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 1rem;
}

.rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 6.75rem;
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
  /* Fade the leading edge so the row reads as scrollable, not cut off */
  mask-image: linear-gradient(to left, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, #000 82%, transparent 100%);
}
.rail__track::-webkit-scrollbar { display: none; }

@media (min-width: 48rem) {
  .rail__track {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
    gap: 1rem;
    mask-image: none;
    -webkit-mask-image: none;
  }
}
@media (min-width: 75rem) {
  .rail__track { grid-template-columns: repeat(8, 1fr); }
}

.chip {
  scroll-snap-align: start;
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  text-align: center;
  padding: 1rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--cut);
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow var(--med) var(--ease), border-color var(--med) var(--ease),
              background var(--med) var(--ease);
}
.chip svg {
  width: 1.75rem; height: 1.75rem;
  color: var(--navy);
  transition: color var(--med) var(--ease);
}
.chip span {
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 1.25;
}

/* Hover polishes the surface flush — the recess fills in */
.chip:hover {
  background: var(--card);
  border-color: var(--gold);
  box-shadow: 0 6px 18px -10px rgba(14, 47, 75, 0.35);
}
.chip:hover svg { color: var(--gold-text); }

/* --------------------------------------------------------------------------
   10. Category cards
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  gap: 1rem;
}
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }
@media (min-width: 64rem) { .cards { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--med) var(--ease), box-shadow var(--med) var(--ease),
              transform var(--med) var(--ease);
}

/* The first four fields are the business's core — give them two columns each */
@media (min-width: 64rem) {
  .card--featured { grid-column: span 2; }
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.card--featured .card__media { aspect-ratio: 16 / 9; }

/* These are the workshop's own photographs, most of them tall — a trophy is a
   tall object. Cropping to fill a 4:3 card would cut the cup off a cup, so the
   whole item is shown and the paper tone fills the rest. */
.card__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 0.75rem;
  transition: transform 600ms var(--ease);
}
.card:hover .card__media img { transform: scale(1.03); }

/* A lead photograph was cut to the card's shape when it was made, so it fills
   the frame instead of sitting inside it with the paper showing through. */
.card__media img.is-lead { object-fit: cover; padding: 0; }

/* ------------------------------------------------------------------ gallery
   Photographs taken over years against whatever wall was behind them. Each
   sits in its own tile on the paper tone, so nine different backgrounds read
   as one surface. */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 30rem) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
@media (min-width: 60rem) { .gallery { grid-template-columns: repeat(4, 1fr); } }

.gallery__item {
  margin: 0;
  aspect-ratio: 1;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: border-color var(--fast) var(--ease), box-shadow var(--med) var(--ease);
}
.gallery__item:hover {
  border-color: var(--gold);
  box-shadow: 0 16px 32px -22px rgba(20, 41, 74, 0.5);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.6rem;
  transition: transform 500ms var(--ease);
}
.gallery__item:hover img { transform: scale(1.04); }

/* Stands in until a photograph is dropped in — but reads as a blank engraving
   plate under raking light, not as a missing image. */
.card__ph {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.85rem;
  width: 100%; height: 100%;
  background: linear-gradient(158deg, #fcfbf9 0%, #f1ece4 52%, #e7e0d5 100%);
}

/* The scribed border every blank plate carries before it is engraved */
.card__ph::before {
  content: "";
  position: absolute;
  inset: 11%;
  border: 1px solid rgba(176, 133, 74, 0.32);
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Raking light across the metal */
.card__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, transparent 26%, rgba(255, 255, 255, 0.8) 47%, transparent 64%);
  pointer-events: none;
}

.card__ph svg,
.card__ph b { position: relative; z-index: 1; }

.card__ph svg {
  width: clamp(2.75rem, 8vw, 4.25rem);
  height: clamp(2.75rem, 8vw, 4.25rem);
  color: var(--navy);
  opacity: 0.55;
}
.card__ph b {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--gold-text);
}

.card__body {
  padding: 1.35rem 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.card__body h3 { font-size: var(--t-h3); }
.card__body p {
  font-size: var(--t-sm);
  color: var(--muted);
}
.card__audience {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-xs);
  color: var(--muted);
}
.card__audience b {
  color: var(--gold-text);
  font-weight: 700;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.2rem;
}

.card:hover {
  border-color: var(--gold);
  box-shadow: 0 20px 44px -24px rgba(20, 41, 74, 0.45);
}

.card__go {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--gold-text);
}
.card__go svg {
  width: 0.8em; height: 0.8em;
  transition: transform var(--med) var(--ease);
}
.card:hover .card__go svg { transform: translateX(-3px); }

/* --------------------------------------------------------------------------
   11. Values
   -------------------------------------------------------------------------- */

.values {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
@media (min-width: 48rem) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .values { grid-template-columns: repeat(4, 1fr); } }

.value {
  padding: 2rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
@media (min-width: 48rem) {
  .value { padding: 2.25rem 1.75rem; border-bottom: none; border-inline-start: 1px solid rgba(255, 255, 255, 0.16); }
  .value:first-child { padding-inline-start: 0; border-inline-start: none; }
  .value:last-child { padding-inline-end: 0; }
}
@media (min-width: 48rem) and (max-width: 67.999rem) {
  .value:nth-child(2n + 1) { padding-inline-start: 0; border-inline-start: none; }
  .value:nth-child(2n) { padding-inline-end: 0; }
}

.value svg {
  width: 2.1rem; height: 2.1rem;
  color: var(--gold-lift);
  margin-bottom: 1.1rem;
}
.value h3 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}
.value p { font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   12. Process
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: 0;
  counter-reset: step;
}
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
  position: relative;
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 56rem) {
  .step { padding: 2rem 1.5rem 2rem 0; }
  .step:first-child { padding-inline-end: 1.5rem; }
}

.step__n {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--gold-text);
  letter-spacing: 0.1em;
  margin-bottom: 0.9rem;
  display: block;
}
.step h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.step p { font-size: var(--t-sm); color: var(--muted); }

/* What a category includes. Not a sequence, so it carries no numbers —
   just the mark that says "yes, this is in scope". */
.checks {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 44rem) { .checks { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; } }

.checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}
.checks svg {
  width: 1.25rem; height: 1.25rem;
  flex: none;
  margin-top: 0.2rem;
  color: var(--gold-text);
  stroke-width: 2;
}

/* --------------------------------------------------------------------------
   13. About
   -------------------------------------------------------------------------- */

.about {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 62rem) { .about { grid-template-columns: 1fr 1fr; align-items: start; } }

.about__prose p + p { margin-top: 1.15rem; }
.about__prose p { color: var(--muted); }
.about__prose p:first-of-type {
  font-size: var(--t-lead);
  color: var(--ink-2);
}

/* The shop's own shelves, full width. The paragraph below explains the forty
   years; this shows them, so it comes first and is given the whole measure. */
.shopband {
  margin: 0;
  position: relative;
  background: var(--navy);
  border-block: 1px solid rgba(201, 162, 77, 0.28);
  overflow: hidden;
}
.shopband img {
  width: 100%;
  height: clamp(14rem, 34vw, 24rem);
  object-fit: cover;
  object-position: center 45%;
  display: block;
}
.shopband figcaption {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  padding: 0.7rem 1.1rem;
  background: rgba(13, 27, 48, 0.86);
  border-start-start-radius: var(--radius);
  color: var(--gold-soft, #d9bd7d);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* The founding story, given the weight it earns: a gold rule on the reading
   edge and the display face, so the eye stops here instead of skimming. */
.about__origin {
  margin: 1.6rem 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 3px solid var(--gold);
  font-family: var(--display);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink);
}

/* Three facts in a row, separated by hairlines rather than boxed in. The
   numerals carry it; the boxes were doing nothing but taking up room. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-block: 1px solid var(--rule);
}
.stat {
  padding: clamp(1.4rem, 4vw, 2rem) 0.75rem;
  text-align: center;
  border-inline-start: 1px solid var(--rule);
}
.stat:first-child { border-inline-start: none; }
.stat dt {
  font-family: var(--display);
  font-size: clamp(2.1rem, 6.5vw, 3.1rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold-text);
}
.stat dd {
  margin: 0.5rem 0 0;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   13b. Review quotes
   -------------------------------------------------------------------------- */

.quotes {
  display: grid;
  gap: 1rem;
}
@media (min-width: 44rem) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  margin: 0;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.quote__stars { display: flex; gap: 2px; }
.quote__stars svg { width: 1rem; height: 1rem; color: var(--gold); }

.quote blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink);
}
.quote figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--ink-2);
}
/* Where the review was left. It is the difference between a quote someone
   could have written and one a reader can go and check. */
.quote__src {
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* The two scores, side by side under the heading. */
.ratings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 1.1rem;
}
.rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-sm);
  color: var(--muted);
}
.rating b { color: var(--ink); font-size: 1.05rem; }
.rating__stars { display: inline-flex; gap: 2px; }
.rating__stars svg { width: 0.95rem; height: 0.95rem; color: var(--gold); }

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--rule); }

.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.6vw, 1.25rem);
  font-weight: 700;
  color: var(--ink);
  min-height: 3rem;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: none;
  width: 0.9rem; height: 0.9rem;
  background: currentColor;
  color: var(--gold-text);
  clip-path: polygon(46% 0, 54% 0, 54% 46%, 100% 46%, 100% 54%, 54% 54%, 54% 100%, 46% 100%, 46% 54%, 0 54%, 0 46%, 46% 46%);
  transition: transform var(--med) var(--ease);
}
.faq details[open] summary::after { transform: rotate(135deg); }

.faq__a {
  padding-bottom: 1.4rem;
  max-width: 46rem;
  color: var(--muted);
  font-size: var(--t-sm);
}

/* --------------------------------------------------------------------------
   14b. Navigation menu — Waze leads, Google Maps follows
   -------------------------------------------------------------------------- */

.navmenu { position: relative; }
.navmenu summary {
  list-style: none;
  cursor: pointer;
  width: 100%;
}
.navmenu summary::-webkit-details-marker { display: none; }
.navmenu summary::after {
  content: "";
  width: 0.55rem; height: 0.55rem;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--med) var(--ease);
}
.navmenu[open] summary::after { transform: rotate(-135deg) translateY(-2px); }

.navmenu__opts {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

.navmenu__opt {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3.25rem;
  padding: 0.7rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  color: #fff;
  text-decoration: none;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.navmenu__opt:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--gold-lift); }
.navmenu__opt svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--gold-lift); }
.navmenu__opt b { display: block; font-size: var(--t-sm); font-weight: 700; }
.navmenu__opt span { display: block; }
.navmenu__opt span:not(:has(b)) { font-size: var(--t-xs); }
.navmenu__opt b + * { font-size: var(--t-xs); color: rgba(255, 255, 255, 0.6); }

/* --------------------------------------------------------------------------
   14c. The store — address, hours, every way to call, and the way there
   -------------------------------------------------------------------------- */

.locate {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  gap: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 56rem) {
  .locate { grid-template-columns: 1.25fr 1fr; }
}

.locate__map {
  position: relative;
  min-height: 17rem;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(201, 162, 77, 0.12), transparent 70%),
    var(--hero-2);
}
@media (min-width: 56rem) { .locate__map { min-height: 21rem; } }

/* A quiet street grid, so the panel reads as a place before the map loads —
   without pretending to be an actual map of anywhere. */
.locate__map::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to left, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to left, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 7rem 7rem, 7rem 7rem, 1.75rem 1.75rem, 1.75rem 1.75rem;
  mask-image: radial-gradient(70% 65% at 50% 45%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(70% 65% at 50% 45%, #000 20%, transparent 78%);
}

.locate__placeholder {
  position: relative;
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.85rem;
  padding: 2rem 1.5rem;
  text-align: center;
}
.locate__placeholder b { font-size: var(--t-sm); color: #fff; font-weight: 700; }
.locate__placeholder small { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.45); max-width: 22rem; }

.locate__pin {
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: rgba(201, 162, 77, 0.14);
  border: 1px solid var(--hero-line);
  color: var(--gold-lift);
}
.locate__pin svg { width: 1.6rem; height: 1.6rem; }

/* The real map, once asked for */
.locate__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.locate__info { padding: clamp(1.5rem, 4vw, 2.25rem); }
.locate__info h3 { font-size: clamp(1.25rem, 3vw, 1.6rem); color: #fff; margin-bottom: 1.25rem; }

.locate__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.15rem;
  margin-bottom: 1.5rem;
}
.locate__list li { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.locate__list li:first-child { border-top: none; }
.locate__list li,
.locate__list a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 3rem;
  color: inherit;
  text-decoration: none;
}
.locate__list a { flex: 1; color: #fff; }
.locate__list a:hover { color: var(--gold-lift); }
.locate__list svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--gold-lift); }
.locate__list b {
  display: inline-block;
  min-width: 5rem;
  font-size: var(--t-xs);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.locate__list span { display: flex; align-items: center; gap: 0.85rem; flex: 1; }

/* The address on the first screen */
.hero__where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 1.5rem;
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, 0.7);
}
.hero__where svg { width: 1.05rem; height: 1.05rem; color: var(--gold-lift); }
.hero__where > svg { margin-inline-end: -0.5rem; }
/* "Navigate to the shop" opens Waze — a primary action, so it is sized like
   one rather than like the sentence it sits in. */
.hero__where a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  color: var(--gold-lift);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 77, 0.4);
}
.hero__where a:hover { border-bottom-color: var(--gold-lift); }
.hero__where a svg { width: 0.75rem; height: 0.75rem; }

/* --------------------------------------------------------------------------
   15. Contact
   -------------------------------------------------------------------------- */

.contact {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
}
@media (min-width: 62rem) { .contact { grid-template-columns: 0.9fr 1.1fr; } }

.contact__ways {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.way {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  text-decoration: none;
  color: #fff;
  min-height: 4rem;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.way:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--gold-lift); }
.way svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--gold-lift); }
.way b { display: block; font-size: 1.05rem; font-weight: 700; }
.way span { display: block; font-size: var(--t-xs); color: rgba(255, 255, 255, 0.6); }
.way__dir { margin-inline-start: auto; opacity: 0.5; }

.contact__meta {
  display: grid;
  gap: 0.85rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--t-sm);
}
.contact__meta div { display: flex; gap: 0.75rem; align-items: flex-start; }
.contact__meta svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: 0.25rem; color: var(--gold-lift); }

/* Form */
/* The card is cream but it sits inside the dark section, so it has to state
   its own ink — otherwise everything in it inherits the section's cream and
   disappears. This one declaration covers the heading and anything added
   later; the individual controls state it too, since a browser will not let
   a form control inherit colour in every case. */
/* Arriving straight at the form from a "leave your details" button: clear the
   sticky header and no more. Any extra here is a gap the reader has to scroll
   past to reach the first field. */
.form { scroll-margin-top: calc(var(--header-h) + 0.35rem); }

.form {
  background: var(--card) var(--grain);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 5vw, 2.5rem);
  display: grid;
  gap: 1.1rem;
  box-shadow: 0 30px 60px -35px rgba(0, 0, 0, 0.6);
}
.form h3 { font-size: 1.5rem; color: var(--ink); }
.form > p {
  font-size: var(--t-sm);
  color: var(--muted);
  margin-top: -0.6rem;
}

.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.field label i { color: var(--gold-text); font-style: normal; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  background: var(--surface);
  /* Stated, not inherited. The form sits on the dark section, where the
     inherited colour is cream — which on these pale controls left the typed
     text and the dropdown's options all but invisible. */
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-size: 1rem;
  box-shadow: var(--cut);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
/* The dropdown list is painted by the browser outside the page, so it needs
   both colours said out loud or it falls back to the inherited cream. */
.field select option {
  color: var(--ink);
  background: #fff;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--muted); opacity: 1; }
.field textarea { min-height: 6.5rem; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: var(--cut), 0 0 0 3px rgba(14, 47, 75, 0.14);
}

.field__hint { font-size: var(--t-xs); color: var(--muted); }

.field__err {
  font-size: var(--t-xs);
  font-weight: 600;
  color: #a1301f;
  min-height: 0;
}
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea { border-color: #a1301f; }

.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 34rem) { .form__row { grid-template-columns: 1fr 1fr; } }

.form__note {
  font-size: var(--t-xs);
  color: var(--muted);
  text-align: center;
}

.form__status {
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  font-size: var(--t-sm);
  font-weight: 600;
}
.form__status[data-tone="ok"] { background: #e8f3ec; color: #14603a; border: 1px solid #b9dcc8; }
.form__status[data-tone="err"] { background: #fbeceb; color: #8d2a1b; border: 1px solid #eec7c2; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--hero-2) var(--grain);
  color: rgba(255, 255, 255, 0.62);
  padding-block: clamp(3rem, 7vw, 4.5rem) 2rem;
  font-size: var(--t-sm);
}
.footer a { color: rgba(255, 255, 255, 0.62); text-decoration: none; }
.footer a:hover { color: #fff; }


.footer__grid {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer h4 {
  font-family: var(--body);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold-lift);
  margin-bottom: 1rem;
}
.footer ul { list-style: none; padding: 0; display: grid; gap: 0.1rem; }
/* A finger is about 9mm across and lands imprecisely, so every standing link
   gets a 44px box — the smallest target Apple and Google both vouch for. Set
   unconditionally rather than behind a touch query: a hover query cannot be
   trusted to tell a laptop from a tablet, and on a mouse the roomier list
   costs nothing. The box grows into space the list already had. */
.footer li { display: flex; align-items: center; min-height: 44px; }
.footer li a { display: flex; align-items: center; min-height: 44px; }

.footer__brand {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}
.footer__brand + p { max-width: 26rem; }

.footer__base {
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.45);
}

/* --------------------------------------------------------------------------
   17. Mobile action bar — the whole point of the site, always in reach
   -------------------------------------------------------------------------- */

.actionbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(13, 27, 48, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 48rem) { .actionbar { display: none; } }

.actionbar a {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.2rem;
  padding: 0.6rem 0.25rem;
  min-height: 4.25rem;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.9);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
}
.actionbar a:first-child { border-inline-start: none; }
.actionbar svg { width: 1.35rem; height: 1.35rem; color: var(--gold-lift); }
.actionbar span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0; }
.actionbar a { padding-inline: 0.15rem; }


/* --------------------------------------------------------------------------
   18. Motion — reveal on scroll, one gesture, used consistently
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal][data-delay="1"] { transition-delay: 70ms; }
[data-reveal][data-delay="2"] { transition-delay: 140ms; }
[data-reveal][data-delay="3"] { transition-delay: 210ms; }
[data-reveal][data-delay="4"] { transition-delay: 280ms; }

/* The eyebrow rule cuts itself in when its section arrives */
.eyebrow::after { --rule-scale: 0; }
.is-in .eyebrow::after,
.eyebrow.is-in::after { --rule-scale: 1; }

/* Hero load sequence */
.hero [data-load] {
  opacity: 0;
  transform: translateY(16px);
  animation: rise 750ms var(--ease) forwards;
}
.hero [data-load="1"] { animation-delay: 60ms; }
.hero [data-load="2"] { animation-delay: 150ms; }
.hero [data-load="3"] { animation-delay: 240ms; }
.hero [data-load="4"] { animation-delay: 330ms; }
.hero [data-load="5"] { animation-delay: 420ms; }

@keyframes rise {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero [data-load] { opacity: 1; transform: none; animation: none; }
  .eyebrow::after { --rule-scale: 1; }
}

/* --------------------------------------------------------------------------
   19. Print
   -------------------------------------------------------------------------- */

@media print {
  .header, .sheet, .actionbar, .form, .rail { display: none !important; }
  body { padding: 0; color: #000; }
  .section { padding-block: 1rem; }
  .section--dark { background: #fff; color: #000; }
  .section--dark h2, .section--dark h3 { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}

/* --------------------------------------------------------------------------
   21. The call dock — always on screen, four routes one click away
   -------------------------------------------------------------------------- */

/* Almost everyone who finds this business rings before they read. On a phone
   the fixed bar already does that job in a single tap and never scrolls away;
   this rides along on wider screens, where the header's own button leaves with
   the header. It is a <details>, so it works before any script runs. */
.dock {
  position: fixed;
  inset-inline-start: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 60;
}
/* Below this the fixed action bar is on screen and does the same job better. */
@media (max-width: 47.99rem) { .dock { display: none; } }

.dock summary {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.35rem;
  background: var(--gold);
  color: var(--navy);
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
  box-shadow: 0 14px 34px -12px rgba(20, 41, 74, 0.55);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.dock summary::-webkit-details-marker { display: none; }
.dock summary::marker { content: ""; }
.dock summary svg { width: 1.25rem; height: 1.25rem; }
.dock summary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -12px rgba(20, 41, 74, 0.6);
}
.dock[open] summary { background: var(--navy); color: var(--paper); }

.dock__panel {
  position: absolute;
  inset-inline-start: 0;
  bottom: calc(100% + 0.7rem);
  width: min(19rem, calc(100vw - 2rem));
  padding: 0.85rem;
  background: var(--navy-deep, #0d1b30);
  border: 1px solid rgba(201, 162, 77, 0.32);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
  display: grid;
  gap: 0.4rem;
  animation: dock-in 200ms var(--ease) both;
}
@keyframes dock-in {
  from { opacity: 0; transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .dock__panel { animation: none; }
}

.dock__head {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-soft, #d9bd7d);
  padding: 0.2rem 0.5rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.2rem;
}

.dock__way {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 52px;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  color: #fff;
  text-decoration: none;
  transition: background var(--fast) var(--ease);
}
.dock__way:hover { background: rgba(255, 255, 255, 0.08); }
.dock__way svg { width: 1.4rem; height: 1.4rem; color: var(--gold-lift); flex: none; }
.dock__way span { display: flex; flex-direction: column; line-height: 1.25; }
.dock__way b { font-size: 0.95rem; font-weight: 700; }
.dock__way small { font-size: var(--t-xs); color: rgba(255, 255, 255, 0.6); }
.dock__way.is-wa { background: var(--gold); color: var(--navy); }
.dock__way.is-wa svg { color: currentColor; }
.dock__way.is-wa small { color: rgba(20, 41, 74, 0.72); }
.dock__way.is-wa:hover { background: var(--gold-lift, var(--gold)); }

/* The dock is a floating control, not page content — it has no place on paper. */
@media print { .dock { display: none !important; } }


/* The four constants. They were four columns of small text on a dark ground —
   correct, and completely quiet. A gold hairline at the head of each and a
   larger mark give the row something to hold on to, without adding colour the
   palette does not already have. */
.value {
  position: relative;
  padding-top: 1.5rem;
}
.value::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 2.25rem;
  height: 2px;
  background: var(--gold);
}
.value svg { width: 1.9rem; height: 1.9rem; }
.value h3 { font-size: 1.1rem; margin-top: 0.9rem; }