/* ────────────────────────────────────────────────────────────
   DATA MATTERS™ — COMMON STYLESHEET
   Shared design tokens, base typography, navigation, footer.
   Web font: Inter (per brand rule).
   ──────────────────────────────────────────────────────────── */

:root{
  /* Master palette (gold + neutrals) */
  --dm-black:       #0F0F10;
  --dm-surface:     #15151A;
  --dm-surface-hi:  #1F1F23;
  --dm-off:         #F7F5F0;
  --dm-off-warm:    #EDE8DB;
  --dm-text:        #151518;
  --dm-muted:       #5E5A52;
  --dm-gold:        #C9A227;
  --dm-gold-hi:     #E3C65A;
  --dm-gold-deep:   #A8841E;

  /* Brand accents (used within brand sections only) */
  --kosha-jade:     #2E5D4A;
  --kosha-jade-hi:  #4A8770;
  --kosha-brass:    #B08A3E;
  --kosha-mist:     #E8F0EA;

  --vagisha-plum:    #3D2A4A;
  --vagisha-plum-hi: #5F4479;
  --vagisha-ivory:   #F3EEE2;

  --trana-blue:      #102A43;
  --trana-slate:     #243B53;
  --trana-teal:      #2F6F73;
  --trana-mist:      #D9EAF7;

  /* Layout */
  --max-width: 1180px;
  --reading-width: 1120px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--dm-black);
  color:var(--dm-off);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
em{font-style:italic}

/* ─── NAVIGATION ─── */
.dm-topbar{
  position:sticky;top:0;z-index:9999;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  background:rgba(15,15,16,.88);
  border-bottom:1px solid rgba(201,162,39,.15);
  transition:background .3s ease;
}
.dm-nav{
  max-width:var(--max-width);
  margin:0 auto;
  padding:14px 24px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}
.dm-nav-left, .dm-nav-right{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}
.dm-nav-right{justify-content:flex-end}
.dm-nav-center{
  display:flex;
  align-items:center;
  justify-content:center;
}
.dm-nav-brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0;
  line-height:0;
}
.dm-nav-brand img{
  height:34px;
  width:auto;
  display:block;
}
.dm-nav-brand-text{
  font-size:16px;
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--dm-off);
  white-space:nowrap;
  line-height:1;
  padding-top:2px;
}
.dm-nav-brand-text em{color:var(--dm-gold-hi)}
.dm-nav-brand-text sup{
  font-size:9px;
  color:var(--dm-gold);
  margin-left:1px;
  font-weight:400;
}
@media(max-width:640px){
  .dm-nav-brand-text{display:none}
}

/* Nav items with dropdowns */
.dm-nav-item{
  position:relative;
}
.dm-nav-item > a{
  font-size:13px;
  color:rgba(247,245,240,.72);
  padding:8px 2px;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
  white-space:nowrap;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.dm-nav-item > a::after{
  content:"";
  display:none;
}
.dm-nav-item.has-children > a::after{
  content:"▾";
  display:inline;
  font-size:9px;
  color:rgba(201,162,39,.55);
  transition:transform .2s;
}
.dm-nav-item:hover > a::after{
  transform:translateY(1px);
  color:var(--dm-gold-hi);
}
.dm-nav-item > a:hover,
.dm-nav-item > a.active{
  color:var(--dm-gold-hi);
  border-bottom-color:var(--dm-gold);
}

/* Dropdown panel */
.dm-nav-drop{
  position:absolute;
  top:calc(100% + 6px);
  left:-14px;
  min-width:240px;
  background:rgba(15,15,16,.97);
  backdrop-filter:blur(24px);
  border:1px solid rgba(201,162,39,.22);
  border-radius:6px;
  padding:8px 0;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .2s, transform .2s, visibility .2s;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.dm-nav-right .dm-nav-drop{
  left:auto;
  right:-14px;
}
.dm-nav-item:hover .dm-nav-drop,
.dm-nav-item:focus-within .dm-nav-drop{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.dm-nav-drop a{
  display:block;
  padding:10px 20px;
  font-size:13px;
  color:rgba(247,245,240,.75);
  transition:background .15s, color .15s;
  white-space:nowrap;
}
.dm-nav-drop a:hover,
.dm-nav-drop a.active{
  background:rgba(201,162,39,.10);
  color:var(--dm-gold-hi);
}
.dm-nav-drop-label{
  display:block;
  padding:8px 20px 4px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(201,162,39,.50);
}
.dm-nav-drop-divider{
  height:1px;
  background:rgba(201,162,39,.15);
  margin:6px 0;
}

/* CTA pill */
.dm-nav-cta{
  padding:8px 16px;
  border:1px solid rgba(201,162,39,.35);
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  color:var(--dm-off);
  transition:background .2s, border-color .2s;
  white-space:nowrap;
}
.dm-nav-cta:hover,
.dm-nav-cta.active{
  background:rgba(201,162,39,.12);
  border-color:var(--dm-gold);
  color:var(--dm-gold-hi);
}

/* Mobile menu */
.dm-nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
  z-index:10000;
}
.dm-nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--dm-off);
  border-radius:1px;
  transition:all .28s;
}
.dm-nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.dm-nav-toggle.open span:nth-child(2){opacity:0}
.dm-nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1100px){
  .dm-nav{grid-template-columns:auto 1fr auto;gap:16px}
  .dm-nav-toggle{display:flex}
  .dm-nav-left, .dm-nav-right{
    display:none;
    position:fixed;
    inset:64px 0 0 0;
    background:rgba(10,10,11,.98);
    flex-direction:column;
    align-items:flex-start;
    padding:24px;
    gap:14px;
    z-index:9998;
    overflow-y:auto;
    justify-content:flex-start;
  }
  .dm-nav-left.open, .dm-nav-right.open{display:flex}
  .dm-nav-item{width:100%}
  .dm-nav-item > a{font-size:16px;padding:10px 0;width:100%}
  .dm-nav-drop{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    background:transparent;
    border:none;
    padding:0 0 6px 14px;
    min-width:0;
  }
  .dm-nav-drop a{padding:6px 0;font-size:14px}
}

