/* ==========================================================================
   Reed Works — Custom Laser Engraving
   Design system: design-system/reed-works/MASTER.md (+ Project Overrides)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces — warm stone, not blue-grey */
  --bg:              #FAFAF9;
  --bg-sunk:         #F1EFEC;
  --card:            #FFFFFF;
  --ink:             #0C0A09;
  --ink-2:           #44403C;
  --ink-3:           #6B6560;
  --line:            #E2DED9;
  --line-strong:     #D6D3D1;

  /* Dark sections */
  --dark:            #1C1917;
  --dark-2:          #26221F;
  --dark-line:       #3A3532;
  --on-dark:         #F5F3F0;
  --on-dark-2:       #A8A29E;

  /* Brass — two stops so both surfaces clear 4.5:1.
     brass-600 is a shade below the generated #A16207: that value passes on
     --bg (#FAFAF9) but lands at 4.29:1 on --bg-sunk (#F1EFEC), and the eyebrow
     labels and inline links sit on the sunk surface. */
  --brass-600:       #8F5706;  /* on --bg 5.9:1 · on --bg-sunk 5.0:1 */
  --brass-400:       #E0A62E;  /* on dark  7.8:1 */
  --brass-tint:      #FBF3E2;

  --focus:           #8F5706;

  /* Spacing — density 4/10 */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Section rhythm, fluid */
  --section-y: clamp(4rem, 9vw, 7.5rem);
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --maxw:      78rem;

  --shadow-sm: 0 1px 2px rgba(12, 10, 9, 0.05);
  --shadow-md: 0 4px 6px rgba(12, 10, 9, 0.08);
  --shadow-lg: 0 10px 24px rgba(12, 10, 9, 0.10);
  --shadow-xl: 0 20px 40px rgba(12, 10, 9, 0.14);

  --r-sm: 4px;
  --r:    8px;
  --r-lg: 12px;

  --t:    200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-sl: 320ms cubic-bezier(0.4, 0, 0.2, 1);

  --font-display: 'Saira Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* keep anchored headings clear of the sticky header */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

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

/* Visible focus everywhere — never removed */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.on-dark :focus-visible,
.hero :focus-visible,
.section--dark :focus-visible { outline-color: var(--brass-400); }

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

.skip-link {
  position: absolute; top: 0; left: var(--gutter);
  transform: translateY(-120%);
  z-index: 200;
  background: var(--brass-600); color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r) var(--r);
  font-weight: 600; text-decoration: none;
  transition: transform var(--t);
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }

.section--sunk { background: var(--bg-sunk); }

.section--dark {
  background: var(--dark);
  color: var(--on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--on-dark); }

/* Eyebrow label — condensed caps, the "spec sheet" tell */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-600);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 var(--space-md);
}
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line-strong);
  max-width: 5rem;
}
/* Any dark surface: `.section--dark`, the hero, or anything tagged `.on-dark`.
   Keep these three selectors together — a dark block that misses one of them
   renders light-mode ink on a dark ground. */
.section--dark .eyebrow,
.hero .eyebrow,
.on-dark .eyebrow { color: var(--brass-400); }
.section--dark .eyebrow::after,
.hero .eyebrow::after,
.on-dark .eyebrow::after { background: var(--dark-line); }

.section-head { max-width: 46rem; margin-bottom: var(--space-2xl); }

.section-head h2 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  margin-bottom: var(--space-md);
}

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--ink-2);
  line-height: 1.65;
}
.section--dark .lede,
.hero .lede,
.on-dark .lede { color: var(--on-dark-2); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 48px tall — clears the 44px touch minimum */
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--r);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t),
              color var(--t), transform var(--t), box-shadow var(--t);
}
.btn svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

.btn--primary {
  background: var(--brass-600);
  color: #fff;
  border-color: var(--brass-600);
}
.btn--primary:hover {
  background: #6E4304;
  border-color: #6E4304;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  border-color: var(--ink);
  background: rgba(12, 10, 9, 0.04);
  transform: translateY(-1px);
}

/* On dark surfaces — the hero is dark but carries neither utility class,
   so it must be listed explicitly or its ghost button renders near-black. */
.on-dark .btn--ghost,
.hero .btn--ghost,
.section--dark .btn--ghost {
  color: var(--on-dark);
  border-color: rgba(245, 243, 240, 0.32);
}
.on-dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.section--dark .btn--ghost:hover {
  border-color: var(--on-dark);
  background: rgba(245, 243, 240, 0.08);
}

.btn:active { transform: translateY(0); }

