/* ============ tokens (palette + type from cosmoq reference) ============ */
/* Two independent switches, and they compose:
     html[data-theme="dark"]        light / dark surface
     :root[data-accent="<key>"]     emerald (default) / electric / pine
   The accent is stored as a raw RGB triplet so every glow, border and gradient
   can derive its own alpha from the same source. Nothing downstream of this
   block hardcodes an accent colour. The warm amber is a separate, fixed
   secondary accent and does not follow the picker. */
:root {
  --bg: #f4f6fa;
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(11, 18, 32, 0.08);
  --glass-border-hover: rgb(var(--accent-rgb) / 0.45);
  --text: #0b1220;
  --muted: #5b6575;
  --warm: #ffac0a;
  --surface-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
  --surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --grid-line: rgba(11, 18, 32, 0.045);
  --row-divider: rgba(11, 18, 32, 0.06);
  --input-bg: rgba(11, 18, 32, 0.03);
  --input-bg-focus: rgba(11, 18, 32, 0.05);
  --menu-bg: rgba(255, 255, 255, 0.92);
  --tile-grad: linear-gradient(145deg, rgb(var(--accent-rgb) / 0.12), rgb(var(--accent-rgb) / 0.05));
  --orb-opacity: 0.16;
  --r-lg: 28px;
  --r-md: 20px;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* derived accent surfaces: these never change, only the channels below do */
  --accent: rgb(var(--accent-rgb));
  --accent-soft: rgb(var(--accent-soft-rgb));
  /* two-stop gradients read outer then inner; in light theme the inner stop is
     the darker one so display headings keep their contrast, and in dark theme
     it flips */
  --grad-edge: var(--accent);
  --grad-core: var(--accent-soft);

  /* the three swatch colours, so the picker can paint all three at once */
  --sw-emerald: #00a96b;
  --sw-electric: #00c853;
  --sw-pine: #0e8a5f;
}

/* ---- accent palettes (light theme channels; emerald is the default) ---- */
:root,
:root[data-accent="emerald"] {
  --accent-rgb: 0 169 107;      /* #00A96B */
  --accent-soft-rgb: 10 122 80; /* #0A7A50 */
  --accent-deep: #0a7a50;       /* fixed dark end, keeps white button text legible */
}
:root[data-accent="electric"] {
  --accent-rgb: 0 200 83;       /* #00C853 */
  --accent-soft-rgb: 11 143 66; /* #0B8F42 */
  --accent-deep: #0b8f42;
}
:root[data-accent="pine"] {
  --accent-rgb: 14 138 95;      /* #0E8A5F */
  --accent-soft-rgb: 10 102 71; /* #0A6647 */
  --accent-deep: #0a6647;
}

html[data-theme="dark"] {
  --bg: #000000;
  --glass: rgba(255, 255, 255, 0.06);
  --glass-strong: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.1);
  --text: #ffffff;
  --muted: #9ba9c4;
  --surface-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  --surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --grid-line: rgba(255, 255, 255, 0.03);
  --row-divider: rgba(255, 255, 255, 0.07);
  --input-bg: rgba(255, 255, 255, 0.04);
  --input-bg-focus: rgba(255, 255, 255, 0.06);
  --menu-bg: rgba(4, 6, 12, 0.92);
  --tile-grad: linear-gradient(145deg, rgb(var(--accent-soft-rgb) / 0.18), rgb(var(--accent-rgb) / 0.08));
  --orb-opacity: 0.2;
  --grad-edge: var(--accent-soft);
  --grad-core: var(--accent);
}

/* ---- dark theme soft channels: a lift of each accent, so it reads on black.
       These carry both attributes so they outrank the light [data-accent]
       rules above no matter what order the sheet is read in. ---- */
html[data-theme="dark"],
html[data-theme="dark"][data-accent="emerald"] {
  --accent-soft-rgb: 79 224 165; /* #4FE0A5 */
}
html[data-theme="dark"][data-accent="electric"] {
  --accent-soft-rgb: 91 240 140; /* #5BF08C */
}
html[data-theme="dark"][data-accent="pine"] {
  --accent-soft-rgb: 63 203 152; /* #3FCB98 */
}

