/* ── RESET & TOKENS ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:    #060E1F;
  --navy2:   #0B1829;
  --navy3:   #0F2240;
  --blue:    #0063CC;
  --blue2:   #0077F5;
  --blue3:   #3395FF;
  --gold:    #D4A853;
  --white:   #FFFFFF;
  --off:     #F4F6FA;
  --off2:    #EEF2F8;
  --muted:   #8A97B0;
  --border:  rgba(255,255,255,0.08);
  --border2: rgba(255,255,255,0.15);
  --text:    #1A2540;
  --textm:   #4A5568;
  --textl:   #7A8599;
  --card-border: rgba(0,0,0,0.07);

  /* Tints — badge/status backgrounds reused across page CSS files */
  --tint-blue:        #EEF4FF;
  --tint-blue-2:      #DBEAFE;
  --tint-amber:       #FFF8ED;
  --tint-amber-2:     #FEF3C7;
  --tint-amber-text:  #7A4B00;
  --tint-green:       #F0FDF4;
  --tint-green-2:     #DCFCE7;
  --tint-green-text:  #0A6640;
  --tint-purple:      #F5F3FF;
  --tint-purple-text: #5B21B6;
  --tint-teal:        #EAFAF8;
  --tint-teal-text:   #0F6B66;
  --success-bg:       #EEF9F1;
  --success-border:   #9ED8AD;
  --success-text:     #1A5C2A;
  --error-text:       #7F1D1D;
  --grid-line:        #eef1f7;

  --ff-head: 'Space Grotesk', sans-serif;
  --ff-body: 'DM Sans', sans-serif;
  --radius:  14px;
  --radius-sm: 8px;
}

@view-transition { navigation: auto; }

