/* ============================================
   Wyckoff Law Firm, P.A. — Main Stylesheet
   wyckofflawfirm.com

   TABLE OF CONTENTS:
   1.  Variables & Design Tokens
   2.  Reset & Base
   3.  Navigation
   4.  Mobile Drawer
   5.  Hero (Homepage)
   6.  Page Header (Interior Pages)
   7.  Services Section
   8.  Attorney Preview Section
   9.  Locations Section
   10. Practice Areas Page
   11. Attorney Page
   12. Contact Page
   13. Footer
   14. Scroll Reveal
   15. Responsive
   ============================================ */


/* === 1. Variables & Design Tokens === */

:root {
  /* Brand colors */
  --burgundy:      #771b2e;
  --burgundy-deep: #5a1422;
  --gold:          #a18b55;
  --gold-soft:     #c4ad77;

  /* Surfaces */
  --bg:    #fbfaf6;
  --ivory: #f6f2ea;
  --s2:    #f0ece0;

  /* Borders */
  --rule: rgba(27, 20, 16, 0.12);
  --hi:   var(--gold);

  /* Text */
  --ink:   #1b1410;
  --muted: #6b6259;
  --t3:    #9a8d83;

  /* Spacing — fluid, scales with viewport */
  --px:      clamp(24px, 6vw, 96px);
  --section: clamp(60px, 8vw, 96px);

  /* Aliases kept for compatibility with the hero component */
  --text:      var(--ink);
  --t2:        var(--muted);
  --paper:     var(--bg);
  --primary:   var(--burgundy);
  --secondary: var(--gold);
  --line:      var(--rule);
}


/* === 2. Reset & Base === */

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
}

/* Utility: visually hidden (for accessibility) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}


/* === 3. Navigation === */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--px);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Scrolled state — added via JS */
.nav.scrolled {
  background: rgba(251, 250, 246, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--rule);
}

/* Brand lockup */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-mark {
  width: 40px;
  height: 40px;
  background: var(--burgundy);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  position: relative;
  flex-shrink: 0;
}


.brand-stack {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.brand-sub {
  margin-top: 5px;
  font-family: "Cormorant Garamond", serif;
  font-size: 14.5px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-transform: none;
}

/* Desktop nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--ink);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--burgundy);
}

/* Active page indicator — set by JS */
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--gold);
}

/* Nav CTA button */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  background: var(--burgundy);
  color: var(--bg);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.nav-cta:hover {
  background: var(--burgundy-deep);
}

.nav-cta svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Hamburger — hidden on desktop */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  align-items: center;
}

.nav-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}


/* === 4. Mobile Drawer === */

.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(27, 20, 16, 0.4);
  z-index: 200;
  opacity: 0;
  pointer-events: none; /* invisible = non-interactive; display:none caused z-index to block all taps */
  transition: opacity 0.3s ease;
}

.nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--bg);
  z-index: 201;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.nav-drawer.open {
  transform: translateX(0);
}

.drawer-close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--rule);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  color: var(--ink);
  flex-shrink: 0;
}

.drawer-close:hover {
  background: var(--ivory);
}

.drawer-close svg {
  width: 16px;
  height: 16px;
}

.drawer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.drawer-links li {
  border-bottom: 1px solid var(--rule);
}

.drawer-links a {
  display: block;
  padding: 14px 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}

.drawer-links a:hover,
.drawer-links a.active {
  color: var(--burgundy);
}

.drawer-cta {
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 24px;
  background: var(--burgundy);
  color: var(--bg);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.drawer-cta:hover {
  background: var(--burgundy-deep);
}

.drawer-contact {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}

.drawer-contact p {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
  text-transform: uppercase;
}

.drawer-contact a {
  display: block;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  padding: 4px 0;
}

.drawer-contact a:hover {
  color: var(--burgundy);
}


/* === 5. Hero (Homepage) === */

/* Padding offset for fixed nav */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  padding-top: 84px;
  position: relative;
}

.hero-left {
  padding: 60px var(--px) 60px var(--px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

/* "Established 1998" eyebrow */
.est-marker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}

.est-marker::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

/* Main headline */
.hero h1 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: clamp(46px, 5.2vw, 82px);
  line-height: 1.03;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-top: 32px;
}

.hero h1 .accent {
  color: var(--burgundy);
  font-style: italic;
}

.hero h1 .gold {
  color: var(--gold);
  font-style: italic;
}

/* Italic subheadline */
.hero-sub {
  margin-top: 30px;
  font-family: "Cormorant Garamond", serif;
  font-size: 21px;
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.005em;
  max-width: 440px;
  line-height: 1.5;
  position: relative;
  padding-left: 18px;
}

.hero-sub::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--gold);
}