/* ─── BREADCRUMB ─── */
.dm-crumb{
  max-width:var(--max-width);
  margin:0 auto;
  padding:14px 24px 0;
  font-size:12px;
  color:rgba(247,245,240,.45);
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.dm-crumb a{color:rgba(247,245,240,.55);transition:color .2s}
.dm-crumb a:hover{color:var(--dm-gold-hi)}
.dm-crumb-sep{color:rgba(201,162,39,.35)}
.dm-crumb-current{color:var(--dm-gold-hi)}

/* ─── HERO ─── */
.dm-hero{
  position:relative;
  min-height:70vh;
  display:flex;
  align-items:center;
  padding:120px 0 96px;
  overflow:hidden;
}
.dm-hero-inner{
  position:relative;
  z-index:2;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 24px;
  width:100%;
}
.dm-hero .eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dm-gold-hi);
  margin-bottom:22px;
  display:flex;
  align-items:center;
  gap:12px;
}
.dm-hero .eyebrow::before{
  content:"";
  width:32px;
  height:2px;
  background:var(--dm-gold);
  display:inline-block;
}
.dm-hero h1{
  font-size:clamp(40px,5.6vw,84px);
  line-height:.94;
  letter-spacing:-.04em;
  margin:0 0 18px;
  font-weight:800;
  color:var(--dm-off);
}
.dm-hero h1 em{color:var(--dm-gold-hi);font-style:italic}
.dm-hero .tagline{
  font-size:clamp(17px,2vw,24px);
  color:var(--dm-gold-hi);
  font-weight:300;
  font-style:italic;
  letter-spacing:-.01em;
  margin:0 0 26px;
  max-width:640px;
}
.dm-hero .rule{
  width:56px;
  height:2px;
  background:linear-gradient(90deg,var(--dm-gold),transparent);
  margin:0 0 26px;
}
.dm-hero .lede{
  max-width:640px;
  font-size:17px;
  color:rgba(247,245,240,.82);
  line-height:1.75;
}
.dm-hero .lede p{margin:0 0 10px}

