/* ==========================================================================
   360Bounce — shared components
   Header · mega menu · mobile navigation · breadcrumbs · cards · chips ·
   filters · FAQ · CTA band · process/timeline · empty states
   ========================================================================== */

:root { --header-h: 84px; --header-h-scrolled: 70px; }

/* ---------------------------------------------------------------- header -- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 80;
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s, border-color 0.35s, box-shadow 0.35s;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header { background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px); }
}
.site-header { border-bottom-color: var(--border-light); }
.site-header.is-scrolled { background: rgba(255, 255, 255, 0.95); border-bottom-color: var(--border-light); box-shadow: 0 8px 28px -20px rgba(23, 23, 23, 0.3); }
.header-inner {
  height: var(--header-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px;
  padding-inline: var(--gutter); transition: height 0.35s var(--ease-out);
}
.site-header.is-scrolled .header-inner { height: var(--header-h-scrolled); }
body.menu-open .site-header { background: var(--color-surface); border-bottom-color: var(--color-border); box-shadow: none; }

.primary-nav { justify-self: center; }
.nav-list { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 26px); }
.nav-list > li { position: relative; display: flex; align-items: center; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 6px;
  font-family: var(--f-mono); font-weight: var(--fw-label); font-size: 0.76rem; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ui-dark); text-decoration: none; transition: color 0.3s;
}
.nav-link::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 6px; height: 3px; border-radius: 3px;
  background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease-out);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after, .has-mega.is-open .nav-link::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { font-weight: 500; }

.mega-toggle {
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: -2px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--color-black); cursor: pointer;
  transition: background-color 0.3s;
}
.mega-toggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.4s var(--ease-out); }
.mega-toggle:hover { background: var(--color-surface-secondary); }
.mega-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.header-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
.header-cta { white-space: nowrap; }
.menu-toggle {
  display: none; align-items: center; gap: 10px; min-height: 44px; padding: 10px 6px 10px 12px;
  background: none; border: 0; cursor: pointer; color: var(--color-black);
  font-family: var(--f-mono); font-weight: var(--fw-label); font-size: 0.76rem; letter-spacing: var(--ls-label); text-transform: uppercase;
}
.menu-toggle-icon { position: relative; width: 24px; height: 10px; }
.menu-toggle-icon span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 0.45s var(--ease-out), top 0.45s var(--ease-out), left 0.45s var(--ease-out); }
.menu-toggle-icon span:first-child { top: 0; }
.menu-toggle-icon span:last-child { top: 8px; left: 8px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:first-child { top: 4px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:last-child { top: 4px; left: 0; transform: rotate(-45deg); }

/* ------------------------------------------------------------- mega menu -- */
.mega {
  position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 79;
  padding: 0 var(--gutter);
  visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s linear 0.4s;
}
.site-header.is-scrolled .mega { top: var(--header-h-scrolled); }
.has-mega.is-open .mega { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.3s var(--ease-out), transform 0.4s var(--ease-out), visibility 0s; }
/* no-JS fallback: open on hover / keyboard focus */
html:not(.js) .has-mega:hover .mega, html:not(.js) .has-mega:focus-within .mega { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: none; }
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */
.mega-inner {
  max-width: 1320px; margin: 10px auto 0; display: grid; grid-template-columns: minmax(220px, 0.8fr) minmax(0, 3fr); gap: 32px;
  padding: 28px; background: var(--color-white); border: 1px solid var(--color-border);
  box-shadow: 0 30px 70px -36px rgba(23, 23, 23, 0.28), 0 2px 6px rgba(23, 23, 23, 0.03);
}
.mega-intro { display: grid; align-content: space-between; gap: 18px; padding: 8px 24px 8px 4px; border-right: 1px solid var(--color-border); }
.mega-intro .meta { color: var(--color-text-secondary); display: flex; align-items: center; gap: 8px; }
.mega-lead { font-size: 1.45rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; color: var(--color-black); }
.mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.mega-item {
  position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 16px;
  padding: 18px; border: 1px solid var(--color-border); background: var(--color-white); text-decoration: none;
  transition: border-color 0.35s, background-color 0.35s, transform 0.5s var(--ease-out);
}
.mega-item:hover, .mega-item:focus-visible { border-color: var(--color-black); background: var(--color-surface); transform: translateY(-2px); }
.mega-icon .svc-icon { width: 52px; height: 52px; }
.mega-text { display: grid; gap: 6px; align-content: start; }
.mega-num { color: var(--color-text-secondary); }
.mega-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; color: var(--color-black); }
.mega-desc { font-size: 0.92rem; line-height: 1.45; color: var(--color-text-secondary); }
.mega-arrow {
  justify-self: start; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--color-silver); color: var(--color-black); transition: background-color 0.35s, border-color 0.35s, transform 0.5s var(--ease-out);
}
.mega-item:hover .mega-arrow, .mega-item:focus-visible .mega-arrow { background: var(--color-accent); border-color: var(--color-black); transform: translateX(4px); }
.mega-item[aria-current="page"] { border-color: var(--color-black); }
.mega-item[aria-current="page"] .mega-num::after { content: " · current"; }

