:root {
  --moss:    #22322B;
  --moss-deep:  #1A2721;
  --moss-lift:  #2E4238;
  --paper:    #F6F8F7;
  --paper-shade:  #E9EEEB;
  --rule:    #CBD4CF;
  --type:     #232823;
  --type-soft:   #5C625C;
  --link:   #2F5D78;
  --link-lift:#8FB4CA;
  --caution:    #6B5A12;
  --caution-bg: #F2F0DC;
  --wash:    #E7EDE9;

  --grot: Archivo, "Segoe UI", system-ui, sans-serif;
  --book: "Source Serif 4", Cambria, Georgia, serif;

  
  --hair: 7px;
  --tight: 11px;
  --snug: 15px;
  --step: 21px;
  --gap: 30px;
  --band: 42px;
  --deep: 58px;
  --vast: 78px;

  
  --column: 38rem;
  --railw: 0px;
  --actw: 306px;
  --pad: clamp(21px, 4vw, 46px);
  --blockgap: clamp(52px, 8vw, 92px);
}

@media (min-width: 1250px) { :root { --railw: 252px; } }

html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

body {
  font-family: var(--book);
  font-size: 18px;
  line-height: 1.62;
  color: var(--type);
  background: var(--paper);
  margin: 0;
}

h1, h2, h3 { margin: 0; font-family: var(--grot); font-weight: 700; letter-spacing: -0.011em; }
p, ul, ol, dl, figure { margin: 0; }
img, svg { display: block; max-inline-size: 100%; block-size: auto; }

::selection { background: var(--link-lift); color: var(--moss-deep); }

a {
  color: var(--link); text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
}
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 1px;
  border-radius: 2px;
}

.rail :focus-visible,
.callbar :focus-visible,
.act :focus-visible,
.closer :focus-visible { outline-color: var(--link-lift); }

.jump {
  position: absolute; inset-inline-start: 0; inset-block-start: 0;
  transform: translateY(-120%);
  background: var(--link); color: #fff;
  padding: 12px 18px; z-index: 30; text-decoration: none;
}
.jump:focus { transform: translateY(0); }

.frame { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
@media (min-width: 980px) {
  .frame { grid-template-columns: minmax(0, 1fr) var(--actw); }
  .rail { grid-column: 1 / -1; }
}
@media (min-width: 1250px) {
  .frame { grid-template-columns: var(--railw) minmax(0, 1fr) var(--actw); }
  .rail { grid-column: 1; }
}

.rail {
  background: var(--moss);
  color: var(--wash);
  padding: var(--step) var(--pad);
}
@media (min-width: 1250px) {
  .rail {
    position: sticky; top: 0; align-self: start;
    height: 100vh; overflow-y: auto;
    padding: var(--band) var(--step);
  }
}

.sign { display: flex; align-items: center; gap: var(--tight); min-block-size: 44px; color: var(--wash); text-decoration: none; }
.sign__mark { width: 34px; height: 34px; flex: none; }
.sign__words { display: flex; flex-direction: column; min-width: 0; }
.sign__name { font-family: var(--grot); font-weight: 700; font-size: 19px; line-height: 1.1; }
.sign__place {
  font-family: var(--grot); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: #93A79A; margin-top: 4px; white-space: nowrap;
}
@media (min-width: 1250px) {
  
  .sign { flex-direction: column; align-items: flex-start; gap: var(--snug); }
  .sign__mark { width: 40px; height: 40px; }
  .sign__name { font-size: 21px; }
}

.sidelist { list-style: none; padding: 0; margin: var(--gap) 0 0; }
.sidelist li { margin-bottom: 2px; }
.sidelist a {
  display: flex; align-items: center; min-block-size: 44px;
  padding: var(--hair) var(--tight);
  color: var(--wash); text-decoration: none;
  font-family: var(--grot); font-size: 15px;
  border-radius: 4px;
}
.sidelist a[aria-current="page"] { background: var(--moss-lift); color: #fff; }
.sidelist__group {
  font-family: var(--grot); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: #879C8F;
  margin: var(--step) 0 var(--tight); padding-inline-start: var(--tight);
}

.foldout { margin-top: var(--step); }
.foldout > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--grot); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--wash);
  border: 1px solid var(--moss-lift); border-radius: 4px;
  padding: var(--tight) var(--snug);
  display: flex; justify-content: space-between; align-items: center;
}
.foldout > summary::marker { content: ""; }
.foldout > summary::after { content: "\25BE"; color: var(--link-lift); }
.foldout[open] > summary::after { content: "\25B4"; }
@media (min-width: 1250px) { .foldout { display: none; } }

