/* ============================================================
   Hocking Hills Garment Center — ohiohhgc.com
   Heritage American manufacturing design system.
   Palette drawn from the work itself: denim indigo, unbleached
   muslin, copper rivet, Ohio Valley green.
   ============================================================ */

:root {
  --ink: #1b2233;            /* deep denim-navy: headers, footer, hero */
  --ink-2: #24304a;          /* lifted navy for panels on dark */
  --indigo: #2e4370;         /* link/denim accent */
  --denim: #4a6494;          /* lighter denim */
  --cream: #f6f1e7;          /* unbleached muslin page background */
  --paper: #fffdf8;          /* card background */
  --thread: #e3d9c6;         /* hairline borders, like basting thread */
  --text: #2a2721;           /* body text on light */
  --text-soft: #5c564a;      /* secondary text */
  --copper: #b0521f;         /* rivet copper — primary CTA */
  --copper-dark: #8f3f14;
  --gold: #c69a3d;           /* harvest gold accents */
  --valley: #3f5a45;         /* Ohio Valley green */
  --flag-red: #a63a32;
  --radius: 10px;
  --arch: 999px 999px 12px 12px / 660px 660px 12px 12px;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --maxw: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, .display { font-family: var(--font-display); color: var(--ink); line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 700; }
h4 { font-size: 1.05rem; color: var(--ink); }

p + p { margin-top: 1em; }

a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--copper); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-tight { padding: clamp(2rem, 4vw, 3rem) 0; }
.center { text-align: center; }

.kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 0.75rem;
}
.kicker::before { content: "— "; color: var(--gold); }

.lede { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--text-soft); max-width: 46em; }
.lede strong { color: var(--text); }
/* The hero lede is split into two spans so phones can show only the lead
   sentence. On wider screens they must read as one continuous paragraph. */
.lede-lead, .lede-rest { display: inline; }
.lede-lead::after { content: " "; }

/* ---------- Header ---------- */
/* Utility bar. Deliberately quiet: it carries the phone number and address,
   which nothing else above the fold provides. The old version repeated the
   H1's "Made in the USA / Ohio Valley" claim and duplicated the header's
   quote button, costing ~70px of prime mobile space for no new information. */
