/* ==========================================================================
   Harbor & Vale Trial Lawyers — "Ledger" theme
   Upshift law-firm template · hand-written CSS, no build step, no externals.

   HOW TO RE-SKIN: every color, radius and shadow lives in the :root token
   block directly below. Swap the values there and the whole site follows.
   ========================================================================== */

:root{
  /* Ground */
  --c-paper: #F7F4EE;        /* warm ivory paper — page ground            */
  --c-white: #FFFFFF;        /* cards, raised surfaces                    */
  --c-oat:   #EFE9DC;        /* oat tint — alternating sections           */
  --c-parch: #E9E1CF;        /* deeper parchment tint — alt sections      */

  /* Ink */
  --c-ink:   #1C1B18;        /* near-black charcoal — headings, body      */
  --c-muted: rgba(28, 27, 24, 0.76);   /* secondary text                  */
  --c-charcoal:     #1C1B18; /* dark band background                      */
  --c-charcoalDeep: #131210; /* footer / gradient partner                 */

  /* Accent */
  --c-ox:     #7A2E2E;       /* oxblood — CTAs, links, emphasis           */
  --c-oxDeep: #5E2121;       /* oxblood hover / pressed                   */
  --c-oxWash: rgba(122, 46, 46, 0.08); /* icon chips, soft fills          */
  --c-bronze:    #A88A5C;    /* bronze — hairline rules, ledger frames    */
  --c-bronzeInk: #6F5423;    /* bronze for TEXT — AA on every tint        */

  /* On dark */
  --c-light:       #F2EEE6;  /* text on charcoal                          */
  --c-lightMuted:  rgba(242, 238, 230, 0.78);
  --c-bronzeLight: #CBA76F;  /* bronze text on charcoal                   */

  /* Lines + form */
  --c-hairline:       #E0D8C7;
  --c-hairlineOnDark: rgba(242, 238, 230, 0.18);
  --c-error:  #A93D33;
  --c-success:#2E6B4F;

  /* Shape + depth — squared, bookish */
  --r-card: 6px;
  --r-tile: 4px;
  --r-btn:  4px;
  --shadow-card: 0 16px 34px -26px rgba(28, 27, 24, 0.35);
  --shadow-btn:  0 10px 20px -12px rgba(122, 46, 46, 0.5);

  /* Type */
  --f-display: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --f-body: 'Inter', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Reset + base
   -------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
/* scroll-behavior:smooth on <html> makes Chrome DROP the scroll on a
   cross-document #fragment navigation — every "Details" link to another page
   landed the visitor at the top instead of the promised section. Verified: with
   smooth, scrollY stayed 0; with auto it lands exactly on scroll-margin-top.
   Keep this auto. A JS shim would fix smooth, but these templates ship with
   zero dependencies and that is the point. */
html{scroll-behavior:auto}
body{background:var(--c-paper);color:var(--c-ink);font-family:var(--f-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{text-decoration:none;color:inherit;transition:opacity 150ms ease,background-color 150ms ease,border-color 150ms ease,color 150ms ease}
a:hover{opacity:.85}
:focus-visible{outline:2.5px solid var(--c-ox);outline-offset:3px;border-radius:2px}
.bg-charcoal :focus-visible,.site-footer :focus-visible{outline-color:var(--c-bronzeLight)}
ul{list-style:none}
button{font:inherit;cursor:pointer}
[id]{scroll-margin-top:96px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  a{transition:none}
}

/* --------------------------------------------------------------------------
   The ledger rule — the signature. A thin double hairline in bronze.
   -------------------------------------------------------------------------- */
.lrule{width:64px;height:7px;border-top:1px solid var(--c-bronze);border-bottom:1px solid var(--c-bronze)}
.lrule.wide{width:100%}
.lrule.on-dark{border-color:rgba(203,167,111,0.6)}

/* --------------------------------------------------------------------------
   Type scale — t-* classes. Display = Source Serif 4, body = Inter.
   -------------------------------------------------------------------------- */
.t-display{font-family:var(--f-display);font-weight:600;font-size:54px;line-height:1.08;letter-spacing:-0.012em;color:var(--c-ink)}
.t-h2{font-family:var(--f-display);font-weight:600;font-size:38px;line-height:1.12;letter-spacing:-0.008em;color:var(--c-ink)}
.t-h3{font-family:var(--f-display);font-weight:600;font-size:25px;line-height:1.2;color:var(--c-ink)}
.t-title{font-family:var(--f-display);font-weight:600;font-size:20px;line-height:1.28;color:var(--c-ink)}
.t-eyebrow{font-family:var(--f-body);font-weight:600;font-size:12px;line-height:1.4;letter-spacing:0.16em;text-transform:uppercase;color:var(--c-bronzeInk)}
.t-lead{font-size:18.5px;line-height:1.6;color:var(--c-muted)}
.t-body{font-size:16px;line-height:1.65;color:var(--c-muted)}
.t-bodyStrong{font-weight:600;font-size:16px;line-height:1.5;color:var(--c-ink)}
.t-small{font-size:14px;line-height:1.55;color:var(--c-muted)}
.t-fine{font-size:12.5px;line-height:1.55;color:var(--c-muted)}
.t-num{font-family:var(--f-display);font-weight:600;font-size:14.5px;letter-spacing:0.06em;color:var(--c-bronzeInk);font-variant-numeric:lining-nums}
.t-navLink{font-family:var(--f-body);font-weight:500;font-size:15px;line-height:1.2;color:var(--c-ink)}
.t-quote{font-family:var(--f-display);font-style:italic;font-size:18px;line-height:1.6;color:var(--c-ink)}
.t-result{font-family:var(--f-display);font-weight:600;font-size:44px;line-height:1.05;letter-spacing:-0.01em;color:var(--c-ink);font-variant-numeric:lining-nums}
.t-price{font-family:var(--f-display);font-weight:600;font-size:30px;line-height:1.1;color:var(--c-ink)}
/* on-dark variants */
.t-displayLight{font-family:var(--f-display);font-weight:600;font-size:54px;line-height:1.08;letter-spacing:-0.012em;color:var(--c-light)}
.t-h2Light{font-family:var(--f-display);font-weight:600;font-size:38px;line-height:1.12;letter-spacing:-0.008em;color:var(--c-light)}
.t-titleLight{font-family:var(--f-display);font-weight:600;font-size:20px;line-height:1.28;color:var(--c-light)}
.t-leadLight{font-size:18.5px;line-height:1.6;color:var(--c-lightMuted)}
.t-bodyLight{font-size:16px;line-height:1.65;color:var(--c-lightMuted)}
.t-smallLight{font-size:14px;line-height:1.55;color:var(--c-lightMuted)}
.t-fineLight{font-size:12.5px;line-height:1.55;color:var(--c-lightMuted)}
.t-eyebrowLight{font-family:var(--f-body);font-weight:600;font-size:12px;line-height:1.4;letter-spacing:0.16em;text-transform:uppercase;color:var(--c-bronzeLight)}
.t-resultLight{font-family:var(--f-display);font-weight:600;font-size:44px;line-height:1.05;letter-spacing:-0.01em;color:var(--c-light);font-variant-numeric:lining-nums}
@media (max-width:1099px){
  .t-display,.t-displayLight{font-size:44px}
  .t-h2,.t-h2Light{font-size:32px}
  .t-result,.t-resultLight{font-size:38px}
}
@media (max-width:819px){
  .t-display,.t-displayLight{font-size:35px}
  .t-h2,.t-h2Light{font-size:27px}
  .t-h3{font-size:22px}
  .t-lead,.t-leadLight{font-size:17px}
  .t-result,.t-resultLight{font-size:33px}
}

/* --------------------------------------------------------------------------
   Buttons + chips
   -------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 28px;border-radius:var(--r-btn);background:var(--c-ox);
  font-family:var(--f-body);font-weight:600;font-size:15.5px;color:#fff;
  box-shadow:var(--shadow-btn);border:none;width:fit-content}
.btn:hover{background:var(--c-oxDeep);opacity:1}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13.5px 26px;border-radius:var(--r-btn);border:1.5px solid var(--c-ox);
  font-family:var(--f-body);font-weight:600;font-size:15.5px;color:var(--c-ox);width:fit-content}
.btn-ghost:hover{background:var(--c-oxWash);opacity:1}
.btn-light{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 28px;border-radius:var(--r-btn);background:var(--c-paper);
  font-family:var(--f-body);font-weight:600;font-size:15.5px;color:var(--c-ink);width:fit-content}
.btn-lightGhost{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13.5px 26px;border-radius:var(--r-btn);border:1.5px solid var(--c-hairlineOnDark);
  font-family:var(--f-body);font-weight:600;font-size:15.5px;color:var(--c-light);width:fit-content}
.btn-sm{padding:11px 20px;font-size:14.5px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.textlink{font-family:var(--f-body);font-weight:600;font-size:15px;color:var(--c-ox)}
.card-foot .textlink{white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  background:var(--c-white);border:1px solid var(--c-hairline);border-radius:3px;
  font-size:14px;color:var(--c-ink)}
.chip-row{display:flex;flex-wrap:wrap;gap:10px}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--c-paper);border-bottom:1px solid var(--c-hairline)}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:1188px;margin:0 auto;padding:14px 24px}
.wordmark{display:flex;flex-direction:column;gap:3px;width:fit-content}
.wordmark-name{font-family:var(--f-display);font-weight:600;font-size:20px;letter-spacing:0.005em;color:var(--c-ink);line-height:1.1}
.wordmark-sub{font-family:var(--f-body);font-weight:600;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--c-bronzeInk)}
.wordmark .lrule{width:100%;height:5px}
.site-nav{display:flex;gap:24px;align-items:center}
.header-actions{display:flex;gap:18px;align-items:center}
.quicknav{display:none;gap:20px;align-items:center;overflow-x:auto;padding:0 24px 10px;
  -webkit-overflow-scrolling:touch}
.quicknav a{font-family:var(--f-body);font-weight:500;font-size:14px;color:var(--c-ox);white-space:nowrap}
@media (max-width:919px){
  .site-nav,.header-phone{display:none}
  .quicknav{display:flex}
}

/* --------------------------------------------------------------------------
   Sticky mobile call / case-review bar
   -------------------------------------------------------------------------- */
.mobilebar{display:none}
@media (max-width:819px){
  .mobilebar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;
    bottom:0;left:0;right:0;z-index:110;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(247,244,238,0.96);border-top:1px solid var(--c-hairline);backdrop-filter:blur(8px)}
  .mobilebar .btn,.mobilebar .btn-ghost{width:100%;padding:13px 8px;font-size:14.5px}
  body{padding-bottom:74px}
}

/* --------------------------------------------------------------------------
   Sections + layout
   -------------------------------------------------------------------------- */
.section{display:flex;flex-direction:column;align-items:center;padding:100px 24px;background:var(--c-paper)}
.section.tight{padding:68px 24px}
.bg-white{background:var(--c-white)}
.bg-oat{background:var(--c-oat)}
.bg-parch{background:var(--c-parch)}
.bg-charcoal{background:linear-gradient(170deg, var(--c-charcoal), var(--c-charcoalDeep))}
.inner{width:100%;max-width:1120px;display:flex;flex-direction:column;gap:48px}
.inner.narrow{max-width:780px}
.section-head{display:flex;flex-direction:column;gap:14px;align-items:flex-start;max-width:680px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.split{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:center}
.split.rev{grid-template-columns:6fr 5fr}
@media (max-width:1099px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .split,.split.rev{gap:40px}
}
@media (max-width:819px){
  .section{padding:68px 24px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .split,.split.rev{grid-template-columns:1fr;gap:36px}
  .split .visual-first{order:-1}
}

/* Trust strip */
.trust{display:grid;grid-template-columns:repeat(4,1fr);width:100%;max-width:1120px}
.trust > div{display:flex;flex-direction:column;gap:5px;padding:22px 28px;border-left:1px solid var(--c-hairline)}
.trust > div:first-child{border-left:none}
@media (max-width:819px){
  .trust{grid-template-columns:1fr}
  .trust > div{border-left:none;border-top:1px solid var(--c-hairline);padding:16px 0}
  .trust > div:first-child{border-top:none}
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card{display:flex;flex-direction:column;gap:14px;padding:28px;background:var(--c-white);
  border:1px solid var(--c-hairline);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.card .rule{height:1px;background:var(--c-hairline);width:100%}
.card-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 12px;margin-top:auto}
.price-wrap{display:flex;gap:6px 8px;align-items:baseline;flex-wrap:wrap;min-width:0}
.price-wrap .t-price{white-space:nowrap}
/* A card in a 4-up row is only ~204px wide — a price plus its qualifier plus
   the "Details →" link cannot share that line, and the link would render
   outside the card border. Stack the footer while the grid is 4-up so all four
   cards match; restore the side-by-side row at 2-up, where cards are wider.
   HOW TO EDIT: raise the breakpoint if you lengthen the price or qualifier. */
.grid-4 .card-foot{flex-direction:column;align-items:flex-start;gap:10px}
@media (max-width:1099px){
  .grid-4 .card-foot{flex-direction:row;align-items:flex-end;gap:10px 12px}
}
.icon-chip{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:4px;background:var(--c-oxWash);flex-shrink:0}
.feature-list{display:flex;flex-direction:column;gap:9px;padding:2px 0}
.feature-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--c-ink)}
.feature-list li svg{flex-shrink:0;margin-top:3px}
.feature-list.on-dark li{color:var(--c-lightMuted)}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.steps.four{grid-template-columns:repeat(4,1fr)}
.step{display:flex;flex-direction:column;gap:10px;padding-top:18px;
  border-top:3px double var(--c-bronze)}
.bg-charcoal .step{border-top-color:rgba(203,167,111,0.55)}
@media (max-width:819px){
  .steps,.steps.four{grid-template-columns:1fr;gap:26px}
}

/* --------------------------------------------------------------------------
   Case results — numerals framed by the ledger rule. Keep the disclaimer.
   -------------------------------------------------------------------------- */
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%}
.result{display:flex;flex-direction:column;gap:8px;padding:26px 4px 22px;
  border-top:3px double var(--c-bronze);border-bottom:3px double var(--c-bronze)}
.bg-charcoal .result{border-color:rgba(203,167,111,0.55)}
@media (max-width:819px){.results{grid-template-columns:1fr;gap:18px}}

/* FAQ — native details/summary, no JS */
.faq{display:flex;flex-direction:column;width:100%}
.faq details{border-top:1px solid var(--c-hairline)}
.faq details:last-child{border-bottom:1px solid var(--c-hairline)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 4px;cursor:pointer;list-style:none;font-family:var(--f-display);
  font-weight:600;font-size:18.5px;color:var(--c-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-display);font-weight:500;font-size:24px;
  color:var(--c-ox);line-height:1;flex-shrink:0;transition:transform 150ms ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-a{padding:0 4px 22px;max-width:640px}
@media (prefers-reduced-motion: reduce){.faq summary::after{transition:none}}

/* Reviews */
.review-card{display:flex;flex-direction:column;gap:12px;padding:26px 28px;background:var(--c-white);
  border:1px solid var(--c-hairline);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.stars{color:var(--c-bronzeInk);font-size:14px;letter-spacing:2px}
.review-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* --------------------------------------------------------------------------
   Hero — "the reversed letterhead"
   A law firm's authority is its record, so the hero is set like the firm's own
   letterhead reversed out on charcoal: a ruled practice line across the top,
   the argument in Source Serif, the record as ruled entries rather than pills,
   and the partners photographed along the bottom edge as the closing signature.
   The dark ground is deliberate — it is what separates this template on sight
   from every other one in the line.

   HOW TO EDIT: each <div> inside <dl class="record"> is one entry. Three fit
   the row comfortably; a fourth reflows on its own below 1099px.
   -------------------------------------------------------------------------- */
.hero-section{display:flex;flex-direction:column;align-items:center;padding:52px 24px 0}
.hero-section .inner{gap:28px}

/* Letterhead rule */
.hero-letterhead{display:flex;align-items:center;gap:20px}
.lh-rule{flex:1;min-width:32px;height:1px;background:var(--c-hairlineOnDark)}

.hero-brief-row{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:32px 64px;align-items:end}
.hero-brief{display:flex;flex-direction:column;gap:20px;max-width:640px}
.hero-brief .t-displayLight{max-width:600px}

/* The docket — the firm's index, set as ruled entries rather than cards */
.docket{display:flex;flex-direction:column;padding-bottom:4px}
.docket > a{display:grid;grid-template-columns:auto 1fr;gap:3px 16px;align-items:baseline;
  padding:14px 0;border-top:1px solid var(--c-hairlineOnDark);
  transition:border-top-color .18s ease}
.docket > a:first-child{border-top-color:rgba(203,167,111,0.55)}
.docket > a:hover{border-top-color:var(--c-bronzeLight);opacity:1}
.docket-num{font-family:var(--f-body);font-weight:600;font-size:11.5px;line-height:1.4;
  letter-spacing:0.16em;color:var(--c-bronzeLight)}
.docket-name{font-family:var(--f-display);font-weight:600;font-size:19px;line-height:1.25;
  color:var(--c-light)}
.docket-note{grid-column:2;font-size:13.5px;line-height:1.5;color:var(--c-lightMuted)}

/* The bench — partners along the bottom edge of the dark band */
.hero-bench{position:relative;width:100%;margin:6px 0 0;aspect-ratio:2.6;overflow:hidden;
  border-radius:var(--r-card) var(--r-card) 0 0;
  background:linear-gradient(158deg, #F3EDE1 0%, #E9E1CF 55%, #D8CBAE 100%)}
.hero-bench > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 20%;display:block}
.hero-bench figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 26px 16px;
  background:linear-gradient(180deg, rgba(19,18,16,0) 0%, rgba(19,18,16,0.86) 72%)}

@media (max-width:1099px){
  .hero-brief-row{gap:28px 44px}
}
@media (max-width:819px){
  .hero-section{padding:40px 24px 0}
  .hero-letterhead{flex-wrap:wrap;gap:10px}
  .lh-rule{display:none}
  .hero-brief-row{grid-template-columns:1fr;gap:30px;align-items:start}
  .hero-bench{aspect-ratio:1.7}
  .hero-bench figcaption{padding:38px 20px 14px}
}

/* Attorney portrait tiles — photograph on a parchment backdrop */
.portrait{position:relative;aspect-ratio:0.86;border-radius:var(--r-tile);overflow:hidden;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--c-hairline);
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(255,255,255,0.7), rgba(255,255,255,0) 60%),
    linear-gradient(165deg, #EFE8D9, #DDD0B4)}
.portrait > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.portrait .tag{position:absolute;z-index:2;bottom:10px;left:10px;padding:4px 11px;border-radius:3px;
  background:rgba(28,27,24,0.8);color:var(--c-light);font-size:12px;line-height:1.4}

/* Inline photograph inside a card (office shot on contact.html). Framed like the
   tiles above rather than sized on the <img> itself — as a column flex item an
   image takes its natural height and ignores aspect-ratio. */
.card-photo{position:relative;flex:none;width:100%;aspect-ratio:1.5;overflow:hidden;
  border-radius:var(--r-tile);border:1px solid var(--c-hairline)}
.card-photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* --------------------------------------------------------------------------
   Comparison / pricing tables
   -------------------------------------------------------------------------- */
.table-wrap{width:100%;overflow-x:auto;border:1px solid var(--c-hairline);border-radius:var(--r-card);background:var(--c-white)}
.cmp{width:100%;border-collapse:collapse;min-width:560px}
.cmp th,.cmp td{padding:16px 20px;text-align:left;font-size:15px;line-height:1.5;
  border-top:1px solid var(--c-hairline);vertical-align:top}
.cmp thead th{border-top:none;font-family:var(--f-display);font-weight:600;font-size:16px;color:var(--c-ink);
  border-bottom:3px double var(--c-bronze)}
.cmp thead th.us{color:var(--c-ox)}
.cmp td:first-child{font-weight:600;color:var(--c-ink);width:26%}
.cmp td{color:var(--c-muted)}
.cmp td.us{background:var(--c-oxWash);color:var(--c-ink)}

/* Ledger rows (fees, what-to-bring) */
.price-rows{display:flex;flex-direction:column;width:100%}
.price-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:14px 4px;border-top:1px solid var(--c-hairline)}
.price-row:last-child{border-bottom:1px solid var(--c-hairline)}

/* --------------------------------------------------------------------------
   Forms (contact page)
   -------------------------------------------------------------------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.form-grid .full{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--f-body);font-weight:600;font-size:14px;color:var(--c-ink)}
.field input,.field select,.field textarea{padding:13px 14px;border:1px solid var(--c-hairline);
  border-radius:var(--r-btn);background:var(--c-white);font:inherit;font-size:15.5px;color:var(--c-ink);width:100%}
.field input::placeholder,.field textarea::placeholder{color:rgba(28,27,24,0.5)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2.5px solid var(--c-ox);outline-offset:1px;border-color:var(--c-ox)}
.checkline{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--c-muted)}
.checkline input{width:17px;height:17px;margin-top:2px;accent-color:var(--c-ox);flex-shrink:0}
@media (max-width:819px){.form-grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer{display:flex;flex-direction:column;align-items:center;
  padding:64px 24px 28px;background:var(--c-charcoalDeep)}
.footer-inner{width:100%;max-width:1120px;display:flex;flex-direction:column;gap:40px}
.footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;align-items:start}
.footer-col{display:flex;flex-direction:column;gap:10px}
.site-footer .wordmark-name{color:var(--c-light)}
.site-footer .wordmark-sub{color:var(--c-bronzeLight)}
.site-footer .wordmark .lrule{border-color:rgba(203,167,111,0.55)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:18px;border-top:1px solid var(--c-hairlineOnDark)}
@media (max-width:819px){
  .footer-cols{grid-template-columns:1fr;gap:30px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}

/* --------------------------------------------------------------------------
   Page-hero (interior pages) + prose (legal / read-me)
   -------------------------------------------------------------------------- */
.page-hero{display:flex;flex-direction:column;align-items:center;
  padding:72px 24px 64px;background:linear-gradient(180deg, var(--c-parch), var(--c-paper))}
.page-hero.oat{background:linear-gradient(180deg, var(--c-oat), var(--c-paper))}
.prose{display:flex;flex-direction:column;gap:18px;max-width:760px}
.prose h2{font-family:var(--f-display);font-weight:600;font-size:24px;color:var(--c-ink);padding-top:12px}
.prose p,.prose li{font-size:16px;line-height:1.68;color:var(--c-muted)}
.prose ul{list-style:disc;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.prose strong{color:var(--c-ink)}
.notice{display:flex;flex-direction:column;gap:8px;padding:22px 24px;background:var(--c-oat);
  border-left:3px double var(--c-bronze);border-radius:0 var(--r-card) var(--r-card) 0}
.readme-step{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--c-hairline)}
.readme-step .t-num{margin-top:2px;white-space:nowrap}
.readme-step code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  background:var(--c-parch);border-radius:4px;padding:2px 7px;color:var(--c-ink);overflow-wrap:anywhere}

/* Timeline (personal-injury process) */
.timeline{display:flex;flex-direction:column;width:100%;max-width:760px}
.tl-item{display:flex;gap:20px;padding:20px 0;border-top:1px solid var(--c-hairline)}
.tl-item:last-child{border-bottom:1px solid var(--c-hairline)}
.tl-item .t-num{min-width:64px;padding-top:2px}
.tl-item > div{display:flex;flex-direction:column;gap:6px}