/* =====================================================
   Skyline Drones v2 — Design Tokens
   Premium B2B industrial · cinematic dark · gold + ember
   ===================================================== */

:root {
  /* ---- Brand color palette ---- */
  --ink-900: #050507;          /* deepest background, never pure black */
  --ink-850: #0A0A0D;          /* card/panel background */
  --ink-800: #11111A;          /* elevated surface */
  --ink-700: #1A1A24;          /* divider zone */
  --ink-600: #2A2A36;          /* subtle border */
  --ink-500: #4A4A55;          /* low-contrast text */
  --ink-400: #6E6E78;          /* secondary text */
  --ink-300: #9A9AA3;          /* tertiary text */
  --ink-200: #C8C8D0;          /* near-white text */
  --ink-100: #F5F5F7;          /* primary text */

  --gold-100: #FFE8A8;
  --gold-200: #F5D27C;
  --gold-400: #E8B84B;         /* primary brand gold (cleaning division) */
  --gold-500: #D9A332;
  --gold-600: #B58520;
  --gold-glow: rgba(232, 184, 75, 0.35);

  --ember-100: #FFB8AE;
  --ember-300: #FF6B5E;
  --ember-500: #D9362B;        /* primary brand ember (firefighting division) */
  --ember-700: #A8251C;
  --ember-glow: rgba(217, 54, 43, 0.35);

  --paper: #F8F5EE;            /* warm off-white for editorial moments */
  --paper-warm: #ECE6D8;

  /* ---- Surface effects ---- */
  --border-faint: rgba(255, 255, 255, 0.06);
  --border-soft:  rgba(255, 255, 255, 0.10);
  --border-mid:   rgba(255, 255, 255, 0.18);
  --border-gold:  rgba(232, 184, 75, 0.30);
  --border-ember: rgba(217, 54, 43, 0.35);

  --glass-tint: rgba(255, 255, 255, 0.02);
  --glass-tint-strong: rgba(255, 255, 255, 0.04);

  /* ---- Typography ---- */
  --font-display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: Calibri, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Type scale — fluid clamp(min, preferred, max) */
  --text-tag:      11px;
  --text-eyebrow:  12px;
  --text-meta:     13px;
  --text-body:     clamp(15px, 0.95vw + 8px, 17px);
  --text-lede:     clamp(17px, 1.1vw + 10px, 21px);
  --text-h6:       clamp(15px, 0.95vw + 8px, 17px);
  --text-h5:       clamp(18px, 1.0vw + 10px, 22px);
  --text-h4:       clamp(22px, 1.4vw + 12px, 30px);
  --text-h3:       clamp(28px, 2.0vw + 14px, 44px);
  --text-h2:       clamp(36px, 3.6vw + 16px, 72px);
  --text-h1:       clamp(48px, 5.5vw + 18px, 108px);
  --text-display:  clamp(64px, 9vw + 20px, 168px);

  /* ---- Spacing scale (8px base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;

  /* ---- Layout ---- */
  --container: 1320px;
  --container-narrow: 1080px;
  --container-prose: 720px;
  --page-pad: clamp(20px, 4vw, 48px);
  --section-pad: clamp(80px, 10vw, 160px);

  /* ---- Motion ---- */
  --ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-power: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 0.1, 1);
  --t-fast:  0.25s;
  --t-mid:   0.6s;
  --t-slow:  1.2s;

  /* ---- Radii ---- */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  /* ---- Z-index ---- */
  --z-nav:    100;
  --z-toast:  120;
  --z-modal:  140;
  --z-cursor: 160;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  background: var(--ink-900);
  color: var(--ink-100);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}

img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }

::selection { background: var(--gold-400); color: var(--ink-900); }

/* =====================================================
   Type primitives
   ===================================================== */
.display { font-family: var(--font-display); font-size: var(--text-display); line-height: 0.9; letter-spacing: -0.025em; text-transform: uppercase; }
.h1 { font-family: var(--font-display); font-size: var(--text-h1); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; }
.h2 { font-family: var(--font-display); font-size: var(--text-h2); line-height: 1.0; letter-spacing: -0.015em; text-transform: uppercase; }
.h3 { font-family: var(--font-display); font-size: var(--text-h3); line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; }
.h4 { font-family: var(--font-display); font-size: var(--text-h4); line-height: 1.1;  letter-spacing: -0.005em; text-transform: uppercase; }
.h5 { font-family: var(--font-display); font-size: var(--text-h5); line-height: 1.15; text-transform: uppercase; }

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.eyebrow.ember { color: var(--ember-300); }
.eyebrow.muted { color: var(--ink-400); }

.meta {
  font-family: var(--font-display);
  font-size: var(--text-meta);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-300);
}

.lede {
  font-size: var(--text-lede);
  line-height: 1.5;
  color: var(--ink-200);
  max-width: 60ch;
}

.text-gold  { color: var(--gold-400); }
.text-ember { color: var(--ember-300); }
.text-mute  { color: var(--ink-300); }

/* =====================================================
   Layout primitives
   ===================================================== */
.container       { width: 100%; max-width: var(--container);        margin: 0 auto; padding: 0 var(--page-pad); }
.container-narrow{ width: 100%; max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--page-pad); }
.container-prose { width: 100%; max-width: var(--container-prose);  margin: 0 auto; padding: 0 var(--page-pad); }

.section { padding: var(--section-pad) 0; }
.section-tight { padding: var(--space-20) 0; }

.grid { display: grid; gap: var(--space-8); }
.flex { display: flex; }

/* =====================================================
   Background texture (film grain)
   ===================================================== */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* =====================================================
   Reveal primitives — DISABLED per user request (v3.1)
   User explicitly does not want text/images fading in/out on scroll.
   All [data-reveal] content now renders at full opacity, no transform,
   regardless of JS or scroll position. Previous fade/translate rules
   removed. (Hover transitions, navbar shrink, magnetic CTAs unaffected.)
   ===================================================== */
.js [data-reveal],
.js [data-reveal="fade"],
.js [data-reveal="left"],
.js [data-reveal="right"],
.js [data-reveal].is-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}