/* service icons */
.svc-icon { width: 44px; height: 44px; overflow: visible; }
.svc-icon .i-line { fill: none; stroke: color-mix(in srgb, #DDE1E0, #171717 31%); stroke-width: 1.4; }
.svc-icon .i-accent-stroke { stroke: var(--color-black); }
.svc-icon .i-blue { stroke: #DDE1E0; stroke-width: 2; }
.svc-icon .i-pearl { fill: #FFFFFF; stroke: var(--color-black); stroke-width: 1.3; }
.svc-icon .i-accent { fill: var(--color-accent); stroke: var(--color-black); stroke-width: 1.3; }
.svc-icon .i-lav { fill: var(--color-lavender); stroke: var(--color-black); stroke-width: 1.3; }
.svc-icon .i-top { fill: #DDE1E0; stroke: var(--color-black); stroke-width: 1.2; stroke-linejoin: round; }
.svc-icon .i-face { fill: #FFFFFF; stroke: var(--color-black); stroke-width: 1.2; stroke-linejoin: round; }
.svc-icon .i-side { fill: var(--color-accent-blue); stroke: var(--color-black); stroke-width: 1.2; stroke-linejoin: round; }

/* --------------------------------------------------------- mobile menu -- */
.site-menu {
  position: fixed; inset: 0; z-index: 70; background: var(--color-surface);
  padding: calc(var(--header-h) + 8px) var(--gutter) 32px; overflow-y: auto; overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 0.6s var(--ease-io), visibility 0s linear 0.6s;
}
.site-menu[hidden] { display: none; }
.site-menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.6s var(--ease-io), visibility 0s; }
.site-menu-inner { min-height: 100%; display: grid; align-content: space-between; gap: 32px; max-width: 760px; }
.site-menu-list > li { border-bottom: 1px solid var(--color-border); }
.site-menu-list > li:first-child { border-top: 1px solid var(--color-border); }
.site-menu-list a, .site-menu-row > a {
  display: flex; align-items: center; min-height: 56px; padding: 6px 0; text-decoration: none; color: var(--color-black);
  font-size: clamp(1.75rem, 7vw, 2.75rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em;
}
.site-menu-word { background: linear-gradient(var(--color-accent), var(--color-accent)) 0 88% / 0 0.18em no-repeat; transition: background-size 0.5s var(--ease-out); }
.site-menu-list a:hover .site-menu-word, .site-menu-list a[aria-current="page"] .site-menu-word { background-size: 100% 0.18em; }
.site-menu-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.submenu-toggle {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--color-silver); background: var(--color-white); color: var(--color-black); cursor: pointer;
}
.submenu-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.4s var(--ease-out); }
.submenu-toggle[aria-expanded="true"] { background: var(--color-accent); border-color: var(--color-black); }
.submenu-toggle[aria-expanded="true"] svg { transform: rotate(45deg); }
.site-submenu { display: grid; gap: 2px; padding: 0 0 16px; }
.site-submenu[hidden] { display: none; }
.site-submenu a {
  min-height: 48px; font-size: 1.15rem; font-weight: 520; letter-spacing: 0; gap: 14px;
  padding: 8px 12px; border-radius: 2px;
}
.site-submenu a:hover, .site-submenu a[aria-current="page"] { background: var(--color-white); }
.site-submenu .meta { color: var(--color-text-secondary); min-width: 2em; }
.site-menu-foot { display: grid; gap: 20px; justify-items: start; }
body.menu-open { overflow: hidden; }

/* ------------------------------------------------------------ breadcrumbs -- */
.breadcrumbs { margin-bottom: 20px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--f-mono); font-weight: var(--fw-label); font-size: 0.72rem; letter-spacing: var(--ls-label); text-transform: uppercase; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text-secondary); }
.breadcrumbs li + li::before { content: "/"; color: var(--color-silver); }
.breadcrumbs a { color: var(--color-text-secondary); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-black); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; }
.breadcrumbs [aria-current="page"] { color: var(--color-black); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ section heads -- */
.section--surface { background: var(--color-surface); }
.section-head--split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: 24px 48px; }
.section-head--split .section-kicker { margin-bottom: 20px; }
.section-head-aside { display: grid; gap: 16px; justify-items: start; color: var(--color-text-secondary); }
p.section-head-aside, .section-head-aside .lead { color: var(--color-text-secondary); max-width: 44ch; }
.hero-cta-row, .cta-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }

/* ------------------------------------------------------------- service cards -- */
.svc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.svc-card { position: relative; }
.svc-card-link {
  height: 100%; display: grid; grid-template-rows: auto auto auto 1fr auto auto; gap: 14px; padding: 26px 24px;
  background: var(--color-white); border: 1px solid var(--color-border); text-decoration: none;
  transition: border-color 0.35s, transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.svc-card-link:hover, .svc-card-link:focus-visible { border-color: var(--color-black); transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.svc-card-top { display: flex; align-items: center; justify-content: space-between; color: var(--color-text-secondary); }
.svc-card-top .svc-icon { width: 56px; height: 56px; }
.svc-card-title { font-size: clamp(1.5rem, 2vw, 1.9rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1; color: var(--color-black); }
.svc-card-tag { font-family: var(--f-sans); font-weight: 600; letter-spacing: -0.015em; font-size: 1.15rem; line-height: 1.2; color: var(--color-black); }
.svc-card-desc { color: var(--color-text-secondary); font-size: 0.98rem; }
.svc-card-list { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: 0.92rem; }
.svc-card-list li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 10px; border-radius: 50%; background: var(--card-dot, var(--color-accent)); box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.4); vertical-align: middle; }
.svc-card-cta { font-family: var(--f-mono); font-size: 0.74rem; font-weight: var(--fw-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-black); }
.svc-card-cta .arrow, .article-card-cta .arrow { display: inline-block; transition: transform 0.5s var(--ease-out); }
.svc-card-link:hover .arrow, .article-card-link:hover .arrow { transform: translateX(5px); }
.svc-card--lime { --card-dot: var(--color-accent); }
.svc-card--pearl { --card-dot: #FFFFFF; }
.svc-card--blue { --card-dot: var(--color-accent-blue); }
.svc-card--lavender { --card-dot: var(--color-lavender); }

/* ------------------------------------------------------------------- chips -- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--color-silver);
  background: var(--color-white); font-family: var(--f-mono); font-weight: var(--fw-label); font-size: 0.72rem; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-black); text-decoration: none;
}
a.chip:hover { border-color: var(--color-black); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--chip-dot, var(--color-silver)); box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.35); }
.chip--lime { --chip-dot: var(--color-accent); }
.chip--pearl { --chip-dot: #FFFFFF; }
.chip--blue { --chip-dot: var(--color-accent-blue); }
.chip--lavender { --chip-dot: var(--color-lavender); }

/* ----------------------------------------------------------------- filters -- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--color-silver); background: var(--color-white); color: var(--color-black); text-decoration: none;
  font-family: var(--f-mono); font-weight: var(--fw-label); font-size: 0.74rem; letter-spacing: var(--ls-label); text-transform: uppercase;
  transition: border-color 0.3s, background-color 0.3s;
}
.filter:hover { border-color: var(--color-black); }
.filter.is-active { background: var(--color-black); border-color: var(--color-black); color: var(--color-white); }
.filter-count { opacity: 0.6; }
.filter-status { color: var(--color-text-secondary); margin: 18px 0 28px; }

/* ----------------------------------------------------------- article cards -- */
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.article-card-link {
  height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; padding: 26px 24px;
  background: var(--color-white); border: 1px solid var(--color-border); text-decoration: none;
  transition: border-color 0.35s, transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.article-card-link:hover, .article-card-link:focus-visible { border-color: var(--color-black); transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.article-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--color-text-secondary); }
.article-cat { color: var(--color-black); padding: 1px 8px; background: var(--color-accent); border-radius: 999px; text-decoration: none; }
.article-card-title { font-size: clamp(1.3rem, 1.8vw, 1.65rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; color: var(--color-black); }
.article-card-summary { color: var(--color-text-secondary); font-size: 0.98rem; }
.article-card-cta { font-family: var(--f-mono); font-size: 0.74rem; font-weight: var(--fw-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-black); }
.article-card--featured { margin-bottom: 16px; }
.article-card--featured .article-card-link { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 48px; padding: clamp(28px, 4vw, 56px); background: var(--color-white); position: relative; overflow: hidden; }
.article-card--featured .article-card-link::after {
  content: "Featured"; position: absolute; right: 24px; top: 24px; font-family: var(--f-mono); font-weight: var(--fw-label); font-size: 0.7rem; letter-spacing: var(--ls-label); text-transform: uppercase;
  padding: 4px 10px; border: 1px solid var(--color-black); border-radius: 999px; background: var(--color-white);
}
.article-card--featured .article-meta { grid-column: 1 / -1; }
.article-card--featured .article-card-title { font-size: clamp(1.75rem, 3vw, 2.75rem); grid-row: 2 / span 2; line-height: 1.02; }
.article-card--featured .article-card-summary { font-size: 1.1rem; align-self: end; }

.empty-state { padding: 40px; border: 1px dashed var(--color-silver); text-align: center; color: var(--color-text-secondary); display: grid; gap: 12px; justify-items: center; grid-column: 1 / -1; }

/* ------------------------------------------------------------------- FAQ -- */
.faq-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-list { border-top: 1px solid var(--color-black); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 18px 0;
  cursor: pointer; font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 600; color: var(--color-black);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover .faq-q { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; text-underline-offset: 0.3em; }
.faq-icon { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--color-silver); transition: background-color 0.3s, border-color 0.3s, transform 0.4s var(--ease-out); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; background: var(--color-black); transition: transform 0.4s var(--ease-out); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon { background: var(--color-accent); border-color: var(--color-black); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-a { padding: 0 56px 22px 0; color: var(--color-text-secondary); max-width: 64ch; }

/* --------------------------------------------------------------- CTA band -- */
.cta-band { position: relative; overflow: hidden; display: grid; justify-items: start; gap: 28px; }
.cta-band-title em, .theme-dark h2 em, .site-footer em { color: var(--brand-lime); }
.cta-band .section-kicker { margin-bottom: 0; }
.cta-band .lead { color: var(--color-text-secondary); max-width: 46ch; }
.cta-band-art { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.cta-band > :not(.cta-band-art) { position: relative; z-index: 1; }

/* ------------------------------------------------------- process & timeline -- */
.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-black); }
.process-step { display: grid; gap: 12px; align-content: start; padding: 24px 24px 0 0; }
.process-step + .process-step { padding-left: 24px; border-left: 1px solid var(--color-border); }
.process-num, .timeline-num { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--color-text-secondary); }
.process-step h3, .timeline-step h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; color: var(--color-black); }
.process-step p, .timeline-step p { color: var(--color-text-secondary); }

.timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; position: relative; padding-top: 36px; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: var(--color-silver); }
.timeline-step { position: relative; display: grid; gap: 10px; align-content: start; }
.timeline-step::before { content: ""; position: absolute; top: -32px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--color-white); border: 1.5px solid var(--color-black); }
.timeline-step:first-child::before { background: var(--color-accent); }

