/* ===========================================================
   Hendricks & Associates — DEMO site
   A fictional Brevard County law firm by Digital Footprint.
   Fifth distinct design system: formal editorial — deep forest
   green, ivory, gold hairlines, Baskerville serif headings.
   =========================================================== */

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

:root {
  --forest:    #1B3A32;
  --forest-2:  #244C41;
  --forest-dk: #122A24;
  --gold:      #A98B4F;
  --gold-lt:   #C4A968;
  --ivory:     #F8F6F1;
  --ivory-2:   #EFEBE2;
  --ink:       #1F2421;
  --muted:     #6B736E;
  --line:      #DFD9CC;
  --white:     #FFFFFF;
  --radius:    3px;
  --font-h:    'Libre Baskerville', Georgia, serif;
  --font-b:    'Inter', system-ui, sans-serif;
  --ease:      cubic-bezier(0.16,1,0.3,1);
}

html { scroll-behavior: smooth; }
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--gold); color: #fff; }
img { max-width: 100%; display: block; }
a { color: var(--forest-2); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 34px; }
.wrap--narrow { max-width: 840px; }
h1, h2, h3 { font-family: var(--font-h); font-weight: 700; line-height: 1.28; letter-spacing: -.005em; }

.eyebrow {
  display: block; font-family: var(--font-b); font-size: .7rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px;
}
.rule { width: 54px; height: 2px; background: var(--gold); margin: 22px 0; }
.rule.center { margin-inline: auto; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-b); font-weight: 600; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 16px 34px; border-radius: var(--radius); text-decoration: none;
  cursor: pointer; border: 1px solid transparent; transition: all .3s var(--ease);
}
.btn-solid { background: var(--forest); color: var(--ivory); }
.btn-solid:hover { background: var(--forest-2); transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-lt); transform: translateY(-2px); }
.btn-outline { border-color: var(--line); color: var(--forest); background: transparent; }
.btn-outline:hover { border-color: var(--forest); transform: translateY(-2px); }
.btn-outline-light { border-color: rgba(248,246,241,.4); color: var(--ivory); }
.btn-outline-light:hover { border-color: var(--gold); color: var(--gold-lt); }

/* ── Top bar + nav ────────────────────────────────────────── */
.topbar { background: var(--forest-dk); color: rgba(248,246,241,.75); font-size: .78rem; letter-spacing: .04em; }
.topbar .wrap { display: flex; justify-content: space-between; align-items: center; height: 40px; }
.topbar a { color: var(--gold-lt); text-decoration: none; font-weight: 600; }
@media (max-width: 700px) { .topbar .tb-hide { display: none; } .topbar .wrap { justify-content: center; } }

nav { background: var(--ivory); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; }
.nav-inner { max-width: 1180px; margin: 0 auto; padding: 0 34px; height: 86px; display: flex; align-items: center; justify-content: space-between; }
.brand { text-decoration: none; display: block; }
.brand-name { font-family: var(--font-h); font-size: 1.32rem; font-weight: 700; color: var(--forest); letter-spacing: -.01em; line-height: 1.1; }
.brand-sub { display: block; font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-decoration: none; transition: color .25s; }
.nav-links a:hover, .nav-links a.active { color: var(--gold); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--forest); }
@media (max-width: 940px) {
  .nav-inner { height: 72px; }
  .nav-links {
    position: fixed; inset: 112px 0 auto 0; background: var(--ivory); flex-direction: column;
    gap: 0; padding: 10px 0; border-bottom: 1px solid var(--line);
    transform: translateY(-140%); visibility: hidden;
    transition: transform .38s var(--ease), visibility 0s .38s;
  }
  .nav-links.open { transform: translateY(0); visibility: visible; transition: transform .38s var(--ease), visibility 0s; }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links li a { display: block; padding: 15px; }
  .nav-links li .btn { margin: 10px auto; }
  .nav-toggle { display: flex; }
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: var(--forest); }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(18,42,36,.94) 0%, rgba(27,58,50,.82) 55%, rgba(27,58,50,.6) 100%); }
.hero-inner { position: relative; z-index: 2; padding: 108px 0 116px; max-width: 720px; }
.hero .eyebrow { color: var(--gold-lt); }
.hero h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.5rem); color: var(--ivory); line-height: 1.22; }
.hero p { margin-top: 24px; color: rgba(248,246,241,.78); font-size: 1.08rem; max-width: 560px; }
.hero-actions { margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-badges { margin-top: 46px; padding-top: 28px; border-top: 1px solid rgba(248,246,241,.16); display: flex; gap: 40px; flex-wrap: wrap; }
.hero-badges div b { display: block; font-family: var(--font-h); font-size: 1.5rem; color: var(--gold-lt); }
.hero-badges div span { font-size: .78rem; color: rgba(248,246,241,.6); letter-spacing: .04em; }

/* ── Sections ─────────────────────────────────────────────── */
section { padding: 96px 0; }
.section-head { max-width: 680px; margin-bottom: 54px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .rule { margin-inline: auto; }
.section-head h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem); }
.section-head p { margin-top: 18px; color: var(--muted); font-size: 1.03rem; }
.band { background: var(--ivory-2); }
.band-dark { background: var(--forest); color: var(--ivory); }
.band-dark h2 { color: var(--ivory); }
.band-dark p { color: rgba(248,246,241,.72); }

