/* ==========================================================================
   SupportWizard — shared stylesheet
   Design tokens + base + layout + components, extracted from the original
   design-system export (Nav/Footer/Button/Card + the marketing page kit).
   ========================================================================== */

/* ---- Design tokens -------------------------------------------------- */

:root[data-theme="dark"],
:root {
  --bg:        #0e0e13;
  --surface:   #16161d;
  --surface2:  #1e1e27;
  --surface3:  #262631;
  --text:      #f4f4f1;
  --text2:     #a8a8b3;
  --text3:     #8e8e98;
  --accent:    #dc1675;
  --accent-hover: #ac115b;
  /* --accent as body/link-sized text falls short of 4.5:1 on our darker
     surfaces (M12 contrast audit) — this lighter tint is for text/icon
     foreground use only; --accent itself is unchanged for backgrounds,
     borders and large text, where its ratio was already compliant. */
  --accent-text: #e65c9e;
  --accent-soft: rgba(220, 22, 117, 0.12);
  --border:    #2a2a35;
  --success:   #22c07a;
  --warning:   #f5a623;
  --danger:    #e96266;
  --shadow: 0 4px 16px rgba(0,0,0,0.25);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:        #f4f4f1;
  --surface:   #ffffff;
  --surface2:  #ecece7;
  --surface3:  #e2e2dc;
  --text:      #1a1a1a;
  --text2:     #55555f;
  --text3:     #63636a;
  --accent:    #dc1675;
  --accent-hover: #ac115b;
  --accent-text: #c21367;
  --accent-soft: rgba(220, 22, 117, 0.08);
  --border:    #ddddd6;
  --success:   #178a58;
  --warning:   #b97a10;
  --danger:    #b73539;
  --shadow: 0 4px 16px rgba(0,0,0,0.08);
  color-scheme: light;
}

:root {
  --font-sans: 'Poppins', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-display: 56px;
  --fs-h1: 40px;
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-body-lg: 18px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-label: 12px;
  --fs-stat: 56px;

  --tracking-tight: -0.02em;
  --tracking-label: 0.08em;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-extrabold: 800;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --content-max: 1200px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-med: 250ms;
}

@media (max-width: 640px) {
  :root { --fs-display: 36px; --fs-h1: 30px; }
}

/* ---- Base ------------------------------------------------------------- */

* { box-sizing: border-box; }
/* An inline display style (e.g. style="display:grid") otherwise beats the
   [hidden] attribute's implicit display:none, since inline styles always
   win over stylesheet rules regardless of specificity. Bit us twice
   (log-a-ticket's form/success swap, here the terms-tab panels). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
img, svg, video { max-width: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--accent-soft); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.container { max-width: var(--content-max); margin: 0 auto; padding: 0 32px; }

.sec { padding: 120px 0; border-bottom: 1px solid var(--border); }
.sec.on-surface { background: var(--surface); }

.eyebrow {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 16px;
}

.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* Segmented tab control (Explorer / Services sector pickers) */
.seg { display: flex; gap: 4px; padding: 4px; background: var(--surface2); border-radius: var(--radius-sm); flex-wrap: wrap; }
.seg button {
  appearance: none; border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text2);
  padding: 8px 16px; border-radius: 6px; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.seg button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.seg button:hover { color: var(--text); }

/* Reveal-on-scroll (see main.js) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); }
.reveal.from-left { transform: translateX(-32px); }
.reveal.from-right { transform: translateX(32px); }
.reveal.from-scale { transform: scale(.94); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Buttons ------------------------------------------------------------ */

.btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radius-sm);
  padding: 12px 24px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  text-decoration: none !important;
}
.btn-sm { padding: 8px 16px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--surface2); }
.btn-ghost { background: transparent; color: var(--accent-text); padding: 0; border: none; }
.btn-ghost:hover { text-decoration: underline !important; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-on-dark.btn-secondary { color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-on-dark.btn-secondary:hover { background: rgba(255,255,255,0.14); }

/* ---- Cards / service tiles ---------------------------------------------- */

.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 24px;
}

.svc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-decoration: none !important;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.svc:hover { border-color: var(--accent); }
.svc .svc-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.svc .svc-title { font-size: 17px; font-weight: 600; color: var(--text); }
.svc .svc-desc { font-size: 14px; line-height: 1.55; color: var(--text2); margin: 0; }

/* auto-fit rather than a fixed repeat(4, 1fr): the homepage's "Support"
   theme tab has 5 items and is the only place this base rule still
   applies unoverridden (every other usage sets its own
   grid-template-columns inline) — a fixed 4-up left the 5th card
   ("IT Procurement") stranded alone on a mostly-empty second row. */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
@media (max-width: 1024px) { .svc-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 600px)  { .svc-grid { grid-template-columns: 1fr !important; } }

/* minmax(0, 1fr) rather than a bare 1fr: a bare 1fr track's minimum size is
   "auto" (its content's min-content width), so a long label — e.g. about.php's
   "Team. Every engineer knows every site" — forces the whole row wider than
   the viewport instead of wrapping inside its column. minmax(0, 1fr) lets the
   track shrink below its content's natural width, so long labels wrap instead
   of overflowing. */
.stat-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: 48px 32px; }
@media (max-width: 640px) { .stat-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--surface2); color: var(--text2);
}

/* ---- Skip link ------------------------------------------------------------
   Off-screen until focused, so a sighted mouse user never sees it but the
   first Tab press on any page reveals a real, visible way to jump straight to
   <main> without tabbing through the full nav (including the mega-menu) on
   every single page load. z-index above .nav (40) so it isn't hidden under
   the sticky bar as soon as it's focused. */
.skip-link {
  position: absolute; top: -48px; left: 12px; z-index: 50;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 14px;
  padding: 12px 20px; border-radius: var(--radius-sm); text-decoration: none !important;
  transition: top 150ms var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* ---- Nav ----------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; box-sizing: border-box;
  padding: 0 32px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 200ms var(--ease-out);
}
.nav.is-scrolled { box-shadow: var(--shadow); }
.nav-progress {
  position: absolute; left: 0; bottom: -1.5px; height: 2.5px; width: 0;
  background: var(--accent); pointer-events: none; transition: width 80ms linear;
}
.nav-logo { color: var(--text); display: flex; align-items: center; flex-shrink: 0; margin-right: 40px; }
.nav-links { display: flex; gap: 24px; align-items: center; flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; }
.nav-link {
  font-size: 15px; font-weight: 500; white-space: nowrap; color: var(--text2);
  border-bottom: 2.5px solid transparent; padding-bottom: 4px; text-decoration: none !important;
}
.nav-link.is-active, .nav-link:hover { color: var(--text); }

.nav-item { position: relative; display: flex; align-items: center; align-self: stretch; }
.nav-item.has-mega { position: static; }
.nav-dropdown-btn {
  appearance: none; background: transparent; font: inherit; display: flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 500; white-space: nowrap; color: var(--text2); border: none;
  border-bottom: 2.5px solid transparent; padding-bottom: 4px; cursor: pointer;
}
.nav-dropdown-btn svg { flex-shrink: 0; transition: transform 150ms; }
.nav-item.is-open .nav-dropdown-btn, .nav-item.is-open .nav-dropdown-btn svg { color: var(--text); }
.nav-item.is-open .nav-dropdown-btn svg { transform: rotate(180deg); }
.nav-item.is-active .nav-dropdown-btn { color: var(--text); }

.nav-dropdown {
  position: absolute; top: 100%; left: 0; padding-top: 12px; z-index: 20; min-width: 200px;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px);
  /* visibility gets its own explicit delay (rather than relying on the
     browser's default "flip a non-interpolable property at the transition
     midpoint" behavior) so the hide is deterministic: switch to hidden only
     once the fade-out has fully finished, not partway through. */
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
    visibility 0s linear var(--dur-fast);
}
.nav-item.is-open .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
    visibility 0s linear 0s;
}
.nav-dropdown-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 8px;
}
.nav-dropdown-panel a {
  display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500;
  color: var(--text); text-decoration: none !important;
}
.nav-dropdown-panel a:hover { background: var(--surface2); }

