:root {
  --ink-950: #15110e;
  --ink-900: #1c1712;
  --ink-700: #3a322a;
  --paper: #f8f7f4;   /* lightened per Joel 8/13 — concept ground is near-white */
  --paper-2: #f0eeea;
  --card: #ffffff;
  --stone-300: #d7cab6;
  --stone-500: #a9957d;
  --brass: #b08344;
  --brass-deep: #7c5c2e;
  --blue: #0b5cab;
  /* Carolina Blue for the wordmark, at Joel's request 2026-09-04. The UNC
     value; 6.25:1 on the header's ink ground, so it clears AA. */
  --carolina: #4B9CD3;
  --blue-ink: #143047;
  --muted: #6b6156;
  --line: #e2d9cb;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 18px 50px rgba(28, 23, 18, .10);
  --font-display: "Playfair Display", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: Georgia, "Iowan Old Style", serif;
  --font-ui: "Segoe UI", "Avenir Next", Arial, sans-serif;
  --wrap: 1180px;
  --gutter: 24px;
}

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

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

html,
body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
}

body {
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  min-height: 100vh;
}

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

img {
  display: block;
}

a {
  color: var(--blue);
}

a:hover {
  color: var(--blue-ink);
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

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

h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 .4em;
  font-family: var(--font-display);
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

address {
  font-style: normal;
}

.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;
  left: 12px;
  top: -48px;
  z-index: 80;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
  color: #fff;
}

.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}

.section {
  padding: 84px 0;
}

.section--tight {
  padding: 56px 0;
}

.section-head {
  max-width: 36rem;
  margin-bottom: 32px;
}

.section-head--wide {
  max-width: none;
}

.section-head__title {
  font-size: clamp(32px, 4vw, 48px);
  color: inherit;
  margin: 0;
}

.section-head__lead {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.5;
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin: 0 0 10px;
}

.hero .eyebrow,
.band-ink .eyebrow,
.wish-band .eyebrow,
.serving .eyebrow,
.hero--quote .eyebrow {
  color: var(--brass);
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 14px;
}

.lead {
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--ink-700);
}

.band-paper {
  background: var(--paper-2);
}

.band-ink {
  background: var(--ink-900);
  color: var(--paper);
}

.band-ink .section-head__lead,
.band-ink .muted,
.serving .muted {
  color: var(--stone-300);
}

.band-blue {
  background: var(--blue-ink);
  color: var(--paper);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brass);
  color: var(--ink-950);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
  border: 1px solid var(--brass);
  border-radius: 4px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  line-height: 1.2;
}

.btn:hover {
  background: var(--brass-deep);
  border-color: var(--brass-deep);
  color: var(--card);
}

.btn.ghost {
  background: transparent;
  color: var(--card);
  border-color: rgba(255, 255, 255, .6);
}

.btn.ghost:hover {
  background: rgba(255, 255, 255, .08);
  border-color: var(--card);
  color: var(--card);
}

.page-404 .btn.ghost,
.form-shell .btn.ghost,
.card .btn.ghost,
.section .btn.ghost {
  color: var(--ink-900);
  border-color: rgba(58, 50, 42, .45);
}

.page-404 .btn.ghost:hover,
.form-shell .btn.ghost:hover,
.card .btn.ghost:hover,
.section .btn.ghost:hover {
  background: rgba(28, 23, 18, .05);
  color: var(--ink-950);
  border-color: var(--ink-900);
}

.hero .btn.ghost,
.band-ink .btn.ghost,
.wish-band .btn.ghost,
.serving .btn.ghost,
.hero--quote .btn.ghost {
  color: var(--card);
  border-color: rgba(255, 255, 255, .6);
}

.hero .btn.ghost:hover,
.band-ink .btn.ghost:hover,
.wish-band .btn.ghost:hover,
.serving .btn.ghost:hover,
.hero--quote .btn.ghost:hover {
  background: rgba(255, 255, 255, .08);
  color: var(--card);
  border-color: var(--card);
}

.btn:disabled,
.quote-form button:disabled {
  background: var(--stone-500);
  border-color: var(--stone-500);
  color: var(--paper);
  cursor: not-allowed;
}

.text-link {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
  color: var(--blue-ink);
}

.chip {
  display: inline-block;
  background: var(--stone-300);
  color: var(--ink-900);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  line-height: 1.2;
}

.disclaimer {
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  line-height: 1.45;
}

.empty-note {
  color: var(--muted);
  font-size: 16px;
  padding: 20px 0;
}

.count {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink-950);
  color: var(--paper);
}

.header-top {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.header-top__inner {
  display: flex;
  justify-content: flex-end;
  padding: 7px 0 6px;
}

.header-phone,
.nav-phone {
  color: var(--stone-300);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
}

.header-phone:hover,
.nav-phone:hover {
  color: var(--card);
}

.header-main__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 64px;
  position: relative;
}

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--carolina);
  text-decoration: none;
  line-height: 1.1;
  flex: 0 1 auto;
  white-space: nowrap;
}

.wordmark:hover {
  color: var(--carolina);
}

.wordmark--footer {
  color: var(--paper);
  display: inline-block;
  margin-bottom: 10px;
}

.nav-toggle-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.nav-toggle-input:focus-visible + .nav-toggle {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--paper);
  position: relative;
  transition: transform .15s ease, opacity .15s ease;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before {
  top: -6px;
}

.nav-toggle__bars::after {
  top: 6px;
}

.nav-toggle-input:checked + .nav-toggle .nav-toggle__bars {
  background: transparent;
}

.nav-toggle-input:checked + .nav-toggle .nav-toggle__bars::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle-input:checked + .nav-toggle .nav-toggle__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 18px;
  margin-left: auto;
  flex-wrap: wrap;
}

.site-nav__link {
  color: var(--stone-300);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  padding: 8px 0;
}

.site-nav__link:hover {
  color: var(--paper);
}

.site-nav__link.is-active {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.nav-phone {
  display: none;
}

.header-quote {
  margin-left: 8px;
}

/* Footer */
.site-footer {
  background: var(--ink-950);
  color: var(--stone-300);
  padding: 56px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr .8fr 1fr;
  gap: 36px;
}

.footer-summary {
  color: var(--stone-300);
  font-size: 15px;
  line-height: 1.5;
  max-width: 34em;
}

.footer-nap {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--paper);
}

.footer-nap a {
  color: var(--brass);
  text-decoration: none;
  font-weight: 700;
}

.footer-nap a:hover {
  color: var(--card);
}

.footer-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 12px;
}

.footer-links {
  display: grid;
  gap: 8px;
}

.footer-links a {
  color: var(--stone-300);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 14px;
}

.footer-links a:hover {
  color: var(--paper);
}

.footer-points {
  list-style: none;
  display: grid;
  gap: 7px;
  font-size: 14px;
}

.footer-legal {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--stone-500);
}

/* Hero */
.hero {
  position: relative;
  background: var(--ink-950);
  color: var(--paper);
}

.hero--editorial {
  min-height: 560px;
  display: flex;
  align-items: center;
  padding: 80px 0 72px;
}

.hero--compact {
  min-height: 0;
  padding: 56px 0 48px;
}

/* One scrim, not two. This rule used to carry the dark gradient in its own
   background-image AND .hero--photo::after painted the identical gradient on
   top of it. On the home page that was invisible: .hero__slide is an opaque
   layer over the section background, so only the ::after was ever seen. A page
   with no slides -- which was all 55 town pages -- wore both, and .94 over .94
   is 99.6% opaque ink. The left third of every city hero was effectively black.
   The photograph belongs here; the scrim belongs in ::after, where it can sit
   above the slides. */
.hero--photo {
  background-color: var(--ink-950);
  background-image: var(--hero-photo);
  background-size: cover;
  background-position: center right;
}

.hero__inner {
  max-width: min(640px, 100%);
  margin-left: max(calc((100% - var(--wrap)) / 2), var(--gutter));
  margin-right: auto;
  width: auto;
}

.hero__title {
  font-size: clamp(40px, 6.4vw, 76px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 16px;
  color: var(--paper);
}

.hero__lead {
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--stone-300);
  max-width: 36em;
  margin: 0 0 24px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero--quote {
  background: linear-gradient(135deg, var(--blue-ink) 0%, #0b5cab 100%);
  padding: 56px 0 0;
}

.quote-hero {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 280px);
  gap: 28px;
  align-items: end;
}

.quote-hero__art,
.genie-art {
  width: 100%;
  height: auto;
  max-height: 380px;
  object-fit: contain;
  object-position: bottom center;
}

/* Wish + genie bands */
.wish-band {
  background: var(--ink-900);
  color: var(--paper);
  padding: 36px 0;
}

.wish-band__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  text-align: center;
}

.wish-band__line {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -0.02em;
  margin: 0;
  font-style: italic;
}

.lamp-glyph {
  display: block;
  flex: 0 0 auto;
}

.genie-band {
  background: var(--blue-ink);
  color: var(--paper);
  max-height: 120px;
  overflow: hidden;
}

.genie-band__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 96px;
  max-height: 120px;
  padding: 8px 0;
}

