/* ============================================================
   Slateworks.ai — Content page styles (what-we-do, /for/* trades)
   Brand: #2c3e50 (Slate) / #F2A900 (Gold)
   Shares the homepage's design tokens but NOT its stylesheet:
   style.css pins the viewport for the WebGL sky (fixed body,
   overflow hidden) — content pages must scroll. The sky here is
   a static CSS rendition of the night renderer's palette so the
   pages stay light enough for ad-landing use on 4G.
   ============================================================ */

:root {
  --color-primary: #2c3e50;
  --color-accent: oklch(59.3% 0.219 70.9);      /* #F2A900 */
  --color-accent-dark: oklch(53.5% 0.183 70.2);
  --color-bg: #050810;
  --color-text: #dce1ea;
  --color-text-muted: #a8b4c4;
  --color-text-faint: #7a8a9e;

  --card-bg: rgba(13, 18, 28, 0.66);
  --card-border: rgba(255, 255, 255, 0.07);

  --font-display: 'Archivo Black', 'Impact', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script: 'Yellowtail', cursive;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;

  --content-width: 920px;
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Static night sky: zenith→horizon ramp matches the renderer's
     ZENITH_NIGHT [3,5,12] → HORIZ_NIGHT [8,14,26], with the gold
     horizon whisper as a radial wash pinned below the fold line. */
  background:
    radial-gradient(ellipse 75% 45% at 50% 106%, rgba(242, 169, 0, 0.09), transparent 70%),
    linear-gradient(to bottom, #030510 0%, #05080f 50%, #081018 85%, #0a121e 100%);
  background-attachment: fixed;
  background-color: #050810;
}

/* --- Stars (static, two brightness tiers) --- */
.stars {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.stars::before,
.stars::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

.stars::before {
  width: 1px;
  height: 1px;
  background: rgba(220, 230, 255, 0.55);
  box-shadow:
    2vw 8vh 0 0 rgba(220,230,255,0.5), 7vw 22vh 0 0 rgba(220,230,255,0.4),
    11vw 5vh 0 0 rgba(220,230,255,0.55), 14vw 31vh 0 0 rgba(220,230,255,0.35),
    18vw 14vh 0 0 rgba(220,230,255,0.5), 23vw 3vh 0 0 rgba(220,230,255,0.45),
    26vw 27vh 0 0 rgba(220,230,255,0.4), 31vw 9vh 0 0 rgba(220,230,255,0.55),
    35vw 19vh 0 0 rgba(220,230,255,0.45), 39vw 4vh 0 0 rgba(220,230,255,0.5),
    44vw 24vh 0 0 rgba(220,230,255,0.35), 48vw 12vh 0 0 rgba(220,230,255,0.55),
    53vw 6vh 0 0 rgba(220,230,255,0.5), 57vw 29vh 0 0 rgba(220,230,255,0.4),
    61vw 16vh 0 0 rgba(220,230,255,0.5), 66vw 2vh 0 0 rgba(220,230,255,0.45),
    70vw 21vh 0 0 rgba(220,230,255,0.4), 74vw 10vh 0 0 rgba(220,230,255,0.55),
    79vw 26vh 0 0 rgba(220,230,255,0.35), 83vw 7vh 0 0 rgba(220,230,255,0.5),
    88vw 17vh 0 0 rgba(220,230,255,0.45), 92vw 3vh 0 0 rgba(220,230,255,0.55),
    96vw 23vh 0 0 rgba(220,230,255,0.4), 5vw 38vh 0 0 rgba(220,230,255,0.35),
    21vw 41vh 0 0 rgba(220,230,255,0.3), 37vw 36vh 0 0 rgba(220,230,255,0.35),
    55vw 40vh 0 0 rgba(220,230,255,0.3), 72vw 37vh 0 0 rgba(220,230,255,0.35),
    90vw 42vh 0 0 rgba(220,230,255,0.3), 12vw 52vh 0 0 rgba(220,230,255,0.25),
    33vw 49vh 0 0 rgba(220,230,255,0.3), 63vw 51vh 0 0 rgba(220,230,255,0.25),
    85vw 54vh 0 0 rgba(220,230,255,0.25), 27vw 60vh 0 0 rgba(220,230,255,0.2),
    49vw 58vh 0 0 rgba(220,230,255,0.25), 76vw 62vh 0 0 rgba(220,230,255,0.2),
    8vw 68vh 0 0 rgba(220,230,255,0.18), 42vw 70vh 0 0 rgba(220,230,255,0.18),
    68vw 72vh 0 0 rgba(220,230,255,0.15), 94vw 66vh 0 0 rgba(220,230,255,0.18);
}

.stars::after {
  width: 2px;
  height: 2px;
  background: rgba(230, 238, 255, 0.85);
  box-shadow:
    9vw 11vh 0 0 rgba(230,238,255,0.8), 29vw 6vh 0 0 rgba(230,238,255,0.7),
    46vw 18vh 0 0 rgba(230,238,255,0.75), 64vw 8vh 0 0 rgba(230,238,255,0.8),
    81vw 14vh 0 0 rgba(230,238,255,0.7), 17vw 25vh 0 0 rgba(230,238,255,0.65),
    58vw 33vh 0 0 rgba(230,238,255,0.55), 87vw 30vh 0 0 rgba(230,238,255,0.6),
    38vw 45vh 0 0 rgba(230,238,255,0.4), 73vw 47vh 0 0 rgba(230,238,255,0.4);
}

/* --- Asphalt grain + dither (same recipe as the homepage) --- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.35;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.0' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)' opacity='0.9'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-repeat: repeat, repeat;
  background-size: 128px 128px, 256px 256px;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: overlay;
}

/* --- Skip link --- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  z-index: 100;
  background: var(--color-accent);
  color: #0f1419;
  padding: 0.5em 1em;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: var(--space-sm);
}

/* --- Nav --- */
.site-nav {
  position: relative;
  /* Above .page (z 10): the Trades dropdown panel must paint over the
     hero, and nested z-index can't escape the nav's stacking context. */
  z-index: 30;
  padding: var(--space-sm) var(--space-md);
}

.site-nav .nav-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.nav-brand {
  font-family: var(--font-script);
  font-size: 1.75rem;
  color: #F2A900;
  -webkit-text-stroke: 0.010em #c4870a;
  text-decoration: none;
  text-shadow: 0.016em 0.024em 0.024em rgba(0, 0, 0, 0.25);
  line-height: 1;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--color-accent);
}

/* --- Trades dropdown (no-JS: <details>/<summary>) --- */
.nav-dropdown {
  position: relative;
}

.nav-dropdown summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}

.nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown summary::after {
  content: '';
  width: 0.45em;
  height: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-15%, -15%);
  transition: transform 0.15s ease;
}

.nav-dropdown[open] summary::after {
  transform: rotate(-135deg) translate(-20%, -20%);
}

.nav-dropdown summary:hover,
.nav-dropdown[open] summary {
  color: var(--color-accent);
}

.nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  z-index: 20;
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  padding: 0.5rem;
  background: #10161f;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.nav-dropdown-panel a {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.5em 0.75em;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-dropdown-panel a:hover {
  color: var(--color-accent);
  background: rgba(255, 255, 255, 0.04);
}

.nav-dropdown-panel a[aria-current="page"] {
  color: var(--color-accent);
}

/* --- Page layout --- */
.page {
  position: relative;
  z-index: 10;
  flex: 1;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-md) var(--space-md) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* --- Page hero --- */
.page-hero {
  text-align: center;
  padding: var(--space-lg) 0 var(--space-sm);
  max-width: 780px;
  margin: 0 auto;
}

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  border: 1px solid oklch(59.3% 0.219 70.9 / 0.25);
  background: oklch(59.3% 0.219 70.9 / 0.06);
  padding: 0.4em 1.2em;
  border-radius: 100px;
  margin-bottom: var(--space-md);
}

/* Headings use the body family at 800, not Archivo Black — at display
   sizes Archivo's closed counters (the S especially) fill in and get
   hard to read. Jakarta 800 keeps the weight with open letterforms. */
.page-hero h1 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.85rem, 5vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #f2f5fa;
  margin-bottom: var(--space-md);
  text-wrap: balance;
}

.page-hero .lede {
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto var(--space-md);
  text-wrap: pretty;
}

/* --- Content cards --- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.card h2 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #f2f5fa;
  margin-bottom: var(--space-md);
  text-wrap: balance;
}

.card > p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 68ch;
}

.card > p + p {
  margin-top: var(--space-sm);
}

.card strong {
  color: var(--color-text);
  font-weight: 600;
}

.card p a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.card p a:hover {
  color: #ffbb1a;
}

/* --- Feature grid --- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.feature {
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: var(--space-md);
  background: rgba(255, 255, 255, 0.02);
}

.feature h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
  letter-spacing: 0.01em;
}

.feature p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* --- Pain list --- */
.pain-list {
  list-style: none;
  margin-top: var(--space-sm);
  display: grid;
  gap: var(--space-sm);
}

.pain-list li {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  padding-left: 1.6em;
  position: relative;
  max-width: 68ch;
}

.pain-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.pain-list li strong {
  color: var(--color-text);
  font-weight: 600;
}

/* --- The test (mission-filter checklist) --- */
.test-list {
  list-style: none;
  margin-top: var(--space-sm);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-sm) var(--space-md);
}

.test-list li {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-text);
  padding-left: 1.8em;
  position: relative;
}

.test-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.test-note {
  margin-top: var(--space-md);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 68ch;
}

/* --- CTA band --- */
.cta-band {
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.75rem);
}

.cta-band h2 {
  margin-bottom: var(--space-sm);
}

.cta-band p {
  margin: 0 auto var(--space-md);
}

.btn-primary {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #0f1419;
  background: #F2A900;
  text-decoration: none;
  padding: 0.85em 2.2em;
  border-radius: 8px;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.btn-primary:hover {
  background: #ffbb1a;
  box-shadow: 0 0 28px rgba(242, 169, 0, 0.25);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.cta-alt {
  display: block;
  margin-top: var(--space-sm);
  font-size: 0.875rem;
  color: var(--color-text-faint);
}

.cta-alt a {
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cta-alt a:hover {
  color: var(--color-accent);
}

/* --- Footer --- */
.site-footer {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.site-footer p {
  font-size: 0.75rem;
  color: var(--color-text-faint);
  letter-spacing: 0.02em;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--color-accent);
}

/* --- Mobile --- */
@media (max-width: 640px) {
  .page {
    gap: var(--space-md);
  }

  .page-hero {
    padding-top: var(--space-md);
  }

  .nav-links {
    gap: var(--space-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}