/* ==========================================================================
   BLUEPRINT 1122 — Brand stylesheet
   Source of truth: BLUEPRINT1122 GRAPHIC STANDARDS RM.pdf (Jay Owen, Jul 2026)
   Fonts: Articulat CF via Adobe Fonts — replace the kit ID below when the
   Adobe Fonts web project is created. Falls back to system sans until then.
   ========================================================================== */

:root {
  /* Primary blues */
  --bp-dark:       #40627a;
  --bp-steel:      #4b7390;
  --bp-light:      #577e9b;
  /* Accent */
  --bp-red:        #7c2e21;
  /* Support */
  --bp-tan:        #ab9c8a;
  --bp-gray:       #a5b0b3;
  /* Neutral */
  --bp-paper:      #e7e4e0;
  --bp-ink:        #1f2121;
  --bp-white:      #ffffff;

  --font-sans: "articulat-cf", "Helvetica Neue", Arial, sans-serif;

  /* Headline treatment per brand guide: all-caps, 75 tracking (≈0.075em) */
  --headline-tracking: 0.075em;

  --max-width: 1200px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--bp-red);
  outline-offset: 3px;
}

body {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--bp-ink);
  background: var(--bp-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--bp-steel); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Typography ------------------------------------------------------- */

h1, h2, h3, .headline {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--headline-tracking);
  line-height: 1.15;
}

h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }

.eyebrow {
  display: inline-block;
  color: var(--bp-red);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-bottom: 1rem;
}
/* Station tick — every eyebrow opens with a short red survey tick */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--bp-red);
  margin-right: 0.6em;
  vertical-align: middle;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out) 0.2s;
}
.eyebrow.reveal::before { transform: scaleX(0); }
.eyebrow.reveal.visible::before { transform: scaleX(1); }

.lede { font-size: 1.2rem; font-weight: 300; max-width: 46em; }

/* --- Header / nav ------------------------------------------------------ */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(64, 98, 122, 0.0);
  transition: background 0.4s var(--ease-out), box-shadow 0.4s;
  padding: 22px 0;
}
.site-header.scrolled {
  background: rgba(64, 98, 122, 0.97);
  box-shadow: 0 2px 24px rgba(31, 33, 33, 0.25);
  padding: 12px 0;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header .logo img { height: 30px; width: auto; }

.nav-toggle {
  display: none;
  position: relative;
  z-index: 10;
  width: 44px;
  height: 44px;
  padding: 13px 10px;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--bp-white);
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.site-nav { display: flex; align-items: center; gap: 2.5rem; }
.site-nav a {
  color: var(--bp-white);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  position: relative;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--bp-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.site-nav a:hover::after, .site-nav a.active::after { transform: scaleX(1); }

.btn {
  display: inline-block;
  padding: 0.85em 2em;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.btn-red    { background: var(--bp-red);   color: var(--bp-white); }
.btn-white  { background: var(--bp-white); color: var(--bp-dark); }
/* Extending-arrow flourish (solid buttons only; outline keeps its fill swap) */
.btn-red::after, .btn-white::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.6em;
  transition: transform 0.25s var(--ease-out);
}
.btn-red:hover::after, .btn-white:hover::after { transform: translateX(6px); }
.btn-outline {
  background: transparent;
  color: var(--bp-white);
  box-shadow: inset 0 0 0 2px var(--bp-white);
}
.btn-outline:hover { background: var(--bp-white); color: var(--bp-dark); }

/* --- Hero -------------------------------------------------------------- */

.hero {
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  align-items: center;
  color: var(--bp-white);
  background: linear-gradient(160deg, var(--bp-dark) 0%, var(--bp-steel) 55%, var(--bp-light) 100%);
  position: relative;
  overflow: hidden;
}

/* Photo hero — aerial with steel-blue wash, per the brand guide cover */
.hero-photo {
  background: none;
}
.hero-photo .hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(35%) contrast(1.05);
  animation: heroScale 18s var(--ease-out) forwards;
}
@keyframes heroScale {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}
.hero-photo .hero-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(64, 98, 122, 0.88) 0%, rgba(75, 115, 144, 0.78) 55%, rgba(64, 98, 122, 0.75) 100%);
}
.hero .container { position: relative; z-index: 2; }

