/* ============================================================================
   MEGA NAV  ·  Dr Sophia AI
   Segmented-control primary nav (one panel, pressed/active = current page) +
   full-width mega menu with nested section cards (hover/focus to open) +
   burger drawer for tablet/mobile.

   Bound to the design system. CRISP corners only (the styleguide forbids
   pills/soft radii); spacing is deliberately generous — enterprise, not
   documentation. The page tokens resolve --ds-radius-* to large values, so
   this file states crisp radii literally to stay sharp regardless of cascade.
   ============================================================================ */

.nav.mn{ position:sticky; top:0; z-index:60; }
.nav.mn .padding-global{ position:relative; z-index:3; }

/* ---- bar -------------------------------------------------------------- */
.mn-bar{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(14px,2.2vw,32px); min-height:clamp(84px,8vw,112px); position:relative; z-index:3;
}
.nav.mn .brand-logo{ height:clamp(60px,5.6vw,82px); display:block; }   /* client logo, scales with viewport so the nav never crowds it */
.mn-brand{ display:inline-flex; align-items:center; justify-self:start; }

/* ---- segmented control (the one panel) -------------------------------- */
.mn-seg{
  justify-self:center; display:inline-flex; align-items:stretch; gap:clamp(3px,0.4vw,6px);
  padding:clamp(4px,0.5vw,6px); border-radius:2px;
  background:color-mix(in srgb, var(--ds-color-green-deep) 5%, var(--ds-color-white));
  border:1px solid var(--ds-border-subtle);
  box-shadow:inset 0 1px 2px var(--ds-color-ink-a06), 0 1px 1px var(--ds-color-ink-a04);
}
.mn-seg__btn{
  display:inline-flex; align-items:center; gap:clamp(6px,0.8vw,11px);
  padding:clamp(10px,1vw,14px) clamp(14px,1.9vw,30px); border-radius:2px;
  font-family:var(--ds-font-ui); font-weight:600; font-size:clamp(13px,1.05vw,15px); line-height:1;
  letter-spacing:.005em;
  color:var(--ds-text-primary); text-decoration:none; white-space:nowrap;
  position:relative; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:background var(--ds-dur-fast) var(--ds-ease-authority),
             color var(--ds-dur-fast) var(--ds-ease-authority),
             box-shadow var(--ds-dur-fast) var(--ds-ease-authority);
}
.mn-seg__lb{ display:inline-block; line-height:1; }
.mn-seg__mark{ display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; flex:none; }
.mn-seg__mark svg{ width:16px; height:16px; display:block; }
.mn-seg__caret{ width:10px; height:10px; flex:none; opacity:.5; display:block;
  transition:transform var(--ds-dur) var(--ds-ease-authority), opacity var(--ds-dur-fast); }

/* hover + open (button raised out of the track) */
.mn-seg__btn:hover{ background:var(--ds-color-white); color:var(--ds-color-green-deep);
  box-shadow:0 1px 2px var(--ds-color-ink-a06), 0 4px 12px var(--ds-color-ink-a06); }
.mn-seg__btn.is-open{ background:var(--ds-color-white); color:var(--ds-color-green-deep);
  box-shadow:0 1px 2px var(--ds-color-ink-a06), 0 6px 16px var(--ds-color-ink-a10); }
.mn-seg__btn.is-open .mn-seg__caret{ transform:rotate(180deg); opacity:.85; }

/* pressed = current page (active / visited state) */
.mn-seg__btn.is-current,
.mn-seg__btn.is-current:hover{
  background:var(--ds-color-green-deep); color:var(--ds-color-bone);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.40), inset 0 -1px 0 rgba(255,255,255,.06);
}
.mn-seg__btn.is-current .mn-seg__caret{ opacity:.8; }

.mn-seg__btn:focus-visible{ outline:2px solid var(--ds-focus-ring); outline-offset:3px; }

/* ---- right cluster ---------------------------------------------------- */
.mn-right{ justify-self:end; display:inline-flex; align-items:center; gap:clamp(9px,1.2vw,16px); }
.mn-cta{
  display:inline-flex; align-items:center; gap:clamp(6px,0.7vw,9px);
  padding:clamp(11px,1.1vw,15px) clamp(15px,1.8vw,26px); border-radius:2px;
  background:var(--ds-action-primary-bg); color:var(--ds-action-primary-text);
  font-family:var(--ds-font-ui); font-weight:700; font-size:clamp(12.5px,1vw,14px); line-height:1;
  letter-spacing:.01em; text-decoration:none; white-space:nowrap;
  box-shadow:0 3px 12px rgba(0,99,60,.18);
  transition:background var(--ds-dur-fast) var(--ds-ease-authority),
             transform var(--ds-dur-fast) var(--ds-ease-authority),
             box-shadow var(--ds-dur-fast) var(--ds-ease-authority);
}
.mn-cta:hover{ background:var(--ds-action-primary-hover-bg); transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,99,60,.26); }
.mn-cta svg{ width:15px; height:9px; flex:none; display:block; }

