/**
 * DianApps Blog Header — blog-header.css
 * Mega-menu design matching dianapps.com exactly.
 * Enqueued by functions.php via da_blog_header_assets().
 */

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

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root {
  --da-primary     : #1E3A8A;
  --da-text-dark   : #060821;
  --da-text-body   : #333333;
  --da-border      : #E8E8E8;
  --da-bg-subtle   : #ECEFFF;
  --da-grad-card   : linear-gradient(180deg, #ECEFFF 0%, rgba(236,239,255,.5) 100%);
  --da-grad-sidebar: linear-gradient(270deg, #ECEFFF 0%, rgba(236,239,255,.5) 100%);
  --da-shadow-drop : 0px 15px 33px 0px rgba(13,46,149,.10);
  --da-shadow-item : 0px 3px 3px 0px rgba(0,0,0,.04);
  --da-shadow-scroll: 0px 2px 10px rgba(0,0,0,.10);
  --da-header-h    : 74px;
  --da-header-h-mob: 64px;
}

*, *::before, *::after { box-sizing: border-box; }

/* ── Porto conflict suppression ─────────────────────────────────────────── */
#header,
.header-main,
.sticky-header-inner,
.porto-sticky-header { display: none !important; }

body { padding-top: var(--da-header-h) !important; }

/* Porto sets overflow-x:hidden on html which breaks position:fixed on mobile.
   Move it to body instead so the viewport remains the fixed containing block. */
html { overflow-x: visible !important; }
body { overflow-x: hidden; }

/* ════════════════════════════════════════════════════════════════════════════
   HEADER SHELL
══════════════════════════════════════════════════════════════════════════ */
.da-header {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 1000 !important;
  padding: 4px 0;
  background: transparent;
  transition: background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
  -webkit-transform: translateZ(0); transform: translateZ(0);
}
.da-header.da-scrolled {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(130px);
  -webkit-backdrop-filter: blur(130px);
  box-shadow: var(--da-shadow-scroll);
}

/* ── Container / Toolbar ─────────────────────────────────────────────────── */
.da-header__container { display:flex; justify-content:center; padding:0 100px; }
.da-header__toolbar {
  width:100%; max-width:1650px;
  display:flex; align-items:center; justify-content:space-between;
  min-height: var(--da-header-h);
}
@media (max-width:1360px) { .da-header__container { padding:0 80px; } .da-header__right { gap:16px; } }
@media (max-width:1260px) { .da-header__container { padding:0 40px; } .da-header__right { gap:12px; } }
@media (max-width:1100px) { .da-header__toolbar { min-height:64px; } .da-header__right { gap:8px; } body { padding-top: var(--da-header-h-mob) !important; } }
@media (max-width:500px)  { .da-header__container { padding:0 16px; } }

/* ── Logo ────────────────────────────────────────────────────────────────── */
.da-header__logo-link {
  display:flex; align-items:center; text-decoration:none;
  cursor:pointer; margin-right:8px; flex-shrink:0;
}
.da-header__logo-link img { height:36px !important; width:auto !important; display:block; }
.da-logo-text {
  font-family:'Inter',sans-serif; font-size:22px; font-weight:700;
  color:var(--da-text-dark); letter-spacing:-.03em;
}

/* ── Desktop right ───────────────────────────────────────────────────────── */
.da-header__right { display:flex; align-items:center; gap:24px; }
.da-nav__list { list-style:none; display:flex; align-items:center; gap:8px; margin:0; padding:0; }
.da-nav__item { position:relative; list-style:none; }

/* ── Nav link wrap ───────────────────────────────────────────────────────── */
.da-nav__item { cursor:pointer !important; }
.da-nav__link-wrap {
  display:flex; align-items:center; gap:4px; padding:10px;
  border-radius:60px; background:transparent; cursor:pointer !important;
  transition:background .2s ease; text-decoration:none; border:none !important; outline:none;
}
.da-nav__link-wrap:hover,
.da-nav__item.da-active > .da-nav__link-wrap { background:#fff; }
.da-nav__link-wrap:hover .da-nav__text,
.da-nav__item.da-active > .da-nav__link-wrap .da-nav__text {
  color:var(--da-primary) !important;
  font-weight:600 !important;
  -webkit-text-fill-color:var(--da-primary) !important;
}

/* ── Nav text ────────────────────────────────────────────────────────────── */
.da-nav__text {
  font-family:'Inter',sans-serif; font-size:14px; font-weight:500;
  color:var(--da-text-dark); line-height:1; letter-spacing:-.2px;
  white-space:nowrap; text-decoration:none; transition:color .2s ease;
  background:none; border:none; cursor:pointer; padding:0;
}
.da-nav__text--ai {
  background:linear-gradient(90deg,#2a3dbd,#8678a9 12.5%,#e8b794 26%,#ff832c 53.7%,#5462c4 82.6%,#2a3dbd);
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; font-weight:600;
  animation:da-ai-gradient 3s linear infinite;
}
@keyframes da-ai-gradient {
  0%   { background-position:0% center; }
  100% { background-position:200% center; }
}
.da-nav__item.da-active > .da-nav__link-wrap .da-nav__text--ai,
.da-nav__link-wrap:hover .da-nav__text--ai { -webkit-text-fill-color:transparent !important; }

/* ── Chevron ─────────────────────────────────────────────────────────────── */
.da-nav__chevron {
  width:16px; height:16px; color:var(--da-text-dark); flex-shrink:0;
  transition:transform .25s ease, color .2s ease;
}
.da-nav__item.da-active > .da-nav__link-wrap .da-nav__chevron { transform:rotate(180deg); }
.da-nav__link-wrap:hover .da-nav__chevron,
.da-nav__item.da-active .da-nav__chevron { color:var(--da-primary); }

/* ════════════════════════════════════════════════════════════════════════════
   DROPDOWN BASE
══════════════════════════════════════════════════════════════════════════ */
.da-dropdown {
  display:none; position:absolute; top:46px;
  transform:translateX(-50%); z-index:1001; margin-top:8px;
  background:#fff; border-radius:30px;
  border:1px solid #E8E8E8;
  box-shadow:var(--da-shadow-drop);
  animation:ddFadeIn .18s ease;
}
.da-nav__item.da-active > .da-dropdown { display:block; }

@keyframes ddFadeIn {
  from { opacity:0; transform:translateX(-50%) translateY(-8px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* Type-specific widths and positions */
.da-dropdown--t1 { left:185px; padding:24px 32px; width:87vw; max-width:1200px; }
.da-dropdown--t2 { left:83px;  padding:8px; width:72vw; max-width:1200px; }
.da-dropdown--t3 { left:88px;  padding:8px; width:64vw; max-width:1200px; }
.da-dropdown--t4 { left:-115px; padding:8px; width:78vw; max-width:1200px; }
.da-dropdown--t5 { left:60px; padding:32px 24px; width:14vw; max-width:200px; }
.da-dropdown--t6 { left:-256px; padding:24px 32px; width:78vw; max-width:1200px; }

@media (max-width:1100px) { .da-dropdown--t1 { left:280px; } }

/* ════════════════════════════════════════════════════════════════════════════
   SHARED INNER COMPONENTS
══════════════════════════════════════════════════════════════════════════ */

/* Header card (Types 1 & 6) */
.dd-header-card {
  background:var(--da-grad-card);
  border:1px solid rgba(30,58,138,.15); box-shadow:var(--da-shadow-item);
  padding:21px 16px; border-radius:12px;
  display:flex; align-items:flex-start; gap:10px;
  cursor:pointer; text-decoration:none; margin-bottom:32px;
}
.dd-header-card:hover { box-shadow:0 4px 12px rgba(30,58,138,.12); }

/* Icon circles */
.dd-icon-44 {
  width:44px; height:44px; border-radius:50%; background:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.dd-icon-32 {
  width:32px; height:32px; border-radius:50%; background:var(--da-bg-subtle); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.dd-icon-32 svg { width:20px; height:20px; }
.dd-icon-32 img { width:20px !important; height:20px !important; object-fit:contain; }
.dd-icon-44 svg { width:24px; height:24px; }
.dd-icon-44 img { width:24px !important; height:24px !important; object-fit:contain; }

/* Header card text */
.dd-header-body { display:flex; flex-direction:column; gap:8px; }
.dd-header-title-row { display:flex; align-items:center; gap:8px; }
.dd-header-title {
  font-size:18px; font-weight:600; color:var(--da-primary);
  line-height:20px; letter-spacing:-.2px;
  font-family:'Inter',sans-serif;
}
.dd-header-subtitle {
  font-size:13px; font-weight:400; color:var(--da-text-body);
  line-height:1; letter-spacing:-.2px; font-family:'Inter',sans-serif;
}
.dd-header-card:hover .dd-arrow-icon { opacity:1; }
.dd-header-card .dd-arrow-icon,
.dd-grid-item .dd-arrow-icon { margin-left:0; }

/* Section label (Types 3, 4) */
.dd-section-label {
  font-size:12px; font-weight:600; color:var(--da-text-body); line-height:1;
  letter-spacing:-.2px; text-transform:uppercase;
  margin:24px 0 0 24px; font-family:'Inter',sans-serif;
}

/* Force border-style:solid on all card/item anchors — Porto a-tag reset strips it */
.dd-grid-item, .dd-t2-link-item, .dd-t4-card, .dd-t5-item, .dd-t6-item {
  border-style: solid !important;
}

/* Generic grid item */
.dd-grid-item {
  display:flex; align-items:flex-start; gap:10px; padding:8px;
  border-radius:12px; cursor:pointer; text-decoration:none;
  border:1px solid transparent;
  transition:border .15s, box-shadow .15s;
}
.dd-grid-item:hover { border:1px solid var(--da-border) !important; box-shadow:var(--da-shadow-item); }
.dd-item-title {
  font-size:14px; font-weight:400; color:var(--da-text-dark);
  line-height:1.4; letter-spacing:-.2px; font-family:'Inter',sans-serif;
}
.dd-item-subtitle {
  font-size:13px; font-weight:400; color:var(--da-text-body);
  line-height:16px; letter-spacing:-.2px; margin-top:3px;
  font-family:'Inter',sans-serif;
}
.dd-item-text {
  display:flex; flex-direction:column; gap:4px; flex:1; min-width:0;
}
.dd-item-title-row {
  display:flex; align-items:center; gap:8px;
}

/* Hover arrow icon — appears on hover across all dropdown item types */
.dd-arrow-icon {
  opacity:0; transition:opacity .15s; width:16px; height:16px;
  flex-shrink:0; margin-left:auto; color:var(--da-primary);
}
.dd-grid-item:hover .dd-arrow-icon,
.dd-t6-item:hover .dd-arrow-icon,
.dd-t5-item:hover .dd-arrow-icon { opacity:1; }

/* CTA banner */
.dd-cta-banner {
  display:flex; align-items:center; gap:24px;
  background:var(--da-grad-card);
  border-radius:12px; overflow:hidden; height:103px;
}
.dd-cta-thumb {
  width:177px; height:103px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--da-bg-subtle); font-size:32px;
}
.dd-cta-banner--industries {
  background:linear-gradient(135deg,#F0F4FF 0%,#E0E7FF 100%);
  border-radius:24px; gap:24px;
}
.dd-cta-industries-img { width:177px !important; height:103px !important; flex-shrink:0; object-fit:cover !important; border-radius:24px; display:block; }
.dd-cta-body { flex:1; padding-right:20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.dd-cta-text { flex:1; }
.dd-cta-banner--industries .dd-cta-text { width:65%; flex:unset; }
.dd-cta-banner--industries .dd-cta-title { width:65%; }
.dd-t4-cta .dd-cta-text { flex:unset; }
.dd-t4-cta .dd-cta-title { width:60%; }
.dd-cta-title {
  font-size:16px; font-weight:600; color:var(--da-text-dark);
  line-height:1.25; letter-spacing:-.2px; margin-bottom:6px;
  font-family:'Inter',sans-serif;
}
.dd-cta-title span {
  background:linear-gradient(90deg,#ff822b 0%,#2c52be 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.dd-cta-subtitle { font-size:13px; font-weight:400; color:var(--da-text-body); line-height:1; font-family:'Inter',sans-serif; }
.dd-cta-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 24px; border-radius:44px;
  font-size:14px; font-weight:500; color:#fff; text-decoration:none; white-space:nowrap;
  background:#1E3A8A; border:0; cursor:pointer; outline:none;
  transition:background .6s ease, transform .6s ease, box-shadow .6s ease;
  font-family:'Inter',sans-serif; flex-shrink:0;
}
.dd-cta-btn:hover {
  background:linear-gradient(266.31deg,#2C52BE 3.03%,#FF822B 96.97%);
  transform:translateY(-3px);
  box-shadow:0px 4px 11px 0px rgba(0,0,0,.25);
  color:#fff;
}

/* ════════════════════════════════════════════════════════════════════════════
   TYPE 1 — Let's Talk AI
══════════════════════════════════════════════════════════════════════════ */
.dd-t1-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.dd-t1-grid .dd-grid-item { padding:12px; }
.dd-t1-grid .dd-icon-32 { background:#ECEFFF; }
.dd-t1-grid .dd-item-title { font-weight:600; color:#333333; line-height:20px; }
.dd-t1-grid .dd-grid-item:hover .dd-item-title { color:var(--da-primary); }
.dd-t1-grid .dd-item-subtitle { line-height:16px; margin-top:0; }
.dd-t1-grid .dd-item-text { gap:4px; }

/* ════════════════════════════════════════════════════════════════════════════
   TYPE 2 — Services
══════════════════════════════════════════════════════════════════════════ */
.dd-t2-inner { display:flex; width:100%; max-height:600px; overflow:hidden; }

.dd-t2-sidebar {
  width:348px; flex-shrink:0;
  background:var(--da-grad-sidebar);
  padding:24px 16px; border-radius:24px;
  max-height:600px; overflow-y:auto;
}
.dd-t2-sidebar-title {
  font-size:12px; font-weight:600; color:#333333;
  text-transform:uppercase; letter-spacing:-.2px;
  line-height:1; margin:0 0 20px 8px; font-family:'Inter',sans-serif;
  cursor:default;
}
#dd-t2-tabs { display:flex; flex-direction:column; }
.dd-t2-tab {
  display:flex; align-items:center; height:52px; gap:8px;
  padding:0 15px; border-radius:10px; cursor:pointer; transition:background .2s;
}
.dd-t2-tab:hover { background:rgba(255,255,255,.6); }
.dd-t2-tab.active { background:#fff; }
.dd-t2-tab.active .dd-t2-tab-text { color:var(--da-primary); }
.dd-t2-tab.active .dd-icon-32 { background:var(--da-bg-subtle); }
.dd-t2-tab .dd-icon-32 { background:#fff; }
.dd-t2-tab-text {
  font-size:16px; font-weight:500; color:#333333;
  line-height:1.25; letter-spacing:-.2px; font-family:'Inter',sans-serif;
}

.dd-t2-main { padding:24px; flex:1; display:flex; flex-direction:column; overflow:hidden; min-height:0; }
.dd-t2-main-header {
  display:flex; align-items:center; gap:10px; margin-bottom:20px;
  padding:21px 16px; background:var(--da-grad-card);
  border:1px solid rgba(30,58,138,.15); box-shadow:var(--da-shadow-item);
  border-radius:12px; cursor:pointer; text-decoration:none;
}
.dd-t2-main-header .dd-icon-44 img { width:20px !important; height:20px !important; }
.dd-t2-main-title {
  font-size:18px; font-weight:600; color:var(--da-primary);
  line-height:20px; letter-spacing:-0.2px; font-family:'Inter',sans-serif;
}
.dd-t2-main-subtitle {
  font-size:13px; font-weight:400; color:var(--da-text-body);
  line-height:1; letter-spacing:-0.2px; font-family:'Inter',sans-serif;
}
.dd-t2-links { display:flex; flex-wrap:wrap; gap:12px; max-height:320px; overflow-y:auto; }
.dd-t2-links::-webkit-scrollbar { width:4px; }
.dd-t2-links::-webkit-scrollbar-track { background:transparent; }
.dd-t2-links::-webkit-scrollbar-thumb { background:rgba(0,0,0,.15); border-radius:4px; }
.dd-t2-link-item {
  width:43%; display:flex; flex-direction:column; gap:6px;
  padding:12px; border-radius:12px; cursor:pointer;
  border:1px solid transparent; transition:border .15s, box-shadow .15s;
  text-decoration:none;
}
.dd-t2-link-item:hover { border:1px solid var(--da-border) !important; box-shadow:var(--da-shadow-item); }

/* Services: body fills card width; arrow uses display:none→block (no space reserved when hidden) */
.dd-t2-main-header .dd-header-body { flex:1; min-width:0; }
.dd-t2-main-header .dd-arrow-icon,
.dd-t2-link-item .dd-arrow-icon { display:none; opacity:1; transition:none; margin-left:0; }
.dd-t2-main-header:hover .dd-arrow-icon,
.dd-t2-link-item:hover .dd-arrow-icon { display:inline-block; }

.dd-t2-link-title {
  font-size:14px; font-weight:600; color:var(--da-text-dark);
  line-height:normal; letter-spacing:-0.2px; font-family:'Inter',sans-serif;
}
.dd-t2-link-item:hover .dd-t2-link-title { color:var(--da-primary); }
.dd-t2-link-sub {
  font-size:13px; font-weight:400; color:var(--da-text-body);
  line-height:normal; letter-spacing:-0.2px; font-family:'Inter',sans-serif;
}

/* Panels */
.dd-t2-panel { display:none; }
.dd-t2-panel.active { display:block; }

/* ════════════════════════════════════════════════════════════════════════════
   TYPE 3 — Industries
══════════════════════════════════════════════════════════════════════════ */
.dd-t3-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:4px;
  margin:32px;
}
.dd-t3-grid .dd-grid-item { align-items:center; }
.dd-t3-grid .dd-arrow-icon { margin-left:0; }
.dd-t3-grid .dd-item-title { font-weight:400; line-height:20px; color:#333333; text-align:center; letter-spacing:normal; }
.dd-t3-grid .dd-item-title-row { align-items:center; }
.dd-t3-grid .dd-item-text { flex-direction:row; align-items:center; gap:8px; }
.dd-t3-cta { margin:0; }

/* ════════════════════════════════════════════════════════════════════════════
   TYPE 4 — Portfolio
══════════════════════════════════════════════════════════════════════════ */
.dd-t4-grid {
  display:flex; flex-wrap:wrap; gap:12px; margin:20px 24px 32px;
}
.dd-t4-card {
  width:calc(33.33% - 8px); display:flex; flex-direction:column; gap:8px;
  padding:16px; border-radius:12px; cursor:pointer;
  border:1px solid transparent; transition:border .15s, box-shadow .15s;
  text-decoration:none; align-items:flex-start;
}
.dd-t4-card:hover { border:1px solid var(--da-border) !important; box-shadow:var(--da-shadow-item); }
/* Portfolio logo row: logo (fixed 148×32) on left, arrow on right */
.dd-t4-logo-row { display:flex; align-items:center; justify-content:space-between; width:100%; }
.dd-t4-logo-box { width:110px; height:27px; flex-shrink:0; overflow:hidden; }
.dd-t4-logo { width:100% !important; height:100% !important; object-fit:contain !important; display:block; }
.dd-t4-arrow { display:none; width:16px; height:16px; flex-shrink:0; color:var(--da-primary); }
.dd-t4-card:hover .dd-t4-arrow { display:block; }
.dd-t4-subtitle {
  font-size:13px; font-weight:400; color:#333333;
  line-height:19px; letter-spacing:-0.2px; font-family:'Inter',sans-serif;
}
.dd-t4-cta { margin:0; }

/* ════════════════════════════════════════════════════════════════════════════
   TYPE 5 — Learn / Company
══════════════════════════════════════════════════════════════════════════ */
.dd-t5-label {
  font-size:12px; font-weight:600; color:#333333;
  line-height:100%; letter-spacing:-0.2px; text-transform:uppercase;
  margin-bottom:20px; font-family:'Inter',sans-serif;
}
.dd-t5-item {
  display:flex; align-items:center; gap:10px; padding:8px; border-radius:12px;
  cursor:pointer; text-decoration:none;
  border:1px solid transparent; transition:border .15s, box-shadow .15s;
}
.dd-t5-item:hover { border:1px solid var(--da-border) !important; box-shadow:var(--da-shadow-item); }
.dd-t5-item .dd-icon-32 { background:none; border-radius:0; width:32px; height:32px; }
.dd-t5-item .dd-icon-32 img { width:32px !important; height:32px !important; }
.dd-t5-item .dd-arrow-icon { display:none; opacity:1; transition:none; margin-left:0; }
.dd-t5-item:hover .dd-arrow-icon { display:block; }
.dd-t5-item-text {
  font-size:14px; font-weight:400; color:#333333;
  line-height:20px; letter-spacing:-0.2px; font-family:'Inter',sans-serif;
}

/* ════════════════════════════════════════════════════════════════════════════
   TYPE 6 — Hire Resources
══════════════════════════════════════════════════════════════════════════ */
.dd-t6-grid { display:flex; flex-wrap:wrap; gap:10px 0; }
.dd-t6-item {
  width:25%; display:flex; align-items:center; gap:10px; padding:8px;
  border-radius:12px; cursor:pointer; text-decoration:none;
  border:1px solid transparent; transition:border .15s, box-shadow .15s;
}
.dd-t6-item:hover { border:1px solid var(--da-border) !important; box-shadow:var(--da-shadow-item); }
.dd-t6-item:hover .dd-item-title { color:var(--da-primary); font-weight:600; }
.dd-t6-icon {
  width:32px; height:32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.dd-t6-icon img { width:32px !important; height:32px !important; object-fit:contain !important; display:block; }
.dd-t6-item .dd-item-title { color:#333333; flex:unset; }
.dd-t6-item .dd-arrow-icon { margin-left:0; }

/* ════════════════════════════════════════════════════════════════════════════
   CTA / CONTACT BUTTON
══════════════════════════════════════════════════════════════════════════ */
.da-btn--secondary {
  position:relative; display:inline-flex; align-items:center; padding:8px 24px;
  border-radius:44px; font-size:14px; font-weight:500; color:var(--da-text-dark);
  text-decoration:none; background:transparent; cursor:pointer;
  white-space:nowrap; flex-shrink:0; z-index:0;
  font-family:'Inter',sans-serif;
}
.da-btn--secondary::before {
  content:''; position:absolute; inset:0; border-radius:44px; padding:1.5px;
  background:linear-gradient(266.31deg,#2C52BE 3.03%,#FF822B 96.97%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; z-index:-1;
}
.da-btn--secondary:hover { color:#fff; background:linear-gradient(266.31deg,#2C52BE 3.03%,#FF822B 96.97%); }
.da-btn--secondary:hover::before { display:none; }

/* ════════════════════════════════════════════════════════════════════════════
   HAMBURGER & OVERLAY
══════════════════════════════════════════════════════════════════════════ */
.da-header__hamburger {
  display:none; background:none; border:none; cursor:pointer; padding:8px;
}
.da-overlay { display:none; position:fixed; inset:0; z-index:999; }
.da-overlay.da-active { display:block; }

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE DRAWER
══════════════════════════════════════════════════════════════════════════ */
/* ── Drawer shell ────────────────────────────────────────────────────────── */
.da-drawer {
  display:none; /* removed from layout/stacking when closed — no fixed-position ghost */
  position:fixed; inset:0; z-index:10000; pointer-events:none;
}
.da-drawer.da-open { display:block; pointer-events:auto; }

/* Full-width panel (matches dianapps.com MUI Drawer width:100%) */
.da-drawer__panel {
  position:absolute; top:0; right:0; bottom:0;
  width:100%;                          /* full screen on mobile */
  background:#fff; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .3s ease;
  overflow:hidden;
}
.da-drawer.da-open .da-drawer__panel { transform:translateX(0); }

.da-drawer__head {
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 16px; border-bottom:1px solid var(--da-border); flex-shrink:0;
}
.da-drawer__logo { text-decoration:none; }
.da-drawer__close {
  background:none; border:none; cursor:pointer; padding:6px;
  display:flex; align-items:center; justify-content:center; border-radius:8px;
}
.da-drawer__close:hover { background:#F3F4F6; }
.da-drawer__body { flex:1; overflow-y:auto; padding:0; }
.da-drawer__cta-wrap { padding:20px 16px; }
.da-drawer__cta { width:100%; justify-content:center; display:flex; }

/* ── Mobile nav items ────────────────────────────────────────────────────── */
.da-mobile-item {
  border-bottom:1px solid var(--da-border);
}
.da-mobile-item__row {
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 0; cursor:pointer;
  font-size:16px; font-weight:500; color:#000000;
  font-family:'Inter',sans-serif; user-select:none;
}
.da-mobile-item__label { font-size:16px; font-weight:500; line-height:1; letter-spacing:-0.2px; color:#000 !important; -webkit-text-fill-color:#000 !important; }
.da-drawer__body .da-mobile-item--ai .da-mobile-item__label {
  background-image:linear-gradient(90deg,#2a3dbd,#8678a9 12.5%,#e8b794 26%,#ff832c 53.7%,#5462c4 82.6%,#2a3dbd) !important;
  background-size:200% auto !important;
  background-color:transparent !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  animation:da-ai-gradient 3s linear infinite;
}
.da-mobile-item__link {
  display:block; padding:15px 0;
  font-size:16px; font-weight:500; color:#000000;
  text-decoration:none; border-bottom:1px solid var(--da-border);
  font-family:'Inter',sans-serif;
}
.da-mobile-item__link:last-child { border-bottom:none; }
.da-mobile-chevron {
  width:20px; height:20px; flex-shrink:0; transition:transform .25s ease;
}
.da-mobile-item.da-open .da-mobile-chevron { transform:rotate(180deg); }

/* Collapsible content area */
.da-mobile-content { display:none; padding:0 0 12px; }
.da-mobile-item.da-open .da-mobile-content { display:block; }
.da-drawer__body .da-mobile-content { background:#fff !important; }

/* ── Mobile header card (type 1, 6) ──────────────────────────────────────── */
.da-mc-header {
  display:flex; align-items:flex-start; gap:12px; padding:16px;
  background:linear-gradient(180deg,#ECEFFF 0%,rgba(236,239,255,.5) 100%);
  border:1px solid rgba(30,58,138,0.15); border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
  text-decoration:none; margin:0 0 12px;
}
/* Let's Talk AI gradient chevron — animated gradient via mask, rotate on open */
.da-ai-chev-wrap {
  display:inline-block;
  width:16px; height:16px; flex-shrink:0;
  background:linear-gradient(90deg,#2a3dbd,#8678a9 12.5%,#e8b794 26%,#ff832c 53.7%,#5462c4 82.6%,#2a3dbd);
  background-size:200% auto;
  animation:da-ai-gradient 3s linear infinite;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat; -webkit-mask-size:contain; -webkit-mask-position:center;
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-repeat:no-repeat; mask-size:contain; mask-position:center;
}
.da-ai-chevron { transition:transform .25s ease; }
.da-mobile-item.da-open .da-ai-chevron { transform:rotate(180deg); }
.da-nav__item.da-active > .da-nav__link-wrap .da-ai-chev-wrap { transform:rotate(180deg); }
.da-mc-icon40 {
  width:40px; height:40px; min-width:40px; border-radius:50%;
  background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.da-drawer__body .da-mc-icon40 { background:#fff !important; }
.da-mc-icon40 svg { width:20px; height:20px; }
.da-drawer__body .da-mc-title { font-size:16px !important; font-weight:600 !important; color:#1E3A8A !important; -webkit-text-fill-color:#1E3A8A !important; font-family:'Inter',sans-serif; }
.da-drawer__body .da-mc-sub   { font-size:12px !important; color:#333 !important; -webkit-text-fill-color:#333 !important; margin-top:2px; font-family:'Inter',sans-serif; }

/* ── Mobile dropdown list item ───────────────────────────────────────────── */
.da-mc-item {
  display:flex; align-items:center; gap:12px; padding:12px;
  text-decoration:none; background:transparent;
  border-radius:8px; margin-bottom:8px;
  transition:background .2s ease, box-shadow .2s ease;
}
.da-drawer__body .da-mc-item {
  display:flex !important; background:transparent !important;
  border:none !important; box-shadow:none !important;
  border-radius:8px !important; padding:12px !important;
  margin-bottom:8px !important; text-decoration:none !important;
  transition:background .2s ease, box-shadow .2s ease;
}
.da-drawer__body .da-mc-item:hover {
  background:#fff !important;
  box-shadow:0 4px 16px rgba(0,0,0,0.08) !important;
}
.da-drawer__body .da-mc-item::after {
  content:'';
  width:16px; height:16px; flex-shrink:0; margin-left:auto;
  background-image:url("https://dnhm2py0jncte.cloudfront.net/right_Arrow_Without_Bg_b5e07419d9.svg");
  background-size:contain; background-repeat:no-repeat; background-position:center;
  opacity:0; transition:opacity .2s ease;
}
.da-drawer__body .da-mc-item:hover::after { opacity:0.6; }
.da-mc-icon32 {
  width:32px; height:32px; min-width:32px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.da-drawer__body .da-mc-icon32 { background:none !important; border-radius:0 !important; }
.da-mc-icon32 img { width:100% !important; height:100% !important; object-fit:contain; }
.da-mc-icon32 svg { width:20px; height:20px; }
.da-mc-item-title { font-size:14px; font-weight:400; color:#060821 !important; -webkit-text-fill-color:#060821 !important; font-family:'Inter',sans-serif; line-height:1.4; letter-spacing:-0.2px; }
.da-mc-item-sub   { font-size:12px; font-weight:400; color:#666666 !important; -webkit-text-fill-color:#666666 !important; margin-top:2px; font-family:'Inter',sans-serif; line-height:1.4; }

/* ── Mobile portfolio — vertical logo list ───────────────────────────────── */
.da-port-list { display:flex; flex-direction:column; gap:20px; margin-bottom:20px; }
.da-mc-portfolio-v { display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-decoration:none; }
.da-mc-port-logo-wrap { width:148px; height:32px; display:flex; align-items:center; justify-content:flex-start; overflow:hidden; }
.da-mc-port-logo-wrap img { height:32px !important; width:auto !important; max-width:148px !important; object-fit:contain !important; display:block !important; }
.da-mc-port-desc { font-size:12px; color:#666 !important; -webkit-text-fill-color:#666 !important; text-align:left; line-height:16px; font-family:'Inter',sans-serif; }

/* ── Mobile hire resources — vertical list ───────────────────────────────── */
.da-hire-list { display:flex; flex-direction:column; }
.da-mc-hire-item { display:flex; align-items:center; gap:12px; padding:12px; border-radius:8px; text-decoration:none; transition:background .2s ease, box-shadow .2s ease; }
.da-mc-hire-item:hover { background:#fff !important; box-shadow:0 2px 8px rgba(0,0,0,0.06) !important; }
.da-mc-hire-icon { width:32px; height:32px; min-width:32px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.da-mc-hire-title { font-size:14px; font-weight:400; color:#060821 !important; -webkit-text-fill-color:#060821 !important; line-height:20px; letter-spacing:-0.2px; font-family:'Inter',sans-serif; }

/* ── Mobile industries — icon bg, small label, no arrow ─────────────────── */
.da-ind-list { display:flex; flex-direction:column; margin-bottom:20px; margin-top:5px; }
.da-drawer__body .da-mc-item--ind { padding:6px 0 !important; margin-bottom:0 !important; border-radius:0 !important; }
.da-drawer__body .da-mc-item--ind:hover { background:transparent !important; box-shadow:none !important; }
.da-drawer__body .da-mc-item--ind::after { display:none !important; }
.da-drawer__body .da-mc-item--ind .da-mc-icon32 { background:#F0F4FF !important; border-radius:50% !important; }
.da-drawer__body .da-mc-item--ind .da-mc-icon32 img { width:20px !important; height:20px !important; object-fit:contain; }
.da-drawer__body .da-mc-item--ind .da-mc-icon32 svg { stroke:#555; width:20px !important; height:20px !important; }
.da-drawer__body .da-mc-item--ind .da-mc-item-title { font-size:12px !important; font-weight:500 !important; color:#333 !important; -webkit-text-fill-color:#333 !important; }

/* ── Learn items — light hover, no shadow, no arrow ─────────────────────── */
.da-drawer__body .da-mc-item--learn::after { display:none !important; }
.da-drawer__body .da-mc-item--learn:hover { background:#F8FAFF !important; box-shadow:none !important; }
.da-drawer__body .da-mc-item--learn .da-mc-item-title { color:#333 !important; -webkit-text-fill-color:#333 !important; }

/* ── Shared CTA card button ──────────────────────────────────────────────── */
.da-cta-btn {
  display:inline-block; font-size:14px; font-weight:500; color:#fff !important;
  background:#1E3A8A; border-radius:44px; padding:8px 24px; text-decoration:none;
  font-family:'Inter',sans-serif; transition:background .3s ease;
}
.da-cta-btn:hover { background:linear-gradient(266deg,#2C52BE 3%,#FF822B 97%) !important; }

/* ── Industries CTA card ─────────────────────────────────────────────────── */
.da-ind-cta {
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  background:linear-gradient(135deg,#F0F4FF 0%,#E0E7FF 100%) !important;
  border-radius:12px; overflow:hidden !important;
}
.da-ind-cta .da-ind-cta-img { width:100% !important; height:138px !important; object-fit:cover !important; display:block !important; border-radius:0; flex-shrink:0; }
.da-ind-cta .da-ind-cta-body { padding:16px !important; box-sizing:border-box !important; flex:1; text-align:center !important; }
.da-ind-cta .da-ind-cta-title { font-size:14px !important; font-weight:700 !important; color:#1E3A8A !important; -webkit-text-fill-color:#1E3A8A !important; line-height:18px !important; margin:0 0 4px !important; font-family:'Inter',sans-serif !important; }
.da-ind-cta .da-ind-cta-span { font-weight:500 !important; background:linear-gradient(90deg,#FF822B 0%,#2C52BE 100%) !important; -webkit-background-clip:text !important; -webkit-text-fill-color:transparent !important; background-clip:text !important; }
.da-ind-cta .da-ind-cta-sub { font-size:12px !important; color:#666 !important; -webkit-text-fill-color:#666 !important; line-height:16px !important; margin:0 0 12px !important; font-family:'Inter',sans-serif !important; }
.da-ind-cta .da-ind-cta-btn-wrap { display:flex; align-items:center; justify-content:center; }

/* ── Portfolio CTA card ──────────────────────────────────────────────────── */
.da-port-cta {
  display:flex; flex-direction:column; align-items:stretch; gap:0;
  background:linear-gradient(180deg,#ECEFFF 0%,rgba(236,239,255,.5) 100%) !important;
  border-radius:12px; overflow:hidden !important;
}
.da-port-cta .da-port-cta-img-wrap { width:100%; height:138px !important; overflow:hidden !important; flex-shrink:0; border-radius:0; }
.da-port-cta .da-port-cta-img-wrap img { width:100% !important; height:138px !important; object-fit:cover !important; display:block !important; }
.da-port-cta .da-port-cta-body { padding:16px !important; box-sizing:border-box !important; text-align:center !important; }
.da-port-cta .da-port-cta-title { font-size:14px !important; font-weight:700 !important; color:#060821 !important; -webkit-text-fill-color:#060821 !important; line-height:18px !important; margin:0 0 4px !important; font-family:'Inter',sans-serif !important; }
.da-port-cta .da-port-cta-sub { font-size:12px !important; color:#333333 !important; -webkit-text-fill-color:#333333 !important; line-height:16px !important; margin:0 0 12px !important; font-family:'Inter',sans-serif !important; }
.da-port-cta .da-port-cta-btn-wrap { display:flex; align-items:center; justify-content:center; }
.da-port-cta .da-cta-btn { display:inline-block; }

/* ── Mobile Services flat sections ──────────────────────────────────────── */
/* Services mobile — outer gradient pill (270deg matches dianapps.com) */
.da-drawer__body .da-svc-mobile {
  background:linear-gradient(270deg,#ECEFFF 0%,rgba(236,239,255,.5) 100%) !important;
  border-radius:24px !important; padding:6px !important; margin-bottom:15px;
}
/* Inactive tab — transparent, head has loose padding */
.da-drawer__body .da-svc-mobile-section {
  background:transparent !important; border-radius:20px !important;
  padding:0 !important; border-bottom:none !important;
  margin-bottom:4px !important; cursor:pointer; transition:background .2s ease;
}
.da-drawer__body .da-svc-mobile-section:last-child { margin-bottom:0 !important; }
/* Active tab — white card with full padding */
.da-drawer__body .da-svc-mobile-section.da-active {
  background:#fff !important; padding:12px !important; cursor:default;
}
/* Hide card + links in inactive sections */
.da-drawer__body .da-svc-mobile-section:not(.da-active) .da-svc-mobile-card { display:none !important; }
.da-drawer__body .da-svc-mobile-section:not(.da-active) .da-svc-mobile-link  { display:none !important; }
/* Tab head */
.da-drawer__body .da-svc-mobile-head { display:flex; align-items:center; gap:8px; background:transparent !important; padding:6px 15px; margin-bottom:0; }
.da-drawer__body .da-svc-mobile-section.da-active .da-svc-mobile-head { padding:0 !important; margin-bottom:12px !important; }
/* Icon: white when inactive, #E0E7FF when active */
.da-drawer__body .da-svc-mobile-head img { width:20px !important; height:20px !important; object-fit:contain !important; flex-shrink:0; border-radius:50%; background:#fff !important; padding:4px; box-sizing:content-box; }
.da-drawer__body .da-svc-mobile-section.da-active .da-svc-mobile-head img { background:#E0E7FF !important; }
/* Title: gray/normal when inactive, blue/semibold when active */
.da-drawer__body .da-svc-mobile-head span { font-size:14px; font-weight:400; color:#333 !important; font-family:'Inter',sans-serif; letter-spacing:-0.2px; }
.da-drawer__body .da-svc-mobile-section.da-active .da-svc-mobile-head span { font-weight:600 !important; color:#1E3A8A !important; }
/* Header card */
.da-drawer__body .da-svc-mobile-card {
  display:flex !important; align-items:center; gap:12px;
  background:linear-gradient(180deg,#ECEFFF 0%,rgba(236,239,255,.5) 100%) !important;
  border:1px solid rgba(30,58,138,0.15) !important; border-radius:12px !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.06) !important;
  padding:12px; text-decoration:none; margin-bottom:16px;
}
/* Card icon — 44×44 white circle (w-11 h-11 rounded-full bg-white) */
.da-drawer__body .da-svc-mobile-card-icon {
  width:44px; height:44px; min-width:44px; border-radius:50%;
  background:#fff !important; padding:0;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.da-drawer__body .da-svc-mobile-card-icon img { width:24px !important; height:24px !important; object-fit:contain !important; }
/* Card text */
.da-drawer__body .da-svc-mobile-card-title { font-size:16px !important; font-weight:600 !important; color:#1E3A8A !important; -webkit-text-fill-color:#1E3A8A !important; line-height:1.25; letter-spacing:-0.2px; font-family:'Inter',sans-serif; margin-bottom:8px; }
.da-drawer__body .da-svc-mobile-card-sub { font-size:12px !important; color:#333333 !important; -webkit-text-fill-color:#333333 !important; line-height:1.17; letter-spacing:-0.2px; font-family:'Inter',sans-serif; }
/* Link items — hover highlight + right arrow (group/mobilemainitem pattern) */
.da-drawer__body .da-svc-mobile-link {
  display:block !important; position:relative !important;
  padding:12px 36px 12px 12px !important; text-decoration:none;
  border-bottom:none !important; border-radius:8px !important;
  background:transparent !important; margin-bottom:4px !important;
  transition:background .2s ease;
}
.da-drawer__body .da-svc-mobile-link:hover { background:#F9FAFB !important; }
.da-drawer__body .da-svc-mobile-link::after {
  content:''; position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:16px; height:16px;
  background-image:url("https://dnhm2py0jncte.cloudfront.net/right_Arrow_Without_Bg_b5e07419d9.svg");
  background-size:contain; background-repeat:no-repeat; background-position:center;
  opacity:0; transition:opacity .2s ease;
}
.da-drawer__body .da-svc-mobile-link:hover::after { opacity:0.6; }
.da-drawer__body .da-svc-mobile-link-title { font-size:14px !important; font-weight:600 !important; color:#060821 !important; -webkit-text-fill-color:#060821 !important; line-height:1.4; letter-spacing:-0.2px; font-family:'Inter',sans-serif; }
.da-drawer__body .da-svc-mobile-link-sub { font-size:12px !important; color:#333333 !important; -webkit-text-fill-color:#333333 !important; line-height:1.4; margin-top:2px; font-family:'Inter',sans-serif; }

/* ── Nav text + link-wrap shrink at 1100px ───────────────────────────────── */
@media (max-width:1100px) {
  .da-nav__text      { font-size:12px; }
  .da-nav__link-wrap { padding:8px; }
}

/* ── Services dropdown repositioning ─────────────────────────────────────── */
@media (max-width:1300px) { .da-dropdown--t2 { left:175px; width:80vw; } }
@media (max-width:1200px) { .da-dropdown--t2 { left:280px; width:80vw; } .dd-t2-sidebar { width:33%; } }
@media (max-width:1100px) { .da-dropdown--t2 { left:232px; } }

/* ── Responsive: switch to hamburger ─────────────────────────────────────── */
@media (max-width:951px) {
  .da-header__right { display:none; }
  .da-header__hamburger { display:flex; }
}