/* ==========================================================================
   RPS Security — main.css (C)
   Design tokens · reset · base typography · layout & utility classes
   Component styles live in components.css (loaded after this file).

   NAMING CONVENTION (used across both stylesheets)
     .block              component root          e.g. .service-card
     .block__element     child of a component    e.g. .service-card__title
     .block--modifier    variant of a component  e.g. .btn--primary
     .is-* / .has-*      runtime state, JS-set   e.g. .is-scrolled
     .u-*                single-purpose utility  e.g. .u-visually-hidden

   Mobile-first: base rules target small screens, media queries scale UP.

   THE DIAGONAL is this site's structural motif — it comes straight off the
   RPS vehicle wrap. It appears as angled section clips, the hero photo wedge,
   card left-borders and the trust-bar slash. If you add a section, give it a
   diagonal edge; do not introduce flat horizontal cuts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Core palette ------------------------------------------------------ */
  --black:        #0A0A0F;   /* page bg — slightly purple-black, not flat     */
  --dark-1:       #111118;   /* cards, nav, footer                            */
  --dark-2:       #1A1A26;   /* alt sections, form inputs                     */
  --red:          #D92121;   /* primary CTA, structural accents               */
  --red-glow:     rgba(217, 33, 33, 0.35);
  --red-line:     rgba(217, 33, 33, 0.25);

  /* --red is 3.94:1 on --black. That clears AA for large text and for
     non-text graphics, but FAILS for the 10–11px Orbitron labels this site
     leans on. --red-text is the same hue lifted to 5.18:1 and is what every
     piece of red TEXT uses. Keep --red for fills, rules, borders and glows. */
  --red-text:     #E84A4A;
  --blue:         #0047AB;   /* STRUCTURE ONLY — fills, borders, geometry     */
  --blue-glow:    rgba(0, 71, 171, 0.25);
  --silver:       #A8A9AD;   /* body text, secondary labels                   */
  --silver-dim:   rgba(168, 169, 173, 0.4);
  --white:        #FFFFFF;

  /* --blue at #0047AB scores 2.4:1 on --black — far below the 4.5:1 needed
     for text. Anything that CARRIES MEANING (labels, links, icon strokes)
     uses --blue-bright at 7.3:1 instead. Keep --blue for decoration only. */
  --blue-bright:  #4D9FFF;

  --green:        #35D07F;   /* the live "online" pulse dot                   */

  /* --- Typography -------------------------------------------------------- */
  --font-display: "Orbitron", "Arial Black", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --track-heading: 0.06em;
  --track-label:   0.15em;

  /* --- Spacing scale ----------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* --- Layout ------------------------------------------------------------ */
  --wrap:        1200px;
  --gutter:      1.25rem;
  --nav-h:       4.5rem;
  --nav-h-small: 3.75rem;

  /* --- The diagonal ------------------------------------------------------ */
  --slant: 3vw;              /* vertical travel of every angled section edge  */

  /* --- Motion ------------------------------------------------------------ */
  --ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.18s;
  --t-base: 0.32s;
  --t-slow: 0.6s;

  --z-nav: 100;
  --z-fab: 90;

  /* --- Textures (structure only — never over photography) ---------------- */
  --tex-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23ffffff'/%3E%3C/svg%3E");
  --tex-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34L25 30.6V17.9l-11.01-6.35L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zM0 36.5L12.98 44v5h-2v-3.85L0 38.81V36.5zM15 0v7.5L27.99 15H28v-2.31l-11-6.34V0h-2zM28 36.5L15.02 44v5h2v-3.85L28 38.81V36.5z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  margin: 0;
  background-color: var(--black);
  color: var(--silver);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
}

