/* Olans FIXZIT Concept — design tokens
   Checked black tiled background with a cool graphite overlay layer
   (panels, cards, lines), rounder corners echoing the logo's organic petal shapes, and
   the full five-petal color set used as a genuine rotating palette across
   icons and accents rather than one color standing in for the whole brand.
   Type: Space Grotesk (display/technical headings) + IBM Plex Sans (body/UI). */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Page background: the checked black tiles. A neutral graphite base with a
     faint 48px grid, set apart from --ink so it can be changed on its own
     without touching the header, panels or cards. */
  --page-bg: #12151a;
  --page-grid: #21262f;
  /* Overlay layer: everything drawn on top of the tiles (header border,
     sections, cards, panels, inputs, dividers) uses the same cool graphite
     family as the tiles, so the page reads as one black checked surface. */
  --ink: #12151a;
  --panel: #181c24;
  --panel-raised: #1f2530;
  --line: #2b3140;
  --line-soft: #21262f;
  /* The five logo petals, used as a real rotating palette (see
     .petal-0..4 below) rather than one accent standing in for all of them. */
  --accent: #ea5850;
  --accent-soft: #6e2a24;
  --teal: #2f95c4;
  --success: #46a24c;
  --tan: #a89484;
  --text: #eeeeea;
  --text-muted: #a2a8b5;
  --text-faint: #5d6474;
  --danger: #e35a8c;
  --radius-sm: 7px;
  --radius-md: 13px;
  --content-width: 1180px;
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* The five petal colors in the logo's own rotation order, for anywhere a
   set of equal-weight items (service icons, stat tiles) should echo the
   pinwheel rather than repeat one accent five times. */
.petal-0 { color: var(--accent) !important; }
.petal-1 { color: var(--teal) !important; }
.petal-2 { color: var(--success) !important; }
.petal-3 { color: var(--danger) !important; }
.petal-4 { color: var(--tan) !important; }
.stat.petal-0 .n { color: var(--accent); }
.stat.petal-1 .n { color: var(--teal); }
.stat.petal-2 .n { color: var(--success); }
.stat.petal-3 .n { color: var(--danger); }
.stat.petal-4 .n { color: var(--tan); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--page-bg);
  background-image:
    linear-gradient(var(--page-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--page-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  color: #fff;
}

p { margin: 0 0 1em; color: var(--text-muted); max-width: 62ch; }

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

/* ---------- Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(18, 21, 26, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  max-width: var(--content-width);
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
}
.brand-mark {
  width: 30px; height: 30px;
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  position: relative;
}
.brand-logo-img { height: 46px; width: auto; display: block; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); }
.footer-col .brand-logo-img { height: 38px; }
.admin-sidebar .brand-logo-img { height: 32px; }
.brand-mark::after {
  content: '';
  position: absolute;
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  top: -3px; right: -3px;
}
.nav-links {
  display: flex;
  gap: 30px;
  align-items: center;
}
.nav-links a {
  font-size: 0.92rem;
  color: var(--text-muted);
  transition: color 0.15s ease;
}
.nav-links a:hover, .nav-links a.active { color: #fff; }
.nav-cta {
  border: 1px solid var(--accent-soft);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  color: var(--accent) !important;
  font-size: 0.88rem !important;
}
.nav-cta:hover { background: rgba(234, 88, 80, 0.08); border-color: var(--accent); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--text); padding: 8px 10px; font-size: 1rem; }

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 28px 18px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 0; width: 100%; border-bottom: 1px solid var(--line-soft); }
}

/* ---------- Hero ---------- */
.hero {
  padding: 96px 0 84px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; padding: 56px 0 48px; } }

.hero-kicker {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--accent);
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.hero-kicker::before { content: ''; width: 22px; height: 1px; background: var(--accent); display: inline-block; }

.hero h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.35rem);
  line-height: 1.12;
  max-width: 16ch;
  margin-bottom: 22px;
}
.hero p.lead { font-size: 1.08rem; max-width: 46ch; color: var(--text-muted); margin-bottom: 30px; }

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 500;
  font-family: var(--font-body);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--accent); color: #16130b; }