/* ── Practice areas (numbered) ────────────────────────────── */
.practice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 900px) { .practice-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .practice-grid { grid-template-columns: 1fr; } }
.practice {
  background: var(--ivory); padding: 40px 32px; text-decoration: none; color: inherit;
  display: block; transition: background .35s var(--ease);
}
.practice:hover { background: var(--white); }
.practice .num { font-family: var(--font-h); font-size: .82rem; color: var(--gold); letter-spacing: .1em; }
.practice h3 { font-size: 1.22rem; margin-top: 14px; }
.practice p { color: var(--muted); font-size: .93rem; margin-top: 12px; }
.practice .more { display: inline-block; margin-top: 18px; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--forest); border-bottom: 1px solid var(--gold); padding-bottom: 3px; }
.practice:hover .more { color: var(--gold); }

/* ── Split ────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 44px; } }
.split-img { position: relative; overflow: hidden; aspect-ratio: 4/5; }
.split-img img { width: 100%; height: 100%; object-fit: cover; }
.split-img::after { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(169,139,79,.5); pointer-events: none; }
.pointlist { list-style: none; margin-top: 26px; display: grid; gap: 22px; }
.pointlist li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; }
.pointlist .n { font-family: var(--font-h); color: var(--gold); font-size: .95rem; padding-top: 2px; }
.pointlist strong { font-family: var(--font-h); font-size: 1.03rem; display: block; }
.pointlist p { color: var(--muted); font-size: .93rem; margin-top: 5px; }

/* ── Results ──────────────────────────────────────────────── */
.results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; text-align: center; }
@media (max-width: 780px) { .results { grid-template-columns: 1fr 1fr; gap: 28px; } }
.result b { display: block; font-family: var(--font-h); font-size: 2.2rem; color: var(--gold-lt); }
.result span { font-size: .84rem; color: rgba(248,246,241,.66); }
.disclaimer { margin-top: 42px; text-align: center; font-size: .78rem; color: rgba(248,246,241,.45); font-style: italic; }

/* ── Attorneys ────────────────────────────────────────────── */
.atty-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
@media (max-width: 880px) { .atty-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
.atty-img { position: relative; overflow: hidden; aspect-ratio: 3/4; margin-bottom: 22px; }
.atty-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.02); transition: filter .7s var(--ease); }
.atty:hover .atty-img img { filter: grayscale(0); }
.atty h3 { font-size: 1.22rem; }
.atty .role { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-top: 8px; }
.atty p { color: var(--muted); font-size: .93rem; margin-top: 13px; }
.creds { list-style: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 7px; }
.creds li { font-size: .84rem; color: var(--muted); padding-left: 16px; position: relative; }
.creds li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }

/* ── Quote ────────────────────────────────────────────────── */
.quote { text-align: center; max-width: 820px; margin: 0 auto; }
.quote blockquote { font-family: var(--font-h); font-size: clamp(1.2rem, .95rem + 1.3vw, 1.7rem); line-height: 1.55; color: var(--forest); }
.band-dark .quote blockquote { color: var(--ivory); }
.quote .who { margin-top: 24px; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

/* ── Page head ────────────────────────────────────────────── */
.page-head { background: var(--forest); color: var(--ivory); padding: 74px 0 66px; position: relative; overflow: hidden; }
.page-head .bg { position: absolute; inset: 0; }
.page-head .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.page-head .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(18,42,36,.92), rgba(27,58,50,.72)); }
.page-head .inner { position: relative; z-index: 2; }
.crumbs { font-size: .78rem; color: rgba(248,246,241,.55); margin-bottom: 14px; letter-spacing: .06em; }
.crumbs a { color: var(--gold-lt); text-decoration: none; }
.page-head h1 { font-size: clamp(1.9rem, 1.3rem + 2.3vw, 2.9rem); color: var(--ivory); }
.page-head p { margin-top: 16px; max-width: 620px; color: rgba(248,246,241,.75); }

/* ── Practice detail rows ─────────────────────────────────── */
.pr-row { display: grid; grid-template-columns: 90px 1fr; gap: 26px; padding: 38px 0; border-bottom: 1px solid var(--line); }
@media (max-width: 620px) { .pr-row { grid-template-columns: 1fr; gap: 10px; } }
.pr-row:last-child { border-bottom: none; }
.pr-num { font-family: var(--font-h); font-size: 1.9rem; color: var(--gold); line-height: 1; }
.pr-row h3 { font-size: 1.35rem; }
.pr-row p { color: var(--muted); margin-top: 10px; }
.pr-row ul { margin-top: 14px; padding-left: 20px; color: var(--muted); font-size: .93rem; }
.pr-row li + li { margin-top: 5px; }

/* ── Contact ──────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 58px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 42px; } }
.info-block { padding: 20px 0; border-bottom: 1px solid var(--line); }
.info-block:last-of-type { border-bottom: none; }
.info-block h4 { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; }
.info-block p, .info-block a { color: var(--muted); text-decoration: none; font-size: .96rem; }
.info-block a:hover { color: var(--forest); }
.hours-row { display: flex; justify-content: space-between; font-size: .92rem; color: var(--muted); padding: 5px 0; }
.hours-row span:first-child { color: var(--ink); }

form .field { margin-bottom: 20px; }
form label { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--forest); margin-bottom: 9px; }
form input, form select, form textarea {
  width: 100%; padding: 14px 15px; background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-b); font-size: .95rem; color: var(--ink);
  transition: border-color .25s, box-shadow .25s;
}
form input:focus, form select:focus, form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(169,139,79,.14); }
form textarea { resize: vertical; min-height: 130px; }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 520px) { .f-row { grid-template-columns: 1fr; } }
.consent { display: flex; gap: 11px; align-items: flex-start; font-size: .82rem; color: var(--muted); line-height: 1.6; }
.consent input { width: auto; margin-top: 4px; flex-shrink: 0; }
.form-ok { display: none; background: var(--white); border: 1px solid var(--gold); border-radius: var(--radius); padding: 38px 30px; text-align: center; }
.form-ok h3 { font-size: 1.4rem; color: var(--forest); }
.form-ok p { color: var(--muted); margin-top: 12px; }
.map-block { margin-top: 26px; overflow: hidden; aspect-ratio: 16/9; border: 1px solid var(--line); }
.map-block img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.5); }

/* ── CTA ──────────────────────────────────────────────────── */
.cta { background: var(--forest); color: var(--ivory); text-align: center; }
.cta h2 { color: var(--ivory); font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem); }
.cta p { margin: 18px auto 0; max-width: 540px; color: rgba(248,246,241,.72); }
.cta .btn { margin-top: 32px; }

