/* ==========================================================================
   Appalachian Heritage Group — site.css

   Branded from the AHG mark: a rounded keyline plaque enclosing high-contrast
   Didone capitals over letterspaced small caps. Black on white, engraved,
   institutional — the visual language of a certificate or a nameplate.

   Palette : ink / oxford green / ivory / brass / oxblood
   Type    : Bodoni Moda (display + labels) + Libre Franklin (body)
   Device  : the keyline plaque, doubled hairlines, and the existing contour
             lines restyled as engine-turned engraving

   Token NAMES are unchanged from the previous palette on purpose — several
   hundred references across the CSS and the pages' inline styles resolve
   through them, so the rebrand is done by revaluing, not renaming.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..700;1,6..96,400..700&family=Libre+Franklin:ital,wght@0,300..700;1,300..700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400..600;1,8..60,400&family=Oswald:wght@300..600&display=swap");

:root {
  /* ---- color ---- */
  --ink:        #100f0d;   /* near-black, faintly warm — the logo's black */
  --ink-2:      #1b1a17;
  --moss:       #16241f;   /* oxford green — secondary dark field */
  --moss-2:     #21362e;
  --limestone:  #f7f5f1;   /* laid paper, lightened */
  --limestone-2:#fdfcfa;   /* the white the mark sits on */
  --lantern:    #9a7b3f;   /* antique brass — accent, used sparingly */
  --lantern-lt: #c4a468;
  --rhodo:      #6b2233;   /* oxblood — editorial mark */
  --lichen:     #b4aea1;   /* warm stone — muted text on dark, hairlines */

  --line-dark:  rgba(240,237,230,.18);
  --line-light: rgba(16,15,13,.16);

  /* the mark's rounded keyline, reused on frames, buttons and plaques */
  --radius: 5px;

  /* ---- type ---- */
  --display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --body:    "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --plat:    "Bodoni Moda", "Didot", Georgia, serif;

  --t-hero:  clamp(2.5rem, 6.2vw, 4.9rem);
  --t-h1:    clamp(2.25rem, 5.2vw, 3.9rem);
  --t-h2:    clamp(1.75rem, 3.4vw, 2.7rem);
  --t-h3:    clamp(1.2rem, 1.9vw, 1.5rem);
  --t-lead:  clamp(1.06rem, 1.55vw, 1.3rem);
  --t-body:  1rem;
  --t-plat:  .78rem;

  /* ---- space ---- */
  --gut:     clamp(1.25rem, 5vw, 4.5rem);
  --band:    clamp(4.5rem, 9vw, 8.5rem);
  --max:     1320px;
  --measure: 66ch;

  --ease: cubic-bezier(.22, .68, 0, 1);
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--limestone);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }

/* A Didone wants to be set large, tight and light. Optical sizing does the
   real work: at display sizes the hairlines thin and the contrast opens up,
   which is what makes the AHG capitals look engraved rather than merely bold. */
h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.012em;
  font-optical-sizing: auto;
}
h1 { font-variation-settings: "opsz" 72; }
h2 { font-variation-settings: "opsz" 48; }
h3, h4 { font-variation-settings: "opsz" 20; font-weight: 500; }
p { margin: 0 0 1.15em; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--lantern); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.band { padding-block: var(--band); position: relative; }
.band--tight { padding-block: clamp(3rem, 5.5vw, 5rem); }
.measure { max-width: var(--measure); }
.center { text-align: center; margin-inline: auto; }

/* --------------------------------------------------------------- labels */
/* Taken straight from the mark: APPALACHIAN HERITAGE GROUP set as widely
   letterspaced serif capitals. This replaces the mono notation the site used
   before — it is the single strongest tie between the logo and the pages. */
.plat {
  font-family: var(--plat);
  font-size: var(--t-plat);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  font-variation-settings: "opsz" 11;
  color: var(--rhodo);
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.4rem;
}
.plat::before {
  content: "";
  width: 1.6rem; height: 1px;
  background: currentColor;
  flex: none;
  opacity: .8;
}
.plat--bare::before { display: none; }
.on-dark .plat, .dark .plat { color: var(--lantern-lt); }

/* ------------------------------------------------------------- surfaces */
.dark { background: var(--ink); color: var(--limestone); }
.moss { background: var(--moss); color: var(--limestone); }
.paper { background: var(--limestone-2); }
.dark h1, .dark h2, .dark h3, .moss h1, .moss h2, .moss h3 { color: var(--limestone-2); }
.dark .sub, .moss .sub { color: var(--lichen); }
.sub { color: rgba(16,15,13,.68); font-size: var(--t-lead); line-height: 1.55; }
.hero .sub, .phead .sub, .story .sub, .ribbon .sub,
.dark .sub, .moss .sub { color: var(--lichen); }
.hero .pillar p, .phead .pillar p, .story .pillar p, .ribbon .pillar p { color: var(--lichen); }

/* .sub at --t-lead is a standfirst: one short line under a heading. Anything
   that runs to real paragraphs steps down to body size, which is what the
   portfolio, mission and management pages already do. Use this instead of
   repeating an inline font-size. */
.sub.sub--body { font-size: 1.06rem; }
.hero .plat, .phead .plat, .story .plat, .ribbon .plat { color: var(--lantern-lt); }
.story h2, .ribbon h2, .hero h2 { color: var(--limestone-2); }

/* ------------------------------------------------------------------ nav */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 90;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.15rem var(--gut);
  color: var(--limestone);
  transition: padding .35s var(--ease), background .35s var(--ease), backdrop-filter .35s;
}
.nav::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px;
  background: var(--line-dark); opacity: 0; transition: opacity .35s;
}
.nav.is-stuck {
  padding-block: .6rem;
  background: rgba(16,15,13,.9);
  backdrop-filter: saturate(140%) blur(14px);
}
.nav.is-stuck::after { opacity: 1; }

.mark { display: flex; align-items: baseline; gap: .55rem; margin-right: auto; }
.mark__glyph { width: 30px; height: 30px; flex: none; align-self: center; }
.mark__name {
  font-family: var(--display); font-size: 1.06rem; font-weight: 600;
  letter-spacing: -.01em; line-height: 1;
}
.mark__sub {
  font-family: var(--plat); font-size: .58rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--lichen);
}
@media (max-width: 640px) { .mark__sub { display: none; } }

.nav__links { display: flex; align-items: center; gap: 1.55rem; }
.nav__links a {
  font-size: .845rem; font-weight: 450; letter-spacing: .005em;
  color: rgba(226,228,223,.82);
  padding-block: .35rem; position: relative;
  transition: color .25s;
}
.nav__links a::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px;
  background: var(--lantern); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__links a:hover { color: #fff; }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a[aria-current="page"] { color: #fff; }

.nav__toggle { display: none; background: none; border: 0; padding: .5rem; }
.nav__toggle span { display: block; width: 22px; height: 1.5px; background: var(--limestone); margin: 4px 0; transition: transform .3s var(--ease), opacity .2s; }
.nav[data-open="true"] .nav__toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav[data-open="true"] .nav__toggle span:nth-child(2) { opacity: 0; }
.nav[data-open="true"] .nav__toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 1120px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(84vw, 340px);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: .35rem; padding: 5rem 2rem;
    background: var(--ink); border-left: 1px solid var(--line-dark);
    transform: translateX(101%); visibility: hidden;
    transition: transform .45s var(--ease), visibility .45s var(--ease);
  }
  .nav[data-open="true"] .nav__links { transform: none; visibility: visible; }
  .nav__links a { font-size: 1.32rem; font-family: var(--display); padding-block: .6rem; }
  .nav__links .btn { margin-top: 1.2rem; font-family: var(--body); }
}

/* ---------------------------------------------------------- scroll rail */
.rail {
  position: fixed; inset: 0 auto auto 0; height: 2px; z-index: 95;
  background: var(--lantern); width: 0;
  transition: width .1s linear;
}

