/* ═══════════════════════════════════════════════════
   LegalEdge — Main Stylesheet
   Typography: Playfair Display (headings) · DM Sans (body)
════════════════════════════════════════════════════ */

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

:root {
  --bg       : #f5f4f0;
  --white    : #ffffff;
  --navy     : #0f1923;
  --charcoal : #1e2a35;
  --muted    : #6b7280;
  --muted2   : #9ca3af;
  --border   : #e5e2da;
  --gold     : #b8902a;
  --gold2    : #d4aa50;
}

html { scroll-behavior: smooth; }

body {
  background  : var(--white);
  color       : var(--navy);
  font-family : 'DM Sans', sans-serif;
  font-weight : 300;
  overflow-x  : hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─── SCROLL PROGRESS ─────────────────────────── */
.progress {
  position   : fixed;
  top        : 0; left: 0;
  height     : 3px;
  background : linear-gradient(90deg, var(--gold), var(--gold2));
  width      : 0%;
  z-index    : 500;
  transition : width .1s linear;
}

/* ─── NAVIGATION ─────────────────────────────── */
nav {
  position        : sticky;
  top             : 0;
  z-index         : 100;
  background      : rgba(255,255,255,.97);
  backdrop-filter : blur(12px);
  border-bottom   : 1px solid var(--border);
  padding         : 0 5%;
  height          : 68px;
  display         : flex;
  align-items     : center;
  justify-content : space-between;
}

.logo {
  font-family  : 'Playfair Display', serif;
  font-size    : 1.3rem;
  font-weight  : 700;
  color        : var(--navy);
  display      : flex;
  align-items  : center;
  gap          : .5rem;
  letter-spacing: -.01em;
  text-decoration: none;
}
.logo svg { width: 20px; height: 20px; fill: var(--navy); }

.nav-center { display: flex; gap: 2.5rem; }
.nav-center a {
  text-decoration : none;
  color           : var(--muted);
  font-size       : .82rem;
  font-weight     : 400;
  letter-spacing  : .04em;
  transition      : color .2s;
  position        : relative;
}
.nav-center a::after {
  content    : '';
  position   : absolute;
  bottom     : -4px; left: 0;
  width      : 0;
  height     : 1.5px;
  background : var(--gold);
  transition : width .3s ease;
}
.nav-center a.active, .nav-center a:hover { color: var(--navy); }
.nav-center a.active::after, .nav-center a:hover::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 1.2rem; }

.nav-pill {
  display         : flex;
  align-items     : center;
  gap             : .5rem;
  background      : var(--navy);
  color           : #fff;
  padding         : .45rem 1.1rem;
  border-radius   : 999px;
  font-size       : .78rem;
  font-weight     : 500;
  text-decoration : none;
  transition      : all .25s ease;
}
.nav-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15,25,35,.25); }

.nav-ghost { color: var(--muted); font-size: .82rem; text-decoration: none; transition: color .2s; }
.nav-ghost:hover { color: var(--navy); }

/* ─── HERO ───────────────────────────────────── */
.hero {
  padding                : 3.5rem 5% 0;
  display                : grid;
  grid-template-columns  : .9fr 1.1fr;
  gap                    : 0;
  min-height             : 85vh;
  align-items            : end;
  background             : var(--white);
  position               : relative;
}
.hero::before {
  content        : '';
  position       : absolute;
  width          : 500px; height: 500px;
  background     : radial-gradient(circle, rgba(212,170,80,.18), transparent 70%);
  filter         : blur(80px);
  top            : -100px; right: 80px;
  z-index        : 0;
  pointer-events : none;
}

.hero-left { padding-bottom: 4rem; padding-right: 3rem; position: relative; z-index: 1; }