/* ============ base ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 110px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; }
h1 { font-size: clamp(2rem, 1rem + 4.5vw, 4.4rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 1rem + 2.1vw, 2.6rem); letter-spacing: -0.02em; }
h3 { font-size: 1.18rem; letter-spacing: -0.01em; }

a { color: inherit; text-decoration: none; }

/* mobile browsers flash their own blue tap highlight on every tappable thing,
   which is the one accent colour the picker cannot reach. Tint it instead. */
a, button { -webkit-tap-highlight-color: rgb(var(--accent-rgb) / 0.14); }

/* small uppercase label style */
.eyebrow, .vertical-num, .stack-label, .contact-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

/* Material Symbols */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  -webkit-font-smoothing: antialiased;
}

/* ============ shared glass surface ============ */
.nav-pill, .hero-stats, .vertical, .vertical-card, .approach-item,
.career-card, .perk, .footer-pill,
.stack-list li, .hero-badge, .cta-band, .theme-toggle, .accent-toggle, .job-panel {
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--surface-highlight), var(--surface-shadow);
}

/* glass icon tile (iOS app-icon style) */
.icon-tile {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent-soft);
  background: var(--tile-grad);
  border: 1px solid var(--glass-border);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.icon-tile-lg { width: 56px; height: 56px; border-radius: 17px; font-size: 26px; }

/* ============ ambient background ============ */
.bg-grid {
  position: fixed; inset: 0; z-index: -3;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 40%, transparent 100%);
}

#pixelCanvas { position: fixed; inset: 0; z-index: -2; pointer-events: none; }

.bg-orb {
  position: fixed; z-index: -1; border-radius: 50%;
  filter: blur(120px); opacity: var(--orb-opacity); pointer-events: none;
}
.bg-orb-1 { width: 480px; height: 480px; top: -160px; right: -80px; background: var(--accent); animation: drift 18s ease-in-out infinite alternate; }
.bg-orb-2 { width: 420px; height: 420px; top: 30%; left: -160px; background: var(--warm); opacity: calc(var(--orb-opacity) * 0.55); animation: drift 22s ease-in-out infinite alternate-reverse; }
.bg-orb-3 { width: 360px; height: 360px; bottom: -140px; right: 15%; background: var(--accent-soft); opacity: calc(var(--orb-opacity) * 0.65); animation: drift 26s ease-in-out infinite alternate; }

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(40px, 60px) scale(1.06); }
}

/* ============ shared bits ============ */
.eyebrow { margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }

.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warm);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 172, 10, 0.5); }
  50% { box-shadow: 0 0 0 7px rgba(255, 172, 10, 0); }
}

.gradient-text {
  background: linear-gradient(100deg, var(--grad-edge) 10%, var(--grad-core) 55%, var(--grad-edge) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-shift 8s ease-in-out infinite alternate;
}
@keyframes gradient-shift {
  from { background-position: 0% center; }
  to { background-position: 100% center; }
}

.section { padding: 72px 24px; }
.section-sub { color: var(--muted); max-width: 580px; margin-top: 14px; }

/* page header for inner pages */
.page-head { padding: 150px 24px 10px; }
.page-head h1 { font-size: clamp(1.75rem, 1.05rem + 3.1vw, 3.4rem); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  cursor: pointer;
}
.btn .material-symbols-outlined { font-size: 18px; transition: transform 0.2s ease; }
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:hover .material-symbols-outlined { transform: translateX(3px); }
.btn-ghost:hover .material-symbols-outlined { transform: translateY(2px); }
.btn:active { transform: translateY(0) scale(0.99); }

.btn-primary {
  background: linear-gradient(100deg, var(--accent), var(--accent-deep));
  color: #ffffff;
  box-shadow: 0 0 24px rgb(var(--accent-rgb) / 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-primary:hover { box-shadow: 0 0 38px rgb(var(--accent-rgb) / 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3); }

.btn-ghost {
  border-color: var(--glass-border);
  color: var(--text);
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.btn-ghost:hover { border-color: var(--glass-border-hover); background: var(--glass-strong); }
.btn-sm { padding: 9px 18px; font-size: 0.85rem; }

/* scroll reveal — only hidden when JS is available to reveal it again */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .bg-orb, .pulse-dot, .gradient-text { animation: none; }
  html { scroll-behavior: auto; }
}

/* ============ nav (floating glass pill) ============ */
.nav {
  position: fixed; top: 14px; left: 0; right: 0; z-index: 50;
  padding: 0 16px;
  display: flex; justify-content: center;
}
.nav-pill {
  width: 100%; max-width: 1080px;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
  padding: 0 12px 0 22px;
  border-radius: 999px;
}
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
/* The mark is inlined SVG filled with currentColor, so it follows the accent
   picker. The standalone SVG files carry a color="#00A96B" presentation
   attribute as their default; the inlined copies deliberately drop it, because
   a presentation attribute outranks this inherited color and would freeze the
   mark on emerald whatever the picker says. */
/* 28px, not smaller. The mark stacks nine features (five slices on four bars)
   and below about 24px the bars stop resolving as four and smear into one
   foot. 28px keeps every band above 1.2px. */
.brand-mark {
  color: var(--accent);
  display: inline-flex;
  width: 28px;
  height: 28px;
}
.brand-mark svg { display: block; width: 100%; height: 100%; }
.brand-dim { color: var(--muted); font-weight: 400; }

.nav-links { display: flex; align-items: center; gap: 26px; font-size: 0.9rem; color: var(--muted); }
.nav-links a { transition: color 0.2s ease; }
.nav-links a:not(.btn):hover, .nav-links a.active { color: var(--text); }
.nav-cta { color: #ffffff; }

.nav-actions { display: flex; align-items: center; gap: 8px; }

.theme-toggle {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.theme-toggle:hover { border-color: var(--glass-border-hover); transform: rotate(15deg); }
.theme-toggle .material-symbols-outlined { font-size: 19px; }

/* ---- accent picker: same glass pill and sizing as the theme toggle, but it
       shows the live accent as a filled dot and opens a three-swatch popover ---- */
.accent-picker { position: relative; display: inline-flex; }

.accent-toggle {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.accent-toggle:hover { border-color: var(--glass-border-hover); transform: scale(1.08); }

.accent-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / 0.35), 0 0 10px rgb(var(--accent-rgb) / 0.55);
  flex-shrink: 0;
}

.accent-menu {
  position: absolute;
  top: 50px; right: 0;
  z-index: 60;
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 158px;
  padding: 6px;
  background: var(--menu-bg);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.accent-menu[hidden] { display: none; }

.accent-swatch {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.accent-swatch:hover { color: var(--text); background: var(--input-bg); }
.accent-swatch[aria-checked="true"] { color: var(--text); border-color: var(--glass-border-hover); }

.accent-swatch .accent-dot { width: 14px; height: 14px; box-shadow: 0 0 0 1px rgba(11, 18, 32, 0.12); }
.accent-swatch[data-accent="emerald"] .accent-dot { background: var(--sw-emerald); }
.accent-swatch[data-accent="electric"] .accent-dot { background: var(--sw-electric); }
.accent-swatch[data-accent="pine"] .accent-dot { background: var(--sw-pine); }

.accent-check { margin-left: auto; font-size: 16px; color: var(--accent-soft); opacity: 0; }
.accent-swatch[aria-checked="true"] .accent-check { opacity: 1; }

/* the nav controls are the only keyboard targets floating over glass, so they
   carry their own ring instead of relying on the UA default */
.theme-toggle:focus-visible,
.accent-toggle:focus-visible,
.accent-swatch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.nav-toggle { display: none; background: none; border: none; flex-direction: column; gap: 6px; padding: 12px; cursor: pointer; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.2s ease; }

/* ============ hero ============ */
.hero { padding: 150px 24px 80px; text-align: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-radius: 999px;
  padding: 9px 20px;
  margin-bottom: 26px;
  animation: float 6s ease-in-out infinite;
}
/* the badge links to the values page, so it has to read as clickable */
.badge-arrow {
  font-size: 15px;
  color: var(--accent-soft);
  transition: transform 0.25s ease;
}
a.hero-badge { transition: border-color 0.25s ease; }
a.hero-badge:hover { border-color: var(--glass-border-hover); }
a.hero-badge:hover .badge-arrow { transform: translateX(3px); }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) { .hero-badge { animation: none; } }

.hero-sub { color: var(--muted); max-width: 620px; margin: 22px auto 0; font-size: clamp(0.95rem, 0.88rem + 0.35vw, 1.05rem); }
.hero-cta { display: flex; gap: 14px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }

.hero-stats {
  display: flex; justify-content: center; align-items: center; gap: 36px;
  margin: 64px auto 0;
  width: fit-content;
  padding: 24px 44px;
  border-radius: var(--r-lg);
  flex-wrap: wrap;
}
.hero-stats dt {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 600;
  background: linear-gradient(100deg, var(--grad-edge), var(--grad-core));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-stats dd { color: var(--muted); font-size: 0.86rem; max-width: 160px; }
.stat-divider { width: 1px; height: 44px; background: var(--glass-border); }

/* ============ vertical cards (homepage, equal weight) ============ */
.vertical-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 44px;
}
.vertical-card {
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.vertical-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
  box-shadow: var(--surface-highlight), 0 14px 44px rgb(var(--accent-rgb) / 0.12);
}
.vertical-card:hover .icon-tile { transform: translateY(-3px) scale(1.05); }
.vertical-card h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.45rem); margin-top: 8px; }
.vertical-card > p { color: var(--muted); font-size: 0.95rem; }
.mini-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.mini-tags span {
  font-size: 0.74rem; font-weight: 500;
  color: var(--accent-soft);
  border: 1px solid rgb(var(--accent-rgb) / 0.3);
  border-radius: 999px; padding: 3px 12px;
}
.card-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text); font-weight: 500; font-size: 0.92rem;
  margin-top: 10px;
}
.card-link .material-symbols-outlined { font-size: 18px; transition: transform 0.2s ease; }
.vertical-card:hover .card-link { color: var(--accent-soft); }
.vertical-card:hover .card-link .material-symbols-outlined { transform: translateX(3px); }

/* ============ verticals (services page) ============ */
.vertical {
  margin-top: 40px;
  border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.vertical:hover { border-color: rgb(var(--accent-rgb) / 0.28); }
.vertical-head { display: flex; align-items: center; gap: 18px; }
.vertical-head h2 { font-size: clamp(1.35rem, 1.15rem + 0.75vw, 1.6rem); letter-spacing: -0.01em; }
.vertical-desc { color: var(--muted); max-width: 640px; margin-top: 18px; }

.services-list { margin-top: 28px; border-top: 1px solid var(--glass-border); }
.service-row {
  display: grid;
  grid-template-columns: 46px 280px 1fr;
  gap: 20px;
  align-items: center;
  padding: 22px 16px;
  border-bottom: 1px solid var(--row-divider);
  border-radius: var(--r-md);
  transition: background 0.25s ease;
}
.service-row:last-child { border-bottom: none; }
.service-row:hover { background: var(--glass); }
.service-row:hover .icon-tile { transform: translateY(-3px) scale(1.05); }
.service-row p { color: var(--muted); font-size: 0.93rem; }

/* ============ stack ============ */
.stack {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding-top: 8px; padding-bottom: 8px;
}
.stack-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; }
.stack-list li {
  font-size: 0.84rem; font-weight: 500; color: var(--muted);
  border-radius: 999px; padding: 7px 16px;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.stack-list li:hover { color: var(--text); border-color: var(--glass-border-hover); transform: translateY(-2px); }

/* ============ cta band ============ */
.cta-band {
  border-radius: var(--r-lg);
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
  background:
    radial-gradient(ellipse 60% 90% at 85% 10%, rgb(var(--accent-rgb) / 0.12), transparent),
    var(--glass);
}
.cta-band p { color: var(--muted); margin: 12px auto 24px; max-width: 480px; }

/* ============ approach ============ */
.approach-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 44px;
}
.approach-item {
  border-radius: var(--r-lg);
  padding: 28px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.approach-item:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
  box-shadow: var(--surface-highlight), 0 14px 44px rgb(var(--accent-rgb) / 0.1);
}
.approach-item:hover .icon-tile { transform: translateY(-3px) scale(1.05); }
.approach-item h3 { margin: 16px 0 8px; }
.approach-item p { color: var(--muted); font-size: 0.93rem; }

/* ============ careers ============ */
.perks { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.perk {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.88rem;
  color: var(--text);
}
.perk .material-symbols-outlined { font-size: 18px; color: var(--accent-soft); }

.careers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}
.career-card {
  border-radius: var(--r-lg);
  padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.career-card:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
  box-shadow: var(--surface-highlight), 0 14px 44px rgb(var(--accent-rgb) / 0.1);
}
.career-card:hover .icon-tile { transform: translateY(-3px) scale(1.05); }
.career-card h3 { margin-top: 6px; }
.career-card p { color: var(--muted); font-size: 0.92rem; flex-grow: 1; }
.career-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.career-tags span {
  font-size: 0.74rem; font-weight: 500;
  color: var(--accent-soft);
  border: 1px solid rgb(var(--accent-rgb) / 0.3);
  border-radius: 999px; padding: 3px 12px;
}
.career-apply {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text); font-weight: 500; font-size: 0.92rem;
  margin-top: 6px;
  transition: color 0.2s ease;
}
.career-apply .material-symbols-outlined { font-size: 18px; transition: transform 0.2s ease; }
.career-apply:hover { color: var(--accent-soft); }
.career-apply:hover .material-symbols-outlined { transform: translate(2px, -2px); }

