@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
   --teal: #304F52;
   --gold: #B68C5A;
   --ink: #172629;
   --cream: #f5f1e9;
   --paper: #fbfaf7;
   --muted: #6d7777;
   --line: #d9dedb;
   --radius: 34px;
   --shadow: 0 24px 70px rgba(20, 40, 42, .12)
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   font-family: Poppins, sans-serif;
   color: var(--ink);
   background: var(--paper);
   line-height: 1.75
}

a {
   text-decoration: none;
   color: inherit
}

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

.container-xl {
   max-width: 1320px
}

.eyebrow {
   font-size: .76rem;
   letter-spacing: .18em;
   text-transform: uppercase;
   font-weight: 600;
   color: var(--gold)
}

.display-title {
   font-size: clamp(2.8rem, 6vw, 6.7rem);
   line-height: .98;
   letter-spacing: -.055em;
   font-weight: 500
}

.section-title {
   font-size: clamp(1rem, 4vw, 4.2rem);
   line-height: 1.05;
   letter-spacing: -.045em;
   font-weight: 500;
   text-transform: capitalize;
}

.lead-copy {
   font-size: 1.05rem;
   color: #5e6868;
   max-width: 720px
}

.site-header {
   position: sticky;
   top: 0;
   z-index: 1040;
   background: rgba(251, 250, 247, .94);
   backdrop-filter: blur(16px);
   border-bottom: 1px solid rgba(48, 79, 82, .1)
}

.navbar {
   min-height: 82px
}

.brand {
   font-size: 1.08rem;
   font-weight: 700;
   letter-spacing: .04em;
   color: var(--teal)
}

.nav-link {
   font-size: .92rem !important;
   font-weight: 500 !important;
   padding: .8rem .9rem !important
}

.phone-pill {
   background: var(--gold);
   color: #fff !important;
   border-radius: 999px;
   padding: .75rem 1.1rem !important
}

.mega-wrap {
   position: relative
}

.mega-menu {
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%) translateY(12px);
   width: 660px;
   background: #fff;
   border: 1px solid #e7e7e2;
   border-radius: 24px;
   padding: 24px;
   box-shadow: var(--shadow);
   opacity: 0;
   visibility: hidden;
   transition: .25s;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 6px
}

.mega-wrap:hover .mega-menu {
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(0)
}

.mega-menu a {
   padding: 10px 12px;
   border-radius: 10px;
   font-size: .9rem
}

.mega-menu a:hover {
   background: var(--cream);
   color: var(--gold)
}

.hero {
   min-height: 720px;
   display: flex;
   align-items: flex-end;
   position: relative;
   overflow: hidden;
   background: var(--teal);
   color: #fff
}

.hero::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(20, 44, 47, .92) 0%, rgba(20, 44, 47, .68) 46%, rgba(20, 44, 47, .12) 78%)
}

.hero-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover
}

.hero-content {
   position: relative;
   z-index: 2;
   padding: 110px 0 90px;
   max-width: 900px
}

.hero .eyebrow {
   color: #e0bb8b
}

.hero .lead-copy {
   color: rgba(255, 255, 255, .78)
}

.btn-gold,
.btn-outline-lightx {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 13px 20px;
   border-radius: 999px;
   font-size: .9rem;
   font-weight: 600;
   transition: .25s
}

.btn-gold {
   background: var(--gold);
   color: #fff
}

.btn-gold:hover {
   transform: translateY(-2px);
   color: #fff
}

.btn-outline-lightx {
   border: 1px solid rgba(255, 255, 255, .55);
   color: #fff
}

.btn-outline-lightx:hover {
   background: #fff;
   color: var(--teal)
}

.section {
   padding: 110px 0
}

.section-soft {
   background: var(--cream)
}

.section-dark {
   background: var(--teal);
   color: #fff
}

.section-dark .lead-copy {
   color: rgba(255, 255, 255, .7)
}

.intro-grid {
   display: grid;
   grid-template-columns: .85fr 1.15fr;
   gap: 10vw;
   align-items: start
}

.visual-split {
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: 64px;
   align-items: center
}

.visual-split.reverse {
   grid-template-columns: .95fr 1.05fr
}

.visual-split.reverse .media-panel {
   order: 2
}

.media-panel {
   height: 580px;
   border-radius: var(--radius);
   overflow: hidden;
   position: relative;
   box-shadow: none
}

.media-panel img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: .7s
}

.media-panel:hover img {
   transform: scale(1.035)
}

.floating-card {
   background: #fff;
   padding: 28px;
   border-radius: 22px;
   box-shadow: var(--shadow);
   margin: -80px 30px 0;
   position: relative;
   z-index: 2
}

.topic-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px
}

.topic-card {
   background: #fff;
   border: 1px solid #e5e6e2;
   border-radius: 22px;
   padding: 26px;
   min-height: 190px;
   transition: .25s
}

.topic-card:hover {
   transform: translateY(-6px);
   box-shadow: var(--shadow);
   border-color: transparent
}

.topic-card i {
   font-size: 1.45rem;
   color: var(--gold)
}

.topic-card h3 {
   font-size: 1.1rem;
   margin: 28px 0 8px
}

.topic-card p {
   font-size: .9rem;
   color: var(--muted);
   margin: 0
}

.expertise-strip {
   display: flex;
   gap: 20px;
   overflow-x: auto;
   padding: 12px 0 25px;
   scroll-snap-type: x mandatory
}

.expertise-strip::-webkit-scrollbar {
   height: 5px
}

.expertise-strip::-webkit-scrollbar-thumb {
   background: var(--gold)
}

.exp-card {
   flex: 0 0 320px;
   height: 450px;
   border-radius: 26px;
   overflow: hidden;
   position: relative;
   scroll-snap-align: start
}

.exp-card img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.exp-card::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(0deg, rgba(17, 38, 40, .92), transparent 65%)
}

.exp-card-body {
   position: absolute;
   z-index: 2;
   left: 24px;
   right: 24px;
   bottom: 24px;
   color: #fff
}

.exp-card-body h3 {
   font-size: 1.35rem
}

.process {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 0;
   margin-top: 60px
}