/* --------------------------------------------------------------- button */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .82rem 1.35rem;
  font-size: .82rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  font-family: var(--plat);
  border: 1px solid var(--lantern); border-radius: 1px;
  background: var(--lantern); color: #14100a;
  transition: background .28s var(--ease), color .28s, transform .28s var(--ease), border-color .28s;
  will-change: transform;
}
.btn:hover { background: var(--lantern-lt); border-color: var(--lantern-lt); transform: translateY(-2px); }
.btn__arrow { transition: transform .3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--ghost { background: none; color: var(--limestone-2); border-color: rgba(233,235,231,.42); }
.btn--ghost:hover { background: rgba(233,235,231,.1); color: #fff; border-color: var(--limestone-2); }
.btn--dark { background: none; color: var(--ink); border-color: var(--line-light); }
.btn--dark:hover { background: var(--ink); color: var(--limestone-2); border-color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* text link with rule */
.tlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--plat); font-size: var(--t-plat); letter-spacing: .15em;
  text-transform: uppercase; font-weight: 500;
  padding-bottom: .3rem; border-bottom: 1px solid currentColor;
  color: var(--rhodo); transition: gap .3s var(--ease), color .25s;
}
.tlink:hover { gap: .95rem; }
.dark .tlink, .moss .tlink { color: var(--lantern-lt); }

/* ============================================================== SIGNATURE
   Contour field — layered topographic lines that draw themselves in and
   drift at different rates on scroll. Used as the site's ground plane. */
.contour { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.contour svg { position: absolute; bottom: -2%; left: -6%; width: 118%; height: 108%; }
.contour path { fill: none; stroke: var(--lichen); stroke-width: 1; vector-effect: non-scaling-stroke; }
.contour .c-fill { fill: rgba(31,58,50,.35); stroke: none; }

.draw {
  stroke-dasharray: var(--len, 2400);
  stroke-dashoffset: var(--len, 2400);
  animation: draw 2.6s var(--ease) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* firefly — the one warm point of light in the field */
.firefly { fill: var(--lantern-lt); animation: glow 4.2s ease-in-out infinite; }
@keyframes glow {
  0%, 100% { opacity: .25; r: 2.5; }
  45%      { opacity: 1;   r: 4; }
}

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; min-height: min(94svh, 880px);
  display: flex; align-items: flex-end;
  padding-block: 9rem clamp(3rem, 6vw, 5.5rem);
  background: var(--ink); color: var(--limestone);
  isolation: isolate;
}
.hero::after { /* vignette so type always holds */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(102deg, rgba(16,15,13,.95) 0%, rgba(16,15,13,.84) 42%, rgba(16,15,13,.5) 74%, rgba(16,15,13,.3) 100%),linear-gradient(180deg, rgba(16,15,13,.86) 0%, rgba(16,15,13,.58) 26%, rgba(16,15,13,.26) 52%, rgba(16,15,13,.82) 100%);
}
.hero > .wrap { position: relative; z-index: 2; }
.hero h1 {
  font-size: var(--t-hero); max-width: 27ch; color: var(--limestone-2);
  text-wrap: balance;
}
.hero h1 em { font-style: italic; color: var(--lantern-lt); font-weight: 400; }
.hero .sub { max-width: 54ch; margin-top: 1.6rem; }
.hero .btn-row { margin-top: 2.4rem; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 0 2.5rem;
  margin-top: clamp(3rem, 6vw, 4.75rem);
  padding-top: 1.4rem; border-top: 1px solid var(--line-dark);
  font-family: var(--plat); font-size: var(--t-plat);
  letter-spacing: .15em; text-transform: uppercase; color: var(--lichen);
}
.hero__meta b { color: var(--limestone-2); font-weight: 500; }

/* page header (interior pages) */
.phead {
  position: relative; background: var(--moss); color: var(--limestone);
  padding-block: clamp(8rem, 13vw, 11.5rem) clamp(3rem, 6vw, 5rem);
  isolation: isolate; overflow: hidden;
}
.phead .contour path { stroke: rgba(233,235,231,.13); }
.phead > .wrap { position: relative; z-index: 2; }
.phead h1 { font-size: var(--t-h1); max-width: 24ch; }
.phead .sub { margin-top: 1.35rem; max-width: 60ch; }

/* -------------------------------------------------------- section heads */
.shead { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.shead h2 { font-size: var(--t-h2); max-width: 22ch; text-wrap: balance; }
.shead p { margin: 0; }
@media (max-width: 840px) { .shead { grid-template-columns: 1fr; align-items: start; } }

/* ------------------------------------------------------------ portfolio */
.holds { display: grid; gap: 1px; background: var(--line-dark); }
.hold {
  position: relative; padding: clamp(1.75rem, 3.4vw, 2.9rem);
  background: var(--ink); overflow: hidden;
  transition: background .5s var(--ease);
}
.hold:hover { background: var(--ink-2); }
.hold__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.1rem; }
.hold h3 { font-size: var(--t-h3); color: var(--limestone-2); }
.hold__name { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.hold p { color: var(--lichen); margin-bottom: 0; max-width: 62ch; font-size: .965rem; }
.hold__facts { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.35rem; }
.chip {
  font-family: var(--plat); font-size: .655rem; letter-spacing: .13em; text-transform: uppercase;
  padding: .38rem .6rem; border: 1px solid var(--line-dark); color: var(--lichen); border-radius: 1px;
}
.chip--live { border-color: rgba(192,122,43,.55); color: var(--lantern-lt); }
.hold__bar { position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--lantern); transform: scaleY(0); transform-origin: top; transition: transform .55s var(--ease); }
.hold:hover .hold__bar, .hold.is-on .hold__bar { transform: none; }
@media (min-width: 900px) { .holds { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------- image bands */
/* Every .frame is a photography slot. Swap the background-image and keep
   the aspect ratio. Filenames are listed in README.md. */
.frame {
  position: relative; overflow: hidden; background: var(--moss);
  isolation: isolate;
}
.frame::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 22% 8%, rgba(192,122,43,.32), transparent 58%),
    radial-gradient(90% 80% at 88% 92%, rgba(122,74,94,.42), transparent 60%),
    linear-gradient(155deg, var(--moss) 0%, var(--ink) 100%);
}
.frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.frame__slot {
  position: absolute; inset: auto .9rem .9rem; z-index: 3;
  font-family: var(--plat); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(233,235,231,.5);
}
.frame--tall { aspect-ratio: 3 / 4; }
.frame--wide { aspect-ratio: 16 / 9; }
.frame--sq   { aspect-ratio: 1 / 1; }

/* parallax inner layer */
.par { position: absolute; inset: -12% 0; z-index: 1; will-change: transform; }

/* full-bleed storytelling band */
.story { position: relative; min-height: clamp(420px, 62vw, 640px); display: grid; align-items: center; color: var(--limestone); overflow: hidden; }
.story__bg { position: absolute; inset: -14% 0; z-index: 0; }
.story__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,15,13,.94) 0%, rgba(16,15,13,.6) 55%, rgba(16,15,13,.35) 100%); }
.story > .wrap { position: relative; z-index: 2; padding-block: clamp(3.5rem, 7vw, 6rem); }
.story h2 { font-size: var(--t-h2); max-width: 26ch; color: var(--limestone-2); }
.story .sub { max-width: 50ch; margin-top: 1.2rem; }