.genie-band__art {
  height: 104px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
}

.genie-band__line {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 26px);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}

/* Cards + grids */
.card,
.inv-card,
.brand-card,
.cta-card,
.form-shell,
.map-card,
.embed-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.inv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.inv-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

a.inv-card:hover {
  color: inherit;
}

.inv-card__swatch,
.swatch {
  min-height: 168px;
  background: linear-gradient(145deg, #d7cab6 0%, #a9957d 42%, #3a322a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 56px;
  color: rgba(247, 243, 236, .55);
  letter-spacing: -0.03em;
}

.swatch {
  min-height: 360px;
  border-radius: var(--radius-lg);
  font-size: 72px;
}

.swatch--b,
.inv-card:nth-child(2n) .inv-card__swatch {
  background: linear-gradient(145deg, #3a322a 0%, #1c1712 55%, #a9957d 100%);
}

.swatch--c,
.inv-card:nth-child(3n) .inv-card__swatch {
  background: linear-gradient(160deg, #efe7db 0%, #d7cab6 40%, #7c5c2e 100%);
}

.inv-card__body,
.brand-card__body {
  padding: 18px 18px 20px;
  display: grid;
  gap: 8px;
}

.inv-card__name,
.brand-card__mark {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink-900);
}

.inv-card__meta,
.inv-card__size {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--muted);
}

.bundle-row {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.brand-card {
  padding: 24px;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.brand-card__mark {
  font-size: 28px;
}

.brand-card__type {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

.brand-card__blurb {
  color: var(--ink-700);
  font-size: 16px;
  margin: 0;
}

.brand-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}

.brand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 18px 40px;
}

.brand-row a {
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 26px);
  color: var(--ink-900);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.brand-row a:hover {
  color: var(--brass-deep);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.photo-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink-900);
}

.photo-tile img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.photo-tile figcaption,
.photo-tile .photo-tile__cap {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--muted);
  padding: 8px 2px 0;
}

.photo-tile figure {
  margin: 0;
}

/* Process rail */
.process-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.process-rail--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.process-step {
  position: relative;
  min-width: 0;
}

.process-step__n {
  width: 36px;
  height: 36px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
  color: var(--brass-deep);
  margin-bottom: 12px;
  background: var(--card);
}

.band-paper .process-step__n {
  background: var(--paper-2);
}

.process-step__title {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.process-step__copy {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

/* FAQ */
.faq-grid {
  display: grid;
  gap: 10px;
}

.faq-grid details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.faq-grid summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
}

.faq-grid summary::-webkit-details-marker {
  display: none;
}

.faq-grid summary::after {
  content: "+";
  color: var(--brass);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  flex: 0 0 auto;
}

.faq-grid details[open] summary::after {
  content: "\2013";
}

.faq-grid details p {
  margin: 10px 0 0;
  color: var(--ink-700);
  font-size: 15px;
}

/* Serving / regions */
.serving {
  background: var(--ink-900);
  color: var(--paper);
  padding: 72px 0;
}

.serving-places {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 20px;
}

.serving-place {
  text-align: center;
  padding: 8px 6px;
}

.serving-place__city {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.02em;
  margin: 0;
}

.serving-place__state {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone-300);
}

.region-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--stone-300);
}

/* Map + towns */
.map-card {
  padding: 12px;
  overflow: hidden;
}

.map-card svg {
  display: block;
  width: 100%;
  height: auto;
}

.town-dir {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.town-dir h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.town-dir a {
  display: block;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink-700);
  text-decoration: none;
  padding: 4px 0;
}

.town-dir a:hover {
  color: var(--blue);
}

/* Quote form */
.form-shell {
  padding: 28px;
}

.quote-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.quote-form .full,
.quote-form .consent,
.quote-form button {
  grid-column: 1 / -1;
}

.quote-form label {
  display: grid;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-900);
}

.quote-form input,
.quote-form textarea,
.quote-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  font-family: var(--font-body);
  font-size: 16px;
  background: var(--card);
  color: var(--ink-900);
}

.quote-form textarea {
  resize: vertical;
  min-height: 120px;
}

.quote-form input:focus,
.quote-form textarea:focus,
.quote-form select:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}

.quote-form .consent {
  align-items: center;
  display: flex;
  font-weight: 500;
  gap: 8px;
}

.quote-form .consent input {
  width: auto;
}

.status {
  background: var(--paper-2);
  border-left: 4px solid var(--blue);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--ink-700);
  font-size: 14px;
}

.quote-promise {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--blue-ink);
  margin-top: 16px;
}

.quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 20px;
}

.quick-links a {
  font-family: var(--font-ui);
  font-weight: 800;
  color: var(--blue);
  text-decoration: none;
}

.quick-links a:hover {
  text-decoration: underline;
}

/* Item detail */
.crumb {
  font-family: var(--font-ui);
  font-size: 13px;
  margin-bottom: 18px;
}

.crumb a {
  color: var(--blue);
  text-decoration: none;
}

.crumb a:hover {
  text-decoration: underline;
}

.detail-split,
.about-split {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 32px;
  align-items: start;
}

.about-split {
  align-items: center;
}

.spec-dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 16px;
  margin: 18px 0;
}

