/* Mobile-first modern law firm styles (moved into css/) */
:root{--primary:#0B3D91;--accent:#A8D0FF;--muted:#20314B;--bg:#F6F9FF;--surface:#FFFFFF;--gold:#C7A86B;--maxw:1100px}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;line-height:1.6;color:var(--muted);background:linear-gradient(180deg,var(--bg) 0%, #FFF9FB 100%);margin:0}
.site-root, html, body {width:100%;overflow-x:hidden}
.container{max-width:var(--maxw);margin:0 auto;padding:1rem}
.header-inner{display:flex;align-items:center;gap:1rem;justify-content:space-between}
.brand{font-weight:700;color:var(--primary);text-decoration:none;font-size:1.125rem}
.phone{display:none;color:var(--primary);text-decoration:none}
.nav-toggle{background:none;border:0;font-size:1.25rem}
.site-nav{display:none}
.site-nav.open{display:block;max-height:80vh;overflow:auto;transition:max-height .28s ease, opacity .2s ease;opacity:1}
.site-nav a{margin-left:1rem;text-decoration:none;color:var(--muted)}
.site-nav{flex-wrap:wrap}
.hero{background:
  linear-gradient(90deg, rgba(2,19,60,0.75) 0%, rgba(2,19,60,0.35) 40%, rgba(2,19,60,0) 100%),
  url('assets/IMG_0454_small-800.jpg') right center/cover no-repeat;
  padding:3rem 0}
.hero-inner{display:grid;grid-template-columns:1fr;gap:1rem;align-items:center}
.hero-copy h1{font-size:1.6rem;margin:0 0 .5rem;color:#fff}
.hero-copy p{color:rgba(255,255,255,0.95);margin-bottom:1rem}
.hero-copy{color:#fff}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:8px;text-decoration:none;border:1px solid rgba(16,24,40,0.06);background:var(--surface);color:var(--muted);font-weight:600}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 6px 18px rgba(11,61,145,0.14)}
.practice .grid,.team-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.card{background:var(--surface);padding:1rem;border-radius:10px;border:1px solid rgba(0,0,0,0.04);box-shadow:0 6px 18px rgba(16,24,40,0.04)}
.testimonials blockquote{background:#fff;padding:1rem;border-left:4px solid var(--primary)}
.contact-grid{display:grid;gap:1rem}
.contact form{display:grid;gap:.5rem}
input,textarea{padding:.6rem;border:1px solid rgba(16,24,40,0.06);border-radius:8px}
.team-grid img, .card img, .hero-image img, img{max-width:100%;height:auto;display:block}

/* Page hero: maintain a consistent proportional height across viewports */
.page-hero{width:100%;overflow:hidden;border-radius:10px;margin:1rem 0;aspect-ratio:16/6}
.page-hero picture, .page-hero img{display:block;width:100%;height:100%}
.page-hero img{object-fit:cover}

/* Ensure team/card images are square and crop consistently */
.team-grid .card img, .card img{aspect-ratio:1/1;object-fit:cover}
/* Team photos: center horizontally, top-justify vertically to avoid cutting heads */
.team-grid .card img{object-position:center top}
.hero-copy, .card, p, h1, h2, h3 {overflow-wrap:break-word}
.site-footer{border-top:1px solid rgba(16,24,40,0.06);padding:1rem 0;margin-top:2rem;background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}
.map-placeholder{background:linear-gradient(90deg, rgba(231,198,206,0.06), rgba(199,168,107,0.04));padding:1rem;border-radius:8px;color:var(--muted)}

/* Larger screens */
@media(min-width:700px){
  .site-nav{display:flex;align-items:center}
  /* Ensure open class doesn't break desktop layout */
  .site-nav.open{display:flex;max-height:none;opacity:1}
  .nav-toggle{display:none}
  .hero-inner{grid-template-columns:1fr 420px}
  .hero-copy h1{font-size:2rem}
  .phone{display:inline-block}
  .practice .grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .contact-grid{grid-template-columns:1fr 360px}
}

/* Contact layout polish */
.contact-grid{display:grid;gap:1rem}
.contact-grid form{display:grid;gap:.75rem}
.contact-info{padding:1rem;background:var(--surface);border-radius:8px;border:1px solid rgba(16,24,40,0.04)}
.contact-grid input,.contact-grid textarea{width:100%;box-sizing:border-box}
.contact-grid .btn{width:unset}

/* Full-bleed hero used on inner pages: background is set inline to allow per-page images */
.full-hero{background-size:cover;background-position:right center;background-repeat:no-repeat;padding:3rem 0}
.full-hero .hero-inner{align-items:center}

@media(min-width:700px){
  .full-hero{padding:4rem 0}
}

@media(min-width:1100px){
  .hero-copy h1{font-size:2.4rem}
}