/* ---- burger ----------------------------------------------------------- */
.mn-burger{
  display:none; width:50px; height:50px; padding:0; border:1px solid var(--ds-border-subtle);
  border-radius:2px; background:var(--ds-color-white); cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  box-shadow:0 1px 2px var(--ds-color-ink-a06);
  transition:box-shadow var(--ds-dur-fast) var(--ds-ease-authority);
}
.mn-burger span{ display:block; width:21px; height:2px; border-radius:0;
  background:var(--ds-color-green-deep);
  transition:transform var(--ds-dur) var(--ds-ease-authority), opacity var(--ds-dur-fast); }
.nav.mn.mn-drawer-open .mn-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.mn.mn-drawer-open .mn-burger span:nth-child(2){ opacity:0; }
.nav.mn.mn-drawer-open .mn-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ======================================================================= */
/* MEGA PANEL (full-width)                                                  */
/* ======================================================================= */
.mn-mega{
  position:absolute; left:0; right:0; top:100%; z-index:2;
  background:linear-gradient(180deg, var(--ds-color-bone) 0%, var(--ds-surface-tint) 100%);
  border-top:1px solid var(--ds-border-subtle);
  border-bottom:1px solid var(--ds-border-strong);
  box-shadow:var(--ds-shadow-lift);
  opacity:0; visibility:hidden; transform:translateY(-12px); pointer-events:none;
  transition:opacity var(--ds-dur) var(--ds-ease-authority),
             transform var(--ds-dur) var(--ds-ease-authority),
             visibility 0s linear var(--ds-dur);
}
.nav.mn.mn-open .mn-mega{
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
  transition-delay:0s, 0s, 0s;
}
.mn-mega__inner{ padding:clamp(44px,4vw,64px) 0 clamp(48px,4.4vw,68px); }

.mn-panel{ display:none; grid-template-columns:332px 1fr; gap:clamp(40px,4vw,72px); align-items:start; }
.mn-panel.is-active{ display:grid; animation:mnPanelIn .42s var(--ds-ease-authority) both; }
@keyframes mnPanelIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* aside intro */
.mn-panel__aside{ display:flex; flex-direction:column; align-items:flex-start;
  padding-right:clamp(8px,2vw,36px); border-right:1px solid var(--ds-border-subtle);
  min-height:220px; }
.mn-panel__eyebrow{ font-family:var(--ds-font-ui); font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ds-color-copper-ink);
  line-height:1; }
.mn-panel__title{ font-family:var(--ds-font-display); font-weight:700; font-size:27px;
  line-height:1.18; letter-spacing:-.015em; color:var(--ds-color-green-deep); margin:18px 0 0;
  text-wrap:balance; }
.mn-panel__lead{ font-family:var(--ds-font-body); font-size:14.5px; line-height:1.62;
  color:var(--ds-text-secondary); margin:18px 0 0; max-width:34ch; }
.mn-panel__cta{ display:inline-flex; align-items:center; gap:9px; margin-top:auto;
  padding-top:28px; font-family:var(--ds-font-ui); font-weight:700; font-size:14px;
  letter-spacing:.01em; color:var(--ds-color-green); text-decoration:none;
  transition:color var(--ds-dur-fast) var(--ds-ease-authority); }
.mn-panel__cta svg{ width:16px; height:10px; flex:none; display:block;
  transition:transform var(--ds-dur-fast) var(--ds-ease-authority); }
.mn-panel__cta:hover{ color:var(--ds-color-copper-ink); }
.mn-panel__cta:hover svg{ transform:translateX(4px); }

/* card grid */
.mn-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(244px, 1fr)); gap:20px; }

.mn-card{
  display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:16px; padding:26px 26px 24px;
  border:1px solid var(--ds-border-subtle); border-radius:2px;
  background:var(--ds-surface-raised); text-decoration:none; position:relative; overflow:hidden;
  transition:transform var(--ds-dur-fast) var(--ds-ease-authority),
             box-shadow var(--ds-dur-fast) var(--ds-ease-authority),
             background var(--ds-dur-fast) var(--ds-ease-authority),
             border-color var(--ds-dur-fast) var(--ds-ease-authority);
}
/* premium hover: soft all-round elevation, faint sage wash, thin copper edge */
.mn-card:hover{ transform:translateY(-3px);
  background:color-mix(in srgb, var(--ds-color-sage) 40%, var(--ds-color-white));
  border-color:color-mix(in srgb, var(--ds-color-copper) 48%, transparent);
  box-shadow:0 4px 14px rgba(30,44,36,.07), 0 14px 34px rgba(30,44,36,.09); }