/* Creed hero — three survey stakes set in sequence, then the red mark drawn */
.hero h1 .line { display: block; font-weight: 200; }
.hero h1 .line-strong { font-weight: 700; }
.hero .hero-eyebrow { color: var(--bp-paper); }   /* red type fails on the blue wash */
.hero .reveal-delay-1 { transition-delay: 0.35s; }
.hero .reveal-delay-2 { transition-delay: 0.7s; }
.hero .reveal-delay-3 { transition-delay: 1.4s; }
.creed-mark {
  width: 0.5em;
  height: 0.5em;
  display: inline-block;
  margin-left: 0.18em;
  overflow: visible;
}
.creed-mark circle {
  fill: none;
  stroke: var(--bp-red);
  stroke-width: 3.5;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: markDraw 0.5s var(--ease-out) 1.05s forwards;
}
.creed-mark circle:nth-of-type(2) { animation-delay: 1.25s; }
.creed-mark .cdot {
  fill: var(--bp-red);
  stroke: none;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 0;
  animation: fadeIn 0.3s ease-out 1.45s forwards;
}
@keyframes markDraw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn   { to { opacity: 1; } }
.hero .tagline {
  margin-top: 1.5rem;
  font-size: 1.15rem;
  color: var(--bp-white);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.hero .cta-row { margin-top: 2.5rem; display: flex; gap: 1rem; flex-wrap: wrap; }

/* --- Sections ----------------------------------------------------------- */

section { padding: 96px 0; }
.section-paper { background: var(--bp-paper); }
.section-tan   { background: #f0ebe4; }
.section-blue  { background: var(--bp-dark); color: var(--bp-white); }
.section-blue h2 { color: var(--bp-white); }

.grid { display: grid; gap: 2rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.card {
  background: var(--bp-white);
  padding: 2.2rem;
  border-top: 3px solid var(--bp-steel);
  box-shadow: 0 6px 30px rgba(31, 33, 33, 0.06);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 16px 44px rgba(31, 33, 33, 0.12); }
.card h3 { color: var(--bp-dark); margin-bottom: 0.8rem; }
/* Card numbers join the station-eyebrow system */
.card .card-num {
  color: var(--bp-steel);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  line-height: 1;
  margin-bottom: 1rem;
}
.card .card-num::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--bp-red);
  margin-right: 0.6em;
  vertical-align: middle;
}

.stat { text-align: center; }
.stat .num {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 600;
  color: var(--bp-red);
  line-height: 1;
  font-variant-numeric: tabular-nums;   /* steady digits while counting up */
}
/* Ruler-tick rule under each numeral */
.stat .num::after {
  content: "";
  display: block;
  width: 64px;
  height: 6px;
  margin: 0.7rem auto 0;
  background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 8px);
  opacity: 0.7;
}
.stat .label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  margin-top: 0.6rem;
  color: inherit;
}

/* --- Photography -------------------------------------------------------- */

/* Full-bleed photo band with steel-blue wash (stats, CTAs) */
.photo-band {
  position: relative;
  color: var(--bp-white);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;   /* gentle parallax on desktop */
}
.photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 33, 33, 0.72), rgba(64, 98, 122, 0.82));
}
.photo-band > .container { position: relative; z-index: 1; }
.photo-band h2 { color: var(--bp-white); }
.photo-band .stat .num { color: var(--bp-paper); }   /* brand red muddies on dark photos */
.photo-band .stat .label { color: var(--bp-paper); }
@media (hover: none) {
  .photo-band { background-attachment: scroll; }  /* fixed bg janks on touch devices */
}

/* Split section: photo one side, copy the other */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.split .photo-frame { position: relative; }
.split .photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 20px 60px rgba(31, 33, 33, 0.18);
  /* Steel duotone that resolves to full color on hover/focus */
  filter: grayscale(1) sepia(0.15) hue-rotate(165deg) saturate(1.4) brightness(0.95);
  transition: filter 0.6s var(--ease-out);
}
.split .photo-frame:hover img,
.split .photo-frame:focus-within img { filter: none; }
/* Surveyor's mark — crisp inline-SVG redraw of the brand's red target
   (original PNG kept in assets/elements/, reference swapped only) */