.spec-dl dt {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.spec-dl dd {
  margin: 0;
}

.cta-card {
  padding: 24px;
  display: grid;
  gap: 12px;
}

.cta-card h2,
.cta-card h3 {
  margin: 0;
  font-size: 26px;
}

.about-photo {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.points {
  list-style: none;
  display: grid;
  gap: 8px;
}

.points li {
  padding: 6px 0 6px 18px;
  position: relative;
}

.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .75em;
  width: 7px;
  height: 7px;
  background: var(--brass);
  border-radius: 50%;
}

.visit-block {
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.embed-card {
  overflow: hidden;
}

.embed-card iframe {
  display: block;
  width: 100%;
  border: 0;
}

.materials-mini {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* A single card must not sit in a three-column track.

   On the town pages the Materials section renders the logo strip and then one
   Current Inventory card. In repeat(3, 1fr) that card takes column one: flush
   left under the Cambria mark, 398px left of centre, and -- because neither the
   strip nor the grid carries any margin -- starting at exactly the pixel the
   logo row ends, so it ran into the QUARTZ labels.

   Two classes, not one. .materials-mini is given grid-template-columns again at
   three later points in this file (the 980px and 760px steps), all of them
   (0,1,0); a single .materials-mini--solo would tie on specificity and lose on
   source order at exactly the widths it is needed. (0,2,0) settles it wherever
   this rule happens to sit. */
.materials-mini.materials-mini--solo {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
  margin-top: 30px;
}

.nearby {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.nearby a {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
}

.cta-band {
  background: var(--paper-2);
  padding: 48px 0;
  text-align: center;
}

/* 404 */
.page-404 {
  text-align: center;
  padding: 64px 20px 80px;
}

.page-404 .genie-art {
  max-height: 360px;
  max-width: 280px;
  margin: 0 auto 24px;
  object-fit: contain;
}

.page-404 h1 {
  font-size: clamp(28px, 5vw, 44px);
  max-width: 16em;
  margin: 0 auto 20px;
}

.page-404 .hero__ctas {
  justify-content: center;
}

/* Header 820 / grids 760 / 375 sanity */
@media (min-width: 900px) {
  .faq-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

@media (max-width: 980px) {
  .inv-grid,
  .brand-grid,
  .photo-grid,
  .materials-mini {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .serving-places {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .header-top {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--gutter));
    right: calc(-1 * var(--gutter));
    background: var(--ink-950);
    flex-direction: column;
    align-items: stretch;
    padding: 8px var(--gutter) 20px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: var(--shadow);
  }

  .nav-toggle-input:checked ~ .site-nav {
    display: flex;
  }

  .site-nav__link,
  .nav-phone {
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
  }

  .nav-phone {
    display: block;
  }

  .header-quote {
    margin: 14px 0 0;
    width: 100%;
  }

  .hero--editorial {
    min-height: 0;
    padding: 48px 0 44px;
  }

  .hero__inner {
    margin-left: var(--gutter);
    max-width: calc(100% - (var(--gutter) * 2));
  }

  .quote-hero {
    grid-template-columns: 1fr;
  }

  .quote-hero__art {
    max-height: 240px;
    justify-self: center;
  }

  .detail-split,
  .about-split {
    grid-template-columns: 1fr;
  }

  .swatch {
    min-height: 240px;
  }
}

@media (max-width: 760px) {
  .section {
    padding: 56px 0;
  }

  .inv-grid,
  .brand-grid,
  .photo-grid,
  .process-rail,
  .process-rail--4,
  .town-dir,
  .materials-mini,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .quote-form {
    grid-template-columns: 1fr;
  }

  .spec-dl {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }

  .spec-dl dt {
    margin-top: 8px;
  }

  .genie-band {
    max-height: none;
  }

  .genie-band__inner {
    max-height: none;
    min-height: 0;
    padding: 12px 0;
  }

  .genie-band__art {
    height: 88px;
  }

  .wish-band__inner {
    gap: 14px;
  }
}

@media (max-width: 375px) {
  :root {
    --gutter: 16px;
  }

  body {
    font-size: 16px;
  }

  .hero__title {
    font-size: 34px;
  }

  .section-head__title {
    font-size: 28px;
  }

  .hero--editorial,
  .hero--compact {
    padding: 36px 0 32px;
  }

  .section {
    padding: 44px 0;
  }

  .btn {
    padding: 11px 16px;
  }

  .form-shell,
  .brand-card,
  .cta-card {
    padding: 18px;
  }

  .inv-card__swatch {
    min-height: 140px;
    font-size: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* === page templates (job 2) === */

.section-foot {
  margin-top: 28px;
}

.section-foot .text-link {
  font-size: 15px;
}

a.serving-place {
  color: inherit;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--radius);
}

a.serving-place:hover {
  color: inherit;
  border-color: var(--brass);
}

.serving-regions {
  margin: 0 0 28px;
}

.serving-cta {
  margin-top: 32px;
  text-align: center;
}

.map-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.about-genie {
  display: grid;
  grid-template-columns: minmax(140px, 220px) 1fr;
  gap: 32px;
  align-items: center;
}

.about-genie .genie-art {
  max-height: 320px;
  justify-self: center;
}

.about-genie__tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(22px, 3vw, 32px);
  margin: 12px 0 0;
}

.service-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
}

.service-list li {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.mini-card {
  display: grid;
  gap: 6px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

a.mini-card:hover {
  color: inherit;
  border-color: var(--brass);
}

.mini-card strong {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-900);
}

.mini-card span {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--muted);
}

.photo-figure {
  margin: 0;
}

.photo-figure figcaption {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--muted);
  padding: 8px 2px 0;
}

.quote-wrap {
  padding-top: 48px;
}

.local-note {
  max-width: 42em;
}

.item-page {
  padding-top: 36px;
}

.cta-band h2 {
  margin-bottom: 10px;
}

.cta-band p {
  color: var(--muted);
  margin: 0 auto 20px;
  max-width: 36em;
}

.visit-block address {
  display: grid;
  gap: 4px;
  margin: 12px 0;
}

.visit-block a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: none;
}

.visit-block a:hover {
  text-decoration: underline;
}

.band-paper .section-head__lead {
  color: var(--ink-700);
}

@media (max-width: 760px) {
  .about-genie,
  .service-list {
    grid-template-columns: 1fr;
  }
}

/* === iteration 2 (photos, lockups, map, brand content) — 2026-08-13 === */
.inv-card__photo { border-radius: calc(var(--radius) - 2px); display: block; height: 190px; object-fit: cover; width: 100%; }
.detail-photo { border-radius: var(--radius-lg); display: block; height: 100%; min-height: 380px; object-fit: cover; width: 100%; }

.brand-row { align-items: stretch; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.brand-lockup { align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: 6px; justify-items: center; min-height: 96px; padding: 16px 12px; text-align: center; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.brand-lockup:hover { border-color: var(--brass); box-shadow: var(--shadow); }
.brand-lockup__img { max-height: 44px; max-width: 150px; object-fit: contain; }
.brand-lockup__mark { color: var(--ink-900); font-family: var(--font-display); font-size: 20px; letter-spacing: .02em; line-height: 1.15; }
.brand-lockup__mark[data-brand="cambria-quartz"] { font-variant: small-caps; letter-spacing: .12em; }
.brand-lockup__mark[data-brand="cosentino-silestone"] { font-family: var(--font-ui); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: 16px; }
.brand-lockup__mark[data-brand="msi-q-quartz"] { font-family: var(--font-ui); font-weight: 700; font-size: 17px; }
.brand-lockup__mark[data-brand="lx-hausys-viatera"] { letter-spacing: .06em; }
.brand-lockup__type { color: var(--muted); font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.serving--photo { background: linear-gradient(rgba(21,17,14,.72), rgba(21,17,14,.82)), var(--serving-photo) center 35% / cover no-repeat; }
.serving--photo .section-head__lead, .serving--photo .serving-regions span { color: #d9d2c7; }

.section--embed .wrap--wide { max-width: 1320px; }
.embed-frame { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; padding: 8px; }
.embed-frame iframe { border: 0; display: block; height: 1500px; width: 100%; }
@media (max-width: 760px) { .embed-frame iframe { height: 1050px; } }

.brand-story { display: grid; gap: 32px; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.brand-figure { margin: 0; }
.brand-figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow); display: block; height: 100%; max-height: 440px; object-fit: cover; width: 100%; }
.brand-figure figcaption { color: var(--muted); font-family: var(--font-ui); font-size: 12.5px; margin-top: 8px; }
.points--care li { max-width: 62ch; }
@media (max-width: 900px) { .brand-story { grid-template-columns: 1fr; } }

.map-card svg { display: block; height: auto; width: 100%; }

/* === iteration 3 (concept alignment) — 2026-08-13 === */
.side-split { display: grid; gap: 36px; grid-template-columns: minmax(200px, 24%) minmax(0, 1fr); }
.side-split--center { align-items: center; }
.side-split__head .section-head { margin-bottom: 10px; }
.side-split__head .section-head__title { font-size: clamp(26px, 3vw, 34px); }
.side-split__body > * + * { margin-top: 18px; }
@media (max-width: 900px) { .side-split { grid-template-columns: 1fr; gap: 18px; } }

.yard-row { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yard-tile { margin: 0; position: relative; }
.yard-tile img { border-radius: var(--radius); box-shadow: var(--shadow); display: block; height: 200px; object-fit: cover; width: 100%; }
.chip--onphoto { background: rgba(21,17,14,.82); border: 0; bottom: 10px; color: #f2ede4; left: 10px; position: absolute; }
@media (max-width: 760px) { .yard-row { grid-template-columns: 1fr; } .yard-tile img { height: 180px; } }

.brand-strip { align-items: stretch; display: flex; flex-wrap: wrap; }
.brand-strip .brand-lockup { background: none; border: 0; border-radius: 0; box-shadow: none; flex: 1 1 0; min-height: 0; min-width: 130px; padding: 6px 18px; }
.brand-strip .brand-lockup + .brand-lockup { border-left: 1px solid var(--line); }
.brand-strip .brand-lockup:hover { border-color: var(--line); }
.brand-strip .brand-lockup__img { max-height: 52px; max-width: 170px; }
@media (max-width: 760px) { .brand-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .brand-strip .brand-lockup + .brand-lockup { border-left: 0; } }

.process-rail--icons { position: relative; }
.process-rail--icons .process-step--icon { background: none; border: 0; box-shadow: none; padding: 14px 18px; position: relative; text-align: center; }
.process-step--icon .process-step__n { background: none; border: 1.6px solid var(--ink-700); border-radius: 4px; color: var(--ink-700); font-family: var(--font-ui); font-size: 12px; font-weight: 700; height: 22px; left: 6px; line-height: 19px; position: absolute; top: 6px; width: 22px; }
.process-step--icon .process-icon { display: block; margin: 6px auto 10px; }
.process-step--icon .process-step__title { font-family: var(--font-ui); font-size: 15px; font-weight: 700; margin: 0 0 6px; }
.process-rail--icons .process-step--icon:not(:last-child)::after { color: var(--brass); content: "\2192"; font-size: 22px; position: absolute; right: -14px; top: 44%; }
@media (max-width: 900px) { .process-rail--icons .process-step--icon::after { display: none; } }

.wish-band__inner { align-items: center; display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; text-align: center; }
.wish-band__copy { display: grid; gap: 6px; }
.wish-band__title { color: var(--card); font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -.01em; margin: 0; }
.wish-band__line { align-items: center; display: flex; gap: 10px; justify-content: center; margin: 0; }
.wish-band__line em { font-family: var(--font-display); font-style: italic; }

.photo-grid--row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.photo-grid--row .photo-tile img, .photo-grid--row .photo-tile { height: 150px; }
@media (max-width: 1000px) { .photo-grid--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .photo-grid--row .photo-tile img, .photo-grid--row .photo-tile { height: 170px; } }
.yard-tile figcaption { color: var(--ink-700); font-family: var(--font-ui); font-size: 13px; font-weight: 700; margin-top: 8px; }
.chip--onphoto { bottom: auto; top: 10px; }
.brand-strip .brand-lockup__img { max-height: 56px; }

/* === iteration 4 (quality pass) — 2026-08-13 === */

/* Hero: keep the island in frame as the viewport widens */
.hero--photo {
  background-position: 78% 42%;
}
@media (min-width: 1600px) {
  .hero--photo {
    background-position: 68% 40%;
    min-height: 620px;
  }
}

/* How tall a photo band has to be before it is showing a photograph.

   A town hero was 386px at 1440 while the home hero was 560px. background-size
   cover fills the width first, so a 1.5:1 photograph renders 1440x960 and a
   386px band reveals 40% of it -- the rest is cropped off the top and bottom.
   That is what "not showing the whole photo" meant, and it is a height problem,
   not a background-size one. contain would show all of it, but a text-over-photo
   band would then have bars of --ink-950 above and below and read as broken.

   Ascending min-widths only, so the cascade cannot fight itself: each step wins
   above its own breakpoint and the phone value is the base. .hero--compact
   .hero--photo is (0,2,0) and beats both .hero--compact{min-height:0} and the
   .hero--photo{min-height:620px} above, which is why 620 is restated at 1600 --
   without it this ladder would SHORTEN the band on wide monitors, showing less
   of the photograph than before rather than more.

   Visible slice of a 1.5:1 photo, before -> after: 1440 40% -> 52%, 1920 48%
   -> 48% (unchanged, and the doubled scrim is gone so far more of it reads). */
.hero--compact.hero--photo { min-height: 320px; }
@media (min-width: 600px)  { .hero--compact.hero--photo { min-height: 400px; } }
@media (min-width: 900px)  { .hero--compact.hero--photo { min-height: 460px; } }
@media (min-width: 1200px) { .hero--compact.hero--photo { min-height: 500px; } }
@media (min-width: 1600px) { .hero--compact.hero--photo { min-height: 620px; } }
@media (max-width: 820px) {
  .hero--photo {
    background-position: 70% 38%;
  }
}

/* Brand strip — five marks of very different aspect ratios */
.brand-strip {
  align-items: center;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.brand-strip .brand-lockup {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  gap: 8px;
  justify-items: center;
  min-height: 84px;
  min-width: 0;
  overflow: hidden;
  padding: 10px 14px 8px;
}
.brand-strip .brand-lockup + .brand-lockup {
  border-left: 1px solid var(--line);
}
.brand-strip .brand-lockup:hover {
  border-color: var(--line);
  box-shadow: none;
}
.brand-strip .brand-lockup__img {
  display: block;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  width: auto;
}
.brand-lockup__pair {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
  min-width: 0;
}
.brand-lockup__word {
  color: var(--ink-900);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.1;
  text-transform: uppercase;
}

/* min(), not a flat cap. These per-brand rules are (0,3,0) and override the
   strip's own max-width:100% at (0,2,0), so on a tablet the cell content box
   narrows to 113px while the logo keeps rendering at its aspect-derived width
   and overflow:hidden cuts the rest off. Measured at 768px: Cambria 152px in a
   113px box, 39px of the mark sliced away -- a quarter of it -- and Daltile
   127px in the same box, 14px gone. min() keeps the desktop cap exactly where
   it was and lets the cell win when the cell is smaller; object-fit:contain
   then scales the mark down whole instead of trimming its right-hand end.
   Cambria is the one asset under the embed-only agreement, so a chopped mark is
   the last thing it should be. */
.brand-lockup[data-brand="cambria-quartz"] .brand-lockup__img {
  height: 34px;
  max-width: min(152px, 100%);
}
.brand-lockup[data-brand="lx-hausys-viatera"] .brand-lockup__img {
  height: 20px;
  max-width: 148px;
}
.brand-lockup[data-brand="daltile-one-quartz"] .brand-lockup__img {
  height: 26px;
  max-width: min(128px, 100%);
}
.brand-lockup[data-brand="msi-q-quartz"] .brand-lockup__img {
  height: 44px;
  max-width: 40px;
  object-fit: cover;
  object-position: 50% 22%;
  width: 40px;
}
.brand-lockup[data-brand="cosentino-silestone"] .brand-lockup__img {
  border-radius: 3px;
  flex: 0 0 auto;
  height: 26px;
  object-fit: cover;
  object-position: 5% 50%;
  width: 26px;
}

@media (max-width: 760px) {
  .brand-strip {
    gap: 12px 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .brand-strip .brand-lockup,
  .brand-strip .brand-lockup + .brand-lockup {
    border-left: 0;
    min-height: 76px;
    padding: 10px 8px;
  }
  .brand-strip .brand-lockup:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    max-width: 200px;
    width: 100%;
  }
}

/* Yard tiles: chip top-left, name under, even crops */
.yard-row {
  gap: 18px 16px;
}
.yard-tile img {
  aspect-ratio: 16 / 11;
  height: auto;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}
.yard-tile figcaption {
  margin-top: 8px;
  padding: 0 2px;
}
.chip--onphoto {
  left: 10px;
  top: 10px;
}
@media (max-width: 760px) {
  .yard-tile img {
    aspect-ratio: 16 / 10;
    height: auto;
  }
}

/* Homepage listed items sit under the photos, quieter than the tiles */
.inv-grid--listed {
  border-top: 1px solid var(--line);
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  margin-top: 22px;
  padding-top: 18px;
}
.inv-card--listed {
  box-shadow: none;
}
.inv-card--listed .inv-card__body {
  gap: 4px;
  padding: 14px 16px 16px;
}
.inv-card--listed .inv-card__name {
  font-size: 20px;
}
.inv-card .chip,
.inv-card--listed .chip {
  justify-self: start;
}
.inv-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
@media (min-width: 1100px) {
  .inv-grid:not(.inv-grid--listed) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .inv-grid:not(.inv-grid--listed):has(> :last-child:nth-child(-n + 2)) {
    grid-template-columns: repeat(auto-fill, minmax(260px, 340px));
  }
  .photo-grid:has(> :last-child:nth-child(-n + 2)) {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    max-width: 800px;
  }
}

/* Process rail: arrows only between icon steps, aligned to the icons */
.process-rail--icons {
  align-items: start;
  display: flex;
  gap: 0;
}
.process-rail--icons .process-step--icon {
  flex: 1 1 0;
  min-width: 0;
  padding: 28px 6px 4px;
  text-align: center;
}
.process-rail--icons .process-step--icon::after,
.process-rail--icons .process-step--icon:not(:last-child)::after {
  content: none;
  display: none;
}
.process-step--icon .process-icon {
  display: block;
  height: 64px;
  margin: 4px auto 12px;
  width: 64px;
}
.process-arrow {
  align-self: flex-start;
  color: var(--brass);
  flex: 0 0 20px;
  font-size: 18px;
  line-height: 1;
  margin-top: 48px;
  text-align: center;
}
.process-arrow::before {
  content: "\2192";
}
@media (max-width: 900px) {
  .process-rail--icons {
    display: grid;
    gap: 8px 20px;
    grid-template-columns: 1fr 1fr;
  }
  .process-arrow {
    display: none;
  }
}
@media (max-width: 760px) {
  .process-rail--icons {
    grid-template-columns: 1fr;
  }
}

/* Town process + service/material grids at tablet / mobile */
@media (max-width: 980px) {
  .process-rail--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .about-split {
    grid-template-columns: 1fr;
  }
  .about-photo {
    max-width: 560px;
  }
  .materials-mini {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.service-list li,
.mini-card {
  overflow-wrap: break-word;
}
.mini-card strong {
  overflow-wrap: break-word;
}

@media (max-width: 760px) {
  .process-rail--4,
  .service-list,
  .materials-mini {
    grid-template-columns: 1fr;
  }
  .mini-card {
    padding: 14px 16px;
  }
}

/* Header: fold nav before links wrap on tablet */
@media (max-width: 960px) {
  .header-top {
    display: none;
  }
  .nav-toggle {
    display: flex;
  }
  .site-nav {
    align-items: stretch;
    background: var(--ink-950);
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    left: calc(-1 * var(--gutter));
    padding: 8px var(--gutter) 20px;
    position: absolute;
    right: calc(-1 * var(--gutter));
    top: 100%;
  }
  .nav-toggle-input:checked ~ .site-nav {
    display: flex;
  }
  .site-nav__link,
  .nav-phone {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    padding: 12px 0;
  }
  .nav-phone {
    display: block;
  }
  .header-quote {
    margin: 14px 0 0;
    width: 100%;
  }
}

/* Quote: Genie must not dwarf the form on small screens */
@media (max-width: 820px) {
  .quote-hero {
    justify-items: center;
    text-align: left;
  }
  .quote-hero__art,
  .hero--quote .genie-art {
    justify-self: center;
    max-height: 156px;
    max-width: 168px;
  }
}
@media (max-width: 375px) {
  .quote-hero__art,
  .hero--quote .genie-art {
    max-height: 132px;
    max-width: 144px;
  }
}

.quote-form input:focus-visible,
.quote-form textarea:focus-visible,
.quote-form select:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(11, 92, 171, .16);
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* About Genie + 404 centering at mobile */
@media (max-width: 760px) {
  .about-genie .genie-art {
    justify-self: center;
    max-height: 220px;
    max-width: 190px;
  }
}

.page-404 {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100dvh - 240px);
  padding: 48px 20px 64px;
}
@media (max-width: 760px) {
  .page-404 {
    min-height: calc(100dvh - 200px);
    padding: 36px 16px 48px;
  }
  .page-404 .genie-art {
    max-height: 220px;
    max-width: 196px;
    margin-bottom: 18px;
  }
  .page-404 h1 {
    font-size: clamp(24px, 7vw, 32px);
  }
}

/* Project row: crop, don't letterbox */
.photo-grid--row .photo-tile,
.photo-grid--row .photo-tile img {
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
}
.photo-tile img {
  object-fit: cover;
}

/* Catalog frames stay contained */
.embed-frame {
  max-width: 100%;
}
.embed-frame iframe {
  max-width: 100%;
}

/* Map card: no overflow from labels */
.map-card {
  max-width: 100%;
}

/* Side-split titles a touch closer to the concept scale */
.side-split__head .section-head__title {
  font-size: clamp(28px, 3.2vw, 36px);
}

/* === 100% push (whats-next, pickup, brand ranges) — 2026-08-14 === */
.header-top__inner { align-items: center; gap: 18px; }
.header-utility { color: var(--stone-300); font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-decoration: none; }
.header-utility:hover { color: var(--card); }
.header-utility + .header-phone, .header-utility + .header-utility { margin-left: 0; }

.journey { display: grid; gap: 26px; max-width: 60rem; }
.journey-step { display: grid; gap: 18px; grid-template-columns: 44px minmax(0, 1fr); }
.journey-step .process-step__n { background: none; border: 1.6px solid var(--ink-700); border-radius: 6px; color: var(--ink-700); font-family: var(--font-ui); font-size: 16px; font-weight: 700; height: 38px; line-height: 35px; position: static; text-align: center; width: 38px; }
.journey-step__body h3 { font-size: 24px; margin: 4px 0 8px; }
.journey-step__body > p { color: var(--ink-700); }
.check-box { background: var(--paper-2); border-left: 4px solid var(--brass); border-radius: 8px; margin: 14px 0; padding: 14px 16px; }
.check-box__title { color: var(--brass-deep); font-family: var(--font-ui); font-size: 12px; font-weight: 800; letter-spacing: .1em; margin: 0 0 8px; text-transform: uppercase; }
.consider-list { color: var(--muted); display: grid; gap: 8px; font-size: 16px; list-style: disc; margin: 10px 0 0; padding-left: 20px; }

.info-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.info-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.info-card h3 { font-size: 20px; margin: 0 0 8px; }
.info-card p, .info-card li { color: var(--ink-700); font-size: 16px; }
@media (max-width: 760px) { .journey-step { grid-template-columns: 34px 1fr; } }

/* === signature type + motion (Joel: proceed with 1 and 3) — 2026-08-14 === */
/* Fraunces (SIL Open Font License), self-hosted variable fonts */
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-normal-var.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-italic-var.woff2") format("woff2-variations"); font-weight: 300 700; font-style: italic; font-display: swap; }
:root { --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
h1, h2, h3 { font-weight: 480; }
.hero__title { font-weight: 440; letter-spacing: -0.015em; }
.wordmark { font-weight: 520; }

/* nav underline draws itself */
.site-nav__link { position: relative; text-decoration: none !important; }
.site-nav__link::after { background: var(--brass); bottom: -5px; content: ""; height: 2px; left: 0; position: absolute; right: 0; transform: scaleX(0); transform-origin: left center; transition: transform .28s ease; }
.site-nav__link:hover::after, .site-nav__link.is-active::after { transform: scaleX(1); }

/* hover lift on tiles and cards */
.inv-card, .yard-tile img, .photo-tile, .brand-lockup, .info-card, .mini-card, .brand-card, .serving-place { transition: transform .28s ease, box-shadow .28s ease, border-color .2s ease; }
.inv-card:hover, .photo-tile:hover, .info-card:hover, .mini-card:hover, .brand-card:hover { box-shadow: 0 22px 55px rgba(28,23,18,.14); transform: translateY(-4px); }
.yard-tile:hover img { box-shadow: 0 22px 55px rgba(28,23,18,.18); transform: translateY(-4px); }
.serving-place:hover { transform: translateY(-3px); }
.btn { transition: background .15s ease, border-color .15s ease, color .15s ease, transform .2s ease, box-shadow .2s ease; }
.btn:hover { box-shadow: 0 10px 26px rgba(28,23,18,.22); transform: translateY(-1px); }

/* quiet parallax on the photo bands. Gated on a fine pointer as well as width:
   iOS Safari does not honour background-attachment: fixed, and an iPad in
   landscape clears 1000px comfortably. */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* .serving--photo still has two background layers (gradient + photo), so it
     keeps two values. .hero--photo now has one, and it is deliberately NOT
     fixed: with fixed the photo is sized to the viewport and the band shows a
     slice that slides as you scroll, so which part of the picture you get
     depends on where you stopped. .hero__slide scrolls normally, so leaving
     the section background fixed also meant a hero looked different before and
     after its first crossfade. */
  .serving--photo { background-attachment: fixed, fixed; }
}

/* reveal on scroll — html.motion-ok is set by the inline script; without it
   (no JS, reduced motion) everything stays visible */
html.motion-ok .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
html.motion-ok .reveal.in-view { opacity: 1; transform: none; }
html.motion-ok .reveal:nth-child(2) { transition-delay: .07s; }
html.motion-ok .reveal:nth-child(3) { transition-delay: .14s; }
html.motion-ok .reveal:nth-child(4) { transition-delay: .21s; }
html.motion-ok .reveal:nth-child(5) { transition-delay: .28s; }
html.motion-ok .reveal:nth-child(6) { transition-delay: .35s; }
@media (prefers-reduced-motion: reduce) { html.motion-ok .reveal { opacity: 1; transform: none; transition: none; } }

/* === native vendor catalog (Silestone first) — 2026-08-14 === */
.color-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.color-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); display: block; overflow: hidden; position: relative; text-decoration: none; transition: transform .28s ease, box-shadow .28s ease; }
.color-card img { aspect-ratio: 4 / 3; display: block; object-fit: cover; width: 100%; }
.color-card__name { color: var(--ink-900); display: block; font-family: var(--font-display); font-size: 17px; padding: 10px 12px 12px; }
.color-card__tag { background: rgba(21,17,14,.75); border-radius: 4px; color: #f2ede4; font-family: var(--font-ui); font-size: 10px; font-weight: 800; left: 10px; letter-spacing: .08em; padding: 3px 6px; position: absolute; text-transform: uppercase; top: 10px; }
.color-card:hover { box-shadow: 0 22px 55px rgba(28,23,18,.16); transform: translateY(-4px); }
.section--catalog .disclaimer { margin-top: 18px; }

.color-hero { display: grid; gap: 32px; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); }
.color-hero__img { border-radius: var(--radius-lg); box-shadow: var(--shadow); display: block; width: 100%; }
.color-hero__copy h1 { font-size: clamp(34px, 4.5vw, 54px); margin: 4px 0 12px; }
.color-hero__copy .cta-card { margin: 18px 0; }
.color-nav { display: flex; gap: 20px; justify-content: space-between; }
@media (max-width: 900px) { .color-hero { grid-template-columns: 1fr; } .color-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.color-filter { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
.color-filter__input { background: var(--card); border: 1px solid var(--line); border-radius: 8px; flex: 1 1 320px; font: 16px var(--font-body); max-width: 520px; padding: 12px 14px; }
.color-filter__input:focus { border-color: var(--blue); outline: 2px solid var(--blue); outline-offset: 1px; }
.color-filter__count { color: var(--muted); font-family: var(--font-ui); font-size: 13px; font-weight: 700; }
.color-card__name small { color: var(--muted); display: block; font-family: var(--font-ui); font-size: 12px; margin-top: 2px; }
.color-alias { color: var(--muted); font-family: var(--font-ui); font-size: 14px; margin: -6px 0 12px; }
.color-card[hidden] { display: none; }

/* === color pages: full-screen viewer + manufacturer specs — 2026-08-18 === */
.color-hero__view { display: block; position: relative; text-decoration: none; }
.color-hero__view .color-hero__img { transition: transform .35s ease, box-shadow .35s ease; }
.color-hero__view:hover .color-hero__img { box-shadow: 0 26px 60px rgba(28,23,18,.2); transform: translateY(-2px); }
.color-hero__zoom { background: rgba(21,17,14,.78); border-radius: 6px; bottom: 14px; color: #f2ede4; font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 7px 11px; position: absolute; right: 14px; }
.photo-tile.js-view { cursor: zoom-in; display: block; }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.spec-dl { display: grid; gap: 10px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 0; }
.spec-dl dt { color: var(--muted); font-family: var(--font-ui); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.spec-dl dd { font-weight: 600; margin: 2px 0 0; }
.spec-table { border-collapse: collapse; font-family: var(--font-ui); font-size: 14px; margin: 6px 0 18px; width: 100%; }
.spec-table th { border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; padding: 6px 8px 6px 0; text-align: left; text-transform: uppercase; }
.spec-table td { border-bottom: 1px solid var(--line); padding: 8px 8px 8px 0; }

.viewer { align-items: center; background: rgba(12,10,8,.96); display: flex; inset: 0; justify-content: center; position: fixed; z-index: 200; }
.viewer[hidden] { display: none; }
.viewer__img { cursor: zoom-in; max-height: 92vh; max-width: 94vw; object-fit: contain; transition: transform .25s ease; }
.viewer__img.is-zoomed { cursor: zoom-out; max-height: none; max-width: none; height: auto; width: min(3200px, 260vw); transform: none; }
.viewer:has(.is-zoomed) { align-items: flex-start; overflow: auto; }
.viewer__close, .viewer__nav { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: #f2ede4; cursor: pointer; font-size: 28px; height: 46px; line-height: 1; position: fixed; width: 46px; z-index: 2; }
.viewer__close:hover, .viewer__nav:hover { background: rgba(255,255,255,.18); }
.viewer__close { right: 18px; top: 18px; }
.viewer__nav { top: 50%; transform: translateY(-50%); }
.viewer__nav--prev { left: 18px; }
.viewer__nav--next { right: 18px; }
.viewer__caption { bottom: 18px; color: #d9d2c7; font-family: var(--font-ui); font-size: 13px; left: 0; position: fixed; right: 0; text-align: center; z-index: 2; }
.viewer__caption strong { color: #fff; font-family: var(--font-display); font-size: 16px; font-weight: 500; }
.viewer__hint { color: rgba(217,210,199,.6); margin-left: 12px; }
@media (max-width: 760px) { .viewer__hint { display: none; } .viewer__nav { height: 40px; width: 40px; font-size: 24px; } .spec-dl { grid-template-columns: 1fr 1fr; } }
.color-hero__view { align-self: start; }
.color-hero__view .color-hero__zoom { pointer-events: none; }

/* === homepage depth: color wall, texture band, yard tiles zoom — 2026-08-18 === */
.yard-tile__link { display: block; position: relative; text-decoration: none; }
.yard-tile__zoom { background: rgba(21,17,14,.75); border-radius: 6px; bottom: 10px; color: #f2ede4; font-size: 14px; line-height: 1; opacity: 0; padding: 6px 8px; position: absolute; right: 10px; transition: opacity .2s ease; }
.yard-tile:hover .yard-tile__zoom { opacity: 1; }
.yard-tile__link { cursor: zoom-in; }

.section--wall { padding-bottom: 72px; }
.section--wall .wrap--wide { max-width: 1400px; }
.color-wall { display: grid; gap: 6px; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.wall-tile { aspect-ratio: 1; display: block; overflow: hidden; position: relative; }
.wall-tile img { display: block; height: 100%; object-fit: cover; transition: transform .5s ease; width: 100%; }
.wall-tile:hover img { transform: scale(1.06); }
.wall-tile__name { background: linear-gradient(to top, rgba(21,17,14,.82), rgba(21,17,14,0)); bottom: 0; color: #f6f1e8; font-family: var(--font-ui); font-size: 12px; font-weight: 700; left: 0; line-height: 1.2; opacity: 0; padding: 26px 10px 9px; position: absolute; right: 0; transition: opacity .25s ease; }
.wall-tile__name small { color: rgba(246,241,232,.7); display: block; font-size: 10px; font-weight: 600; letter-spacing: .06em; margin-top: 2px; text-transform: uppercase; }
.wall-tile:hover .wall-tile__name, .wall-tile:focus-visible .wall-tile__name { opacity: 1; }
.color-wall .wall-tile:nth-child(8n+1), .color-wall .wall-tile:nth-child(8n+6) { grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 1000px) { .color-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } .color-wall .wall-tile:nth-child(8n+1), .color-wall .wall-tile:nth-child(8n+6) { grid-row: auto; aspect-ratio: 1; } }
@media (max-width: 600px) { .color-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; } .wall-tile__name { opacity: 1; padding: 18px 6px 6px; font-size: 10px; } .wall-tile__name small { display: none; } }

.texture-band { background: linear-gradient(90deg, rgba(21,17,14,.78) 0%, rgba(21,17,14,.55) 45%, rgba(21,17,14,.15) 100%), var(--texture) center / cover no-repeat; color: #f6f1e8; padding: 96px 0; }
.texture-band__inner { max-width: 44rem; }
.texture-band .eyebrow { color: var(--brass); }
.texture-band__line { font-family: var(--font-display); font-size: clamp(24px, 3.2vw, 36px); line-height: 1.2; margin: 0 0 22px; }
/* hover/pointer, not width alone: an iPad in landscape is 1024px wide and iOS
   Safari does not honour background-attachment: fixed -- it sizes the layer to
   the viewport and leaves it there, so the band shows the wrong crop and
   judders as you scroll. A device with a fine pointer is a real desktop. */
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .texture-band { background-attachment: scroll, fixed; } }
@media (max-width: 760px) { .texture-band { padding: 64px 0; } }

/* === business hours in footer — 2026-08-22 === */
.hours-list { display: grid; gap: 6px; margin: 0; }
.hours-list div { display: flex; gap: 10px; justify-content: space-between; max-width: 15rem; }
.hours-list dt { color: var(--stone-300); font-family: var(--font-ui); font-size: 13px; }
.hours-list dd { color: var(--paper); font-family: var(--font-ui); font-size: 13px; font-weight: 600; margin: 0; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Install proof, colour picks, and customer reviews.
   Added 8/22 alongside the city-page work. Every number these blocks display
   comes from the invoice archive or the Google profile, never from copy.
--------------------------------------------------------------------------- */

.proof-band {
  display: grid;
  gap: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px 30px;
}

.proof-lead {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 480;
  letter-spacing: -0.02em;
  line-height: 1.32;
  color: var(--ink-900);
}

.proof-lead strong {
  font-weight: 600;
  color: var(--brass-deep);
}

.proof-stats {
  display: grid;
  gap: 14px 26px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.proof-stat {
  min-width: 0;
}

.proof-stat dt {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.proof-stat dd {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink-900);
}

.proof-note {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

.pick-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.pick {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
}

.pick-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-900);
  text-decoration: none;
}

a.pick-name {
  text-decoration: underline;
  text-decoration-color: var(--stone-300);
  text-underline-offset: 3px;
}

a.pick-name:hover {
  text-decoration-color: var(--brass);
}

.pick-count {
  flex: none;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.review-row {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.review-card {
  display: grid;
  gap: 16px;
  align-content: start;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 26px 26px 22px;
  position: relative;
}

.review-card::before {
  content: "\201C";
  position: absolute;
  top: 4px;
  left: 18px;
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  color: var(--stone-300);
  pointer-events: none;
}

.review-card blockquote {
  margin: 0;
  padding-top: 14px;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-700);
}

.review-card figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.review-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-900);
}

.review-src {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.rating-chip {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--brass-deep);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  text-decoration: none;
}

.rating-chip:hover {
  border-color: var(--brass);
}

@media (max-width: 640px) {
  .proof-band { padding: 22px 20px; }
  .pick { padding: 12px 15px; }
  .review-card { padding: 22px 20px 18px; }
}

.proof-line {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(19px, 2.1vw, 25px);
  font-weight: 480;
  letter-spacing: -0.015em;
  line-height: 1.4;
  color: var(--ink-900);
}

.proof-line strong {
  font-weight: 600;
  color: var(--brass-deep);
}

.proof-stats--wide {
  margin-top: 28px;
  padding-top: 24px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  text-align: center;
}

.proof-stats--wide .proof-stat dd {
  font-size: clamp(24px, 3vw, 34px);
  color: var(--brass-deep);
}

.proof-stats--wide + .proof-note {
  margin-top: 14px;
  text-align: center;
}

.materials-mini .pick-name {
  font-size: 20px;
}

.materials-mini .pick-count {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

/* Tier 3 "on the ground" notes on town pages — what it is actually like to
   template and install in that town. */
.notes-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.note {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  padding: 22px 24px;
}

.note h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}

.note p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.66;
  color: var(--ink-700);
}

/* The yard-scale band. Numbers lead, labels follow — the count is the point,
   and reversing dt/dd visually is why the markup order is dd-then-dt here. */
.yard-stats {
  border-top: none;
  padding-top: 8px;
  margin-top: 10px;
}

.yard-stats .proof-stat dd {
  margin: 0;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1;
  color: var(--brass-deep);
}

.yard-stats .proof-stat dt {
  margin-top: 8px;
  font-size: 12.5px;
  letter-spacing: 0.07em;
}

.yard-note {
  margin: 22px 0 0;
  max-width: 68ch;
  font-family: var(--font-ui);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
}

.yard-note a {
  color: var(--brass-deep);
}

/* The yard band. The number leads, the term follows, and the definition sits
   under both — most people have never heard of a partial slab, and that
   definition is the actual news in this band. */
.yard-stats {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 30px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
}

.yard-stat dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(38px, 5.5vw, 56px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--brass-deep);
  font-variant-numeric: tabular-nums;
}

.yard-stat dt {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--ink-900);
}

.yard-stat p {
  margin: 6px 0 0;
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

.yard-quote {
  margin: 30px 0 0;
  padding: 22px 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
}

.yard-quote blockquote {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-700);
}

.yard-quote figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  margin-top: 12px;
}

.yard-visit {
  margin: 22px 0 0;
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
}

.yard-visit a { color: var(--brass-deep); }

/* /inventory while the listing is coming soon. Centred to sit over the centred
   quote band beneath it; the address gets its own line and breathing room
   instead of running into the call line. */
.coming-soon {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.coming-soon .lead { margin: 0; }
.coming-soon .yard-visit { margin: 14px 0 18px; }
.coming-soon p:last-child { margin-bottom: 0; }

/* Gallery captions. The stone name is what people actually came for, so it
   leads and the room description sits under it. */
.photo-figure figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
}

.tile-stone {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}

.tile-material {
  font-family: var(--font-ui);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

.tile-caption {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--muted);
}

/* Hero crossfade. The layers sit above the section's own background image and
   below the scrim, so the dark gradient keeps working on every frame. */
.hero__slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 78% 42%;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
}

.hero__slide.is-on { opacity: 1; }

/* The scrim has to sit over the slides, not under them. */
.hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(21, 17, 14, .94) 0%, rgba(21, 17, 14, .8) 30%, rgba(21, 17, 14, .38) 58%, rgba(21, 17, 14, .14) 100%);
}

.hero--photo .hero__inner { position: relative; z-index: 2; }

/* On a phone the scrim has to run the other way.

   The 90deg gradient is built for a wide band: dark where the copy sits on the
   left, clearing to .14 on the right so the photograph shows. Below 820px the
   copy is no longer on the left -- it spans the full width -- so the last third
   of every line sits on the transparent end of the scrim. Measured against the
   brightest band of hero-3 behind the actual copy box at 457px wide: the title
   came out at 1.73:1 and the lead at 1.19:1. WCAG asks 3:1 for text that size
   and 4.5:1 for the lead. The lead was, in plain terms, invisible over a pale
   countertop.

   Rotating to 180deg puts the dark end under the copy instead of beside it, and
   keeps the top of the photograph at .62 rather than burying the whole frame.
   Same measurement after: title 4.7:1, lead 4.7:1.

   The lead moves from --stone-300 to --paper for these widths only. #d7cab6 is
   a warm grey that reads beautifully on the desktop hero, where it sits over
   the .94 end; over a .74 scrim it only reaches 3.2:1 and no amount of further
   darkening buys as much as simply using the brighter ink already in the
   palette. --paper is the title colour, so nothing new enters the design. */
@media (max-width: 820px) {
  .hero--photo::after {
    background: linear-gradient(180deg, rgba(21, 17, 14, .62) 0%, rgba(21, 17, 14, .72) 40%, rgba(21, 17, 14, .86) 100%);
  }
  .hero--photo .hero__lead { color: var(--paper); }
}

@media (min-width: 1600px) {
  .hero__slide { background-position: 68% 40%; }
}

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

/* ---------------------------------------------------------------------------
   Recent installs, folded away.
   Built on <details> so it still opens without JavaScript. The slide comes
   from animating a grid row from 0fr to 1fr, which is the one way to
   transition to a content-sized height without hard-coding one.
--------------------------------------------------------------------------- */
.installs {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.installs__toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 26px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

/* Safari draws its own triangle without this. */
.installs__toggle::-webkit-details-marker { display: none; }

.installs__toggle:hover .installs__label { color: var(--brass-deep); }

.installs__toggle:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: -4px;
}

.installs__label {
  flex: 1;
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 23px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  transition: color .18s ease;
}

.installs__count {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.installs__chev {
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .28s ease;
}

.installs[open] .installs__chev {
  transform: rotate(225deg) translate(-3px, -3px);
}

.installs__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s ease;
}

.installs[open] .installs__panel { grid-template-rows: 1fr; }

.installs__inner {
  overflow: hidden;
  min-height: 0;
}

.installs__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  padding: 4px 26px 0;
}

.install-shot { margin: 0; }

.install-shot img {
  display: block;
  width: 100%;
  height: 210px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--paper-2);
}

.install-shot figcaption {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 8px;
}

.install-shot figcaption strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-900);
}

.install-shot figcaption span {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--muted);
}

.installs__note {
  margin: 18px 26px 24px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .installs__panel, .installs__chev { transition: none; }
}

@media (max-width: 640px) {
  .installs__toggle { padding: 16px 18px; }
  .installs__grid { padding: 4px 18px 0; }
  .installs__note { margin: 14px 18px 18px; }
}

/* Transition note on the inventory page while the yard is being photographed.
   Reads as a note from the shop, not an error state -- the yard being bigger
   than the website is a selling point, not an apology. Retires itself once a
   quarter of the slabs are listed (see inventoryTransitionNote in templates.js). */
.note-band {
  margin: 0 0 28px;
  padding: 20px 24px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
}
.note-band__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink-900);
}
.note-band p {
  margin: 0 0 10px;
  color: var(--muted);
  max-width: 68ch;
}
.note-band p:last-child { margin-bottom: 0; }

/* Install shots open in the shared viewer, so they need the same affordance
   the yard tiles have: a cursor that says "this opens", and a corner mark. */
.install-shot__link {
  display: block;
  position: relative;
  cursor: zoom-in;
  border-radius: 10px;
  overflow: hidden;
}
.install-shot__link img { display: block; width: 100%; height: auto; }
.install-shot__zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-content: center;
  border-radius: 50%;
  background: rgba(21, 17, 14, .62);
  color: var(--paper);
  font-size: 15px;
  opacity: 0;
  transition: opacity .2s ease;
}
.install-shot__link:hover .install-shot__zoom,
.install-shot__link:focus-visible .install-shot__zoom { opacity: 1; }

