/* ==========================================================
   WBS Legal Group - Luxury Boutique Law Firm Stylesheet
   Clean responsive redesign
   ========================================================== */

:root {
  --black: #050505;
  --black-soft: #0d0d0d;
  --gold: #c79b4b;
  --gold-light: #e0c27a;
  --white: #ffffff;
  --cream: #f7f3eb;
  --gray: #6d6d6d;
  --text: #222;

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Montserrat", Arial, sans-serif;

  --max-width: 1200px;
  --nav-height: 82px;

  --radius: 18px;
  --shadow: 0 12px 35px rgba(0,0,0,.12);
  --transition: .3s ease;
}


/* ================= RESET ================= */

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


html {
  scroll-behavior: smooth;
}


body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}


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


a {
  text-decoration: none;
}


ul {
  list-style: none;
}


h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  line-height: 1.15;
}


/* ================= CONTAINER ================= */

.container,
.section-container {
  width: 100%;
  max-width: var(--max-width);
  margin: auto;
  padding-left: 25px;
  padding-right: 25px;
}


/* ================= HEADER ================= */


.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: var(--black);
  border-bottom: 1px solid rgba(255,255,255,.08);
}


.navbar {
  max-width: var(--max-width);
  height: var(--nav-height);
  margin:auto;
  padding:0 25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}


.nav-toggle {
  background:none;
  border:none;
  cursor:pointer;
}


.nav-toggle span {
  display:block;
  width:28px;
  height:3px;
  margin:5px;
  background:white;
}



.nav-menu {
  display:none;
  position:absolute;
  top:var(--nav-height);
  left:0;
  width:100%;
  background:#080808;
  padding:20px;
}


.nav-menu.is-open {
  display:flex;
  flex-direction:column;
}


.nav-link {
  color:white;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:.85rem;
  padding:12px;
}


.nav-link:hover,
.nav-link--active {
  color:var(--gold);
}


.nav-link--cta {
  border:1px solid var(--gold);
  text-align:center;
  margin-top:10px;
}


@media(min-width:980px){

.nav-toggle{
 display:none;
}

.nav-menu{
 display:flex;
 position:static;
 width:auto;
 background:none;
 padding:0;
 flex-direction:row;
 align-items:center;
 gap:12px;
}

}



/* ================= BUTTONS ================= */


.btn,

.home-practice-section .practice-button {

display:inline-block;
margin-top:45px;

padding:14px 38px;

border-radius:999px;

background:#c79b4b;

color:#050505;

font-family:"Montserrat", sans-serif;

font-weight:600;

letter-spacing:1px;

transition:.3s ease;

}


.home-practice-section .practice-button:hover {

background:#e0c27a;

color:#050505;

}


.btn--primary,
.btn-primary {

background:var(--gold);
color:var(--black);

}


.btn--primary:hover,
.btn-primary:hover {

background:var(--gold-light);

}


.btn-outline {

border:1px solid var(--gold);
color:var(--gold);

}


.btn-outline:hover {

background:var(--gold);
color:var(--black);

}



/* ================= HERO ================= */


.hero {

background:var(--black);
padding-top:var(--nav-height);
min-height:100vh;

}


.hero__grid,
.hero-container {

max-width:var(--max-width);
margin:auto;
padding:60px 25px;

display:grid;
gap:50px;
align-items:center;

}


.hero__heading,
.hero h1 {

font-size:clamp(2.8rem,6vw,5rem);
color:white;

}


.hero__heading span,
.hero h1 span {

color:var(--gold);
font-style:italic;

}


.hero__sub,
.hero p {

color:#ddd;
font-size:1.1rem;
max-width:550px;
margin:25px 0;

}



.hero__image-wrap,
.hero-image-container {

display:flex;
justify-content:center;

}


.hero__image,
.hero-image {

width:100%;
height:auto;
max-height:750px;
object-fit:contain;
border-radius:20px;

}



@media(min-width:980px){

.hero__grid,
.hero-container {

grid-template-columns:1fr 1fr;

}

}
/* ================= VALUES SECTION ================= */


.values-strip,
.values-section {

background:var(--black);
padding:80px 25px;

}


.values-strip h2,
.values-section h2 {

text-align:center;
font-size:clamp(2rem,4vw,3rem);
color:white;
margin-bottom:25px;

}



.gold-divider {

width:80px;
height:3px;
background:var(--gold);
margin:0 auto 40px;

}