.process-step {
   padding: 30px;
   border-top: 1px solid rgba(255, 255, 255, .3);
   position: relative
}

.process-step:before {
   content: '';
   position: absolute;
   top: -6px;
   left: 30px;
   width: 11px;
   height: 11px;
   background: var(--gold);
   border-radius: 50%
}

.process-step span {
   color: #d7b383;
   font-size: .8rem
}

.process-step h3 {
   font-size: 1.15rem;
   margin-top: 18px
}

.journal-row {
   display: grid;
   grid-template-columns: 1.8fr .5fr 40px;
   gap: 24px;
   align-items: center;
   padding: 24px 0;
   border-bottom: 1px solid #d9ddda;
   transition: .2s
}

.journal-row:hover {
   padding-left: 10px;
   color: var(--gold)
}

.journal-row strong {
   font-weight: 500;
   font-size: 1.05rem
}

.faq .accordion-item {
   border: 0;
   border-bottom: 1px solid rgba(255, 255, 255, .2);
   background: transparent;
   color: #fff
}

.faq .accordion-button {
   background: transparent;
   color: #fff;
   box-shadow: none;
   padding: 22px 0;
   font-weight: 500
}

.faq .accordion-button::after {
   filter: invert(1)
}

.faq .accordion-body {
   padding: 0 0 22px;
   color: rgba(255, 255, 255, .7)
}

.contact-band {
   background: #fff;
   border-radius: var(--radius);
   padding: 54px;
   box-shadow: var(--shadow)
}

.office-card {
   border-top: 1px solid var(--line);
   padding: 18px 0
}

.form-control,
.form-select {
   border: 0;
   border-bottom: 1px solid #ccd2cf;
   border-radius: 0;
   padding: 13px 0;
   background: transparent
}

.form-control:focus,
.form-select:focus {
   box-shadow: none;
   border-color: var(--gold)
}

.site-footer {
   background: #1f3739;
   color: #fff;
   padding: 75px 0 25px
}

.site-footer a {
   color: rgba(255, 255, 255, .72)
}

.site-footer a:hover {
   color: #e0bb8b
}

.socials a {
   display: inline-grid;
   place-items: center;
   width: 42px;
   height: 42px;
   border: 1px solid rgba(255, 255, 255, .2);
   border-radius: 50%;
   margin-right: 8px
}

.float-actions {
   position: fixed;
   right: 18px;
   bottom: 20px;
   z-index: 1030;
   display: flex;
   flex-direction: column;
   gap: 10px
}

.float-actions a,
.float-actions button {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   border: 0;
   box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
   background: #fff;
   color: var(--teal)
}

.float-actions .wa {
   background: #25D366;
   color: #fff
}

.reveal {
   opacity: 0;
   transform: translateY(24px);
   transition: .7s ease
}

.reveal.visible {
   opacity: 1;
   transform: none
}

.modal-content {
   border: 0;
   border-radius: 26px
}

.disclaimer-lock {
   overflow: hidden
}

@media(max-width:991px) {
   .mega-menu {
      display: none
   }

   .hero {
      min-height: 650px
   }

   .intro-grid,
   .visual-split,
   .visual-split.reverse {
      grid-template-columns: 1fr;
      gap: 40px
   }

   .visual-split.reverse .media-panel {
      order: 0
   }

   .media-panel {
      height: 430px
   }

   .topic-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .process {
      grid-template-columns: 1fr 1fr
   }

   .section {
      padding: 80px 0
   }

   .contact-band {
      padding: 32px
   }

   .navbar-collapse {
      background: var(--paper);
      padding: 20px
   }
}

@media(max-width:575px) {
   .hero {
      min-height: 620px
   }

   .hero-content {
      padding: 80px 0 60px
   }

   .display-title {
      font-size: clamp(2.5rem, 13vw, 4rem)
   }

   .section {
      padding: 64px 0
   }

   .topic-grid {
      grid-template-columns: 1fr
   }

   .process {
      grid-template-columns: 1fr
   }

   .media-panel {
      height: 330px
   }

   .exp-card {
      flex-basis: 82vw;
      height: 410px
   }

   .journal-row {
      grid-template-columns: 1fr 28px
   }

   .journal-row span {
      display: none
   }

   .contact-band {
      border-radius: 22px;
      padding: 24px
   }

   .float-actions {
      right: 12px;
      bottom: 12px
   }
}

/* =====================================================
   REVISION 4 — DISTINCT PAGE OPENINGS & NEW FOOTER
===================================================== */
.home-hero {
   min-height: 760px;
   background: var(--teal);
   color: #fff;
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center
}

.home-hero-art {
   position: absolute;
   inset: 0 0 0 48%;
   overflow: hidden
}

.home-hero-art img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.hero-art-shade {
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, var(--teal) 0%, rgba(48, 79, 82, .56) 25%, rgba(48, 79, 82, .08) 75%), linear-gradient(0deg, rgba(20, 40, 42, .35), transparent 50%)
}

.home-hero-grid {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1.15fr .85fr;
   align-items: end;
   min-height: 760px;
   padding-top: 95px;
   padding-bottom: 72px
}

.home-hero-copy {
   max-width: 780px
}

.home-hero-copy h1 {
   font-size: 78px;
   line-height: 1.2;
   letter-spacing: -.055em;
   font-weight: 5 00;
   margin: 18px 0 28px
}

.home-hero-copy h1 span {
   color: #e1b77f
}

.home-hero-copy p {
   font-size: 1.1rem;
   color: rgba(255, 255, 255, .84)
}

.home-hero-copy small {
   color: rgba(255, 255, 255, .58)
}

.hero-actions {
   display: flex;
   gap: 24px;
   align-items: center;
   margin-top: 32px
}

.hero-link {
   color: #fff;
   border-bottom: 1px solid rgba(255, 255, 255, .55);
   padding: 10px 0
}

.hero-side-card {
   justify-self: end;
   align-self: end;
   width: 330px;
   background: rgba(26, 26, 26, 0.26);
   backdrop-filter: blur(16px);
   border: 1px solid rgba(255, 252, 252, 0.256);
   padding: 28px;
   display: grid;
   grid-template-columns: 44px 1fr;
   gap: 18px;
   border-radius: 12px;
}