.careers-note { color: var(--muted); font-size: 0.9rem; margin-top: 28px; }
.careers-note a { color: var(--accent-soft); }

/* ============ contact (shared bits; the page layout lives in its own section below) ============ */
.form-hint { font-size: 0.78rem; color: var(--muted); }
.contact-value { font-weight: 500; }

/* ============ footer (glass pill) ============ */
.footer { padding-top: 20px; padding-bottom: 28px; }
.footer-pill {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  border-radius: 999px;
  padding: 16px 30px;
  flex-wrap: wrap;
}
.footer-links { display: flex; gap: 22px; font-size: 0.88rem; color: var(--muted); flex-wrap: wrap; }
.footer-links a { transition: color 0.2s ease; }
.footer-links a:hover { color: var(--text); }
.footer-copy { color: var(--muted); font-size: 0.82rem; }

/* ============ responsive ============ */
@media (max-width: 860px) {
  .vertical-cards { grid-template-columns: 1fr; }
  .service-row {
    grid-template-columns: 46px 1fr;
    gap: 8px 16px;
    padding: 20px 10px;
  }
  .service-row p { grid-column: 2; }
  .approach-grid { grid-template-columns: 1fr; }
  .careers-grid { grid-template-columns: 1fr; }
  .footer-pill { justify-content: center; text-align: center; border-radius: var(--r-lg); }
}