.btn-primary:hover { background: #edb257; }
.btn-outline { border-color: var(--line); color: var(--text); background: transparent; }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 8px 14px; font-size: 0.85rem; }
.btn-danger { background: var(--danger); color: #1a0a10; }

/* schematic diagram */
.schematic {
  position: relative;
  height: 360px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  overflow: hidden;
}
.schematic svg { width: 100%; height: 100%; }
.schematic .node-label {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--text-muted);
}
.schematic .node-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  fill: #fff;
}
.schematic .flow-line {
  stroke: var(--line);
  stroke-width: 1.5;
  fill: none;
}
.schematic .flow-line.active {
  stroke: var(--accent);
  stroke-dasharray: 4 4;
  animation: dash 22s linear infinite;
}
@keyframes dash { to { stroke-dashoffset: -400; } }
.schematic .node-dot { fill: var(--ink); stroke: var(--accent); stroke-width: 1.5; }
.schematic .node-dot.teal { stroke: var(--teal); }

/* ---------- Sections ---------- */
section { padding: 84px 0; border-top: 1px solid var(--line-soft); }
section:first-of-type { border-top: none; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 48px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); max-width: 20ch; }
.section-head .section-note { max-width: 40ch; margin: 0; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 56px 0 0;
}
.stat { background: var(--panel); padding: 26px 22px; }
.stat .n { font-family: var(--font-display); font-size: 1.9rem; color: var(--accent); display: block; }
.stat-row .stat:nth-child(1) .n { color: var(--accent); }
.stat-row .stat:nth-child(2) .n { color: var(--teal); }
.stat-row .stat:nth-child(3) .n { color: var(--success); }
.stat-row .stat:nth-child(4) .n { color: var(--tan); }
.stat .l { font-size: 0.85rem; color: var(--text-muted); }
@media (max-width: 760px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Services grid ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .services-grid { grid-template-columns: 1fr; } }

.service-card {
  background: var(--panel);
  padding: 30px 26px;
  display: block;
  transition: background 0.15s ease;
}
.service-card:hover { background: var(--panel-raised); }
.service-icon {
  width: 34px; height: 34px;
  color: var(--accent);
  margin-bottom: 18px;
  display: block;
}
.service-icon svg { width: 100%; height: 100%; display: block; }
.services-grid .service-card:nth-child(5n+1) .service-icon { color: var(--accent); }
.services-grid .service-card:nth-child(5n+2) .service-icon { color: var(--teal); }
.services-grid .service-card:nth-child(5n+3) .service-icon { color: var(--success); }
.services-grid .service-card:nth-child(5n+4) .service-icon { color: var(--danger); }
.services-grid .service-card:nth-child(5n+5) .service-icon { color: var(--tan); }
.service-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.service-card p { font-size: 0.92rem; margin-bottom: 0; }

/* ---------- Portfolio (ledger list, not cards) ---------- */
.ledger { border-top: 1px solid var(--line); }
.ledger-row {
  display: grid;
  grid-template-columns: 84px 96px 1fr 40px;
  gap: 22px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left 0.15s ease;
}
.ledger-row:hover { padding-left: 6px; }
.ledger-row a.row-link { display: contents; }
.ledger-thumb {
  width: 84px; height: 60px; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--line); background: var(--panel);
  flex-shrink: 0;
}
.ledger-thumb svg, .ledger-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ledger-sector { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-faint); }
.ledger-main h3 { font-size: 1.12rem; margin-bottom: 6px; }
.ledger-main p { margin: 0; font-size: 0.92rem; }
.ledger-arrow { color: var(--text-faint); font-size: 1.2rem; text-align: right; }
@media (max-width: 760px) {
  .ledger-row { grid-template-columns: 72px 1fr; gap: 14px; }
  .ledger-sector { grid-column: 2; }
  .ledger-arrow { text-align: left; grid-column: 2; }
}

.project-thumb-hero {
  width: 100%; max-height: 320px; border-radius: var(--radius-md);
  overflow: hidden; border: 1px solid var(--line); background: var(--panel);
  margin: 28px 0 8px;
}
.project-thumb-hero svg, .project-thumb-hero img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; max-height: 320px; }

.screenshot-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 700px) { .screenshot-gallery { grid-template-columns: 1fr; } }
.screenshot-card {
  margin: 0; border: 1px solid var(--line); border-radius: var(--radius-md);
  overflow: hidden; background: var(--panel);
}
.screenshot-card img { width: 100%; display: block; }
.screenshot-card figcaption { padding: 10px 14px; font-size: 0.84rem; color: var(--text-muted); }

.project-detail .meta-row {
  display: flex; gap: 28px; flex-wrap: wrap;
  padding: 22px 0; margin-bottom: 30px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.meta-item .k { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); display: block; margin-bottom: 4px; }