/* split: text + image */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 5vw, 5rem); align-items: center; }
.split--narrow { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 860px) { .split, .split--narrow { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ services */
.svc { display: grid; gap: 1px; background: var(--line-light); }
@media (min-width: 700px) { .svc { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .svc { grid-template-columns: repeat(3, 1fr); } }
.svc__card { background: var(--limestone-2); padding: clamp(1.6rem, 2.6vw, 2.35rem); position: relative; transition: background .4s; }
.svc__card:hover { background: #fff; }
.svc__code {
  font-family: var(--plat); font-size: .68rem; letter-spacing: .18em; font-weight: 500;
  color: var(--rhodo); display: block; margin-bottom: .9rem;
}
.svc__card h3 { font-size: 1.28rem; margin-bottom: .9rem; }
.svc__card li {
  font-size: .935rem; padding-left: 1.1rem; position: relative; margin-bottom: .5rem;
  color: rgba(16,15,13,.74);
}
.svc__card li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 5px; height: 1px; background: var(--lantern);
}

/* ------------------------------------------------------------ KPI stats */
.kpis { display: grid; gap: 1px; background: var(--line-dark); }
@media (min-width: 620px) { .kpis { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: var(--ink); padding: clamp(1.5rem, 2.6vw, 2.25rem); }
.kpi__n {
  font-family: var(--display); font-size: clamp(2.4rem, 4.4vw, 3.5rem);
  line-height: 1; color: var(--lantern-lt); letter-spacing: -.03em;
  display: flex; align-items: baseline; gap: .1rem;
}
.kpi__n small { font-size: .42em; letter-spacing: 0; }
.kpi__l { margin: .85rem 0 0; font-size: .9rem; color: var(--lichen); }
.moss .kpi { background: var(--moss); }
.paper .kpis { background: var(--line-light); }
.paper .kpi { background: var(--limestone-2); }
.paper .kpi__n { color: var(--moss); }
.paper .kpi__l { color: rgba(16,15,13,.66); }

/* --------------------------------------------------------- pillar rows */
.pillars { border-top: 1px solid var(--line-light); }
.dark .pillars, .moss .pillars { border-color: var(--line-dark); }
.pillar {
  display: grid; grid-template-columns: 7rem minmax(0,1fr) minmax(0,1.35fr);
  gap: clamp(.75rem, 3vw, 2.5rem); align-items: start;
  padding-block: clamp(1.5rem, 2.6vw, 2.2rem);
  border-bottom: 1px solid var(--line-light);
  transition: padding-left .45s var(--ease);
}
.dark .pillar, .moss .pillar { border-color: var(--line-dark); }
.pillar:hover { padding-left: .6rem; }
.pillar__k { font-family: var(--plat); font-size: var(--t-plat); letter-spacing: .12em; color: var(--rhodo); padding-top: .45em;
  /* word labels are longer than the OPS/REV codes this column was sized for;
     wrapping keeps them inside the cell instead of running into the heading */
  white-space: normal; overflow-wrap: break-word; }
.dark .pillar__k, .moss .pillar__k { color: var(--lantern-lt); }
.pillar h3 { font-size: 1.32rem; }
.pillar p { margin: 0; font-size: .96rem; color: rgba(16,15,13,.72); }
.dark .pillar p, .moss .pillar p { color: var(--lichen); }
@media (max-width: 760px) { .pillar { grid-template-columns: 1fr; gap: .5rem; } }

/* ------------------------------------------------------------ case note */
.case { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(1.75rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 900px) { .case { grid-template-columns: 1fr; } }
.quote {
  font-family: var(--display); font-size: clamp(1.35rem, 2.5vw, 1.95rem);
  line-height: 1.35; letter-spacing: -.015em; margin: 0;
  text-wrap: pretty;
}
.quote--dark { color: var(--limestone-2); }
.byline { display: flex; align-items: center; gap: .85rem; margin-top: 1.75rem; font-family: var(--plat); font-size: var(--t-plat); letter-spacing: .14em; text-transform: uppercase; color: var(--lichen); }
.byline::before { content: ""; width: 2rem; height: 1px; background: var(--lantern); }

/* ------------------------------------------------------------- articles */
.posts { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 780px) { .posts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1120px) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line-light); padding-top: 1.35rem;
  transition: border-color .4s;
}
.post:hover { border-color: var(--lantern); }
.post__meta { font-family: var(--plat); font-size: .655rem; letter-spacing: .15em; text-transform: uppercase; color: var(--rhodo); display: flex; gap: .8rem; }
.post h3 { font-size: 1.34rem; margin: .95rem 0 .7rem; transition: color .3s; }
.post:hover h3 { color: var(--moss); }
.post p { font-size: .945rem; color: rgba(16,15,13,.7); }
.post .tlink { margin-top: auto; align-self: flex-start; }
.post__frame { margin-bottom: 1.25rem; }

.post--feature { grid-column: 1 / -1; }
@media (min-width: 780px) {
  .post--feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
  .post--feature .post__frame { margin: 0; }
  .post--feature h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
}

/* article body */
.article { max-width: 44rem; margin-inline: auto; }
.article > * { max-width: 68ch; }
.article h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.6rem 0 .9rem; }
.article h3 { font-size: 1.2rem; margin: 2rem 0 .6rem; }
.article p, .article li { font-size: 1.055rem; line-height: 1.72; color: rgba(16,15,13,.84); }
.article ul { margin: 0 0 1.35em; }
.article li { padding-left: 1.35rem; position: relative; margin-bottom: .55rem; }
.article li::before { content: ""; position: absolute; left: 0; top: .78em; width: 7px; height: 1px; background: var(--lantern); }
.article blockquote {
  margin: 2.2rem 0; padding: 0 0 0 1.5rem; border-left: 2px solid var(--rhodo);
  font-family: var(--display); font-size: 1.28rem; line-height: 1.42; color: var(--ink);
}
.article strong { font-weight: 600; }
.article a:not(.btn):not(.tlink) { color: var(--moss); text-decoration: underline; text-decoration-color: var(--lantern); text-underline-offset: 3px; }
.artmeta { display: flex; flex-wrap: wrap; gap: 1.3rem; font-family: var(--plat); font-size: var(--t-plat); letter-spacing: .14em; text-transform: uppercase; color: var(--lichen); margin-top: 1.6rem; }

/* ----------------------------------------------------------------- form */
.form-grid { display: grid; gap: 1.15rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field label { font-family: var(--plat); font-size: .655rem; letter-spacing: .15em; text-transform: uppercase; color: var(--lichen); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .96rem; color: var(--limestone-2);
  background: rgba(233,235,231,.05); border: 1px solid var(--line-dark);
  border-radius: 1px; padding: .78rem .9rem; width: 100%;
  transition: border-color .25s, background .25s;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--lantern); background: rgba(233,235,231,.09); outline: none; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--lichen) 50%), linear-gradient(135deg, var(--lichen) 50%, transparent 50%); background-position: calc(100% - 18px) 1.35rem, calc(100% - 13px) 1.35rem; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--ink); }
.form-note { font-size: .82rem; color: var(--lichen); margin: 1rem 0 0; }
.form-ok {
  display: none; border: 1px solid var(--lantern); border-left-width: 3px;
  padding: 1.1rem 1.25rem; margin-top: 1.25rem; color: var(--limestone-2);
  background: rgba(192,122,43,.09);
}
.form-ok.is-on { display: block; animation: fade .5s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }

/* --------------------------------------------------------------- footer */
.foot { background: var(--ink); color: var(--lichen); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.foot__top { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 900px) { .foot__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot__top { grid-template-columns: 1fr; } }
.foot h4 { font-family: var(--plat); font-size: .655rem; letter-spacing: .17em; text-transform: uppercase; color: var(--limestone-2); margin-bottom: 1.1rem; font-weight: 500; }
.foot a { font-size: .915rem; transition: color .25s; }
.foot a:hover { color: var(--lantern-lt); }
.foot li { margin-bottom: .5rem; }
.foot__blurb { font-size: .93rem; max-width: 34ch; }
.foot__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.4rem; border-top: 1px solid var(--line-dark);
  font-family: var(--plat); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
}
.social { display: flex; gap: .6rem; }
.social a {
  width: 38px; height: 38px; border: 1px solid var(--line-dark); border-radius: 1px;
  display: grid; place-items: center; transition: border-color .3s, background .3s, transform .3s var(--ease);
}
.social a:hover { border-color: var(--lantern); background: rgba(192,122,43,.12); transform: translateY(-2px); }
.social svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------------------------------------------------------- cta ribbon */
.ribbon { position: relative; overflow: hidden; background: var(--moss); color: var(--limestone); }
.ribbon .contour path { stroke: rgba(233,235,231,.11); }
.ribbon > .wrap { position: relative; z-index: 2; }
.ribbon h2 { font-size: var(--t-h2); max-width: 24ch; }

/* ------------------------------------------------------------- reveals */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.rv-1 { transition-delay: .07s; } .rv-2 { transition-delay: .14s; }
.rv-3 { transition-delay: .21s; } .rv-4 { transition-delay: .28s; }
.rv-5 { transition-delay: .35s; } .rv-6 { transition-delay: .42s; }

/* mask-style line reveal for headlines */
.line-rv { display: block; overflow: hidden; }
.line-rv > span { display: block; transform: translateY(105%); transition: transform 1s var(--ease); }
.is-in .line-rv > span, .line-rv.is-in > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rv { opacity: 1; transform: none; }
  .line-rv > span { transform: none; }
  .draw { stroke-dashoffset: 0; }
  .par, .story__bg { transform: none !important; }
}