.nav-mega { left: 0; right: 0; }
.nav-mega-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 24px; display: grid; gap: 24px;
  max-width: var(--content-max); margin: 0 auto;
}
.nav-mega-col { display: flex; flex-direction: column; gap: 2px; }
.nav-mega-col a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text); text-decoration: none !important; }
.nav-mega-col a:hover { background: var(--surface2); text-decoration: none !important; }
.nav-mega-heading {
  font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text3); padding: 0 12px 10px;
}
.nav-mega-desc { font-size: 13px; color: var(--text2); font-weight: 400; margin-top: 2px; line-height: 1.4; }
.nav-mega-aside { border-left: 1px solid var(--border); padding-left: 24px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.nav-mega-aside .title { font-size: 15px; font-weight: 600; color: var(--text); }
.nav-mega-aside .body { font-size: 13px; color: var(--text2); line-height: 1.5; }
.nav-mega-aside a { font-size: 14px; font-weight: 600; color: var(--accent-text); }

.nav-right { display: flex; gap: 12px; align-items: center; flex-shrink: 0; margin-left: 24px; }
.nav-whatsapp {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 10px 18px; font-weight: 600; font-size: 14px; white-space: nowrap;
  text-decoration: none !important;
}
.nav-contact {
  background: var(--accent); border: none; color: #fff;
  border-radius: var(--radius-sm); padding: 10px 18px; font-weight: 600; font-size: 14px; white-space: nowrap;
  text-decoration: none !important;
}

.nav-toggle {
  display: none;
  width: 44px; height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text); align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.nav-toggle-bars { position: relative; width: 18px; height: 12px; display: block; }
.nav-toggle-bars span {
  position: absolute; left: 0; width: 18px; height: 2px; border-radius: 1px; background: currentColor;
  transition: top 200ms var(--ease-out), transform 200ms var(--ease-out), opacity 150ms;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5px; }
.nav-toggle-bars span:nth-child(3) { top: 10px; }
.nav.is-drawer-open .nav-toggle-bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.nav.is-drawer-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav.is-drawer-open .nav-toggle-bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

.nav-drawer {
  display: none;
  position: fixed; left: 0; right: 0; top: 72px; bottom: 0; background: var(--bg); z-index: 39;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 20px 40px;
}
.nav-drawer.is-open { display: block; }
.nav-drawer-item { border-bottom: 1px solid var(--border); }
.nav-drawer-link {
  display: flex; align-items: center; min-height: 56px; font-size: 18px; font-weight: 600;
  color: var(--text); text-decoration: none !important;
}
.nav-drawer-group-btn {
  width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: none; padding: 0; font: inherit; font-size: 18px; font-weight: 600;
  color: var(--text); cursor: pointer;
}
.nav-drawer-group-btn svg { transition: transform 180ms; }
.nav-drawer-item.is-open .nav-drawer-group-btn svg { transform: rotate(180deg); }
.nav-drawer-sub { display: none; padding-bottom: 12px; }
.nav-drawer-item.is-open .nav-drawer-sub { display: grid; }
.nav-drawer-sub a {
  display: flex; align-items: center; min-height: 48px; font-size: 16px; font-weight: 500;
  color: var(--text2); text-decoration: none !important;
}
.nav-drawer-cta { display: grid; gap: 12px; margin-top: 28px; }
.nav-drawer-cta a {
  display: flex; align-items: center; justify-content: center; min-height: 52px;
  border-radius: var(--radius-sm); font-weight: 600; font-size: 16px; text-decoration: none !important;
}
.nav-drawer-cta a.primary { background: var(--accent); color: #fff; }
.nav-drawer-cta a.secondary { border: 1px solid var(--border); color: var(--text); }
.nav-drawer-cta .hours { font-size: 13px; color: var(--text3); text-align: center; margin-top: 4px; }

body.drawer-open { overflow: hidden; }

@media (max-width: 1240px) { .nav-whatsapp { display: none !important; } }
@media (max-width: 1024px) {
  .nav { padding: 0 20px; }
  .nav-links, .nav-right .nav-whatsapp, .nav-contact { display: none !important; }
  .nav-toggle { display: inline-flex; }
}

/* ---- Footer --------------------------------------------------------------- */

.footer { background: var(--surface); border-top: 1px solid var(--border); padding: 56px 32px 40px; }
.footer-grid {
  display: grid; grid-template-columns: repeat(4, 1fr) 1.1fr; gap: 32px;
  max-width: var(--content-max); margin: 0 auto;
}
.footer-heading {
  font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text3); margin-bottom: 14px;
}
.footer-links { display: grid; gap: 8px; }
.footer-links a { font-size: 15px; color: var(--text2); text-decoration: none !important; transition: color 150ms; }
.footer-links a:hover { color: var(--text); text-decoration: underline !important; }
.footer-contact { display: grid; gap: 10px; }
.footer-contact a { font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none !important; }
.footer-contact .note { font-size: 13px; color: var(--text3); }
.footer-bottom {
  max-width: var(--content-max); margin: 40px auto 0; padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--text3);
}

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid > div:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:nth-child(5) { grid-column: span 1; }
}

