/* ==========================================================================
   NKA Mathebula Attorneys Inc. — Core design system
   ========================================================================== */
:root{
  --gold:#c6a15b; --gold-2:#e6cf95; --gold-3:#8a6a2c; --gold-4:#f2e8cf;
  --ink:#191c22; --charcoal:#23262d; --navy:#14223b; --navy-2:#0b1526;
  --slate:#6b7079; --mist:#f5f6f8; --sand:#f7f2e8; --line:rgba(20,34,59,.10);
  --grad-gold:linear-gradient(120deg,#e6cf95 0%,#c6a15b 42%,#8a6a2c 100%);
  --grad-gold-soft:linear-gradient(120deg,#f2e8cf,#d8b871);
  --grad-navy:linear-gradient(160deg,#182a49 0%,#14223b 55%,#0b1526 100%);
}

html{ -webkit-font-smoothing:antialiased; }
body{ font-size:15px; line-height:1.65; letter-spacing:.004em; font-family:"Inter",sans-serif; }
h1,h2,h3,h4{ font-family:"Sora",sans-serif; letter-spacing:-.025em; }
.font-accent{ font-family:"Fraunces",Georgia,serif !important; font-style:italic; letter-spacing:0; }

::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:#eceef1; }
::-webkit-scrollbar-thumb{ background:linear-gradient(#c6a15b,#8a6a2c); border-radius:20px; border:2px solid #eceef1; }

/* ---------- Type helpers ---------- */
.eyebrow{ font-family:"Inter",sans-serif; font-weight:700; font-size:.7rem;
  letter-spacing:.24em; text-transform:uppercase; }
.font-display{ font-family:"Sora",sans-serif; }
.text-gradient-gold{
  background:var(--grad-gold); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.display-hero{ font-family:"Sora",sans-serif; font-size:clamp(2.5rem,6.2vw,5.2rem); line-height:1.03; font-weight:800; letter-spacing:-.04em; }
.display-2{ font-family:"Sora",sans-serif; font-size:clamp(1.9rem,4vw,3.25rem); line-height:1.1; font-weight:700; letter-spacing:-.035em; }

/* ---------- Gold rule ---------- */
.gold-rule{ height:2px; width:64px; background:var(--grad-gold); border-radius:2px; }
.gold-rule.center{ margin-inline:auto; }

/* ---------- Buttons ---------- */
.btn{ position:relative; display:inline-flex; align-items:center; gap:.6rem;
  font-family:"Inter",sans-serif; font-weight:600; font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.95rem 1.9rem; border-radius:8px; overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.9,.25,1), box-shadow .5s, color .4s; will-change:transform; }
.btn svg{ width:1.05rem; height:1.05rem; transition:transform .45s; }
.btn:hover svg{ transform:translateX(4px); }
.btn-gold{ background:var(--grad-gold); color:#1c1608; box-shadow:0 16px 40px -16px rgba(198,161,91,.7); }
.btn-gold:hover{ transform:translateY(-3px); box-shadow:0 24px 55px -18px rgba(198,161,91,.85); }
.btn-outline{ border:1px solid rgba(255,255,255,.35); color:#fff; }
.btn-outline:hover{ border-color:var(--gold-2); color:#fff; transform:translateY(-3px); }
.btn-dark{ background:var(--navy); color:#fff; }
.btn-dark:hover{ transform:translateY(-3px); box-shadow:var(--shadow-luxe); }
.btn-ghost{ color:var(--navy); border:1px solid var(--line); background:#fff; }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-3); transform:translateY(-2px); }

/* shimmer sweep on gold buttons */
.btn-gold::after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transform:translateX(-130%); transition:transform .9s; }
.btn-gold:hover::after{ transform:translateX(130%); }

/* ---------- Backgrounds & patterns ---------- */
.bg-mist{ background:var(--mist); }
.bg-navy-grad{ background:var(--grad-navy); }
.pattern-grid{
  background-image:linear-gradient(rgba(20,34,59,.04) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(20,34,59,.04) 1px,transparent 1px);
  background-size:44px 44px;
}
.pattern-dots{
  background-image:radial-gradient(rgba(20,34,59,.07) 1.2px, transparent 1.2px);
  background-size:22px 22px;
}
.pattern-dots-gold{
  background-image:radial-gradient(rgba(198,161,91,.18) 1.4px, transparent 1.4px);
  background-size:26px 26px;
}
.pattern-diag{
  background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.03) 0 2px,transparent 2px 12px);
}
.pattern-lux{
  background-color:var(--mist);
  background-image:radial-gradient(circle at 15% 20%,rgba(198,161,91,.08),transparent 40%),
                   radial-gradient(circle at 85% 80%,rgba(20,34,59,.05),transparent 45%);
}
.hairline-t{ border-top:1px solid var(--line); }
.hairline-b{ border-bottom:1px solid var(--line); }

/* faint scales-of-justice watermark (as ::before) */
.watermark-scale::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 24 24' fill='none' stroke='%23c6a15b' stroke-width='.5'%3E%3Cpath d='M12 3v18M6 21h12M4 8h16M12 4 4 8m8-4 8 4M4 8l-2.5 5a3 3 0 0 0 5 0zm16 0-2.5 5a3 3 0 0 0 5 0z'/%3E%3C/svg%3E") no-repeat center;
  background-size:min(60%,520px);
}

/* ---------- Navbar ---------- */
.nav-link{ position:relative; font-weight:600; font-size:.82rem; letter-spacing:.04em; padding:.35rem 0; }
.nav-link::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--grad-gold); transition:width .4s cubic-bezier(.2,.9,.25,1); }
.nav-link:hover::after,.nav-link.is-active::after{ width:100%; }

/* header state */
#siteheader{ transition:background .5s, box-shadow .5s, padding .4s, backdrop-filter .5s; }
#siteheader.scrolled{ background:rgba(255,255,255,.92); backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 10px 40px -22px rgba(20,34,59,.4); padding-top:.65rem; padding-bottom:.65rem; }

/* At the top over the dark hero, header text is light; once scrolled (white bg) it goes dark. */
#siteheader:not(.scrolled) .nav-link,
#siteheader:not(.scrolled) .hdr-ink{ color:#fff !important; }
#siteheader:not(.scrolled) .hdr-ink:hover{ color:var(--gold-2) !important; }
/* logo chip: a clean white card over the dark hero, seamless once the header turns white */
.brand-chip{ background:#fff; padding:.42rem .72rem; box-shadow:0 10px 26px -14px rgba(0,0,0,.55); }
#siteheader.scrolled .brand-chip{ background:transparent; padding:0; box-shadow:none; }

/* ---------- Cards ---------- */
.card-practice{ position:relative; background:#fff; border:1px solid var(--line); border-radius:18px;
  overflow:hidden; transition:transform .6s cubic-bezier(.2,.9,.25,1), box-shadow .6s, border-color .6s; }
.card-practice::before{ content:""; position:absolute; left:0; top:0; height:100%; width:3px;
  background:var(--grad-gold); transform:scaleY(0); transform-origin:bottom; transition:transform .6s; }
.card-practice:hover{ transform:translateY(-8px); box-shadow:0 30px 60px -30px rgba(20,34,59,.35); border-color:transparent; }
.card-practice:hover::before{ transform:scaleY(1); }
.card-practice .ic{ transition:transform .6s, color .6s; }
.card-practice:hover .ic{ transform:translateY(-3px) rotate(-4deg); }

.icon-badge{ display:grid; place-items:center; width:56px; height:56px; border-radius:12px;
  background:linear-gradient(150deg,#faf6ec,#f0e4c8); color:var(--gold-3); border:1px solid rgba(198,161,91,.25);
  box-shadow:inset 0 1px 0 #fff; }
.icon-badge.on-dark{ background:rgba(198,161,91,.12); border-color:rgba(198,161,91,.3); color:var(--gold-2); }

/* ---------- Image treatments ---------- */
.img-duotone{ filter:grayscale(.15) contrast(1.02); }
.overlay-navy{ background:linear-gradient(180deg,rgba(11,21,38,.15),rgba(11,21,38,.78)); }
.overlay-gold-edge{ box-shadow:inset 0 0 0 1px rgba(198,161,91,.4); }
.ring-gold{ box-shadow:0 0 0 1px rgba(198,161,91,.35), 0 30px 60px -30px rgba(20,34,59,.5); }

/* ---------- Reveal on scroll ---------- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="zoom"]{ transform:scale(.94); }
[data-reveal].in{ transform:none; }
[data-delay="1"]{ transition-delay:.1s;} [data-delay="2"]{ transition-delay:.2s;}
[data-delay="3"]{ transition-delay:.3s;} [data-delay="4"]{ transition-delay:.4s;}
[data-delay="5"]{ transition-delay:.5s;} [data-delay="6"]{ transition-delay:.6s;}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .float,.spin-slow,.shimmer-text{ animation:none !important; }
}

/* ---------- Keyframe animations ---------- */
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-16px) } }
.float{ animation:floaty 7s ease-in-out infinite; }
.float.slow{ animation-duration:11s; }
@keyframes spinslow{ to{ transform:rotate(360deg) } }
.spin-slow{ animation:spinslow 40s linear infinite; }
@keyframes shimmer{ 0%{ background-position:-200% center } 100%{ background-position:200% center } }
.shimmer-text{ background:linear-gradient(100deg,#8a6a2c 30%,#f4e4bb 50%,#8a6a2c 70%);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:shimmer 5s linear infinite; }
@keyframes pulsering{ 0%{ box-shadow:0 0 0 0 rgba(198,161,91,.5) } 70%{ box-shadow:0 0 0 18px rgba(198,161,91,0) } 100%{ box-shadow:0 0 0 0 rgba(198,161,91,0) } }
.pulse-ring{ animation:pulsering 2.6s infinite; }
@keyframes pulsering-wa{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55) } 70%{ box-shadow:0 0 0 16px rgba(37,211,102,0) } 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0) } }
.pulse-ring-wa{ animation:pulsering-wa 2.6s infinite; }
@keyframes riseIn{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }

/* hero aurora blobs */
.aurora{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; pointer-events:none; }

/* marquee */
.marquee{ display:flex; gap:3.5rem; width:max-content; animation:marq 32s linear infinite; }
.marquee.rev{ animation-direction:reverse; }
@keyframes marq{ to{ transform:translateX(-50%) } }
.marquee-wrap:hover .marquee{ animation-play-state:paused; }

/* ---------- 3D tilt card ---------- */
.tilt{ transform-style:preserve-3d; transition:transform .3s ease-out; will-change:transform; }
.tilt .tilt-layer{ transform:translateZ(50px); }

/* ---------- Stat counter ---------- */
.stat-num{ font-family:"Sora",sans-serif; font-weight:800; line-height:1; letter-spacing:-.04em; }

/* ---------- Accordion ---------- */
.acc-item{ border-bottom:1px solid var(--line); }
.acc-panel{ overflow:hidden; max-height:0; transition:max-height .5s cubic-bezier(.2,.8,.2,1); }

/* ---------- Chat widget ---------- */
#chatLaunch{ box-shadow:0 18px 40px -14px rgba(198,161,91,.7); }

/* Desktop: floating card anchored above the launcher */
.chat-window{
  position:fixed; z-index:60; right:1.5rem; bottom:6.25rem;
  width:384px; max-width:calc(100vw - 2rem);
  height:min(600px, calc(100vh - 8rem));
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:1rem;
  display:none; flex-direction:column; overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(11,21,38,.6); transform-origin:bottom right;
  opacity:0; transform:translateY(16px) scale(.96);
  transition:opacity .28s ease, transform .3s cubic-bezier(.2,.9,.25,1);
}
.chat-window.open{ display:flex; }
.chat-window.show{ opacity:1; transform:none; }
/* iOS: inputs must be >=16px or the browser zooms the page on focus */
#chatInput{ font-size:16px; }

/* Mobile: full-screen app-style sheet that never disturbs page layout */
@media (max-width:640px){
  .chat-window{
    top:0; right:0; bottom:0; left:0;
    width:100%; max-width:100%; height:100dvh; max-height:none;
    border:0; border-radius:0;
    transform:translateY(100%); transition:transform .34s cubic-bezier(.2,.9,.25,1), opacity .2s;
  }
  .chat-window.show{ transform:none; }
  html.chat-open, html.chat-open body{ overflow:hidden; }
}
.chat-msg{ animation:riseIn .35s ease both; }
.typing span{ width:7px;height:7px;border-radius:50%;background:var(--gold);display:inline-block;animation:blink 1.2s infinite; }
.typing span:nth-child(2){ animation-delay:.2s } .typing span:nth-child(3){ animation-delay:.4s }
@keyframes blink{ 0%,60%,100%{ opacity:.25; transform:translateY(0) } 30%{ opacity:1; transform:translateY(-3px) } }
.chat-scroll{ scrollbar-width:thin; }

/* prose list in detail pages */
.tick-list li{ position:relative; padding-left:1.9rem; }
.tick-list li::before{ content:""; position:absolute; left:0; top:.35em; width:1.1rem; height:1.1rem;
  background:var(--grad-gold); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E") no-repeat center/contain; }

/* ---------- Animated hamburger ---------- */
.hamburger{ padding:.4rem; background:none; border:0; cursor:pointer; line-height:0; }
.hamburger-box{ width:30px; height:20px; display:inline-block; position:relative; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{
  content:""; position:absolute; left:0; width:30px; height:2.5px; border-radius:3px;
  background:currentColor; transition:transform .4s cubic-bezier(.2,.9,.25,1), top .3s .1s, opacity .2s; }
.hamburger-inner{ top:50%; margin-top:-1px; }
.hamburger-inner::before{ top:-9px; } .hamburger-inner::after{ top:9px; }
.hamburger.is-open .hamburger-inner{ transform:rotate(45deg); background:#fff; }
.hamburger.is-open .hamburger-inner::before{ top:0; transform:rotate(90deg); opacity:1; transition:top .3s, transform .4s .1s; background:#fff; }
.hamburger.is-open .hamburger-inner::after{ top:0; opacity:0; }

/* ---------- Modern mobile menu ---------- */
.mobile-menu{ position:fixed; inset:0; z-index:70; visibility:hidden; pointer-events:none; }
.mobile-menu.open{ visibility:visible; pointer-events:auto; }
.mobile-menu__bg{ position:absolute; inset:0; background:radial-gradient(120% 90% at 100% 0,#182a49 0%,#0b1526 55%,#070d1a 100%);
  opacity:0; transition:opacity .5s ease; }
.mobile-menu.open .mobile-menu__bg{ opacity:1; }
.mobile-menu__bg::after{ content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(198,161,91,.16) 1.2px,transparent 1.2px); background-size:26px 26px; opacity:.5; }
.mobile-menu__panel{ position:absolute; inset:0; overflow-y:auto;
  clip-path:circle(0% at calc(100% - 42px) 42px); transition:clip-path .6s cubic-bezier(.75,0,.25,1); }
.mobile-menu.open .mobile-menu__panel{ clip-path:circle(150% at calc(100% - 42px) 42px); }

.mm-item{ opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.9,.25,1); transition-delay:var(--d,0s); }
.mobile-menu.open .mm-item{ opacity:1; transform:none; }

.mm-link{ display:flex; align-items:center; gap:1rem; padding:1.05rem 0; border-bottom:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.92); font-family:"Sora",sans-serif; font-weight:600; font-size:1.6rem; letter-spacing:-.02em; }
.mm-index{ font-family:"Inter",sans-serif; font-size:.72rem; font-weight:700; color:var(--gold); letter-spacing:.1em; width:1.6rem; }
.mm-arrow{ margin-left:auto; color:var(--gold-2); opacity:0; transform:translateX(-8px); transition:.35s; }
.mm-link:active{ color:#fff; }
.mm-link.is-active{ color:var(--gold-2); }
.mm-link.is-active .mm-arrow, .mm-link:hover .mm-arrow{ opacity:1; transform:none; }
html.menu-open{ overflow:hidden; }
/* keep the header (logo + animated X) above the open menu, always on a transparent bar */
html.menu-open #siteheader{ z-index:80 !important; background:transparent !important; box-shadow:none !important; backdrop-filter:none !important; }
html.menu-open #siteheader .brand-chip{ background:#fff; padding:.42rem .72rem; box-shadow:0 10px 26px -14px rgba(0,0,0,.55); }
html.menu-open #siteheader .hamburger-inner,
html.menu-open #siteheader .hamburger-inner::before,
html.menu-open #siteheader .hamburger-inner::after{ background:#fff; }

/* utilities */
.glass{ background:rgba(255,255,255,.08); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14); }
.glass-dark{ background:rgba(11,21,38,.55); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.08); }
.link-gold{ color:var(--gold-3); border-bottom:1px solid transparent; transition:border-color .3s; }
.link-gold:hover{ border-color:var(--gold); }
.no-scroll{ overflow:hidden; }