.hero-side-card p {
   font-size: .82rem;
   line-height: 1.6;
   color: rgba(255, 255, 255, .62);
   margin: 8px 0 0
}

.hero-card-number {
   color: #e1b77f;
   font-size: .78rem
}

.hero-scroll {
   position: absolute;
   right: 28px;
   bottom: 30px;
   z-index: 3;
   writing-mode: vertical-rl;
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: .68rem;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .55)
}

section.home-hero {
   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.818), rgba(0, 0, 0, 0.527)), url(...),
      url("../images/cybersecurity_attorney_hero_img.webp");

   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

   min-height: 760px;
   display: flex;
   align-items: center;
}

.internal-opening {
   padding: 76px 0 88px;
   background: #f7f4ed;
   border-bottom: 1px solid #e5e0d6
}

.opening-grid {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   gap: 8vw;
   align-items: center
}

.opening-copy h1 {
   font-size: clamp(3rem, 5vw, 5.6rem);
   line-height: .98;
   letter-spacing: -.055em;
   font-weight: 500;
   margin: 18px 0 26px;
   color: var(--teal)
}

.opening-copy>p {
   font-size: 1.05rem;
   color: var(--muted);
   max-width: 590px
}

.opening-rule {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-top: 44px;
   color: #7d8582
}

.opening-rule span {
   width: 80px;
   height: 1px;
   background: var(--gold)
}

.opening-image {
   height: 520px;
   position: relative;
   margin: 0;
   overflow: hidden
}

.opening-image img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.opening-image:after {
   content: '';
   position: absolute;
   inset: auto 0 0;
   height: 30%;
   background: linear-gradient(transparent, rgba(20, 40, 42, .5))
}

.opening-image figcaption {
   position: absolute;
   z-index: 2;
   bottom: 20px;
   left: 24px;
   color: #fff;
   text-transform: uppercase;
   letter-spacing: .14em;
   font-size: .7rem
}

.security-opening,
.crime-opening,
.litigation-opening {
   background: #203d40;
   color: #fff
}

.security-opening .opening-copy h1,
.crime-opening .opening-copy h1,
.litigation-opening .opening-copy h1 {
   color: #fff
}

.security-opening .opening-copy>p,
.crime-opening .opening-copy>p,
.litigation-opening .opening-copy>p {
   color: rgba(255, 255, 255, .65)
}

.security-opening .opening-rule,
.crime-opening .opening-rule,
.litigation-opening .opening-rule {
   color: rgba(255, 255, 255, .5)
}

.evidence-opening .opening-image {
   border-radius: 50% 50% 6px 6px
}

.ai-opening {
   background: #ebe6dc
}

.ai-opening .opening-image {
   clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 12%)
}

.privacy-opening .opening-image {
   border-radius: 260px 260px 0 0
}

.legal-opening .opening-image {
   transform: rotate(1.3deg)
}

.profile-opening .opening-grid {
   grid-template-columns: 1.05fr .95fr
}

.profile-opening .opening-image {
   height: 460px;
   margin-top: 35px
}

.editorial-opening {
   padding: 105px 0 58px;
   background: var(--paper)
}

.editorial-title-row {
   display: grid;
   grid-template-columns: 1.2fr .8fr;
   gap: 9vw;
   align-items: end
}

.editorial-title-row h1,
.resource-opening h1,
.contact-opening h1 {
   font-size: clamp(3.1rem, 5.5vw, 6rem);
   line-height: .98;
   letter-spacing: -.055em;
   font-weight: 500;
   margin: 18px 0;
   color: var(--teal)
}

.editorial-title-row p,
.resource-opening p,
.contact-opening p {
   color: var(--muted);
   font-size: 1.05rem
}

.journal-filter {
   margin-top: 55px;
   padding: 22px 0;
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   display: flex;
   gap: 24px;
   flex-wrap: wrap;
   font-size: .86rem
}

.journal-filter span {
   color: var(--muted)
}

.journal-filter a:hover {
   color: var(--gold)
}

.resource-opening {
   padding: 100px 0 70px;
   background: #eee8dd
}

.resource-opening-grid {
   display: grid;
   grid-template-columns: 1.1fr .9fr;
   gap: 8vw;
   align-items: end
}

.resource-search {
   background: #fff;
   padding: 20px 24px;
   display: flex;
   align-items: center;
   gap: 15px;
   box-shadow: var(--shadow)
}

.resource-search i {
   color: var(--gold)
}

.resource-search input {
   border: 0;
   outline: 0;
   width: 100%;
   font-family: inherit
}

.contact-opening {
   padding: 80px 0;
   background: #f3efe7
}

.contact-opening-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 7vw;
   align-items: center
}

.contact-opening-image {
   height: 440px;
   overflow: hidden;
   border-radius: 0 180px 0 0
}

.contact-opening-image img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.contact-phone-big {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   margin-top: 24px;
   color: var(--teal);
   font-size: 1.15rem;
   font-weight: 600
}

.contact-phone-big i {
   color: var(--gold)
}

.new-footer {
   background: #183538;
   padding: 0;
   color: #fff
}

.footer-top {
   padding: 72px 0 58px;
   display: grid;
   grid-template-columns: 1.15fr .75fr .65fr 1.45fr;
   gap: 52px
}

.footer-brand-block p {
   color: rgba(255, 255, 255, .6);
   max-width: 330px;
   display: flex;
}

.footer-links,
.footer-contact {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 9px;
}

.new-footer h6 {
   color: #d9b17d;
   text-transform: uppercase;
   letter-spacing: .14em;
   font-size: .7rem;
   margin-bottom: 13px
}

.new-footer a {
   color: rgba(255, 255, 255, .68);
   font-size: .84rem
}

.new-footer a:hover {
   color: #fff
}

.footer-phone {
   font-size: 1rem !important;
   color: #fff !important
}

.footer-contact>a i {
   color: #d9b17d;
   margin-right: 8px
}