/* ---- Hero / marketing sections -------------------------------------------- */

.hero { border-bottom: 1px solid var(--border); }
.hero-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; padding: 112px 32px 80px;
}
.hero h1 { font-size: clamp(40px, 5.2vw, 64px); line-height: 1.02; font-weight: 800; letter-spacing: -0.025em; color: var(--text); }
.hero-lead { font-size: 18px; line-height: 1.6; color: var(--text2); margin: 28px 0 0; max-width: 480px; }
.hero-stats { display: flex; gap: 40px; margin-top: 64px; flex-wrap: wrap; }
.hero-stats .num { font-size: 32px; font-weight: 800; color: var(--text); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-stats .lbl { font-size: 13px; color: var(--text3); margin-top: 8px; font-weight: 500; }
@media (max-width: 640px) {
  /* Keep all three stats on one row instead of the third wrapping onto its
     own line — shrink to fit rather than overflow (see the marquee bug
     class this file already documents: never just let flex/grid children
     stay full-size and hope). min-width:0 + flex-basis:0 lets each item
     shrink equally below its content width, so a longer label like "Venues
     supported" wraps onto a second line within its own narrow column
     instead of forcing the row wide. */
  .hero-stats { gap: 12px; flex-wrap: nowrap; }
  .hero-stats > div { flex: 1 1 0; min-width: 0; }
  .hero-stats .num { font-size: 22px; }
  .hero-stats .lbl { font-size: 11px; margin-top: 4px; }
}
.hero-photo { border-radius: 20px; border: 1px solid var(--border); overflow: hidden; aspect-ratio: 4/3; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.orbit-visual { position: relative; }
.orbit-hint { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 12px; color: var(--text3); }

.partners-sec { background: var(--surface); }
.partner-row { display: flex; align-items: center; gap: 40px; padding: 36px 32px; }
.partner-label { font-size: 12px; font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text3); white-space: nowrap; }
.partner-marquee {
  overflow: hidden; flex: 1; min-width: 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Gap is applied per-item (margin-right) rather than via flex `gap` on the container.
   The list is rendered twice back to back for a seamless loop (see index.php), and flex
   `gap` only inserts space *between* children: duplicating N items yields (2N - 1) gaps
   instead of the 2N needed to make each copy an equal, self-contained "period" — so
   translateX(-50%) (half the *total* width) fell short of one copy's true width and the
   loop visibly snapped at the seam. A trailing margin on every span (including the last)
   makes each copy's rendered width identical, so -50% lands exactly one copy-width over. */
.partners { display: flex; width: max-content; align-items: center; animation: marquee 30s linear infinite; }
/* Real provider logos, not text — normalized to a single muted-white mark
   via filter so mixed source colors/formats (SVG, PNG, different original
   brand colors) still read as one consistent logo wall, matching the
   uniform grey the text-only version used before (color: var(--text2)). */
.partners img { height: 26px; width: auto; max-width: 120px; object-fit: contain; margin-right: 40px; filter: brightness(0) invert(1); opacity: 0.55; transition: opacity 0.2s ease; }
.partners img:hover { opacity: 0.9; }
.partners:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .partners { animation: none; } }

.stack-chip {
  display: inline-flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 500; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; background: var(--bg);
  text-decoration: none !important;
}

.two { display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: start; }

/* about.php's partner-strip section: a narrow intro column beside the
   marquee. Was a one-off inline grid with no mobile breakpoint at all — at
   narrow widths the 2fr track's default "auto" (min-content) minimum let the
   marquee's widest un-wrapped partner name force the row past the viewport,
   the same overflow class as .partner-row below, just with no shared class
   to hang a fix on. Collapses to one column at the same breakpoint every
   other two-column section on the site already uses. */
.partners-feature { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: center; }
@media (max-width: 1024px) { .partners-feature { grid-template-columns: 1fr !important; gap: 24px !important; } }
.sticky-col { position: sticky; top: 96px; }

@media (max-width: 1024px) {
  /* Horizontal-only: many pages set their own vertical padding inline
     directly on .container (hero-pad, ooo-head/ooo-body, .two, bare
     .container hero/CTA sections). A shorthand `padding` here would zero
     that out via !important, collapsing top/bottom spacing to nothing on
     every one of those sections at mobile widths. */
  .container { padding-left: 20px !important; padding-right: 20px !important; }
  .sec { padding-top: 72px !important; padding-bottom: 72px !important; }
  .hero-grid { grid-template-columns: 1fr !important; padding: 112px 20px 48px !important; gap: 40px !important; }
  .two { grid-template-columns: 1fr !important; gap: 40px !important; }
  .sticky-col { position: static !important; top: auto !important; }
  .hero-photo { width: 100% !important; aspect-ratio: auto !important; height: 300px !important; }
  .partner-row { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; padding: 28px 20px !important; }
  /* .partner-row switching to a column stack changes what align-items:
     flex-start means for its children: instead of stretching to the row's
     full width (the row-mode default), each child now shrink-wraps to its
     own content width. Two knock-on overflows result, both fixed here:
     .partner-label's base nowrap sizes to its full unwrapped text (allowed
     to wrap, nothing hidden); .partner-marquee (a flex:1 || min-width:0 pair
     that only means anything on the horizontal main axis of the old row
     layout) shrink-wraps instead of taking the row's width, so its already-
     wrapped .partners spans (see the max-width:1024px rule above) still
     overflow past whichever child is widest — needs an explicit width to
     wrap within the real available space. */
  .partner-label { white-space: normal !important; max-width: 100% !important; }
  .partner-marquee { width: 100% !important; }
  .sec-head { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .orbit-hint { display: none !important; }
  #orbit-canvas { height: 320px !important; }
}
@media (max-width: 600px) {
  .hero-photo { height: 240px !important; }
  #orbit-canvas { height: 260px !important; }
  .btn-row > * { width: 100%; justify-content: center; }
}

/* ---- Forms (ticket / contact) ---------------------------------------------- */

.fld {
  width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 13px 14px; font: inherit; font-size: 15px; color: var(--text);
  transition: border-color 160ms var(--ease-out);
}
.fld:focus { outline: none; border-color: var(--accent); }
.fld:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }
.fld::placeholder { color: var(--text3); }
select.fld { appearance: none; }
.select-wrap { position: relative; }
.select-wrap select.fld { padding-right: 40px; }
.select-wrap .select-chevron { position: absolute; top: 50%; right: 14px; transform: translateY(-50%); pointer-events: none; display: flex; }
label.fl { display: block; font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 7px; }
.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.chan { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); text-decoration: none !important; transition: border-color var(--dur-fast) var(--ease-out); }
.chan:hover { border-color: var(--accent); }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
  .field-2 { grid-template-columns: 1fr !important; }
}