/* Text link with brass underline.
   The rule is drawn with ::after rather than border-bottom so the hit area can
   be padded out to 44px without the underline drifting away from the text. */
.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--brass-600);
  cursor: pointer;
  transition: gap var(--t), color var(--t);
}
.link-arrow::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: calc(50% - 0.85em);
  height: 2px;
  background: currentColor;
}
.link-arrow:hover { gap: 0.875rem; color: #6E4304; }
.link-arrow svg { width: 1rem; height: 1rem; }
.section--dark .link-arrow { color: var(--brass-400); }
.section--dark .link-arrow:hover { color: #F0BC55; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(28, 25, 23, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dark-line);
  color: var(--on-dark);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: 4.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  text-decoration: none;
  margin-right: auto;
  flex-shrink: 0;
}
.brand img { height: 2.5rem; width: auto; }

.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.brand__tag {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-400);
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: 0.25rem; }

.nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  /* 0.75rem, not 0.875rem: six tabs on one line plus a nowrap CTA need the
     24px this gives back to stay inside the 1248px column. */
  padding: 0 0.75rem;
  border-radius: var(--r);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  /* a two-word page name must never break across lines inside its tab */
  white-space: nowrap;
  color: var(--on-dark-2);
  transition: color var(--t), background-color var(--t);
}
.nav a:hover { color: var(--on-dark); background: rgba(245, 243, 240, 0.07); }
.nav a[aria-current='page'] { color: var(--brass-400); }

.header__actions { display: flex; align-items: center; gap: 0.75rem; }

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: var(--r);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--on-dark);
  white-space: nowrap;
  transition: color var(--t);
}
.header__phone:hover { color: var(--brass-400); }
.header__phone svg { width: 1.0625rem; height: 1.0625rem; color: var(--brass-400); }

/* nowrap so "Get a Quote" stays on one line; without it the flex row squeezed
   the button until the label broke in two and the header grew to 68px. */
.header .btn {
  min-height: 44px;
  padding: 0.5rem 1.125rem;
  font-size: 0.9375rem;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--dark-line);
  border-radius: var(--r);
  color: var(--on-dark);
  cursor: pointer;
  transition: background-color var(--t);
}
.nav-toggle:hover { background: rgba(245, 243, 240, 0.08); }
.nav-toggle svg { width: 1.375rem; height: 1.375rem; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__open  { display: none; }
.nav-toggle[aria-expanded='true'] .nav-toggle__close { display: block; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--dark);
  color: var(--on-dark);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.hero__copy { max-width: 36rem; }

.hero h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.25rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
}
.hero h1 em {
  font-style: normal;
  color: var(--brass-400);
}

.hero__lede {
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  line-height: 1.6;
  color: var(--on-dark-2);
  margin-bottom: var(--space-xl);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

/* Trust strip */
.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: var(--space-lg) 0 0;
  border-top: 1px solid var(--dark-line);
}
.trust li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--on-dark-2);
}
.trust svg {
  width: 1rem; height: 1rem;
  color: var(--brass-400);
  flex-shrink: 0;
}

/* Hero collage */
.hero__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.75rem;
}
.hero__media figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--dark-line);
  background: var(--dark-2);
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  transition: transform var(--t-sl);
}
.hero__media figure:hover img { transform: scale(1.04); }
.hero__media figure:nth-child(1) { grid-row: span 2; }
.hero__media figure:nth-child(1) img { aspect-ratio: 3 / 5; }
.hero__media figure:nth-child(2) img,
.hero__media figure:nth-child(3) img { aspect-ratio: 4 / 3; }

/* --------------------------------------------------------------------------
   7. Materials marquee
   -------------------------------------------------------------------------- */
.materials {
  background: var(--dark-2);
  border-top: 1px solid var(--dark-line);
  border-bottom: 1px solid var(--dark-line);
  padding-block: var(--space-lg);
  color: var(--on-dark-2);
}
.materials__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
}
.materials__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-400);
}
.materials ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  list-style: none;
  margin: 0; padding: 0;
}
.materials li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark);
}

/* --------------------------------------------------------------------------
   8. Services
   -------------------------------------------------------------------------- */
.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.service {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-xl);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.service:hover {
  border-color: var(--brass-600);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.service__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: var(--r);
  background: var(--brass-tint);
  color: var(--brass-600);
  margin-bottom: var(--space-lg);
}
.service__icon svg { width: 1.5rem; height: 1.5rem; }

.service h3 {
  font-size: 1.5rem;
  margin-bottom: 0.625rem;
}
.service p {
  color: var(--ink-2);
  font-size: 0.9375rem;
  margin-bottom: var(--space-lg);
}