.values__grid,
.values-grid {

display:grid;
grid-template-columns:1fr;
gap:25px;
max-width:1100px;
margin:auto;

}



.value__card,
.value-card {

background:#0b0b0b;
border:1px solid rgba(199,155,75,.35);
border-radius:var(--radius);
padding:30px;
text-align:center;
transition:var(--transition);

}



.value__card:hover,
.value-card:hover {

transform:translateY(-5px);
border-color:var(--gold);
box-shadow:var(--shadow);

}



.value__card h3,
.value-card h3 {

font-size:2rem;
color:white;
margin-bottom:12px;

}



.value__card p,
.value-card p {

color:#cfcfcf;
font-size:.95rem;

}


@media(min-width:700px){

.values__grid,
.values-grid {

grid-template-columns:repeat(2,1fr);

}

}



@media(min-width:1000px){

.values__grid,
.values-grid {

grid-template-columns:repeat(4,1fr);

}

}





/* ================= HOMEPAGE PRACTICE AREA ================= */


.home-practice-section {

background:#050505;
padding:90px 25px;
}


.home-practice-container {

max-width:1100px;
margin:auto;
text-align:center;

}


.home-practice-section h2 {

font-size:clamp(2.2rem,5vw,3.5rem);
color:white;
margin-bottom:20px;

}



.home-practice-intro {

max-width:750px;
margin:0 auto 50px;
color:#d6d6d6;
line-height:1.8;

}



.home-practice-grid,
.practice-preview-grid {

display:grid;
grid-template-columns:1fr;
gap:30px;

}



.home-practice-item,
.practice-preview-card {

border:1px solid rgba(199,155,75,.45);
background:#0b0b0b;
border-radius:var(--radius);
padding:35px 25px;
text-align:center;
transition:var(--transition);

}



.home-practice-item:hover,
.practice-preview-card:hover {

transform:translateY(-6px);
border-color:var(--gold);
box-shadow:var(--shadow);

}



.home-practice-item h3,
.practice-preview-card h3 {

color:white;
font-size:2rem;
margin-bottom:15px;

}



.home-practice-item p,
.practice-preview-card p {

color:#cfcfcf;
line-height:1.7;

}



@media(min-width:900px){

.home-practice-grid,
.practice-preview-grid {

grid-template-columns:repeat(3,1fr);

}

}




/* ================= PRACTICE PAGE ================= */


.practice-page {

background:var(--cream);
padding:110px 25px 80px;

}



.practice-container {

max-width:1100px;
margin:auto;

}



.practice-page h1 {

text-align:center;
font-size:clamp(3rem,6vw,4rem);
margin-bottom:20px;
color:var(--black);

}



.practice-intro {

max-width:800px;
margin:0 auto 70px;
text-align:center;
color:#555;
font-size:1.05rem;

}



.practice-area {

background:white;
border:1px solid rgba(199,155,75,.45);
border-radius:25px;
padding:45px;
margin-bottom:35px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
position:relative;
overflow:hidden;

}



.practice-area::before {

content:"";
position:absolute;
top:0;
left:0;
width:6px;
height:100%;
background:var(--gold);

}



.practice-area h2 {

font-size:2.5rem;
margin-bottom:15px;

}



.practice-area .gold-line {

width:65px;
height:3px;
background:var(--gold);
margin-bottom:25px;

}



.practice-area p {

color:#444;
line-height:1.8;

}



.practice-area h3 {

font-family:var(--sans);
text-transform:uppercase;
letter-spacing:2px;
font-size:.85rem;
color:var(--gold);
margin:30px 0 15px;

}



.practice-area ul {

display:grid;
grid-template-columns:1fr;
gap:8px;
padding-left:20px;

}



.practice-area li {

position:relative;
color:#333;

}



.practice-area li::before {

content:"✦";
color:var(--gold);
position:absolute;
left:-20px;

}


@media(min-width:700px){

.practice-area ul {

grid-template-columns:repeat(2,1fr);

}

}
/* ==========================================
   CONTACT PAGE - FINAL CLEAN (single source)
========================================== */

/* section spacing */
main .section.bg-light {
  padding-top: 36px;
  padding-bottom: 10px;
}

main .section.bg-light .section__heading {
  margin: 0 auto;
  max-width: 1200px;
  padding-inline: 20px;
  text-align: left;
  line-height: 1.05;
}

main .section.bg-dark {
  padding-top: 14px;
  padding-bottom: 58px;
}