/* CTA row */
.cta-row {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 44px;
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 17px 30px;
  background: var(--burgundy);
  color: var(--bg);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--burgundy);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.btn-primary:hover {
  background: var(--burgundy-deep);
  border-color: var(--burgundy-deep);
}

.btn-primary svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.btn-primary:hover svg {
  transform: translateX(4px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--ink);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.btn-ghost:hover {
  color: var(--burgundy);
  border-color: var(--burgundy);
}

/* Stats row */
.hero-meta {
  display: flex;
  gap: 48px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}

.meta-item .num {
  font-family: "Cormorant Garamond", serif;
  font-size: 34px;
  font-weight: 400;
  color: var(--burgundy);
  line-height: 1;
  letter-spacing: -0.01em;
}

.meta-item .num sup {
  font-size: 13px;
  color: var(--gold);
  margin-left: 3px;
  font-style: italic;
  position: relative;
  top: -14px;
}

.meta-item .label {
  margin-top: 10px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  max-width: 130px;
  line-height: 1.5;
}

/* Scroll cue */
.scroll-cue {
  position: absolute;
  left: var(--px);
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.scroll-cue::after {
  content: "";
  width: 48px;
  height: 1px;
  background: var(--ink);
  opacity: 0.4;
  animation: scrollPulse 2.4s ease-in-out infinite;
  transform-origin: left;
}

@keyframes scrollPulse {
  0%, 100% { transform: scaleX(0.4); opacity: 0.2; }
  50%       { transform: scaleX(1);   opacity: 0.6; }
}

/* Right column */
.hero-right {
  position: relative;
  background-color: var(--ivory);
  /* Fine diagonal pinstripes — distinct from the grid, softer and more refined */
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0px,
    transparent 22px,
    rgba(161, 139, 85, 0.09) 22px,
    rgba(161, 139, 85, 0.09) 23px
  );
}

/* Photo panel */
.hero-image {
  position: absolute;
  inset: 48px 48px 48px 0;
  overflow: hidden;
  border: 1px solid var(--rule);
}

.hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.6) contrast(0.92) brightness(1.02);
}

/* Color wash over the photo */
.hero-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(161, 139, 85, 0.18) 0%, rgba(119, 27, 46, 0.22) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

/* Gradient fade for caption */
.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(246, 240, 220, 0.1) 0%, transparent 40%),
    linear-gradient(180deg, transparent 60%, rgba(27, 20, 16, 0.38) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Photo caption */
.img-caption {
  position: absolute;
  left: 20px;
  bottom: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--bg);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  z-index: 3;
}

.img-caption .place {
  display: flex;
  align-items: center;
  gap: 10px;
}

.img-caption .place::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--gold-soft);
  flex-shrink: 0;
}

.img-caption .coords {
  opacity: 0.7;
}

/* Floating testimonial card */
.attribution {
  position: absolute;
  left: -52px;
  bottom: 104px;
  background: var(--bg);
  padding: 22px 26px;
  border: 1px solid var(--rule);
  max-width: 310px;
  box-shadow: 0 24px 60px -30px rgba(27, 20, 16, 0.18);
  z-index: 4;
}

.attribution .stars {
  display: flex;
  gap: 4px;
  color: var(--gold);
  margin-bottom: 14px;
}

.attribution p {
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}

.attribution .author {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.attribution .author strong {
  color: var(--ink);
  font-weight: 600;
}

/* Practice label card */
.practice-tag {
  position: absolute;
  top: 80px;
  right: 48px;
  z-index: 4;
  background: var(--burgundy);
  color: var(--bg);
  padding: 16px 20px;
  max-width: 210px;
}

.practice-tag .ptag {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 8px;
}

.practice-tag .pname {
  font-family: "Cormorant Garamond", serif;
  font-size: 21px;
  line-height: 1.18;
  font-weight: 400;
}

.practice-tag .pname em {
  color: var(--gold-soft);
}

/* Vertical text on right edge */
.vertical-est {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 9.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  user-select: none;
}

.vertical-est span {
  color: var(--gold);
}


/* === 6. Page Header (Interior Pages) === */

.page-header {
  padding: calc(var(--section) + 84px) var(--px) var(--section);
  background: var(--ivory);
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}

/* Decorative background rule */
.page-header::before {
  content: "";
  position: absolute;
  right: var(--px);
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 180px;
  border: 1px solid rgba(161, 139, 85, 0.15);
  border-radius: 50%;
  pointer-events: none;
}

.page-header .eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.page-header .eyebrow::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.page-header h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(40px, 5vw, 70px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 760px;
}

.page-header p {
  margin-top: 20px;
  font-size: 18px;
  color: var(--muted);
  max-width: 540px;
  line-height: 1.65;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
}


/* === 7. Services Section === */

.services {
  padding: var(--section) var(--px);
}

.section-label {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 52px;
}

.section-label::before {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
}

.service-card {
  padding: 48px 40px;
  border-right: 1px solid var(--rule);
  position: relative;
  transition: background 0.25s ease;
}

.service-card:last-child {
  border-right: none;
}

.service-card:hover {
  background: var(--ivory);
}

/* Roman numeral */
.service-card .card-num {
  font-family: "Cormorant Garamond", serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--gold);
  font-weight: 400;
  margin-bottom: 28px;
  font-style: italic;
}

