/* Golden Rule Creations — site styles
   Brand: navy + gold, clean and trustworthy for public-safety / organizational buyers */

:root {
  --navy: #0f2545;
  --navy-light: #1c3a63;
  --gold: #c8a24a;
  --gold-dark: #a9842f;
  --gold-text: #866619;      /* gold for TEXT on white/twill: 5.3:1 / 4.6:1 (gold-dark is only 3.5 / 3.0) */
  --gold-deep: #b8933c;      /* darker gold that still carries navy text at 5.3:1 (hover, CTA gradient end) */
  --ink: #1d2733;
  --muted: #5b6675;
  --line: #e3e7ec;
  --bg: #ffffff;
  --bg-soft: #f5f7fa;
  --bg-navy-soft: #f0f4fa;
  --twill: #f3eee3;          /* warm twill/canvas tone for craft sections */
  --twill-line: #e4dcc9;     /* hairline on twill backgrounds */
  --radius: 10px;
  --shadow: 0 6px 24px rgba(15, 37, 69, 0.08);
  --shadow-lg: 0 14px 40px rgba(15, 37, 69, 0.14);
  --maxw: 1140px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --display: "Roboto Slab", Rockwell, "Roboto Slab Fallback", Georgia, serif;
  --serif: Georgia, "Times New Roman", serif;
}

/* Heritage slab display face — loaded async; body stays on the fast system stack.
   Self-hosted (Google Fonts v36 latin subset, variable 500–800): the old hotlinked
   gstatic URL 404'd once Google bumped versions. unicode-range matches that subset. */
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/assets/fonts/roboto-slab-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; }
/* scroll-padding keeps focused fields and anchors clear of the sticky header (~80px nav) */
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
button { font-family: inherit; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy-light); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--display); color: var(--navy); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); letter-spacing: -.5px; font-weight: 800; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.3rem); letter-spacing: -.2px; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0 0 1rem; text-wrap: pretty; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.section { padding: 64px 0; }
.section-soft { background: var(--twill);
  /* faint diagonal twill weave */
  background-image: repeating-linear-gradient(45deg, rgba(168,132,47,.035) 0 2px, transparent 2px 6px); }
.section-soft .card { border-color: var(--twill-line); }
/* stitched rule between stacked sections */
.stitch-rule { height: 2px; border: 0; margin: 0;
  background-image: repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 16px); opacity: .55; }