html { scroll-behavior: smooth; }
body { font-family: var(--ff-body); color: var(--text); background: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
#page-overlay { position: fixed; inset: 0; z-index: 9999; background: var(--navy); opacity: 1; transition: opacity 0.2s ease; pointer-events: none; }

/* Hero content enters after overlay fades */
@keyframes heroEnter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-hero-inner > * {
  animation: heroEnter 0.5s ease forwards;
  opacity: 0;
}
.page-hero-inner > *:nth-child(1) { animation-delay: 0.18s; }
.page-hero-inner > *:nth-child(2) { animation-delay: 0.26s; }
.page-hero-inner > *:nth-child(3) { animation-delay: 0.34s; }
.page-hero-inner > *:nth-child(4) { animation-delay: 0.42s; }
img { max-width: 100%; display: block; }
a { text-decoration: none; }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 5%; height: 68px;
  background: rgba(6,14,31,0.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo-img { height: 40px; width: auto; flex-shrink: 0; }
.nav-links { display: flex; gap: 28px; list-style: none; }
.nav-links a { font-size: 13.5px; font-weight: 400; color: rgba(255,255,255,.65); transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-cta {
  padding: 9px 22px; border-radius: 6px;
  background: var(--blue2); color: #fff !important;
  font-size: 13px; font-weight: 500;
  transition: background .2s, transform .15s;
}
.nav-cta:hover { background: var(--blue3) !important; transform: translateY(-1px); }

/* ── NAV DROPDOWN ── */
.has-dropdown { position: relative; }
.dd-caret { margin-left: 3px; vertical-align: middle; transition: transform .2s ease; }
.has-dropdown:hover .dd-caret, .has-dropdown:focus-within .dd-caret { transform: rotate(180deg); }
.nav-submenu {
  position: absolute; top: calc(100% + 10px); left: -16px;
  list-style: none; background: rgba(6,14,31,.98); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 6px 0; min-width: 176px; z-index: 300;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .18s ease, visibility .18s, transform .18s ease;
}
.has-dropdown:hover .nav-submenu, .has-dropdown:focus-within .nav-submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-submenu li { border-bottom: none !important; }
.nav-submenu a {
  display: flex !important; align-items: center; gap: 8px;
  padding: 9px 16px !important; font-size: 13px !important;
  color: rgba(255,255,255,.7) !important; white-space: nowrap;
}
.nav-submenu a:hover { color: #fff !important; background: rgba(255,255,255,.06); }
/* Mobile-only accordion toggle + panel — hidden by default so it doesn't leak
   into the desktop layout (only the ≤960px query below makes them visible;
   their children collapse with them since display:none hides descendants
   regardless of the children's own display values). */
.nav-acc-btn, .nav-acc-panel { display: none; }

/* ── NAV MEGA MENU (Industries) ── */
.nav-mega-panel {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: rgba(6,14,31,.98); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 20px; width: 640px; max-width: calc(100vw - 40px);
  z-index: 300; opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility .18s, transform .18s ease;
}
.has-dropdown.nav-mega:hover .nav-mega-panel,
.has-dropdown.nav-mega:focus-within .nav-mega-panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.nav-mega-item { display: flex !important; gap: 10px; align-items: flex-start; padding: 12px !important; border-radius: 10px; height: auto !important; white-space: normal !important; transition: background .15s; }
.nav-mega-item:hover { background: rgba(255,255,255,.06); }
.nav-mega-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; color: var(--blue3); flex-shrink: 0; }
.nav-mega-title { font-size: 12.5px; font-weight: 600; color: #fff; margin-bottom: 3px; }
.nav-mega-desc { font-size: 11px; font-weight: 300; line-height: 1.45; color: rgba(255,255,255,.55); }

/* Masked/disabled nav item — visible but non-interactive (e.g. Insights > Blogs
   before the client has any published blog content). */
.nav-mega-item.disabled { cursor: default; opacity: .55; }
.nav-mega-item.disabled:hover { background: none; }
.nav-mega-item.disabled .nav-mega-icon { color: rgba(255,255,255,.35); }
.nav-mega-badge { font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); border-radius: 4px; padding: 2px 6px; margin-left: 6px; }

/* Shared wider 2-column mega-panel format — full item names (Agriculture &
   Agribusiness, Distribution & Wholesale, Professional & Technology Outsourcing...)
   fit on one line and descriptions wrap cleanly to 2 lines instead of looking
   cramped in the default 4-col grid. Used by Industries, Home, Who We Are and
   Insights, and by the detail side of the Solutions split panel below. */
.nav-mega-panel-2col { width: 560px; }
.nav-mega-grid-2col { grid-template-columns: repeat(2, 1fr); }
.nav-mega-grid-2col .nav-mega-item.disabled { grid-column: 1 / -1; }

/* Option A — fixed height so every dropdown panel reads as the same size
   regardless of item count. Shorter menus just leave quiet empty space below
   their last row instead of shrinking the panel; content stays top-aligned
   (grid default align-content: start). 350px comfortably fits the tallest
   current panel (4 rows, 2-line descriptions) — if a future menu's copy runs
   long enough to wrap to 3 lines and clip, raise this value rather than
   fighting it item-by-item. Applies to both the 2-col format and the
   Solutions split panel so every dropdown in the nav stays the same height. */
.nav-mega-panel-2col, .nav-mega-panel-split { min-height: 350px; }

@media (max-width: 1180px) {
  .nav-mega-panel-2col { width: 420px; }
  .nav-mega-panel-2col, .nav-mega-panel-split { min-height: 380px; }
}

/* ── SOLUTIONS SPLIT PANEL ── */
/* Left 30% lists the 5 solutions; right 70% previews that solution's on-page
   sections. Hovering a left item swaps the right side via :has() — no JS.
   Panel keeps the standard .nav-mega-panel background/position/hover-fade;
   only layout is overridden here. */
.nav-mega-panel-split { width: 720px; padding: 0; }
/* Matches the panel's own min-height (below) rather than just relying on
   .nav-split-left's natural content height. Needed for menus where the left
   list is short (e.g. 3 rows) but a given row's right-side detail is long
   (e.g. 8 items) — without this, .nav-split-detail's top:0/bottom:0 (further
   down) would only have the ~3-row-tall .nav-split-left height to stretch
   across, squeezing tall detail content into a small scrolling box. */
.nav-split { position: relative; min-height: 350px; }
.nav-split-left { width: 30%; padding: 14px 0; border-right: 1px solid rgba(255,255,255,.1); box-sizing: border-box; }

/* Each row holds one left-side link AND its right-side detail together, so
   .nav-split-detail is a DOM descendant of .nav-split-row rather than a
   distant sibling matched by position. That's the fix: :hover applies to an
   element whenever the pointer is over it OR any descendant, so moving the
   mouse from the link into the (visually relocated, absolutely-positioned)
   detail panel to click a section link keeps the row "hovered" the whole
   way — it no longer snaps back to the first item mid-move. Rows themselves
   stay position: static — .nav-split-detail's absolute positioning must
   resolve against .nav-split (the whole panel), not its own row, or it
   would be squeezed into the row's narrow 30%-wide box instead of spanning
   the right 70% of the panel. */
.nav-split-item {
  display: block; padding: 11px 16px; font-size: 13px;
  color: rgba(255,255,255,.6); border-left: 2px solid transparent;
  transition: background .15s, color .15s;
}
.nav-split-row:hover .nav-split-item {
  color: #fff; text-decoration: underline;
  background: rgba(255,255,255,.06); border-left-color: var(--blue3);
}
/* top+bottom (not a fixed/auto height) stretches every detail panel to span
   the FULL height of .nav-split-left, regardless of how many lines its own
   content wraps to. This matters for longer lists (e.g. 8 industries): a
   row's detail is only "reachable" without a hover-drop if it covers that
   row's own vertical position too, not just its own content's height. Without
   this, a row near the bottom of a tall list (e.g. the last item) could sit
   below a shorter detail panel's bottom edge — moving the mouse into that gap
   briefly hovers nothing, the :first-child fallback below jumps in to show
   the first item's panel, and because that panel is a DOM descendant of the
   first row, the cursor landing on it then locks hover onto the first item
   instead of the one actually being reached for. */
.nav-split-detail {
  display: none; position: absolute; top: 0; bottom: 0; right: 0; width: 70%;
  padding: 16px; box-sizing: border-box; overflow-y: auto;
}
.nav-split-row:hover .nav-split-detail { display: block; }
.nav-split-left:not(:has(.nav-split-row:hover)) .nav-split-row:first-child .nav-split-detail { display: block; }

@media (max-width: 1180px) {
  .nav-mega-panel-split { width: 560px; }
  .nav-split { min-height: 380px; }
}

/* For nav items positioned close to the left edge (Home, Who We Are), a
   centered panel spills off the left edge of the viewport, so anchor it to
   the trigger's own left edge instead. Position-only override — width/columns
   come from whichever .nav-mega-panel-2col / .nav-mega-panel-split class it's
   combined with. Apply this to any future nav item that sits early in the bar
   and uses a wide panel. */
/* Baseline is flush-left (left:0 — panel's left edge starts at the trigger's
   own left edge, confirmed in devtools to keep both Home and Who We Are
   fully on-screen at normal viewport widths). translateX(-30%) then nudges
   the panel an additional 30% of ITS OWN width further left from that
   baseline — NOT 30% on top of centered position, which for edge-positioned
   triggers compounds into most of the panel rendering off-screen (verified:
   translateX(-80%) put Home's panel 175px into negative territory). */
.nav-mega-panel-left { left: 0; transform: translateX(-30%) translateY(-4px); }
.has-dropdown.nav-mega:hover .nav-mega-panel-left,
.has-dropdown.nav-mega:focus-within .nav-mega-panel-left {
  transform: translateX(-30%) translateY(0);
}

@media (max-width: 1180px) {
  .nav-mega-panel { width: 420px; }
  .nav-mega-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .dd-caret { display: none; }
  .nav-submenu { display: none !important; }
  .nav-mega-panel { display: none !important; }
}

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  background: var(--navy);
  padding: 130px 5% 72px;
  position: relative; overflow: hidden;
}
.page-hero-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(0,119,245,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,119,245,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, black 30%, transparent 100%);
}
.page-hero-glow {
  position: absolute; top: -150px; left: 50%; transform: translateX(-50%);
  width: 700px; height: 500px;
  background: radial-gradient(ellipse, rgba(0,99,204,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; }
.page-hero-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; border-radius: 20px;
  border: 1px solid rgba(0,119,245,0.35);
  background: rgba(0,119,245,0.08);
  font-size: 11px; font-weight: 600; color: var(--blue3);
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 20px;
}
.page-hero h1 {
  font-family: var(--ff-head); font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 800; line-height: 1.08; letter-spacing: -.03em;
  color: #fff; max-width: 760px; margin-bottom: 18px;
}
.page-hero h1 em { font-style: normal; color: var(--blue3); }
.page-hero p {
  font-size: clamp(15px, 1.5vw, 17px); font-weight: 300; line-height: 1.7;
  color: rgba(255,255,255,.78); max-width: 520px;
}

/* ── SHARED SECTION ── */
section { padding: 88px 5%; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-label {
  font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue2); margin-bottom: 12px;
}
.section-title {
  font-family: var(--ff-head); font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.12;
  color: var(--text); margin-bottom: 14px;
}
.section-title.light { color: #fff; }
.section-sub {
  font-size: 16px; font-weight: 300; line-height: 1.7;
  color: var(--textm); max-width: 540px;
}
.section-sub.light { color: rgba(255,255,255,.58); }
.section-head { margin-bottom: 48px; }
.section-head-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 20px; margin-bottom: 48px; }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 7px; font-weight: 500; font-size: 14px; transition: all .18s; cursor: pointer; border: none; }
.btn-primary { padding: 12px 26px; background: var(--blue2); color: #fff; }
.btn-primary:hover { background: var(--blue3); transform: translateY(-2px); }
.btn-secondary { padding: 12px 26px; border: 1px solid var(--border2); color: rgba(255,255,255,.8); background: transparent; }
.btn-secondary:hover { border-color: rgba(255,255,255,.4); color: #fff; }
.btn-outline { padding: 11px 24px; border: 1px solid var(--card-border); color: var(--text); background: transparent; }
.btn-outline:hover { border-color: var(--blue2); color: var(--blue2); }
.btn-sm { padding: 8px 18px; font-size: 13px; }

/* ── CARDS ── */
.card {
  background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--card-border);
  transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); }
.card-dark {
  background: rgba(255,255,255,0.04); border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: background .2s, border-color .2s;
}
.card-dark:hover { background: rgba(0,119,245,0.09); border-color: rgba(0,119,245,0.35); }

/* ── TAG / BADGE ── */
.tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; }
.tag-blue { background: #EEF4FF; color: var(--blue2); }
.tag-green { background: #EDFAF3; color: #0A6640; }
.tag-amber { background: #FFF8ED; color: #7A4B00; }
.tag-dark { background: rgba(0,119,245,0.12); color: var(--blue3); border: 1px solid rgba(0,119,245,0.25); }

/* ── CTA BAND ── */
.cta-band {
  background: linear-gradient(rgba(15,34,64,.84) 0%,rgba(15,34,64,.92) 100%),url('https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
  padding: 80px 5%;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  text-align: center;
}
.cta-band h2 { font-family: var(--ff-head); font-size: clamp(24px, 3.2vw, 42px); font-weight: 800; color: #fff; letter-spacing: -.03em; margin-bottom: 14px; }
.cta-band h2 em { font-style: normal; color: var(--blue3); }
.cta-band p { font-size: 16px; font-weight: 300; color: rgba(255,255,255,.58); margin-bottom: 34px; max-width: 500px; margin-left: auto; margin-right: auto; }
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── FOOTER ── */
footer { background: var(--navy); padding: 64px 5% 32px; border-top: 1px solid var(--border); }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer-about .nav-logo-img { height: 46px; }
.footer-about p { font-size: 13px; font-weight: 300; line-height: 1.7; color: var(--muted); margin-top: 14px; max-width: 270px; }
.footer-col h4 { font-family: var(--ff-head); font-size: 11px; font-weight: 700; color: rgba(255,255,255,.4); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 13px; font-weight: 300; color: var(--muted); transition: color .18s; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 12px; }
.footer-copy { font-size: 12px; color: rgba(255,255,255,.2); }
.footer-sap-badge { height: 56px; width: auto; display: block; margin-top: 20px; }

/* ── ANIMATIONS ── */
.fade-up { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up:nth-child(2) { transition-delay: .08s; }
.fade-up:nth-child(3) { transition-delay: .16s; }
.fade-up:nth-child(4) { transition-delay: .24s; }

/* ── SAP GOLD PARTNER BADGE ── */
.nav-right {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.sap-gp-badge {
  display: flex; align-items: center; flex-shrink: 0;
}
.sap-gp-badge .sap-gp-img {
  height: 44px; width: auto; display: block;
}
.sap-mark-sm {
  display: inline-flex; align-items: center; justify-content: center;
  background: #0070BD; color: #fff; font-size: 9px; font-weight: 800;
  border-radius: 3px; padding: 2px 5px; letter-spacing: -0.2px; flex-shrink: 0;
}
@media (max-width: 600px) {
  .sap-gp-badge .sap-gp-img { height: 34px; }
}

/* ── LANGUAGE SWITCHER ── */
.lang-switcher {
  display: flex; align-items: center; gap: 1px;
  flex-shrink: 0; margin-right: 6px;
}
.lang-btn {
  background: none; border: none; border-bottom: 1.5px solid transparent;
  cursor: pointer; padding: 4px 6px; line-height: 1;
  font-family: var(--ff-body); font-size: 11.5px; font-weight: 400;
  color: var(--muted); letter-spacing: .06em; text-transform: uppercase;
  transition: color .18s, border-color .18s;
}
.lang-btn:hover { color: #fff; }
.lang-btn.active { color: var(--blue3); border-bottom-color: var(--blue3); }
.lang-sep {
  font-size: 10px; line-height: 1; color: rgba(255,255,255,.18);
  user-select: none; pointer-events: none; padding: 0 1px;
}

/* ── HAMBURGER ── */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  cursor: pointer; padding: 8px; background: none; border: none; flex-shrink: 0;
}
.nav-burger span {
  display: block; width: 22px; height: 2px;
  background: rgba(255,255,255,.8); border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .nav-burger { display: flex; }
  .nav-links {
    display: none; position: fixed; top: 68px; left: 0; right: 0;
    background: rgba(6,14,31,.98); backdrop-filter: blur(20px);
    flex-direction: column; padding: 16px 5% 28px; gap: 0;
    border-bottom: 1px solid var(--border); z-index: 199;
    /* Was unbounded height, so on a long open menu the bottom of the list
       rendered off-screen with no way to reach it — position:fixed doesn't
       get a scrollbar for free. Cap it to the remaining viewport height
       below the header and let it scroll internally instead. */
    max-height: calc(100vh - 68px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .nav-links.open { display: flex; }
  .nav-links li { border-bottom: 1px solid var(--border); }
  .nav-links li:last-child { border-bottom: none; margin-top: 12px; }
  .nav-links a { display: block; font-size: 15px; padding: 14px 0; color: rgba(255,255,255,.75); }
  .nav-links .nav-cta { display: inline-flex; margin-top: 4px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .section-head-row { flex-direction: column; align-items: flex-start; }
}

/* ── MOBILE NESTED ACCORDION ── */
/* Replaces the old flat .nav-sub-item fallback list. Each rich dropdown gets
   a toggle button (chevron) next to its top-level link; tapping it expands
   a panel in place. For the 3-level menus (Who We Are, Solutions, Industries)
   each category inside that panel is its OWN nested toggle+panel, one level
   further indented. JS (shared.js) closes sibling panels on open, so only
   one branch is ever expanded at a time — keeps the scroll manageable even
   for Industries' 8 categories x 5 sections. The top-level <a> keeps working
   as a real link to that section's own page; the chevron button is a
   separate tap target purely for expand/collapse. */
@media (max-width: 960px) {
  .has-dropdown.nav-mega { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .has-dropdown.nav-mega > a { flex: 1; }

  .nav-acc-btn {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0;
    background: none; border: none; color: rgba(255,255,255,.5); cursor: pointer;
  }
  .nav-acc-btn svg { transition: transform .2s ease; }
  .nav-acc-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

  .nav-acc-panel { display: block; width: 100%; max-height: 0; overflow: hidden; transition: max-height .25s ease; }
  .nav-acc-panel.open { max-height: 2000px; }
  /* Plain leaf links directly inside a 2-level panel (Home, Insights) — same
     size/weight as a category row (below) so all 5 accordions read as one
     consistent style instead of some being icon+description and others
     plain text. */
  .nav-acc-panel > a {
    display: block; padding: 12px 0 12px 8px; font-size: 14px;
    color: rgba(255,255,255,.8); border-top: 1px solid rgba(255,255,255,.06);
  }
  .nav-acc-panel > span.disabled {
    display: block; padding: 12px 0 12px 8px; font-size: 14px;
    color: rgba(255,255,255,.35); border-top: 1px solid rgba(255,255,255,.06);
    cursor: default;
  }
  .nav-acc-panel > span.disabled em { font-style: normal; font-size: 12px; }

  .nav-acc-cat-row {
    display: flex; align-items: center; justify-content: space-between;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .nav-acc-cat-row a { flex: 1; padding: 12px 0 12px 8px; font-size: 14px; color: rgba(255,255,255,.8); }
  .nav-acc-cat-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0;
    background: none; border: none; color: rgba(255,255,255,.4); cursor: pointer;
  }
  .nav-acc-cat-btn svg { transition: transform .2s ease; }
  .nav-acc-cat-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

  .nav-acc-section-panel { width: 100%; max-height: 0; overflow: hidden; transition: max-height .2s ease; }
  .nav-acc-section-panel.open { max-height: 600px; }
  .nav-acc-section-panel a { display: block; padding: 9px 0 9px 28px; font-size: 13px; color: rgba(255,255,255,.5); }
}
@media (max-width: 600px) {
  section { padding: 56px 5%; }
  .page-hero { padding: 100px 5% 52px; }
  .page-hero h1 { font-size: clamp(28px, 7vw, 38px); }
  .footer-top { grid-template-columns: 1fr; gap: 28px; margin-bottom: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cta-band { padding: 56px 5%; }
  .cta-band h2 { font-size: clamp(22px, 6vw, 32px); }
  .btn-primary, .btn-secondary { padding: 11px 20px; font-size: 13px; }
}
/* ── MEETING MODAL ── */
.safir-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;}
.safir-modal[hidden]{display:none;}
.safir-modal-backdrop{position:absolute;inset:0;background:rgba(6,14,31,.75);backdrop-filter:blur(6px);}
.safir-modal-box{position:relative;z-index:1;width:100%;max-width:580px;max-height:90vh;overflow-y:auto;overflow-x:hidden;background:var(--navy2);border:1px solid var(--border);border-radius:var(--radius);padding:32px 40px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;scrollbar-gutter:stable;}
.safir-modal-box::-webkit-scrollbar{width:6px;}
.safir-modal-box::-webkit-scrollbar-track{background:transparent;}
.safir-modal-box::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px;}
.safir-modal-box::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3);}
.safir-modal-close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.6);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .18s,color .18s;}
.safir-modal-close:hover{background:rgba(255,255,255,.14);color:#fff;}
.safir-modal-eyebrow{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue3);margin-bottom:8px;}
.safir-modal-title{font-family:var(--ff-head);font-size:clamp(20px,3vw,24px);font-weight:700;color:#fff;letter-spacing:-.02em;margin-bottom:6px;}
.safir-modal-sub{font-size:13px;font-weight:300;color:rgba(255,255,255,.55);margin-bottom:20px;}
/* WPForms inside the dark modal */
.safir-modal-box .wpforms-container{padding:0!important;background:transparent!important;}
.safir-modal-box .wpforms-field{padding:0!important;margin-bottom:10px!important;float:none!important;}
.safir-modal-box .wpforms-field-label,.safir-modal-box .wpforms-field-label-inline{font-size:12px!important;font-weight:500!important;color:rgba(255,255,255,.65)!important;margin-bottom:4px!important;display:block!important;letter-spacing:.02em!important;}
.safir-modal-box .wpforms-required-label{color:var(--blue3)!important;}
.safir-modal-box .wpforms-field-sublabel{display:none!important;}
.safir-modal-box .wpforms-field-name .wpforms-field-row{flex-wrap:nowrap!important;}
.safir-modal-box .wpforms-field input[type="text"],
.safir-modal-box .wpforms-field input[type="email"],
.safir-modal-box .wpforms-field input[type="tel"],
.safir-modal-box .wpforms-field select,
.safir-modal-box .wpforms-field textarea{width:100%!important;padding:10px 14px!important;border-radius:7px!important;border:1px solid rgba(255,255,255,.12)!important;font-size:14px!important;font-family:var(--ff-body)!important;color:#fff!important;background:rgba(255,255,255,.07)!important;transition:border-color .18s!important;box-sizing:border-box!important;box-shadow:none!important;height:auto!important;}
.safir-modal-box .wpforms-field input::placeholder,
.safir-modal-box .wpforms-field textarea::placeholder{color:rgba(255,255,255,.25)!important;}
.safir-modal-box .wpforms-field select{appearance:none!important;cursor:pointer!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 14px center!important;padding-right:36px!important;}
.safir-modal-box .wpforms-field select option{background:var(--navy2)!important;color:#fff!important;}
.safir-modal-box .wpforms-field input:focus,
.safir-modal-box .wpforms-field select:focus,
.safir-modal-box .wpforms-field textarea:focus{outline:none!important;border-color:var(--blue2)!important;box-shadow:0 0 0 3px rgba(0,119,245,0.18)!important;}
.safir-modal-box .wpforms-field textarea{height:64px!important;resize:vertical!important;}
.safir-modal-box .wpforms-field-row{display:flex!important;gap:12px!important;}
.safir-modal-box .wpforms-field-row-block{flex:1!important;min-width:0!important;}
.safir-modal-box .wpforms-submit-container{padding:0!important;margin-top:6px!important;}
.safir-modal-box .wpforms-submit{width:100%!important;padding:13px!important;border-radius:7px!important;background:var(--blue2)!important;color:#fff!important;font-size:15px!important;font-weight:500!important;font-family:var(--ff-body)!important;border:none!important;cursor:pointer!important;transition:background .18s!important;}
.safir-modal-box .wpforms-submit:hover{background:var(--blue3)!important;}
.safir-modal-box .wpforms-confirmation-container-full{padding:14px 18px!important;border-radius:8px!important;background:rgba(0,119,245,0.1)!important;border:1px solid rgba(0,119,245,0.3)!important;color:#fff!important;font-size:14px!important;}
.safir-modal-box .wpforms-confirmation-container-full p{color:#fff!important;font-size:14px!important;margin:0!important;}
.safir-modal-box .wpforms-error{color:#FCA5A5!important;font-size:12px!important;margin-top:4px!important;}
.safir-modal-box .wpforms-field-hp{display:none!important;}
/* 2-col grid: fields 1–6 pair up (Name|Company, Email|Phone, Date|SAP), field 7 spans full width */
.safir-modal-box .wpforms-field-container{display:grid!important;grid-template-columns:1fr 1fr!important;column-gap:14px!important;}
.safir-modal-box .wpforms-field-id-7{grid-column:1/-1!important;}
@media(max-width:600px){
  .safir-modal-box{padding:28px 24px;}
  .safir-modal-box .wpforms-field-container{grid-template-columns:1fr!important;}
  .safir-modal-box .wpforms-field-id-7{grid-column:auto!important;}
}

/* ── BUSINESS-UNIT "WHY CHOOSE SAFIR" (pull-quote + commitment) ──
   Shared by Professional & Technology Outsourcing, Financial Services,
   Large Enterprise, SME Solutions, and Training pages — layout/style
   is identical across all five; only the surrounding page copy differs. */
.biz-why-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:start;}
.biz-why-cards{display:flex;flex-direction:column;gap:20px;}
.biz-quote-card{background:var(--white);border:1px solid var(--card-border);border-radius:var(--radius);padding:30px 30px;position:relative;}
.biz-quote-mark{font-family:var(--ff-head);font-size:48px;font-weight:800;color:var(--blue2);opacity:.25;line-height:1;margin-bottom:4px;}
.biz-quote-text{font-family:var(--ff-head);font-size:16px;font-weight:700;color:var(--text);line-height:1.5;letter-spacing:-.01em;margin-bottom:14px;}
.biz-quote-photo-row{display:flex;align-items:center;gap:12px;}
.biz-quote-photo{width:40px;height:40px;border-radius:50%;background:center/cover no-repeat;flex-shrink:0;}
.biz-quote-source{font-size:12px;color:var(--textm);}
.biz-quote-source strong{display:block;color:var(--text);font-size:13px;font-weight:600;}
.biz-commitment-mini{background:var(--white);border:1px solid var(--card-border);border-radius:var(--radius);padding:26px 28px;}
.biz-commitment-mini-label{font-family:var(--ff-head);font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:9px;}
.biz-commitment-mini-label svg{color:var(--blue2);flex-shrink:0;}
.biz-commitment-mini-body{font-size:12.5px;font-weight:300;line-height:1.65;color:var(--textm);}
.biz-commitment-mini-body p{margin-bottom:10px;}
.biz-commitment-mini-body p:last-child{margin-bottom:0;}
@media(max-width:960px){
  .biz-why-grid{grid-template-columns:1fr;gap:32px;}
}

@media (max-width: 400px) {
  section { padding: 48px 4%; }
  .page-hero { padding: 92px 4% 44px; }
  .page-hero h1 { font-size: clamp(24px, 7.5vw, 32px); }
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}