/* ── Footer ───────────────────────────────────────────────── */
footer.site { background: var(--forest-dk); color: rgba(248,246,241,.62); padding: 66px 0 26px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 42px; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
footer.site .brand-name { color: var(--ivory); }
footer.site p { font-size: .9rem; margin-top: 15px; }
footer.site h5 { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 15px; }
footer.site ul { list-style: none; display: grid; gap: 9px; }
footer.site a, footer.site li { color: rgba(248,246,241,.62); text-decoration: none; font-size: .9rem; transition: color .25s; }
footer.site a:hover { color: var(--gold-lt); }
.foot-legal { border-top: 1px solid rgba(248,246,241,.12); margin-top: 46px; padding-top: 24px; font-size: .76rem; color: rgba(248,246,241,.4); line-height: 1.7; }
.foot-legal p + p { margin-top: 8px; }

/* ── DEMO badge ───────────────────────────────────────────── */
.demo-badge {
  position: fixed; z-index: 200; right: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--forest-dk); color: var(--ivory);
  padding: 10px 16px; border-radius: 999px; text-decoration: none;
  font-family: var(--font-b); font-size: .77rem; font-weight: 500;
  box-shadow: 0 10px 30px rgba(18,42,36,.35); opacity: .84;
  transition: opacity .25s, transform .25s var(--ease);
}
.demo-badge:hover { opacity: 1; transform: translateY(-2px); }
.demo-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(169,139,79,.28); }
.demo-badge b { color: var(--ivory); font-weight: 700; }
.demo-badge .arrow { color: var(--gold-lt); }
@media (max-width: 520px) { .demo-badge { right: 10px; bottom: 10px; font-size: .71rem; padding: 9px 13px; } }

/* ── Typography detail ───────────────────────────────────────
   This site already had the strongest bones of the three (a real serif
   plus wide-tracked uppercase chrome), but it used a single roman weight
   throughout, so nothing was ever emphasised. Libre Baskerville italic
   is now loaded and used for the emotional half of headlines, with gold
   hairline rules and tabular figures for the formal, documentary feel a
   law firm wants. Restrained on purpose — the opposite of Bayside's warm
   highlighter and Coastal's airy editorial voice. */

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.hero h1 { letter-spacing: -.015em; }
.hero h1 .accent {
  font-style: italic; font-weight: 400; color: var(--gold-lt);
}
.hero p { font-size: 1.1rem; line-height: 1.72; }

/* Section headings sit above a short gold rule — a letterhead cue. */
.section-head h2, .page-head h1 { position: relative; }
.section-head h2 em, .page-head h1 em {
  font-style: italic; font-weight: 400; color: var(--gold);
}
.section-head h2::after {
  content: ''; display: block; width: 54px; height: 2px;
  background: var(--gold); margin: 18px auto 0; border-radius: 2px;
}
.section-head.left h2::after { margin-left: 0; }

/* Case results read as figures on a record, not marketing numbers. */
.result b { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hero-badges div b { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.practice .num { font-variant-numeric: tabular-nums; }

/* Firm story opens with a drop cap — formal, print-derived. */
.prose > p:first-of-type::first-letter,
.lede-drop::first-letter {
  float: left; font-family: var(--font-h);
  font-size: 3.2em; line-height: .84; font-weight: 700;
  color: var(--gold); margin: .05em .1em 0 0;
}

/* Hanging open-quote, set in the serif, the way a brief pulls a citation. */
.quote blockquote { position: relative; font-style: italic; }
.quote blockquote::before {
  content: '\201C'; position: absolute; left: -.55em; top: -.1em;
  font-family: var(--font-h); font-size: 2.4em; line-height: 1;
  color: rgba(169,139,79,.38);
}
/* The hanging glyph above sits outside the blockquote, which only clears
   the viewport by ~8px on a folded phone. Below that, bring it inline so
   it can never widen the page. */
@media (max-width: 560px) {
  .quote blockquote::before { position: static; display: block; font-size: 2em; margin-bottom: -.15em; }
}
.pointlist strong { letter-spacing: -.01em; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }