/* Zeitlin & Zeitlin — Court Street Classic theme over Bootstrap 5.3 */
:root{
  --zz-navy:#0f2140; --zz-navy-2:#16305c; --zz-brass:#a97e3f; --zz-brass-lt:#c69a55;
  --zz-ivory:#f7f4ec; --zz-paper:#fbfaf5; --zz-ink:#232833; --zz-slate:#5a6473;
  --zz-line:#e2dccd; --zz-line-2:#d6cdb8;
  --bs-body-bg:var(--zz-paper); --bs-body-color:var(--zz-ink);
  --bs-body-font-family:"Libre Franklin",system-ui,sans-serif;
  --bs-link-color:var(--zz-brass); --bs-link-hover-color:var(--zz-navy);
  --bs-border-color:var(--zz-line);
}
html,body{overflow-x:clip}
h1,h2,h3,h4,.font-serif{font-family:"Fraunces",Georgia,serif;font-weight:600;color:var(--zz-navy)}
@media (min-width:992px){.side-card.side-sticky{position:sticky;top:110px}}
.text-slate{color:var(--zz-slate)!important}
.text-brass{color:var(--zz-brass)!important}
.bg-ivory{background:var(--zz-ivory)!important}
.eyebrow{font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--zz-brass);font-weight:600;display:flex;align-items:center;gap:.9rem}
.eyebrow::before{content:"";width:44px;height:1px;background:var(--zz-brass);flex:0 0 auto}
.eyebrow.justify-content-center::after{content:"";width:44px;height:1px;background:var(--zz-brass);flex:0 0 auto}

/* Buttons */
.btn-navy{--bs-btn-bg:var(--zz-navy);--bs-btn-border-color:var(--zz-navy);--bs-btn-color:#fff;
  --bs-btn-hover-bg:var(--zz-brass);--bs-btn-hover-border-color:var(--zz-brass);--bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--zz-brass);--bs-btn-active-border-color:var(--zz-brass);
  border-radius:2px;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500;padding:.9rem 1.7rem}
.btn-outline-navy{--bs-btn-color:var(--zz-navy);--bs-btn-border-color:var(--zz-navy);
  --bs-btn-hover-bg:var(--zz-navy);--bs-btn-hover-border-color:var(--zz-navy);--bs-btn-hover-color:#fff;
  --bs-btn-active-bg:var(--zz-navy);--bs-btn-active-border-color:var(--zz-navy);
  border-radius:2px;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500;padding:.9rem 1.7rem}

/* Navbar */
/* The translucent blur lives on a pseudo-element, NOT on .zz-navbar itself.
   An element with backdrop-filter becomes the containing block for its
   position:fixed descendants, and the mobile offcanvas drawer is nested
   inside this navbar — with the filter on .zz-navbar the drawer resolved
   against the navbar's box and collapsed to a ~72px sliver, hiding every
   nav link. Keeping the filter on ::before preserves the effect while the
   drawer goes back to being positioned against the viewport. */