.footer-office {
   margin-top: 10px;
   display: flex;
   flex-direction: column;
   gap: 3px
}

.footer-office strong {
   font-size: .78rem;
   font-weight: 500
}

.footer-office span {
   font-size: .72rem;
   color: rgba(255, 255, 255, .48);
   line-height: 1.55
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .12);
   padding: 22px 0;
   display: flex;
   justify-content: space-between;
   gap: 24px;
   font-size: .7rem;
   color: rgba(255, 255, 255, .42);
   text-align: center;
   display: block;
   
}

.float-actions .call {
   background: var(--gold);
   color: #fff
}

.float-actions a,
.float-actions button {
   transition: transform .2s, opacity .2s
}

.float-actions a:hover,
.float-actions button:hover {
   transform: translateY(-3px)
}

/* Center Footer Content on Mobile */
@media (max-width: 767px) {

   /* 1. Center the main footer container */
   .footer-top {
      display: grid;
      justify-items: center;
      text-align: center;
   }

   /* 2. Center each block (Brand, Links, Contact) */
   .footer-brand-block,
   .footer-links,
   .footer-contact {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      width: 100%;
      /* Ensure it takes full width to center correctly */
   }

   /* 3. Center the social icons specifically */
   .socials.mt-4 {
      display: flex;
      justify-content: center;
      gap: 1rem;
      margin-left: auto;
      margin-right: auto;
   }

   /* 4. Remove default padding from footer lists to keep them centered */
   .footer-links ul {
      padding-left: 0;
      list-style: none;
   }
}

@media (max-width: 767px) {
   /* ... previous code ... */

   .footer-bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      /* Centers items horizontally in a column */
      text-align: center;
      gap: 10px;
      /* Space between the spans */
   }

   .footer-bottom span {
      display: block;
      width: 100%;
   }
}

@media(max-width:991px) {
   .home-hero-art {
      inset: 0
   }

   .home-hero-art:after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(30, 60, 62, .7)
   }

   .home-hero-grid {
      grid-template-columns: 1fr;
      min-height: 700px
   }

   .hero-side-card {
      display: none
   }

   .hero-scroll {
      display: none
   }

   .opening-grid,
   .editorial-title-row,
   .resource-opening-grid,
   .contact-opening-grid {
      grid-template-columns: 1fr;
      gap: 42px
   }

   .opening-image {
      height: 420px
   }

   .footer-top {
      grid-template-columns: 1fr 1fr
   }

   .contact-opening-image {
      height: 380px
   }
}

@media(max-width:575px) {

   .home-hero,
   .home-hero-grid {
      min-height: 650px
   }

   .home-hero-copy h1 {
      font-size: clamp(2.7rem, 13vw, 4.1rem)
   }

   .hero-actions {
      align-items: flex-start;
      flex-direction: column;
      gap: 10px
   }

   .internal-opening {
      padding: 55px 0
   }

   .opening-copy h1,
   .editorial-title-row h1,
   .resource-opening h1,
   .contact-opening h1 {
      font-size: clamp(2.7rem, 12vw, 4rem)
   }

   .opening-image {
      height: 320px
   }

   .footer-top {
      grid-template-columns: 1fr;
      gap: 38px;
      padding-top: 55px
   }

   .footer-bottom {
      flex-direction: column
   }

   .editorial-opening,
   .resource-opening {
      padding-top: 70px
   }

   .contact-opening-image {
      height: 300px
   }
}


/* =====================================================
   FINAL RELEASE — CONSISTENT COMPACT INTERNAL HEROES
===================================================== */
.compact-page-hero {
   position: relative;
   min-height: 360px;
   display: flex;
   align-items: flex-end;
   background-size: cover;
   background-position: center;
   color: #fff;
   overflow: hidden
}

.compact-page-hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(25, 52, 54, .94) 0%, rgba(25, 52, 54, .78) 46%, rgba(25, 52, 54, .34) 100%)
}

.compact-page-hero::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 110px;
   height: 4px;
   background: var(--gold)
}

.compact-hero-inner {
   position: relative;
   z-index: 2;
   width: 100%;
   max-width: 1320px;
   margin: 0 auto;
   padding: 78px 12px 62px
}

.compact-hero-copy {
   max-width: 820px
}

.compact-hero-copy .eyebrow {
   color: #e1b77f
}

.compact-hero-copy h1 {
   font-size: clamp(2.8rem, 5vw, 5.2rem);
   line-height: .98;
   letter-spacing: -.05em;
   font-weight: 500;
   margin: 14px 0 18px;
   color: #fff
}

.compact-hero-copy>p {
   font-size: 1.05rem;
   color: rgba(255, 255, 255, .78);
   max-width: 650px;
   margin: 0
}

.about-hero {
   background-position: center 44%
}

.cybercrime-hero {
   background-position: center 42%
}

.digital_evidence-hero {
   background-position: center 55%
}

.digital_forensics-hero {
   background-position: center 50%
}

.ai_technology_law-hero {
   background-position: center 48%
}

.data_privacy-hero {
   background-position: center 46%
}

.disclaimer-modal .modal-content {
   border: 0;
   border-radius: 28px;
   box-shadow: 0 30px 90px rgba(16, 38, 40, .22);
   overflow: hidden
}

.disclaimer-modal .modal-body {
   position: relative;
   background: #fff
}

.disclaimer-modal .modal-body:before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 5px;
   background: var(--gold)
}

.disclaimer-modal .modal-icon {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: var(--cream);
   color: var(--teal);
   font-size: 1.35rem;
   margin-bottom: 22px
}

.disclaimer-modal h2 {
   color: var(--teal);
   font-size: clamp(1.7rem, 3vw, 2.5rem);
   letter-spacing: -.035em
}

.disclaimer-modal .disagree-message {
   padding: 16px 18px;
   background: #f7f4ed;
   border-left: 3px solid var(--gold)
}

@media(max-width:991px) {
   .compact-page-hero {
      min-height: 330px
   }

   .compact-hero-inner {
      padding: 64px 24px 52px
   }
}