.service ul {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.service li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.service li svg {
  width: 1.0625rem; height: 1.0625rem;
  color: var(--brass-600);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.service .link-arrow { margin-top: auto; align-self: flex-start; }

/* --------------------------------------------------------------------------
   9. Gallery
   -------------------------------------------------------------------------- */
.gallery-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-bottom: var(--space-2xl);
}
.gallery-head .section-head { margin-bottom: 0; }

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.875rem;
}

.gallery figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bg-sunk);
  border: 1px solid var(--line);
}
.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  transition: transform var(--t-sl);
}
.gallery figure:hover img { transform: scale(1.05); }

.gallery figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.5rem 0.875rem 0.75rem;
  background: linear-gradient(to top, rgba(12, 10, 9, 0.88), transparent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--t);
}
.gallery figure:hover figcaption,
.gallery figure:focus-within figcaption { opacity: 1; }

/* Feature the tall ones */
.gallery figure.is-tall { grid-row: span 2; }
.gallery figure.is-tall img { aspect-ratio: 1 / 2.06; }

/* --------------------------------------------------------------------------
   10. Metal engraving feature
   -------------------------------------------------------------------------- */
.metal__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.metal__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--dark-line);
}
.metal__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: rgba(224, 166, 46, 0.14);
  border: 1px solid rgba(224, 166, 46, 0.4);
  color: var(--brass-400);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* never let a two-word badge break mid-label */
  white-space: nowrap;
  margin-bottom: var(--space-md);
}
.badge svg { width: 0.875rem; height: 0.875rem; }

.metal h2 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  margin-bottom: var(--space-md);
}

.metal__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem var(--space-lg);
  list-style: none;
  margin: var(--space-xl) 0;
  padding: 0;
}
.metal__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--on-dark-2);
}
.metal__list svg {
  width: 1.0625rem; height: 1.0625rem;
  color: var(--brass-400);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.alloys {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 var(--space-xl);
  padding: 0;
}
.alloys li {
  padding: 0.3125rem 0.75rem;
  border: 1px solid var(--dark-line);
  border-radius: 999px;
  font-size: 0.8125rem;
  color: var(--on-dark-2);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   11. Process
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  counter-reset: step;
  list-style: none;
  margin: 0; padding: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-top: var(--space-lg);
  border-top: 2px solid var(--line-strong);
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--brass-600);
  margin-bottom: 0.625rem;
}
.steps h3 {
  font-size: 1.1875rem;
  margin-bottom: 0.375rem;
}
.steps p {
  font-size: 0.9375rem;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   12. Quote form
   -------------------------------------------------------------------------- */
.quote__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: start;
}

.quote__aside .lede { margin-bottom: var(--space-xl); }

.contact-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: var(--space-md);
}
.contact-list a,
.contact-list span {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  font-size: 1rem;
  text-decoration: none;
  color: var(--ink);
  transition: color var(--t);
  /* long email addresses must not force a horizontal scrollbar */
  overflow-wrap: anywhere;
}
.contact-list a:hover { color: var(--brass-600); }
.contact-list svg {
  width: 1.25rem; height: 1.25rem;
  color: var(--brass-600);
  flex-shrink: 0;
}

/* Compact social-proof strip beside the quote form. The reviews themselves live
   on /reviews now, so this is the homepage's only pointer to them — brass-600
   rather than the -400 used on dark, for contrast against --bg-sunk. */
.quote__proof {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: var(--space-xl);
  padding: 0.7rem 1.1rem;
  min-height: 44px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--t), color var(--t), box-shadow var(--t);
}
.quote__proof:hover {
  border-color: var(--brass-600);
  color: var(--brass-600);
  box-shadow: var(--shadow-sm);
}
.quote__proof .stars { color: var(--brass-600); }
.quote__proof-score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1;
}
.quote__proof-sep { color: var(--line-strong); }
.quote__proof-count { font-size: 0.9375rem; color: var(--ink-2); }
.quote__proof:hover .quote__proof-count { color: inherit; }
.quote__proof-arrow {
  width: 1rem; height: 1rem;
  flex-shrink: 0;
  transition: transform var(--t);
}
.quote__proof:hover .quote__proof-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .quote__proof-arrow { transition: none; }
}

.form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-md);
}

.form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
.field--full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 0.4375rem; }

.field label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.field .req { color: var(--brass-600); }