.sheet { padding: var(--band) var(--pad) var(--vast); min-width: 0; }

.sheet > * { max-inline-size: var(--column); margin-inline: 0; }
.sheet > .shot, .sheet > .shots { max-inline-size: none; }

.pathline { font-family: var(--grot); font-size: 13px; color: var(--type-soft); margin-bottom: var(--step); }
.pathline a { color: var(--type-soft); }
.pathline span { color: var(--rule); padding: 0 6px; }

.stub {
  font-family: var(--grot); font-size: 12px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--link);
  margin-bottom: var(--tight);
}
.qline { font-size: clamp(30px, 4vw, 44px); line-height: 1.12; max-width: 10.5em; text-wrap: balance; }
.h-a { text-wrap: balance; font-size: clamp(22px, 2.4vw, 29px); line-height: 1.2; margin-top: var(--blockgap); }
.h-b { text-wrap: balance; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.3; margin-top: var(--gap); }

.answer {
  text-wrap: pretty;
  border-inline-start: 3px solid var(--link);
  padding-inline-start: var(--step);
  margin-block: var(--step) var(--band);
  max-width: var(--column);
  font-size: 19px;
}
.answer > p + p { margin-top: var(--snug); }
.answer__tag {
  font-family: var(--grot); font-size: 11px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--type-soft);
  margin-bottom: var(--tight);
}

.para { max-width: var(--column); }
.para p + p { margin-top: var(--snug); }
.para ul, .para ol { margin-top: var(--snug); padding-inline-start: var(--step); }
.para li + li { margin-top: var(--hair); }
.small { font-size: 14px; color: var(--type-soft); }

.chip {
  font-family: var(--grot); font-size: 0.85em; font-weight: 600;
  background: var(--caution-bg); color: var(--caution);
  padding: 1px 6px; border-radius: 3px; overflow-wrap: anywhere;
}

.deflist { margin-top: var(--gap); border-top: 1px solid var(--rule); }
.defrow {
  display: grid; grid-template-columns: 1fr; gap: var(--hair);
  padding: var(--step) 0; border-bottom: 1px solid var(--rule);
}
.defrow dt { font-family: var(--grot); font-weight: 700; font-size: 17px; }
.defrow dd { margin: 0; color: var(--type-soft); max-width: 62ch; }
@media (min-width: 980px) {
  .defrow { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--gap); }
}

.ledger { font-variant-numeric: tabular-nums; margin-top: var(--gap); border: 1px solid var(--rule); border-radius: 4px; background: #fff; overflow: hidden; }
.ledger__cap { padding: var(--snug) var(--step); background: var(--paper-shade); border-bottom: 1px solid var(--rule); font-family: var(--grot); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--type-soft); }
.ledger__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--step); padding: var(--snug) var(--step); border-bottom: 1px solid var(--paper-shade); align-items: baseline; }
.ledger__row:last-child { border-bottom: 0; }
.ledger__row b { font-family: var(--grot); font-weight: 700; display: block; }
.ledger__row span { color: var(--type-soft); font-size: 15px; }
.ledger__fig { font-family: var(--grot); font-weight: 700; white-space: nowrap; }
.ledger__sum { background: var(--moss); color: #fff; }
.ledger__sum b, .ledger__sum .ledger__fig { color: #fff; }
.ledger__sum span { color: var(--link-lift); }

.aside {
  margin-block: var(--band);
  padding-inline-start: var(--step);
  border-inline-start: 3px solid var(--rule);
  max-width: var(--column);
  font-size: 16px;
}
.aside strong { font-family: var(--grot); }

.shot {
  margin-top: var(--gap); border: 1px dashed var(--rule); border-radius: 4px;
  background: repeating-linear-gradient(135deg, #EEF2F0 0 11px, #E3EAE6 11px 22px);
  min-height: 210px; display: grid; place-items: center; padding: var(--step); text-align: center;
}
.shot span {
  font-family: var(--grot); font-size: 12px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--type-soft); max-width: 38ch;
}

.ask { margin-top: 0; border-block-start: 1px solid var(--rule); max-width: var(--column); }
.ask:last-of-type { border-block-end: 1px solid var(--rule); }
.ask > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--snug) 0;
  font-family: var(--grot); font-weight: 700; font-size: 17px;
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--snug); align-items: center;
}
.ask > summary::marker { content: ""; }
.ask > summary::after { content: "\25B8"; color: var(--link); }
.ask[open] > summary::after { content: "\25BE"; }
.ask__body { padding: 0 0 var(--step); color: var(--type-soft); max-width: 62ch; }

