/* ============================================================
   OlympusTech — shared design system (site.css)
   Single source of truth for tokens + site chrome (top bar, nav,
   dropdowns, mobile drawer, footer, announcement bar, buttons,
   reveal animation, responsive chrome). Loaded on every page after
   the page's own <style>, so it overrides any legacy inline copies.
   Change the look here once → every page updates.
   ============================================================ */

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

:root {
  --black:  #0d1017;
  --white:  #f5f5f3;
  --blue:   #0071BC;
  --orange: #F7931E;
  --neon:   #00b3ff;
  --navy:   #003C5E;
  --accent: #F7931E;
  --muted:  rgba(245,245,243,0.45);
  --border-d: rgba(255,255,255,0.1);
  --border-l: rgba(0,0,0,0.1);
  --edge: max(48px, calc((100% - 1500px) / 2));
}
html { scroll-behavior: smooth; }
/* Guard against horizontal scroll on mobile: body overflow-x alone doesn't stop
   the root element scrolling when a transform/full-bleed spills past the viewport. */
html { overflow-x: hidden; }
body { background: var(--black); color: var(--white); font-family: 'Inter', sans-serif; overflow-x: hidden; }

/* ── TOP BAR ─────────────────────────────────────────── */
.top-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 201;
  height: 36px; background: rgba(0,0,0,0.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 var(--edge); gap: 20px;
}
.top-bar a {
  font-size: 0.65rem; color: rgba(255,255,255,0.55);
  text-decoration: none; letter-spacing: 0.05em;
  transition: color 0.2s; white-space: nowrap;
  display: flex; align-items: center; gap: 6px;
}
.top-bar a:hover { color: #fff; }
.tb-divider { width: 1px; height: 12px; background: rgba(255,255,255,0.2); }

/* ── NAV ─────────────────────────────────────────────── */
nav {
  position: fixed; top: 36px; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--edge); height: 68px;
  background: rgba(6,6,9,0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-d);
}
.n-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.n-logo img { height: 56px; width: auto; display: block; }
.n-links { display: flex; gap: 32px; list-style: none; }
.n-links a { font-size: 0.9rem; color: var(--muted); text-decoration: none; transition: color 0.2s; letter-spacing: 0.02em; }
.n-links a:hover { color: #fff; }
/* ── NAV DROPDOWN ────────────────────────────────────── */
.n-links li { position: relative; }
.n-has-dd > a { display: flex !important; align-items: center; gap: 5px; }
.n-chevron { flex-shrink: 0; transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); opacity: 0.4; }
.n-has-dd:hover .n-chevron { transform: rotate(180deg); opacity: 0.9; }
.n-dropdown {
  position: absolute; top: 100%; left: 0;
  min-width: 228px;
  background: rgba(6,6,9,0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-d); padding: 6px 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 0.2s;
  z-index: 300;
}
.n-has-dd:hover .n-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.16,1,0.3,1);
}
.n-dd-label {
  font-family: 'Orbitron', sans-serif; font-size: 0.54rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(255,255,255,0.2);
  padding: 10px 20px 5px; display: block;
}
.n-dd-item {
  display: block; padding: 9px 20px;
  font-size: 0.8rem; color: rgba(255,255,255,0.48);
  text-decoration: none; letter-spacing: 0.01em;
  transition: color 0.15s, background 0.15s; white-space: nowrap;
}
.n-dd-item:hover { color: #fff; background: rgba(255,255,255,0.04); }
.n-dd-divider { height: 1px; background: var(--border-d); margin: 6px 0; }
.n-links li.n-has-dd:last-of-type .n-dropdown { left: auto; right: 0; }
.drawer-sub-link {
  display: block; padding: 14px 28px 14px 48px;
  font-size: 0.85rem; color: rgba(255,255,255,0.38);
  text-decoration: none; letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 0.2s, background 0.15s;
}
.drawer-sub-link:last-child { border-bottom: none; }
.drawer-sub-link:hover { color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.03); }
.n-cta {
  display: flex; align-items: center; gap: 8px;
  background: var(--accent); color: #000;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em;
  border: none; padding: 12px 24px; cursor: pointer; transition: opacity 0.2s;
}
.n-cta:hover { opacity: 0.85; }
.n-cta svg { flex-shrink: 0; }