.field .hint {
  font-size: 0.8125rem;
  color: var(--ink-3);
  line-height: 1.45;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.875rem;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  /* 16px — stops iOS Safari zooming the viewport on focus */
  font-size: 1rem;
  transition: border-color var(--t), box-shadow var(--t);
}
.field textarea { min-height: 7.5rem; resize: vertical; }

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236B6560' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
  cursor: pointer;
}

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-3); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brass-600);
  box-shadow: 0 0 0 3px rgba(143, 87, 6, 0.22);
}

/* Inline validation — message sits directly under its own field */
.field .error {
  display: none;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #B4200F;
}
.field .error svg { width: 0.9375rem; height: 0.9375rem; flex-shrink: 0; }

.field.is-invalid .error { display: flex; }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: #B4200F; }
.field.is-invalid input:focus,
.field.is-invalid textarea:focus { box-shadow: 0 0 0 3px rgba(180, 32, 15, 0.16); }

.form__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
}
.form__note { font-size: 0.8125rem; color: var(--ink-3); }

.form__status {
  margin-top: var(--space-md);
  padding: 0.875rem 1rem;
  border-radius: var(--r);
  font-size: 0.9375rem;
  display: none;
}
.form__status.is-visible { display: block; }
.form__status[data-tone='ok'] {
  background: var(--brass-tint);
  border: 1px solid rgba(161, 98, 7, 0.35);
  color: #6E4305;
}
.form__status[data-tone='err'] {
  background: #FDF0EE;
  border: 1px solid rgba(180, 32, 15, 0.3);
  color: #8E1A0C;
}
/* The status is focused after a successful send so screen readers land on it;
   it isn't a control, so suppress the ring but keep it reachable. */
.form__status:focus { outline: none; }

/* Honeypot. display:none is what Formspree's own docs use — bots that parse the
   DOM still fill it, real users never see it, and aria-hidden + tabindex="-1"
   keep it away from assistive tech and the tab order. */
.hp {
  display: none;
}

/* --------------------------------------------------------------------------
   13. Catalogs
   -------------------------------------------------------------------------- */
.catalogs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.catalog {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--space-xl);
  background: var(--dark-2);
  border: 1px solid var(--dark-line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--on-dark);
  transition: border-color var(--t), background-color var(--t), transform var(--t);
}
.catalog:hover {
  border-color: var(--brass-400);
  background: #2E2925;
  transform: translateY(-2px);
}
.catalog__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.catalog h3 { font-size: 1.375rem; }
.catalog p { font-size: 0.9375rem; color: var(--on-dark-2); }
.catalog__top svg {
  width: 1.25rem; height: 1.25rem;
  color: var(--brass-400);
  flex-shrink: 0;
  transition: transform var(--t);
}
.catalog:hover .catalog__top svg { transform: translate(3px, -3px); }

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: #14110F;
  color: var(--on-dark-2);
  border-top: 1px solid var(--dark-line);
  padding-block: var(--space-3xl) var(--space-xl);
  font-size: 0.9375rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-2xl) var(--space-xl);
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--dark-line);
}

.footer h4 {
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-400);
  margin-bottom: var(--space-md);
}

.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }

.footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  text-decoration: none;
  color: var(--on-dark-2);
  transition: color var(--t);
  overflow-wrap: anywhere;
}
.footer a:hover { color: var(--brass-400); }

/* The logo is an emblem only, so the footer pairs it with a text wordmark
   the same way the header does. */
.footer__lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  margin-bottom: var(--space-md);
}
.footer__brand img { height: 3rem; width: auto; }
.footer__lockup .brand__name { font-size: 1.25rem; }
.footer__lockup:hover .brand__name { color: var(--brass-400); }
.footer__brand p { max-width: 26rem; line-height: 1.6; }

.socials { display: flex; gap: 0.5rem; margin-top: var(--space-md); }
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  min-height: 44px;
  border: 1px solid var(--dark-line);
  border-radius: var(--r);
  transition: border-color var(--t), color var(--t), background-color var(--t);
}
.socials a:hover {
  border-color: var(--brass-400);
  background: rgba(224, 166, 46, 0.1);
}
.socials svg { width: 1.25rem; height: 1.25rem; }

.footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  font-size: 0.875rem;
  color: #8B847D; /* 4.6:1 on the #14110F footer */
}

/* --------------------------------------------------------------------------
   15. Scroll reveal
   -------------------------------------------------------------------------- */