@media (max-width: 720px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute; top: 74px; left: 16px; right: 16px;
    flex-direction: column; align-items: flex-start;
    gap: 4px;
    background: var(--menu-bg);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-lg);
    padding: 14px 22px 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 0; width: 100%; }
  .nav-links .nav-cta { width: auto; margin-top: 8px; padding: 9px 18px; }
  .hero { padding-top: 130px; }
  .page-head { padding-top: 130px; }
  .stat-divider { display: none; }
  .hero-stats { gap: 24px; padding: 22px 28px; }
  .vertical-head { align-items: flex-start; }
}

/* ============ stack logos ============ */
.stack-list li { display: inline-flex; align-items: center; gap: 8px; }
.stack-list li svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor; /* inherits chip text color, so logos work in both themes */
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.stack-list li svg.logo-wide { width: 26px; } /* AWS wordmark is wider than tall */
.stack-list li:hover svg { opacity: 1; }

/* ============ customers ============ */
.customer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 44px;
}
.customer-chip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px 12px 12px;
  border-radius: var(--r-md);
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--surface-highlight), var(--surface-shadow);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.customer-chip:hover {
  transform: translateY(-4px);
  border-color: var(--glass-border-hover);
  box-shadow: var(--surface-highlight), 0 14px 44px rgb(var(--accent-rgb) / 0.12);
}
/* white backdrop so JPEG logos (white background) look clean in both themes */
.customer-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 8px 14px;
}
.customer-logo img {
  height: 40px;
  width: auto;
  display: block;
}
.customer-label {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
}
.customer-text { display: flex; flex-direction: column; gap: 3px; max-width: 320px; }
.customer-desc { color: var(--muted); font-size: 0.82rem; line-height: 1.45; }
.customer-logo-mono {
  min-width: 66px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: #0b1220;
  justify-content: center;
}