/* -------------------------------------------------------------- capability grid -- */
.cap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cap-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cap { display: grid; gap: 10px; align-content: start; padding: 26px 24px 30px; background: var(--color-white); border: 1px solid var(--color-border); transition: border-color 0.35s; }
.cap:hover { border-color: var(--color-black); }
.cap .meta { color: var(--color-text-secondary); }
.cap h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; color: var(--color-black); }
.cap p { color: var(--color-text-secondary); font-size: 0.98rem; }

.tick-list { display: grid; gap: 10px; }
.tick-list li { position: relative; padding-left: 28px; }
.tick-list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 14px; height: 8px; border-left: 2px solid var(--color-black); border-bottom: 2px solid var(--color-black); transform: rotate(-45deg); }
.dash-list { display: grid; gap: 6px; }
.dash-list li { padding-left: 18px; position: relative; color: var(--color-text-secondary); }
.dash-list li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 10px; height: 1px; background: var(--color-black); }

/* ==========================================================================
   Footer (redesigned): intro + 3D emblem, four columns, giant wordmark
   ========================================================================== */
.footer-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding-bottom: clamp(48px, 7vw, 100px); border-bottom: 1px solid var(--color-border); }
.footer-intro { display: grid; gap: clamp(20px, 2.6vw, 32px); justify-items: start; }
.footer-statement { color: var(--color-text-secondary); max-width: 46ch; font-size: var(--fs-m); line-height: 1.45; }
.site-footer .footer-cta { padding-bottom: 0; border-bottom: 0; }
.footer-board { position: relative; justify-self: center; width: min(32vw, 380px); aspect-ratio: 16 / 11; perspective: 1000px; }
.fb-face {
  --color-black: var(--brand-black); --color-text-secondary: var(--text-secondary); --color-text: var(--brand-black);
  position: absolute; inset: 0 0 18% 0; display: grid; align-content: space-between; padding: 7% 8%;
  background: #fff; box-shadow: 0 0 0 1px var(--color-border), 0 34px 60px -30px rgba(23, 23, 23, 0.35);
  transform: rotateY(var(--fb-ry, -14deg)) rotateX(var(--fb-rx, 4deg)); transform-origin: 50% 100%; transition: transform 0.9s var(--ease-out);
}
.fb-kicker, .fb-foot { font-family: var(--f-mono); font-weight: var(--fw-label); font-size: 0.62rem; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--color-text-secondary); }
.fb-foot { border-top: 2px solid var(--color-black); padding-top: 6px; color: var(--color-black); }
.fb-head { font-size: clamp(1.4rem, 2.6vw, 2.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; color: var(--color-black); }
.fb-head em { text-transform: none; }
.fb-dot { position: absolute; right: 9%; top: 26%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent); }
.fb-leg { position: absolute; bottom: 4%; width: 4px; height: 15%; background: linear-gradient(90deg, color-mix(in srgb, #DDE1E0, #171717 10%), #F5F5F5); }
.fb-leg--l { left: 26%; }
.fb-leg--r { right: 26%; }
.fb-shadow { position: absolute; left: 6%; right: 6%; bottom: 0; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(23, 23, 23, 0.22), rgba(23, 23, 23, 0)); }
.footer-board:hover .fb-face { --fb-ry: 0deg; --fb-rx: 0deg; }
.footer-follow { margin-top: 22px; }
.site-footer .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: clamp(40px, 5vw, 64px) 0; }
.footer-note { color: var(--color-text-secondary); max-width: 26ch; }
.site-footer .social-links { display: grid; gap: 8px; }
@media (max-width: 900px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .footer-board { width: min(80vw, 320px); justify-self: start; }
  .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .site-footer .footer-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .fb-face { transition: none; } }

/* ==========================================================================
   Brand identity — reference-aligned components (header card, navigation,
   dropdowns, buttons, cards, footer card). Colours come only from the brand
   tokens in style.css.
   ========================================================================== */
:root {
  --header-inset: 12px;
  --header-h: 104px;           /* space the floating header occupies, inset included: an 80px bar */
  --header-h-scrolled: 92px;   /* 68px bar */
  --header-x: max(12px, calc((100vw - 1520px) / 2));
  --radius-card: var(--radius-lg);
  --radius-panel: var(--radius-xl);
  --shadow-card: var(--shadow-soft);
}

/* ---- header: a white card with the official logo, black navigation and a lime CTA ---- */
.site-header,
.site-header.is-scrolled {
  inset: var(--header-inset) var(--header-x) auto;
  background: var(--brand-white);
  border: 1px solid var(--border-light);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04), 0 16px 40px -26px rgba(23, 23, 23, 0.3);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.site-header.is-scrolled { box-shadow: 0 1px 2px rgba(23, 23, 23, 0.05), 0 20px 44px -24px rgba(23, 23, 23, 0.38); }
.header-inner { height: calc(var(--header-h) - var(--header-inset) * 2); padding-inline: clamp(16px, 2.2vw, 32px); gap: clamp(16px, 2vw, 32px); }
.site-header.is-scrolled .header-inner { height: calc(var(--header-h-scrolled) - var(--header-inset) * 2); }
body.menu-open .site-header { background: var(--brand-white); border-color: var(--border-light); }

/* logo on light surfaces: the official artwork in its on-light colourway (dark "360") */
.brand-logo--header { height: 44px; }
.site-header.is-scrolled .brand-logo--header { height: 40px; }
.brand-logo--header img { transition: transform 0.5s var(--ease-out); }
.wordmark:hover .brand-logo--header img, .wordmark:focus-visible .brand-logo--header img { transform: translateY(-1px); }

.nav-list { gap: clamp(2px, 0.9vw, 14px); }
.nav-link {
  height: 44px; padding: 0 8px; gap: 6px;
  font-family: var(--f-display); font-size: 0.97rem; font-weight: 600; letter-spacing: -0.005em; text-transform: none;
  color: var(--ui-dark);
}
.nav-link::after { left: 8px; right: 8px; bottom: 5px; height: 3px; background: var(--brand-lime); }
.nav-link:hover, .nav-link[aria-current="page"], .has-mega.is-open .nav-link { color: var(--brand-black); }
.nav-link[aria-current="page"] { font-weight: 650; }
.nav-chev { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform 0.35s var(--ease-out); }
.has-drop:hover .nav-chev, .has-drop:focus-within .nav-chev { transform: rotate(180deg); }
.mega-toggle { width: 24px; height: 24px; margin-left: -6px; color: var(--ui-dark); }
.mega-toggle:hover { background: var(--bg-soft); }

/* the CTA: lime pill, black label, arrow */
.header-cta.btn { padding: 0.95em 1.45em; font-size: 0.97rem; }
.header-cta.btn::after { display: none; }
.cta-arrow { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s var(--ease-out); }
.header-cta:hover .cta-arrow, .header-cta:focus-visible .cta-arrow { transform: translate(2px, -2px); }

/* dropdowns: clean white panels with rounded corners */
.mega { top: var(--header-h); padding: 0 var(--header-x); }
.site-header.is-scrolled .mega { top: var(--header-h-scrolled); }
.mega-inner, .mega-inner--catalog {
  max-width: none; margin: 0; border-radius: var(--radius-panel); border-color: var(--border-light);
  box-shadow: 0 30px 70px -36px rgba(23, 23, 23, 0.32), 0 2px 6px rgba(23, 23, 23, 0.03);
}
.mega-inner--division { grid-template-columns: minmax(240px, 0.9fr) minmax(0, 3.2fr); gap: 28px; padding: 26px; max-height: calc(100vh - var(--header-h) - 24px); }
.mega-inner--division .mega-intro { align-content: start; gap: 16px; padding: 18px; border: 0; border-radius: var(--radius-card); background: var(--bg-soft); }
.mega-inner--division .mega-intro .btn { justify-self: start; }
.mega-inner--division .mega-panel-head { display: none; }
.mega-inner--division .mega-panels { overflow-y: auto; }
.mega .mega-group-title { font-family: var(--f-display); font-size: 0.98rem; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--brand-black); }
.mega .mega-link { color: var(--text-secondary); border-radius: 8px; }
.mega .mega-link:hover, .mega .mega-link:focus-visible, .mega .mega-link[aria-current="page"] { color: var(--brand-black); }
.drop { top: calc(100% + 18px); right: auto; left: -8px; border-radius: var(--radius-card); border-color: var(--border-light); padding: 8px; box-shadow: 0 24px 50px -28px rgba(23, 23, 23, 0.32); }
.drop a { border-radius: 10px; color: var(--text-secondary); font-weight: 500; }
.drop a:hover, .drop a:focus-visible, .drop a[aria-current="page"] { background: var(--bg-soft); color: var(--brand-black); }
.has-drop:last-child .drop { left: auto; right: -8px; }

