/* =====================================================================
   Florida Local Counsel — Zachary S. Gaynor, Esq.
   Static site stylesheet. Recreated from the Claude Design prototype
   (project/Florida Local Counsel.dc.html). Palette: deep navy / cream /
   brass. Type: Libre Caslon Text (display) + Public Sans (body).
   ===================================================================== */

:root {
  --navy: #14263d;        /* primary deep navy */
  --navy-deep: #101d2f;   /* footer / darkest */
  --cream: #f6f2ea;       /* page background */
  --cream-card: #fffdf8;  /* card surfaces */
  --cream-band: #efe7d6;  /* tinted bands */
  --brass: #9a7b3f;       /* accent / links */
  --brass-hover: #b08f4d; /* accent hover */
  --gold: #c4a45f;        /* lighter gold on dark */
  --ink: #22303f;         /* body text */
  --line: rgba(20, 38, 61, 0.1);
  --line-strong: rgba(20, 38, 61, 0.18);
  --err: #b4452f;
  --err-line: #c98f7a;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Public Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

button { font-family: inherit; }
input, textarea, select { font-family: inherit; }

::selection { background: var(--brass); color: #fff; }

a { color: inherit; }

h1, h2, h3, h4 { font-family: 'Libre Caslon Text', serif; }

@keyframes flcUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------- Layout ------------------------------ */
.page { min-height: 100vh; display: flex; flex-direction: column; }
.main { flex: 1; }

/* Section bands (full-bleed background colors) */
.band-navy  { background: var(--navy); color: #ede6d8; position: relative; overflow: hidden; }
.band-cream { background: var(--cream-band); }
.band-deep  { background: var(--navy-deep); color: #9aa6b2; }

/* Centered content wrappers with vertical rhythm */
.sec            { max-width: 1180px; margin: 0 auto; padding: 90px 32px; }
.sec--hero      { padding: 96px 32px 88px; position: relative; }
.sec--84        { padding: 84px 32px; }
.sec--72        { padding: 72px 32px; }
.sec--pagehero  { padding: 72px 32px 64px; }
.sec--cta       { padding: 72px 32px; }
.sec--900       { max-width: 900px; padding: 72px 32px; }
.sec--840       { max-width: 840px; padding: 64px 32px; }
.sec--64        { padding: 64px 32px; }

/* --------------------------- Shared buttons -------------------------- */
.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
  font-family: inherit;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}
.btn-navy  { background: var(--navy); color: #f3eddf; }
.btn-navy:hover  { background: var(--brass); color: #fff; }
.btn-brass { background: var(--brass); color: #fff; }
.btn-brass:hover { background: var(--brass-hover); }
.btn-ghost { background: transparent; color: #ede6d8; border: 1px solid rgba(237, 230, 216, 0.35); }
.btn-ghost:hover { border-color: var(--gold); color: #fff; }

.btn-sm { font-size: 14px; padding: 11px 20px; letter-spacing: 0.02em; }
.btn-md { font-size: 15px; padding: 15px 28px; letter-spacing: 0.01em; }
.btn-lg { font-size: 16px; padding: 17px 34px; }

/* Inline text/arrow link */
.link-arrow {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--brass); font-weight: 600; font-size: 15px;
  text-decoration: none; white-space: nowrap;
}
.link-arrow:hover { color: var(--brass-hover); }

/* Eyebrow / kicker label */
.eyebrow {
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 600; color: var(--brass); margin-bottom: 14px;
}
.eyebrow--gold { color: var(--gold); letter-spacing: 0.22em; }

/* ------------------------------- Header ------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 242, 234, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1180px; margin: 0 auto; padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand {
  display: flex; align-items: center; gap: 13px;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 0; text-decoration: none;
}
.brand-mark {
  width: 42px; height: 42px; background: var(--navy); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Libre Caslon Text', serif; font-weight: 700;
  font-size: 17px; letter-spacing: 0.02em; flex: 0 0 auto;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-family: 'Libre Caslon Text', serif; font-size: 18px; font-weight: 700;
  color: var(--navy); letter-spacing: 0.01em;
}
.brand-sub {
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--brass); font-weight: 600; margin-top: 2px;
}

.desktop-nav { display: flex; align-items: center; gap: 30px; }
.nav-link {
  position: relative; background: none; border: none; cursor: pointer;
  font-size: 15px; font-weight: 500; color: #27384a; padding: 6px 0;
  letter-spacing: 0.01em; text-decoration: none;
}
.nav-link.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--brass);
}

/* Burger (hidden on desktop) */
.burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: var(--navy); border: none;
  cursor: pointer; flex-direction: column; gap: 4px;
}
.burger span { width: 20px; height: 2px; background: #f3eddf; display: block; }

/* Mobile dropdown menu */
.mobile-menu {
  border-top: 1px solid var(--line); background: var(--cream);
  padding: 8px 24px 18px; display: flex; flex-direction: column;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a:not(.mobile-cta) {
  background: none; border: none; border-bottom: 1px solid rgba(20, 38, 61, 0.08);
  text-align: left; cursor: pointer; font-size: 16px; font-weight: 500;
  color: #27384a; padding: 14px 4px; text-decoration: none;
}
.mobile-cta { margin-top: 14px; text-align: center; font-size: 15px; padding: 14px; }

/* -------------------------------- Hero ------------------------------- */
.hero-rings { position: absolute; border-radius: 50%; }
.hero-ring-1 { top: -120px; right: -80px; width: 460px; height: 460px; border: 1px solid rgba(196, 164, 95, 0.18); }
.hero-ring-2 { top: -40px;  right: 40px;  width: 300px; height: 300px; border: 1px solid rgba(196, 164, 95, 0.12); }

.hero-content { max-width: 760px; animation: flcUp .7s ease both; position: relative; }
.hero-content h1 {
  font-weight: 700; font-size: 58px; line-height: 1.05; letter-spacing: -0.01em;
  margin: 0 0 24px; color: #f6f1e6;
}
.hero-lede {
  font-size: 19px; line-height: 1.6; color: #c5cdd6; margin: 0 0 36px; max-width: 620px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.trust-bar {
  margin-top: 64px; padding-top: 30px;
  border-top: 1px solid rgba(237, 230, 216, 0.16);
  display: flex; gap: 40px; flex-wrap: wrap; position: relative;
}
.trust-item { display: flex; flex-direction: column; gap: 4px; }
.trust-k { font-family: 'Libre Caslon Text', serif; font-size: 15px; color: var(--gold); font-weight: 700; }
.trust-v { font-size: 13px; color: #9aa6b2; letter-spacing: 0.02em; }

/* ------------------------------ Section heads ------------------------ */
.sec-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap; margin-bottom: 48px;
}
.sec-head-text { max-width: 560px; }
.sec-head h2 {
  font-weight: 700; font-size: 40px; line-height: 1.1; margin: 0; color: var(--navy);
}
.sec-head-center { text-align: center; max-width: 600px; margin: 0 auto 50px; }
.sec-head-center h2 { font-size: 38px; font-weight: 700; line-height: 1.12; margin: 0; color: var(--navy); }

/* ------------------------------- Grids ------------------------------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-why      { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.grid-why-cards{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(20,38,61,0.12); border: 1px solid rgba(20,38,61,0.12); }
.grid-about    { display: grid; grid-template-columns: 1.4fr 0.85fr; gap: 56px; align-items: start; }
.grid-contact  { display: grid; grid-template-columns: 1.5fr 0.8fr; gap: 56px; align-items: start; }

/* ----------------------------- Service cards ------------------------- */
.service-card {
  background: var(--cream-card); border: 1px solid var(--line);
  padding: 32px 28px; display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(20,38,61,0.4); }
.service-num { font-family: 'Libre Caslon Text', serif; font-size: 15px; color: var(--brass); font-weight: 700; letter-spacing: 0.04em; }
.service-card h3 { font-weight: 700; font-size: 23px; line-height: 1.2; margin: 14px 0 12px; color: var(--navy); }
.service-card p  { font-size: 15px; line-height: 1.6; color: #51606f; margin: 0 0 20px; }
.service-list {
  list-style: none; margin: auto 0 0; padding: 18px 0 0;
  display: flex; flex-direction: column; gap: 9px; border-top: 1px solid rgba(20,38,61,0.08);
}
.service-list li { display: flex; gap: 10px; font-size: 14px; color: #3c4654; line-height: 1.45; }
.service-list li span { color: var(--brass); font-weight: 700; flex: 0 0 auto; }

/* ------------------------------- Why ------------------------------- */
.why-text h2 { font-weight: 700; font-size: 36px; line-height: 1.12; margin: 0 0 18px; color: var(--navy); }
.why-text p  { font-size: 16px; line-height: 1.65; color: #4a5763; margin: 0 0 24px; }
.why-card { background: var(--cream); padding: 28px 24px; }
.why-card .n { font-family: 'Libre Caslon Text', serif; font-size: 30px; color: var(--gold); font-weight: 700; margin-bottom: 10px; }
.why-card h4 { font-size: 18px; color: var(--navy); margin: 0 0 8px; font-weight: 700; }
.why-card p  { font-size: 14px; line-height: 1.55; color: #51606f; margin: 0; }

/* ------------------------- Steps (home preview) ---------------------- */
.step { display: flex; flex-direction: column; }
.step-num { font-family: 'Libre Caslon Text', serif; font-size: 15px; color: var(--brass); font-weight: 700; border-top: 2px solid var(--navy); padding-top: 14px; }
.step h4 { font-size: 19px; color: var(--navy); margin: 12px 0 8px; font-weight: 700; }
.step p  { font-size: 14px; line-height: 1.55; color: #51606f; margin: 0; }

/* ----------------------- Steps (how-it-works full) ------------------- */
.step-row {
  display: flex; gap: 28px; align-items: flex-start;
  padding: 30px 0; border-bottom: 1px solid rgba(20,38,61,0.12);
}
.step-badge {
  flex: 0 0 auto; width: 62px; height: 62px; background: var(--navy); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Libre Caslon Text', serif; font-size: 22px; font-weight: 700;
}
.step-row-body { flex: 1; }
.step-row-body h3 { font-size: 24px; color: var(--navy); margin: 4px 0 8px; font-weight: 700; }
.step-row-body p  { font-size: 16px; line-height: 1.65; color: #4a5763; margin: 0; }

/* ------------------------------ CTA band ----------------------------- */
.cta-band {
  display: flex; justify-content: space-between; align-items: center;
  gap: 36px; flex-wrap: wrap;
}
.cta-band h2 { font-weight: 700; font-size: 34px; line-height: 1.14; margin: 0 0 12px; color: #f6f1e6; }
.cta-band p  { font-size: 17px; color: #bcc6d0; margin: 0; line-height: 1.55; max-width: 620px; }

/* Inline call-to-action strip (how-it-works / faq footer) */
.cta-strip {
  margin-top: 44px; background: var(--cream-band); padding: 34px 32px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
}
.cta-strip h3 { font-size: 22px; color: var(--navy); margin: 0 0 6px; font-weight: 700; }
.cta-strip p  { font-size: 15px; color: #51606f; margin: 0; }

/* ----------------------------- Page heroes --------------------------- */
.page-hero h1 {
  font-weight: 700; font-size: 50px; line-height: 1.07; margin: 0;
  color: #f6f1e6; max-width: 820px;
}
.page-hero h1.has-lede { margin-bottom: 18px; }
.page-hero-lede { font-size: 18px; color: #bcc6d0; margin: 0; max-width: 640px; line-height: 1.6; }
.page-hero-lede--wide { max-width: 600px; }

/* ------------------------------- About ------------------------------- */
.about-lead { font-size: 19px; line-height: 1.6; color: #2c3a48; margin: 0 0 22px; font-family: 'Libre Caslon Text', serif; }
.about-body p { font-size: 16px; line-height: 1.7; color: #4a5763; margin: 0 0 18px; }
.about-body p:last-child { margin-bottom: 0; }

.cred-card { background: var(--cream-card); border: 1px solid rgba(20,38,61,0.12); padding: 30px 28px; }
.cred-card h3 {
  font-size: 18px; color: var(--navy); margin: 0 0 18px; font-weight: 700;
  border-bottom: 1px solid var(--line); padding-bottom: 14px;
}
.cred-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.cred-list li { display: flex; flex-direction: column; gap: 3px; }
.cred-k { font-size: 15px; color: var(--navy); font-weight: 600; }
.cred-v { font-size: 13.5px; color: #6a7681; }
.cred-card .btn { margin-top: 24px; width: 100%; text-align: center; font-size: 15px; padding: 14px; }

/* -------------------------------- FAQ -------------------------------- */
.faq-list { display: flex; flex-direction: column; border-top: 1px solid rgba(20,38,61,0.14); }
.faq-item { border-bottom: 1px solid rgba(20,38,61,0.14); }
.faq-q {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  text-align: left; padding: 24px 4px; list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q-text { font-family: 'Libre Caslon Text', serif; font-size: 20px; color: var(--navy); font-weight: 700; line-height: 1.3; }
.faq-sign { flex: 0 0 auto; font-size: 24px; color: var(--brass); font-weight: 400; width: 24px; text-align: center; }
.faq-sign::before { content: "+"; }
.faq-item[open] .faq-sign::before { content: "\2013"; } /* en dash */
.faq-a {
  font-size: 16px; line-height: 1.7; color: #4a5763; margin: 0;
  padding: 0 4px 26px; max-width: 680px;
}
.faq-foot { margin-top: 44px; text-align: center; }
.faq-foot p { font-size: 16px; color: #51606f; margin: 0 0 16px; }

/* ------------------------------- Contact ----------------------------- */
.form-note { font-size: 12.5px; color: #7d8893; margin: 18px 0 0; line-height: 1.55; }

/* Direct-contact column (replaces the intake form) */
.contact-lead-title { font-size: 34px; line-height: 1.12; margin: 0 0 16px; color: var(--navy); font-weight: 700; }
.contact-lead { font-size: 17px; line-height: 1.65; color: #4a5763; margin: 0 0 28px; max-width: 520px; }
.contact-direct { display: flex; flex-wrap: wrap; gap: 32px; margin: 0 0 30px; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contact-direct-row { display: flex; flex-direction: column; gap: 5px; }
.contact-direct-row a { color: var(--navy); text-decoration: none; font-size: 19px; font-weight: 600; font-family: 'Libre Caslon Text', serif; }
.contact-direct-row a:hover { color: var(--brass); }

.contact-checklist { list-style: none; margin: 14px 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.contact-checklist li { display: flex; gap: 10px; font-size: 15.5px; color: #3c4654; line-height: 1.5; max-width: 540px; }
.contact-checklist li span { color: var(--brass); font-weight: 700; flex: 0 0 auto; }

.contact-aside { display: flex; flex-direction: column; gap: 24px; }
.contact-card { background: var(--navy); color: #eae3d4; padding: 30px 28px; }
.contact-card h3 { font-size: 19px; margin: 0 0 18px; color: #f6f1e6; font-weight: 700; }
.contact-rows { display: flex; flex-direction: column; gap: 18px; }
.contact-label { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); font-weight: 600; margin-bottom: 4px; }
.contact-card a { color: #eae3d4; text-decoration: none; font-size: 15.5px; }
.contact-card a.email { border-bottom: 1px solid rgba(196,164,95,0.4); }
.contact-card a:hover { color: #fff; }
.contact-coverage { font-size: 15px; color: #c5cdd6; line-height: 1.5; }
.response-card { background: var(--cream-band); padding: 26px 24px; }
.response-card h4 { font-size: 16px; color: var(--navy); margin: 0 0 10px; font-weight: 700; }
.response-card p  { font-size: 14px; color: #51606f; margin: 0; line-height: 1.6; }

/* ------------------------------- Footer ------------------------------ */
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 56px 32px 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-mark {
  width: 38px; height: 38px; background: var(--brass); color: var(--navy-deep);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Libre Caslon Text', serif; font-weight: 700; font-size: 15px;
}
.footer-name { font-family: 'Libre Caslon Text', serif; font-size: 17px; font-weight: 700; color: #f6f1e6; }
.footer-desc { font-size: 14px; line-height: 1.65; margin: 0; max-width: 340px; color: #8a96a3; }
.footer-head { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: 14px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-links a { background: none; border: none; cursor: pointer; color: #9aa6b2; font-size: 14.5px; padding: 0; text-align: left; text-decoration: none; }
.footer-links a:hover { color: #f6f1e6; }
.footer-contact { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; }
.footer-contact a { color: #9aa6b2; text-decoration: none; }
.footer-contact a:hover { color: #f6f1e6; }
.footer-contact span { color: #8a96a3; }
.footer-bottom {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.footer-legal { font-size: 12.5px; color: #6f7b88; margin: 0; max-width: 760px; line-height: 1.6; }
.footer-bar { font-size: 12.5px; color: #6f7b88; margin: 0; }

/* ----------------------------- Responsive ---------------------------- */
@media (max-width: 880px) {
  .desktop-nav { display: none; }
  .burger { display: flex; }

  .sec, .sec--hero, .sec--84, .sec--72, .sec--pagehero,
  .sec--cta, .sec--900, .sec--840, .sec--64 { padding: 56px 24px; }
  .footer-inner { padding: 56px 24px 28px; }
  .header-inner { padding: 14px 20px; }

  .hero-content h1 { font-size: 39px; line-height: 1.08; }
  .page-hero h1 { font-size: 39px; line-height: 1.08; }

  .grid-3, .grid-why, .grid-why-cards, .grid-about, .grid-contact, .form-grid {
    grid-template-columns: 1fr;
  }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }

  .hero-rings { display: none; }
  .step-row { flex-direction: column; align-items: flex-start; }
}