/* ==========================================================================
   Egan Law Firm — "Court Caption" Theme
   Palette: ivory paper, deep ink-navy, muted brass accent.
   Type: IBM Plex Serif (headlines) + IBM Plex Sans (body) + IBM Plex Mono
   (small caption labels) — a restrained, documentary register.
   Signature: the "caption rule" — a double horizontal rule (thin brass over
   thin navy) evoking the ruled line under a pleading caption, echoed as a
   left-hand vertical rule on cards and service rows.
   ========================================================================== */

:root {
  --paper: #f5f1e6;
  --paper-soft: #ece5d3;
  --panel: #eee7d6;
  --ink: #201d18;
  --ink-soft: #55503f;
  --navy: #1c2b40;
  --navy-deep: #121c2b;
  --brass: #a9803f;
  --brass-light: #c9a565;
  --line: #d8cfb8;
  --line-on-dark: rgba(245, 241, 230, 0.2);

  --font-display: "IBM Plex Serif", "Iowan Old Style", ui-serif, Georgia, serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --max-width: 1180px;
  --radius: 2px;
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.16;
  margin: 0 0 0.5em;
  letter-spacing: -0.005em;
}

h1 { font-size: clamp(2.3rem, 4.4vw, 3.9rem); font-weight: 500; }
h2 { font-size: clamp(1.65rem, 2.6vw, 2.35rem); }
h3 { font-size: 1.2rem; font-weight: 600; }

p { margin: 0 0 1em; color: var(--ink-soft); }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--brass); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1.1em;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--brass);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background: var(--brass);
  color: var(--navy-deep);
}
.btn-primary:hover { background: var(--brass-light); color: var(--navy-deep); }

.btn-ghost {
  background: transparent;
  border-color: var(--line-on-dark);
  color: var(--paper);
}
.btn-ghost:hover { border-color: var(--brass); color: var(--brass-light); }

.btn-outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);

}

.btn-outline:hover { border-color: var(--brass); color: var(--brass); } 

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.26rem;
  font-weight: 600;
  color: var(--navy-deep);
  letter-spacing: -0.005em;
}
.wordmark span { color: var(--brass); }

.main-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
}

.main-nav ul a {
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
}


.main-nav ul a:hover,
.main-nav ul a[aria-current="page"] {
  color: var(--navy);
  border-bottom-color: var(--brass);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: 84px;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    padding: 8px 32px 28px;
    display: none;
  }
  .main-nav.is-open { display: flex; }
  .main-nav ul {
    flex-direction: column;
    gap: 4px;
  }
  .main-nav ul li a { display: block; padding: 12px 0; }
  .main-nav .btn { margin-top: 12px; align-self: flex-start; }
}

/* ---------- Caption rule (signature element) ----------
   Modeled on the ruled line beneath a pleading caption: a thin brass rule
   sitting just above a thin navy rule, with a small centered monospace
   label — like "No. ___" but used here to mark the seam between sections. */

.caption-rule {
  position: relative;
  padding: 22px 0 0;
}
.caption-rule .rule-top,
.caption-rule .rule-bottom {
  height: 1px;
  width: 100%;
}
.caption-rule .rule-top { background: var(--brass); }
.caption-rule .rule-bottom { background: var(--navy); margin-top: 4px; }
.caption-rule.on-dark .rule-bottom { background: var(--line-on-dark); }
.caption-rule .rule-label {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--paper-cover, var(--navy-deep));
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-light);
  white-space: nowrap;
}

.hero .caption-rule {
  --paper-cover: var(--navy-deep);
  margin-top: 2.4rem;
}

@keyframes rule-settle {
  0%   { transform: scaleX(0.4); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}
.hero .caption-rule .rule-top,
.hero .caption-rule .rule-bottom {
  transform-origin: center;
  animation: rule-settle 0.8s cubic-bezier(.2,.7,.2,1) both;
}
.hero .caption-rule .rule-bottom { animation-delay: 0.08s; }

/* Left-hand caption rule echoed on cards */
.card {
  position: relative;
  border-left: 3px solid var(--brass);
}

/* ---------- Hero ---------- */

.hero {
  background: var(--navy-deep);
  color: var(--paper);
  padding: 108px 0 88px;
}

.hero .eyebrow { color: var(--brass-light); }
.hero .eyebrow::before { background: var(--brass-light); }

.hero h1 { color: var(--paper); max-width: 15ch; }

.hero-sub {
  max-width: 46ch;
  color: rgba(245, 241, 230, 0.78);
  font-size: 1.1rem;
  margin-top: 0.6em;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 2.1rem;
}

.hero-small {
  padding: 74px 0 60px;
}
.hero-small h1 { max-width: 20ch; }

/* ---------- Sections ---------- */

section { padding: 88px 0; }
.section-tight { padding: 64px 0; }

.section-header {
  max-width: 62ch;
  margin-bottom: 3rem;
}

.on-sage { background: var(--panel); }
.on-paper-soft { background: var(--paper-soft); }

/* ---------- Cards / grids ---------- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; gap: 40px; }
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 32px 28px;
  border-radius: var(--radius);
}

.card-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  color: var(--navy);
}

.card h3 { margin-bottom: 0.5em; }
.card p { margin-bottom: 0.8em; font-size: 0.96rem; }
.card a { font-size: 0.9rem; font-weight: 600; }

/* ---------- Values strip ---------- */

.values-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
@media (max-width: 860px) {
  .values-strip { grid-template-columns: 1fr; gap: 32px; }
}
.value-item .value-word {
  font-family: var(--font-display);
  font-size: 1.55rem;
  color: var(--navy);
  margin-bottom: 0.35em;
}

/* ---------- Placeholder art block (no external images) ---------- */

.art-block {
  aspect-ratio: 4 / 5;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-deep) 100%);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border-left: 3px solid var(--brass);
}
.art-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    transparent 0px,
    transparent 46px,
    rgba(245,241,230,0.05) 46px,
    rgba(245,241,230,0.05) 47px
  );
}
.art-block::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 22%;
  height: 1px;
  background: var(--brass-light);
  opacity: 0.7;
}