.zz-navbar{background:transparent;border-bottom:1px solid var(--zz-line)}
.zz-navbar::before{content:"";position:absolute;inset:0;background:rgba(251,250,245,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:-1;pointer-events:none}
.zz-navbar .navbar-brand svg,.zz-navbar .navbar-brand img{height:48px;width:auto;display:block}
.zz-navbar .nav-link{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--zz-ink);font-weight:500}
.zz-navbar .nav-link:hover,.zz-navbar .nav-link:focus,.zz-navbar .nav-link[aria-current="page"]{color:var(--zz-brass)}
.zz-navbar .dropdown-menu{--bs-dropdown-bg:#fff;--bs-dropdown-link-active-bg:var(--zz-ivory);--bs-dropdown-link-active-color:var(--zz-navy);background:var(--bs-dropdown-bg);border:1px solid var(--zz-line-2);border-radius:0;box-shadow:0 24px 50px -24px rgba(15,33,64,.45);min-width:240px;padding:.45rem;margin-top:.4rem}
.zz-navbar .dropdown-item{font-size:.9rem;color:var(--zz-slate);padding:.55rem .9rem}
.zz-navbar .dropdown-item:hover{background:var(--zz-ivory);color:var(--zz-navy)}
.zz-navbar .navbar-toggler{border:1px solid var(--zz-line-2);border-radius:2px;color:var(--zz-navy)}
.zz-navbar .navbar-toggler:focus{box-shadow:0 0 0 .2rem rgba(169,126,63,.25)}
/* Desktop nav spacing (>=lg the offcanvas renders inline as the navbar) */
@media (min-width:992px){
  .zz-navbar .navbar-nav{column-gap:1.1rem}
  .zz-navbar .nav-link{padding:.5rem .4rem}
}
/* Mobile drawer styles — scoped BELOW lg so they never leak into the
   desktop navbar (the #zzNav element keeps its .offcanvas class inline). */
@media (max-width:991.98px){
  .offcanvas.offcanvas-end{background:var(--zz-paper)}
  .offcanvas .nav-link{font-size:1rem;letter-spacing:.06em;padding:.8rem 0;border-bottom:1px solid var(--zz-line)}
  .offcanvas .dropdown-menu{border:none;box-shadow:none;background:transparent;padding-left:1rem}
}

/* Hero (home) */
.zz-hero{background:radial-gradient(120% 90% at 82% 10%,rgba(169,126,63,.14),transparent 55%),linear-gradient(180deg,var(--zz-ivory),var(--zz-paper));border-bottom:1px solid var(--zz-line)}
.hero-logo{width:min(416px,100%);height:auto;display:block}
.tagline span{font-family:"Fraunces",Georgia,serif;font-size:1.15rem;color:var(--zz-navy-2)}
.tagline .vr{background:var(--zz-line-2);opacity:1}
.hero-card{border:1px solid var(--zz-line-2);background:#fff;box-shadow:0 40px 80px -50px rgba(15,33,64,.5);position:relative}
.hero-card::before{content:"";position:absolute;inset:8px;border:1px solid var(--zz-line);pointer-events:none}
.factline{display:flex;gap:.9rem;padding:.95rem 0;border-top:1px solid var(--zz-line)}
.factline:first-of-type{border-top:none}
.factline svg{flex:0 0 auto;color:var(--zz-brass);margin-top:2px}
.factline b{display:block;color:var(--zz-ink);font-weight:600;font-size:.95rem}
.factline small{color:var(--zz-slate)}

/* Page hero (interior) */
.page-hero{background:linear-gradient(180deg,var(--zz-ivory),var(--zz-paper));border-bottom:1px solid var(--zz-line)}
.page-hero h1{font-size:clamp(2.3rem,5vw,3.6rem)}

/* Practice cards */
.pa-grid{--bs-border-color:var(--zz-line)}
.pa{background:var(--zz-paper);border:1px solid var(--zz-line);padding:2.1rem 1.9rem;min-height:230px;display:flex;flex-direction:column;position:relative;transition:.25s;color:inherit;text-decoration:none}
.pa:hover{background:#fff;color:inherit}
.pa .num{font-family:"Fraunces",serif;font-size:.9rem;color:var(--zz-brass);letter-spacing:.1em}
.pa .ico{color:var(--zz-navy);margin:1rem 0 1.2rem}
.pa h3{font-size:1.4rem}
.pa .go{margin-top:auto;padding-top:1.1rem;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--zz-brass);font-weight:600;opacity:0;transform:translateX(-6px);transition:.25s}
.pa:hover .go{opacity:1;transform:none}
.pa::after{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--zz-brass);transition:.3s}
.pa:hover::after{width:100%}
.pa-cta{background:var(--zz-navy)}
.pa-cta h3,.pa-cta .go{color:#fff}
.pa-cta p{color:#c9d4e6}
.pa-cta .go{color:var(--zz-brass-lt);opacity:1;transform:none}

/* About */
.about-photo{position:relative}
.about-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.15) contrast(1.02);border:1px solid var(--zz-line-2)}
.about-photo::before{content:"";position:absolute;left:-14px;top:-14px;width:110px;height:110px;border-top:2px solid var(--zz-brass);border-left:2px solid var(--zz-brass)}
.about-photo::after{content:"";position:absolute;right:-14px;bottom:-14px;width:110px;height:110px;border-bottom:2px solid var(--zz-navy);border-right:2px solid var(--zz-navy)}
@media (max-width:991.98px){.about-photo::before,.about-photo::after{display:none}}
.pull{border-left:3px solid var(--zz-brass);padding-left:1.35rem;font-family:"Fraunces",serif;font-size:1.25rem;color:var(--zz-navy);font-style:italic}

/* Contact band */
.zz-contact{background:var(--zz-navy);color:#e9eef6}
.zz-contact h2{color:#fff}
.zz-contact .eyebrow{color:var(--zz-brass-lt)}
.zz-contact .eyebrow::before{background:var(--zz-brass-lt)}
.zz-contact .row-line{display:flex;gap:1rem;padding:1.15rem 0;border-bottom:1px solid rgba(255,255,255,.12)}
.zz-contact .row-line svg{color:var(--zz-brass-lt);flex:0 0 auto;margin-top:3px}
.zz-contact b{display:block;color:#fff;font-size:1.05rem}
.zz-contact a{color:#c9d4e6;text-decoration:none}
.zz-contact a:hover{color:#fff}
.zz-contact small{color:#9fb0c9}
.zz-contact .lbl{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:#9fb0c9}
.zz-contact .pay-badge{border:1px solid rgba(255,255,255,.2);padding:.4rem .85rem;font-size:.78rem;letter-spacing:.06em;color:#d7e0ee;border-radius:2px}
.map-frame{border:1px solid rgba(255,255,255,.16)}
.map-frame iframe{filter:grayscale(.4) contrast(1.05)}

/* Attorneys */
.atty-photo{position:relative}
.atty-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top;border:1px solid var(--zz-line-2);filter:grayscale(.12) contrast(1.02)}
.atty-photo::before{content:"";position:absolute;left:-10px;top:-10px;width:70px;height:70px;border-top:2px solid var(--zz-brass);border-left:2px solid var(--zz-brass)}
.role{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--zz-brass);font-weight:600}

/* Side card / forms */
.side-card{border:1px solid var(--zz-line-2);background:#fff;position:relative}
.side-card::before{content:"";position:absolute;inset:8px;border:1px solid var(--zz-line);pointer-events:none}
.side-card>*{position:relative}
.prose p{color:var(--zz-slate);font-size:1.06rem}
.prose .lead-p{color:var(--zz-ink);font-size:1.14rem}
.prose a{font-weight:500}
.form-label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--zz-slate);font-weight:600}
.form-control{border:1px solid var(--zz-line-2);background:var(--zz-paper);border-radius:2px;padding:.8rem .9rem}
.form-control:focus{border-color:var(--zz-brass);box-shadow:0 0 0 .2rem rgba(169,126,63,.15)}
.cmap iframe{filter:grayscale(.35) contrast(1.03);border:1px solid var(--zz-line-2)}

/* Footer */
.zz-footer{background:#0a1730;color:#8ea0bd;font-size:.85rem}
.zz-footer a{color:#b7c4da;text-decoration:none}
.zz-footer a:hover{color:#fff}

/* Cross-link band */
.xlink{background:linear-gradient(180deg,var(--zz-paper),var(--zz-ivory));border-top:1px solid var(--zz-line)}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* --- Home hero: Brooklyn Bridge photo behind a white scrim -------------- */
/* The photo reads as a soft ghost behind the copy. Scrim strength lives in
   the rgba() stops below — raise them to wash the photo out further, lower
   them to let more bridge through. It is heaviest over the left column,
   where the logo and copy sit, and thinnest around 66% so the tower reads
   strongly. Measured at these values, the darkest point under the copy puts
   the slate lede at ~3.8:1 — below the 4.5:1 it has on the site's ivory
   sections — which is the trade for showing more bridge; raising the 42%
   stop to .88 returns it to ~4.6:1. Because the hero is now a
   LIGHT surface it needs no colour overrides at all: the base theme (navy
   headings, slate body, brass eyebrow, navy outline button) already targets
   light backgrounds. */
.zz-hero{
  background:
    linear-gradient(100deg, rgba(255,255,255,.975) 0%, rgba(255,255,255,.8) 42%, rgba(255,255,255,.5) 66%, rgba(255,255,255,.88) 100%),
    url('hero-bridge.jpg') center/cover no-repeat;
}
/* Below lg the copy stacks full-width across the photo, so the scrim runs
   vertically instead: thin at the top, where the bridge is meant to show,
   thickening behind the body copy lower down. Measured at these values the
   top band is busy enough that the brass eyebrow falls to ~1.5:1 and the
   logo to ~2.8:1 — deliberate, for the photo. Raising the 0% stop to .85
   takes them to ~2.7:1 and ~4.9:1 if legibility needs to win. */
@media (max-width:991.98px){
  .zz-hero{
    background:
      linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.925) 60%, rgba(255,255,255,.945) 100%),
      url('hero-bridge.jpg') center/cover no-repeat;
  }
}