/* ---- FAQ page ------------------------------------------------------------
   Accordions rather than a wall: twenty-three answers in one column is a page
   nobody finishes. <details> so it works with JavaScript off and so the browser
   handles the keyboard for us. */
.faq-page { max-width: 860px; }
.faq-group + .faq-group { margin-top: 38px; }
.faq-group__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--ink-900);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 2px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-900);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { color: var(--brass-deep); }
.faq-item__chev {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-right: 2px solid var(--brass);
  border-bottom: 2px solid var(--brass);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq-item[open] .faq-item__chev { transform: rotate(-135deg); }
.faq-item__a { padding: 0 2px 18px; }
.faq-item__a p { margin: 0; color: var(--muted); max-width: 70ch; line-height: 1.65; }

/* Intro paragraph on a simple page, and a two-column bullet list. */
.lede { font-size: 1.1rem; line-height: 1.7; color: var(--ink-700); max-width: 68ch; margin: 0; }
.points--wide { columns: 2; column-gap: 40px; }
.points--wide li { break-inside: avoid; margin-bottom: 8px; }
@media (max-width: 640px) { .points--wide { columns: 1; } }

/* WEB-QUOTE-1: the quote form's honeypot. Off-screen rather than display:none —
   some bots skip anything set to none, and this needs to look fillable to them
   and be unreachable to everyone else. aria-hidden and tabindex="-1" on the
   markup keep it away from screen readers and the tab order. */
.quote-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* WEB-A11Y-1 (Astra review, 2026-09-09) ------------------------------------ */

/* The yard stats are a real definition list again: <dt> label, then <dd> value
   and <dd> note. It used to put <dd> before <dt> purely so the big number came
   first on screen, with a loose <p> for the note — invalid markup, and a screen
   reader read the number before the thing it counts. The order is restored here
   visually instead, which is what CSS is for. */
.yard-stat {
  display: flex;
  flex-direction: column;
}
.yard-stat__value {
  order: -1;
}
.yard-stat dd {
  margin: 0;
}
.yard-stat__note {
  margin: 6px 0 0;
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* The focus ring inside the dark sticky header.
   --blue (#0b5cab) against --ink-950 (#15110e) measures 2.80:1. A focus
   indicator is a non-text UI component, so WCAG 1.4.11 asks for 3:1 and it
   fails. --brass (#b08344) against the same ground measures 5.52:1.
   Arithmetic, not opinion — recompute it if either colour changes. */
.site-header :focus-visible {
  outline-color: var(--brass);
}

/* The viewer's zoom control. It reads as part of the caption rather than a
   separate widget, but it is a real button so a keyboard reaches it. */
.viewer__zoom {
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 999px;
  cursor: pointer;
}
.viewer__zoom[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-950);
}
.viewer :focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   The Granite Genie.
   genieImg() wraps the badge in <picture> so the browser can pick a sized WebP.
   display: contents takes the wrapper out of layout, so the <img> is still the
   flex/grid item every older rule (.genie-band__art, .genie-art,
   .quote-hero__art) was written for.

   On the home page he sits on paper in the Our work head, directly under the
   dark hero (see .work__head--genie at the end of this file). The badge is
   saturated royal blue with its own navy outline, so it holds its edge on a
   light ground; on ink or blue-ink the ribbons would sink into the background.
--------------------------------------------------------------------------- */
.genie-pic { display: contents; }
/* A <source> is a box of its own once its parent is display: contents -- left
   alone it takes the first grid cell and pushes the badge onto a second row. */
.genie-pic > source { display: none; }


/* ---------------------------------------------------------------------------
   Our work -- the homepage photo strip (templates.js workShowcase).
   A native horizontal scroller with scroll-snap. No scrim, no autoplay. Every
   frame is --work-h tall and as wide as its own photograph, so the portrait
   wine room is shown whole. The numbers here are repeated in the `sizes`
   attribute workShowcase writes: change one, change the other.
--------------------------------------------------------------------------- */
.work {
  --work-h: clamp(200px, 50vw, 440px);
  /* the same left edge as .wrap, so frame one lines up with the heading */
  --work-pad: max(var(--gutter), (100% - var(--wrap)) / 2);
}

.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0 24px;
}

.work__head .section-head {
  margin-bottom: 28px;
}

.work__controls {
  display: flex;
  flex: none;
  gap: 10px;
  margin-bottom: 28px;
}

.work__controls[hidden] {
  display: none;
}

.work__nav {
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-900);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 30px;
  height: 48px;
  justify-content: center;
  line-height: 1;
  padding: 0 0 4px;
  transition: border-color .15s ease, color .15s ease;
  width: 48px;
}

.work__nav:hover {
  border-color: var(--brass);
  color: var(--brass-deep);
}

.work__nav[aria-disabled="true"] {
  cursor: default;
  opacity: .38;
}

.work__nav[aria-disabled="true"]:hover {
  border-color: var(--line);
  color: var(--ink-900);
}

/* Touch screens swipe; the arrows are for a mouse. */
@media (hover: none) {
  .work__controls {
    display: none;
  }
}

.work__track {
  display: flex;
  gap: 18px;
  list-style: none;
  margin: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* 6px on top so a focused frame's outline is not clipped by the scroller */
  padding: 6px var(--work-pad) 16px;
  scroll-padding-inline: var(--work-pad);
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--stone-500) transparent;
  scrollbar-width: thin;
}