.mn-card:focus-visible{ outline:2px solid var(--ds-focus-ring); outline-offset:2px; }

.mn-card__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mn-card__no{ font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:11px;
  font-weight:600; letter-spacing:.08em; line-height:1; color:var(--ds-color-copper-ink);
  font-variant-numeric:tabular-nums; }
.mn-card__tag{ display:inline-flex; align-items:center; font-family:var(--ds-font-ui);
  font-size:9.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; line-height:1;
  color:var(--ds-color-green-deep);
  background:var(--ds-color-green-50); border:1px solid var(--ds-color-green-100);
  border-radius:2px; padding:5px 9px; white-space:nowrap; }
.mn-card.is-feat .mn-card__tag{ color:var(--ds-color-copper-ink);
  background:var(--ds-color-copper-50); border-color:var(--ds-color-copper-200); }
.mn-card__t{ font-family:var(--ds-font-display); font-weight:600; font-size:17px;
  line-height:1.26; letter-spacing:-.01em; color:var(--ds-color-green-deep); margin:0; }
.mn-card__d{ font-family:var(--ds-font-body); font-size:13px; line-height:1.55;
  color:var(--ds-text-secondary); }
.mn-card__arrow{ width:16px; height:16px; flex:none; display:block;
  color:var(--ds-color-copper); opacity:1;
  transition:color var(--ds-dur-fast) var(--ds-ease-authority); }
.mn-card:hover .mn-card__arrow{ color:var(--ds-color-green-deep); }

/* ======================================================================= */
/* MOBILE DRAWER                                                            */
/* ======================================================================= */
/* drawer is relocated to <body> by meganav.js so the nav's backdrop-filter
   doesn't make it a fixed-positioning containing block (which clipped it). */
.mn-drawer{
  position:fixed; inset:0; z-index:55; overflow-y:auto;
  padding:calc(env(safe-area-inset-top, 0px) + 96px) clamp(22px,6vw,48px) 56px;
  background:linear-gradient(180deg, var(--ds-color-bone) 0%, var(--ds-surface-tint) 100%);
  opacity:0; visibility:hidden; transform:translateY(-2%);
  transition:opacity var(--ds-dur) var(--ds-ease-authority),
             transform var(--ds-dur) var(--ds-ease-authority),
             visibility 0s linear var(--ds-dur);
}
.mn-drawer.is-open{ opacity:1; visibility:visible; transform:none;
  transition-delay:0s, 0s, 0s; }

/* one flex column → uniform spacing between every panel row */
.mn-drawer__inner{ max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:9px; }

.mn-acc{ display:flex; flex-direction:column; }
/* drawer rows mirror the desktop segmented control: raised buttons, current = pressed green */
.mn-acc__head, .mn-drawer__link{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 18px; border-radius:2px; cursor:pointer; text-align:left;
  background:var(--ds-color-white); border:1px solid var(--ds-border-subtle);
  box-shadow:0 1px 2px var(--ds-color-ink-a06);
  font-family:var(--ds-font-display); font-weight:700; font-size:17px; letter-spacing:-.01em;
  line-height:1; color:var(--ds-color-green-deep); text-decoration:none;
  transition:background var(--ds-dur-fast) var(--ds-ease-authority),
             color var(--ds-dur-fast) var(--ds-ease-authority),
             box-shadow var(--ds-dur-fast) var(--ds-ease-authority); }
.mn-acc__head > span:first-child, .mn-drawer__link > span:first-child{ display:inline-block; }
.mn-acc__head:hover, .mn-drawer__link:hover{ box-shadow:0 2px 5px var(--ds-color-ink-a06), 0 8px 18px var(--ds-color-ink-a06); }
.mn-acc.is-current > .mn-acc__head,
.mn-drawer__link.is-current{
  background:var(--ds-color-green-deep); color:var(--ds-color-bone);
  border-color:var(--ds-color-green-deep);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.34); }

/* one consistent icon box for BOTH the chevron and the right-arrows */
.mn-acc__caret, .mn-drawer__link svg, .mn-acc__visit svg{
  width:16px; height:16px; flex:none; display:block; }
.mn-acc__caret{ color:var(--ds-color-copper-ink);
  transition:transform var(--ds-dur) var(--ds-ease-authority); }
.mn-acc.is-current > .mn-acc__head .mn-acc__caret{ color:var(--ds-color-copper-light); }
.mn-acc.is-open .mn-acc__head .mn-acc__caret{ transform:rotate(180deg); }
.mn-drawer__link svg{ color:var(--ds-color-copper-ink); }
.mn-drawer__link.is-current svg{ color:var(--ds-color-copper-light); }