/* Only hide reveal targets when JS is actually running to bring them back.
   The .js class is set by an inline script in <head>; without it every
   section below the hero would stay invisible. */
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 450ms cubic-bezier(0.2, 0.6, 0.3, 1),
              transform 450ms cubic-bezier(0.2, 0.6, 0.3, 1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */
/* Brand + 5 nav items + phone + CTA stop fitting well before 900px,
   so the nav collapses here rather than letting the CTA overflow. Raised from
   1080px when "In the Wild" became the fifth item, and from 1140px once the
   tabs were set to nowrap — below this the bar needs 1275px of room and the
   row overflowed instead of quietly wrapping each tab onto two lines. */
@media (max-width: 1274px) {
  .nav-toggle { display: inline-flex; }

  /* Nav collapses into a panel under the bar */
  .nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-sm) var(--gutter) var(--space-lg);
    background: var(--dark);
    border-bottom: 1px solid var(--dark-line);
    box-shadow: var(--shadow-xl);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { min-height: 52px; padding-inline: 0.75rem; font-size: 1.0625rem; }

  .header__inner { position: relative; }

  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { grid-template-columns: repeat(3, 1fr); }
  .hero__media figure:nth-child(1) { grid-row: auto; }
  .hero__media figure img,
  .hero__media figure:nth-child(1) img { aspect-ratio: 1 / 1; }

  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .header__phone span { display: none; }

  .services,
  .catalogs { grid-template-columns: 1fr; }

  .steps { grid-template-columns: repeat(2, 1fr); }

  .gallery { grid-template-columns: repeat(3, 1fr); }
  .gallery figure.is-tall { grid-row: auto; }
  .gallery figure.is-tall img { aspect-ratio: 1 / 1; }

  .metal__inner,
  .quote__inner { grid-template-columns: 1fr; }
  .metal__media { order: -1; }
}

@media (max-width: 640px) {
  /* The logo is an emblem with no wordmark, so the HTML lockup has to stay —
     hiding it here would leave the mobile header unbranded. Drop the tagline
     only, which is what actually buys back the header space. */
  .brand__tag { display: none; }
  .brand__name { font-size: 1rem; }
  .header__inner { gap: 0.75rem; min-height: 4rem; }
  .header .btn { padding: 0.5rem 0.875rem; }

  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }

  .hero__media { grid-template-columns: repeat(2, 1fr); }
  .hero__media figure:nth-child(3) { display: none; }

  .gallery { grid-template-columns: repeat(2, 1fr); }

  .steps { grid-template-columns: 1fr; }

  .form__grid { grid-template-columns: 1fr; }
  .form__foot { flex-direction: column; align-items: stretch; }
  .form__foot .btn { width: 100%; }

  .footer__grid { grid-template-columns: 1fr; }

  .materials__inner { gap: var(--space-sm) var(--space-lg); }
}

/* --------------------------------------------------------------------------
   17. Reduced motion — render final state, keep meaning
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero__media figure:hover img,
  .gallery figure:hover img { transform: none; }
}

/* --------------------------------------------------------------------------
   18. Print
   -------------------------------------------------------------------------- */
@media print {
  .header, .hero__media, .nav-toggle, .form, .socials { display: none; }
  body { background: #fff; color: #000; }
  .section--dark, .hero, .footer { background: #fff !important; color: #000 !important; }
}

/* ==========================================================================
   19. Gallery page
   ========================================================================== */

/* Shared interior-page hero (gallery, metal engraving, custom work) */
.page-hero {
  background: var(--dark);
  color: var(--on-dark);
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 5vw, 3.5rem);
}
.page-hero h1 {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  margin-bottom: var(--space-md);
}
.page-hero h1 em { font-style: normal; color: var(--brass-400); }
.page-hero .lede { max-width: 42rem; margin-bottom: var(--space-xl); }
.page-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* --- filter bar ----------------------------------------------------------
   Sticks under the header so the categories stay reachable through a long
   scroll. top must match the header height or the two overlap. */
.filters {
  position: sticky;
  /* +1px clears the header's bottom border, which sits below its min-height */
  top: calc(4.5rem + 1px);
  z-index: 60;
  background: rgba(250, 250, 249, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.filters__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-block: 0.875rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  /* a two-word category must never break across lines inside its pill */
  white-space: nowrap;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }

.chip__n {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* Selection is carried by background + border + weight, not colour alone. */
.chip[aria-pressed='true'] {
  background: var(--dark);
  border-color: var(--dark);
  color: var(--on-dark);
}
.chip[aria-pressed='true'] .chip__n { color: var(--brass-400); }

.filters__count {
  font-size: 0.875rem;
  color: var(--ink-3);
  margin-left: auto;
}

/* --- tile grid ----------------------------------------------------------- */
.gal-section { padding-block: var(--space-2xl) var(--section-y); }

/* The gallery breathes wider than the 78rem reading measure used elsewhere —
   213 tiles at 4 columns is needlessly sparse on a large screen. */
.wrap--wide { max-width: 92rem; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.875rem;
}

.tile { margin: 0; }
.tile[hidden] { display: none; }
/* Deliberately no per-tile reveal animation: across 213 lazy-loaded tiles it
   buys nothing visually and risks leaving content invisible on a fast scroll. */

.tile__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  text-decoration: none;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.tile__btn:hover {
  border-color: var(--brass-600);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.tile__btn img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.tile__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.25rem 0.75rem 0.625rem;
  background: linear-gradient(to top, rgba(12, 10, 9, 0.9), transparent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  opacity: 0;
  transition: opacity var(--t);
}
.tile__btn:hover .tile__cap,
.tile__btn:focus-visible .tile__cap { opacity: 1; }

.gal-empty {
  padding: var(--space-3xl) 0;
  text-align: center;
  color: var(--ink-3);
}

/* --- closing CTA --------------------------------------------------------- */
.gal-cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.gal-cta h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); margin-bottom: var(--space-md); }
.gal-cta .lede { max-width: 34rem; }
.gal-cta__actions { display: flex; gap: var(--space-md); flex-wrap: wrap; }

/* --- lightbox ------------------------------------------------------------ */
.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
}
.lb[hidden] { display: none; }

.lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 9, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lb__panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: min(96vw, 68rem);
  padding: var(--gutter);
}
.lb__panel:focus { outline: none; }

