/* 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; }
.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 */
.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 { 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: fax and mail on one quiet line under the email / phone cards */
.contact-other { font-size: .95rem; color: var(--muted); max-width: 760px; margin: 24px auto 0; }

/* 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; }
}
/* 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: 16px; }
  .topbar-contact .long { display: none; }
  .topbar-contact .short { display: inline; }
  .topbar-contact a { min-height: 32px; }
  .topbar-contact { gap: 12px; }
  .topbar-contact .phone { padding-left: 12px; }
  .brand-name small { display: none; }
  .nav-quote { padding: 7px 12px; font-size: .88rem; }
}
/* 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; }
  /* tighter brand lockup so the sticky header (nav only) stays ~64px tall */
  .nav { padding: 10px 16px; }
  .brand { flex: 1; min-width: 0; gap: 10px; }
  .site-logo { height: 40px; }
  .brand-name { font-size: 1rem; }
  .brand-name small { font-size: .7rem; letter-spacing: .2px; line-height: 1.3; margin-top: 2px; }
}
@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) {
  .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; }
  .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; }
}