/* Simple brochure styles - cohesive warm palette */
:root{
  --accent:#b98a42;
  --muted:#2b2623;
  --bg:#f6efe6;
  --max-width:1200px;
  --radius:10px;
  --container-padding:20px;
  --gold:#8f6b20; /* darker gold */
  --panel:#f7efe6;
  --header-height:88px;
  --nav-text:#ffffff; /* header/nav text should be white */
  --footer-bg:#2b160a;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:var(--muted); background-color:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased}
.site-header{position:fixed; top:0; left:0; right:0; height:88px; background:var(--gold); color:var(--nav-text); z-index:300; /* match site card/image shadow */
  box-shadow: 0 8px 30px rgba(11,15,20,0.06); filter:none}
/* tighten header vertical padding so contents sit higher */
.site-header .container{padding-top:12px; padding-bottom:12px}
body{padding-top:88px}
.container{max-width:var(--max-width); margin:0 auto; padding:28px var(--container-padding)}
.header-inner{display:flex; align-items:center; justify-content:space-between; position:relative}
/* Header phone: allow wrapping and limit width to avoid nav overflow */
.header-phone{display:flex; align-items:center; margin-left:12px; max-width:240px}
.header-phone a{color:var(--nav-text); text-decoration:none; display:inline-flex; gap:8px; align-items:center; font-size:0.98rem; white-space:normal; overflow-wrap:anywhere; word-break:break-word}
.header-phone a i{font-size:1rem}
.brand{display:inline-flex;width:80px;height:80px;background:transparent;border-radius:0;padding:0;border:0;box-shadow:none;align-items:center;justify-content:center;overflow:visible;margin:0;position:relative;z-index:330}
.brand img{height:80px;width:auto;display:block;max-width:none;margin:0;position:relative;z-index:335}
.site-header{overflow:visible}



/* ensure brand sits above header and its overflow covers content */
.brand{z-index:330}
.brand img{z-index:335}
@media(max-width:600px){ .brand{width:80px;height:80px;padding:0} .brand img{height:80px;width:auto;transform:none;margin:0} .contact-logo img{height:140px} }
.site-nav{display:flex; gap:18px; align-items:center; margin-left:auto}
.site-nav a{color:var(--nav-text); text-decoration:none; padding:6px 6px; text-align:right; transition:filter 150ms ease, color 150ms ease}
.site-nav a:hover{filter:brightness(0.85)}
.site-nav a:active{filter:brightness(0.75)}
.site-nav a.active{color:var(--nav-text)}
.menu-toggle{display:none; background:var(--gold); border:0; font-size:24px; color:var(--nav-text); z-index:310; cursor:pointer; padding:8px 10px; border-radius:6px; box-shadow:none}
/* hamburger lines */
.menu-toggle .hamburger{display:inline-block; width:26px; height:18px; position:relative}
.menu-toggle .hamburger span{display:block; position:absolute; left:0; right:0; height:2px; background:currentColor; transform-origin:center; transition:transform 220ms cubic-bezier(.4,0,.2,1), opacity 180ms ease;}
.menu-toggle .hamburger span:nth-child(1){transform:translateY(0)}
.menu-toggle .hamburger span:nth-child(2){transform:translateY(8px)}
.menu-toggle .hamburger span:nth-child(3){transform:translateY(16px)}
.menu-toggle.open .hamburger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-toggle.open .hamburger span:nth-child(2){opacity:0; transform:scaleX(0)}
.menu-toggle.open .hamburger span:nth-child(3){transform:translateY(8px) rotate(-45deg)}
.hero{position:relative; padding:56px 0; min-height:420px; overflow:hidden; background:transparent}
/* Make the container a flex row so content aligns to the container's left edge */
.hero .container{display:flex; align-items:center; min-height:420px; padding-left:var(--container-padding); padding-right:var(--container-padding)}
.hero::before{content:''; position:absolute; inset:0; background:url('images/hero-bg.webp') center/cover no-repeat; filter:brightness(0.62) contrast(0.98); transform:scale(1.03); z-index:0}
.hero::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(24,18,14,0.28), rgba(24,18,14,0.18)); z-index:1}
.hero-inner{position:relative; z-index:2; color:#fff; text-shadow:none; max-width:760px; margin:0; padding:0; text-align:left; /* match site card/image shadow */
  box-shadow: 0 6px 20px rgba(11,15,20,0.06);
  border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}

/* Apply text-only shadow (no box vignette) so shadow affects text only */
.hero-inner::before{display:none}
.hero-inner h1, .hero-inner h2, .hero-inner .display{
  text-shadow: 0 4px 18px rgba(0,0,0,0.65), 0 1px 0 rgba(0,0,0,0.35);
}
/* apply same subtle text-only shadow to hero paragraph so body copy reads better */
.hero-inner p{
  text-shadow: 0 3px 14px rgba(0,0,0,0.55), 0 1px 0 rgba(0,0,0,0.32);
}