@media(max-width:575px) {
   .compact-page-hero {
      min-height: 290px
   }

   .compact-hero-inner {
      padding: 52px 18px 42px
   }

   .compact-hero-copy h1 {
      font-size: clamp(2.35rem, 11vw, 3.6rem)
   }
}


/* =====================================================
   FINAL QA PASS — PAGE & DISCLAIMER CONSISTENCY
===================================================== */
.blog-hero,
.resources-hero,
.contact-hero {
   min-height: 340px;
   background-position: center 48%
}

.blog-hero::before,
.resources-hero::before,
.contact-hero::before {
   background: linear-gradient(90deg, rgba(25, 52, 54, .95) 0%, rgba(25, 52, 54, .76) 48%, rgba(25, 52, 54, .28) 100%)
}

.disclaimer-dialog {
   max-width: 620px !important
}

.disclaimer-modal .modal-content {
   border-radius: 22px
}

.disclaimer-modal .modal-body {
   padding: 28px !important
}

.disclaimer-modal .modal-icon {
   width: 44px;
   height: 44px;
   font-size: 1.1rem;
   margin-bottom: 14px
}

.disclaimer-modal .eyebrow {
   margin-bottom: 5px
}

.disclaimer-modal h2 {
   font-size: 1.75rem;
   margin-bottom: 12px
}

.disclaimer-modal p {
   font-size: 12px;
   line-height: 1.65;
   margin-bottom: 10px
}

.disclaimer-modal .small {
   font-size: .76rem !important
}

.disclaimer-modal .d-flex.mt-4 {
   margin-top: 18px !important
}

.disclaimer-modal .btn {
   padding: 10px 16px;
   border-radius: 999px;
   font-size: .84rem;
   font-weight: 600;
   display: block;
}

@media(max-width:575px) {
   .disclaimer-dialog {
      margin: 14px
   }

   .disclaimer-modal .modal-body {
      padding: 22px !important
   }

   .disclaimer-modal h2 {
      font-size: 1.5rem
   }

   .blog-hero,
   .resources-hero,
   .contact-hero {
      min-height: 285px
   }
}

/* =====================================================
   FINAL GLOBAL CONSISTENCY PATCH
   One header/menu pattern across every page.
===================================================== */
.site-header .navbar {
   min-height: 82px
}

.site-header .navbar-brand {
   white-space: nowrap
}

.compact-page-hero {
   min-height: clamp(300px, 34vw, 440px);
   display: flex;
   align-items: flex-end;
   background-size: cover;
   background-position: center;
   position: relative
}

.compact-page-hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, rgba(25, 43, 45, .88) 0%, rgba(25, 43, 45, .66) 48%, rgba(25, 43, 45, .22) 100%)
}

.compact-page-hero .container-xl {
   position: relative;
   z-index: 1
}

.compact-hero-inner {
   padding: clamp(64px, 8vw, 108px) 0 clamp(46px, 6vw, 76px)
}

.compact-hero-copy {
   max-width: 760px;
   color: #fff
}

.compact-hero-copy h1 {
   font-size: 56px;
   line-height: 1.02;
   letter-spacing: -.045em;
   font-weight: 500
}

.compact-hero-copy p {
   max-width: 680px;
   color: rgba(255, 255, 255, .82);
   font-size: 1.05rem
}

@media(max-width:991.98px) {
   .mega-menu {
      display: none
   }

   .site-header .navbar-collapse {
      padding: 1rem 0 1.35rem
   }

   .phone-pill {
      display: inline-flex !important;
      margin-top: .4rem
   }

   .compact-page-hero {
      min-height: 320px;
      background-position: center
   }
}


/* =====================================================
   FINAL BUTTON SYSTEM - CONTRAST CHANGES BY BACKGROUND
   Light backgrounds: deep teal. Dark backgrounds: gold.
===================================================== */
.btn-gold {
   background: #B68C5A;
   color: #fff;
   text-decoration: none
}

.btn-gold:hover {
   background: #304F52;
   border-color: var(--gold);
   color: #fff;
   transform: translateY(-2px)
}

.section-dark .btn-gold,
.home-hero .btn-gold,
.compact-page-hero .btn-gold {
   background: var(--gold);
   border-color: var(--gold);
   color: #fff
}

.section-dark .btn-gold:hover,
.home-hero .btn-gold:hover,
.compact-page-hero .btn-gold:hover {
   background: #fff;
   border-color: #fff;
   color: var(--teal)
}

.section-soft .btn-gold,
.contact-band .btn-gold,
.case-form-card .btn-gold {
   background: var(--gold);
   color: #fff
}

.section-soft .btn-gold:hover,
.contact-band .btn-gold:hover,
.case-form-card .btn-gold:hover {
   background: var(--teal);
   border-color: var(--gold);
   color: #fff
}

.btn-outline-lightx:hover {
   background: var(--gold);
   border-color: var(--gold);
   color: #fff
}

/* =====================================================
   CONTACT PAGE - DETAILS, SIMPLE FORM & MAPS
===================================================== */
.contact-main-section {
   background: #fff
}

.contact-detail-list {
   display: grid;
   gap: 14px
}

.contact-detail-item {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 18px 0;
   border-bottom: 1px solid var(--line);
   color: var(--teal)
}

.contact-detail-item:hover {
   color: var(--gold)
}

.contact-detail-icon {
   width: 48px;
   height: 48px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: var(--cream);
   color: var(--gold);
   font-size: 1.05rem;
   flex: 0 0 auto
}

.contact-detail-item small {
   display: block;
   text-transform: uppercase;
   letter-spacing: .12em;
   font-size: .66rem;
   color: var(--muted);
   margin-bottom: 3px
}

.contact-detail-item strong {
   font-size: .95rem;
   font-weight: 600;
   word-break: break-word
}

.case-form-card {
   background: var(--cream);
   border-radius: 28px;
   padding: 38px;
   box-shadow: 0 18px 50px rgba(31, 55, 57, .08)
}

.case-form-card .form-control {
   background: #fff;
   border: 1px solid #dedfd9;
   border-radius: 12px;
   padding: 14px 15px
}

.case-form-card textarea.form-control {
   resize: vertical;
   min-height: 150px
}