.meta-item .v { font-size: 0.94rem; color: var(--text); }
.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.feature-list li { padding-left: 22px; position: relative; color: var(--text); font-size: 0.96rem; }
.feature-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 1.5px; background: var(--accent); }

/* ---------- Testimonials ---------- */
.testimonial {
  border-left: 2px solid var(--accent);
  padding: 6px 0 6px 26px;
  margin-bottom: 34px;
}
.testimonial:nth-of-type(5n+2) { border-left-color: var(--teal); }
.testimonial:nth-of-type(5n+3) { border-left-color: var(--success); }
.testimonial:nth-of-type(5n+4) { border-left-color: var(--danger); }
.testimonial:nth-of-type(5n+5) { border-left-color: var(--tan); }
.testimonial p.quote { font-family: var(--font-display); font-size: 1.25rem; color: #fff; font-weight: 500; line-height: 1.45; margin-bottom: 14px; max-width: 56ch; }
.testimonial .who { font-size: 0.86rem; color: var(--text-muted); font-family: var(--font-mono); }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.faq-item { background: var(--panel); }
.faq-item summary {
  cursor: pointer; padding: 18px 22px; font-family: var(--font-display); font-weight: 600;
  font-size: 1rem; color: #fff; list-style: none; position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; color: var(--accent); font-size: 1.3rem; font-family: var(--font-body);
  flex-shrink: 0; transition: transform 0.15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 22px 20px; margin: 0; max-width: 68ch; }

/* ---------- Contact / forms ---------- */
.contact-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-detail { display: grid; gap: 22px; }
.contact-detail .item .k { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-faint); display: block; margin-bottom: 4px; }
.contact-detail .item .v { font-size: 1.02rem; }

.field { margin-bottom: 20px; }
.field label { display: block; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input[type="file"] { padding: 10px; background: var(--panel); }
.upload-preview {
  display: flex; align-items: center; gap: 16px; margin-bottom: 14px;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel);
}
.upload-preview .swatch { width: 72px; height: 52px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); flex-shrink: 0; }
.upload-preview .swatch svg, .upload-preview .swatch img { width: 100%; height: 100%; object-fit: cover; }
.upload-preview .swatch.logo-swatch { background: #fff; display: flex; align-items: center; justify-content: center; }
.upload-preview .swatch.logo-swatch img { object-fit: contain; }
.form-note { font-size: 0.82rem; color: var(--text-faint); margin-top: 14px; }

.alert { padding: 14px 16px; border-radius: var(--radius-sm); font-size: 0.9rem; margin-bottom: 24px; border: 1px solid; }
.alert-success { background: rgba(70, 162, 76, 0.1); border-color: var(--success); color: var(--success); }
.alert-error { background: rgba(227, 90, 140, 0.08); border-color: var(--danger); color: var(--danger); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 32px;
  margin-top: 40px;
}
.footer-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 32px; }
.footer-col h4 { font-size: 0.85rem; color: var(--text-muted); font-family: var(--font-body); font-weight: 600; margin-bottom: 14px; }
.footer-col a, .footer-col p { display: block; font-size: 0.88rem; color: var(--text-muted); margin-bottom: 8px; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 24px; border-top: 1px solid var(--line-soft); font-size: 0.8rem; color: var(--text-faint); }

/* ---------- Admin ---------- */
.admin-shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
@media (max-width: 800px) { .admin-shell { grid-template-columns: 1fr; } }
.admin-sidebar { background: var(--panel); border-right: 1px solid var(--line); padding: 24px 18px; }
.admin-sidebar .brand { margin-bottom: 30px; padding: 0 6px; }
.admin-sidebar nav a {
  display: block; padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 0.92rem; color: var(--text-muted); margin-bottom: 2px;
}
.admin-sidebar nav a:hover { background: var(--panel-raised); color: var(--text); }
.admin-sidebar nav a.active { background: var(--panel-raised); color: var(--accent); }
.view-site-link {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.82rem; color: var(--teal);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; margin-bottom: 20px;
  transition: border-color 0.15s ease;
}
.view-site-link:hover { border-color: var(--teal); }
.admin-main { padding: 32px 40px; max-width: 1000px; }
.admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.admin-topbar h1 { font-size: 1.5rem; }

.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th { text-align: left; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); font-weight: 500; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.table td { padding: 14px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.table tr:hover td { background: var(--panel); }
.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 0.72rem; font-family: var(--font-mono); }
.badge-live { background: rgba(70,162,76,0.14); color: var(--success); }
.badge-hidden { background: rgba(93,100,116,0.2); color: var(--text-faint); }
.badge-new { background: rgba(234,88,80,0.15); color: var(--accent); }

