:root {
  --navy: #0f2a43;
  --navy-deep: #0a1e30;
  --gold: #c8a15a;
  --gold-soft: #e2c890;
  --ink: #1c2733;
  --muted: #5b6b7a;
  --line: #e3e8ee;
  --bg: #ffffff;
  --bg-alt: #f6f8fa;
  --radius: 14px;
  --shadow: 0 12px 40px rgba(15, 42, 67, 0.10);
  --maxw: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; line-height: 1.2; color: var(--navy); }
a { color: var(--navy); text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(24px, 5vw, 72px); }

.btn {
  display: inline-block;
  background: var(--gold);
  color: #1c1408;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 0 6px 20px rgba(200, 161, 90, 0.35);
}
.btn:hover { transform: translateY(-2px); background: var(--gold-soft); }
.btn.ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.55); box-shadow: none; }
.btn.ghost:hover { background: rgba(255,255,255,0.12); }

/* Header */
header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: Georgia, serif; font-weight: 700; font-size: 1.35rem; color: var(--navy); }
.brand .mark { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--navy), var(--navy-deep)); color: var(--gold); display: grid; place-items: center; font-family: Georgia, serif; font-weight: 700; font-size: 1.2rem; }
.brand .logo { height: 48px; width: auto; display: block; }
footer .brand .logo { height: 64px; background: #fff; padding: 8px 12px; border-radius: 10px; }
.brand small { display: block; font-family: "Segoe UI", sans-serif; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; }
nav ul { display: flex; gap: 30px; list-style: none; margin: 0; padding: 0; }
nav ul a { font-size: 0.95rem; color: var(--ink); font-weight: 500; }
nav ul a:hover, nav ul a.active { color: var(--gold); }
.menu-toggle { display: none; background: none; border: 0; font-size: 1.6rem; color: var(--navy); cursor: pointer; }

/* Hero */
/* Hero background. First declaration = plain JPG fallback (always works).
   Second = image-set so supporting browsers load the smaller WebP instead. */
.hero { color: #fff; padding: 96px 0 104px;
  background: linear-gradient(rgba(10, 30, 48, 0.86), rgba(10, 30, 48, 0.92)), url("images/shutterstock_811909301-1.jpg") center/cover no-repeat, radial-gradient(circle at 20% 20%, #143a5c, #0a1e30);
  background: linear-gradient(rgba(10, 30, 48, 0.86), rgba(10, 30, 48, 0.92)), -webkit-image-set(url("images/shutterstock_811909301-1.webp") type("image/webp"), url("images/shutterstock_811909301-1.jpg") type("image/jpeg")) center/cover no-repeat, radial-gradient(circle at 20% 20%, #143a5c, #0a1e30);
  background: linear-gradient(rgba(10, 30, 48, 0.86), rgba(10, 30, 48, 0.92)), image-set(url("images/shutterstock_811909301-1.webp") type("image/webp"), url("images/shutterstock_811909301-1.jpg") type("image/jpeg")) center/cover no-repeat, radial-gradient(circle at 20% 20%, #143a5c, #0a1e30);
}
.hero .tag { display: inline-block; color: var(--gold-soft); letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.78rem; font-weight: 600; margin-bottom: 18px; }
.hero h1 { color: #fff; font-size: clamp(2.1rem, 5vw, 3.4rem); margin: 0 0 20px; max-width: 800px; }
.hero p { font-size: 1.15rem; color: #d5dee7; max-width: 640px; margin: 0 0 34px; }
.hero .actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* Hero slider */
.hero-slider { position: relative; overflow: hidden; background: #0a1e30; }
/* Pull the slider up under the sticky header so the photo fills the top area,
   while the header keeps its original white look. Slides have extra top padding to compensate. */
body.home .hero-slider { margin-top: -75px; }
/* All slides stack in the same grid cell, so the container is exactly as tall
   as the tallest slide — no gaps above/below, no first-child height hack. */
.hero-slider .slides { display: grid; }
.slide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity 0.9s ease;
  display: flex; align-items: center;
  padding: 130px 0 74px; /* extra top space so content clears the floating header */
  background: linear-gradient(rgba(10,30,48,0.82), rgba(10,30,48,0.9)) center/cover no-repeat, radial-gradient(circle at 20% 20%, #143a5c, #0a1e30);
}
.slide.is-active { opacity: 1; visibility: visible; }
.slide-content .tag { display: inline-block; color: var(--gold-soft); letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.78rem; font-weight: 600; margin-bottom: 16px; }
.slide-content h1, .slide-content h2 { color: #fff; font-size: clamp(2rem, 5vw, 3.3rem); margin: 0 0 18px; max-width: 820px; font-family: Georgia, "Times New Roman", serif; line-height: 1.2; }
.slide-content p { font-size: 1.12rem; color: #d5dee7; max-width: 640px; margin: 0 0 30px; }
.slide-content .actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* Per-slide background images. Lighter left-to-right overlay so the photo shows
   through more while the headline (on the left) stays readable. */
.slide[data-bg="bg-header-probate"] { background: linear-gradient(90deg, rgba(10,30,48,0.78) 0%, rgba(10,30,48,0.55) 55%, rgba(10,30,48,0.42) 100%), url("images/bg-header-probate.jpg") center/cover no-repeat, #0a1e30; }
.slide[data-bg="h4-slide-1-new-1"] { background: linear-gradient(90deg, rgba(10,30,48,0.78) 0%, rgba(10,30,48,0.55) 55%, rgba(10,30,48,0.42) 100%), url("images/h4-slide-1-new-1.jpg") center/cover no-repeat, #0a1e30; }
.slide[data-bg="counter-bg"] { background: linear-gradient(90deg, rgba(10,30,48,0.78) 0%, rgba(10,30,48,0.55) 55%, rgba(10,30,48,0.42) 100%), url("images/counter-bg.jpg") center/cover no-repeat, #0a1e30; }

/* Arrows — kept subtle so they don't obscure the headline, especially on mobile */
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; background: rgba(255,255,255,0.14); color: #fff; border: 0; width: 46px; height: 46px; border-radius: 50%; font-size: 1.8rem; line-height: 1; cursor: pointer; transition: background 0.15s ease, opacity 0.15s ease; }
.slider-arrow:hover { background: var(--gold); color: #1c1408; }
.slider-arrow.prev { left: 18px; }
.slider-arrow.next { right: 18px; }

/* Dots — sit inside the slide near the bottom */
.slider-dots { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; z-index: 5; }
.slider-dots .dot { width: 11px; height: 11px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.45); cursor: pointer; padding: 0; transition: background 0.15s ease, transform 0.15s ease; }
.slider-dots .dot.is-active { background: var(--gold); transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }

/* Page hero (inner pages) */
.page-hero { background: linear-gradient(rgba(10,30,48,0.86), rgba(10,30,48,0.92)), radial-gradient(circle at 20% 20%, #143a5c, #0a1e30); color: #fff; padding: 72px 0; background-size: cover; background-position: center; }
.page-hero.hero-services { background: linear-gradient(rgba(10,30,48,0.84), rgba(10,30,48,0.9)), url("images/h4-slide-1-new-1.jpg") center/cover no-repeat, #0a1e30; }
.page-hero.hero-faq { background: linear-gradient(rgba(10,30,48,0.84), rgba(10,30,48,0.9)), url("images/counter-bg.jpg") center/cover no-repeat, #0a1e30; }
.page-hero.hero-contact { background: linear-gradient(rgba(10,30,48,0.84), rgba(10,30,48,0.9)), url("images/Albani-Legal-Home.jpg") center/cover no-repeat, #0a1e30; }
.page-hero .crumbs { color: #b9c6d2; font-size: 0.85rem; margin-bottom: 14px; }
.page-hero .crumbs a { color: var(--gold-soft); }
.page-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 12px; }
.page-hero p { color: #d5dee7; max-width: 640px; margin: 0; }

/* Stats */
.stats { background: var(--navy-deep); color: #fff; }
.stats .grid { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.stat { padding: 44px 16px; border-right: 1px solid rgba(255,255,255,0.08); }
.stat:last-child { border-right: 0; }
.stat .num { font-family: Georgia, serif; font-size: 2.6rem; color: var(--gold); }
.stat .label { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.78rem; color: #b9c6d2; }

/* Sections */
section { padding: 84px 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.section-head .kicker { color: var(--gold); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.78rem; font-weight: 700; }
.section-head h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 12px 0 14px; }
.section-head p { color: var(--muted); font-size: 1.05rem; }
.alt { background: var(--bg-alt); }

/* About */
.about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.about-grid h2 { font-size: 2.2rem; margin-top: 0; }
.about-grid p { color: var(--muted); margin-bottom: 18px; }
.about-card { background: linear-gradient(135deg, var(--navy), var(--navy-deep)); color: #fff; border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow); }
.about-card h3 { color: var(--gold-soft); margin-top: 0; }
.about-card ul { list-style: none; padding: 0; margin: 0; }
.about-card li { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 12px; color: #d5dee7; }
.about-card li:last-child { border-bottom: 0; }
.about-card li::before { content: "\2713"; color: var(--gold); font-weight: 700; }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px 28px; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.card .icon { width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; background: rgba(200, 161, 90, 0.14); color: var(--gold); font-size: 1.5rem; margin-bottom: 18px; }
.card h3 { margin: 0 0 10px; font-size: 1.25rem; }
.card p { color: var(--muted); margin: 0; font-size: 0.98rem; }

/* Why us */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why { padding: 28px; background: #fff; border-radius: var(--radius); border: 1px solid var(--line); }
.why .n { font-family: Georgia, serif; color: var(--gold); font-size: 1.8rem; }
.why h3 { font-size: 1.1rem; margin: 8px 0 8px; }
.why p { color: var(--muted); font-size: 0.95rem; margin: 0; }

/* Testimonials */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.quote { background: #fff; border-radius: var(--radius); padding: 32px; border: 1px solid var(--line); }
.quote .stars { color: var(--gold); letter-spacing: 2px; margin-bottom: 14px; }
.quote p { color: var(--ink); font-style: italic; margin: 0 0 18px; }
.quote .who { font-weight: 700; color: var(--navy); font-style: normal; }

/* Contact */
.contact { background: linear-gradient(135deg, var(--navy), var(--navy-deep)); color: #fff; }
.contact .section-head h2 { color: #fff; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.contact-info ul { padding: 0; margin: 0; }
.contact-info li { list-style: none; display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.1); color: #d5dee7; }
.contact-info .ic { color: var(--gold); font-size: 1.2rem; }
.contact-info a { color: #d5dee7; }
form { background: rgba(255,255,255,0.06); padding: 30px; border-radius: var(--radius); }
form label { display: block; font-size: 0.85rem; color: #c7d2dc; margin: 0 0 6px; }
form input, form textarea, form select { width: 100%; padding: 12px 14px; margin-bottom: 18px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); color: #fff; font: inherit; }
form input::placeholder, form textarea::placeholder { color: #8ea0b0; }
form input:focus, form textarea:focus, form select:focus { outline: 2px solid var(--gold); border-color: transparent; }
form button { width: 100%; border: 0; cursor: pointer; }

/* Map */
.map-wrap { margin-top: 44px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: rgba(255,255,255,0.06); }
.map-wrap iframe { width: 100%; height: 360px; border: 0; display: block; filter: saturate(1.05); }
.map-link { display: block; text-align: center; padding: 12px; color: var(--gold-soft); font-size: 0.9rem; background: rgba(255,255,255,0.05); }
.map-link:hover { color: #fff; }

/* Images */
.about-media { position: relative; }
.about-media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--bg-alt); }
.about-media .badge { position: absolute; bottom: -18px; left: 24px; background: var(--gold); color: #1c1408; font-weight: 700; padding: 12px 20px; border-radius: 12px; box-shadow: var(--shadow); font-family: Georgia, serif; }
.card-media { height: 170px; border-radius: 10px; margin-bottom: 18px; object-fit: cover; width: 100%; background: var(--bg-alt); }

/* Services detailed list */
.svc-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.svc-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; }
.svc-item h3 { margin-top: 0; display: flex; align-items: center; gap: 12px; }
.svc-item .ic { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: rgba(200,161,90,0.14); color: var(--gold); font-size: 1.3rem; flex: none; }
.svc-item p { color: var(--muted); margin: 0 0 10px; }
.svc-item ul { color: var(--muted); margin: 0; padding-left: 18px; }
.svc-item li { margin-bottom: 6px; }

/* FAQ */
.faq-section { max-width: 900px; margin: 0 auto; padding: 72px 24px; }
.faq-group-title { font-size: 1.4rem; margin: 34px 0 16px; color: var(--navy); border-left: 4px solid var(--gold); padding-left: 12px; }
details { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; background: #fff; transition: box-shadow .15s ease; overflow: hidden; }
details[open] { box-shadow: var(--shadow); }
summary { cursor: pointer; padding: 22px 24px; font-family: Georgia, serif; font-size: 1.1rem; color: var(--navy); font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--gold); font-size: 1.6rem; font-family: "Segoe UI", sans-serif; transition: transform .2s ease; }
details[open] summary::after { transform: rotate(45deg); }
details .answer { padding: 0 24px 24px; color: var(--muted); }

/* CTA band */
.cta-band { background: linear-gradient(135deg, var(--navy), var(--navy-deep)); color: #fff; text-align: center; padding: 64px 24px; }
.cta-band h2 { color: #fff; margin: 0 0 12px; }
.cta-band p { color: #d5dee7; margin: 0 0 24px; }

/* Team / Meet your lawyer */
.team-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; }
.team-card { display: flex; gap: 26px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.team-photo { width: 160px; height: 160px; flex: none; border-radius: 14px; object-fit: cover; background: var(--bg-alt); }
.team-body h3 { margin: 0 0 4px; font-size: 1.3rem; }
.team-role { display: block; color: var(--gold); font-weight: 600; font-size: 0.9rem; margin-bottom: 12px; }
.team-body p { color: var(--muted); margin: 0 0 16px; font-size: 0.98rem; }
.team-note { padding-left: 8px; }
.team-note h3 { margin: 0 0 14px; }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); display: flex; gap: 12px; }
.ticks li:last-child { border-bottom: 0; }
.ticks li::before { content: "\2713"; color: var(--gold); font-weight: 700; }

/* Footer */
footer { background: var(--navy-deep); color: #9fb0bf; padding: 40px 0; text-align: center; font-size: 0.9rem; }
footer .brand { justify-content: center; color: #fff; margin-bottom: 12px; }
footer a { color: var(--gold-soft); }
.footer-links { margin: 10px 0; }
.footer-links a { margin: 0 10px; }

/* WhatsApp floating button */
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 60px; height: 60px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.wa-float:hover { transform: scale(1.08); box-shadow: 0 10px 30px rgba(37, 211, 102, 0.6); }
.wa-float svg { width: 32px; height: 32px; fill: #fff; }
.wa-float .wa-pulse { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); animation: wa-pulse 2.2s infinite; }
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (prefers-reduced-motion: reduce) { .wa-float .wa-pulse { animation: none; } }

/* Responsive */
@media (max-width: 900px) {
  .about-grid, .contact-grid, .svc-detail, .team-grid { grid-template-columns: 1fr; }
  .team-card { flex-direction: column; text-align: center; }
  .cards, .quotes { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  nav ul { display: none; }
  .menu-toggle { display: block; order: 3; }
  /* The header CTA button is redundant on mobile (Contact is in the menu) and causes overflow */
  .nav .cta { display: none; }
  .nav { height: 64px; }
  .brand { font-size: 1.1rem; gap: 8px; }
  .brand .logo { height: 38px; }
  .brand small { font-size: 0.6rem; letter-spacing: 0.12em; }
  nav ul.open { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: #fff; padding: 18px 24px; gap: 16px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); z-index: 60; }
  nav ul.open li { list-style: none; }
  /* Slider arrows: smaller, more transparent, and tucked to the edges so they don't cover the headline on phones */
  .slider-arrow { width: 34px; height: 34px; font-size: 1.3rem; background: rgba(255,255,255,0.18); opacity: 0.55; }
  .slider-arrow.prev { left: 6px; }
  .slider-arrow.next { right: 6px; }
  .slide { padding: 104px 0 56px; }
  .stats .grid, .cards, .quotes, .why-grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  section { padding: 60px 0; }
}