.display{font-family:Georgia, 'Times New Roman', serif; font-weight:600}
.lead{font-size:1.125rem; margin-bottom:18px}
.btn{display:inline-block; background:var(--gold); color:#fff; padding:12px 20px; border-radius:8px; text-decoration:none; box-shadow:none}
/* CTA highlight + hover glow (no movement) */
/* smoother transitions: include background-color and use ease-in-out for glow */
.btn{transition:transform 100ms cubic-bezier(.2,0,1,1), box-shadow 100ms cubic-bezier(.2,0,1,1), filter 100ms cubic-bezier(.2,0,1,1), background-color 100ms cubic-bezier(.2,0,1,1)}
.btn.highlight{box-shadow:0 20px 40px rgba(143,107,32,0.35); filter:brightness(1.04); animation: cta-pulse 900ms cubic-bezier(.2,0,1,1) infinite}
.btn.highlight:not(.no-lift){transform:translateY(-6px)}
.btn:hover, .btn:focus{background:var(--accent); box-shadow:0 10px 20px rgba(143,107,32,0.32); filter:brightness(1.04); transition-duration:600ms; transition-timing-function: cubic-bezier(0,0,.2,1)}

/* Onload variant: apply the same visual treatment on a single-run animation */
.btn.onload{background:var(--accent); box-shadow:0 10px 20px rgba(143,107,32,0.32); filter:brightness(1.04); transition: background-color 600ms cubic-bezier(0,0,.2,1), box-shadow 600ms cubic-bezier(0,0,.2,1), filter 600ms cubic-bezier(0,0,.2,1)}
.btn.onload.no-lift{transform:none}
.btn:active{box-shadow:0 14px 40px rgba(143,107,32,0.46)}

@keyframes cta-pulse{
  0%{box-shadow:0 8px 24px rgba(143,107,32,0); filter:brightness(1)}
  40%{box-shadow:0 40px 100px rgba(143,107,32,0.6); filter:brightness(1.08)}
  100%{box-shadow:0 28px 80px rgba(143,107,32,0.5); filter:brightness(1.06)}
}
.practices h2, .about h2, .contact h2{color:#2b2623}

.practices { background: transparent; padding:64px var(--container-padding); }
.about, .contact { background: transparent; padding:48px var(--container-padding); }
.grid{display:grid; gap:20px}
.service-grid{grid-template-columns:repeat(3,1fr); margin-top:18px}
.service-card{background:var(--panel); padding:28px; border-radius:10px; box-shadow:0 8px 30px rgba(11,15,20,0.06)}
.service-card h3{margin-top:10px; color:var(--muted)}
.service-card p{color:var(--muted);}
.service-icon{font-size:28px; color:var(--gold)}
.about-grid{display:grid; grid-template-columns:1fr 420px; gap:28px; align-items:center}
.about-image img{width:100%; border-radius:0; box-shadow:none; border:0}
.about p{background:var(--panel); padding:20px 20px 20px 0; border-radius:10px}
.contact-row{display:flex; gap:24px; align-items:center}
.contact-logo{background:transparent;padding:0;border-radius:0;display:flex;align-items:center;justify-content:center}
.contact-logo img{height:180px;width:auto;display:block}
.contact-info{background:var(--panel); padding:20px; border-radius:10px}
.contact-info h3{display:flex;align-items:center;gap:10px;font-size:1.1rem;margin:0 0 8px}
.contact-info h3 i, .contact-info p i{color:var(--gold);font-size:1.1rem;margin-right:8px}
.contact-info p{margin:8px 0}

/* Contact item layout matching site styles */
.contact-item{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.contact-icon{margin-top:6px}
.contact-icon{color:var(--gold);font-size:20px;min-width:28px}
.contact-text h3{margin:0;font-size:1.1rem;font-weight:700;color:#2b2623}
.contact-text p.muted{margin:6px 0 0;color:#6b6b6b; font-size:1.25rem; line-height:1.45}
.contact-text p.muted a{color:inherit; text-decoration:none; white-space:normal; overflow-wrap:anywhere; word-break:break-word}
.contact-text p.muted a:hover{text-decoration:underline}

@media(max-width:600px){.contact-item{align-items:flex-start}}
.site-footer{padding:14px 0; text-align:center; color:rgba(255,255,255,0.95); background:var(--footer-bg); font-size:1rem}
.site-footer p{margin:0}
.privacy-note{margin:0; padding-bottom:12px; color:rgba(255,255,255,0.9); font-size:0.85rem}
@media(max-width:900px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
  /* switch to single column so paragraph takes full width; image stacks below */
  .about-grid{grid-template-columns:1fr}
  .about-image img{max-width:420px; width:100%; height:auto; margin:20px auto 0; display:block}
}

/* ensure anchor scrolling accounts for the fixed header (cross-browser) */
section[id]{
  scroll-margin-top: calc(var(--header-height) + 12px);
}

/* Our Lawyers section */
.lawyers h2{color:var(--muted)}
.lawyer-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:18px}
.lawyer-card{background:var(--panel); padding:20px; border-radius:10px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px}
.lawyer-card h3{margin:2px 0 0; font-size:1.05rem}
.lawyer-card p{margin:0;color:#6b6b6b}

.lawyer-avatar{
  width:96px;
  height:96px;
  object-fit:cover;
  border-radius:999px;
  border:0;
  /* inset shadow to suggest the image sits inside a cutout, plus a soft outer shadow for depth */
  box-shadow: inset 0 6px 12px rgba(0,0,0,0.34), 0 6px 18px rgba(11,15,20,0.06);
  background-clip: padding-box;
}

@media(max-width:900px){
  .lawyer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .lawyer-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .about-grid{grid-template-columns:1fr}
  .about-image img{max-width:320px;height:auto;margin:20px auto 0}
}
@media(max-width:600px){
  /* position nav directly under the header/menu button */
  .site-nav{display:none; position:absolute; top:88px; right:16px; background:var(--gold); padding:12px; border-radius:0; flex-direction:column; min-width:200px; z-index:305; box-shadow:0 8px 20px rgba(0,0,0,0.12); border:1px solid rgba(0,0,0,0.12); filter:none}
  .site-nav.open{display:flex; flex-direction:column}
  .menu-toggle{display:inline-block}
  .service-grid{grid-template-columns:1fr}
  .hero{padding:40px 0}
  .container{padding:24px 16px}
  .contact-row{flex-direction:column; align-items:center}
  .contact-logo img{height:160px; max-width:100%; width:auto}
  .about-image{display:none}
}