.mn-acc__body{ display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--ds-dur) var(--ds-ease-authority); }
.mn-acc.is-open .mn-acc__body{ grid-template-rows:1fr; }
/* nested content is inset to the right + carries a hierarchy rule down its edge */
.mn-acc__bodyin{ min-height:0; overflow:hidden;
  margin-left:20px; padding:0 0 0 18px;   /* NO vertical padding: keeps the collapsed row at 0 height so gaps stay uniform. Open-state breathing room lives on the children below (clipped when closed). */
  border-left:2px solid var(--ds-color-green-100); }
.mn-acc__visit{ display:inline-flex; align-items:center; gap:8px; margin:8px 0 8px;
  font-family:var(--ds-font-ui); font-weight:700; font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ds-color-green); text-decoration:none; }
.mn-acc__visit svg{ color:var(--ds-color-green); }

/* nested sub-links: compact text rows, ~half the weight of a top-level item
   (scoped to .mn-drawer so the desktop mega cards are untouched) */
.mn-acc__body .mn-cards{ grid-template-columns:1fr; gap:0; padding-bottom:2px; }
.mn-drawer .mn-acc__body .mn-card{
  padding:9px 10px; gap:12px; border:0; border-radius:3px;
  background:transparent; box-shadow:none; transform:none; }
.mn-drawer .mn-acc__body .mn-card:hover{
  transform:none; box-shadow:none; border-color:transparent;
  background:var(--ds-color-green-50); }
.mn-drawer .mn-acc__body .mn-card__t{ font-family:var(--ds-font-display);
  font-size:14px; font-weight:500; line-height:1.3; letter-spacing:0; }
.mn-drawer .mn-acc__body .mn-card__arrow{ width:13px; height:13px; }

.mn-drawer__cta{ margin-top:20px; display:inline-flex; align-items:center; justify-content:center;
  gap:10px; width:100%; padding:20px 24px; border-radius:2px;
  background:var(--ds-action-primary-bg); color:var(--ds-action-primary-text);
  font-family:var(--ds-font-ui); font-weight:700; font-size:16px; letter-spacing:.01em;
  text-decoration:none; box-shadow:0 6px 18px rgba(0,99,60,.22); }

/* ======================================================================= */
/* RESPONSIVE                                                               */
/* ======================================================================= */
@media (min-width:981px){ .mn-drawer{ display:none; } }

/* 980-1460px: the segmented control, CTA, and logo scale fluidly via clamp()
   in the base rules above, so the nav never crowds the logo. */
@media (max-width:980px){
  .mn-bar{ grid-template-columns:1fr auto; min-height:84px; gap:18px; }
  .nav.mn .brand-logo{ height:68px; }   /* bigger logo on tablet */
  .mn-seg, .mn-cta, .mn-mega{ display:none; }
  .mn-burger{ display:inline-flex; }
}
@media (max-width:560px){
  .mn-bar{ min-height:76px; }
  .nav.mn .brand-logo{ height:60px; }   /* bigger logo on mobile */
}

@media (prefers-reduced-motion:reduce){
  .mn-mega, .mn-drawer, .mn-panel.is-active, .mn-card, .mn-card__arrow,
  .mn-seg__btn, .mn-acc__body{ transition:none !important; animation:none !important; }
}

/* ---- footer legal line (replaces the draft / designer block) ---------- */
.site-foot__copy{ font-family:var(--ds-font-ui); font-size:13px; font-weight:500;
  color:rgba(255,245,233,.6); letter-spacing:.01em; max-width:50vw; }
.site-foot__copylink{ display:inline-flex; align-items:center; gap:8px;
  font-family:var(--ds-font-ui); font-weight:700; font-size:13px; text-decoration:none;
  color:var(--ds-color-copper-light);
  transition:color var(--ds-dur-fast) var(--ds-ease-authority); }
.site-foot__copylink svg{ width:15px; height:9px; flex:none; display:block; }
.site-foot__copylink:hover{ color:var(--ds-color-bone); }

/* ======================================================================= */
/* GREEN STEP-FLOW PANEL · on-brand ambient shader (reuses .cta_bg / cta-bg.js) */
/* ======================================================================= */
.page-industries .ib-flow{ isolation:isolate; }
.page-industries .ib-flow .cta_bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.85; mix-blend-mode:screen;
}
.page-industries .ib-flow > .ib__k,
.page-industries .ib-flow > .ib-flow__steps{ position:relative; z-index:1; }


/* 2026-07-07: nav "Book a demo" CTA matches the enlarged button / nav-seg height on desktop */
@media(min-width:881px){
  .mn-cta{ min-height:58px; padding-top:0; padding-bottom:0; }
}