.hero-tag {
  display         : inline-flex;
  align-items     : center;
  gap             : .5rem;
  background      : var(--navy);
  color           : #fff;
  border-radius   : 999px;
  padding         : .3rem .9rem;
  font-size       : .72rem;
  font-weight     : 500;
  letter-spacing  : .04em;
  margin-bottom   : 2rem;
  cursor          : pointer;
  transition      : all .25s;
}
.hero-tag:hover { transform: scale(1.04); box-shadow: 0 6px 16px rgba(15,25,35,.2); }

.hero-tag-dot {
  width         : 6px; height: 6px;
  background    : #4ade80;
  border-radius : 50%;
  animation     : pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .6; transform: scale(1.4); }
}

.hero h1 {
  font-family    : 'Playfair Display', serif;
  font-size      : clamp(3rem, 5.5vw, 5rem);
  font-weight    : 700;
  line-height    : 1.05;
  letter-spacing : -.02em;
  color          : var(--navy);
  margin-bottom  : 1.8rem;
}

.hero-sub {
  font-size     : .9rem;
  color         : var(--muted);
  line-height   : 1.8;
  max-width     : 360px;
  margin-bottom : 2.5rem;
  font-weight   : 300;
}

.hero-btns { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }

.btn-dark {
  display         : flex;
  align-items     : center;
  gap             : .5rem;
  background      : var(--navy);
  color           : #fff;
  padding         : .8rem 1.5rem;
  border-radius   : 999px;
  font-size       : .82rem;
  font-weight     : 500;
  text-decoration : none;
  transition      : all .25s ease;
  position        : relative;
  overflow        : hidden;
}
.btn-dark:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 30px rgba(15,25,35,.25); }
.btn-dark:hover .arrow { transform: translateX(4px); }
.btn-dark .arrow {
  width           : 22px; height: 22px;
  background      : rgba(255,255,255,.15);
  border-radius   : 50%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : .75rem;
  transition      : transform .25s;
}

.btn-border {
  display         : flex;
  align-items     : center;
  gap             : .5rem;
  border          : 1px solid var(--border);
  color           : var(--navy);
  padding         : .78rem 1.4rem;
  border-radius   : 999px;
  font-size       : .82rem;
  font-weight     : 500;
  text-decoration : none;
  transition      : all .25s ease;
}
.btn-border:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15,25,35,.1); }
.btn-border:hover .arrow { transform: translateX(2px); }
.btn-border .arrow {
  width           : 22px; height: 22px;
  background      : var(--bg);
  border-radius   : 50%;
  display         : flex;
  align-items     : center;
  justify-content : center;
  font-size       : .75rem;
  transition      : transform .25s;
}

/* Hero image */
.hero-right { position: relative; align-self: stretch; display: flex; align-items: flex-end; }

.hero-img-main {
  width         : 100%;
  height        : 100%;
  min-height    : 520px;
  background    : linear-gradient(160deg, #c8c0b0 0%, #a8a090 40%, #887870 100%);
  border-radius : 20px 20px 0 0;
  display       : flex;
  align-items   : center;
  justify-content: center;
  position      : relative;
  overflow      : hidden;
  transition    : transform .1s linear;
}
.hero-img-main::before {
  content    : '';
  position   : absolute;
  inset      : 0;
  background : linear-gradient(180deg, transparent 40%, rgba(0,0,0,.3) 100%);
}

.hero-person {
  font-size  : 10rem;
  position   : absolute;
  bottom     : 0; left: 50%;
  transform  : translateX(-50%);
  line-height: 1;
  animation  : float 6s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(-10px); }
}