.lb__figure {
  flex: 1;
  margin: 0;
  min-width: 0;
  text-align: center;
}
.lb__figure img {
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  border-radius: var(--r-lg);
  background: var(--dark-2);
}
.lb__figure figcaption {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--on-dark);
}
.lb__pos {
  font-weight: 500;
  color: var(--on-dark-2);
  font-variant-numeric: tabular-nums;
}

.lb__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: rgba(245, 243, 240, 0.1);
  border: 1px solid rgba(245, 243, 240, 0.28);
  border-radius: 999px;
  color: var(--on-dark);
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t);
}
.lb__btn:hover {
  background: rgba(245, 243, 240, 0.2);
  border-color: var(--on-dark);
}
.lb__btn svg { width: 1.5rem; height: 1.5rem; }
.lb__btn:focus-visible { outline: 3px solid var(--brass-400); outline-offset: 3px; }

.lb__close {
  position: absolute;
  top: 0;
  right: var(--gutter);
  z-index: 2;
}

@media (max-width: 900px) {
  /* Wrapped chips made the sticky bar ~267px tall on a phone — a third of the
     screen. Keep them on one line and let the strip scroll sideways instead. */
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* full-bleed so the strip scrolls edge to edge */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    /* room for the focus ring, which would otherwise be clipped by overflow */
    padding-block: 4px;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chip { scroll-snap-align: start; flex: 0 0 auto; }

  .filters__inner { padding-block: 0.625rem; }
  .filters__count { margin-left: 0; width: 100%; }

  .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  /* Controls move below the image so the photo keeps the full width.
     Stay in row direction and wrap, so prev/next end up beside each other
     on the second line rather than stacked one above the other. */
  .lb__panel {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    padding-top: 3.5rem;
  }
  .lb__figure { order: -1; flex: 0 0 100%; }
  .lb__figure img { max-height: 62vh; }
  .lb__prev { order: 1; }
  .lb__next { order: 2; }
}

@media (max-width: 640px) {
  .filters { top: calc(4rem + 1px); }
  .gal-cta { flex-direction: column; align-items: stretch; }
  .gal-cta__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tile__btn:hover { transform: none; }
}

/* ==========================================================================
   20. Interior pages — metal engraving, custom work
   ========================================================================== */

/* --- two-column compare (diode vs fiber) --------------------------------- */
.compare {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.compare__col {
  padding: var(--space-xl);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}
.compare__col--lead {
  border-color: var(--brass-600);
  box-shadow: var(--shadow-md);
}

.compare__tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 0.5rem;
}
.compare__col--lead .compare__tag { color: var(--brass-600); }

.compare__col h3 { font-size: 1.5rem; margin-bottom: 0.75rem; }
.compare__col p { color: var(--ink-2); font-size: 0.9375rem; }

.compare__list {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  gap: 0.625rem;
}
.compare__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
.compare__list svg { width: 1.0625rem; height: 1.0625rem; flex-shrink: 0; margin-top: 0.15rem; }
.compare__list .yes { color: var(--brass-600); }
.compare__list .no  { color: var(--ink-3); }