/* ---- buttons: bold sans labels, as in the reference ---- */
.btn { font-family: var(--f-sans); font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; text-transform: none; }
.btn--small { font-size: 0.86rem; }
.btn--large { font-size: 1.02rem; }

/* ---- cards and panels: rounded, hairline border, soft shadow ---- */
.panel, .cap-grid > li, .sol-card, .svc-card, .work-card, .insight-card, .mega-item, .faq-item, .case-card,
.strategy-grid li, .usecase-grid > li, .model-card, .sol-problem-list > li, .pv, .fb-face, .contact-form, .form-card,
.sol-card-link, .svc-card-link, .article-card-link, .challenge, .model, .split-cta-card, .vm-card, .cap,
.project-media, .insight-media, .insight-thumb, .mk-camp-media, .mk-fb {
  border-radius: var(--radius-card);
}
.project-media, .insight-media, .insight-thumb, .mk-camp-media, .mk-fb, .sol-card-link, .svc-card-link, .article-card-link { overflow: hidden; }
/* light cards: white, silver border, soft shadow; inside .theme-dark the same tokens give charcoal + hairline */
.panel, .contact-form, .form-card, .challenge, .model, .split-cta-card, .vm-card, .cap,
.sol-card-link, .svc-card-link, .article-card-link {
  border-color: var(--border); box-shadow: var(--shadow-card);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.sol-card-link:hover, .svc-card-link:hover, .article-card-link:hover,
.sol-card-link:focus-visible, .svc-card-link:focus-visible, .article-card-link:focus-visible { box-shadow: var(--shadow-medium); }
.theme-dark .panel, .theme-dark .challenge, .theme-dark .model, .theme-dark .split-cta-card, .theme-dark .vm-card, .theme-dark .cap,
.theme-dark .sol-card-link, .theme-dark .svc-card-link, .theme-dark .article-card-link { box-shadow: none; }
.chip, .filter { border-radius: 999px; }

/* ---- footer: a deep-black card with the official logo, white headings, grey links ---- */
.site-footer {
  margin: clamp(12px, 2vw, 24px) var(--header-x) var(--header-inset);
  border-radius: 28px;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 64px) 0;
}
.site-footer .footer-top { border-bottom-color: var(--border-on-dark); }
.site-footer .footer-col h2.meta, .site-footer .footer-col .meta:first-child {
  font-family: var(--f-display); font-size: 1.05rem; font-weight: 650; letter-spacing: -0.005em; text-transform: none; color: var(--brand-white);
}
.site-footer .footer-col a, .site-footer .footer-col p { color: var(--text-on-dark-2); }
.site-footer .footer-col a:hover, .site-footer .footer-col a:focus-visible { color: var(--brand-lime); }
.site-footer .footer-bottom { border-top-color: var(--border-on-dark); color: var(--text-on-dark-2); }
.site-footer .footer-statement { color: var(--text-on-dark-2); }