.dm-hero-ctas{
  margin-top:34px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.dm-btn{
  display:inline-block;
  padding:13px 26px;
  border-radius:3px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-family:'Inter',sans-serif;
  transition:background .2s, color .2s, border-color .2s, transform .2s;
  cursor:pointer;
  border:1px solid transparent;
}
.dm-btn-primary{
  background:var(--dm-gold);
  color:var(--dm-black);
}
.dm-btn-primary:hover{
  background:var(--dm-gold-hi);
  transform:translateY(-1px);
}
.dm-btn-ghost{
  border:1px solid rgba(201,162,39,.42);
  color:var(--dm-gold-hi);
}
.dm-btn-ghost:hover{
  background:rgba(201,162,39,.10);
  border-color:var(--dm-gold);
}

/* ─── SECTIONS ─── */
.dm-section{position:relative}
.dm-wrap{
  max-width:var(--max-width);
  margin:0 auto;
  padding:80px 24px;
}
.dm-section--light{background:var(--dm-off);color:var(--dm-text)}
.dm-section--light p{color:var(--dm-muted)}
.dm-section--dark{
  background:radial-gradient(900px 340px at 50% 0%, rgba(201,162,39,.10), rgba(201,162,39,0) 65%), var(--dm-surface);
  color:var(--dm-off);
}
.dm-section--dark p{color:rgba(247,245,240,.78)}

.dm-eyebrow{
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dm-gold);
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.dm-eyebrow::before{
  content:"";
  width:32px;
  height:2px;
  background:var(--dm-gold);
  display:inline-block;
}
.dm-section h2{
  font-size:clamp(26px,2.8vw,40px);
  line-height:1.06;
  letter-spacing:-.03em;
  margin:0 0 20px;
  max-width:22ch;
  font-weight:700;
}
.dm-section h2 em{color:var(--dm-gold-hi);font-style:italic}
.dm-section h2:after{
  content:"";
  display:block;
  width:56px;
  height:2px;
  margin-top:16px;
  background:linear-gradient(90deg,var(--dm-gold),rgba(201,162,39,0));
}
.dm-section p{font-size:17px;line-height:1.75;margin:0 0 14px}

/* ─── CARDS ─── */
.dm-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:22px;
  margin-top:32px;
}
.dm-card{
  padding:28px 24px;
  border:1px solid rgba(201,162,39,.20);
  background:rgba(201,162,39,.04);
  border-radius:6px;
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.dm-card:hover{
  border-color:rgba(201,162,39,.45);
  transform:translateY(-3px);
  box-shadow:0 12px 36px rgba(201,162,39,.12);
}
.dm-card-tag{
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dm-gold);
  margin-bottom:12px;
}
.dm-card h3{
  font-size:17px;
  font-weight:700;
  color:var(--dm-off);
  letter-spacing:-.02em;
  margin:0 0 10px;
  line-height:1.25;
}
.dm-section--light .dm-card h3{color:var(--dm-text)}
.dm-card p{
  font-size:14px;
  line-height:1.7;
  color:rgba(247,245,240,.65);
  margin:0;
}
.dm-section--light .dm-card p{color:var(--dm-muted)}

/* ─── BULLETS ─── */
.dm-bullets{list-style:none;padding:0;margin:10px 0 20px}
.dm-bullets li{
  padding:10px 0 10px 24px;
  position:relative;
  font-size:16px;
  line-height:1.65;
}
.dm-bullets li:before{
  content:"";
  position:absolute;
  left:0;top:19px;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--dm-gold);
  box-shadow:0 0 10px rgba(201,162,39,.42);
}

/* ─── FOOTER ─── */
.dm-footer{
  background:var(--dm-black);
  color:rgba(247,245,240,.55);
  border-top:1px solid rgba(201,162,39,.14);
  padding:44px 0 32px;
}
.dm-footer-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:30px;
  align-items:start;
  flex-wrap:wrap;
}
.dm-footer-brand img{
  height:48px;
  width:auto;
  margin-bottom:16px;
  display:block;
  max-width:100%;
}
.dm-footer-tag{
  font-size:12px;
  color:rgba(247,245,240,.45);
  max-width:400px;
  line-height:1.65;
  margin:0 0 12px;
}
.dm-footer-legal{
  font-size:11px;
  color:rgba(247,245,240,.30);
  line-height:1.7;
}
.dm-footer-legal a{color:rgba(247,245,240,.50);transition:color .2s}
.dm-footer-legal a:hover{color:var(--dm-gold-hi)}
.dm-footer-copy{
  font-size:11px;
  color:rgba(247,245,240,.35);
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(247,245,240,.06);
}

.dm-footer-cluster{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
}
.dm-footer-cluster-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(201,162,39,.55);
  margin-bottom:6px;
}
.dm-footer-cluster a{
  color:rgba(247,245,240,.60);
  transition:color .2s;
}
.dm-footer-cluster a:hover{color:var(--dm-gold-hi)}

@media(max-width:820px){
  .dm-footer-inner{grid-template-columns:1fr}
}

/* ─── UTILITY ─── */
.text-center{text-align:center}
.mt-0{margin-top:0}

/* Refined superscript sizing for ™ marks — subtle, gold */
sup{
  font-size:.62em;
  line-height:0;
  vertical-align:super;
  color:var(--dm-gold);
  font-weight:600;
  margin-left:1px;
  letter-spacing:0;
}
/* Nav items already have small type; keep their sup consistent */
.dm-nav-item > a sup, .dm-nav-drop-label sup, .dm-footer-cluster a sup{
  color:var(--dm-gold);
}


/* ─── BRAND STRAPLINE PILL (Architecture | Governance | Intelligence) ─── */
.dm-brand-strap{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin:8px 0 26px;
  padding:9px 20px;
  border:1px solid rgba(201,162,39,.30);
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--dm-off);
  background:rgba(201,162,39,.06);
  white-space:nowrap;
}
.dm-brand-strap .sep{
  color:var(--dm-gold);
  font-weight:400;
  padding:0 2px;
  /* Defensive: margin fallback in case flex `gap` doesn't apply (older browsers, style overrides) */
  margin:0 6px;
}
@media(max-width:640px){
  .dm-brand-strap{
    font-size:10.5px;
    letter-spacing:.15em;
    padding:7px 14px;
    gap:8px;
  }
  .dm-brand-strap .sep{ margin:0 4px; }
}