.service-card h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 18px;
  letter-spacing: -0.005em;
}

.service-card p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
}

.service-card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--burgundy);
  text-decoration: none;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
  transition: border-color 0.2s ease, gap 0.2s ease;
}

.service-card .card-link:hover {
  border-color: var(--burgundy);
  gap: 14px;
}

.service-card .card-link svg {
  width: 12px;
  height: 12px;
}


/* === 8. Attorney Preview Section === */

.attorney-preview {
  padding: var(--section) var(--px);
  background: var(--ivory);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.attorney-credentials {
  border: 1px solid var(--rule);
  background: var(--bg);
  padding: 40px;
}

.attorney-credentials .cred-title {
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}

.credential-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.credential-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}

.credential-list li:last-child {
  border-bottom: none;
}

.credential-list .cred-icon {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

.credential-list strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}

.credential-list span {
  color: var(--muted);
  font-size: 13px;
}

/* Right side text */
.attorney-bio h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(34px, 3.6vw, 52px);
  font-weight: 400;
  line-height: 1.08;
  color: var(--ink);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

.attorney-bio h2 em {
  color: var(--burgundy);
  font-style: italic;
}

.attorney-bio p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 20px;
}

.attorney-bio p:last-of-type {
  margin-bottom: 0;
}


/* === 9. Locations Section === */

.locations {
  padding: var(--section) var(--px);
}

.locations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  margin-top: 48px;
}

.location-card {
  padding: 48px 44px;
  border-right: 1px solid var(--rule);
}

.location-card:last-child {
  border-right: none;
}

.location-card .office-label {
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 20px;
}

.location-card h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 28px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 28px;
  letter-spacing: -0.005em;
}

.location-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.location-detail a {
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.55;
  transition: color 0.2s ease;
}

.location-detail a:hover {
  color: var(--burgundy);
}

.location-detail .detail-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t3);
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}


/* === 10. Practice Areas Page === */

.practice-areas {
  padding: var(--section) var(--px);
}

.practice-area {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  margin-bottom: 2px;
}

.practice-area:last-child {
  margin-bottom: 0;
}

/* Left column: number + title */
.practice-area-label {
  padding: 48px 40px;
  background: var(--ivory);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.practice-area-label .area-num {
  font-family: "Cormorant Garamond", serif;
  font-size: 64px;
  font-weight: 300;
  color: var(--rule);
  line-height: 1;
  letter-spacing: -0.02em;
  user-select: none;
}

.practice-area-label h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 26px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.005em;
}

/* Right column: content */
.practice-area-content {
  padding: 48px 52px;
}

.practice-area-content .lead {
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 28px;
}

.practice-area-content p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 16px;
}

.practice-area-content p:last-of-type {
  margin-bottom: 0;
}

.practice-detail-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 28px;
  border-top: 1px solid var(--rule);
}

.practice-detail-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  color: var(--muted);
}

.practice-detail-list li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 7px;
}

/* CTA section */
.cta-section {
  padding: var(--section) var(--px);
  background: var(--ivory);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

.cta-section h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 16px;
}

.cta-section p {
  font-size: 17px;
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto 40px;
  line-height: 1.65;
}

.cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}


/* === 11. Attorney Page === */

.attorney-section {
  padding: var(--section) var(--px);
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 72px;
  align-items: start;
}

/* Left: portrait panel */
.attorney-portrait-panel {
  position: sticky;
  top: 112px;
}

.portrait-frame {
  background: var(--ivory);
  border: 1px solid var(--rule);
  padding: 40px 36px;
  text-align: center;
}

.portrait-monogram {
  width: 100px;
  height: 100px;
  background: var(--burgundy);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 44px;
  font-weight: 400;
  margin: 0 auto 28px;
  position: relative;
}

.portrait-monogram::after {
  content: "";
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 1px;
  background: var(--gold);
}

.portrait-frame .attorney-name {
  font-family: "Cormorant Garamond", serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}

.portrait-frame .attorney-title {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.attorney-quick-facts {
  margin-top: 28px;
  border: 1px solid var(--rule);
  background: var(--bg);
}

.quick-fact {
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quick-fact:last-child {
  border-bottom: none;
}

.quick-fact .fact-label {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--t3);
  font-weight: 500;
}

.quick-fact .fact-value {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}

/* Right: bio content */
.attorney-content h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 36px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}