@media (max-width: 720px) {
  .customer-row {
    flex-direction: column;
    align-items: center;
  }
  .customer-chip {
    width: 100%;
    max-width: 300px;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    text-align: center;
  }
}

/* ============ job post pages ============ */
.careers-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .careers-grid-2 { grid-template-columns: 1fr; } }

.job-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 0.88rem; font-weight: 500;
  margin-bottom: 22px;
  transition: color 0.2s ease;
}
.job-back:hover { color: var(--text); }
.job-back .material-symbols-outlined { font-size: 17px; }

.page-head .perks { margin-top: 26px; }
.job-head-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

.job-panel {
  border-radius: var(--r-lg);
  padding: clamp(28px, 5vw, 56px);
}
.job-body h2 {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  margin-top: 44px;
}
.job-body h2:first-child { margin-top: 0; }
.job-body p { color: var(--muted); margin-top: 14px; max-width: 720px; }
.job-body p, .job-body li, .job-callout { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.job-body p.job-sub { text-align: left; }
.job-body p strong, .job-body li strong { color: var(--text); font-weight: 600; }
.job-body a { color: var(--accent-soft); }

.job-sub {
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-top: 22px;
}
.job-body p.job-sub { color: var(--accent-soft); }

.job-body ul {
  list-style: none;
  margin-top: 14px;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 760px;
}
.job-body li {
  color: var(--muted);
  font-size: 0.95rem;
  position: relative;
  padding-left: 24px;
}
.job-body li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-soft);
  opacity: 0.65;
}

.job-callout {
  margin-top: 18px;
  max-width: 720px;
  padding: 16px 22px;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--input-bg);
  color: var(--muted);
}
.job-callout strong { color: var(--text); font-weight: 600; }

/* ============ work-with-us nav ============ */
/* two CTAs crowd the pill just above the mobile breakpoint: hide the secondary one */
@media (min-width: 721px) and (max-width: 840px) {
  .nav-cta-secondary { display: none; }
}
/* mobile dropdown: both CTAs stack as pills, secondary first */
@media (max-width: 720px) {
  .nav-links .nav-cta-secondary { width: auto; margin-top: 8px; padding: 9px 18px; }
  .nav-links .nav-cta { margin-top: 4px; }
}

/* ============ world map + live clocks (contact) ============ */
/* the map primitives only; the card around them lives in the contact page section */
/* viewBox is 1000x500 (2:1), so 600px wide lands at exactly 300px tall */
.tz-svg { display: block; width: 100%; height: auto; max-height: 300px; }

/* background layer: never competes with the markers */
.tz-land {
  fill: var(--tz-land);
  stroke: var(--tz-land-edge);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}