.topbar {
  background: var(--ink-2);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  color: #cfc8b8;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.4rem 0;
}
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { color: var(--gold); text-decoration: underline; }
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.2rem;
  flex-wrap: wrap;
}
.topbar-usa { text-transform: uppercase; letter-spacing: 0.11em; white-space: nowrap; }
.topbar-contact { display: inline-flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.topbar-loc { color: #a9a291; }
.topbar-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  flex: none;
}
.topbar-star { color: var(--flag-red); }

/* On phones the address is the first thing to go; the phone number stays. */
@media (max-width: 560px) {
  .topbar { font-size: 0.72rem; }
  .topbar-inner { justify-content: center; gap: 0.4rem 0.8rem; }
  .topbar-loc, .topbar-sep { display: none; }
}

.site-header {
  background: var(--ink);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 3px solid var(--copper);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 76px;
}
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: #fff; }
.brand img { height: 54px; width: auto; }
.brand-name { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.2; font-weight: 700; letter-spacing: 0.02em; }
.brand-name small { display: block; font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav > ul { display: flex; align-items: center; gap: 0.15rem; list-style: none; }
.nav a { color: #e9e4d8; text-decoration: none; font-size: 0.92rem; font-weight: 600; padding: 0.55rem 0.7rem; border-radius: 6px; display: block; white-space: nowrap; }
.nav > ul > li > a:hover,
.nav > ul > li > a.in-section,
.nav > ul > li > a[aria-current="page"] { color: #fff; background: rgba(255,255,255,0.09); }

.has-menu { position: relative; }
.has-menu > a::after { content: " ▾"; font-size: 0.7em; color: var(--gold); }
.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  background: var(--paper);
  border: 1px solid var(--thread);
  border-top: 3px solid var(--copper);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 14px 34px rgba(20, 20, 30, 0.18);
  list-style: none;
  padding: 0.4rem 0;
}
.has-menu:hover .submenu, .has-menu:focus-within .submenu { display: block; }
/* Submenu links always read as dark ink on the light dropdown panel, including
   the current page, which must stay legible rather than inheriting the
   white-on-dark treatment used by top-level nav items. */
.submenu a { color: var(--text); padding: 0.5rem 1rem; border-radius: 0; font-weight: 500; background: none; }
.submenu a:hover { background: var(--cream); color: var(--copper); }
.submenu a[aria-current="page"] {
  color: var(--copper);
  background: var(--cream);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--copper);
}

.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.7rem 1.35rem;
  border-radius: 7px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--copper); color: #fff !important; }
.btn-primary:hover { background: var(--copper-dark); }
.btn-outline-light { border-color: rgba(255,255,255,0.55); color: #fff !important; }
.btn-outline-light:hover { background: rgba(255,255,255,0.12); }
.btn-outline { border-color: var(--indigo); color: var(--indigo) !important; }
.btn-outline:hover { background: var(--indigo); color: #fff !important; }
.btn-lg { font-size: 1.05rem; padding: 0.9rem 1.7rem; }

.nav-toggle { display: none; background: none; border: 2px solid rgba(255,255,255,0.4); color: #fff; border-radius: 6px; font-size: 1.3rem; line-height: 1; padding: 0.35rem 0.6rem; cursor: pointer; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1200px 500px at 75% -10%, rgba(74,100,148,0.35), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.022) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.10) 0 2px, transparent 2px 6px),
    var(--ink);
  color: #f2eee4;
  overflow: hidden;
}
.hero .wrap { display: grid; grid-template-columns: 1.25fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.hero h1 { color: #fff; }
.hero .lede { color: #cfc8b8; }
.hero .lede strong { color: #fff; }
.hero .kicker { color: var(--gold); }
.hero .kicker::before { color: var(--flag-red); content: "★ "; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.hero-note { margin-top: 1.4rem; font-size: 0.88rem; color: #a9a291; }

.arch-frame {
  border-radius: var(--arch);
  overflow: hidden;
  border: 5px solid rgba(255,255,255,0.14);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  background: var(--ink-2);
}
.arch-frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Church hero (homepage): full-bleed photo behind text ---------- */
.hero-church { position: relative; padding: 0; }
.hero-church-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-church-bg picture { display: block; width: 100%; height: 100%; }
.hero-church-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
/* Scrim keeps display-serif headlines legible over the brick and sky. */
.hero-church-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(15,20,32,0.93) 0%, rgba(15,20,32,0.86) 42%, rgba(15,20,32,0.55) 72%, rgba(15,20,32,0.42) 100%),
    linear-gradient(to bottom, rgba(15,20,32,0.55), rgba(15,20,32,0.20) 45%, rgba(15,20,32,0.75));
}
/* Override the two-column .hero .wrap grid: this hero is a single text column
   sitting on top of a full-bleed photo. */
.hero-church .wrap.hero-church-inner {
  position: relative;
  display: block;
  grid-template-columns: none;
  max-width: var(--maxw);
  padding-top: clamp(3.5rem, 9vw, 7rem);
  padding-bottom: clamp(3.5rem, 9vw, 7rem);
}
.hero-church-inner > * { max-width: 42rem; }
.hero-church h1 { text-shadow: 0 2px 24px rgba(0,0,0,0.45); }

/* ---------- Photo credits ---------- */
.photo-credit-figure figcaption { line-height: 1.5; }
.credit {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8272;
}
figure.shot.dark { background: var(--ink-2); border-color: rgba(255,255,255,0.14); }
figure.shot.dark figcaption { color: #cfc8b8; }
figure.shot.dark .credit { color: #948d7c; }

/* ---------- Pull quote ---------- */
.pull-quote {
  margin: 1.5rem 0;
  padding: 1rem 1.4rem;
  border-left: 4px solid var(--gold);
  background: var(--paper);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
}
.pull-quote cite {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-style: normal;
  color: var(--text-soft);
}
.pull-quote cite::before { content: "— "; }

/* subpage hero */
.page-hero { background: var(--ink); color: #f2eee4; padding: clamp(2.5rem, 5vw, 3.5rem) 0; border-bottom: 4px solid var(--copper); }
.page-hero h1 { color: #fff; max-width: 22em; }
.page-hero .lede { color: #cfc8b8; margin-top: 0.9rem; }
.breadcrumbs { font-size: 0.85rem; color: #a9a291; margin-bottom: 1rem; }
.breadcrumbs a { color: #cfc8b8; text-decoration: none; }
.breadcrumbs a:hover { color: #fff; }

/* ---------- Flag ribbon / badges ---------- */
.usa-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--paper); border: 1px solid var(--thread);
  border-left: 4px solid var(--flag-red);
  padding: 0.5rem 0.9rem; border-radius: 6px;
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink);
}
.usa-badge .stars { color: var(--indigo); letter-spacing: 0.15em; }

.pill { display: inline-block; background: #eee7d8; border: 1px solid var(--thread); color: var(--ink); font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 999px; margin: 0.15rem 0.15rem 0.15rem 0; }

/* ---------- Cards & grids ---------- */
.grid { display: grid; gap: 1.4rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--paper);
  border: 1px solid var(--thread);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: 0 1px 2px rgba(43,38,28,0.05);
}
.card h3 a { color: var(--ink); text-decoration: none; }
.card h3 a:hover { color: var(--copper); }
.card .more { font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.card-img { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--thread); margin-bottom: 1rem; aspect-ratio: 4 / 3; background: var(--cream); }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-img.contain img { object-fit: contain; }

.stitch-top { border-top: 3px dashed var(--thread); padding-top: 1.2rem; margin-top: 1.2rem; }

/* ---------- Stats band ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stat { text-align: center; padding: 1.4rem 1rem; background: var(--paper); border: 1px solid var(--thread); border-radius: var(--radius); }
.stat b { display: block; font-family: var(--font-display); font-size: 2rem; color: var(--copper); line-height: 1.1; }
.stat span { font-size: 0.88rem; color: var(--text-soft); }

/* ---------- Steps (how it works) ---------- */
.steps { counter-reset: step; display: grid; gap: 1.2rem; }
.step { position: relative; padding: 1.4rem 1.4rem 1.4rem 4.6rem; background: var(--paper); border: 1px solid var(--thread); border-radius: var(--radius); }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 1.2rem; top: 1.3rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--ink); color: var(--gold);
  font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.step h3 { margin-bottom: 0.3rem; }

/* ---------- Prose (long-form service pages) ---------- */
.prose { max-width: 46em; }
.prose h2 { margin: 2.2rem 0 0.8rem; }
.prose h3 { margin: 1.6rem 0 0.5rem; }
.prose ul, .prose ol { margin: 0.8rem 0 0.8rem 1.4rem; }
.prose li { margin: 0.35rem 0; }
.prose blockquote {
  margin: 1.5rem 0; padding: 1rem 1.4rem;
  border-left: 4px solid var(--gold);
  background: var(--paper); border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-display); font-size: 1.15rem; color: var(--ink);
}
.prose blockquote cite { display: block; margin-top: 0.5rem; font-family: var(--font-body); font-size: 0.85rem; font-style: normal; color: var(--text-soft); }
.prose blockquote cite::before { content: "— "; }

.two-col { display: grid; grid-template-columns: 1fr 340px; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.sidebar .card { position: sticky; top: 100px; }
.sidebar .card h3 { margin-bottom: 0.6rem; }
.sidebar .card .btn { width: 100%; text-align: center; margin-top: 0.9rem; }
.sidebar ul { list-style: none; }
.sidebar li { padding: 0.4rem 0; border-bottom: 1px dashed var(--thread); font-size: 0.95rem; }
.sidebar li:last-child { border-bottom: 0; }

/* ---------- Spec table ---------- */
.spec-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--thread); border-radius: var(--radius); overflow: hidden; font-size: 0.97rem; }
.spec-table th, .spec-table td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid var(--thread); vertical-align: top; }
.spec-table th { width: 34%; background: var(--cream); font-family: var(--font-display); color: var(--ink); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }

/* ---------- FAQ ---------- */
.faq details { background: var(--paper); border: 1px solid var(--thread); border-radius: var(--radius); margin-bottom: 0.7rem; padding: 0; }
.faq summary { cursor: pointer; font-weight: 700; font-family: var(--font-display); font-size: 1.08rem; color: var(--ink); padding: 1rem 1.3rem; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 1.2rem; color: var(--copper); font-size: 1.3rem; font-family: var(--font-body); }
.faq details[open] summary::after { content: "–"; }
.faq .faq-body { padding: 0 1.3rem 1.1rem; color: var(--text-soft); }

/* ---------- CTA band ---------- */
.cta-band {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 6px),
    linear-gradient(120deg, var(--ink) 0%, var(--ink-2) 100%);
  color: #f2eee4; text-align: center;
  border-top: 4px solid var(--copper);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #cfc8b8; max-width: 40em; margin: 0.8rem auto 0; }
.cta-band .hero-ctas { justify-content: center; }

/* ---------- Video ---------- */
.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--thread); box-shadow: 0 16px 40px rgba(20,20,30,0.18); background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Quote / press ---------- */
.press-strip { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; align-items: center; justify-content: center; font-size: 0.88rem; color: var(--text-soft); }
.press-strip b { color: var(--ink); font-family: var(--font-display); font-size: 1rem; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.2rem; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-weight: 700; font-size: 0.9rem; color: var(--ink); margin-bottom: 0.3rem; }
label .opt { font-weight: 400; color: var(--text-soft); }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; padding: 0.65rem 0.8rem; font: inherit; color: var(--text);
  background: var(--paper); border: 1px solid #cdc2ab; border-radius: 7px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--denim); outline-offset: 1px; }
.fieldset { border: 1px solid var(--thread); border-radius: var(--radius); padding: 1.3rem; background: rgba(255,253,248,0.6); margin-bottom: 1.4rem; }
.fieldset legend { font-family: var(--font-display); font-weight: 700; color: var(--ink); padding: 0 0.5rem; font-size: 1.1rem; }
.check-row { display: flex; align-items: baseline; gap: 0.5rem; font-weight: 400; }
.check-row input { width: auto; }
.form-note { font-size: 0.88rem; color: var(--text-soft); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #b9b2a2; font-size: 0.95rem; border-top: 4px solid var(--copper); }
.site-footer .wrap { padding-top: 3rem; padding-bottom: 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.9fr 1.15fr; gap: 2rem 1.6rem; }
.site-footer h4 { color: var(--gold); font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 0.8rem; }
.site-footer ul { list-style: none; }
.site-footer li { margin: 0.35rem 0; }
.site-footer a { color: #d8d2c4; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .brand img { height: 64px; }
.footer-mission { margin-top: 0.9rem; font-size: 0.9rem; line-height: 1.6; }
.social-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem 0.45rem 0.6rem;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  color: #d8d2c4 !important;
  text-decoration: none !important;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.social-btn svg { flex: none; }
.social-btn:hover {
  background: var(--copper);
  border-color: var(--copper);
  color: #fff !important;
}
.social-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 2.2rem; padding-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; justify-content: space-between; font-size: 0.82rem; color: #8f8878; }
.footer-bottom a { color: #a9a291; }
address { font-style: normal; line-height: 1.7; }

/* ---------- Gallery / project figures ---------- */
figure.shot { background: var(--paper); border: 1px solid var(--thread); border-radius: var(--radius); overflow: hidden; }
figure.shot img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
figure.shot figcaption { padding: 0.8rem 1rem; font-size: 0.88rem; color: var(--text-soft); }

/* ---------- Team portraits ----------
   Presented as a framed panel, like a group of prints matted together and
   hung on the wall, rather than loose images on the page background. */
.team-frame {
  background: var(--paper);
  border: 1px solid var(--thread);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.7),   /* inner mat highlight */
    0 12px 34px rgba(43, 38, 28, 0.10);
  max-width: 940px;
}
.team-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem 1.1rem;
}
.team-member { text-align: center; }
.team-member img {
  width: 100%;
  max-width: 108px;                /* keeps portraits modest, not poster-sized */
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 6px;
  /* Thin dark keyline plus a light gap reads as a matted, framed print. */
  border: 2px solid var(--paper);
  outline: 1px solid #cfc4ad;
  outline-offset: 0;
  background: var(--cream);
  filter: grayscale(100%);
  transition: transform 0.18s ease, outline-color 0.18s ease;
}
.team-member:hover img {
  transform: translateY(-2px);
  outline-color: var(--copper);
}
.team-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 0.55rem;
  line-height: 1.2;
}
.team-role {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper);
  margin-top: 0.1rem;
}

@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem 0.8rem; }
  .team-member img { max-width: 92px; }
  .team-name { font-size: 0.85rem; }
}

/* ---------- Notices ---------- */
.notice { background: #f4ead6; border: 1px solid var(--gold); border-radius: var(--radius); padding: 1rem 1.3rem; font-size: 0.95rem; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero .arch-frame { max-width: 420px; margin: 0 auto; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .sidebar .card { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }

  /* Mobile menu: every page is reachable. Parent items become small
     section labels and their children are the tappable links, so the list
     reads as a grouped index rather than a flat wall of text. */
  .nav-toggle { display: block; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink);
    border-bottom: 3px solid var(--copper);
    padding: 0.5rem 1rem 1.4rem;
    max-height: calc(100svh - 76px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  }
  .nav.open { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li { border-bottom: 1px solid rgba(255,255,255,0.08); padding: 0.25rem 0; }
  .nav > ul > li:last-child { border-bottom: 0; }

  /* Parent link becomes a quiet uppercase group label */
  .nav > ul > .has-menu > a {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    padding: 0.7rem 0.6rem 0.3rem;
    background: none !important;
  }
  .nav > ul > li > a { padding: 0.75rem 0.6rem; }

  .submenu {
    display: block;
    position: static;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0 0 0.4rem;
    min-width: 0;
  }
  .submenu a {
    color: #e2ddd1;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.6rem 0.6rem 0.6rem 1.1rem;
    border-radius: 6px;
  }
  .submenu a:hover { background: rgba(255,255,255,0.07); color: #fff; }
  .submenu a[aria-current="page"] { color: #fff; background: rgba(255,255,255,0.10); box-shadow: inset 3px 0 0 var(--gold); }
  .has-menu > a::after { content: ""; }
  .nav .btn-primary { margin-top: 1rem; text-align: center; font-size: 1rem; padding: 0.85rem 1.2rem; }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .brand-name { font-size: 0.95rem; }
}

/* ---------- Utility ---------- */
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }
.muted { color: var(--text-soft); }
.small { font-size: 0.88rem; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--gold); color: var(--ink); padding: 0.6rem 1rem; z-index: 100; font-weight: 700; }
.skip-link:focus { left: 0; }

/* Church hero on phones: the portrait crop carries open sky up top, so the
   text sits over that and the scrim stays light enough to keep the building
   and tower visible instead of washing them out. */
@media (max-width: 860px) {
  .hero-church-bg img { object-position: center top; }
  .hero-church-bg::after {
    background:
      linear-gradient(to bottom,
        rgba(15,20,32,0.30) 0%,
        rgba(15,20,32,0.52) 34%,
        rgba(15,20,32,0.74) 58%,
        rgba(15,20,32,0.90) 100%);
  }
  .hero-church .wrap.hero-church-inner {
    min-height: 78svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* copy anchors low, sky stays open above */
    padding-top: clamp(4rem, 22vh, 11rem);
    padding-bottom: clamp(2.25rem, 6vw, 3rem);
  }
  .hero-church-inner > * { max-width: none; }
  .hero-church h1 {
    text-shadow: 0 2px 18px rgba(0,0,0,0.6);
    font-size: clamp(1.75rem, 7.6vw, 2.35rem);
    /* "150-Year-Old" must not break at its hyphens on a narrow column */
    hyphens: none;
  }
  .hero-church h1 .nb { white-space: nowrap; }
  .hero-church .lede { font-size: 1rem; }
  .hero-church .hero-ctas { gap: 0.6rem; margin-top: 1.3rem; }
  .hero-church .hero-ctas .btn { width: 100%; text-align: center; }
  .hero-church .hero-note { font-size: 0.78rem; margin-top: 1rem; }

  /* Give the photo more room: on phones the hero shows a short lead sentence
     and a single primary action. The fuller copy and the secondary link are
     still one scroll away in the section immediately below. */
  .hero-church .lede-rest { display: none; }
  .hero-church .hero-alt-cta { display: none; }
}

/* ============================================================
   Polish pass: typographic and interaction refinements that
   read as "established company" rather than "new template".
   ============================================================ */

/* Optical type refinements */
h1, h2, h3 { text-wrap: balance; }          /* avoids lonely last words in headings */
.lede, .prose p { text-wrap: pretty; }      /* avoids single-word final lines */
h1 { letter-spacing: -0.018em; }
.prose p, .lede { hyphens: none; }

/* Numerals align in tables and spec lists */
.spec-table, .stat b, .team-role, .topbar { font-variant-numeric: tabular-nums; }

/* Consistent, visible focus ring for keyboard users across all controls */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Cards lift slightly on hover, signalling they are clickable */
.card { transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; }
.card:has(h3 a:hover),
.card:has(.more:hover) {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(43, 38, 28, 0.11);
  border-color: #d5c9b0;
}

/* Link affordance: underline on hover only, so body copy stays calm */
.prose a, .card p a, .faq-body a { text-decoration-color: rgba(46,67,112,0.35); }
.prose a:hover, .card p a:hover, .faq-body a:hover { text-decoration-color: currentColor; }

/* Buttons get a subtle depth cue and press state */
.btn { box-shadow: 0 1px 0 rgba(0,0,0,0.06); }
.btn-primary { box-shadow: 0 1px 2px rgba(143,63,20,0.35); }
.btn:active { transform: translateY(1px); }

/* Section rhythm: alternating bands need a crisp edge, not a fuzzy one */
.section + .section { border-top: 0; }

/* Figures and images get a consistent, restrained frame */
figure.shot { box-shadow: 0 2px 10px rgba(43,38,28,0.05); }
.card-img img, figure.shot img { transition: transform 0.35s ease; }
figure.shot:hover img { transform: scale(1.015); }

/* Blockquote opening mark, a small mark of editorial care */
.pull-quote, .prose blockquote { position: relative; }

/* Details/summary chevron animation */
.faq summary::after { transition: transform 0.18s ease; }
.faq details[open] summary::after { transform: rotate(180deg); }

/* Print: leave a clean paper trail for spec sheets and quotes */
@media print {
  .topbar, .site-header, .cta-band, .nav, .site-footer nav, .video-embed { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero-church-bg, .page-hero { background: #fff !important; }
  .page-hero h1, .hero-church h1 { color: #000 !important; text-shadow: none !important; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .card, .spec-table, figure.shot { break-inside: avoid; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, figure.shot:hover img, .team-member:hover img { transform: none !important; }
}

/* Reason columns: numbered-feeling blocks without card chrome, so the section
   reads as editorial rather than another row of boxes. */
.reason { border-top: 3px solid var(--gold); padding-top: 1rem; }
.reason h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.reason p { font-size: 0.95rem; color: var(--text-soft); }

.cta-reassure { margin-top: 1.4rem; font-size: 0.92rem; color: #a9a291; }
.cta-reassure a { color: #fff; font-weight: 700; }

/* School section bullets: tighter than default prose lists, with a gold marker
   that ties back to the section kickers. */
.school-points { list-style: none; margin-top: 0.9rem; }
.school-points li {
  position: relative;
  padding-left: 1.5rem;
  margin: 0.6rem 0;
  font-size: 0.98rem;
  color: var(--text-soft);
}
.school-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
}
.school-points strong { color: var(--text); }