/* footer layout (reference): brand | three link columns | contact & social, with hairline dividers */
.footer-main {
  display: grid; grid-template-columns: minmax(240px, 1.15fr) minmax(0, 2.6fr) minmax(180px, 0.85fr);
  gap: clamp(28px, 4vw, 64px); padding-bottom: clamp(36px, 5vw, 64px);
}
.footer-main > * + * { border-left: 1px solid var(--border-on-dark); padding-left: clamp(24px, 3.4vw, 56px); }
.footer-brand { display: grid; gap: 22px; align-content: start; justify-items: start; }
.footer-brand .brand-logo--footer { height: clamp(46px, 4.2vw, 60px); }
.footer-brand .footer-statement { font-size: 1.08rem; line-height: 1.5; max-width: 30ch; }
.site-footer .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); padding: 0 0 0 clamp(24px, 3.4vw, 56px); }
.site-footer .footer-col { display: grid; gap: 14px; align-content: start; }
.site-footer .footer-col h2 { font-family: var(--f-display); font-size: 1.08rem; font-weight: 650; letter-spacing: -0.005em; color: var(--brand-white); margin: 0; }
.site-footer .footer-col ul { display: grid; gap: 9px; }
.site-footer .footer-col a { font-size: 1rem; }
.footer-side { display: grid; gap: 22px; align-content: start; }
.footer-side .contact-list { display: grid; gap: 8px; color: var(--text-on-dark-2); }
.footer-side .contact-list a { color: var(--brand-white); }
.footer-side .contact-list a:hover { color: var(--brand-lime); }
.footer-note { color: var(--text-on-dark-2); font-size: 0.95rem; }
.social-links { display: flex; flex-wrap: wrap; gap: 10px; }
.social-btn {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  border: 1px solid var(--border-on-dark); color: var(--brand-white); transition: border-color 0.3s, color 0.3s, background-color 0.3s;
}
.social-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social-btn:hover, .social-btn:focus-visible { border-color: var(--brand-lime); color: var(--brand-lime); }
.site-footer .footer-bottom { padding: 22px 0 26px; font-size: 0.92rem; }
.site-footer .footer-legal a { color: var(--text-on-dark-2); font-size: 0.92rem; }
.btn--lime::after { display: none; }
@media (max-width: 1100px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .site-footer .footer-main > .footer-grid { grid-column: 1 / -1; order: 3; border-left: 0; padding-left: 0; border-top: 1px solid var(--border-on-dark); padding-top: 32px; }
}
@media (max-width: 680px) {
  .footer-main { grid-template-columns: 1fr; }
  .footer-main > *, .site-footer .footer-main > .footer-grid { border-left: 0; padding-left: 0; }
  .footer-main > * + * { border-top: 1px solid var(--border-on-dark); padding-top: 28px; }
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
  .site-footer { border-radius: 22px; }
}

