/* ==========================================================================
   Mmakola Matsimela Inc - modern visual refresh (First Technology, Oct 2026)
   Loaded after the template CSS; delete the <link> in head.blade.php to revert.
   ========================================================================== */
:root{
  --mm-navy:#162049; --mm-navy-2:#1f2a5c; --mm-gold:#c9a96a; --mm-gold-d:#b08d4f;
  --mm-ink:#272b3a; --mm-muted:#5f6475; --mm-bg:#f5f6f9; --mm-line:#e4e6ee;
  --mm-radius:14px; --mm-shadow:0 10px 30px rgba(22,32,73,.08); --mm-shadow-h:0 18px 40px rgba(22,32,73,.16);
}
html{scroll-behavior:smooth}
body{color:var(--mm-ink);-webkit-font-smoothing:antialiased}
::selection{background:var(--mm-gold);color:#fff}
.main-banner .caption h1, section.heading-page h1,
.home-about .item h3, .section-heading h2, .our-clients h2, .contact-us h2,
.team-title h2, .member-info h2, .accordion-head span:first-child{
  font-family:'Cormorant Garamond', Georgia, serif !important; letter-spacing:.2px;
}
.main-banner .caption h1, section.heading-page h1{
  text-transform:none; font-size:58px; font-weight:700; line-height:1.08; max-width:760px;
}
.main-banner .caption h6, section.heading-page h6{
  color:var(--mm-gold); letter-spacing:4px; font-size:13px;
}
.main-banner .caption h6::before{content:"";display:inline-block;width:34px;height:2px;background:var(--mm-gold);vertical-align:middle;margin-right:12px}
.main-banner .caption .hero-slogan{color:var(--mm-gold);font-family:'Cormorant Garamond',Georgia,serif;font-size:26px;font-weight:600}
.main-banner .caption p{font-size:15px;line-height:1.75;max-width:560px;color:rgba(255,255,255,.88)}
@media (max-width:767px){
  .main-banner .caption h1, section.heading-page h1{font-size:34px}
  .main-banner .caption .hero-slogan{font-size:20px}
}
.sub-header .left-content p em, .main-banner .caption h2 em,
.header-area .main-nav .nav li a.active, .header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a:hover, .background-header .main-nav .nav li a.active,
.background-header .main-nav .nav li:hover a, .header-area.header-sticky .nav li a.active,
.header-area.header-sticky .nav li a:hover, .sub-header .right-icons ul li a:hover,
.accordion-head.is-open, .count-digit, .footer p a{color:var(--mm-gold) !important}
.contact-us svg, .home-about svg{fill:var(--mm-gold)}
.contact-us h4, .contact-us h5{color:var(--mm-gold)}
.sub-header{background:var(--mm-navy) !important;border-bottom:1px solid rgba(201,169,106,.25)}
.sub-header .left-content p{font-size:12.5px;letter-spacing:.3px;color:rgba(255,255,255,.8)}
.background-header{box-shadow:0 6px 24px rgba(22,32,73,.10) !important}
.header-area .main-nav .nav li a{letter-spacing:1.2px;font-weight:500}
.main-banner .video-overlay{background:linear-gradient(100deg,rgba(22,32,73,.92) 0%,rgba(22,32,73,.70) 45%,rgba(22,32,73,.35) 100%)}
.main-button-hero a, .main-button-red a, .main-button-yellow a, .main-button a,
.contact-us button{
  background:var(--mm-gold) !important; color:var(--mm-navy) !important; border:0 !important;
  border-radius:6px !important; padding:13px 28px !important; font-weight:600 !important;
  letter-spacing:1.5px; text-transform:uppercase; font-size:12.5px !important;
  box-shadow:0 8px 20px rgba(201,169,106,.30); transition:all .25s ease;
}
.main-button-hero a:hover, .main-button-red a:hover, .main-button-yellow a:hover, .main-button a:hover,
.contact-us button:hover{background:#fff !important;color:var(--mm-navy) !important;transform:translateY(-2px)}
section.services .item{
  background:#fff !important; color:var(--mm-ink) !important; border-radius:var(--mm-radius) !important;
  box-shadow:var(--mm-shadow); border-top:3px solid var(--mm-gold); transition:transform .3s ease, box-shadow .3s ease;
}
section.services .item:hover{transform:translateY(-6px);box-shadow:var(--mm-shadow-h)}
section.services .item h4, section.services .item h3{color:var(--mm-navy) !important;font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-weight:700}
section.services .item p{color:var(--mm-muted) !important}
section.services .item .icon{background:var(--mm-navy) !important;border-radius:50% !important}
section.home-about, section.our-clients{background:var(--mm-bg) !important;background-image:none !important}
section.home-about .item{background:#fff !important;border-radius:var(--mm-radius);box-shadow:var(--mm-shadow);color:var(--mm-ink)}
section.home-about .item h3, section.home-about .item h4, section.home-about .item h5{color:var(--mm-navy) !important}
section.home-about .item p, section.home-about .item, section.home-about .item span{color:var(--mm-ink) !important}
section.home-about .item h3{font-size:34px;font-weight:700;text-transform:none}
section.home-about .item h3::after{content:"";display:block;width:48px;height:3px;background:var(--mm-gold);margin-top:12px}
.home-about .accordions{border-radius:var(--mm-radius) !important;box-shadow:var(--mm-shadow)}
.accordion-head span:first-child{font-size:22px;font-weight:700;text-transform:none;color:var(--mm-navy)}
section.our-clients h2, section.our-clients h4, .our-clients .section-heading h2{color:var(--mm-navy) !important;text-transform:none;font-size:34px;font-weight:700}
.our-clients .item{border-radius:var(--mm-radius) !important;box-shadow:var(--mm-shadow);border:1px solid var(--mm-line)}
.our-clients .owl-dots .owl-dot span, .our-clients .owl-dots .owl-dot.active span{background:var(--mm-gold) !important}
section.contact-us #contact, section.contact-us form{border-radius:var(--mm-radius) !important}
section.contact-us h2{color:var(--mm-navy);text-transform:none;font-size:34px;font-weight:700}
section.contact-us input, section.contact-us textarea{border-radius:8px !important;border:1px solid var(--mm-line) !important;background:#fafbfd !important}
section.contact-us input:focus, section.contact-us textarea:focus{border-color:var(--mm-gold) !important;outline:none;box-shadow:0 0 0 3px rgba(201,169,106,.18)}
.employee-image{transition:transform .5s ease}
.member-info small{color:var(--mm-gold-d) !important;letter-spacing:1px;text-transform:uppercase}
footer .nav-link{color:rgba(255,255,255,.85) !important;letter-spacing:1px}
footer .nav-link:hover{color:var(--mm-gold) !important}

/* fixes v2 */
.main-banner .caption h1, section.heading-page h1{text-transform:none !important;font-size:58px !important}
@media (max-width:767px){.main-banner .caption h1, section.heading-page h1{font-size:34px !important}}
.accordion-head span:first-child{letter-spacing:.5px}

/* fixes v3: footer */
section:has(> .container > footer){background:#0f1636 !important;background-image:none !important;border-top:3px solid var(--mm-gold)}
a[style*="f4a424"]{color:var(--mm-gold) !important}

/* fixes v4: team cards */
.read-more-btn{background:transparent !important;color:var(--mm-navy) !important;border:1.5px solid var(--mm-gold) !important;border-radius:6px !important;font-size:12px !important;font-weight:600 !important;letter-spacing:1.5px;text-transform:uppercase;padding:8px 18px !important;transition:all .2s ease}
.read-more-btn:hover{background:var(--mm-gold) !important;color:var(--mm-navy) !important}
.card-body{color:var(--mm-ink)}

/* fixes v5: practice areas page */
.practice-item{border-radius:var(--mm-radius) !important;box-shadow:var(--mm-shadow) !important;border-top:3px solid var(--mm-gold);transition:transform .3s ease, box-shadow .3s ease}
.practice-item:hover{transform:translateY(-6px);box-shadow:var(--mm-shadow-h) !important}
.practice-item h3{color:var(--mm-navy) !important;font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:26px}

/* fixes v6: solid white header so the logo is always visible; logo sized to fit the bar */
.header-area, .header-area.header-sticky{background:rgba(255,255,255,.98) !important;box-shadow:0 4px 20px rgba(22,32,73,.10) !important}
.header-area .main-nav .nav li a, .background-header .main-nav .nav li a{color:var(--mm-navy) !important}
.header-area .main-nav .nav li a.active, .header-area .main-nav .nav li a:hover{color:var(--mm-gold) !important}
.header-area .main-nav .menu-trigger span, .header-area .main-nav .menu-trigger span:before, .header-area .main-nav .menu-trigger span:after{background-color:var(--mm-navy) !important}
.header-area a.logo{display:flex;align-items:center;height:80px;overflow:hidden}
.header-area a.logo svg{width:230px !important;height:58px !important}
@media (max-width:767px){.header-area a.logo svg{width:190px !important;height:48px !important}}

/* fixes v7: logo was drawn as faint outlines for 4s on every page load - show it solid and crisp immediately */
.header-area a.logo path{animation:none !important;stroke:none !important;stroke-dasharray:none !important;fill-opacity:1 !important}

/* v8: practice-area line icons (replace emojis) */
.practice-item .pa-icon{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:rgba(201,169,106,.14);color:var(--mm-navy);transition:all .3s ease}
.practice-item .pa-icon svg{width:36px !important;height:36px !important;min-width:36px}
.practice-item:hover .pa-icon{background:var(--mm-navy);color:var(--mm-gold)}
.practice-item-icon{font-size:0 !important;margin-bottom:1.1rem !important}

/* v10: one font site-wide (Cormorant Garamond, as used on the firm name in the homepage hero) */
body, body *:not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not(i){font-family:'Cormorant Garamond', Georgia, serif !important}
body{font-size:18px}
p, li, .card-body, .practice-title p, section.services .item p, .contact-us span, .accordion-body{font-size:18px !important;line-height:1.65 !important}
.main-banner .caption p{font-size:19px !important}
.header-area .main-nav .nav li a{font-size:16px !important;font-weight:600 !important;letter-spacing:1px}
.sub-header .left-content p{font-size:15px !important;font-weight:500}
.main-button-hero a, .main-button-red a, .main-button-yellow a, .main-button a, .contact-us button, .read-more-btn{font-size:15px !important;font-weight:700 !important}
.main-banner .caption h6, section.heading-page h6{font-size:15px !important;font-weight:700}
.member-info small, .contact-us h6, label{font-weight:600}
section.contact-us input, section.contact-us textarea, section.contact-us select{font-size:17px !important}

/* v11: full-height numbers so phone numbers, years and dates are easy to read */
body, body *{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}