.work__item {
  flex: none;
  scroll-snap-align: start;
}

.work__figure {
  margin: 0;
  width: min-content;
}

.work__link {
  background: var(--stone-300);
  border-radius: var(--radius);
  display: block;
  overflow: hidden;
}

.work__link picture {
  display: block;
}

.work__img {
  height: var(--work-h);
  max-width: 88vw;
  object-fit: cover;
  width: auto;
}

.work__figure figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 2px 0;
}

.work__end {
  align-content: center;
  background: var(--ink-900);
  border-radius: var(--radius);
  color: var(--paper);
  display: grid;
  gap: 8px;
  height: var(--work-h);
  padding: 24px;
  text-decoration: none;
  width: clamp(190px, 38vw, 280px);
}

.work__end:hover {
  background: var(--ink-950);
  color: var(--paper);
}

.work__end-kicker {
  color: var(--brass);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.work__end-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.work__end-arrow {
  color: var(--brass);
  font-size: 28px;
  line-height: 1;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .work__img {
    transition: transform .5s ease;
  }
  .work__link:hover .work__img {
    transform: scale(1.02);
  }
}

@media (max-width: 760px) {
  .work__track {
    gap: 12px;
  }
  .work__head .section-head,
  .work__controls {
    margin-bottom: 20px;
  }
}

/* ---------------------------------------------------------------------------
   The Granite Genie presents the work (option C; Rory and Coty, 2026-09-15).
   workShowcase({ genie: true }) turns the Our work head into a grid:
   badge | eyebrow, title, "You wish it, we granite." | lead | link | arrows.
   Source order is heading, badge, lead, link, arrows; grid areas draw the
   badge on the left. Badge widths here (208 / 188 / 164 / 136 / 112 / 104 / 96)
   are repeated in GENIE_WORK_SIZES in templates.js: change one, change both.

   The section's top padding is shorter than a normal section (84px) so as much
   of the badge as possible lands in a laptop's first screen, and on a 390x844
   phone the whole badge and a slice of the first photo both do. The band this
   replaced carried a hairline under it; with two paper sections now meeting,
   the hairline moves to the bottom of this one.
--------------------------------------------------------------------------- */
.work {
  --genie-w: 188px;
}

.work.work--genie {
  padding-top: 40px;
  padding-bottom: 68px;
  border-bottom: 1px solid var(--line);
}

.work__head.work__head--genie {
  display: grid;
  grid-template-columns: var(--genie-w) minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto 1fr;
  grid-template-areas:
    "art intro controls"
    "art lead  controls"
    "art cta   controls"
    "art .     controls";
  column-gap: 40px;
  margin-bottom: 30px;
}

.work__genie {
  grid-area: art;
  align-self: start;
  width: var(--genie-w);
}

/* The lift is a drop shadow on the wrapper; the artwork itself has no filter.
   genieImg's wrapper is display: contents everywhere else, so it is made a
   real box here to carry the shadow. */
.work__genie .genie-pic {
  display: block;
  filter: drop-shadow(0 14px 18px rgba(28, 23, 18, .17)) drop-shadow(0 2px 3px rgba(28, 23, 18, .10));
}

.work__genie-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Two classes on the head on purpose: .work__head .section-head sets a bottom
   margin at the same specificity earlier in the file (and again at 760px), and
   this reset must not depend on staying below it. */
.work__head.work__head--genie .work__intro {
  grid-area: intro;
  max-width: 44rem;
  margin: 0;
}

/* balance: no one-word widow in the narrow column around 761-790px. */
.work__head--genie .section-head__title {
  font-size: clamp(32px, 3.6vw, 48px);
  text-wrap: balance;
}

.work__wish {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--brass-deep);
}