/* ── HAMBURGER ────────────────────────────────────────── */
#nav-toggle {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; background: none; border: none; cursor: pointer;
  padding: 8px; position: relative; z-index: 210;
}
#nav-toggle span {
  display: block; width: 24px; height: 2px; background: #fff;
  border-radius: 2px; transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.2s;
  transform-origin: center;
}
#nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
#nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── MOBILE DRAWER ────────────────────────────────────── */
#nav-drawer {
  position: fixed; top: 68px; left: 0; right: 0; bottom: 0;
  background: rgba(6,6,9,0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  z-index: 199; transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.16,1,0.3,1);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  visibility: hidden;
}
#nav-drawer.open { transform: translateX(0); visibility: visible; }
.drawer-inner { display: flex; flex-direction: column; min-height: 100%; }
.drawer-group { border-bottom: 1px solid rgba(255,255,255,0.06); }
.drawer-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; height: 60px; background: none; border: none; cursor: pointer;
  font-size: 1rem; font-weight: 700; color: rgba(255,255,255,0.55);
  letter-spacing: -0.01em; transition: color 0.2s; text-align: left;
}
.drawer-head[aria-expanded="true"] { color: #fff; }
.drawer-head-chevron {
  flex-shrink: 0; opacity: 0.4;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.2s;
}
.drawer-head[aria-expanded="true"] .drawer-head-chevron { transform: rotate(180deg); opacity: 1; }
.drawer-body { overflow: hidden; max-height: 0; transition: max-height 0.38s cubic-bezier(0.16,1,0.3,1); }
.drawer-body.open { max-height: 800px; }
.drawer-link {
  display: flex; align-items: center; height: 60px; padding: 0 28px;
  font-size: 1rem; font-weight: 700; color: rgba(255,255,255,0.55);
  text-decoration: none; letter-spacing: -0.01em;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color 0.2s;
}
.drawer-link:hover { color: #fff; }
.drawer-footer { margin-top: auto; padding: 28px 28px 40px; }
.drawer-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--accent); color: #000;
  font-size: 0.9rem; font-weight: 700; padding: 18px 32px;
  border: none; cursor: pointer; text-decoration: none; width: 100%;
}

/* ── BUTTONS ─────────────────────────────────────────── */
.btn-accent {
  display: flex; align-items: center; gap: 10px;
  background: var(--accent); color: #000;
  font-size: 0.82rem; font-weight: 700; padding: 16px 32px;
  border: none; cursor: pointer; transition: opacity 0.2s; white-space: nowrap;
}
.btn-accent:hover { opacity: 0.85; }
.btn-line {
  display: flex; align-items: center; gap: 10px;
  background: none; color: #fff; border: none;
  font-size: 0.82rem; font-weight: 400; padding: 16px 0;
  cursor: pointer; transition: color 0.2s; white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,0.3);
}
.btn-line:hover { color: var(--neon); border-bottom-color: var(--neon); }

/* ── FOOTER ──────────────────────────────────────────── */
footer { background: #0a0d13; border-top: 1px solid var(--border-d); padding: 44px var(--edge) 28px; }
.ft-top { display: flex; align-items: center; gap: 32px; }
.ft-logo img { height: 52px; width: auto; display: block; }
.ft-divider { width: 1px; height: 48px; background: rgba(255,255,255,0.1); flex-shrink: 0; }
.ft-certs { display: flex; gap: 20px; align-items: center; }
.cert-badge-img { height: 68px; width: auto; opacity: 0.65; transition: opacity 0.2s; filter: grayscale(20%); }
.cert-badge-img:hover { opacity: 1; }
.cert-badge-label { font-size: 0.55rem; color: rgba(255,255,255,0.28); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; margin-top: 5px; }
.cert-badge-wrap { display: flex; flex-direction: column; align-items: center; }
.ft-bottom { display: flex; justify-content: space-between; padding-top: 28px; margin-top: 32px; border-top: 1px solid var(--border-d); flex-wrap: wrap; gap: 12px; align-items: center; }
.ft-copy { font-size: 0.7rem; color: rgba(255,255,255,0.18); }
.ft-links { display: flex; gap: 20px; }
.ft-links a { font-size: 0.7rem; color: rgba(255,255,255,0.25); text-decoration: none; transition: color 0.2s; }
.ft-links a:hover { color: rgba(255,255,255,0.6); }

/* ── REVEAL ANIMATION ────────────────────────────────── */
.rv { opacity: 0; transform: translateY(40px); transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1); }
.rv.vis { opacity: 1; transform: translateY(0); }