.photo-frame::after {
  content: "";
  position: absolute;
  width: 56px; height: 56px;
  right: -24px; bottom: -24px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='21' fill='none' stroke='%237c2e21' stroke-width='2.5'/%3E%3Ccircle cx='32' cy='32' r='10' fill='none' stroke='%237c2e21' stroke-width='2.5'/%3E%3Cline x1='32' y1='2' x2='32' y2='15' stroke='%237c2e21' stroke-width='2.5'/%3E%3Cline x1='32' y1='49' x2='32' y2='62' stroke='%237c2e21' stroke-width='2.5'/%3E%3Cline x1='2' y1='32' x2='15' y2='32' stroke='%237c2e21' stroke-width='2.5'/%3E%3Cline x1='49' y1='32' x2='62' y2='32' stroke='%237c2e21' stroke-width='2.5'/%3E%3Ccircle cx='32' cy='32' r='2.5' fill='%237c2e21'/%3E%3C/svg%3E") no-repeat center / contain;
}
.photo-frame.mark-tl::after { right: auto; bottom: auto; left: -24px; top: -24px; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Dotted survey line — full-width 1px rule with a centered red cross tick
   (CSS redraw of the brand dotted-line element; PNG kept in assets/elements/) */
.divider-dotted {
  position: relative;
  height: 1px;
  margin: 0 auto;
  background: repeating-linear-gradient(90deg, var(--bp-gray) 0 6px, transparent 6px 14px);
}
.divider-dotted::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 13px; height: 13px;
  transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='8' y1='0' x2='8' y2='16' stroke='%237c2e21' stroke-width='1.5'/%3E%3Cline x1='0' y1='8' x2='16' y2='8' stroke='%237c2e21' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Card with photo header (projects) */
.card-photo { padding: 0; overflow: hidden; }
.card-photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* Steel duotone resolving to color, paired with the existing scale */
  filter: grayscale(1) sepia(0.15) hue-rotate(165deg) saturate(1.4) brightness(0.95);
  transition: transform 0.6s var(--ease-out), filter 0.6s var(--ease-out);
}
.card-photo:hover img,
.card-photo:focus-within img { transform: scale(1.04); filter: none; }
.card-photo .card-body { padding: 1.8rem 2rem 2rem; }
/* Data strip for project cards — CSS shipped ahead of real specs.
   Intended markup (add inside .card-body once real data exists):
   <div class="specs"><span>24,000 SF</span><span>2023</span><span>Jacksonville</span></div> */
.card-photo .specs {
  display: flex;
  gap: 1em;
  margin-top: 1.2em;
  padding-top: 0.9em;
  border-top: 1px dotted var(--bp-gray);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bp-steel);
}

/* --- Scroll reveal ------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }

/* --- Page hero (interior pages) ---------------------------------------- */

.page-hero {
  padding: 180px 0 80px;
  background: linear-gradient(160deg, var(--bp-dark), var(--bp-steel));
  color: var(--bp-white);
}
.page-hero.photo {
  position: relative;
  overflow: hidden;
}
.page-hero.photo .hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(35%) contrast(1.05);
}
.page-hero.photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(165deg, rgba(64, 98, 122, 0.9), rgba(64, 98, 122, 0.75));
}
.page-hero.photo .container { position: relative; z-index: 2; }
/* Variation: bottom-anchored hero (projects) — breaks the identical-hero
   monotony. The audit's "lower the wash" was measured at 3.7:1 worst-case
   over the dusk aerial, so the lightening is skipped per the contrast
   guardrail; the wash is instead kept ≥4.5:1 where the text now sits. */
.page-hero.hero-low {
  display: flex;
  align-items: flex-end;
  min-height: 56vh;
  padding: 180px 0 56px;
}
.page-hero.hero-low .container { width: 100%; }
.page-hero.photo.hero-low::before {
  background: linear-gradient(165deg, rgba(64, 98, 122, 0.9), rgba(64, 98, 122, 0.86));
}

/* --- FAQ / resources ---------------------------------------------------- */