/* ---- Solution link cards (industries "How we help") ------------------------ */

.sol {
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 24px;
  display: flex; flex-direction: column; gap: 12px; text-decoration: none !important; height: 100%;
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.sol:hover { transform: translateY(-3px); border-color: var(--accent); }
.sol:hover .arw { transform: translateX(4px); }
.arw { transition: transform 200ms; }

/* ---- Solutions-index cards -------------------------------------------------- */

.scard {
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px; height: 100%; text-decoration: none !important;
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.scard:hover { transform: translateY(-3px); border-color: var(--accent); }
.scard:hover .sarrow { transform: translateX(4px); color: var(--accent); }
.sarrow { transition: transform 200ms, color 200ms; }

/* ---- Related-solution cards (solutions "Often taken alongside") ------------- */

.rel {
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 20px;
  display: flex; align-items: center; gap: 12px; text-decoration: none !important;
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.rel:hover { border-color: var(--accent); transform: translateY(-2px); }

/* ---- Feature accordion (solutions "Full feature list") ---------------------- */

.feature-group-btn {
  width: 100%; min-height: 60px; display: flex; align-items: center; gap: 14px;
  background: transparent; border: none; padding: 0 0 0 20px; font: inherit; text-align: left; cursor: pointer;
}
.feature-group-btn svg { color: var(--text3); }

/* ---- Values list (about page) ----------------------------------------------- */

.val {
  border-top: 1px solid var(--border); padding: 40px 0; display: grid;
  grid-template-columns: 120px 1fr 1.4fr; gap: 40px; align-items: start; transition: background 300ms;
}
.val:hover { background: var(--surface); }
.val:hover .vnum { color: var(--accent); }
.vnum {
  font-size: 64px; font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  color: var(--text3); transition: color 300ms; font-variant-numeric: tabular-nums;
}
@media (max-width: 1024px) {
  .val { grid-template-columns: 1fr !important; gap: 8px !important; padding: 28px 0 !important; }
}

/* ---- Pricing cards (on-demand support) --------------------------------------- */

.pcard {
  border: 1px solid var(--border); border-radius: 18px; background: var(--surface); padding: 28px 24px;
  display: flex; flex-direction: column; gap: 16px; height: 100%;
  transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out);
  text-decoration: none !important; color: inherit;
}
.pcard:hover { transform: translateY(-3px); border-color: var(--accent); }
.buy {
  display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--radius-sm);
  background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none !important;
  transition: background 180ms var(--ease-out);
}
.buy:hover { background: var(--accent-hover); }
.buy-alt {
  display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none !important;
  transition: border-color 180ms var(--ease-out);
}
.buy-alt:hover { border-color: var(--accent); }

/* ---- Remote-support connect button + terms tabs ------------------------------ */

.connect {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px;
  padding: 0 28px; border-radius: var(--radius-sm); background: var(--accent); color: #fff;
  font-weight: 600; font-size: 16px; text-decoration: none !important; transition: background 180ms var(--ease-out);
}
.connect:hover { background: var(--accent-hover); }
.tab {
  appearance: none; background: transparent; border: none; font: inherit; cursor: pointer;
  padding: 14px 4px; font-size: 16px; font-weight: 600; border-bottom: 2.5px solid transparent;
  transition: color 180ms, border-color 180ms; color: var(--text3);
}
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }

/* ---- Terms page (table of contents + sections) ------------------------------- */

.toc a {
  display: block; padding: 7px 0 7px 14px; font-size: 14px; color: var(--text2); text-decoration: none !important;
  border-left: 2px solid transparent; transition: color 160ms, border-color 160ms;
}
.toc a:hover { color: var(--text); }
.tsec { scroll-margin-top: 96px; }
.tsec h2 { font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; margin: 0 0 14px; }
.tsec p { font-size: 16px; line-height: 1.7; color: var(--text2); margin: 0 0 14px; }
@media (max-width: 1024px) {
  .terms-grid { grid-template-columns: 1fr !important; }
  .toc-wrap { position: static !important; margin-bottom: 32px; }
}

/* ---- OOO request form (ooo.php) ------------------------------------------ */

.err { font-size: 13px; color: var(--danger); margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.chk { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text2); line-height: 1.5; cursor: pointer; min-height: 24px; }
.chk input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; accent-color: var(--accent); cursor: pointer; }
.spin {
  width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
.fld[aria-invalid="true"] { border-color: var(--danger); }
.step { display: grid; grid-template-columns: 32px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--border); }
.step:first-child { border-top: none; padding-top: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1024px) {
  .ooo-rail { position: static !important; }
  .ooo-head { padding: 96px 20px 48px !important; }
  .ooo-body { grid-template-columns: 1fr !important; gap: 48px !important; }
  .two-col { grid-template-columns: 1fr !important; }
}

/* ---- Prose (industries/solutions inner content) ---------------------------- */

.prose h2 { font-size: clamp(26px, 4.4vw, 36px); line-height: 1.1; font-weight: 800; color: var(--text); letter-spacing: -0.02em; }
.prose p { color: var(--text2); line-height: 1.6; }