.case-form-card .form-control:focus {
   border-color: var(--gold);
   box-shadow: 0 0 0 3px rgba(182, 140, 90, .12)
}

.case-form-card .form-label {
   font-size: .82rem;
   font-weight: 600;
   color: var(--teal)
}

.form-note {
   font-size: .75rem;
   color: var(--muted);
   line-height: 1.6
}

.location-card {
   height: 100%;
   background: #fff;
   border-radius: 24px;
   overflow: hidden;
   border: 1px solid rgba(48, 79, 82, .1);
   box-shadow: 0 15px 45px rgba(31, 55, 57, .07);
   transition: .25s
}

.location-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 22px 55px rgba(31, 55, 57, .12)
}

.map-frame {
   height: 255px;
   background: #ddd;
   overflow: hidden
}

.map-frame iframe {
   width: 100%;
   height: 100%;
   border: 0;
   display: block;
   filter: saturate(.75) contrast(.95)
}

.location-card-body {
   padding: 28px
}

.location-number {
   display: inline-block;
   color: var(--gold);
   font-size: .72rem;
   font-weight: 700;
   letter-spacing: .12em;
   margin-bottom: 14px
}

.location-card h3 {
   font-size: 1.18rem;
   color: var(--teal);
   margin-bottom: 12px
}

.location-card p {
   font-size: .84rem;
   line-height: 1.75;
   color: var(--muted);
   min-height: 118px
}

.btn-location {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 16px;
   border-radius: 999px;
   background: var(--gold);
   color: #fff;
   font-size: .78rem;
   font-weight: 600;
   border: 1px solid var(--gold)
}

.btn-location:hover {
   background: var(--teal);
   border-color: var(--teal);
   color: #fff
}

.contact-notice-section .section-title {
   max-width: 760px
}

.call-float {
   background: var(--gold) !important;
   color: #fff !important
}

.call-float:hover {
   background: var(--teal) !important
}

@media(max-width:991px) {
   .case-form-card {
      padding: 30px
   }

   .location-card p {
      min-height: 0
   }

   .map-frame {
      height: 230px
   }
}

@media(max-width:575px) {
   .case-form-card {
      padding: 22px;
      border-radius: 20px
   }

   .map-frame {
      height: 220px
   }

   .location-card-body {
      padding: 22px
   }

   .contact-detail-item strong {
      font-size: .86rem
   }
}

/* =====================================================
   CONTACT / BLOG / RESOURCES — FINAL POLISH
   Floating Call, WhatsApp and Back-to-Top controls
===================================================== */
.polished-action-page .floating-actions {
   position: fixed;
   right: 22px;
   bottom: 22px;
   z-index: 1050;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 10px
}

.polished-action-page .float-btn {
   height: 46px;
   min-width: 46px;
   padding: 0 15px;
   border: 0;
   border-radius: 999px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   text-decoration: none;
   font-family: inherit;
   font-size: .78rem;
   font-weight: 600;
   box-shadow: 0 10px 28px rgba(17, 44, 46, .18);
   transition: .25s;
   white-space: nowrap
}

.polished-action-page .float-btn:hover {
   transform: translateY(-3px)
}

.polished-action-page .call-float {
   background: var(--gold) !important;
   color: #fff !important
}

.polished-action-page .whatsapp-float {
   background: #25D366 !important;
   color: #fff !important
}

.polished-action-page .top-float {
   background: var(--teal) !important;
   color: #fff !important;
   padding: 0;
   width: 46px
}

.polished-action-page .float-btn i {
   font-size: 1rem
}

/* Blog — image-card journal only */
.blog-image-section {
   background: #fff
}

.visual-blog-card {
   height: 100%;
   background: #fff;
   border: 1px solid rgba(48, 79, 82, .1);
   border-radius: 22px;
   overflow: hidden;
   box-shadow: 0 14px 38px rgba(31, 55, 57, .07);
   transition: .3s
}

.visual-blog-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 22px 52px rgba(31, 55, 57, .13)
}

.visual-blog-image {
   position: relative;
   display: block;
   height: 260px;
   overflow: hidden
}

.visual-blog-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: .45s
}

.visual-blog-card:hover img {
   transform: scale(1.045)
}

.visual-blog-image:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 45%, rgba(22, 48, 50, .72) 100%)
}

.visual-blog-category {
   position: absolute;
   left: 20px;
   bottom: 18px;
   z-index: 2;
   background: var(--gold);
   color: #fff;
   padding: 7px 11px;
   border-radius: 999px;
   font-size: .68rem;
   font-weight: 600;
   letter-spacing: .04em
}

.visual-blog-body {
   padding: 25px 24px 27px
}

.visual-blog-body h3 {
   font-size: 1.12rem;
   line-height: 1.45;
   color: var(--teal);
   min-height: 78px;
   margin-bottom: 18px
}

/* Resources — structured visual hub */
.resource-feature-grid {
   display: grid;
   grid-template-columns: 1.35fr .8fr;
   grid-template-rows: 240px 240px;
   gap: 18px
}

.resource-feature-card {
   position: relative;
   overflow: hidden;
   border-radius: 24px;
   min-height: 240px;
   background: var(--teal)
}

.resource-feature-large {
   grid-row: 1 / span 2
}

.resource-feature-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   position: absolute;
   inset: 0;
   transition: .5s
}

.resource-feature-card:hover img {
   transform: scale(1.04)
}

.resource-feature-card:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(24, 51, 53, .08), rgba(24, 51, 53, .9))
}

.resource-feature-overlay {
   position: absolute;
   z-index: 2;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 28px;
   color: #fff;
   display: flex;
   gap: 18px;
   align-items: flex-start
}

.resource-feature-overlay h3 {
   font-size: 1.35rem;
   margin: 4px 0 8px
}

.resource-feature-large .resource-feature-overlay h3 {
   font-size: 2rem
}

.resource-feature-overlay p {
   color: rgba(255, 255, 255, .78);
   max-width: 600px;
   margin: 0;
   font-size: .86rem
}

.resource-icon {
   width: 48px;
   height: 48px;
   flex: 0 0 auto;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: var(--gold);
   font-size: 1.1rem
}