details.faq {
  background: var(--bp-white);
  border-left: 3px solid var(--bp-tan);
  max-width: 780px;
  margin: 0 auto 1rem;
  padding: 1.2rem 1.6rem;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--bp-dark);
  list-style: none;
  position: relative;
  padding-right: 2rem;
}
details.faq summary::after {
  content: "+";
  position: absolute; right: 0; top: 0;
  color: var(--bp-red);
  font-size: 1.4rem;
  font-weight: 300;
  transition: transform 0.3s var(--ease-out);
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq p { margin-top: 0.8rem; }
details.faq .how { margin-top: 0.6rem; color: var(--bp-dark); font-weight: 500; }

/* --- Team --------------------------------------------------------------- */

.team-card { text-align: center; }
.team-card .headshot {
  width: 180px; height: 180px;
  border-radius: 50%;
  margin: 0 auto 1.2rem;
  background: linear-gradient(160deg, var(--bp-steel), var(--bp-light));
  display: flex; align-items: center; justify-content: center;
  color: var(--bp-paper);
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.team-card .headshot { overflow: hidden; }
.team-card .headshot img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.team-card .role {
  color: var(--bp-steel);
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  font-weight: 600;
  margin-top: 0.2rem;
}
/* Long bios: first paragraph visible, rest behind a Read-more toggle
   (same native <details> pattern as the FAQ accordions) */
.team-card .bio {
  margin-top: 1.2rem;
  text-align: left;
  font-size: 0.95rem;
}
.team-card .bio p + p { margin-top: 0.8rem; }
.bio-more summary {
  list-style: none;
  cursor: pointer;
  display: inline-block;
  margin-top: 0.9rem;
  color: var(--bp-red);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.bio-more summary::-webkit-details-marker { display: none; }
.bio-more summary:hover { text-decoration: underline; }
.bio-more .less { display: none; }
.bio-more[open] .more { display: none; }
.bio-more[open] .less { display: inline; }
.bio-more[open] summary { margin-top: 0; }
.bio-more p:first-of-type { margin-top: 0.8rem; }

/* --- Assessment tool ---------------------------------------------------- */

.assessment-shell {
  max-width: 720px;
  margin: 0 auto;
  background: var(--bp-white);
  box-shadow: 0 10px 50px rgba(31, 33, 33, 0.10);
  border-top: 4px solid var(--bp-steel);
  padding: 3rem;
  min-height: 420px;
}

.form-input {
  width: 100%;
  padding: 0.9rem;
  border: 1px solid var(--bp-steel);
  font-family: inherit;
  font-size: 1rem;
}
/* Surveyor's-chain progress: 11 stations on a line, red target on current */
.assessment-shell .progress { margin-bottom: 2.2rem; padding: 8px 12px 4px; }
.assessment-shell .progress svg {
  display: block;
  width: 100%;
  height: 28px;
  overflow: visible;
}
.assessment-q { animation: qfade 0.45s var(--ease-out); }
@keyframes qfade {
  from { opacity: 0; transform: translateX(var(--slide-from, 0px)); }
  to   { opacity: 1; transform: none; }
}
.assessment-q h3 { text-transform: none; letter-spacing: 0; font-size: 1.35rem; color: var(--bp-dark); margin-bottom: 1.6rem; }
.answer-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1rem 1.3rem;
  margin-bottom: 0.8rem;
  background: var(--bp-paper);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s var(--ease-out);
}
.answer-btn:hover {
  border-color: var(--bp-steel);
  background: var(--bp-white);
  transform: translateX(6px);
}
/* Answer acknowledgment beat: red stake, white ground, siblings locked */
.answer-btn:disabled { pointer-events: none; }
.answer-btn.selected {
  background: var(--bp-white);
  border-color: var(--bp-steel);
  box-shadow: inset 3px 0 0 var(--bp-red);
}
.assessment-q h3:focus { outline: none; }   /* programmatic focus target, keyboard uses :focus-visible */
.assessment-result h3 { color: var(--bp-dark); margin-bottom: 1rem; }
.assessment-result .resource-link {
  display: block;
  margin: 0.6rem 0;
  color: var(--bp-dark);
  font-weight: 500;
}
.resource-link::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.5em;
  transition: transform 0.25s var(--ease-out);
}
.resource-link:hover::after { transform: translateX(6px); }

/* Result reveal — instrument reading: target ring draws in, site plot below */
.result-head { display: flex; align-items: flex-start; gap: 1.1rem; }
.result-mark {
  flex: none;
  width: 44px;
  height: 44px;
  margin-top: 0.15rem;
  overflow: visible;
}
.result-mark .ring {
  fill: none;
  stroke: var(--bp-red);
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: markDraw 0.8s var(--ease-out) forwards;
}
.result-mark .ring.r2 { animation-delay: 0.25s; }
.result-mark .cdot {
  fill: var(--bp-red);
  opacity: 0;
  animation: fadeIn 0.3s ease-out 0.7s forwards;
}
.site-reading {
  display: block;
  width: 100%;
  height: 110px;
  margin: 1.8rem 0 0.4rem;
  overflow: visible;
}
.site-reading .lvl {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  fill: var(--bp-steel);
}
.site-reading .grid-line { stroke: var(--bp-gray); stroke-width: 1; stroke-dasharray: 1 4; }
.site-reading .seg { stroke: var(--bp-steel); stroke-width: 1; stroke-dasharray: 1 3; }
.site-reading .pt {
  fill: var(--bp-steel);
  opacity: 0;
  animation: fadeIn 0.3s ease-out forwards;
}
.assessment-back {
  background: none; border: none;
  color: var(--bp-steel);
  font-size: 0.85rem;
  cursor: pointer;
  margin-top: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* --- Article (long-form resources, e.g. outlook.html) ------------------- */

.article {
  max-width: 720px;
  margin: 0 auto;
}
.article p { margin-bottom: 1.1rem; }
.article h2 {
  color: var(--bp-dark);
  margin: 2.6rem 0 1.1rem;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
}
.article h3 {
  color: var(--bp-dark);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 1.15rem;
  margin: 1.9rem 0 0.8rem;
}
.article ul, .article ol { margin: 0 0 1.4rem 1.5rem; }
.article li { margin-bottom: 0.5rem; }
.article blockquote {
  border-left: 3px solid var(--bp-tan);
  padding: 0.4rem 0 0.4rem 1.4rem;
  margin: 1.6rem 0;
  font-style: italic;
  color: var(--bp-dark);
}
.article blockquote .attrib {
  display: block;
  margin-top: 0.6rem;
  font-style: normal;
  font-weight: 600;
  font-size: 0.9rem;
}
.article blockquote.scripture { border-left-color: var(--bp-red); }
.article blockquote p { margin-bottom: 0; }
.article blockquote p + p { margin-top: 0.8rem; }
.article .table-scroll { overflow-x: auto; margin: 1.4rem 0 2rem; }
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--bp-white);
}
.article-table th, .article-table td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--bp-paper);
}
.article-table th {
  background: var(--bp-dark);
  color: var(--bp-white);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  font-weight: 600;
}