.section-navy { background: var(--navy); color: #dfe7f2; }
.section-navy h2, .section-navy h3 { color: #fff; }
.center { text-align: center; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 720px; }
.center .lead { margin-left: auto; margin-right: auto; }

/* Buttons */
.btn {
  display: inline-block; font-weight: 700; padding: 14px 28px; border-radius: 8px;
  border: 2px solid transparent; cursor: pointer; font-size: 1rem; transition: .15s; text-align: center;
}
.btn-primary { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--navy); text-decoration: none; }
.btn-outline { background: transparent; color: #fff; border-color: #fff; }
.btn-outline:hover { background: #fff; color: var(--navy); text-decoration: none; }
.btn-navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-navy:hover { background: var(--navy-light); border-color: var(--navy-light); color:#fff; text-decoration: none; }
.btn-lg { padding: 16px 36px; font-size: 1.1rem; }

/* Header / nav */
.topbar { background: var(--navy); color: #cdd8e8; font-size: .9rem; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; gap: 6px; }
.topbar a { color: #fff; font-weight: 600; }
.topbar .phone { color: var(--gold); font-weight: 700; }
.topbar-contact { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; }
/* never split the phone number or address mid-way; on a narrow screen the phone moves down a line whole */
.topbar-contact a { white-space: nowrap; }
.topbar-contact a { display: inline-flex; align-items: center; gap: 7px; }
.topbar-contact .icon { width: 16px; height: 16px; vertical-align: 0; stroke: var(--gold); }
.topbar-contact .short { display: none; }
/* hairline divider between the two contact methods */
.topbar-contact .phone { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.22); }
/* Only the nav is sticky; the top bar (email, phone) scrolls away so the header stays ~64px tall.
   Phones get a compact quote pill beside the menu button (.nav-quote) so the form is always one tap away. */
.topbar { border-bottom: 1px solid rgba(255,255,255,0.08); }
header.site { position: sticky; top: 0; z-index: 50; background: var(--navy); border-bottom: 1px solid rgba(255,255,255,0.1); }
.nav-quote { display: none; margin-left: auto; margin-right: 8px; background: var(--gold); color: var(--navy); font-weight: 700;
  font-size: .92rem; padding: 8px 14px; border-radius: 6px; white-space: nowrap; }
.nav-quote:hover { background: var(--gold-deep); text-decoration: none; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 22px; max-width: var(--maxw); margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 12px; }
.site-logo { height: 52px; width: auto; display: block; }
.brand-name { font-weight: 800; color: #fff; font-size: 1.15rem; line-height: 1.3; }
.brand-name small { display: block; text-wrap: balance; font-weight: 500; font-size: .72rem; color: #b9c6dc; letter-spacing: .5px; }
.brand:hover { text-decoration: none; opacity: .9; }
.menu { display: flex; gap: 2px; align-items: center; list-style: none; margin: 0; padding: 0; }
.menu a { color: #dfe7f2; font-weight: 600; padding: 8px 8px; border-radius: 6px; font-size: .97rem; white-space: nowrap; }
.menu a:hover { background: rgba(255,255,255,0.1); text-decoration: none; color: #fff; }
.menu .btn { padding: 10px 18px; }
/* .menu a sets light text for the plain links; the gold button keeps navy text (light-on-gold was 1.9:1) */
.menu .btn-primary, .menu .btn-primary:hover { color: var(--navy); }
/* Reorder: the second form, outlined so it pairs with the gold quote button without competing */
.menu .btn-ghost { color: #fff; border-color: var(--gold); margin-left: 6px; }
/* padding trimmed so the outline costs about the same width as a plain link (the menu is tight) */
.menu .btn.btn-ghost { padding-left: 11px; padding-right: 11px; }
.menu .btn-ghost:hover { background: rgba(200,162,74,.16); color: #fff; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: #fff; margin: 5px 0; border-radius: 3px; transition: transform .2s, opacity .2s; }
/* open menu: the three bars become a close (X) */
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav-toggle span { transition: none; } }

/* "You are here": build.py marks the link for the current page with aria-current */
.menu a[aria-current="page"]:not(.btn), .sub-toggle.is-current {
  color: #fff; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.menu .btn-primary[aria-current="page"] { background: var(--gold-deep); border-color: var(--gold-deep); }

/* Patches dropdown: the category pages, one click from anywhere */
.has-sub { position: relative; }
.sub-toggle { display: inline-flex; align-items: center; gap: 3px; background: none; border: 0; cursor: pointer;
  color: #dfe7f2; font: inherit; font-weight: 600; font-size: .97rem; padding: 8px 6px 8px 8px; border-radius: 6px; white-space: nowrap; }
.sub-toggle:hover, .has-sub.open > .sub-toggle { background: rgba(255,255,255,0.1); color: #fff; }
.chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.has-sub.open .chev { transform: rotate(180deg); }
.submenu { display: none; position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; min-width: 260px; list-style: none; margin: 0; padding: 10px 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }  /* hover bridge */
.has-sub.open > .submenu { display: block; }
.menu .submenu a { display: block; color: var(--navy); padding: 9px 12px; font-size: .95rem; border-radius: 6px; }
.menu .submenu a:hover { background: var(--bg-navy-soft); color: var(--navy); text-decoration: none; }
.menu .submenu a[aria-current="page"] { color: var(--navy); font-weight: 800; }
.submenu .sub-sep { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.submenu :focus-visible { outline-color: var(--gold-text); }
@media (hover: hover) and (min-width: 1060px) {
  .has-sub:hover > .submenu { display: block; }
}

/* Hero */
.hero { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); color: #fff; padding: 76px 0; position: relative; overflow: hidden; }
/* inner pages: shorter hero (was an inline style on each page, which blocked the phone rule below) */
.hero-compact { padding: 60px 0; }
.hero-form { padding: 34px 0 30px; }
.hero-form h1 { margin-bottom: .3em; }
.hero-form p { margin-bottom: 0; }
.hero h1 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.hero-split:has(.pile) h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.12; letter-spacing: -.5px; }
.hero p { color: #dce5f2; font-size: 1.2rem; max-width: 640px; }
.hero p a { color: #fff; text-decoration: underline; text-decoration-color: rgba(200,162,74,.6); text-underline-offset: 3px; }
.hero p a:hover { text-decoration-color: var(--gold); }
a[href^="tel:"] { white-space: nowrap; }
.hero .actions { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; }
/* Form first: one gold button, then email and phone as a quieter line (same pattern as the CTA band) */
.hero .hero-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 16px 0 0; font-size: .95rem; color: #b9c6dc; }
.hero .hero-alt span { flex-basis: 100%; }
.hero .hero-alt a { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 600; padding: 6px 0;
  text-decoration: underline; text-decoration-color: rgba(200,162,74,.6); text-underline-offset: 4px; }
.hero .hero-alt a:hover { text-decoration-color: var(--gold); }
.hero .hero-alt .icon { width: 17px; height: 17px; vertical-align: 0; flex: none; }
@media (max-width: 400px) { .hero .hero-alt a { overflow-wrap: anywhere; } }
/* The four facts a first-time buyer needs before asking (minimum, fees, timing, reorders) */
.hero-facts { list-style: none; margin: 30px 0 0; padding: 20px 0 0; border-top: 1px dashed rgba(200,162,74,.45);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 28px; max-width: 640px; }
.hero-facts li { color: #b9c6dc; font-size: .93rem; line-height: 1.45; }
.hero-facts b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--gold); }
.hero-facts a { color: #dfe7f2; text-decoration: underline; text-decoration-color: rgba(200,162,74,.6); text-underline-offset: 3px; }
.hero-facts a:hover { color: #fff; text-decoration-color: var(--gold); }

/* Two-column hero with a framed photo slot on the right */
.hero .hero-sub strong { display: block; color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.4rem; line-height: 1.3; margin-bottom: .45em; text-wrap: balance; }
.hero-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero-split .hero-copy { min-width: 0; }

/* Signature: merrowed-border / satin-stitch frame.
   Outer ring = raised merrowed border; inset dashed ring = satin stitch. */
.stitched { position: relative; border-radius: 14px; background: var(--navy-light);
  border: 6px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-dark), var(--shadow-lg); }
.stitched::before { content: ""; position: absolute; inset: 7px; border-radius: 8px;
  border: 2px dashed rgba(255,255,255,.55); pointer-events: none; }

/* Photo slot — sized for the owner's product shots; placeholder until they land */
.photo-slot { width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; }
/* Product patches show whole (contain), on a soft light panel so detail pops against the navy frame */
.photo-slot.has-photo { background: #fbfaf6; }
.photo-slot img { width: 100%; height: 100%; object-fit: contain; padding: 13%; border-radius: 8px; }
/* pin the photo to the square slot: as a grid item, height:100% doesn't resolve,
   so tall (portrait) patches rendered at natural height and got clipped.
   Needs the slot's width:100% above, or the mobile margin:auto collapses it to 0. */
.photo-slot.has-photo img { position: absolute; inset: 0; }
.stitched::before { z-index: 1; }  /* keep the stitch ring above the photo */
.photo-slot .ph { text-align: center; color: #cdd8e8; padding: 24px; }
.photo-slot .ph .mark { font-size: 2.6rem; color: var(--gold); margin-bottom: 8px; }
.photo-slot .ph small { display: block; letter-spacing: 1.5px; text-transform: uppercase; font-size: .72rem; color: #9fb0cc; margin-top: 6px; }

/* Homepage hero collage: transparent patch cutouts scattered and overlapping on the navy.
   Each patch sits in a .pile-item wrapper (placed/rotated inline) so the clean photo and
   its watermark decoy move together on hover. */
.pile { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.pile-item { position: absolute; display: block; transition: transform .25s ease; }
.pile-item:hover { transform: rotate(0deg) scale(1.06) !important; z-index: 9 !important; }
.pile-item img { display: block; width: 100%; height: auto;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)) drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.pile-item img.wm-decoy { position: absolute; inset: 0; filter: none; }
@media (prefers-reduced-motion: reduce) { .pile-item { transition: none; } }

/* Comparison / product figure — image on a soft product panel with a caption below.
   Used for the construction-option comparisons and the stock-flag showcase. */
.compare-fig { margin: 0; }
.compare-fig .shot { background: #fbfaf6; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: grid; place-items: center; box-shadow: var(--shadow); }
.compare-fig .shot img { width: 100%; height: auto; display: block; padding: 18px; }
.compare-fig figcaption { margin-top: 14px; text-align: center; }
.compare-fig figcaption strong { display: block; font-size: 1.05rem; color: var(--navy); }
.compare-fig figcaption span { display: block; color: var(--muted); font-size: .92rem; margin-top: 3px; }
/* category-page galleries: square tiles so mixed patch shapes line up in rows */
.patch-gallery .shot { aspect-ratio: 1 / 1; position: relative; }
.patch-gallery .shot img { position: absolute; inset: 0; height: 100%; object-fit: contain; }
/* Category pages with big galleries: a 4-patch preview right under the hero, linking
   down to the full gallery (#gallery), so the proof comes first. */
/* Gallery tiles carry no visible caption (decided 2026-10-06): the department name is in each image's alt text */
.patch-gallery.is-collapsed > figure:nth-child(n+13) { display: none; }
/* Stock catalog (/stock-patches/). build.py fills .stock-grid from data/stock-items.csv.
   Patches are drawn TO SCALE: --stock-in is one real inch on screen, and every photo's
   width is its patch's real width in inches times that. They stand on one shelf line
   (the photo area is as tall as the section's tallest patch), so a 2-1/2" flag reads
   smaller than a 3-1/2" one. No on-screen ruler (owner, 2026-10-14): screen inches aren't
   real inches, and each card states the exact size. */
:root { --stock-in: 48px; }
.stock-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px;
  margin-bottom: 34px; }
.stock-head h2 { margin: 0 0 8px; }
.stock-head p { margin: 0; max-width: 62ch; color: var(--muted); }
.stock-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 28px;
  list-style: none; margin: 0; padding: 0; }
.stock-item { margin: 0; }
.stock-item .shot { height: calc(var(--stock-in) * var(--stock-tallest) + 4px); display: flex; align-items: flex-end;
  padding-bottom: 12px; border-bottom: 1px solid var(--twill-line); }
.stock-item .shot img { display: block; height: auto; max-width: 100%;
  filter: drop-shadow(0 2px 3px rgba(15, 37, 69, .16)); }
.stock-item figcaption { margin-top: 12px; line-height: 1.45; }
.stock-item figcaption strong { display: block; font-family: var(--display); font-size: 1.2rem; color: var(--navy);
  letter-spacing: .2px; }
.stock-item figcaption > span { display: block; font-size: .92rem; }
.stock-item figcaption > span + span { color: var(--muted); }
.stock-specs { list-style: none; margin: 6px 0 0; padding: 0; font-size: .86rem; color: var(--muted); }
.stock-specs li { display: grid; grid-template-columns: 3.6em 4.6em auto; column-gap: 6px; }
.stock-specs li:only-child, .stock-specs li:not(:has(b)) { display: block; }
.stock-specs b { color: var(--navy); font-weight: 700; }
.stock-specs .nw { white-space: nowrap; }  /* never split 3-1/2" */
.stock-nophoto { color: var(--muted); font-size: .85rem; }
@media (min-width: 721px) and (max-width: 1040px) {
  .order-panel { grid-template-columns: 1fr; gap: 36px; }
  :root { --stock-in: 40px; }
  .stock-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Stock ordering panel: what to send us (left), the terms people ask about (right) */
.order-panel { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.order-send h2 { margin-top: 0; }
.order-list { margin: 14px 0 24px; padding: 0; list-style: none; counter-reset: ord; }
.order-list li { counter-increment: ord; position: relative; padding: 0 0 12px 40px; }
.order-list li::before { content: counter(ord); position: absolute; left: 0; top: -1px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--navy); color: #fff; font: 700 .85rem/26px var(--display); text-align: center; }
.order-list strong { color: var(--navy); }
.order-hours { margin: 12px 0 0; color: var(--muted); font-size: .92rem; }
.order-facts { margin: 0; border-top: 3px solid var(--gold); }
.order-facts > div { display: grid; grid-template-columns: 8.5em 1fr; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--line); }
.order-facts dt { font-family: var(--display); font-weight: 700; color: var(--navy); }
.order-facts dd { margin: 0; }
.stock-index { margin-bottom: 44px; padding-bottom: 26px; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap;
  align-items: center; gap: 10px; }
/* Section links as stitched-edge pills (same as the FAQ topic links), 44px tall for thumbs */
.stock-index .stock-index-label { margin: 0 6px 0 0; font-family: var(--display); font-weight: 700; color: var(--navy); }
.stock-index > a { font-weight: 700; font-size: .95rem; color: var(--navy); padding: 11px 16px; line-height: 1.4;
  border: 1px solid var(--twill-line); border-radius: 999px; background: #fdfcf9; }
.stock-index > a:hover { border-color: var(--gold); text-decoration: none; }
/* each link's item-number range (build.py fills it from the CSV) */
.stock-index > a .rng { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 4px; }
/* Phones: two across, label over its number range, instead of a 570px column */
@media (max-width: 720px) {
  .stock-index { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .stock-index > p { grid-column: 1 / -1; }
  .stock-index > a { display: flex; flex-direction: column; padding: 9px 14px; border-radius: var(--radius); line-height: 1.3; }
  .stock-index > a .rng { margin: 2px 0 0; font-size: .88rem; }
}
.stock-index p:last-child { margin: 4px 0 0; color: var(--muted); flex-basis: 100%; }
/* "Find an item number" (nav.js): buyers often arrive with a number off an old invoice */
.stock-find { flex-basis: 100%; margin: 0 0 18px; }
.stock-find[hidden] { display: none; }
.stock-find label { display: block; font-family: var(--display); font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.stock-find-row { display: flex; gap: 10px; max-width: 26rem; }
.stock-find input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid #cfd6df; border-radius: 8px;
  font: 600 1rem var(--font); color: var(--ink); letter-spacing: .3px; text-transform: uppercase; }
.stock-find input::placeholder { text-transform: none; color: #6b7480; font-weight: 400; letter-spacing: 0; }
.stock-find input:focus { outline: 2px solid var(--gold-dark); outline-offset: 1px; border-color: var(--gold-dark); }
.stock-find .btn { padding: 11px 24px; }
.stock-find-msg { margin: 8px 0 0; font-size: .95rem; color: var(--muted); }
.stock-find-msg:empty { display: none; }
/* The item a link or the find box points at: a gold ring around the whole card */
.stock-grid > li { scroll-margin-top: 110px; border-radius: var(--radius); }
:root:not(.stock-miss) .stock-grid > li:target, :root:not(.stock-miss) .stock-grid > li:has(:target) { outline: 2px solid var(--gold); outline-offset: 10px;
  animation: stock-found 1.6s cubic-bezier(.16, 1, .3, 1); }
@keyframes stock-found { from { outline-offset: 22px; outline-color: rgba(200, 162, 74, 0); } }
@media (prefers-reduced-motion: reduce) { .stock-grid > li:target, .stock-grid > li:has(:target) { animation: none; } }
/* a chevron rank link (#201-C) also marks its rank line inside the ringed card */
:root:not(.stock-miss) .stock-specs li:target { background: rgba(200, 162, 74, .2); border-radius: 4px; box-shadow: 0 0 0 4px rgba(200, 162, 74, .2); }
.stock-more { margin: 28px 0 0; color: var(--muted); font-size: .95rem; }
/* .order-end-box p caps lines at 62ch; this one's rule spans the whole box */
.order-end-box .order-end-custom { max-width: none; }
/* The order panel folds on phones (nav.js) so the patches start sooner. Wider screens
   never show the toggle: the panel is always open there. */
.order-fold > summary { display: none; }
@media (max-width: 720px) {
  .order-fold > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 14px 18px; border: 1px solid var(--twill-line); border-radius: var(--radius); background: #fdfcf9;
    font-family: var(--display); font-weight: 700; color: var(--navy); line-height: 1.35; cursor: pointer; list-style: none; }
  .order-fold > summary::-webkit-details-marker { display: none; }
  .order-fold > summary::after { content: "+"; flex: none; font-size: 1.4rem; line-height: 1; color: var(--gold-text); }
  .order-fold[open] > summary { margin-bottom: 28px; }
  .order-fold[open] > summary::after { content: "\2013"; }
}
/* One gold action on the stock page: ordering. The header's custom-quote pill steps
   down to an outline here (it stays gold everywhere else). */
body:has(.stock-bar) .nav-quote { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px var(--gold); }
body:has(.stock-bar) .nav-quote:hover { background: rgba(200, 162, 74, .16); }
body:has(.stock-bar) .menu .btn-primary { background: transparent; color: #fff; border-color: var(--gold); }
body:has(.stock-bar) .menu .btn-primary:hover { background: rgba(200, 162, 74, .16); color: #fff; }
@media (max-width: 1059px) {  /* the open phone menu is white: navy outline there */
  body:has(.stock-bar) .menu .btn-primary, body:has(.stock-bar) .menu .btn-primary:hover { color: var(--navy); border-color: var(--navy); }
  body:has(.stock-bar) .menu .btn-primary:hover { background: var(--bg-navy-soft); }
}
.order-end-custom { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .95rem; }
.order-end-custom a { font-weight: 700; }
/* Phones: sections + order bar, shown by nav.js only while the buyer is deep in the catalog */
.stock-bar { display: none; }
@media (max-width: 720px) {
  .stock-bar:not([hidden]) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--navy);
    box-shadow: 0 -6px 20px rgba(15, 37, 69, .18); transform: translateY(110%); visibility: hidden;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), visibility 0s .25s; }
  .stock-bar.is-on { transform: none; visibility: visible; transition: transform .25s cubic-bezier(.16, 1, .3, 1); }
  .stock-bar a:not(.btn) { color: #fff; font-weight: 700; padding: 12px 4px; line-height: 1.3; }
  .stock-bar .btn { padding: 12px 20px; }
  .stock-bar :focus-visible { outline-color: var(--gold); }
}
@media (prefers-reduced-motion: reduce) { .stock-bar, .stock-bar.is-on { transition: none; } }
/* After each grid: a way back up from deep in a long section, and a way to order from it */
.stock-back { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 24px; margin: 24px 0 0; font-size: .95rem; }
.stock-back a { font-weight: 700; padding: 12px 0; line-height: 1.4; }
/* End of the catalog: the order steps again, where the buyer has just chosen */
.order-end-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: center;
  border-top: 3px solid var(--gold); padding-top: 28px; }
.order-end-box h2 { margin: 0 0 10px; }
.order-end-box p { margin: 0; max-width: 62ch; }
.order-end-box .actions { margin: 0; }
/* button pairs keep a gap when they wrap onto two lines (phones) */
.order-send .actions, .order-end-box .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.gallery-more { text-align: center; margin: 32px 0 0; }
.section-strip { padding: 48px 0; }
.section-strip h2 { margin-top: 0; margin-bottom: 28px; }
.strip-more { text-align: center; margin: 24px 0 0; font-weight: 700; }
.strip-more a { color: var(--gold-text); }

/* Watermark decoy (build.py stacks it after each patch photo): an invisible copy with
   "(c) goldenrulecreations.com" across the patch, laid exactly over the clean photo so
   right-click / drag / "open image" get it. Galleries and hero slots already pin their
   images to the frame; comparison figures need the decoy pinned over the in-flow photo. */
img.wm-decoy { opacity: 0; }
.compare-fig .shot { position: relative; }
.compare-fig .shot img.wm-decoy { position: absolute; inset: 0; height: 100%; object-fit: contain; }

/* Proof band: real patches on full-bleed navy, then the quote link */
.band-patches h2 { margin-bottom: 30px; }
.band-patches .strip-more a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.band-patches .compare-fig .shot { border-color: rgba(255,255,255,.18); box-shadow: 0 8px 22px rgba(0,0,0,.28); }
/* Homepage "Quality" close-ups: two real stitching details above the quote card */
.close-ups { gap: 16px; margin-bottom: 0; }
.close-ups .shot { aspect-ratio: 4 / 5; background: #fff; }
.close-ups .shot img { position: absolute; inset: 0; height: 100%; object-fit: contain; padding: 8px; }
.close-ups figcaption { margin-top: 8px; }
.close-ups figcaption strong { font-size: .95rem; }
.form-top { margin: 0 0 14px; }

/* Grid + cards */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.card h3 { margin-top: 0; margin-bottom: .3em; }
.card .ico { margin-bottom: 10px; }
/* Homepage category cards: a real patch in place of a line icon. Fixed-height slot so
   tall shields and wide rockers sit on one baseline; the decoy is pinned over the clean copy. */
.card-patch { position: relative; height: 112px; margin-bottom: 18px; }
.card-patch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left bottom;
  filter: drop-shadow(0 4px 6px rgba(15,37,69,.18)); }
.card-patch img.wm-decoy { filter: none; }
.ico svg { display: block; }
/* Inline icon set — replaces emoji; stroke color inherits so it can sit on light or navy/gold backgrounds */
.icon { display: inline-block; vertical-align: -6px; stroke: var(--gold); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-inline { width: 22px; height: 22px; margin-right: 4px; }
.card .icon { stroke: var(--gold); }
a.card { color: inherit; transition: .15s; display:block; }
a.card:hover { text-decoration: none; box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--gold); }
a.card .more { color: var(--gold-text); font-weight: 700; margin-top: 8px; display: inline-block; }
a.card:hover .more { text-decoration: underline; }

/* Satin-stitch top edge — only on the linked category cards, used with restraint */
a.card.stitch-top { position: relative; overflow: hidden; }
a.card.stitch-top::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background-image: repeating-linear-gradient(90deg, var(--gold) 0 7px, var(--gold-dark) 7px 14px); }

/* Homepage category grid, two tiers: the public-safety core (police, fire/EMS, sheriff) large,
   everything else small. Tier 2 is patch + name only; the whole card is the link. */
.category-grid.tier-1 { margin-top: 36px; gap: 28px; }
.category-grid.tier-2 { margin-top: 24px; gap: 16px; }
a.card.card-lg { padding: 30px 28px 26px; }
.card-lg .card-patch { height: 200px; }
.card-lg h3 { font-size: 1.4rem; }
.tier-2 .card { padding: 18px 16px 18px; }
.tier-2 .card-patch { height: 92px; margin-bottom: 14px; }
.tier-2 h3 { font-size: 1rem; margin-bottom: 0; }
a.card.tier-2-card .more, .tier-2 a.card .more { display: none; }

/* Feature list */
.checks { list-style: none; padding: 0; margin: 0; }
.checks li { position: relative; padding-left: 32px; margin-bottom: 12px; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--navy); background: var(--gold); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; }

/* Steps: three numbered knots on one stitched hem-line (the line runs behind the numbers) */
.steps { counter-reset: step; display: grid; gap: 22px 32px; grid-template-columns: repeat(3,1fr); position: relative; }
.steps::before { content: ""; position: absolute; z-index: 0; top: 21px; left: 21px; right: 21px; height: 0;
  border-top: 3px dashed var(--gold); opacity: .8; }
.step { position: relative; z-index: 1; padding: 58px 4px 0 0; }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0; width: 42px; height: 42px;
  background: var(--navy); color: var(--gold); border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 1.15rem; box-shadow: 0 0 0 5px var(--knot-ring, #fff); }
.section-soft .steps { --knot-ring: var(--twill); }

/* Testimonials */
/* A customer letter, not a rating: one large gold opening quote mark in the display face marks it */
.quote { position: relative; background:#fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 58px 26px 22px; box-shadow: var(--shadow); }
.quote::before { content: "“"; content: "“" / ""; position: absolute; top: 6px; left: 20px;
  font-family: var(--display); font-size: 5.6rem; line-height: 1; font-weight: 700; color: var(--gold); }
.quote p { color: var(--ink); margin-bottom: 12px; }
.quote cite { font-style: normal; font-weight: 700; color: var(--navy); }

/* CTA band */
.cta { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-deep) 100%); color: var(--navy); text-align: center; padding: 56px 0; }
.cta h2 { color: var(--navy); }
/* Form first (the button), then email, then phone as a quieter second line (PRODUCT.md order) */
.cta .btn-navy { display: table; margin: 10px auto 0; }
.cta .cta-alt { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 22px; margin: 22px 0 0; font-size: 1rem; }
.cta .cta-alt span { flex-basis: 100%; font-weight: 600; }
.cta .cta-alt a { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--navy);
  text-decoration: underline; text-decoration-color: rgba(15,37,69,.35); text-underline-offset: 4px; padding: 6px 0; }
.cta .cta-alt a:hover { text-decoration-color: var(--navy); }
.cta .cta-alt .icon { width: 18px; height: 18px; stroke: var(--navy); vertical-align: 0; flex: none; }
@media (max-width: 400px) { .cta .cta-alt a { overflow-wrap: anywhere; } }

/* FAQ */
/* FAQ: one column at a readable measure, topic links on top */
.faq { max-width: 780px; }
.faq-jump { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 8px; }
.faq-jump a { font-weight: 700; font-size: .95rem; color: var(--navy); padding: 7px 14px; border: 1px solid var(--twill-line); border-radius: 999px; background: #fdfcf9; }
.faq-jump a:hover { border-color: var(--gold); text-decoration: none; }
.faq h2 { margin-top: 2em; padding-top: .9em; border-top: 1px solid var(--line); }
.faq details { background:#fff; border:1px solid var(--line); border-radius: 8px; padding: 4px 20px; margin-bottom: 12px; box-shadow: var(--shadow); }
.faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; cursor: pointer; font-weight: 700; color: var(--navy); padding: 14px 0; list-style: none; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; content: "+" / ""; flex: none; width: 1ch; text-align: center; color: var(--gold-text); font-weight: 800; }
.faq details[open] summary::after { content: "–"; content: "–" / ""; }
.faq details > p { padding-bottom: 10px; color: var(--ink); }

/* Forms */
.form-wrap { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: 0 10px 26px rgba(15, 37, 69, 0.10); }
/* Cards beside the quote/reorder form. Desktop: they ride along while the long form
   scrolls, so "What Happens Next" is still on screen at Submit (only on screens tall
   enough to show both cards under the ~150px sticky header). Phones: see the 720px block. */
.form-aside > .card + .card { margin-top: 24px; }
/* Quote/reorder: the form gets the room (the Backing select clipped at 50/50) */
.form-layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.qty-note:empty { display: none; }
.qty-note { display: block; color: var(--navy); font-weight: 600; }
/* Three cards now (patch proof, what happens next, talk): sticky only on tall screens */
@media (min-width: 721px) and (min-height: 880px) {
  .form-aside { position: sticky; top: 170px; }
}
/* Proof card: three real patches in a row */
.aside-patches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.aside-patches .compare-fig { margin: 0; }
.aside-patches .shot { aspect-ratio: 1 / 1; position: relative; }
.aside-patches .shot img { position: absolute; inset: 0; height: 100%; object-fit: contain; padding: 6px; }
.field { margin-bottom: 18px; }
.field label { display:block; font-weight:700; color: var(--navy); margin-bottom: 6px; font-size: .95rem; }
.req { color: #b42318; }
.opt { color: var(--muted); font-weight: 400; font-size: .92em; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border:1px solid #cfd6df; border-radius: 8px; font-size: 1rem; font-family: inherit; color: var(--ink); background:#fff;
}
/* solid ring (gold-dark on white is 3.5:1, above the 3:1 needed for a focus indicator) plus the soft glow */
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gold-dark); outline-offset: 1px; border-color: var(--gold-dark); box-shadow: 0 0 0 4px rgba(200,162,74,.22); }
.field input[type="file"] { padding: 8px; color: var(--muted); font-size: .92rem; }
.field input[type="file"]::file-selector-button {
  font-weight: 700; padding: 9px 16px; margin-right: 12px; border-radius: 6px;
  border: 1px solid var(--navy); background: var(--navy); color: #fff; font-family: inherit; font-size: .9rem; cursor: pointer; transition: .15s;
}
.field input[type="file"]::file-selector-button:hover { background: var(--navy-light); border-color: var(--navy-light); }
.field textarea { min-height: 120px; resize: vertical; }
.hint { font-size: .9rem; color: var(--muted); margin-top: 4px; }
/* Form errors (nav.js): red border + message under the field, summary at the top of the form.
   #b42318 is 6.5:1 on white. */
.field .error { display: block; color: #b42318; font-size: .88rem; font-weight: 600; margin-top: 5px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #b42318; background: #fffafa; }
.form-errors { background: #fdf0ef; border: 1px solid #f1c4bf; color: #8f1d14; border-radius: 8px; padding: 10px 14px; font-weight: 600; margin: 0 0 18px; }
.form-errors[hidden] { display: none; }
/* reorder: optional file-lookup fields tucked behind a disclosure */
.form-more { border: 1px dashed var(--twill-line); border-radius: 8px; padding: 0 16px; margin: 0 0 18px; background: #fdfcf9; }
.form-more > summary { cursor: pointer; font-weight: 700; color: var(--navy); padding: 14px 0; list-style: none; }
.form-more > summary::-webkit-details-marker { display: none; }
.form-more > summary::before { content: "+"; display: inline-block; width: 1.1em; color: var(--gold-text); font-weight: 800; }
.form-more[open] > summary::before { content: "–"; }
.form-more[open] { padding-bottom: 2px; }
/* Quote form: three labeled groups (your patch, size & quantity, contact), split by a stitched rule */
.form-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-group + .form-group::before { content: ""; display: block; height: 2px; margin: 10px 0 24px;
  background-image: repeating-linear-gradient(90deg, var(--twill-line) 0 8px, transparent 8px 14px); }
.form-group legend { float: left; width: 100%; font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--navy); padding: 0; margin: 0 0 12px; }
.form-group legend + * { clear: both; }
.form-req { font-size: .9rem; color: var(--muted); margin: 0 0 18px; }
.group-note { font-size: .95rem; color: var(--ink); margin: -4px 0 14px; }
/* one hint under a two-field row (width + height) */
.group-hint { display: block; margin: -10px 0 18px; }
/* submit in progress (nav.js) */
.btn[disabled] { opacity: .7; cursor: progress; }
.form-row { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-note { font-size:.9rem; color: var(--muted); margin-top: 6px; }

/* Breadcrumb */
.crumbs { font-size: .88rem; color: var(--muted); padding: 14px 0; }
.crumbs a { color: var(--navy-light); }
.hero .crumbs { color: #b9c6dc; }
.hero .crumbs a { color: #cdd8e8; }
/* thank-you page: category links as a quiet stitched row */
/* Thank-you: a small gold "patch" with a stitched (dashed) border, confirming the request was sent */
.sent-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 4px 0 22px 6px; border-radius: 50%;
  background: var(--gold); outline: 2px dashed var(--gold); outline-offset: 5px; }
.sent-mark svg { width: 30px; height: 30px; fill: none; stroke: var(--navy); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hero .hero-note { font-size: 1rem; color: #b9c6dc; margin-top: -4px; }
.thanks-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; font-weight: 700; margin: 6px 0 0; }
.thanks-links a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 5px; text-decoration-thickness: 2px; }

/* Prose pages */
.prose { max-width: 800px; }
.prose h2 { margin-top: 1.6em; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; }

/* Footer */
footer.site { background: var(--navy); color: #b9c6dc; padding: 54px 0 26px; font-size: .95rem; }
footer.site h3 { color: #fff; font-size: 1rem; margin-bottom: 14px; }
footer.site a { color: #d7e0ee; }
footer.site .fgrid { display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 36px; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 8px; }
footer.site .phone { color: var(--gold); font-weight: 700; font-size: 1.2rem; }
footer.site .phone a { color: var(--gold); }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 34px; padding-top: 18px; display:flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: .85rem; color: #8da0bd; }

/* Utility */
.mt0{margin-top:0}.mb0{margin-bottom:0}.mt2{margin-top:1.4rem}
.pill { display:inline-block; background: var(--bg-navy-soft); color: var(--navy); border:1px solid #d6e0ee; padding:6px 14px; border-radius:999px; font-size:.85rem; font-weight:600; margin:4px 4px 4px 0; }

/* Keyboard focus: a visible ring on every link and button (form fields keep their own above).
   gold-text on light surfaces (5.3:1 on white), gold on navy (6:1+), navy on the gold CTA band. */
:focus-visible { outline: 3px solid var(--gold-text); outline-offset: 3px; border-radius: 4px; }
.topbar :focus-visible, .nav :focus-visible, .hero :focus-visible, .section-navy :focus-visible,
footer.site :focus-visible, .door-new :focus-visible { outline-color: var(--gold); }
.cta :focus-visible { outline-color: var(--navy); }
.btn:focus-visible, .card:focus-visible { border-radius: var(--radius); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-offset: 1px; border-radius: 8px; }
::selection { background: rgba(200,162,74,.35); color: var(--navy); }
/* Skip link: hidden until a keyboard user tabs to it, then it drops in over the top bar */
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--gold); color: var(--navy);
  font-weight: 700; padding: 10px 18px; border-radius: 0 0 var(--radius) var(--radius); }
.skip-link:focus { top: 0; text-decoration: none; }
.skip-link:focus-visible { outline: 3px solid var(--navy); outline-offset: 0; }
main:focus { outline: none; }  /* focus target for the skip link, not an interactive control */
/* A heading for screen-reader outlines only (keeps the h1 > h2 > h3 order without changing the layout) */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Quote and reorder forms: the reassurance sits right above the button */
.form-assure { font-size: .95rem; color: var(--ink); margin: 4px 0 14px; }
/* Contact page: two doors (new patch leads, framed as a patch; reorder is the quieter peer),
   then every other channel as a letterhead-style directory on twill */
.contact-doors { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: stretch; max-width: 1000px; margin: 0 auto; }
.door { padding: 38px 36px 34px; border-radius: 14px; }
.door h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem); }
.door > p { margin-bottom: 1.4rem; }
.door-new h2 { color: #fff; }
.door-new > p { color: #dce5f2; }
.door-new .door-help { margin: 18px 0 0; font-size: .95rem; color: #b9c6dc; }
.door-new .door-help a { color: #fff; text-decoration: underline; text-decoration-color: rgba(200,162,74,.6); text-underline-offset: 3px; }
.door-new .door-help a:hover { text-decoration-color: var(--gold); }
.door-reorder { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); align-self: start; }
.door-reorder::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background-image: repeating-linear-gradient(90deg, var(--gold) 0 7px, var(--gold-dark) 7px 14px); }
.door-reorder > p { color: var(--muted); }
.directory { max-width: 820px; margin: 32px auto 0; border-top: 1px dashed var(--twill-line); }
.dir-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 24px; padding: 20px 4px; border-bottom: 1px dashed var(--twill-line); }
.directory dt { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--navy); padding-top: 2px; }
.directory dd { margin: 0; min-width: 0; }
.dir-value { display: block; font-style: normal; font-weight: 700; font-size: 1.2rem; color: var(--navy); line-height: 1.4; }
a.dir-value { text-decoration: underline; text-decoration-color: rgba(168,132,47,.55); text-decoration-thickness: 2px; text-underline-offset: 5px; }
a.dir-value:hover { color: var(--navy-light); text-decoration-color: var(--gold-dark); }
address.dir-value { font-weight: 400; font-size: 1.08rem; color: var(--ink); }
.dir-email { overflow-wrap: anywhere; }
.directory dd > span:not(.dir-value) { display: block; margin-top: 4px; font-size: .95rem; color: var(--muted); }
/* The directory ends on a helpful invitation, not a caveat (fax lives in the email hint) */
.dir-close { max-width: 820px; margin: 28px auto 0; text-align: center; font-size: 1.08rem; color: var(--ink); text-wrap: balance; }
.dir-close a { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(168,132,47,.55);
  text-decoration-thickness: 2px; text-underline-offset: 4px; }
.dir-close a:hover { text-decoration-color: var(--gold-dark); }
.nowrap { white-space: nowrap; }
/* Purchasing offices decide here, at the doors, so the PO / W-9 line sits right under them */
.procurement { max-width: 1000px; margin: 26px auto 0; display: flex; align-items: baseline; gap: 4px 22px;
  padding: 16px 22px; background: var(--bg-navy-soft); border: 1px dashed rgba(28,58,99,.28); border-radius: var(--radius); }
.proc-label { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.02rem; color: var(--navy); white-space: nowrap; }
.proc-text { margin: 0; font-size: .98rem; color: var(--ink); text-wrap: pretty; }
/* phone-only shortcut for returning customers, past the new-patch door */
.contact-hero .jump-reorder { display: none; }

/* Responsive */
@media (max-width: 1040px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
}
/* Laptop widths: 8 menu items + the brand only fit with tighter spacing */
@media (min-width: 1060px) and (max-width: 1240px) {
  .menu { gap: 0; }
  .menu a { padding: 8px 7px; font-size: .92rem; }
  .sub-toggle { padding: 8px 6px 8px 7px; font-size: .92rem; }
  .menu .submenu a { padding: 9px 12px; }
  .menu .btn { padding: 9px 14px; }
  .brand { gap: 10px; }
  .site-logo { height: 46px; }
  .brand-name { font-size: 1.05rem; }
}
/* Collapse the top nav to the mobile menu before the links crowd the brand (1059px since Reorder joined the menu). */
@media (max-width: 1059px) {
  .nav-toggle { display: block; }
  .menu { position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; gap: 0; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); display: none; padding: 8px; }
  .menu.open { display: flex; }
  /* the menu lives in the sticky header, so it scrolls itself when it is taller than the screen */
  .menu { max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow-y: auto; overscroll-behavior: contain; }
  /* block links: full-width tap targets that don't overlap the next row */
  .menu a { display: block; padding: 12px; border-radius: 6px; color: var(--navy); }
  .menu .btn { margin: 6px; text-align: center; }
  .menu .btn-ghost { color: var(--navy); border-color: var(--navy); }
  .menu .btn-ghost:hover { background: var(--bg-navy-soft); color: var(--navy); }
  .sub-toggle { width: 100%; justify-content: space-between; padding: 12px; color: var(--navy); }
  .sub-toggle:hover, .has-sub.open > .sub-toggle { background: var(--bg-navy-soft); color: var(--navy); }
  .menu a[aria-current="page"]:not(.btn), .sub-toggle.is-current { color: var(--navy); }
  .submenu { position: static; min-width: 0; border: 0; box-shadow: none; padding: 0 0 6px 14px; }
  .submenu::before { display: none; }
  .menu :focus-visible { outline-color: var(--gold-text); }  /* the open menu is white */
  .nav-quote { display: inline-block; }
}
/* Below ~720px the slogan wraps beside the quote pill and the lockup grows to 3-4 lines; drop it */
@media (max-width: 720px) {
  .brand-name small { display: none; }
}
/* Phones: one compact contact row (both links still tappable) so the sticky header stays short */
@media (max-width: 560px) {
  .topbar .container { padding-top: 6px; padding-bottom: 6px; }
  .topbar-contact { margin: 0 auto; gap: 12px; }
  .topbar-contact .long { display: none; }
  .topbar-contact .short { display: inline; }
  .topbar-contact a { min-height: 32px; }
  .topbar-contact .phone { padding-left: 12px; }
  .nav-quote { padding: 7px 12px; font-size: .88rem; }
}
/* Below ~520px the wordmark wraps to three lines, then runs under the quote pill (it can't break
   narrower than "Creations"). The GRC mark carries the brand here; the logo's alt still names the business. */
@media (max-width: 519px) {
  .brand-name { display: none; }
}
/* Narrowest phones: keep quote, email and phone on one row (email shrinks to its icon; it keeps its aria-label) */
@media (max-width: 400px) {
  .topbar-contact { gap: 10px; }
  .topbar-contact .email .short, .topbar-contact .phone .icon { display: none; }
  .topbar-contact .email .icon { width: 20px; height: 20px; }
  .topbar-contact .phone { padding-left: 10px; }
  /* smaller mark so logo + quote pill + menu button fit 360px and the sticky header stays ~64px tall */
  .nav { padding: 10px 16px; }
  .site-logo { height: 40px; }
}
@media (max-width: 900px) {
  .grid-3, .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: 26px; }
  .steps::before { top: 21px; bottom: 40px; left: 21px; right: auto; width: 0; height: auto; border-top: 0; border-left: 3px dashed var(--gold); }
  .step { padding: 4px 0 0 64px; }
  .hero-split { grid-template-columns: 1fr; gap: 32px; }
  .photo-slot { max-width: 360px; margin: 0 auto; }
  footer.site .fgrid { grid-template-columns: 1fr 1fr; }
  /* Homepage hero, stacked: patches first so they're on the first screen, then a
     tighter copy block. Desktop (side-by-side) is untouched. */
  .hero { padding: 32px 0 44px; }
  .hero.hero-compact { padding: 28px 0 36px; }
  /* H1, claim, and the quote button first (all above the fold on a phone); the pile follows */
  .hero-split:has(.pile) .hero-copy { display: contents; }
  .hero-split:has(.pile) h1 { order: 0; margin-bottom: 0; }
  .hero-split .pile { order: 3; width: min(100%, 230px); justify-self: center; }
  .hero-split:has(.pile) .hero-sub { order: 1; }
  .hero-split:has(.pile) .actions { order: 2; }
  .hero-split:has(.pile) .hero-alt { order: 4; }
  .hero-split:has(.pile) .hero-facts { order: 5; }
  .hero-split:has(.pile) { gap: 16px; }
  .hero-split:has(.pile) .hero-sub { margin-bottom: 0; }
  .hero-split:has(.pile) .hero-sub strong { font-size: 1.2rem; }
  .hero-split > .photo-slot { order: -1; max-width: 230px; }
  .hero-split:has(> .photo-slot) { gap: 22px; }
  .hero p { font-size: 1.05rem; }
  .hero .actions { margin-top: 20px; gap: 10px; }
  .hero .btn-lg { padding: 12px 20px; font-size: 1rem; }
  .hero .badges { margin-top: 20px; gap: 4px 18px; font-size: .88rem; }
}
@media (min-width: 721px) and (max-width: 900px) {
  .grid.category-grid.tier-1 { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .card-lg .card-patch { height: 140px; }
  a.card.card-lg { padding: 20px 18px; }
  .card-lg h3 { font-size: 1.2rem; }
  .grid.category-grid.tier-2 { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .tier-2 .card { padding: 14px 10px; }
  .tier-2 h3 { font-size: .9rem; }
}
@media (max-width: 720px) {
  .contact-hero { padding: 36px 0 32px; }
  .contact-hero .jump-reorder { display: block; margin: 14px 0 0; font-size: 1rem; }
  .procurement { flex-direction: column; gap: 4px; padding: 14px 18px; }
  .contact-doors { grid-template-columns: 1fr; gap: 20px; }
  .door { padding: 30px 24px 26px; }
  .door .btn { display: block; text-align: center; }
  .dir-row { grid-template-columns: 1fr; gap: 4px; padding: 16px 2px; }
  .dir-email { font-size: 1.08rem; }
  .hero-facts { grid-template-columns: 1fr; gap: 8px; margin-top: 20px; padding-top: 16px; }
  .hero-facts b { display: inline; margin-right: 6px; }
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .grid.close-ups { grid-template-columns: 1fr 1fr; gap: 12px; }
  .grid.patch-gallery { grid-template-columns: repeat(2, 1fr); gap: 16px; }  /* 1 column = 24 full-screen patches */
  .patch-gallery .shot img { padding: 10px; }
  :root { --stock-in: 30px; }  /* phones: two patches across, still to scale */
  .stock-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 18px; }
  .stock-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .stock-specs li { grid-template-columns: auto 1fr; }
  .stock-specs li + li { margin-top: 4px; }
  .stock-specs .nw { grid-column: 1 / -1; }  /* size on its own line under the rank */
  .order-facts > div { grid-template-columns: 1fr; gap: 2px; }
  .order-end-box { grid-template-columns: 1fr; }
  .stock-back { justify-content: flex-start; }
  .order-panel { grid-template-columns: 1fr; gap: 32px; }
  .form-row { grid-template-columns: 1fr; }
  .form-row.form-row-pair { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* Phones: the form comes first so a field is on the first screen; the side cards follow it.
     The "No obligation" line above Submit carries the reassurance on its own. */
  /* Homepage categories: compact 2-across patch + name tiles instead of 8 stacked cards */
  .grid.category-grid.tier-1 { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  a.card.card-lg { display: grid; grid-template-columns: 88px 1fr; column-gap: 16px; align-items: center; padding: 16px; }
  .card-lg .card-patch { grid-row: 1 / span 3; height: 88px; margin: 0; }
  a.card.card-lg .more { display: none; }
  .card-lg h3 { font-size: 1.1rem; }
  .card-lg p { margin: 0; font-size: .93rem; line-height: 1.45; }
  .grid.category-grid.tier-2 { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
  .tier-2 .card { padding: 12px 12px 14px; }
  .tier-2 .card-patch { height: 72px; margin-bottom: 8px; }
  .tier-2 .card:last-child { grid-column: 1 / -1; }
  .form-layout { grid-template-columns: 1fr; }
  .form-aside { display: contents; }
  .form-aside > .card + .card { margin-top: 0; }
  /* phones: the sticky top bar already carries email + phone, so the "Prefer to talk?" line
     moves under the form and the first field reaches the first screen */
  .form-col { display: flex; flex-direction: column; }
  .form-col > .form-alt { order: 1; margin: 18px 0 0; }
  .form-layout h2 { margin-bottom: .35em; }
  .section:has(.form-layout) { padding-top: 32px; }
  .form-wrap { padding: 20px 18px; }
  footer.site .fgrid { grid-template-columns: 1fr; }
  .section { padding: 48px 0; }
  body { font-size: 16px; }
}