.resource-icon-card {
   height: 100%;
   background: #fff;
   border-radius: 20px;
   padding: 28px;
   border: 1px solid rgba(48, 79, 82, .09);
   transition: .25s
}

.resource-icon-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 16px 38px rgba(31, 55, 57, .09)
}

.resource-icon-card>i {
   font-size: 1.5rem;
   color: var(--gold);
   display: block;
   margin-bottom: 18px
}

.resource-icon-card h3 {
   font-size: 1.05rem;
   color: var(--teal)
}

.resource-icon-card p {
   font-size: .82rem;
   color: var(--muted);
   line-height: 1.7
}

.resource-icon-card a {
   font-size: .78rem;
   font-weight: 600;
   color: var(--gold)
}

.resource-dictionary .term-card {
   position: relative;
   padding-top: 30px
}

.resource-term-icon {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   background: var(--cream);
   color: var(--gold);
   margin-bottom: 16px
}

@media(max-width:991px) {
   .resource-feature-grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto
   }

   .resource-feature-large {
      grid-row: auto
   }

   .resource-feature-card {
      height: 320px
   }

   .polished-action-page .floating-actions {
      right: 16px;
      bottom: 16px
   }
}

@media(max-width:575px) {
   .polished-action-page .float-btn span {
      display: none
   }

   .polished-action-page .float-btn {
      width: 44px;
      min-width: 44px;
      height: 44px;
      padding: 0
   }

   .visual-blog-image {
      height: 230px
   }

   .visual-blog-body h3 {
      min-height: 0
   }

   .resource-feature-card {
      height: 280px
   }

   .resource-feature-overlay {
      padding: 22px
   }

   .resource-feature-large .resource-feature-overlay h3 {
      font-size: 1.45rem
   }
}

/* Carousel Container */
.expertise-strip {
   display: flex !important;
   flex-wrap: nowrap !important;
   overflow-x: auto !important;
   scroll-behavior: smooth !important;
   scroll-snap-type: x mandatory !important;
   gap: 20px !important;

   /* Hide scrollbar for cross-browser support */
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   /* Firefox */
   -ms-overflow-style: none;
   /* IE/Edge */
}

.expertise-strip::-webkit-scrollbar {
   display: none;
   /* Chrome, Safari, Opera */
}

/* Carousel Items */
.exp-card {
   flex-shrink: 0 !important;
   scroll-snap-align: start !important;
}

/* =====================================================
   REQUESTED FINAL PATCH — HERO IMAGES, EXPERTISE & LINKS
===================================================== */
/* Internal hero images are defined here (no inline CSS). */
.about-hero {
   background-image: url('../images/cybersecurity_attorney_hero_banner_img5.webp');
}

.cyber_law-hero {
   background-image: url('../images/cybersecurity_attorney_hero_img_cyber_law.webp');
}

.cybersecurity-hero {
   background-image: url('../images/cybersecurity_attorney_hero_img_cyber_security.webp');
}

.cybercrime-hero {
   background-image: url('../images/cybersecurity_attorney_cybercrime_hero_img.webp');
}

.digital_evidence-hero {
   background-image: url('../images/cybersecurity_attorney_digital_evidence_hero_img.webp');
}

.digital_forensics-hero {
   background-image: url('../images/cybersecurity_attorney_digital_forensic_hero_img.webp');
}

.ai_technology_law-hero {
   background-image: url('../images/cybersecurity_attorney_ai_tech_law_hero_img.webp');
}

.data_privacy-hero {
   background-image: url('../images/cybersecurity_attorney_data_privacy_hero_img.webp');
}

.cyber_litigation-hero {
   background-image: url('../images/cybersecurity_attorney_cyber_litigation_hero_img.webp');
}

.expertise-hero {
   background-image: url('../images/cybersecurity_attorney_hero_banner_img5.webp');
}

.blog-hero {
   background-image: url('../images/cybersecurity_attorney_hero_img3.webp');
}

.resources-hero {
   background-image: url('../images/cybersecurity_attorney_law_img.webp');
}

.contact-hero {
   background-image: url('../images/cybersecurity_attorney_hero_banner_img5.webp');
}

/* Home expertise carousel controls. */
.expertise-carousel-controls {
   display: flex;
   justify-content: flex-end;
   gap: 10px;
   margin: -18px 0 20px;
}

.expertise-arrow {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: 1px solid rgba(255, 255, 255, .34);
   background: rgba(255, 255, 255, .08);
   color: #fff;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: .25s ease;
}

.expertise-arrow:hover {
   background: var(--gold);
   border-color: var(--gold);
   color: #183638;
   transform: translateY(-2px);
}

/* Expertise overview: image cards only. */
.expertise-cards-page {
   background: #fff;
}

.expertise-page-heading {
   max-width: 760px;
   margin-bottom: 42px;
}

.expertise-image-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 22px;
}

.expertise-image-card {
   position: relative;
   min-height: 430px;
   border-radius: 22px;
   overflow: hidden;
   color: #fff;
   box-shadow: none;
}

.expertise-image-card img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform .55s ease;
}

.expertise-image-card::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(17, 42, 44, .05) 18%, rgba(17, 42, 44, .92) 100%);
}

.expertise-image-overlay {
   position: absolute;
   z-index: 2;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 28px;
}

.expertise-image-overlay .eyebrow {
   color: #e2b77e;
}

.expertise-image-overlay h3 {
   color: #fff;
   font-size: 1.55rem;
   margin: 9px 0;
}

.expertise-image-overlay p {
   color: rgba(255, 255, 255, .78);
   font-size: .9rem;
   line-height: 1.6;
}

.expertise-image-overlay span {
   color: #fff;
   font-weight: 600;
   font-size: .88rem;
}

.expertise-image-card:hover img {
   transform: scale(1.055);
}

/* Footer office addresses are clickable map links. */
.footer-office-link {
   display: block;
   color: inherit;
   text-decoration: none;
}

.footer-office-link strong,
.footer-office-link span {
   display: block;
}

.footer-office-link:hover strong {
   color: var(--gold);
}