/* --- Before / after pairs (projects.html) -------------------------------- */

.ba-card { padding: 0; overflow: hidden; }
.ba-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.ba-pair figure { position: relative; }
.ba-pair img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ba-pair figcaption {
  position: absolute;
  top: 10px; left: 10px;
  padding: 0.3em 0.8em;
  background: rgba(31, 33, 33, 0.72);
  color: var(--bp-paper);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.ba-pair figure:last-child figcaption {
  background: var(--bp-red);
  color: var(--bp-white);
}
.ba-card .card-body { padding: 1.8rem 2rem 2rem; }

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--bp-ink);
  color: var(--bp-gray);
  padding: 64px 0 32px;
  font-size: 0.9rem;
}
.site-footer .cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}
.site-footer img { height: 110px; width: auto; }
.site-footer a { color: var(--bp-paper); text-decoration: none; }
.site-footer a:hover { color: var(--bp-white); }
/* Survey-plate fine print: creed centered above a tracked-caps plate line */
.site-footer .fine {
  border-top: 1px solid #333;
  padding-top: 1.6rem;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bp-gray);            /* 4.5:1+ on --bp-ink */
}
.site-footer .fine p { margin: 0.4rem 0; }
.site-footer .fine .plate-creed {
  color: var(--bp-paper);
  font-weight: 600;
  letter-spacing: 0.18em;
  margin-bottom: 0.8rem;
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 5;
    background: rgba(64, 98, 122, 0.98);
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    transform: translateY(-100%);
    transition: transform 0.45s var(--ease-out);
  }
  .site-nav.open { transform: none; }
  .site-nav a { font-size: 1.3rem; }
  .btn { padding: 1em 2em; }
  .assessment-shell { padding: 2rem 1.4rem; }
  section { padding: 64px 0; }
}

/* --- Reduced motion ------------------------------------------------------
   Kept last in the stylesheet so its final-state overrides win the cascade
   against same-specificity rules above. Every animation added by the
   creative-elevation pass has its final state here. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-photo .hero-bg { animation: none; }
  .assessment-q { animation: none; }          /* zeroes the directional slide too */
  .card:hover, .btn:hover, .answer-btn:hover { transform: none; }
  .card-photo:hover img { transform: none; }
  .card-photo img, .split .photo-frame img { transition: none; }
  .eyebrow::before, .eyebrow.reveal::before { transform: scaleX(1); transition: none; }
  .btn-red::after, .btn-white::after, .resource-link::after { transition: none; }
  .btn-red:hover::after, .btn-white:hover::after, .resource-link:hover::after { transform: none; }
  .creed-mark circle { animation: none; stroke-dashoffset: 0; }
  .creed-mark .cdot { animation: none; opacity: 1; }
  .result-mark .ring { animation: none; stroke-dashoffset: 0; }
  .result-mark .cdot { animation: none; opacity: 1; }
  .site-reading .pt { animation: none; opacity: 1; }
}