.hero-img-overlay {
  position        : absolute;
  bottom          : 1.5rem; left: 50%;
  transform       : translateX(-50%);
  background      : rgba(255,255,255,.15);
  backdrop-filter : blur(18px);
  border          : 1px solid rgba(255,255,255,.35);
  border-radius   : 12px;
  padding         : .9rem 1.4rem;
  text-align      : center;
  white-space     : nowrap;
  cursor          : pointer;
  transition      : all .25s;
}
.hero-img-overlay:hover { background: rgba(255,255,255,.22); transform: translateX(-50%) translateY(-3px); }
.hero-img-overlay h4 { font-family: 'Playfair Display', serif; font-size: .88rem; font-weight: 600; color: #fff; margin-bottom: .1rem; }
.hero-img-overlay p  { font-size: .68rem; color: rgba(255,255,255,.75); }

.hero-img-small {
  position      : absolute;
  bottom        : 2rem; right: -1.5rem;
  width         : 160px; height: 140px;
  background    : linear-gradient(135deg, #8a7060, #6a5040);
  border-radius : 14px;
  display       : flex;
  align-items   : center;
  justify-content: center;
  font-size     : 4rem;
  border        : 3px solid #fff;
  overflow      : hidden;
  animation     : float 8s ease-in-out infinite .5s;
}

/* ─── STATS STRIP ────────────────────────────── */
.hero-stats-row {
  padding     : 1.5rem 5%;
  background  : var(--bg);
  border-top  : 1px solid var(--border);
  display     : flex;
  align-items : stretch;
}

.hstat {
  flex       : 1;
  padding    : 1.2rem 2rem;
  border-right: 1px solid var(--border);
  cursor     : default;
  transition : background .2s;
  position   : relative;
}
.hstat:last-child { border-right: none; }
.hstat:hover { background: rgba(15,25,35,.03); }

.hstat-num {
  font-family    : 'Playfair Display', serif;
  font-size      : 2rem;
  font-weight    : 700;
  color          : var(--navy);
}
.hstat-num span { color: var(--gold); }
.hstat-label { font-size: .72rem; color: var(--muted); margin-top: .1rem; }

.hstat-tooltip {
  position      : absolute;
  bottom        : calc(100% + 8px); left: 50%;
  transform     : translateX(-50%);
  background    : var(--navy);
  color         : #fff;
  font-size     : .68rem;
  padding       : .4rem .8rem;
  border-radius : 6px;
  white-space   : nowrap;
  opacity       : 0;
  pointer-events: none;
  transition    : opacity .2s;
  z-index       : 10;
}
.hstat-tooltip::after {
  content      : '';
  position     : absolute;
  top          : 100%; left: 50%;
  transform    : translateX(-50%);
  border       : 5px solid transparent;
  border-top-color: var(--navy);
}
.hstat:hover .hstat-tooltip { opacity: 1; }

/* ─── SCROLL REVEAL ANIMATIONS ───────────────── */
.reveal         { opacity: 0; transform: translateY(36px);  transition: all .7s cubic-bezier(.22,.61,.36,1); }
.reveal-left    { opacity: 0; transform: translateX(-36px); transition: all .7s cubic-bezier(.22,.61,.36,1); }
.reveal-right   { opacity: 0; transform: translateX(36px);  transition: all .7s cubic-bezier(.22,.61,.36,1); }
.reveal.active, .reveal-left.active, .reveal-right.active { opacity: 1; transform: translate(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .4s; }

/* ─── ABOUT ──────────────────────────────────── */
.about {
  padding               : 5rem 5%;
  display               : grid;
  grid-template-columns : 1fr 1.2fr;
  gap                   : 5rem;
  align-items           : center;
  background            : var(--white);
}
.about-label { font-size: .68rem; letter-spacing: .18em; color: var(--muted2); text-transform: uppercase; margin-bottom: 1.5rem; }
.about h2    { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem,3.5vw,2.8rem); font-weight: 600; color: var(--navy); line-height: 1.2; letter-spacing: -.02em; margin-bottom: 1.2rem; }
.about p     { font-size: .87rem; color: var(--muted); line-height: 1.9; margin-bottom: 1.5rem; font-weight: 300; }

.btn-learn {
  display         : inline-flex;
  align-items     : center;
  gap             : .5rem;
  font-size       : .83rem;
  color           : var(--navy);
  font-weight     : 500;
  text-decoration : none;
  border-bottom   : 1px solid var(--navy);
  padding-bottom  : 2px;
  transition      : opacity .2s;
}
.btn-learn:hover { opacity: .7; }

.about-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.about-img  { border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.about-img.tall { grid-row: span 2; }

.about-img-inner {
  width      : 100%; height: 100%;
  min-height : 200px;
  display    : flex; align-items: center; justify-content: center;
  font-size  : 4rem;
  position   : relative;
  cursor     : pointer;
  transition : transform .3s;
}
.about-img-inner:hover { transform: scale(1.02); }
.about-img-inner .hover-label {
  position        : absolute; inset: 0;
  display         : flex; align-items: center; justify-content: center;
  background      : rgba(15,25,35,.5);
  color           : #fff;
  font-size       : .82rem; font-weight: 500;
  opacity         : 0; transition: opacity .25s;
  border-radius   : 14px;
}
.about-img-inner:hover .hover-label { opacity: 1; }
.about-img-inner.i1 { background: linear-gradient(135deg,#d4c8b0,#b8a888); min-height: 300px; }
.about-img-inner.i2 { background: linear-gradient(135deg,#c0b4a0,#a89880); min-height: 200px; }
.about-img-inner.i3 { background: linear-gradient(135deg,#b8ac98,#9c9080); min-height: 190px; }

.rep-badge    { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; background: rgba(255,255,255,.92); border-radius: 8px; padding: .6rem .8rem; }
.rep-badge h4 { font-size: .78rem; font-weight: 600; color: var(--navy); margin-bottom: .1rem; }
.rep-badge p  { font-size: .66rem; color: var(--muted); }

/* ─── PRACTICE AREAS ─────────────────────────── */
.practice { padding: 5rem 5%; background: var(--bg); }

.practice-header { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 2.5rem; }
.practice-header .label { font-size: .68rem; letter-spacing: .18em; color: var(--muted2); text-transform: uppercase; margin-bottom: .75rem; }
.practice-header h2    { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem,3vw,2.5rem); font-weight: 600; color: var(--navy); letter-spacing: -.02em; line-height: 1.15; }
.practice-header p     { font-size: .85rem; color: var(--muted); line-height: 1.8; font-weight: 300; }

.practice-scroll { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 1rem; }
.practice-scroll::-webkit-scrollbar { display: none; }

.prac-card {
  flex       : 0 0 260px;
  border-radius: 16px;
  overflow   : hidden;
  position   : relative;
  cursor     : pointer;
  transition : transform .3s ease, box-shadow .3s ease;
}
.prac-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,.18); }

.prac-img { height: 300px; display: flex; align-items: flex-end; padding: 1.2rem; position: relative; }
.prac-img.p1 { background: linear-gradient(160deg,#8a7a6a,#4a3a2a); }
.prac-img.p2 { background: linear-gradient(160deg,#6a7a8a,#2a3a4a); }
.prac-img.p3 { background: linear-gradient(160deg,#7a6a8a,#3a2a4a); }
.prac-img.p4 { background: linear-gradient(160deg,#6a8a7a,#2a4a3a); }
.prac-img.p5 { background: linear-gradient(160deg,#8a6a6a,#4a2a2a); }
.prac-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 40%,rgba(0,0,0,.65) 100%); }

.prac-emoji { position: absolute; top: 1rem; right: 1rem; font-size: 2rem; opacity: .9; }

.prac-info { position: relative; z-index: 1; }
.prac-info h3 { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 600; color: #fff; margin-bottom: .2rem; }
.prac-info p  { font-size: .68rem; color: rgba(255,255,255,.65); margin-top: .25rem; }

.prac-arrow {
  width           : 28px; height: 28px;
  background      : rgba(255,255,255,.15);
  border          : 1px solid rgba(255,255,255,.3);
  border-radius   : 50%;
  display         : flex; align-items: center; justify-content: center;
  font-size       : .75rem; color: #fff;
  position        : absolute; top: 1rem; left: 1rem;
  transition      : all .25s;
}
.prac-card:hover .prac-arrow { background: rgba(255,255,255,.3); }

/* ─── TESTIMONIALS ───────────────────────────── */
.testi { padding: 5rem 5%; background: var(--white); }
.testi-header { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 2.5rem; }
.testi-header .label { font-size: .68rem; letter-spacing: .18em; color: var(--muted2); text-transform: uppercase; margin-bottom: .75rem; }
.testi-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem,3vw,2.3rem); font-weight: 600; color: var(--navy); letter-spacing: -.02em; }
.testi-header p  { font-size: .85rem; color: var(--muted); line-height: 1.8; font-weight: 300; }

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

.tc {
  background    : var(--bg);
  border-radius : 14px;
  padding       : 2rem;
  position      : relative;
  transition    : transform .3s, box-shadow .3s;
  cursor        : pointer;
}
.tc:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.08); }

.tc-stars { display: flex; gap: 3px; margin-bottom: 1.2rem; align-items: center; }
.tstar    { color: #f59e0b; font-size: .8rem; }
.tc-rating { font-size: .75rem; color: var(--muted); margin-left: .4rem; font-weight: 500; }

.tc blockquote { font-family: 'Playfair Display', serif; font-size: .88rem; font-style: italic; color: var(--navy); line-height: 1.75; margin-bottom: 1.5rem; }

.tc-author { display: flex; align-items: center; gap: .75rem; }
.tc-av     { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; color: #fff; flex-shrink: 0; }
.tc-av.av1 { background: linear-gradient(135deg,#8a7060,#6a5040); }
.tc-av.av2 { background: linear-gradient(135deg,#607080,#404a5a); }
.tc-av.av3 { background: linear-gradient(135deg,#708060,#4a5a40); }
.tc-name  { font-size: .82rem; font-weight: 600; color: var(--navy); }
.tc-role  { font-size: .7rem; color: var(--muted); }
.tc-quote { position: absolute; bottom: 1.5rem; right: 1.5rem; font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--border); line-height: 1; }

/* ─── ATTORNEYS ──────────────────────────────── */
.attorneys { padding: 5rem 5%; background: var(--bg); }
.attorneys-header { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 2.5rem; }
.attorneys-header .label { font-size: .68rem; letter-spacing: .18em; color: var(--muted2); text-transform: uppercase; margin-bottom: .75rem; }
.attorneys-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem,3vw,2.5rem); font-weight: 600; color: var(--navy); letter-spacing: -.02em; }
.attorneys-header p  { font-size: .85rem; color: var(--muted); line-height: 1.8; font-weight: 300; }

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

.atty-card {
  border-radius : 16px;
  overflow      : hidden;
  cursor        : pointer;
  transition    : transform .3s, box-shadow .3s;
  position      : relative;
}
.atty-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,.12); }

.atty-img { height: 280px; display: flex; align-items: flex-end; padding: 1.2rem; position: relative; }
.atty-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 45%,rgba(0,0,0,.7) 100%); }
.atty-img.a1 { background: linear-gradient(150deg,#c0b0a0,#706050); }
.atty-img.a2 { background: linear-gradient(150deg,#a0b0c0,#506070); }
.atty-img.a3 { background: linear-gradient(150deg,#b0a0c0,#605070); }

.atty-face { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 7rem; opacity: .7; }
.atty-info { position: relative; z-index: 1; transition: transform .3s, opacity .3s; transform: translateY(8px); opacity: .85; }
.atty-card:hover .atty-info { transform: translateY(0); opacity: 1; }
.atty-info h3 { font-family: 'Playfair Display', serif; font-size: .95rem; font-weight: 600; color: #fff; margin-bottom: .15rem; }
.atty-info p  { font-size: .68rem; color: rgba(255,255,255,.7); }

/* ─── BLOG ───────────────────────────────────── */
.blog { padding: 5rem 5%; background: var(--white); }
.blog-header { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 2.5rem; }
.blog-header .label { font-size: .68rem; letter-spacing: .18em; color: var(--muted2); text-transform: uppercase; margin-bottom: .75rem; }
.blog-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem,3vw,2.5rem); font-weight: 600; color: var(--navy); letter-spacing: -.02em; line-height: 1.2; }
.blog-header p  { font-size: .85rem; color: var(--muted); line-height: 1.8; font-weight: 300; }

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

.blog-card {
  border-radius : 14px;
  overflow      : hidden;
  cursor        : pointer;
  transition    : transform .3s, box-shadow .3s;
  border        : 1px solid var(--border);
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,.09); }

.blog-thumb { height: 180px; display: flex; align-items: flex-end; padding: 1rem; position: relative; }
.blog-thumb.b1 { background: linear-gradient(135deg,#b0a090,#807060); }
.blog-thumb.b2 { background: linear-gradient(135deg,#90a0b0,#607080); }
.blog-thumb.b3 { background: linear-gradient(135deg,#b090b0,#806080); }
.blog-thumb::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 50%,rgba(0,0,0,.5) 100%); }

.blog-emoji { position: absolute; top: 1rem; right: 1rem; font-size: 1.8rem; }
.blog-body  { padding: 1.2rem; background: #fff; }
.blog-cat   { font-size: .65rem; letter-spacing: .1em; color: var(--gold); text-transform: uppercase; font-weight: 600; margin-bottom: .5rem; }
.blog-card h3 { font-family: 'Playfair Display', serif; font-size: .92rem; font-weight: 600; color: var(--navy); line-height: 1.4; margin-bottom: .75rem; }
.blog-author  { display: flex; align-items: center; gap: .5rem; font-size: .7rem; color: var(--muted); }
.blog-av      { width: 22px; height: 22px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: .55rem; font-weight: 600; color: var(--navy); flex-shrink: 0; }

/* ─── CTA BANNER ─────────────────────────────── */
.cta-banner {
  margin        : 0 5% 4rem;
  background    : var(--navy);
  border-radius : 20px;
  padding       : 3.5rem 4rem;
  display       : flex;
  align-items   : center;
  justify-content: space-between;
  gap           : 2rem;
  position      : relative;
  overflow      : hidden;
  box-shadow    : 0 40px 80px rgba(15,25,35,.25);
}
.cta-banner::before { content: '⚖️'; position: absolute; right: 5rem; top: 50%; transform: translateY(-50%); font-size: 8rem; opacity: .06; }
.cta-left h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.5rem,3vw,2.2rem); font-weight: 700; color: #fff; letter-spacing: -.02em; margin-bottom: .5rem; }
.cta-left p  { font-size: .85rem; color: rgba(255,255,255,.55); font-weight: 300; }
.cta-right   { display: flex; gap: .75rem; flex-shrink: 0; }

.cta-btn-white {
  background      : #fff; color: var(--navy);
  padding         : .85rem 1.8rem; border-radius: 999px;
  font-size       : .85rem; font-weight: 600;
  text-decoration : none; transition: all .25s; white-space: nowrap;
}
.cta-btn-white:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.2); }

.cta-btn-outline {
  border          : 1px solid rgba(255,255,255,.25); color: #fff;
  padding         : .82rem 1.8rem; border-radius: 999px;
  font-size       : .85rem; font-weight: 500;
  text-decoration : none; transition: all .2s; white-space: nowrap;
}
.cta-btn-outline:hover { background: rgba(255,255,255,.1); }

/* ─── CONTACT ────────────────────────────────── */
.contact {
  padding               : 5rem 5%;
  background            : var(--bg);
  display               : grid;
  grid-template-columns : 1fr 1.3fr;
  gap                   : 5rem;
  max-width             : 1200px;
  margin                : 0 auto;
}

.contact-info .label { font-size: .68rem; letter-spacing: .18em; color: var(--muted2); text-transform: uppercase; margin-bottom: .75rem; }
.contact-info h2 { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 600; color: var(--navy); margin-bottom: .9rem; line-height: 1.2; }
.contact-info p  { font-size: .85rem; color: var(--muted); line-height: 1.8; font-weight: 300; margin-bottom: 2rem; }

.cdet       { display: flex; align-items: center; gap: .75rem; margin-bottom: .85rem; font-size: .82rem; color: var(--muted); }
.cdet-icon  { width: 32px; height: 32px; border-radius: 8px; background: #fff; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }

.form-wrap { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 2.5rem; }

.fr { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.fg { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }

.fg label {
  font-size      : .68rem;
  color          : var(--muted);
  letter-spacing : .06em;
  text-transform : uppercase;
  font-weight    : 500;
}
.fg input, .fg select, .fg textarea {
  background  : var(--bg);
  border      : 1px solid var(--border);
  border-radius: 8px;
  padding     : .75rem 1rem;
  font-size   : .85rem;
  color       : var(--navy);
  font-family : 'DM Sans', sans-serif;
  outline     : none;
  transition  : border-color .2s, box-shadow .2s;
  width       : 100%;
}
.fg input:focus, .fg select:focus, .fg textarea:focus {
  border-color : var(--gold);
  box-shadow   : 0 0 0 3px rgba(184,144,42,.1);
}
.fg select option { background: #fff; }

.fsub {
  width           : 100%;
  background      : var(--navy); color: #fff;
  border          : none; border-radius: 999px;
  padding         : .9rem;
  font-size       : .85rem; font-weight: 500;
  cursor          : pointer;
  font-family     : 'DM Sans', sans-serif;
  transition      : all .25s;
  letter-spacing  : .04em;
  display         : flex; align-items: center; justify-content: center;
  gap             : .5rem;
}
.fsub:hover    { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,25,35,.25); }
.fsub:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

.fnote { text-align: center; font-size: .68rem; color: var(--muted); margin-top: .6rem; }

.fsuccess {
  display       : none;
  padding       : 1rem;
  background    : #f0f9f4;
  border        : 1px solid #86efac;
  border-radius : 8px;
  color         : #166534;
  font-size     : .82rem;
  text-align    : center;
  margin-top    : 1rem;
}
.ferror {
  display       : none;
  padding       : 1rem;
  background    : #fef2f2;
  border        : 1px solid #fca5a5;
  border-radius : 8px;
  color         : #991b1b;
  font-size     : .82rem;
  text-align    : center;
  margin-top    : 1rem;
}

/* ─── FOOTER ─────────────────────────────────── */
footer { background: var(--navy); color: #fff; padding: 4rem 5% 2rem; }

.f-top {
  display               : grid;
  grid-template-columns : 1.8fr 1fr 1fr 1fr;
  gap                   : 3rem;
  margin-bottom         : 3rem;
  padding-bottom        : 3rem;
  border-bottom         : 1px solid rgba(255,255,255,.08);
}

.flogo { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: .75rem; display: block; }
.fcol p, .fcol a { font-size: .78rem; color: rgba(255,255,255,.4); line-height: 2.1; text-decoration: none; display: block; transition: color .2s; }
.fcol a:hover    { color: rgba(255,255,255,.85); }
.fcol h4 { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.6); letter-spacing: .12em; margin-bottom: 1rem; text-transform: uppercase; }

.fbot { display: flex; justify-content: space-between; font-size: .72rem; color: rgba(255,255,255,.25); }

/* ─── MODALS ─────────────────────────────────── */
.modal-overlay {
  position        : fixed;
  inset           : 0;
  background      : rgba(10,16,22,.6);
  backdrop-filter : blur(6px);
  z-index         : 1000;
  display         : flex;
  align-items     : center;
  justify-content : center;
  padding         : 2rem;
  opacity         : 0;
  pointer-events  : none;
  transition      : opacity .3s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal {
  background  : #fff;
  border-radius: 20px;
  max-width   : 600px; width: 100%;
  max-height  : 88vh;
  overflow-y  : auto;
  position    : relative;
  transform   : translateY(20px) scale(.98);
  transition  : transform .3s cubic-bezier(.22,.61,.36,1);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }

.modal-close {
  position      : absolute;
  top: 1.2rem; right: 1.2rem;
  width: 32px; height: 32px;
  background    : var(--bg);
  border        : none; border-radius: 50%;
  cursor        : pointer;
  font-size     : 1rem;
  display       : flex; align-items: center; justify-content: center;
  transition    : background .2s;
  z-index       : 1;
}
.modal-close:hover { background: var(--border); }

.modal-hero {
  height        : 200px;
  border-radius : 20px 20px 0 0;
  overflow      : hidden;
  position      : relative;
  display       : flex; align-items: flex-end; padding: 1.5rem;
}
.modal-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 30%,rgba(0,0,0,.6) 100%); }

.modal-emoji { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-60%); font-size: 5rem; opacity: .6; }

.modal-hero-info { position: relative; z-index: 1; }
.modal-hero-info h2 { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.modal-hero-info p  { font-size: .75rem; color: rgba(255,255,255,.7); margin-top: .2rem; }

.modal-body    { padding: 1.8rem 2rem 2rem; }
.modal-section { margin-bottom: 1.5rem; }
.modal-section h3 { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted2); margin-bottom: .75rem; font-weight: 600; }
.modal-section p  { font-size: .85rem; color: var(--muted); line-height: 1.8; font-weight: 300; }

.modal-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.modal-tag  { background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: .3rem .85rem; font-size: .75rem; color: var(--navy); font-weight: 500; }

.modal-stat-row { display: flex; gap: 1rem; }
.modal-stat     { flex: 1; background: var(--bg); border-radius: 10px; padding: 1rem; text-align: center; }
.modal-stat-num { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.modal-stat-num span { color: var(--gold); }
.modal-stat-label   { font-size: .65rem; color: var(--muted); margin-top: .1rem; }

.modal-cta {
  display         : block; text-align: center;
  background      : var(--navy); color: #fff;
  padding         : .85rem; border-radius: 999px;
  font-size       : .85rem; font-weight: 500;
  text-decoration : none; margin-top: 1.5rem;
  transition      : all .25s;
}
.modal-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15,25,35,.2); }

/* Article modal specifics */
.article-body p            { font-size: .88rem; color: var(--muted); line-height: 1.9; margin-bottom: 1rem; font-weight: 300; }
.article-body p:first-child{ font-size: .95rem; color: var(--navy); }

.article-meta { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--border); }
.article-av   { width: 36px; height: 36px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; color: var(--navy); }
.article-author-name { font-size: .82rem; font-weight: 500; color: var(--navy); }
.article-date        { font-size: .7rem; color: var(--muted); }

.read-more-note { font-size: .75rem; color: var(--muted); text-align: center; padding: 1rem; background: var(--bg); border-radius: 8px; margin-top: 1rem; }

/* ─── RESPONSIVE ─────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-right { display: none; }
  .about, .testi-header, .practice-header,
  .attorneys-header, .blog-header, .contact { grid-template-columns: 1fr; }
  .testi-grid, .atty-grid, .blog-grid { grid-template-columns: 1fr 1fr; }
  .nav-center { display: none; }
  .cta-banner { flex-direction: column; text-align: center; }
  .fr { grid-template-columns: 1fr; }
  .f-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .testi-grid, .atty-grid, .blog-grid { grid-template-columns: 1fr; }
  .f-top { grid-template-columns: 1fr; }
  .hero-stats-row { flex-wrap: wrap; }
  .hstat { flex: 0 0 50%; border-right: none; border-bottom: 1px solid var(--border); }
}