/* ── ANNOUNCEMENT BAR ────────────────────────────────── */
#announce-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 203;
  background: linear-gradient(rgba(247,147,30,0.10), rgba(247,147,30,0.10)), #0d1017;
  border-bottom: 1px solid rgba(247,147,30,0.25);
  display: flex; align-items: center; justify-content: center;
  padding: 9px 56px; gap: 16px;
}
body.has-ann { padding-top: var(--ann-h, 36px); }
body.has-ann .top-bar { top: var(--ann-h, 36px); }
body.has-ann nav { top: calc(36px + var(--ann-h, 36px)); }
#announce-bar.hidden { display: none; }
.ann-text { font-size: 0.72rem; color: rgba(255,255,255,0.75); text-align: center; line-height: 1.5; }
.ann-accent { color: #4ade80; margin-right: 6px; }
.ann-short { display: none; }
.ann-link { color: var(--orange); text-decoration: none; font-weight: 600; margin-left: 8px; white-space: nowrap; }
.ann-link:hover { text-decoration: underline; }
.ann-close {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(255,255,255,0.35);
  font-size: 0.75rem; cursor: pointer; padding: 6px 10px; line-height: 1;
  transition: color 0.2s;
}
.ann-close:hover { color: #fff; }

/* ── RESPONSIVE CHROME ───────────────────────────────── */
@media (max-width: 900px) {
  .top-bar { display: none; }
  nav { padding: 0 20px; top: 0; }
  .n-links { display: none; }
  .n-cta { display: none; }
  #nav-toggle { display: flex; }
  footer { padding: 40px 20px 24px; }
  #announce-bar { padding: 9px 40px 9px 16px; }
  .ann-text { font-size: 0.65rem; }
  .ann-full { display: none; }
  .ann-short { display: inline; }
  body.has-ann nav { top: var(--ann-h, 36px); }
  body.has-ann #nav-drawer { top: calc(68px + var(--ann-h, 36px)); }
  .ft-top { flex-wrap: wrap; row-gap: 20px; }
  .ft-divider { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   DARK THEME OVERRIDE  (redesign-dark)
   Re-darkens the light "hybrid" body sections back to the dark theme
   while keeping all structure, copy and animation. Monochrome: the
   per-card colour rotation collapses to the orange brand accent.
   Loaded after every page's inline <style>, so it wins on source order.
   ═══════════════════════════════════════════════════════════════ */

/* ── Section backgrounds → dark ─────────────────────────────── */
.challenges, .services, .standards-bar, .esg-section, .esg-strip,
.industries-section, .partners-section, .team-section, .why-section,
#steps, #meet-olympians, #about-body, #services, #contact,
#explore, #principles, #talent-pool {
  background: var(--black); color: var(--white);
  border-color: var(--border-d);
}
.esg-section:nth-of-type(even), #explore, #principles, #talent-pool,
.standards-bar { background: #0c1016; }
#about-body { border-bottom-color: var(--border-d); }

/* ── Cards → translucent dark ───────────────────────────────── */
.about-stats .stat-card, .challenge-card, .esg-card, .why-card,
.person-card, .partner-card, .award-card, .step-card,
.persons-grid--senior .person-card, .persons-grid--spot .person-card {
  background: rgba(255,255,255,0.035);
  border-color: rgba(255,255,255,0.09);
  box-shadow: none;
}
.about-stats .stat-card:hover, .challenge-card:hover,
.esg-card:hover, .why-card:hover, .person-card:hover, .partner-card:hover,
.step-card:hover, .srv-item:hover,
.persons-grid--senior .person-card:hover, .persons-grid--spot .person-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  box-shadow: none;
}

/* ── Headings → light ───────────────────────────────────────── */
.ch-title, .esg-card h4, .esg-section h2, .why-card h3, .why-section h2,
.talent-left h2, .person-name, .partner-name, .award-title,
.commitment-body h4, .prin-body h4, .mo-text h3, .ind-name, .sec-h2,
.about-text h2, .value-title, .ec-title, #principles h2,
.esg-strip-value, .service-item h4, .srv-header-left h2 {
  color: var(--white);
}
.esg-section h2 em, .why-section h2 em, .talent-left h2 em,
.about-text h2 em, .sec-h2 em, #principles h2 em, .srv-header-left h2 em {
  color: var(--muted);
}

/* ── Body / muted text → light-muted ────────────────────────── */
.ch-body, .esg-card p, .esg-section > p, .why-card p, .talent-left p,
.person-bio, .partner-desc, .award-year, .commitment-body p, .prin-body p,
.mo-text p, .ind-desc, .section-subtitle, .about-text p, .value-desc,
.ec-desc, .esg-strip-desc, .service-item p, .std-tag, .section-label,
.person-contact a, .explore-label, .commitment-num,
.prin-num, .step-body, .srv-desc, .srv-lead {
  color: rgba(245,245,243,0.6);
}

/* ── Index "What we do best" service list → dark ────────────── */
.srv-list { border-top-color: var(--border-d); }
.srv-item { border-bottom-color: var(--border-d); }
.srv-item:nth-child(odd) { border-right-color: var(--border-d); }
.srv-item:hover { background: rgba(255,255,255,0.04); box-shadow: none; }
.srv-num { color: rgba(255,255,255,0.09); }
.srv-name { color: var(--white); }
.srv-arrow { color: rgba(255,255,255,0.2); }
.srv-header-left h2 em { color: var(--muted); }

/* ── Accents collapse to orange (monochrome) ────────────────── */
.about-stats .stat-card, .challenge-card, .esg-card,
.esg-cards .esg-card, .why-card, .why-grid .why-card,
.step, .step--blue, .step--orange, .step--teal { --vc: var(--orange) !important; }
.ac-label--blue, .ac-label--teal { color: var(--orange); }
.step-card::before, .esg-card::before, .why-card::before,
.challenge-card::before, .about-stats .stat-card::before { background: var(--orange); }
.partner-tier.blue { background: rgba(247,147,30,0.12); color: var(--orange); }
.steps-rail-fill { background: var(--orange); }
.steps-rail { background: rgba(255,255,255,0.1); }
.step-node { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.2); }
.step-num { color: rgba(255,255,255,0.4); }

/* ── Tags / dividers / strips ───────────────────────────────── */
.ind-tag { background: rgba(255,255,255,0.06); border-color: var(--border-d); color: var(--muted); }
.section-label::after { background: var(--border-d); }
.esg-strip-item { border-right-color: var(--border-d); }
.esg-strip { border-bottom-color: var(--border-d); }
.prin-item, .commitment-item { border-top-color: var(--border-d); }

/* ── Careers form → dark ────────────────────────────────────── */
.c-field label { color: rgba(255,255,255,0.62); }
.c-field:focus-within label { color: var(--accent); }
.c-field input, .c-field textarea, .c-field select { color: var(--white); border-bottom-color: rgba(255,255,255,0.26); }
.c-field input::placeholder, .c-field textarea::placeholder { color: rgba(255,255,255,0.42); }
.c-field select option { background: #12151c; color: var(--white); }
.c-file-row { border-bottom-color: rgba(255,255,255,0.26); }
.c-file-row span, .c-file-row svg { color: rgba(255,255,255,0.42); }

/* Homepage contact section text (dark) */
.contact-left p { color: rgba(245,245,243,0.66); }
.contact-detail { color: rgba(245,245,243,0.78); }
.contact-detail:hover { color: #fff; }
.contact-team { border-top-color: var(--border-d); }
.contact-team p { color: rgba(245,245,243,0.62); }

/* ── Faint labels / index even-card text → light ────────────── */
.std-label { color: var(--muted); }
.explore-label-head { color: rgba(255,255,255,0.35); }

/* ── Explore cards (about) → dark ───────────────────────────── */
.explore-card { background: rgba(255,255,255,0.035); border-color: rgba(255,255,255,0.09); box-shadow: none; }
.explore-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); box-shadow: none; }

/* Logo: one solid colour (white) on the dark chrome */
.n-logo img, .ft-logo img { filter: brightness(0) invert(1); }

/* Nav reordered (About first); dropdowns left-align consistently */
.n-links li.n-has-dd:last-of-type .n-dropdown { left: 0; right: auto; }

/* ── Animated hero flow lines ────────────────────────────────
   Soft drifting ribbons that fill the empty side of a plain text
   hero. Painted by hero-flow.js into <canvas class="hero-flow">.
   Scoped to the .page-hero--flow modifier, so other pages that
   reuse .page-hero (vendors, privacy, dell-pro-max, 404) are
   untouched. Freezes under prefers-reduced-motion (handled in JS). */
.page-hero--flow { position: relative; overflow: hidden; }
.page-hero--flow .hero-flow {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
/* Left-to-right scrim keeps the headline crisp over the lines. */
.page-hero--flow::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    var(--black) 6%, rgba(13,16,23,0.70) 32%, rgba(13,16,23,0) 60%);
}
@media (max-width: 640px) {
  .page-hero--flow::before {
    background: linear-gradient(180deg, rgba(13,16,23,0.55), rgba(13,16,23,0.85));
  }
}
/* Lift the real hero content above the canvas + scrim. */
.page-hero--flow > *:not(.hero-flow) { position: relative; z-index: 2; }