/* --- spec / detail rows -------------------------------------------------- */
.specs {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.specs > div {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--line);
}
.specs dt {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.specs dd { margin: 0; color: var(--ink-2); font-size: 0.9375rem; }
.specs dd code {
  font-size: 0.875rem;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.1rem 0.4rem;
}

/* --- strip of gallery thumbnails ----------------------------------------- */
.strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
}
.strip a {
  display: block;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--dark-line);
  background: var(--dark-2);
  transition: border-color var(--t), transform var(--t);
}
.strip a:hover { border-color: var(--brass-400); transform: translateY(-2px); }
.strip img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }

/* --- callout ------------------------------------------------------------- */
.callout {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--brass-tint);
  border: 1px solid rgba(161, 98, 7, 0.3);
  border-left: 4px solid var(--brass-600);
  border-radius: var(--r);
  margin-top: var(--space-xl);
}
.callout svg { width: 1.375rem; height: 1.375rem; color: var(--brass-600); flex-shrink: 0; }
.callout p { font-size: 0.9375rem; color: #5C3804; }
.callout strong { color: #4A2D03; }

/* --- split (copy + media) ------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.split__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.section--dark .split__media { border-color: var(--dark-line); }
.split__media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .compare { grid-template-columns: 1fr; }
  .specs > div { grid-template-columns: 1fr; gap: 0.375rem; }
  .strip { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; }
}

/* ==========================================================================
   21. In the wild page — one job per section, shop shot beside placed shot
   ========================================================================== */

.case {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
/* Alternate which side the copy sits on so four stacked sections don't read
   as one long column. The DOM stays copy-then-photos, so a screen reader and a
   narrow viewport both get the story first; only the painted order changes.
   The track sizes have to be mirrored as well as the order — moving the copy
   to slot 2 without this leaves the photos in the 21rem column. */
.case--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
/* The lead story runs its photos three-up, which needs more room than the
   two-up sections; the copy column gives some back so the gutter survives. */
.case--trio { grid-template-columns: minmax(0, 21rem) minmax(0, 46rem); }
.case--trio .case__shots { max-width: 46rem; }
.case--flip .case__copy { order: 2; }
/* min-width: without this the photo column refuses to shrink below its images'
   width and pushes the grid wider than the wrap. max-width: and without this
   the photos run the full width of the track, which puts them wildly out of
   scale with the ~200px tiles the gallery page uses. The cap is sized so the
   copy, the gap and the photos together just fill the 72rem content box at the
   wrap's max width — any smaller and the slack piles up in the gutter. */
.case__shots { min-width: 0; width: 100%; max-width: 41rem; }
/* Push the capped column to the outer margin so the slack lands in the gutter
   between copy and photos, not as a gap at the edge of the page. The width:100%
   above is what makes this safe: an auto margin alone sizes a grid item to
   fit-content, which collapses a single-column group to half its track. */
.case:not(.case--flip) .case__shots { margin-left: auto; }

.case__copy h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.375rem);
  margin-bottom: var(--space-md);
}
.case__copy p { color: var(--ink-2); }
.case__copy p + p { margin-top: var(--space-md); }
.section--dark .case__copy p { color: var(--on-dark-2); }

/* --- the short fact list under each story -------------------------------- */
.case-facts {
  margin: var(--space-xl) 0 0;
  border-top: 1px solid var(--line);
}
.case-facts > div {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--space-md);
  padding: 0.6875rem 0;
  border-bottom: 1px solid var(--line);
}
.case-facts dt {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 0.15rem;
}
.case-facts dd { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }
.section--dark .case-facts,
.section--dark .case-facts > div { border-color: var(--dark-line); }
.section--dark .case-facts dt { color: var(--brass-400); }
.section--dark .case-facts dd { color: var(--on-dark-2); }

/* --- photo groups: "in the shop" / "where it lives now" ------------------- */
.shot-group + .shot-group { margin-top: var(--space-xl); }