/* --------------------------------------------------------------- utils */
.hr { height: 1px; background: var(--line-light); border: 0; margin: 0; }
.dark .hr, .moss .dark .hr { background: var(--line-dark); }
.skip {
  position: absolute; left: -9999px; z-index: 200;
  background: var(--lantern); color: #14100a; padding: .7rem 1rem;
  font-family: var(--plat); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------- contour depth grading */
/* Lower lines read as nearer ground, upper lines as distant ridges. */
.contour path:nth-of-type(1) { stroke-opacity: .70; }
.contour path:nth-of-type(2) { stroke-opacity: .60; }
.contour path:nth-of-type(3) { stroke-opacity: .50; }
.contour path:nth-of-type(4) { stroke-opacity: .42; }
.contour path:nth-of-type(5) { stroke-opacity: .34; }
.contour path:nth-of-type(6) { stroke-opacity: .26; }
.contour path:nth-of-type(7) { stroke-opacity: .18; }


/* ------------------------------------------------ article page-head sizing */
.phead .artmeta { margin-top: 1.9rem; padding-top: 1.3rem; border-top: 1px solid var(--line-dark); }

/* image slot label hides once a real photo is dropped in */
.frame > img ~ .frame__slot { display: none; }

/* wordmark: stacked lines, sub-line drops away on small screens */
.mark__name, .mark__sub { display: block; }
@media (max-width: 640px) { .mark__sub { display: none; } }

/* hero contour reads as the primary visual, so give it more presence */
.hero .contour path { stroke: #c6d8cf; stroke-width: 1.15; }

/* optional hero photography, sitting beneath the contour overlay */


/* rows that are linked to a marker on the section above */
.pillar[data-hold] { position: relative; }
.pillar[data-hold]::before {
  content: ""; position: absolute; left: -.85rem; top: 1.15rem; bottom: 1.15rem;
  width: 2px; background: var(--lantern);
  transform: scaleY(0); transform-origin: top;
  transition: transform .55s var(--ease);
}
.pillar[data-hold]:hover::before, .pillar[data-hold].is-on::before { transform: none; }

/* the forward-looking row reads as pipeline, not as a property */
.pillar--next { opacity: .78; }
.pillar--next .pillar__k { color: var(--lichen); }
.pillar--next h3 { font-style: italic; }


/* A light service card can sit inside a dark band. The dark-surface heading
   rule would render its title white on near-white, so restore ink here. */
.dark .svc__card h3, .moss .svc__card h3 { color: var(--ink); }
.dark .svc__card li, .moss .svc__card li { color: rgba(16,15,13,.74); }

/* The longer tagline makes the hero taller; reclaim space on small screens
   so the stat line still lands above the fold. */
@media (max-width: 640px) {
  .hero { padding-block: 6rem 2rem; min-height: 0; }
  .hero .sub { margin-top: 1.1rem; }
  .hero .btn-row { margin-top: 1.6rem; }
  .hero__meta { margin-top: 1.75rem; padding-top: 1rem; gap: 0 1.5rem; }
}


/* ============================================== SIGNATURE: STATE MAP
   Replaces the old elevation cross-section. A simplified outline of West
   Virginia with a pin per project, paired to a list beside it: hover or
   focus either side and the other responds. Designed to be extended —
   see the projection note in the markup for adding new pins. */
.locmap { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .locmap { grid-template-columns: 1.02fr .98fr; } }

.locmap__fig { margin: 0; position: relative; }
.locmap__svg { width: 100%; height: auto; overflow: visible; display: block; }

.state {
  fill: rgba(43,79,67,.52);
  stroke: rgba(233,235,231,.42);
  stroke-width: 1.5; vector-effect: non-scaling-stroke;
  transition: fill .45s var(--ease), stroke .45s var(--ease);
}
.state-lines { fill: none; stroke: rgba(233,235,231,.13); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Out&West has no single location, so highlighting it lights the whole state */
.locmap.is-statewide .state { fill: rgba(192,122,43,.14); stroke: var(--lantern); }

.pin { cursor: pointer; }
.pin__hit { fill: transparent; }
.pin__ring {
  fill: none; stroke: var(--lantern); stroke-width: 2; vector-effect: non-scaling-stroke;
  opacity: .4; transition: opacity .35s var(--ease);
}
.pin__dot {
  fill: var(--ink); stroke: var(--lantern); stroke-width: 2.5; vector-effect: non-scaling-stroke;
  transition: fill .35s var(--ease);
}
.pin.is-on .pin__dot { fill: var(--lantern); }
.pin.is-on .pin__ring { opacity: 1; }
.pin:focus-visible { outline: none; }
.pin:focus-visible .pin__ring { opacity: 1; stroke-width: 3; }
.pin__label {
  /* Set in the display serif, matching how the same property names appear in
     the list beside the map. Sized generously because this is SVG user units
     scaled down on screen, and a Didone gets fragile small. */
  font-family: var(--display); font-size: 30px; font-weight: 550;
  letter-spacing: .005em; text-transform: none;
  fill: var(--limestone-2); opacity: 0; transition: opacity .3s var(--ease);
  paint-order: stroke; stroke: var(--ink); stroke-width: 7px; stroke-linejoin: round;
}
.pin.is-on .pin__label, .pin:focus-visible .pin__label { opacity: 1; }

.locmap__cap {
  display: flex; flex-wrap: wrap; gap: .35rem 1.75rem; justify-content: space-between;
  margin: 1.1rem 0 0;
  font-family: var(--plat); font-size: .6rem; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(169,184,178,.6);
}
.locmap__cap b { color: var(--lantern-lt); font-weight: 500; }

/* the paired list */
.places { border-top: 1px solid var(--line-dark); }
.place { border-bottom: 1px solid var(--line-dark); margin: 0; }
.place__btn {
  display: grid; grid-template-columns: 84px minmax(0,1fr) auto;
  gap: 1.1rem; align-items: center;
  padding: .95rem .25rem; width: 100%;
  transition: padding-left .45s var(--ease), background .35s;
}
.place__btn:hover, .place.is-on .place__btn { padding-left: .75rem; }
.place__thumb {
  position: relative; width: 84px; aspect-ratio: 1; overflow: hidden;
  background: var(--ink-2); flex: none;
}
.place__thumb .frame { position: absolute; inset: 0; display: block; }
.place__thumb .frame__slot { display: none; }
.place__thumb::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  border: 1px solid transparent; transition: border-color .35s var(--ease);
}
.place.is-on .place__thumb::after, .place__btn:hover .place__thumb::after { border-color: var(--lantern); }
.place__thumb--none { background: var(--ink); display: grid; place-items: center; }
.place__thumb--none::before {
  content: ""; position: absolute; inset: .3rem; border: 1px dashed var(--line-dark);
}
.place__name {
  display: block; font-family: var(--display); font-size: 1.06rem; font-weight: 500;
  line-height: 1.2; letter-spacing: -.01em; color: var(--limestone-2);
}
.place__meta {
  display: block; margin-top: .3rem;
  font-family: var(--plat); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--lichen);
}
.place__go {
  font-family: var(--plat); font-size: .7rem; color: var(--lantern-lt);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.place.is-on .place__go, .place__btn:hover .place__go { opacity: 1; transform: none; }
.place--next .place__name { font-style: italic; opacity: .8; }

@media (max-width: 520px) {
  .place__btn { grid-template-columns: 64px minmax(0,1fr) auto; gap: .85rem; }
  .place__thumb { width: 64px; }
  .place__name { font-size: .97rem; }
}


/* ============================================== MARKET BAND (homepage)
   Two-column editorial split over the photo, with the reasons to visit
   set as a full-width index rather than a stack of loose chips. */
.story--market .story__bg::after {
  background: linear-gradient(180deg, rgba(16,15,13,.9) 0%, rgba(16,15,13,.78) 55%, rgba(16,15,13,.93) 100%);
}
.market__grid {
  display: grid; gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start;
  margin-top: .5rem;
}
@media (min-width: 900px) { .market__grid { grid-template-columns: 1.02fr 1fr; } }
.market__grid h2 { max-width: 23ch; }
.market__grid > div:first-child { align-self: start; }
.market__grid .sub { max-width: 62ch; }
.market__grid .sub:last-child { margin-bottom: 0; }


/* ==========================================================================
   BRAND LAYER — everything below derives from the AHG mark
   Appended last so it wins on equal specificity. Nothing above was renamed.
   ========================================================================== */

/* ---------------------------------------------------------------- labels
   Small serif capitals need more room and more weight than the mono they
   replaced, or the Didone hairlines disappear at these sizes. */
.chip, .pillar__k, .svc__code, .post__meta, .artmeta,
.byline, .foot h4, .foot__bottom, .field label, .form-note,
.reel__item, .place__meta, .locmap__cap, .mark__sub, .btn {
  font-family: var(--plat);
  font-feature-settings: "case" 1;
}
.chip, .post__meta, .foot h4, .field label, .frame__slot {
  font-size: .72rem;
  letter-spacing: .19em;
  font-weight: 500;
}
.pillar__k, .svc__code { font-size: .76rem; letter-spacing: .2em; font-weight: 600; }
.foot__bottom, .locmap__cap { font-size: .7rem; letter-spacing: .18em; }
.place__meta { font-size: .705rem; letter-spacing: .17em; }
.byline, .artmeta { font-size: .74rem; letter-spacing: .19em; }

/* ------------------------------------------------------ keyline plaque
   The mark is capitals inside a rounded keyline. That frame becomes the
   site's one repeated shape: buttons, image frames, cards, form fields. */
.btn {
  border-radius: var(--radius);
  letter-spacing: .18em;
  font-weight: 500;
  font-size: .78rem;
  padding: .88rem 1.5rem;
}
.frame, .place__thumb, .field input, .field select, .field textarea,
.form-ok, .svc__card, .kpi { border-radius: var(--radius); }
.frame { overflow: hidden; }

/* a true plaque: doubled keyline, as engraved on the mark */
.plaque {
  position: relative;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.plaque::before {
  content: ""; position: absolute; inset: 5px;
  border: 1px solid var(--line-light); border-radius: calc(var(--radius) - 2px);
  pointer-events: none; opacity: .55;
}
.dark .plaque, .moss .plaque, .on-dark .plaque { border-color: var(--line-dark); }
.dark .plaque::before, .moss .plaque::before, .on-dark .plaque::before { border-color: var(--line-dark); }

/* ------------------------------------------------------- engraved rules
   Classical typography doubles its rules. Used under section heads. */
.rule-2 { border: 0; border-top: 1px solid var(--line-light); position: relative; height: 4px; }
.rule-2::after {
  content: ""; position: absolute; inset: 3px 0 auto; height: 1px;
  background: var(--line-light); opacity: .5;
}

/* ------------------------------------------------- engine-turned lines
   The contour SVGs are kept but restyled. At hairline weight in brass they
   read as the guilloche engraving on a certificate rather than as terrain. */
.contour path { stroke: var(--lantern-lt); stroke-width: .75; }
.contour path:nth-of-type(1) { stroke-opacity: .30; }
.contour path:nth-of-type(2) { stroke-opacity: .25; }
.contour path:nth-of-type(3) { stroke-opacity: .21; }
.contour path:nth-of-type(4) { stroke-opacity: .17; }
.contour path:nth-of-type(5) { stroke-opacity: .13; }
.contour path:nth-of-type(6) { stroke-opacity: .10; }
.contour path:nth-of-type(7) { stroke-opacity: .07; }
.contour .c-fill { fill: rgba(22,36,31,.4); stroke: none; }
.hero .contour path { stroke: var(--lantern-lt); stroke-width: .8; }
.phead .contour path { stroke: var(--lantern-lt); stroke-opacity: .16; }
.ribbon .contour path { stroke: var(--lantern-lt); stroke-opacity: .13; }
.firefly { fill: var(--lantern-lt); }

/* the state map, restyled to match */
.locmap__svg .state { fill: rgba(22,36,31,.5); stroke: var(--line-dark); }
.locmap__svg .state-lines path { stroke: var(--lantern-lt); stroke-opacity: .14; }
.pin__ring { stroke: var(--lantern-lt); }
.pin__dot { fill: var(--lantern); }

/* ------------------------------------------------------------- wordmark
   The header mark is rebuilt in CSS alone, so the rebrand touches no HTML.

   The old inline glyph (a square with a mountain in it) is hidden, and the
   plaque is drawn as a flex item on .mark::before — a rounded keyline box
   holding AHG, followed by the existing name text. That is the logo's own
   structure: mark, then APPALACHIAN HERITAGE GROUP beside it.

   It uses currentColor, so it is ivory on the dark header and ink anywhere
   else, with no second asset and no inverted copy. */
.mark__glyph { display: none; }
.mark::before {
  content: "AHG";
  flex: none;
  align-self: center;
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: "opsz" 18;
  font-size: .98rem;
  line-height: 1;
  letter-spacing: .07em;
  padding: .36rem .52rem .32rem;
  border: 1.6px solid currentColor;
  border-radius: 4px;
  color: inherit;
}
.mark__name {
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: "opsz" 16;
  letter-spacing: .015em;
}
.mark__sub { font-size: .6rem; letter-spacing: .2em; }

/* the footer repeats the name without the .mark wrapper, so it gets the
   typography but not the plaque — correct, it is a signature not a logo */
.foot .mark__name { font-size: 1.12rem; letter-spacing: .02em; }

/* -------------------------------------------------------------- accents */
.tlink { letter-spacing: .18em; font-weight: 500; }
.quote { font-variation-settings: "opsz" 40; font-weight: 400; }
.kpi__n { font-variation-settings: "opsz" 60; font-weight: 400; letter-spacing: -.02em; }
.hero h1 em, .phead h1 em { font-style: italic; color: var(--lantern-lt); }

/* Libre Franklin sets a touch large next to a Didone; hold body copy back
   so the display type keeps the hierarchy. */
.sub { font-weight: 350; }
.hero .sub, .story .sub, .phead .sub { font-weight: 400; }
.sub.sub--body { font-weight: 400; }
.pillar p, .svc__card p, .svc__card li, .post p { font-weight: 400; }

/* ---------------------------------------------------------------- focus */
:focus-visible { outline: 2px solid var(--lantern); outline-offset: 3px; border-radius: var(--radius); }

/* ------------------------------------------------- corrections from review
   Found by rendering the rebrand and measuring, not by eye. */

/* The nav CTA inherited .nav__links a's ivory, which against the darker brass
   measured 3.11:1 — a fail. `.nav__links a` outspecifies `.btn`, so it needs
   naming explicitly. Ink on brass measures 4.81:1. */
.btn { color: var(--ink); }
.nav__links a.btn { color: var(--ink); }
.btn--ghost, .nav__links a.btn--ghost { color: var(--limestone-2); }
.btn--dark { color: var(--ink); }
.btn--dark:hover { color: var(--limestone-2); }

/* Heading and body in a pillar row now sit at similar optical weight, where
   the old pairing had an obvious size break. They need the gap put back. */
.pillar h3 { margin-bottom: .32rem; }
.pillar > div > h3 { margin-bottom: .32rem; }

/* ==========================================================================
   TYPE HIERARCHY — as specified
   ==========================================================================

     H1          Bodoni Moda Medium (500)
     H2          Bodoni Moda Regular (400)
     H3          Libre Franklin Semibold (600)
     Body        Libre Franklin Regular (400)
     Navigation  Libre Franklin Medium (500)
     Buttons     Libre Franklin Semibold (600), letterspaced
     Captions
     and labels  Libre Franklin Medium (500), uppercase

   This moves labels, captions and buttons from the Didone to the sans. Worth
   noting it also fixes a real weakness: Bodoni's hairlines get fragile below
   about 12px, which is exactly the size labels run at. A medium-weight sans
   holds up there.

   Bodoni is now reserved for H1, H2, the wordmark and the large figures —
   which is where a Didone earns its keep. Last layer, so it wins.
   ========================================================================== */

:root {
  /* labels, captions and buttons are sans now */
  --plat: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* optional editorial serif, for long-form reading */
  --serif-editorial: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --t-plat: .72rem;
}

/* ------------------------------------------------------------- headings */
h1 { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 72; letter-spacing: -.015em; }
h2 { font-family: var(--display); font-weight: 400; font-variation-settings: "opsz" 48; letter-spacing: -.012em; }
h3, h4 {
  font-family: var(--body);
  font-weight: 600;
  font-variation-settings: normal;
  letter-spacing: -.002em;
  line-height: 1.25;
}

/* ----------------------------------------------------------------- body */
body, p, li { font-family: var(--body); }
body { font-weight: 400; }
.sub { font-weight: 400; }          /* Regular, per the hierarchy */
.sub.sub--body { font-weight: 400; }

/* ----------------------------------------------------------- navigation */
.nav__links a { font-family: var(--body); font-weight: 500; letter-spacing: .005em; }
.mark__sub { font-family: var(--body); font-weight: 500; letter-spacing: .16em; }

/* -------------------------------------------------------------- buttons */
.btn {
  font-family: var(--body);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .1em;      /* slightly letterspaced, not the wide serif tracking */
  text-transform: uppercase;
}
/* `.nav__links a` outspecifies `.btn`, so the header CTA needs naming
   explicitly or it drops to the navigation's medium weight. Same trap that
   caught the button colour earlier. */
.nav__links a.btn { font-family: var(--body); font-weight: 600; letter-spacing: .1em; }

/* ------------------------------------------------- captions and labels */
.plat {
  font-family: var(--plat);
  font-weight: 500;
  font-size: var(--t-plat);
  letter-spacing: .17em;
  font-variation-settings: normal;
}
.chip, .pillar__k, .svc__code, .post__meta, .artmeta,
.byline, .foot h4, .foot__bottom, .field label, .form-note,
.reel__item, .place__meta, .locmap__cap, .frame__slot, .tlink {
  font-family: var(--plat);
  font-weight: 500;
  text-transform: uppercase;
  font-variation-settings: normal;
}
.chip, .post__meta, .foot h4, .field label, .frame__slot { font-size: .68rem; letter-spacing: .15em; }
.pillar__k, .svc__code { font-size: .7rem;  letter-spacing: .16em; font-weight: 600; }
.foot__bottom, .locmap__cap { font-size: .655rem; letter-spacing: .14em; }
.place__meta { font-size: .66rem; letter-spacing: .13em; }
.byline, .artmeta { font-size: .68rem; letter-spacing: .15em; }
.tlink { font-size: .7rem; letter-spacing: .13em; font-weight: 600; }
.form-note { text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 400; }

/* --------------------------------------------- Bodoni, where it belongs */
.mark::before, .mark__name { font-family: var(--display); font-weight: 500; }
.kpi__n { font-family: var(--display); font-weight: 400; }
.quote { font-family: var(--display); font-weight: 400; }
.hero h1 em, .phead h1 em { font-style: italic; font-weight: 400; }
.place__name { font-family: var(--display); font-weight: 500; }

/* ------------------------------------------- optional editorial serif
   Source Serif 4 is used where there is real reading to do — the article
   bodies. It is a text face built for continuous prose, which is exactly
   what a Didone is not, and it keeps long pieces comfortable without
   putting a third voice on the marketing pages. */
.article p, .article li, .article blockquote {
  font-family: var(--serif-editorial);
  font-optical-sizing: auto;
}
.article p, .article li { font-size: 1.075rem; line-height: 1.75; font-weight: 400; }
.article blockquote { font-weight: 400; font-style: italic; }
.article h2 { font-family: var(--display); font-weight: 400; }
.article h3 { font-family: var(--body); font-weight: 600; }

/* ==========================================================================
   HERO — light, no photograph, engraved
   ==========================================================================

   The photograph is gone. What carries the banner instead is the line work
   that was already there: the contour paths draw themselves in on load via
   stroke-dashoffset, drift on scroll, and now drift slowly on their own at
   rest. On ivory in brass they read as the engine-turned guilloche on a share
   certificate — which is the same place the mark comes from, and it needs no
   asset, no bytes and no photographer.

   Three layers of movement, all opting out under prefers-reduced-motion:
     1. the lines draw in, staggered, on load
     2. they drift horizontally on a very slow loop, so the plate is never
        quite static
     3. they shift with scroll at a shallower rate than the page
   ========================================================================== */

.hero {
  background:
    radial-gradient(120% 80% at 78% 18%, rgba(154,123,63,.055), transparent 62%),
    linear-gradient(176deg, var(--limestone-2) 0%, #f5f2ec 68%, #efebe3 100%);
  color: var(--ink);
  min-height: min(88svh, 800px);
}

/* the old dark scrim becomes a soft light wash, keeping the top clear for the
   header and settling the type at the bottom */
.hero::after {
  background:
    linear-gradient(180deg, rgba(253,252,250,.72) 0%, rgba(253,252,250,0) 26%,
                            rgba(253,252,250,0) 72%, rgba(247,245,241,.55) 100%);
}

/* --- type on ivory --- */
.hero h1 { color: var(--ink); }
.hero h1 em { color: var(--lantern); font-style: italic; }
.hero .sub { color: rgba(16,15,13,.74); }
.hero .plat { color: var(--lantern); }
.hero .plat::before { background: var(--lantern); opacity: .7; }

/* classical doubled rule above the figures, in place of the single hairline */
.hero__meta {
  color: rgba(16,15,13,.62);
  border-top: 1px solid var(--line-light);
  position: relative;
}
.hero__meta::before {
  content: ""; position: absolute; inset: -4px 0 auto;
  height: 1px; background: var(--line-light); opacity: .55;
}
.hero__meta b { color: var(--ink); }

/* --- the engraving --- */
.hero .contour path { stroke: var(--lantern); stroke-width: .7; }
.hero .contour path:nth-of-type(1) { stroke-opacity: .26; }
.hero .contour path:nth-of-type(2) { stroke-opacity: .22; }
.hero .contour path:nth-of-type(3) { stroke-opacity: .19; }
.hero .contour path:nth-of-type(4) { stroke-opacity: .16; }
.hero .contour path:nth-of-type(5) { stroke-opacity: .13; }
.hero .contour path:nth-of-type(6) { stroke-opacity: .10; }
.hero .contour path:nth-of-type(7) { stroke-opacity: .07; }
.hero .contour .c-fill { fill: rgba(154,123,63,.045); stroke: none; }
.hero .firefly { fill: var(--lantern); }

/* Layer 2 of the movement. Applied to the <svg>, not to the .par wrapper the
   parallax script writes inline transforms on — otherwise the two fight. */
.hero .contour svg { animation: hero-drift 54s ease-in-out infinite alternate; }
@keyframes hero-drift {
  from { transform: translate3d(-1.4%, 0, 0) scale(1.01); }
  to   { transform: translate3d(1.4%, -1%, 0) scale(1.04); }
}

/* ==========================================================================
   HEADING LEGIBILITY
   ==========================================================================

   The headings were hard to read, and it was self-inflicted. Three faults
   stacked:

   1. `opsz` was pinned to the display end of the axis — 72 on H1, 48 on H2.
      Bodoni Moda's optical-size axis controls stroke contrast: high values
      thin the hairlines to their finest, which is right for a 120px magazine
      masthead on paper and wrong for web headings. Pulling opsz down to the
      low twenties thickens every thin stroke while keeping the Didone
      character intact. This is the fix that does most of the work.

   2. Negative tracking. A Didone at size needs air, not less of it —
      "Hospitality" was closing up around the `li` pair.

   3. Line-height 1.08. Too tight for a face with these ascenders; the
      apostrophe in "Virginia's" was running into the line above.

   Light text on a dark ground also erodes optically — the same weight looks
   thinner in white-on-black than black-on-white. So headings on dark surfaces
   take one step more weight. That is compensation, not a different style.
   ========================================================================== */

h1 {
  font-variation-settings: "opsz" 22;
  font-weight: 500;
  letter-spacing: .002em;
  line-height: 1.14;
}
h2 {
  font-variation-settings: "opsz" 16;
  font-weight: 480;
  letter-spacing: .005em;
  line-height: 1.18;
}

/* optical compensation for light-on-dark */
.dark h1, .moss h1, .on-dark h1, .hero h1, .phead h1, .story h1, .ribbon h1 { font-weight: 560; }
.dark h2, .moss h2, .on-dark h2, .story h2, .ribbon h2 { font-weight: 520; }
/* the hero is light again, so it does not need the dark compensation */
.hero h1 { font-weight: 520; }

/* The italic in the hero headline was the weakest thing on the page: brass is
   lower contrast than ink, and Bodoni's italic is thinner than its roman. It
   gets more weight and a deeper brass — 5.6:1 against the ivory rather than
   3.8:1. */
.hero h1 em {
  font-weight: 560;
  color: #7d6231;
}

/* Pull-quotes and the large figures sit on the same axis, and had the same
   too-fine setting. */
.quote { font-variation-settings: "opsz" 20; font-weight: 450; line-height: 1.32; }
.kpi__n { font-variation-settings: "opsz" 28; font-weight: 450; }
.dark .quote, .moss .quote, .on-dark .quote { font-weight: 500; }
.dark .kpi__n, .moss .kpi__n, .on-dark .kpi__n { font-weight: 500; }

/* Article H2s run smaller than page H2s, so they want a lower opsz again. */
.article h2 { font-variation-settings: "opsz" 14; font-weight: 500; line-height: 1.22; letter-spacing: .005em; }

/* the wordmark is small — it needs the text end of the axis, not display */
.mark::before, .mark__name { font-variation-settings: "opsz" 11; font-weight: 550; }
.place__name { font-variation-settings: "opsz" 12; font-weight: 550; }

/* ==========================================================================
   HEADER WORDMARK — one line
   ========================================================================== */
.mark { align-items: center; gap: .7rem; }
.mark__name {
  font-size: clamp(1.06rem, 1.35vw, 1.28rem);
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 520px) { .mark__name { font-size: 1rem; } .mark { gap: .55rem; } }

/* ==========================================================================
   REEL — the reasons to visit, scrolling
   ==========================================================================
   Two identical tracks side by side, the second marked aria-hidden. The pair
   translates by exactly half the total width, so the moment it wraps the
   second track is sitting where the first began and the loop is invisible.

   Motion stops on hover and focus, and under prefers-reduced-motion the whole
   thing becomes a static wrapped list — a marquee is exactly the kind of
   movement that setting exists for.
   ========================================================================== */
.reel {
  display: flex;
  width: 100%;
  overflow: hidden;
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
  /* fade the ends so items enter and leave rather than being chopped.
     Longhand, because the shorthand needs size and repeat set explicitly or
     the gradient tiles and the fade never appears. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.reel__track {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0; padding: 0; list-style: none;
  animation: reel 46s linear infinite;
}
.reel:hover .reel__track,
.reel:focus-within .reel__track { animation-play-state: paused; }

@keyframes reel { to { transform: translateX(-100%); } }

.reel__item {
  display: flex; align-items: center; gap: .55rem;
  flex: none;
  padding: .95rem clamp(1rem, 2vw, 1.6rem);
  font-family: var(--plat);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--lichen);
  border-right: 1px solid var(--line-dark);
}
.reel__icon { width: 15px; height: 15px; flex: none; color: var(--lantern-lt); opacity: .9; }

/* on a light band */
.paper .reel, .band:not(.dark):not(.moss) .reel { border-color: var(--line-light); }
.paper .reel__item, .band:not(.dark):not(.moss) .reel__item {
  color: rgba(16,15,13,.72); border-right-color: var(--line-light);
}
.paper .reel__icon, .band:not(.dark):not(.moss) .reel__icon { color: var(--lantern); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reel { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .reel__track { animation: none; flex-wrap: wrap; }
  .reel__track + .reel__track { display: none; }
}

/* ==========================================================================
   WHERE WE OPERATE — on a light band now
   ==========================================================================
   The map was drawn for a dark surface. On ivory the fills and strokes invert:
   the state becomes a pale wash with an ink outline, the engraved county lines
   go to brass, and the pin labels take ink.
   ========================================================================== */
/* Measured on the light band, the state shape came out at 1.22:1 against the
   paper and the county lines at 1.61:1 — the map had lost its definition in the
   move from dark to light. Non-text graphics want 3:1 to read as deliberate.
   The outline carries it; the fill stays a wash so the pins keep prominence. */
.band:not(.dark):not(.moss) .locmap__svg .state {
  fill: rgba(22,36,31,.135);
  stroke: rgba(16,15,13,.52);
  stroke-width: 1.4;
}
.band:not(.dark):not(.moss) .locmap__svg .state-lines,
.band:not(.dark):not(.moss) .locmap__svg .state-lines path {
  stroke: rgba(112,88,44,.72);
}

/* ==========================================================================
   PILLARS WITH WORD LABELS
   ==========================================================================
   The key column is 3rem, sized for three-letter codes like OPS and REV. Word
   labels overflow it — "Visitor spend" needed 58px in a 48px cell, which is
   what was crowding the headings on the left. This variant widens the column
   and lets a label wrap inside it rather than spill out of it. */
.pillars--wide .pillar { grid-template-columns: 7.5rem minmax(0,1fr) minmax(0,1.35fr); }
.pillars--wide .pillar__k { white-space: normal; overflow-wrap: break-word; hyphens: none; }
@media (max-width: 1040px) {
  .pillars--wide .pillar { grid-template-columns: 6.5rem minmax(0,1fr) minmax(0,1.2fr); }
}
/* The base .pillar collapses to one column at 760px, but .pillars--wide .pillar
   outspecifies it even inside that media query — so it needs saying again here,
   or the three columns survive down to 390px at 104px each. */
@media (max-width: 760px) {
  .pillars--wide .pillar { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MARKET REEL — full-bleed
   ==========================================================================
   The reel sat inside the 1320px wrap, so it stopped short of the page edges
   while reading as a ticker, which wants to run off both sides. It breaks out
   to the viewport and the section's bottom padding tightens so the bar sits
   closer to the edge it belongs to. `html` already clips horizontal overflow,
   so 100vw cannot introduce a scrollbar. */
/* The reel is a sibling of .wrap rather than a child, so it spans the section
   naturally. A 100vw-plus-negative-margin break-out only landed correctly at
   one breakpoint — the percentage margin resolves against the wrap's content
   box, which changes with the gutter, so the bar drifted off-centre at every
   other width.

   .story centres its wrap inside a min-height; trimming padding alone left
   175px of dead space under the bar, so the floor comes off too. */
.story--market { min-height: 0; }
.story--market > .wrap { padding-bottom: clamp(1.5rem, 3vw, 2.4rem); }
.story--market > .reel {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 0 clamp(1.4rem, 2.8vw, 2.2rem);
}
.band:not(.dark):not(.moss) .pin__ring { stroke: #7d6231; stroke-opacity: .9; }
.band:not(.dark):not(.moss) .pin__dot { fill: #6b5327; }
/* On a light band the halo has to invert too. It was ink text with a 6px ink
   stroke around it — dark on dark, which rendered the name as a blob rather
   than as a label. Oxblood on a paper-coloured halo. */
.band:not(.dark):not(.moss) .pin__label {
  fill: var(--rhodo);
  stroke: var(--limestone-2);
  stroke-width: 8px;
}
.band:not(.dark):not(.moss) .place__name { color: var(--ink); }
.band:not(.dark):not(.moss) .place__meta { color: rgba(16,15,13,.66); }
.band:not(.dark):not(.moss) .place__btn { border-color: var(--line-light); }
.band:not(.dark):not(.moss) .place,
.band:not(.dark):not(.moss) .place + .place { border-color: var(--line-light); }
.band:not(.dark):not(.moss) .place__thumb--none { background: var(--limestone); }
.band:not(.dark):not(.moss) .place__go { color: var(--lantern); }

/* The global `svg { max-width: 100% }` reset was capping this at the container
   width, so the 118% overhang that lets the line work bleed past both edges
   never applied — leaving about 99px uncovered on the right. Invisible against
   a dark photograph; an obvious seam on ivory. */
.contour svg { max-width: none; }

/* The amber points read as fireflies over a night photograph. On an engraved
   ivory plate they read as smudges, so they come off the hero. They stay on
   the interior page-heads, which are still dark. */
.hero .firefly { display: none; }

/* Brass is too light for small text on ivory — it measured 3.84:1 against the
   4.5:1 target. Oxblood is what the other light sections already use for
   labels, and it measures over 10:1. Brass stays on the H1's italic, where
   large-text rules apply and it reads as the accent it is meant to be. */
.hero .plat { color: var(--rhodo); }
.hero .plat::before { background: var(--rhodo); opacity: .75; }

/* -------------------------------------------------- header on a light hero
   The header is fixed and transparent at rest, so on the homepage it now sits
   over ivory rather than a dark photograph — its ivory text would be close to
   invisible. Only the homepage needs this; every other page opens on the moss
   page-head and keeps the original treatment. */
.nav--light { color: var(--ink); }
.nav--light .nav__links a { color: rgba(16,15,13,.74); }
.nav--light .nav__links a:hover,
.nav--light .nav__links a[aria-current="page"] { color: var(--ink); }
.nav--light .mark__sub { color: rgba(16,15,13,.7); }
.nav--light .nav__toggle span { background: var(--ink); }

/* Stuck, it stays light rather than flipping to a dark bar — a mid-scroll
   inversion on a light page reads as a glitch. */
.nav--light.is-stuck {
  background: rgba(253,252,250,.93);
  backdrop-filter: saturate(140%) blur(14px);
}
.nav--light.is-stuck::after { background: var(--line-light); }

/* The mobile drawer is a dark panel, so inside it the links go back to ivory. */
@media (max-width: 1120px) {
  .nav--light .nav__links a { color: rgba(240,237,230,.82); }
  .nav--light .nav__links a:hover,
  .nav--light .nav__links a[aria-current="page"] { color: #fff; }
  .nav--light .nav__links a.btn { color: var(--ink); }
}


/* ==========================================================================
   HEADER FIT
   ==========================================================================
   Nav labels are Management / West Virginia / Contact us, so the header needs
   about 890px rather than the 1301px the longer labels required. One modest
   step below 1200px is enough.

   nowrap and flex: none matter: without them flex shrinks the CTA below its
   content width and the label breaks inside the button, which is what the
   original wrapping actually was. */
/* Sized for the LONGER labels still in the HTML — Hospitality Management,
   Why West Virginia, Request Management Proposal — which need about 1300px on
   one line. Harmless once those labels shorten. */
@media (max-width: 1400px) {
  .nav__links { gap: 1.05rem; }
  .nav__links a { font-size: .8rem; letter-spacing: 0; }
  .nav__links a.btn { font-size: .7rem; padding-block: .38rem; padding-inline: 1rem; letter-spacing: .07em; }
  .mark__name { font-size: 1.02rem; }
  .mark::before { font-size: .9rem; padding: .32rem .46rem .28rem; }
}
@media (max-width: 1240px) {
  .nav__links { gap: .8rem; }
  .nav__links a { font-size: .76rem; }
  .nav__links a.btn { font-size: .66rem; padding-inline: .85rem; }
  .mark__name { font-size: .96rem; }
}
.nav__links a { white-space: nowrap; flex: none; }
.nav__links a.btn { flex: none; white-space: nowrap; }
.btn__label { white-space: nowrap; }
.nav__links { flex-wrap: nowrap; }

/* ==========================================================================
   SITE OVERRIDES — consolidated
   Single source for every change made after the original stylesheet. This
   replaces thirteen appended blocks that had begun to contradict each other
   on specificity. Ordered: type, header, hero, bands, components, map,
   contact, mobile. Superseded rules (stipple hero, ruled hero, ridge fills,
   dark-field map pass, per-band photo scrims) are deliberately gone.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TYPE */
:root { --font-stamp: "Oswald", "Arial Narrow", Impact, sans-serif; }

h1 {
  font-family: var(--font-stamp);
  font-weight: 300;
  font-variation-settings: normal;
  letter-spacing: .012em;
  line-height: 1.1;
}
.hero h1, .phead h1 { font-size: var(--t-hero); padding-bottom: .06em; }

/* .line-rv clips overflow for the reveal animation, which cropped descenders. */
.line-rv { padding-bottom: .16em; margin-bottom: -.13em; }

/* Orphan control. */
h1, h2, h3, h4, blockquote, .plat { text-wrap: balance; }
p, li, .sub, .form-note, .place__meta, figcaption { text-wrap: pretty; }
body { overflow-wrap: break-word; }

/* ------------------------------------------------------- 2. HEADER LOCKUP */
.mark {
  display: inline-flex; align-items: center;
  border: 0; padding: 0; gap: 0; background: none; box-shadow: none;
}
.mark::after   { content: none; }
.mark__glyph   { display: none; }
.mark__name    { display: none; }

.mark::before {
  content: ""; display: block; flex: 0 0 auto;
  width: auto; height: clamp(2.2rem, 3.2vw, 2.9rem);
  aspect-ratio: 770 / 422;
  background: url("img/ahg-logo-full-ink.png") left center / contain no-repeat;
}
.nav:not(.nav--light) .mark::before {
  background-image: url("img/ahg-logo-full-limestone.png");
}

/* The footer keeps its wordmark as live type. */
.foot .mark::before { content: none; }
.foot .mark__name   { display: block; }

/* A real <img> lockup, where present, supersedes the pseudo-element. */
.mark__logo {
  display: block; width: auto;
  height: clamp(2.4rem, 3.4vw, 3.2rem);
}
.mark:has(.mark__logo)::before { content: none; }
@media (max-width: 560px) { .mark__logo { height: 2.1rem; } }

/* ---------------------------------------------------------------- 3. HERO */
/* Solid field, no photograph. The character comes from layered Appalachian
   ridgelines and an engraved contour plate — the register of a share
   certificate rather than a stock image. */
.hero { background: var(--limestone); position: relative; overflow: hidden; }
.hero::before, .hero::after { content: none; }
.hero__bg { display: none; }
.hero .wrap { position: relative; z-index: 3; }

/* Hero copy renders immediately, not on a JS reveal. Above-the-fold text
   should never depend on script: it is the first thing a visitor reads,
   it is what crawlers see without executing JS, and any delay or failure
   in site.js used to leave the headline invisible. */
.hero .rv,
.hero .rv-1,
.hero .rv-2,
.hero .rv-3 { opacity: 1; transform: none; transition: none; }
.hero .line-rv { overflow: visible; }
.hero .line-rv > span { transform: none; transition: none; }

.hero .contour { display: block; opacity: 1; z-index: 0; }

/* Engine-turned hatch: the plate the whole thing is struck on. */
.hero .hatch line { stroke: rgba(22,36,31,.032); }

/* Fine contour lines, brass, drawn across the field. */
.hero .contour path { stroke: rgba(154,123,63,.22); stroke-width: 1; }

/* Four ridgelines, stacking back to front. */
.hero .contour .ridges path { stroke: none; }
.hero .ridge--1 { fill: rgba(22,36,31,.045); }
.hero .ridge--2 { fill: rgba(22,36,31,.075); }
.hero .ridge--3 { fill: rgba(22,36,31,.110); }
.hero .ridge--4 { fill: rgba(22,36,31,.150); }

/* A very slow drift: alive, but never distracting. */
@media (prefers-reduced-motion: no-preference) {
  .hero .ridge--1 { animation: ridgeDrift 46s ease-in-out infinite; }
  .hero .ridge--2 { animation: ridgeDrift 34s ease-in-out infinite reverse; }
  .hero .ridge--3 { animation: ridgeDrift 52s ease-in-out infinite; }
}
@keyframes ridgeDrift {
  0%, 100% { transform: translate3d(0,0,0); }
  50%      { transform: translate3d(-1.6%,0,0); }
}

/* Warmth pooling at the lower right, paper at the upper left. */
.hero .contour::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 100% at 88% 104%, rgba(154,123,63,.10) 0%, rgba(154,123,63,.03) 44%, transparent 74%),
    radial-gradient(90% 80% at 6% -10%, rgba(247,245,241,.85) 0%, transparent 60%);
}

@media (max-width: 760px) {
  .hero .contour path { stroke: rgba(154,123,63,.16); }
  .hero .ridge--4 { fill: rgba(22,36,31,.13); }
}

/* --------------------------------------------------------------- 4. BANDS */
/* Photographic backgrounds were unreadable; bands are solid instead. */
.story:not(.hero) .story__bg { display: none; }
.story:not(.hero) { background: var(--moss); }
.story:not(.hero) h2 { color: var(--limestone-2); }
.story:not(.hero) .plat { color: var(--lantern-lt); }
.story:not(.hero) .sub,
.story:not(.hero) .sub--body { color: rgba(247,245,241,.88); }
.story--market .reel__item { color: rgba(247,245,241,.82); }

/* ---------------------------------------------------------- 5. COMPONENTS */
/* No three-letter chips, no ruled rows. */
.pillar__k, .svc__code { display: none; }
.pillars { border-top: 0; }

/* .pillar must be block: as a grid its gutter became a vertical gap. */
.pillar { display: block; border: 0; }
.pillar > div { display: contents; }
.pillar p { margin: 0; max-width: 46ch; }

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.9rem, 3.2vw, 3.1rem) clamp(2rem, 4vw, 3.6rem);
  align-items: start;
}
.pillars--wide { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.pillar h3, .svc__card h3 {
  font-family: var(--display); font-weight: 500;
  letter-spacing: -.004em; line-height: 1.16;
  margin: 0 0 .55rem;
}
.svc__card { border-radius: 2px; }
.svc__card ul { margin: .2rem 0 0; }
.svc__card li { margin-bottom: .3rem; }

/* ----------------------------------------------------------------- 6. MAP */
/* The map sits in a light band, so it needs the light-field selector. */
.band:not(.dark):not(.moss) .locmap__svg .state { fill: rgba(22,36,31,.20); stroke: rgba(22,36,31,.40); stroke-width: 1.6; }
.band:not(.dark):not(.moss) .locmap__svg .state-lines,
.band:not(.dark):not(.moss) .locmap__svg .state-lines path { stroke: rgba(22,36,31,.13); }

.band:not(.dark):not(.moss) .locmap__svg .pin__ring { stroke: var(--lantern); opacity: .55; stroke-width: 2.2; }
.band:not(.dark):not(.moss) .locmap__svg .pin__dot  { fill: var(--lantern); stroke: var(--limestone-2); stroke-width: 2.5; }
.band:not(.dark):not(.moss) .locmap__svg .pin:hover .pin__ring,
.band:not(.dark):not(.moss) .locmap__svg .pin:focus-visible .pin__ring { opacity: 1; }

.band:not(.dark):not(.moss) .locmap__svg .pin__label {
  font-family: var(--body); font-size: 25px; font-weight: 600;
  letter-spacing: .085em; text-transform: uppercase;
  fill: var(--ink); opacity: .78;
  stroke: var(--limestone); stroke-width: 6px; paint-order: stroke;
}
.band:not(.dark):not(.moss) .locmap__svg .pin:hover .pin__label,
.band:not(.dark):not(.moss) .locmap__svg .pin:focus-visible .pin__label { opacity: 1; }

/* In development reads hollow and dashed against the filled brass of live. */
.band:not(.dark):not(.moss) .locmap__svg .pin--dev .pin__dot  { fill: var(--limestone); stroke: rgba(22,36,31,.55); stroke-width: 2.2; }
.band:not(.dark):not(.moss) .locmap__svg .pin--dev .pin__ring { stroke: rgba(22,36,31,.34); stroke-dasharray: 3.5 4.5; opacity: .95; }
.band:not(.dark):not(.moss) .locmap__svg .pin--dev .pin__label { fill: rgba(22,36,31,.58); font-weight: 500; letter-spacing: .10em; }
.band:not(.dark):not(.moss) .locmap__svg .pin--dev circle { pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .band:not(.dark):not(.moss) .locmap__svg .pin:not(.pin--dev) .pin__ring {
    animation: pinPulse 3.6s var(--ease) infinite;
    transform-box: fill-box; transform-origin: center;
  }
}
@keyframes pinPulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.12); }
}

.locmap__fig { position: relative; }
.map-key {
  display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.2rem;
  font-family: var(--body); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(20,24,26,.6);
}
.map-key span { display: inline-flex; align-items: center; gap: .5rem; }
.map-key i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.map-key .k-live { background: var(--lantern); }
.map-key .k-dev  { background: var(--limestone); border: 1.5px solid rgba(22,36,31,.5); }

/* The legend was landing in column two and displacing the property list.
   Map and legend stack in column one; the list holds column two. */
.locmap { align-items: start; gap: clamp(1.4rem, 2.6vw, 3rem); }
.locmap__fig { grid-column: 1; grid-row: 1; max-width: 34rem; margin: 0; }
.locmap .map-key { grid-column: 1; grid-row: 2; margin-top: .8rem; }
.locmap .places { grid-column: 2; grid-row: 1 / span 2; align-self: start; }

@media (max-width: 860px) {
  .locmap { grid-template-columns: 1fr; }
  .locmap__fig, .locmap .map-key, .locmap .places {
    grid-column: 1; grid-row: auto; max-width: none;
  }
}

/* ------------------------------------------------------------- 7. CONTACT */
/* The left column carried almost nothing, so the form takes full measure. */
.split:has(> form[data-form]) { display: block; }
.split:has(> form[data-form]) > form { width: 100%; max-width: 46rem; }
.split:has(> form[data-form]) > .rv:first-child { margin-bottom: clamp(2rem, 4vw, 3rem); }
.form--stack .form-grid { grid-template-columns: 1fr; gap: 1.15rem; max-width: 46rem; }
.form--stack .field.full { grid-column: auto; }
.form--stack textarea { min-height: 9rem; }

/* -------------------------------------------------------------- 8. MOBILE */
@media (max-width: 760px) {
  /* Comfortable tap targets. */
  .nav__links a { padding-block: .7rem; }
  .tlink { padding-block: .45rem; }
  .foot ul a { display: inline-block; padding-block: .3rem; }

  .hero h1, .phead h1 { max-width: 100%; }

  /* Portrait crop: bring the river into frame. */
  .hero__bg img { object-position: 86% 62%; }
  .hero__bg::after {
    background:
      linear-gradient(to bottom, rgba(247,245,241,.95) 0%, rgba(247,245,241,.84) 40%,
                                 rgba(247,245,241,.34) 78%, rgba(247,245,241,.20) 100%);
  }

  /* Hero stats: a two-column grid reads far better than a wrapped row,
     which left orphans stranded on their own line. */
  .hero__meta {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1rem 1.4rem; margin-top: 1.6rem;
  }
  .hero__meta li { display: flex; flex-direction: column; gap: .15rem; }
  .hero__meta li::after { content: none; }
  .hero__meta b { font-size: 1.05rem; }

  .pillars { grid-template-columns: 1fr; gap: 2rem; }
  .pillar p { max-width: none; }

  /* A tap selects and enlarges a pin; it does not navigate (see site.js). */
  .band:not(.dark):not(.moss) .locmap__svg .pin,
  .band:not(.dark):not(.moss) .locmap__svg .pin__hit { pointer-events: auto; cursor: pointer; }
  .band:not(.dark):not(.moss) .locmap__svg .pin__dot,
  .band:not(.dark):not(.moss) .locmap__svg .pin__ring { transition: r .3s var(--ease), opacity .3s var(--ease); }
  .band:not(.dark):not(.moss) .locmap__svg .pin__label { opacity: 0; font-size: 30px; transition: opacity .25s var(--ease); }
  .band:not(.dark):not(.moss) .locmap__svg .pin:not(.is-on) .pin__ring { opacity: .4; }
  .band:not(.dark):not(.moss) .locmap__svg .pin.is-on .pin__label { opacity: 1; }
  .band:not(.dark):not(.moss) .locmap__svg .pin.is-on .pin__dot  { r: 11; }
  .band:not(.dark):not(.moss) .locmap__svg .pin.is-on .pin__ring { r: 27; opacity: 1; }
}

@media (max-width: 560px) {
  .mark::before { height: 1.95rem; }
}
@media (max-width: 520px) {
  .hero__bg img { object-position: 90% 66%; }
}

.pillars--wide { row-gap: clamp(1.4rem, 2.2vw, 2.1rem); }
.pillars--wide .pillar { padding-block: clamp(.5rem, 1vw, .8rem); }
.shead:has(+ .pillars--wide) { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }

:root { --band: clamp(3.25rem, 6vw, 6rem); }
.band--tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.shead { margin-bottom: clamp(1.75rem, 3.2vw, 2.75rem); }
@media (min-width: 1080px) { .pillars--wide { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: clamp(1.1rem, 1.8vw, 1.9rem); } .pillars--wide .pillar h3 { font-size: 1.12rem; } }