/* content width */
main .section.bg-dark .contact__info {
  max-width: 860px;
}

main .section.bg-dark .contact__info h2 {
  margin: 0 0 14px 0;
}

/* details list */
.contact__details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

/* FORCE GOLD text for address + office hours + info lines */
.contact__detail-row,
.contact__detail-row span,
.contact__details span,
.contact__details p,
.contact__details li,
.contact-info p,
.office-hours,
.office-hours p,
.office-hours li {
  color: #c79b4b !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* links in details */
.contact__detail-row a,
.contact__details a,
.contact-info a,
.office-hours a {
  color: #c79b4b !important;
  text-decoration: none;
}

.contact__detail-row a:hover,
.contact__details a:hover,
.contact-info a:hover,
.office-hours a:hover {
  color: #e0c27a !important;
}

/* icon color */
.contact__detail-icon {
  color: #c79b4b !important;
  flex-shrink: 0;
}

/* row layout */
.contact__detail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 1.7;
}

/* mobile */
@media (max-width: 767px) {
  main .section.bg-light {
    padding-top: 30px;
    padding-bottom: 6px;
  }

  main .section.bg-light .section__heading {
    text-align: center;
    padding-inline: 0;
  }

  main .section.bg-dark {
    padding-top: 10px;
    padding-bottom: 46px;
  }

  main .section.bg-dark .contact__info {
    text-align: center;
  }

  .contact__details {
    margin-top: 10px;
    gap: 14px;
  }

  .contact__detail-row {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 4px;
  }
}




/* ================= FLOATING CTA ================= */


.floating-cta {

position:fixed;
right:20px;
bottom:20px;
z-index:1200;

background:var(--gold);
color:var(--black);

padding:13px 25px;
border-radius:999px;

font-weight:700;
box-shadow:var(--shadow);

}



.floating-cta:hover {

background:var(--gold-light);
color:black;

}


@media(min-width:980px){

.floating-cta{

display:none;

}

}




/* ================= ATTORNEY SECTION ================= */


.attorneys-section {

background:white;
padding:90px 25px;

}



.attorneys-section h2 {

text-align:center;
font-size:3rem;
margin-bottom:20px;

}



.section-intro {

text-align:center;
max-width:750px;
margin:0 auto 50px;
color:#555;

}



.attorney-grid {

max-width:1100px;
margin:auto;

display:grid;
grid-template-columns:1fr;
gap:50px;

}



.attorney-card {

text-align:center;

}



.attorney-photo img {

width:220px;
height:220px;
object-fit:cover;
object-position:center top;
border-radius:50%;
margin:auto auto 25px;

}



.attorney-card h3 {

font-size:3rem;

}



.attorney-card h4 {

color:var(--gold);
font-family:var(--sans);
font-size:.85rem;
letter-spacing:3px;
text-transform:uppercase;
margin-bottom:25px;

}



.attorney-bio {

text-align:left;

}



.attorney-bio p {

margin-bottom:20px;
color:#444;

}



@media(min-width:900px){

.attorney-grid{

grid-template-columns:repeat(2,1fr);

}

}

/* Javonna headshot clarity (desktop) */
.attorney-headshot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  image-rendering: auto;
}