.cta {
  display: inline-block; font-family: var(--grot); font-weight: 700; font-size: 16px;
  padding: 0.85em 1.6em; border-radius: 4px; text-decoration: none;
  background: var(--link); color: #fff; border: 2px solid var(--link);
}
.cta--quiet { background: transparent; color: var(--link); }
@media (prefers-reduced-motion: no-preference) {
  .cta { transition-property: background-color, border-color, scale; transition-duration: 150ms; transition-timing-function: cubic-bezier(0.2, 0, 0, 1); }
  .cta:active { scale: 0.96; }
  
  .callbar a, .act__phone { transition: scale 150ms cubic-bezier(0.2, 0, 0, 1); }
  .callbar a:active, .act__phone:active { scale: 0.96; }
}
.rail .cta { display: block; text-align: center; margin-top: var(--gap); }
.ctarow { display: flex; flex-wrap: wrap; gap: var(--tight); margin-top: var(--gap); }

.closer {
  margin-top: var(--vast); padding: var(--band) var(--gap);
  background: var(--moss); color: var(--wash); border-radius: 4px;
}
.closer h2 { color: #fff; font-size: clamp(22px, 2.2vw, 28px); }
.closer p { margin-top: var(--snug); max-width: 54ch; color: var(--wash); }
.closer .cta { margin-top: var(--step); background: var(--link-lift); border-color: var(--link-lift); color: var(--moss-deep); }

.reach { margin-top: var(--gap); max-width: 30rem; }
.reach__line { margin-bottom: var(--step); }
.reach__line label { display: block; font-family: var(--grot); font-weight: 700; font-size: 15px; margin-bottom: 5px; }
.reach__line input, .reach__line select, .reach__line textarea {
  font-family: var(--book); font-size: 17px;
  width: 100%; min-width: 0; padding: var(--tight) var(--snug);
  border: 1px solid var(--rule); border-radius: 4px; background: #fff; color: var(--type);
}
.reach__line textarea { min-height: 8rem; resize: vertical; }
.reach__line .small { display: block; margin-top: 5px; }
.decoy { block-size: 0; overflow: hidden; opacity: 0; pointer-events: none; }

.endnote {
  margin-top: var(--vast); padding-top: var(--gap);
  border-top: 1px solid var(--rule);
  font-size: 15px; color: var(--type-soft);
}
.endnote p + p { margin-top: var(--tight); }
.endnote a { color: var(--type-soft); }

.act { padding: var(--step) var(--pad) var(--band); min-width: 0; }
@media (min-width: 980px) {
  .act {
    position: sticky; top: var(--step); align-self: start;
    padding: var(--band) var(--pad) var(--band) 0;
  }
}

.act__card {
  background: var(--moss); color: var(--wash);
  border-radius: 15px; padding: var(--tight);
}
.act__head {
  font-family: var(--grot); font-weight: 700; font-size: 12px;
  letter-spacing: 0.15em; text-transform: uppercase; color: #93A79A;
  padding: var(--hair) var(--hair) 0;
}
.act__phone {
  display: block; margin-block-start: var(--hair); padding: 0 var(--hair);
  font-family: var(--grot); font-weight: 700; font-size: 25px;
  color: #fff; text-decoration: none; line-height: 1.2;
}
.act__cta { display: block; text-align: center; margin-block-start: var(--tight); }
.act__steps {
  list-style: none; counter-reset: step; padding: 0;
  margin: var(--step) var(--hair) 0;
}
.act__steps li {
  counter-increment: step; position: relative;
  padding-inline-start: var(--step); font-size: 15px; line-height: 1.5;
}
.act__steps li + li { margin-block-start: var(--tight); }
.act__steps li::before {
  content: counter(step); position: absolute; inset-inline-start: 0;
  font-family: var(--grot); font-weight: 700; font-size: 12px;
  color: var(--link-lift);
}
.act__note {
  margin: var(--tight) var(--hair) var(--hair);
  font-size: 13px; line-height: 1.5; color: #93A79A;
}

.callbar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40;
  display: flex; gap: var(--hair);
  padding: var(--hair) var(--snug);
  padding-block-end: calc(var(--hair) + env(safe-area-inset-bottom));
  background: var(--moss-deep);
}
.callbar a {
  flex: 1; min-block-size: 46px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--grot); font-weight: 700; font-size: 15px;
  border-radius: 6px; text-decoration: none;
}
.callbar__phone { background: var(--link-lift); color: var(--moss-deep); }
.callbar__ask { background: transparent; color: var(--wash); border: 1px solid var(--moss-lift); }
@media (min-width: 980px) { .callbar { display: none; } }
@media (max-width: 979px) { body { padding-block-end: 78px; } }