/* The dot grid is a texture, not a pattern people should SEE. 3% is the
   ceiling — above that it reads as noise on an OLED phone. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--tex-dots);
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: var(--track-heading);
  text-wrap: balance;
}

h1 { font-weight: 900; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }

a {
  color: var(--blue-bright);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--red-text); }

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

/* <picture> is inline by default, which would break the parent→img sizing
   chain that .hero__media, .clip-panel and .machine__media all rely on
   (`height: 100%` cannot resolve against an inline box). display:contents
   removes the wrapper's box so the <img> lays out as a direct child. */
picture { display: contents; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--blue-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-8);
}

@media (min-width: 48em) {
  .section { padding-block: var(--sp-9); }
}

/* Alternate surface + hex texture. */
.section--alt { background-color: var(--dark-2); }

.section--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--tex-hex);
  opacity: 0.04;
  pointer-events: none;
}

.section--panel { background-color: var(--dark-1); }

/* THE DIAGONAL. Angled top and bottom edges, cut from the same geometry as
   the vehicle wrap. Applied to a section, never to its contents. */
.section--slanted {
  clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 calc(100% - var(--slant)));
  margin-block: calc(var(--slant) * -0.5);
  padding-block: calc(var(--sp-8) + var(--slant));
}

@media (min-width: 48em) {
  .section--slanted { padding-block: calc(var(--sp-9) + var(--slant)); }
}

.grid { display: grid; gap: var(--sp-5); }

@media (min-width: 40em) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Split: text leads, clipped image follows. Mirrors the hero wedge. */
.split { display: grid; gap: var(--sp-6); align-items: center; }

@media (min-width: 60em) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .split--reverse > :first-child { order: 2; }
}

/* --------------------------------------------------------------------------
   4. BASE TYPE SCALE
   -------------------------------------------------------------------------- */
.h-hero {
  font-size: clamp(2.25rem, 9vw, 5.25rem);
  line-height: 0.98;
  margin-bottom: var(--sp-5);
}

.h-section {
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  margin-bottom: var(--sp-5);
}

.h-card {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-3);
}

.lead {
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
  color: var(--silver);
  max-width: 46ch;
}

/* Orbitron micro-label. The classified-document feel comes from the tracking,
   not from decoration — do not add borders or backgrounds to these. */
.label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--silver);
  margin-bottom: var(--sp-4);
}

.label--red { color: var(--red-text); }

/* Section heading with a red rule that draws itself in on scroll entry. */
.h-section--ruled { position: relative; padding-bottom: var(--sp-4); }

.h-section--ruled::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--red);
  transition: width var(--t-slow) var(--ease);
}

.h-section--ruled.is-visible::after { width: 4.5rem; }

/* --------------------------------------------------------------------------
   5. BUTTONS
   Square corners throughout. A rounded button on this site reads as soft.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.9375rem var(--sp-5);
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}

.btn--primary {
  background: var(--red);
  color: var(--white);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: #F02A2A;
  color: var(--white);
  box-shadow: 0 6px 24px var(--red-glow);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  border-color: var(--blue-bright);
  color: var(--blue-bright);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  box-shadow: 0 6px 24px var(--blue-glow);
  transform: translateY(-2px);
}

.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

@media (max-width: 30em) {
  .btn-row .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   6. UTILITIES
   -------------------------------------------------------------------------- */

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: 200;
  padding: var(--sp-3) var(--sp-4);
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  text-decoration: none;
}
.skip-link:focus { top: var(--sp-3); color: var(--white); }

/* Scroll-reveal. Elements start shifted and fade up as they enter view; JS
   adds .is-visible. Each page carries a <noscript> override immediately after
   <body> so that a script failure can never leave the page blank. */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal--d1 { transition-delay: 0.08s; }
.reveal--d2 { transition-delay: 0.16s; }
.reveal--d3 { transition-delay: 0.24s; }

/* --------------------------------------------------------------------------
   7. MOTION PREFERENCES
   Every animation on this site is decorative. All of it goes.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal { opacity: 1; transform: none; }
  .h-section--ruled::after { width: 4.5rem; }
}