.work__wish::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1px;
  margin-right: 12px;
  vertical-align: .32em;
  background: var(--brass);
}

.work__head--genie .work__lead {
  grid-area: lead;
  margin: 14px 0 0;
  max-width: 36rem;
  text-wrap: balance;
}

/* High-contrast mode repaints the rule's background to the page colour, which
   leaves 42px of empty indent before the line; CanvasText keeps it visible. */
@media (forced-colors: active) {
  .work__wish::before { background: CanvasText; }
}

.work__cta {
  grid-area: cta;
  margin: 12px 0 0;
}

/* A disabled arrow is faded with opacity, which faded its focus ring to about
   1.8:1 too. It is still a Tab stop, so it shows at full strength when focused. */
.work__nav[aria-disabled="true"]:focus-visible {
  opacity: 1;
}

.work__head--genie .work__controls {
  grid-area: controls;
  align-self: end;
  margin: 0;
}

@media (min-width: 1600px) {
  .work { --genie-w: 208px; }
  .work__head.work__head--genie { column-gap: 48px; }
}

@media (max-width: 1100px) {
  .work { --genie-w: 164px; }
  .work__head.work__head--genie { column-gap: 32px; }
}

/* Small tablets and narrow windows: badge and copy side by side, the arrows on
   their own row underneath. */