.tz-dot { fill: var(--accent); }
.tz-ring {
  fill: var(--tz-halo);
  stroke: var(--tz-halo-edge);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  animation: tz-pulse 2.8s ease-out infinite;
}
/* staggered so the nine markers do not breathe in unison */
.tz-marker:nth-of-type(2) .tz-ring { animation-delay: 0.3s; }
.tz-marker:nth-of-type(3) .tz-ring { animation-delay: 0.6s; }
.tz-marker:nth-of-type(4) .tz-ring { animation-delay: 0.9s; }
.tz-marker:nth-of-type(5) .tz-ring { animation-delay: 1.2s; }
.tz-marker:nth-of-type(6) .tz-ring { animation-delay: 1.5s; }
.tz-marker:nth-of-type(7) .tz-ring { animation-delay: 1.8s; }
.tz-marker:nth-of-type(8) .tz-ring { animation-delay: 2.1s; }
.tz-marker:nth-of-type(9) .tz-ring { animation-delay: 2.4s; }

@keyframes tz-pulse {
  0% { transform: scale(0.5); opacity: 0.75; }
  70% { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1.3); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tz-ring { animation: none; opacity: 0.7; transform: none; }
}

.tz-time {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.15;
  min-height: 1.15em; /* holds the row while it still reads --:-- */
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-kerning: none;
}
.tz-abbr {
  min-width: 18px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
}

@media (max-width: 860px) {
  .tz-svg { max-height: none; }
}

/* ============ footer meta (address + GSTIN) ============ */
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 30px;
  margin-top: 18px;
  padding: 0 10px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}
.footer-meta-item { display: inline-flex; align-items: center; gap: 7px; }
.footer-meta-item .material-symbols-outlined {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
  color: var(--accent-soft);
  opacity: 0.65;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 20;
}

@media (max-width: 720px) {
  .footer-meta { flex-direction: column; gap: 10px; margin-top: 16px; }
  .footer-meta-item { align-items: flex-start; text-align: left; }
  .footer-meta-item .material-symbols-outlined { margin-top: 2px; }
}

/* ============ contact page layout ============ */
/* Coverage map on the left, form on the right, tuned so a first time visitor
   sees the clocks, the form and the office details without scrolling.
   Only the contact page uses these classes. */

/* ---- glass surface for the contact cards ---- */
.cb-card, .cb-reach-item {
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--surface-highlight), var(--surface-shadow);
  border-radius: var(--r-lg);
}

/* ---- compact head: buys back the vertical space the map costs ---- */
.cb-head { padding: 102px 24px 0; }
.cb-head h1 {
  font-size: clamp(1.6rem, 0.95rem + 2.2vw, 2.25rem);
  margin-bottom: 6px;
}
.cb-sub { color: var(--muted); max-width: 640px; font-size: 0.92rem; }

/* ---- the fold-aware two column grid ---- */
.cb-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  align-items: start;
  gap: 18px;
  padding: 16px 24px 36px;
}

/* ---- left: coverage ---- */
.cb-coverage {
  /* local tokens so the map silhouette can flip with the theme */
  --tz-land: rgba(11, 18, 32, 0.1);
  --tz-land-edge: rgba(11, 18, 32, 0.05);
  --tz-halo: rgb(var(--accent-rgb) / 0.18);
  --tz-halo-edge: rgb(var(--accent-rgb) / 0.32);
  padding: 20px 22px 18px;
}
html[data-theme="dark"] .cb-coverage {
  --tz-land: rgba(255, 255, 255, 0.11);
  --tz-land-edge: rgba(255, 255, 255, 0.07);
  --tz-halo: rgb(var(--accent-soft-rgb) / 0.22);
  --tz-halo-edge: rgb(var(--accent-soft-rgb) / 0.4);
}

.cb-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.cb-card-title { font-size: 1.05rem; font-weight: 500; color: var(--text); }
.cb-card-note { font-size: 0.72rem; color: var(--muted); }

/* viewBox is 2:1, so the width cap sets the height */
.cb-map { width: 100%; max-width: 460px; margin: 0 auto 2px; }
.cb-map .tz-svg { display: block; width: 100%; height: auto; }