.attorney-content p {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 22px;
}

.attorney-content p:last-of-type {
  margin-bottom: 0;
}

.bar-profile-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--burgundy);
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--burgundy);
}

.bar-profile-link:hover {
  color: var(--burgundy-deep);
  border-color: var(--burgundy-deep);
}


/* === 12. Contact Page === */

.contact-section {
  padding: var(--section) var(--px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.contact-offices h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 36px;
  letter-spacing: -0.01em;
}

.contact-office {
  padding: 36px 0;
  border-top: 1px solid var(--rule);
}

.contact-office:last-child {
  border-bottom: 1px solid var(--rule);
}

.contact-office .office-name {
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 12px;
}

.contact-office h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 20px;
}

.contact-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-detail a {
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-detail a:hover {
  color: var(--burgundy);
}

/* Contact form */
.contact-form-wrap h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 32px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.contact-form-wrap .form-sub {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 36px;
  line-height: 1.65;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-group label {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.form-group input,
.form-group textarea,
.form-group select {
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  padding: 13px 16px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--burgundy);
}

.form-group textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}

/* select caret */
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6259' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.form-submit {
  align-self: flex-start;
}

.form-note {
  font-size: 13px;
  color: var(--t3);
  line-height: 1.6;
  margin-top: 4px;
}


/* === 13. Footer === */

.footer {
  background: var(--ink);
  color: var(--bg);
  padding: 64px var(--px) 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 52px;
  border-bottom: 1px solid rgba(251, 250, 246, 0.1);
}

/* Brand column */
.footer-brand .brand-mark {
  background: var(--burgundy);
}

.footer-brand .brand-name {
  color: var(--bg);
}

.footer-brand .brand-sub {
  color: rgba(251, 250, 246, 0.45);
}

.footer-tagline {
  margin-top: 20px;
  font-family: "Cormorant Garamond", serif;
  font-size: 17px;
  font-style: italic;
  color: rgba(251, 250, 246, 0.55);
  line-height: 1.55;
  max-width: 280px;
}

/* Footer nav columns */
.footer-col h4 {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 20px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul a {
  font-size: 14px;
  color: rgba(251, 250, 246, 0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-col ul a:hover {
  color: var(--bg);
}

/* Bottom bar */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  font-size: 12.5px;
  color: rgba(251, 250, 246, 0.35);
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom a {
  color: rgba(251, 250, 246, 0.35);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-bottom a:hover {
  color: var(--bg);
}

.footer-bar-num {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-bar-num::before {
  content: "";
  width: 1px;
  height: 12px;
  background: rgba(251, 250, 246, 0.2);
}


/* === 14. Scroll Reveal === */

/* Elements start hidden; JS adds .visible once in viewport */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger siblings with delay */
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }


/* === 15. Responsive === */

@media (max-width: 1200px) {
  .hero-left {
    padding-left: 60px;
    padding-right: 48px;
  }
  .scroll-cue { left: 60px; }
}

@media (max-width: 1024px) {
  /* Collapse desktop nav */
  .nav-links { display: none; }
  .nav-cta   { display: none; }
  .nav-burger { display: flex; }

  /* Stacked hero */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-left {
    padding: 60px var(--px) 56px;
  }

  .scroll-cue { display: none; }

  .hero-right {
    min-height: 460px;
  }

  .hero-image {
    inset: 0;
    border: none;
  }

  .attribution {
    left: var(--px);
    bottom: 32px;
    max-width: calc(100% - 64px);
  }

  .practice-tag {
    top: 28px;
    right: var(--px);
  }

  .vertical-est { display: none; }

  /* Attorney preview */
  .attorney-preview {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  /* Services */
  .services-grid {
    grid-template-columns: 1fr;
  }
  .service-card {
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .service-card:last-child { border-bottom: none; }

  /* Locations */
  .locations-grid {
    grid-template-columns: 1fr;
  }
  .location-card {
    border-right: none;
    border-bottom: 1px solid var(--rule);
  }
  .location-card:last-child { border-bottom: none; }

  /* Practice areas page */
  .practice-area {
    grid-template-columns: 1fr;
  }
  .practice-area-label {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding: 32px 32px 28px;
  }
  .practice-area-label .area-num { display: none; }
  .practice-area-content { padding: 36px 32px; }

  /* Attorney page */
  .attorney-section {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .attorney-portrait-panel { position: static; }

  /* Contact page */
  .contact-section {
    grid-template-columns: 1fr;
    gap: 52px;
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 640px) {
  .hero-meta {
    gap: 32px;
    margin-top: 48px;
  }

  .attribution { display: none; }

  .form-row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 375px) {
  .cta-row {
    flex-direction: column;
    align-items: flex-start;
  }
}