.footer-office-link:hover span {
   color: rgba(255, 255, 255, .82);
}

/* Inline opacity removed from HTML. */
#backToTop {
   opacity: 0;
}

.thank-you-copy {
   max-width: 720px;
}

@media (max-width:1199px) {
   .expertise-image-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width:767px) {
   .expertise-image-grid {
      grid-template-columns: 1fr;
   }

   .expertise-image-card {
      min-height: 390px;
   }

   .expertise-carousel-controls {
      margin-top: 0;
   }
}


/* =====================================================
   REQUESTED UPDATE — 2026-09-16
   Resources hero matches About hero image.
   Active navigation and mobile Expertise behavior.
===================================================== */
.resources-hero {
   background-image: url('../images/cybersecurity_attorney_hero_banner_img5.webp');
}

.nav-link.active:not(.phone-pill) {
   color: var(--gold) !important;
   font-weight: 700 !important;
}

.mega-wrap.active-parent>.nav-link {
   color: var(--gold) !important;
   font-weight: 700 !important;
}

@media (max-width: 991.98px) {
   .mega-wrap .mega-menu {
      position: static;
      width: 100%;
      transform: none;
      display: none;
      opacity: 1;
      visibility: visible;
      box-shadow: none;
      border-radius: 14px;
      margin-top: .35rem;
      grid-template-columns: 1fr;
   }

   .mega-wrap.mobile-open .mega-menu {
      display: grid;
   }

   .mega-wrap.mobile-open>.nav-link .bi-chevron-down {
      transform: rotate(180deg);
   }

   .mega-wrap>.nav-link .bi-chevron-down {
      transition: transform .2s ease;
   }
}


/* Image presentation: no drop-shadow effects */
img {
   box-shadow: none !important;
   filter: none;
}

.media-panel,
.expertise-image-card {
   box-shadow: none !important;
}

/* =====================================================
   MOBILE NAVIGATION + HOME EXPERTISE AUTOSCROLL FIX
   Requested 2026-09-16 — no design/structure changes.
===================================================== */
@media (max-width: 991.98px) {
   .site-header .navbar {
      min-height: 72px;
   }

   .site-header .navbar>.container-xl {
      align-items: center;
   }

   .site-header .navbar-toggler {
      margin-left: auto;
   }

   .site-header .navbar-collapse {
      width: 100%;
      padding: 12px 0 18px;
      background: var(--paper);
   }

   .site-header .navbar-nav {
      width: 100%;
      align-items: stretch !important;
   }

   .site-header .nav-item {
      width: 100%;
   }

   .site-header .nav-link {
      width: 100%;
      padding: .72rem 0 !important;
   }

   .site-header .mega-wrap {
      position: relative;
      width: 100%;
   }

   .site-header .mega-wrap .mega-menu {
      position: static !important;
      left: auto !important;
      top: auto !important;
      width: 100% !important;
      max-width: 100% !important;
      height: auto !important;
      max-height: none !important;
      transform: none !important;
      margin: 2px 0 8px !important;
      padding: 10px !important;
      display: none !important;
      grid-template-columns: 1fr !important;
      gap: 2px !important;
      opacity: 1 !important;
      visibility: visible !important;
      overflow: visible !important;
      border-radius: 12px;
      box-shadow: none !important;
   }

   .site-header .mega-wrap.mobile-open .mega-menu {
      display: grid !important;
   }

   .site-header .mega-menu a {
      display: block;
      width: 100%;
      padding: 8px 10px;
      white-space: normal;
   }

   .site-header .phone-pill {
      width: auto;
      display: inline-flex !important;
      margin-top: 8px;
      padding: .7rem 1rem !important;
   }
}

/* Continuous motion is controlled by JS; snap/smooth CSS would interrupt the loop. */
.expertise-strip.is-auto-scrolling {
   scroll-behavior: auto !important;
   scroll-snap-type: none !important;
}

.expertise-strip.is-auto-scrolling .exp-card {
   scroll-snap-align: none !important;
}

/* =====================================================
   THANK YOU PAGE — compact confirmation experience
===================================================== */
.thank-you-page {
   background: var(--cream);
}

.thank-you-section {
   min-height: 68vh;
   display: flex;
   align-items: center;
   padding: 90px 0;
}

.thank-you-card {
   max-width: 760px;
   margin: 0 auto;
   padding: 64px;
   text-align: center;
   background: #fff;
   border: 1px solid rgba(48, 79, 82, .10);
   border-radius: 28px;
}

.thank-you-icon {
   width: 72px;
   height: 72px;
   margin: 0 auto 24px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--teal);
   color: #fff;
   font-size: 2rem;
}

.thank-you-card h1 {
   max-width: 620px;
   margin: 10px auto 18px;
   color: var(--teal);
   font-size: clamp(2.2rem, 5vw, 4rem);
   line-height: 1.03;
}

.thank-you-lead {
   max-width: 610px;
   margin: 0 auto;
   color: var(--muted);
   font-size: 1.05rem;
   line-height: 1.8;
}

.thank-you-note {
   max-width: 610px;
   margin: 30px auto 0;
   padding: 18px 20px;
   display: flex;
   gap: 14px;
   align-items: flex-start;
   text-align: left;
   background: var(--cream);
   border-radius: 16px;
}

.thank-you-note i {
   color: var(--gold);
   font-size: 1.25rem;
   margin-top: 2px;
}

.thank-you-note p {
   margin: 0;
   font-size: .9rem;
   line-height: 1.65;
}

.thank-you-actions {
   margin-top: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 22px;
   flex-wrap: wrap;
}

.thank-you-contact {
   color: var(--teal);
   font-weight: 600;
   text-decoration: none;
   border-bottom: 1px solid rgba(48, 79, 82, .35);
}

.thank-you-contact:hover {
   color: var(--gold);
}

@media (max-width:767px) {
   .thank-you-section {
      min-height: 60vh;
      padding: 60px 0;
   }

   .thank-you-card {
      padding: 42px 22px;
      border-radius: 22px;
   }

   .thank-you-icon {
      width: 62px;
      height: 62px;
      font-size: 1.7rem;
   }
}