/* flowing wave lines from the brand sheet: fine silver lines lit lime at their base, and an
   olive sweep from the top-left — decorative only, on near-black surfaces */
.brand-waves { width: 100%; height: 100%; overflow: visible; }
.brand-waves .wv { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }
.brand-waves .wv--silver { stroke: url(#wv-silver); }
.brand-waves .wv--olive { stroke: url(#wv-olive); }
.brand-waves .wv-set { transform-box: view-box; }
.brand-waves .wv-set--silver { transform-origin: 100% 0; animation: wave-drift 22s var(--ease-io) infinite alternate; }
.brand-waves .wv-set--olive { transform-origin: 0 0; animation: wave-drift 26s var(--ease-io) infinite alternate-reverse; }
@keyframes wave-drift { from { transform: translateY(-8px) scaleY(0.97); } to { transform: translateY(8px) scaleY(1.03); } }
@media (prefers-reduced-motion: reduce) { .brand-waves .wv-set { animation: none; } }

/* cinematic heroes: near-black stage, olive lighting, silver/olive waves, white headline, lime emphasis */
.hero-cinematic {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(48% 62% at 6% 0%, color-mix(in srgb, var(--olive-muted) 55%, transparent), transparent 70%),
    radial-gradient(40% 50% at 62% 104%, color-mix(in srgb, var(--olive-deep) 70%, transparent), transparent 72%),
    radial-gradient(60% 70% at 86% 38%, color-mix(in srgb, var(--brand-silver) 7%, transparent), transparent 64%),
    var(--bg-near-black);
  border-bottom: 0;
}
.page-hero--dark, .page-hero--light {
  padding-top: calc(var(--header-h) + clamp(48px, 7vw, 110px));
  padding-bottom: clamp(56px, 7vw, 112px);
}
.hero-cinematic > :not(.page-hero-waves):not(.cta-band-art) { position: relative; z-index: 1; }
.page-hero-waves { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-cinematic .page-title, .hero-cinematic h1 { color: var(--brand-white); }
.hero-cinematic .page-title em, .hero-cinematic h1 em { color: var(--brand-lime); background: none; padding: 0; margin: 0; }
.hero-cinematic .lime { color: var(--brand-white); }
.hero-cinematic .lead, .hero-cinematic p { color: var(--text-on-dark-2); }
.hero-cinematic .section-kicker, .hero-cinematic .meta { color: var(--text-on-dark-2); }
.hero-cinematic .kicker-dot { background: var(--brand-lime); box-shadow: none; }
.hero-cinematic .breadcrumbs a, .hero-cinematic .breadcrumbs { color: var(--text-on-dark-2); }
.hero-cinematic .breadcrumbs [aria-current], .hero-cinematic .breadcrumbs li:last-child { color: var(--brand-white); }
.hero-cinematic .scene--svc, .hero-cinematic .scene--contained { border-left: 0; background: none; }
/* light heroes (Staffing, Cloud, AI/ML, company pages): white-dominant, soft silver waves,
   a pale-blue wash for Cloud and AI/ML */
.hero-light {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(55% 70% at 88% 35%, var(--brand-white), transparent 70%),
    radial-gradient(40% 50% at 70% 100%, color-mix(in srgb, var(--brand-lime) 12%, transparent), transparent 70%),
    var(--bg-light);
  border-bottom: 1px solid var(--border-light);
}
.hero-light--cloud-solutions, .hero-light--ai-ml {
  background:
    radial-gradient(55% 70% at 86% 36%, var(--brand-white), transparent 70%),
    radial-gradient(50% 60% at 8% 0%, var(--pale-blue), transparent 72%),
    radial-gradient(40% 50% at 70% 100%, color-mix(in srgb, var(--pale-blue) 80%, transparent), transparent 70%),
    var(--bg-light);
}
.hero-light > :not(.page-hero-waves) { position: relative; z-index: 1; }
.hero-light .brand-waves .wv--silver { stroke: url(#wv-silver-l); }
.hero-light .brand-waves .wv--olive { stroke: url(#wv-blue-l); }
.hero-light .brand-waves .wv-glow { opacity: 0.55; }
.hero-light .page-hero-waves { opacity: 0.9; }
.hero-light .kicker-dot { background: var(--brand-lime); box-shadow: 0 0 0 1px var(--brand-black); }

/* the CSS stand-in art (no WebGL) is drawn for white: shown in its negative on the dark stage */
.hero-cinematic .svc-fallback .art, .hero-cinematic .scene-fallback > svg { filter: invert(1) hue-rotate(180deg) brightness(0.92); mix-blend-mode: screen; }
.hero-cinematic .scene-fallback, .hero-cinematic .svc-fallback { background: none; }
@media (max-width: 760px) { .page-hero-waves { opacity: 0.75; } }