/* four regions, two up: keeps the card as short as the form */
.cb-zones {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  padding-top: 12px;
  border-top: 1px solid var(--row-divider);
}
.cb-zone { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cb-zone-region { font-size: 0.88rem; font-weight: 500; color: var(--text); }
.cb-clocks { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.cb-clock { display: flex; align-items: baseline; gap: 5px; }
.cb-time {
  /* smaller than the .tz-time default: four clocks have to fit one row */
  font-size: 1rem;
  line-height: 1.2;
  min-height: 0;
}
.cb-zone-note { font-size: 0.72rem; color: var(--muted); }

/* ---- right: form, then the ways to reach us ---- */
.cb-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cb-form { padding: 18px 20px; gap: 10px; }
.cb-form label { display: flex; flex-direction: column; gap: 5px; font-size: 0.82rem; color: var(--muted); }
.cb-form input,
.cb-form textarea {
  background: var(--input-bg);
  border: 1px solid var(--glass-border);
  border-radius: 13px;
  padding: 10px 14px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  transition: border-color 0.2s ease, background 0.2s ease;
  resize: vertical;
}
.cb-form input:focus,
.cb-form textarea:focus {
  outline: none;
  border-color: var(--glass-border-hover);
  background: var(--input-bg-focus);
}
.cb-form .btn { align-self: flex-start; margin-top: 2px; }

.cb-reach {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cb-reach-item {
  display: flex; align-items: center; gap: 11px;
  border-radius: var(--r-md);
  padding: 9px 13px;
  min-width: 0;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
a.cb-reach-item:hover { border-color: var(--glass-border-hover); transform: translateY(-2px); }
a.cb-reach-item:hover .icon-tile { transform: scale(1.05); }
.cb-reach-item .icon-tile { width: 38px; height: 38px; border-radius: 12px; font-size: 20px; }
.cb-reach-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cb-reach-text .contact-value { font-size: 0.84rem; font-weight: 500; line-height: 1.35; }

/* office and GSTIN are the long ones: let them span the full row */
.cb-reach-item:nth-child(3),
.cb-reach-item:nth-child(4) { grid-column: 1 / -1; }

/* ---- short laptops (768px tall and under): claw back the last ~40px so
       the GSTIN tile still clears the fold. Only fires on wide+short
       screens, so tall monitors keep the roomier spacing above. ---- */
@media (min-width: 901px) and (max-height: 820px) {
  .cb-head { padding-top: 94px; }
  .cb-head h1 { font-size: 1.9rem; }
  .cb-grid { padding-top: 12px; }
  .cb-map { max-width: 400px; }
  /* the right column, not the map, is what sets the page height here */
  .cb-form { padding: 16px 18px; gap: 8px; }
  .cb-form .form-hint { font-size: 0.72rem; }
  .cb-reach { gap: 7px; }
  .cb-reach-item { padding: 8px 12px; }
  .cb-reach-item .icon-tile { width: 34px; height: 34px; border-radius: 11px; font-size: 19px; }
}

/* ---- narrow desktop: the map is what gives, not the form ---- */
@media (max-width: 1180px) {
  .cb-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr); gap: 16px; }
  .cb-map { max-width: 440px; }
}

/* ---- stacked: form first, coverage second.
       Side by side the map can sit left, but once it stacks, a map above
       the form would push the form off a phone screen. The visitor came
       here to reach us, so the form takes the fold and the map follows. ---- */
@media (max-width: 900px) {
  .cb-grid { grid-template-columns: 1fr; padding-top: 18px; }
  .cb-head { padding-top: 104px; }
  .cb-right { order: 1; }
  .cb-coverage { order: 2; }
  .cb-map { max-width: 520px; }
  .cb-zones { gap: 12px 16px; }
}

@media (max-width: 560px) {
  .cb-zones { grid-template-columns: 1fr; }
  .cb-reach { grid-template-columns: 1fr; }
  .cb-reach-item:nth-child(3),
  .cb-reach-item:nth-child(4) { grid-column: auto; }
}