.shot-group__label {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: var(--space-md);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.shot-group__label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.section--dark .shot-group__label { color: var(--brass-400); }
.section--dark .shot-group__label::after { background: var(--dark-line); }

.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.shots--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The two letterbox pairs — the bench and the cabin board — read as one
   before-and-after when they sit one above the other; side by side the 16:9
   crops squeeze down to a strip. */
.shots--stack { grid-template-columns: minmax(0, 1fr); }


/* Where a square photo has to sit in a 4:3 tile, the default centre crop can
   slice the subject. These shift the visible window instead of re-cutting the
   file, so the lightbox still opens the full frame. */
.shot--anchor-low  .shot__btn img { object-position: center 66%; }
.shot--anchor-high .shot__btn img { object-position: center 22%; }

.shot { margin: 0; }

.shot__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.shot__btn:hover {
  border-color: var(--brass-600);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.section--dark .shot__btn { background: var(--dark-2); border-color: var(--dark-line); }
.section--dark .shot__btn:hover { border-color: var(--brass-400); }

.shot__btn img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.shot--tall   .shot__btn img { aspect-ratio: 3 / 4; }
.shot--wide   .shot__btn img { aspect-ratio: 16 / 9; }

/* A magnifier badge, so it reads as openable without relying on hover —
   which touch devices never get. */
.shot__zoom {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(12, 10, 9, 0.55);
  color: #fff;
  backdrop-filter: blur(4px);
  transition: background var(--t);
}
.shot__zoom svg { width: 1rem; height: 1rem; }
.shot__btn:hover .shot__zoom { background: var(--brass-600); }

/* Captions stay visible here rather than appearing on hover: each one is the
   point of the photo, not a label for it. */
.shot figcaption {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}
.section--dark .shot figcaption { color: var(--on-dark-2); }

/* --- closing note -------------------------------------------------------- */
.wild-note {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  color: var(--ink-2);
}
.wild-note h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--space-md); }
.wild-note .lede { margin-inline: auto; }
/* The eyebrow's trailing rule reads as lopsided once the block is centred. */
.wild-note .eyebrow { justify-content: center; }
.wild-note .eyebrow::after { display: none; }
.wild-note .gal-cta__actions { justify-content: center; margin-top: var(--space-xl); }

@media (max-width: 1000px) {
  .case,
  .case--flip,
  .case--trio { grid-template-columns: 1fr; }
  /* Flipping only makes sense side by side; in one column the copy leads. */
  .case--flip .case__copy { order: 0; }
  /* The caps exist to stop the photos outgrowing the copy beside them. Stacked
     there is nothing beside them, so the cap just strands the block against one
     edge with the leftover column empty next to it. */
  .case__shots,
  .case--trio .case__shots { max-width: none; }
  .case:not(.case--flip) .case__shots { margin-left: 0; }
}

@media (max-width: 560px) {
  .shots,
  .shots--three { grid-template-columns: 1fr; }
  .case-facts > div { grid-template-columns: 1fr; gap: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .shot__btn:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   21. Reviews — customer words paired with the piece they're about
   -------------------------------------------------------------------------- */
.reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
.reviews__head .section-head { margin-bottom: 0; }

/* Rating block: the aggregate lives here, next to a link out to the source so
   a visitor can verify the quotes below are real. */
.reviews__score {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--dark-line);
  border-radius: var(--r);
  background: var(--dark-2);
  flex-shrink: 0;
}
.reviews__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--on-dark);
}
.reviews__meta { display: flex; flex-direction: column; gap: 0.3rem; }
.reviews__meta a {
  font-size: 0.875rem;
  color: var(--on-dark-2);
  text-decoration-color: var(--dark-line);
  text-underline-offset: 3px;
}
.reviews__meta a:hover { color: var(--brass-400); text-decoration-color: currentColor; }

.stars { display: flex; gap: 2px; color: var(--brass-400); }
.stars svg { width: 15px; height: 15px; fill: currentColor; }

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.rev {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--dark-2);
  border: 1px solid var(--dark-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.rev__media {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--dark);
}

.rev__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  flex: 1;
}

.rev__quote p { margin: 0; }

.rev__quote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--on-dark);
  flex: 1;
}

/* Attribution sits under a hairline so the customer's name reads as a source,
   not as more of the quote. */
.rev__who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding-top: var(--space-md);
  border-top: 1px solid var(--dark-line);
  font-style: normal;
  font-size: 0.875rem;
  color: var(--on-dark-2);
}
.rev__name {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--on-dark);
}
.rev__piece { margin-left: auto; color: var(--brass-400); }

/* Show-more. The grid ships expanded; main.js collapses it on load, so a
   no-JS visitor still gets all fifteen reviews. `.rev` sets display:flex,
   which outranks the UA rule for [hidden] — hence the explicit reset. */
.rev[hidden] { display: none; }
.js .reviews__grid.is-collapsed .rev--extra { display: none; }

.reviews__more-wrap { display: none; justify-content: center; margin-top: var(--space-xl); }
.js .reviews__more-wrap { display: flex; }

.reviews__more svg {
  width: 18px;
  height: 18px;
  transition: transform var(--t);
}
.reviews__more[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .reviews__more svg { transition: none; }
}

@media (max-width: 1100px) {
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .reviews__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .reviews__head { flex-direction: column; align-items: flex-start; }
  .rev__piece { margin-left: 0; }
}