@media (min-width: 901px) {
  .attorney-photo {
    width: 260px;
    height: 260px;
    margin-inline: auto;
  }

  .attorney-photo .attorney-headshot {
    width: 260px;
    height: 260px;
    border-radius: 50%;
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}


/* ================= FOOTER ================= */


.site-footer {

background:#030303;
color:white;
padding:50px 25px;

}



.footer-container,
.footer__grid {

max-width:var(--max-width);
margin:auto;

}



.footer__nav h4 {

color:var(--gold);
font-family:var(--sans);
font-size:.85rem;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:15px;

}



.footer__nav a {

color:#ccc;
display:block;
margin-bottom:8px;

}



.footer__nav a:hover {

color:var(--gold);

}



.footer__bottom {

border-top:1px solid rgba(255,255,255,.15);
margin-top:30px;
padding-top:20px;
color:#aaa;
font-size:.85rem;

}




/* ================= MOBILE ADJUSTMENTS ================= */


@media(max-width:767px){


.navbar {

height:75px;

}



.nav-logo img {

height:45px;

}



.hero-container,
.hero__grid {

padding-top:40px;
padding-bottom:40px;

}



.hero h1,
.hero__heading {

font-size:2.3rem;

}



.hero-image,
.hero__image {

max-height:none;
height:auto;

}



.values-strip,
.values-section {

padding:55px 20px;

}



.value__card h3,
.value-card h3 {

font-size:1.7rem;

}



.home-practice-section {

padding:60px 20px;

}



.practice-area {

padding:30px 25px;

}



.practice-area h2 {

font-size:2rem;

}



.practice-page {

padding-top:95px;

}



.practice-page h1 {

font-size:2.8rem;

}


}
.practice-symbol {
  width:65px;
  height:65px;
  margin-bottom:20px;
  border-radius:50%;
  border:1px solid var(--gold);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  color:var(--gold);
}
.home-practice-section .practice-button {

background:#c79b4b;
color:#050505;
border:none;

}


.home-practice-section .practice-button:hover {

background:#e0c27a;
color:#050505;

}

/* ==========================================
   Attorney Photos - Desktop Clarity Fix
   Does not affect mobile layout
========================================== */

@media (min-width: 901px) {

  .attorney-photo img {
    width: 260px;
    height: 260px;
    object-fit: cover;
    image-rendering: auto;
  }

  .attorney-photo {
    overflow: hidden;
  }

}
/* ==========================================
   Header Logo Sizing (natural proportions)
========================================== */

/* Desktop */
.nav-logo,
.nav-logo--image,
.nav-logo-image {
  display: flex;
  align-items: center;
  height: 116px;
}

.nav-logo img,
.nav-logo--image img,
.nav-logo-image img {
  height: 100px !important;
  width: auto !important;
  max-width: 410px !important;
  object-fit: contain;
  transform: scale(1.26); /* subtle size boost without obvious stretch */
  transform-origin: center left;
}

/* Mobile: shorter height, slightly longer width */
@media (max-width: 780px) {
  .nav-logo,
  .nav-logo--image,
  .nav-logo-image {
    height: 75px;
  }

  .nav-logo img,
  .nav-logo--image img,
  .nav-logo-image img {
    height: 65px !important;     /* shorter */
    max-width: 260px !important; /* a little longer */
    transform: scaleX(1.28) scaleY(1.18);
  }
}
/* ==========================================
   DESKTOP CONTACT TEXT GOLD FORCE FIX
========================================== */
@media (min-width: 768px) {
  .contact__details,
  .contact__details * ,
  .contact__detail-row,
  .contact__detail-row * ,
  .contact-info,
  .contact-info * ,
  .office-hours,
  .office-hours * {
    color: #c79b4b !important;
    -webkit-text-fill-color: #c79b4b !important;
    opacity: 1 !important;
  }

  .contact__detail-row a,
  .contact__details a,
  .contact-info a,
  .office-hours a {
    color: #c79b4b !important;
    -webkit-text-fill-color: #c79b4b !important;
  }

  .contact__detail-row a:hover,
  .contact__details a:hover,
  .contact-info a:hover,
  .office-hours a:hover {
    color: #e0c27a !important;
    -webkit-text-fill-color: #e0c27a !important;
  }
}

/* ===== FINAL DESKTOP CONTACT GOLD ===== */
@media (min-width: 768px) {
  main .section.bg-dark .contact__detail-row,
  main .section.bg-dark .contact__detail-row * ,
  main .section.bg-dark .contact__details,
  main .section.bg-dark .contact__details * ,
  main .section.bg-dark .contact-info,
  main .section.bg-dark .contact-info * ,
  main .section.bg-dark .office-hours,
  main .section.bg-dark .office-hours * {
    color: #c79b4b !important;
    -webkit-text-fill-color: #c79b4b !important;
    opacity: 1 !important;
  }

  main .section.bg-dark .contact__detail-row a,
  main .section.bg-dark .contact__details a,
  main .section.bg-dark .contact-info a,
  main .section.bg-dark .office-hours a {
    color: #c79b4b !important;
    -webkit-text-fill-color: #c79b4b !important;
  }

  main .section.bg-dark .contact__detail-row a:hover,
  main .section.bg-dark .contact__details a:hover,
  main .section.bg-dark .contact-info a:hover,
  main .section.bg-dark .office-hours a:hover {
    color: #e0c27a !important;
    -webkit-text-fill-color: #e0c27a !important;
  }
}
.nav-logo img,
.nav-logo--image img,
.nav-logo-image img{
  height:58px !important;
  width:auto !important;
  max-width:300px !important;
  object-fit:contain !important;
}