.shot img {
  inline-size: 100%; block-size: auto;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.1);
}

.shots {
  display: grid; gap: var(--snug);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-block: var(--band);
}
.shots .shot, .shots .shot:has(img) { margin-block: 0; }
.shots .shot span { font-size: 13px; }
.shot:has(img) {
  border: 0; background: none; min-height: 0; padding: 0;
  display: block; text-align: start;
  margin-block: var(--band);
}
.shot:has(img) span {
  display: block; margin-block-start: var(--tight);
  max-width: none; letter-spacing: 0.02em; text-transform: none;
  font-size: 14px; line-height: 1.5; color: var(--type-soft);
}

.nudge {
  margin-block: var(--band);
  padding-block: var(--snug);
  border-block: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--snug);
  align-items: center; justify-content: space-between;
  max-inline-size: var(--column);
}
.nudge p {
  margin: 0; font-family: var(--grot); font-weight: 700;
  font-size: 16px; line-height: 1.35; text-wrap: balance;
}

.cbnav { flex: 1; min-inline-size: 0; }
.cbnav > summary {
  list-style: none; cursor: pointer;
  min-block-size: 46px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--grot); font-weight: 700; font-size: 15px;
  color: var(--wash); border: 1px solid var(--moss-lift); border-radius: 6px;
}
.cbnav > summary::marker { content: ""; }
.cbnav__panel {
  position: absolute; inset-inline: var(--snug);
  inset-block-end: calc(100% + 8px);
  max-block-size: 62vh; overflow-y: auto;
  background: var(--moss-deep);
  border: 1px solid var(--moss-lift); border-radius: 10px;
  padding: var(--snug);
}
.cbnav__panel a {
  display: flex; align-items: center; min-block-size: 44px;
  padding-inline: var(--hair);
  color: var(--wash); text-decoration: none;
  font-family: var(--grot); font-size: 16px;
}
.cbnav__panel a[aria-current="page"] { color: var(--link-lift); }
.cbnav__band {
  margin: var(--snug) 0 2px; padding-inline: var(--hair);
  font-family: var(--grot); font-size: 11px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; color: #879C8F;
}
.cbnav__band:first-child { margin-block-start: 0; }

@media (hover: hover) {
  .sidelist a:hover { background: var(--moss-lift); }
  a:hover { color: var(--moss); }
  .cta:hover { background: var(--moss); border-color: var(--moss); color: #fff; }
  .cta--quiet:hover { background: var(--link); color: #fff; }
  .ask > summary:hover { color: var(--link); }
  .closer .cta:hover { background: #fff; border-color: #fff; color: var(--moss-deep); }
}

@media print {
  body { font-size: 11pt; background: white; }
  .rail, .closer, .shot { display: none; }
  .frame { display: block; }
}

@media (max-width: 1179px) {
  
  .rail { padding-block: var(--snug); }
  .rail > .sidelist,
  .rail > .sidelist__group,
  .rail > .cta { display: none; }
  .foldout .sidelist,
  .foldout .sidelist__group { display: block; }
  .foldout { margin-top: var(--snug); }

  
  .answer { padding: var(--step); }
  .sheet { padding-block: var(--gap) var(--deep); }
}

@media (max-width: 399px) {
  
  :root { --pad: 17px; }
  body { font-size: 17px; }
  .answer { padding: var(--snug); }
}

@media (max-width: 559px) {
  
  .ledger__row { grid-template-columns: minmax(0, 1fr); gap: var(--hair); }
  .ledger__fig { justify-self: end; }
  .ledger__sum .ledger__fig { font-size: 19px; }
}