/* ---------- Quote / CTA band ---------- */

.cta-band {
  background: var(--navy-deep);
  color: var(--paper);
  padding: 84px 0;
  text-align: center;
}
.cta-band h2 { color: var(--paper); max-width: 20ch; margin: 0 auto 0.5em; }
.cta-band p { color: rgba(245,241,230,0.75); max-width: 48ch; margin: 0 auto 1.8em; }
.cta-band .hero-actions { justify-content: center; }

/* ---------- Services page ---------- */

.services-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.service-row {
  background: var(--paper);
  padding: 40px 32px;
  display: grid;
  grid-template-columns: 1.1fr 2fr;
  gap: 40px;
  border-left: 3px solid var(--brass);
}
.service-row h3 { margin-bottom: 0.3em; }
.service-row .service-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-style: normal;
}
@media (max-width: 700px) {
  .service-row { grid-template-columns: 1fr; gap: 12px; padding: 32px 24px; }
}

/* ---------- Our Story page ---------- */

.bio-block {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 860px) {
  .bio-block { grid-template-columns: 1fr; }
}
.bio-name { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 0.1em; }
.bio-title {
  color: var(--brass);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.4em;
}

/* ---------- Contact page ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
}
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; gap: 44px; }
}

.contact-detail {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.contact-detail:first-child { padding-top: 0; }
.contact-detail dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
  width: 110px;
  flex-shrink: 0;
}
.contact-detail dd { margin: 0; color: var(--ink); }

.form-field {
  margin-bottom: 22px;
}
.form-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
  color: var(--navy-deep);
}
.form-field input,
.form-field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--ink);
  border-radius: var(--radius);
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--brass);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}
.form-note {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 0.5em;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy-deep);
  color: rgba(245,241,230,0.7);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}
.footer-grid h4 {
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1em;
  font-weight: 500;
}
.footer-grid .wordmark { color: var(--paper); margin-bottom: 0.6em; display: block; }
.footer-grid .wordmark span { color: var(--brass-light); }
.footer-grid p { color: rgba(245,241,230,0.62); font-size: 0.92rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid a { color: rgba(245,241,230,0.75); font-size: 0.92rem; }
.footer-grid a:hover { color: var(--brass-light); }

.footer-bottom {
  border-top: 1px solid var(--line-on-dark);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: rgba(245,241,230,0.5);
}


/* ---------- Areas We Serve dropdown ---------- */

.has-dropdown { position: relative; }

.has-dropdown > .dropdown-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.has-dropdown > .dropdown-toggle::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.55;
  transition: transform 0.2s ease;
}

.has-dropdown.open > .dropdown-toggle::after,
.has-dropdown:hover > .dropdown-toggle::after {
  transform: rotate(180deg);
}

.has-dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 210px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(18, 28, 43, 0.14);
  padding: 6px 0;
  margin: 0;
  list-style: none;
  z-index: 60;
}

/* Invisible bridge over the 12px gap above the menu. Without this, moving
   the mouse from the nav link down to the menu crosses empty space that
   belongs to neither element, so :hover drops and the menu closes before
   you reach it. This pseudo-element fills that gap so hover stays
   continuous the whole way down. */
.has-dropdown .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.has-dropdown .dropdown-menu li { margin: 0; }

.has-dropdown .dropdown-menu a {
  display: block;
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  border-bottom: none;
}

.has-dropdown .dropdown-menu a:hover {
  color: var(--brass);
  background: var(--paper-soft);
}

.has-dropdown.open .dropdown-menu,
.has-dropdown:hover .dropdown-menu {
  display: block;
}

@media (max-width: 860px) {
  .has-dropdown .dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--brass);
    margin-left: 4px;
    padding: 4px 0 4px 12px;
    background: transparent;
    display: none;
  }
  .has-dropdown .dropdown-menu::before { display: none; }
  .has-dropdown.open .dropdown-menu { display: block; }
  .has-dropdown .dropdown-menu a { padding: 10px 0; }
}

.badge-award {
  width: 110px;
  margin-top: 20px;
}

.badge-award-footer {
  width: 64px;
  margin-top: 18px;
  display: block;
}

.bio-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.badge-award-inline {
  width: 72px;
  flex-shrink: 0;
}

@media (max-width: 560px) {
  .badge-award-inline { width: 60px; }
}

.hero-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.hero-split .hero-content {
  max-width: 620px;
}

.hero-logo {
  width: 170px;
  flex-shrink: 0;
  opacity: 0.94;
}

@media (max-width: 900px) {
  .hero-split { flex-direction: column; align-items: flex-start; }
  .hero-logo { display: none; }
}

.badge-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-cell .badge-award {
  width: 160px;
  margin-top: 0;
}

.badge-showcase {
  width: 260px;
  margin: 0 auto;
  justify-self: center;
}