.card-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 26px; margin-bottom: 24px; }
.login-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-box { width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 36px; }
.login-box .brand { justify-content: center; margin-bottom: 24px; }
.row-actions { display: flex; gap: 10px; }
.text-muted-sm { font-size: 0.82rem; color: var(--text-faint); }
.dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 36px; }
@media (max-width: 800px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } }
.dash-tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px; }
.dash-tile .n { font-family: var(--font-display); font-size: 1.7rem; color: var(--accent); }
.dash-tile .l { font-size: 0.82rem; color: var(--text-muted); }

.brand-uses { margin: 0 0 18px 18px; padding: 0; font-size: 0.85rem; color: var(--text-muted); columns: 2; column-gap: 28px; }
.brand-uses li { margin-bottom: 4px; break-inside: avoid; }
@media (max-width: 700px) { .brand-uses { columns: 1; } }

/* ---------- Careers & Investor relations ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.steps li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 22px 24px; background: var(--panel); }
.steps .step-n { font-family: var(--font-mono); font-size: 0.9rem; color: var(--accent); padding-top: 3px; }
.steps h3 { font-size: 1.05rem; margin-bottom: 6px; }
.steps p { margin: 0; max-width: 70ch; }
.jobs { border-top: 1px solid var(--line); margin-bottom: 40px; }
.job-row { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); transition: padding-left 0.15s ease; }
.job-row:hover { padding-left: 6px; }
.job-main h3 { font-size: 1.15rem; margin-bottom: 6px; }
.job-main p { margin: 0 0 10px; font-size: 0.94rem; max-width: 70ch; }
.job-side { display: flex; align-items: center; gap: 18px; }
.job-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.job-meta span { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); border: 1px solid var(--line); border-radius: 20px; padding: 3px 10px; }
.job-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: start; padding-bottom: 70px; }
.job-body p { max-width: 70ch; }
.job-h2 { font-size: 1.15rem; margin: 30px 0 14px; }
.job-apply { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 26px; position: sticky; top: 96px; }
.talent-pool { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 30px; }
.talent-pool h3 { font-size: 1.25rem; margin-bottom: 10px; }
.form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 0.84rem; color: var(--text-muted); margin: 4px 0 20px; }
.consent input { margin-top: 3px; }
.fine-print { font-size: 0.86rem; color: var(--text-faint); max-width: 80ch; margin: 0; }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; margin: 0; }
.facts div { background: var(--panel); padding: 18px 22px; }
.facts dt { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-faint); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.facts dd { margin: 0; font-size: 1rem; }
.product-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.product-chips a { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; font-weight: 500; }
.product-chips a:hover { border-color: var(--accent); }
.product-chips span { display: block; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); margin-top: 4px; font-weight: 400; }
.doc-list { display: grid; gap: 10px; max-width: 760px; }
.doc-item { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 18px; }
.doc-item:hover { border-color: var(--accent); }
.doc-icon { font-family: var(--font-mono); font-size: 0.7rem; color: var(--accent); border: 1px solid var(--accent-soft); border-radius: 4px; padding: 4px 7px; }
.disclaimer { border: 1px solid var(--line); border-left: 3px solid var(--tan); border-radius: var(--radius-sm); padding: 18px 22px; background: var(--panel); }
.disclaimer p { margin: 8px 0 0; font-size: 0.86rem; color: var(--text-muted); max-width: 100ch; }
@media (max-width: 900px) {
  .job-layout, .talent-pool { grid-template-columns: 1fr; gap: 28px; }
  .job-apply { position: static; }
}
@media (max-width: 620px) {
  .form-2, .facts { grid-template-columns: 1fr; }
  .job-row { grid-template-columns: 1fr; }
  .steps li { grid-template-columns: 1fr; gap: 6px; }
}

/* admin tabs + filters (Careers, Investor relations) */
.atabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: -6px 0 24px; }
.atabs a { padding: 10px 14px; font-size: 0.9rem; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.atabs a:hover { color: var(--text); }
.atabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
.afilters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.afilters select { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius-sm); padding: 8px 11px; font: inherit; font-size: 0.88rem; }

/* Even card counts (2 or 4) sit in two columns so no row is left half-empty */
.services-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .services-grid.two-col { grid-template-columns: 1fr; } }