@media (max-width: 760px) {
  .work { --genie-w: 136px; }
  .work.work--genie { padding-top: 40px; padding-bottom: 44px; }
  .work__head.work__head--genie {
    grid-template-columns: var(--genie-w) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto auto 1fr auto;
    grid-template-areas:
      "art      ."
      "art      intro"
      "art      lead"
      "art      cta"
      "art      ."
      "controls controls";
    column-gap: 24px;
    margin-bottom: 22px;
  }
  /* The copy runs taller than the badge across most of 561-760px, so the badge
     centres on it instead of sitting at the top of a tall cell. */
  .work__genie { align-self: center; }
  .work__head--genie .section-head__title { font-size: 30px; }
  .work__wish { font-size: 18px; margin-top: 8px; }
  .work__wish::before { display: none; }
  .work__head--genie .work__lead { margin-top: 12px; font-size: 16px; }
  .work__cta { margin-top: 10px; }
  .work__head--genie .work__controls { justify-self: start; margin-top: 18px; }
}

/* Phones: badge beside eyebrow, title and the shop line; the lead full width
   under them. Kept tight so the first photo still shows at the bottom of a
   390x844 first screen. */
@media (max-width: 560px) {
  .work { --genie-w: 112px; }
  .work.work--genie { padding-top: 30px; }
  .work__head.work__head--genie {
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "art      intro"
      "lead     lead"
      "controls controls";
    column-gap: 18px;
    margin-bottom: 14px;
  }
  .work__genie { align-self: center; }
  .work__head--genie .work__intro { align-self: center; }
  /* 9em always breaks the title as "Finished in / mountain homes"; the font
     steps below keep "mountain homes" (about 7.6em) inside the column. */
  .work__head--genie .section-head__title { font-size: 30px; max-width: 9em; }
  .work__wish { font-size: 17px; }
  .work__head--genie .work__lead { margin-top: 12px; line-height: 1.5; }
  /* The swipe hint goes: the peeking second photo already says it. */
  .work__lead-how { display: none; }
  /* No room for the link without pushing the photos below the fold; the hero's
     Request a Quote is one thumb-length above. */
  .work__cta { display: none; }
  .work__head--genie .work__controls { margin-top: 14px; }
}

@media (max-width: 413px) {
  .work__head--genie .section-head__title { font-size: 27px; }
}

@media (max-width: 389px) {
  .work__head--genie .section-head__title { font-size: 25px; }
}

@media (max-width: 375px) {
  .work { --genie-w: 104px; }
  .work.work--genie { padding-top: 26px; }
  .work__head.work__head--genie { column-gap: 14px; }
  .work__head--genie .section-head__title { font-size: 24px; }
  .work__wish { font-size: 16px; }
}

@media (max-width: 340px) {
  .work { --genie-w: 96px; }
  .work__head--genie .section-head__title { font-size: 22px; }
  .work__wish { font-size: 15px; }
}