/* ============================================================
   KHR Corporate & Tax Consultants — global styles
   Base tokens & responsive rules carried over verbatim from the
   Claude Design export; interaction states (hover/focus) and the
   mobile-menu toggle re-created in real CSS.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1A1F2E;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}
:root { --accent: #0FA89D; --accent-bright: #22D3C5; --accent-light: #E6FAF8; --navy: #002a45; }
a { text-decoration: none; color: inherit; }
input, textarea, select, button { font-family: inherit; }
::selection { background: #22D3C5; color: #002a45; }

@keyframes khrFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.khr-reveal { animation: khrFadeUp 0.6s cubic-bezier(0.16,1,0.3,1) both; }

/* ---------- Responsive (from design helmet) ---------- */
@media (min-width: 1024px) { [data-d="lg"] { display: inline-flex !important; } }

@media (max-width: 1000px) {
  [data-grid="svc"], [data-grid="why"], [data-grid="testi"], [data-grid="blog"], [data-grid="industries"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-hero="grid"], [data-grid="about"], [data-grid="contact"] { grid-template-columns: 1fr !important; gap: 44px !important; }
  [data-grid="footer"] { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}

@media (max-width: 720px) {
  [data-nav="desktop"] { display: none !important; }
  [data-nav="burger"] { display: flex !important; }
  [data-grid="svc"], [data-grid="why"], [data-grid="testi"], [data-grid="blog"], [data-grid="footer"] { grid-template-columns: 1fr !important; }
  [data-grid="industries"] { grid-template-columns: repeat(2, 1fr) !important; }
  section { padding-top: 60px !important; padding-bottom: 60px !important; }
}

/* ---------- Smooth transitions for interactive elements ---------- */
a, button, .card-lift, .quote, .viewall, .wa-float, .field {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease,
              box-shadow .25s ease, transform .25s ease, gap .18s ease;
}

/* ---------- Hover states (replacing DC `style-hover`) ----------
   `!important` is required because the base values live in inline
   styles, which otherwise win over class rules. */
.lnk-nav:hover   { color: #0FA89D !important; }
.btn-teal:hover  { background: #0c8f86 !important; }
.btn-outline:hover { border-color: #002a45 !important; }
.btn-bright:hover { background: #3EEEDE !important; }
.card-lift:hover { box-shadow: 0 12px 30px rgba(0,42,69,0.10) !important; transform: translateY(-3px); }
.quote:hover     { gap: 9px !important; }
.viewall:hover   { gap: 11px !important; }
.row-wa:hover    { border-color: #25D366 !important; }
.row-teal:hover  { border-color: #0FA89D !important; }
.btn-navy:hover  { background: #001d31 !important; }
.btn-glass:hover { background: rgba(255,255,255,0.26) !important; }
.soc:hover       { background: #0FA89D !important; }
.flnk:hover      { color: #22D3C5 !important; }
.wa-float:hover  { transform: scale(1.06); }

/* ---------- Focus state (replacing DC `style-focus`) ---------- */
.field:focus { border-color: #0FA89D !important; box-shadow: 0 0 0 3px rgba(34,211,197,0.15) !important; }

/* ---------- Mobile menu toggle ---------- */
.mobile-menu { display: none; }
.mobile-menu.open { display: block; }