/* ==========================================================================
   CAPSELTECH SOLUTIONS - Phase 1 "Coming Soon"
   Brand palette is taken verbatim from the approved logo kit README.
   ========================================================================== */

:root {
  /* Brand constants */
  --navy:  #06163F;   /* Corporate Navy   */
  --deep:  #0A2F89;   /* Deep Blue        */
  --blue:  #126BF2;   /* Technology Blue  */
  --cyan:  #09C8F5;   /* Cyan Accent      */
  --white: #FFFFFF;

  /* Semantic tokens - light */
  --stage:  var(--white);
  --ink:    var(--navy);
  --muted:  #4C5877;
  --muted:  color-mix(in srgb, var(--navy) 68%, var(--white));
  --rule:   #DDE2EC;
  --rule:   color-mix(in srgb, var(--navy) 14%, var(--white));
  --accent: var(--blue);
  --pixel:  var(--navy);
  --pixel-opacity: .055;
  --focus:  var(--deep);

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono",
               Menlo, Consolas, monospace;

  --gutter: clamp(1.5rem, 6vw, 5.5rem);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --stage:  var(--navy);
    --ink:    var(--white);
    --muted:  #A9B6D4;
    --muted:  color-mix(in srgb, var(--white) 70%, var(--navy));
    --rule:   #1E3160;
    --rule:   color-mix(in srgb, var(--white) 18%, var(--navy));
    --accent: var(--cyan);
    --pixel:  var(--cyan);
    --pixel-opacity: .10;
    --focus:  var(--cyan);
  }
}

/* --------------------------------------------------------------- reset -- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background-color: var(--stage);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.6;
  text-wrap: pretty;
}

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

/* -------------------------------------------------- signature: pixels --- */
/* Quotes the dissolving pixel field of the approved 3D C. Purely decorative,
   hidden from assistive technology, and drawn only where CSS masks are
   supported so older browsers never see a solid block.                      */

.pixel-field {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: min(52vw, 640px);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
}

@supports ((mask-composite: intersect) or (-webkit-mask-composite: source-in)) {
  .pixel-field {
    opacity: var(--pixel-opacity);
    background-color: var(--pixel);
    --cell: clamp(14px, 2.4vw, 26px);
    --dot: calc(var(--cell) * .34);

    -webkit-mask-image:
      repeating-linear-gradient(90deg, #000 0 var(--dot), transparent var(--dot) var(--cell)),
      repeating-linear-gradient(180deg, #000 0 var(--dot), transparent var(--dot) var(--cell)),
      linear-gradient(100deg, #000 0%, rgba(0,0,0,.55) 38%, transparent 78%);
    mask-image:
      repeating-linear-gradient(90deg, #000 0 var(--dot), transparent var(--dot) var(--cell)),
      repeating-linear-gradient(180deg, #000 0 var(--dot), transparent var(--dot) var(--cell)),
      linear-gradient(100deg, #000 0%, rgba(0,0,0,.55) 38%, transparent 78%);

    -webkit-mask-composite: source-in, source-in;
    mask-composite: intersect, intersect;
  }
}

/* ---------------------------------------------------------------- page -- */

.page {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 7vh, 4.5rem);
  inline-size: 100%;
  max-inline-size: 58rem;
  margin-inline: auto;
  padding-block: clamp(2.5rem, 7vh, 4.5rem);
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------ masthead -- */
/* The logo is never cropped or scaled non-uniformly: its intrinsic aspect
   ratio is preserved and clear space is provided by layout spacing.         */

.masthead .logo {
  inline-size: clamp(230px, 62vw, 480px);
  block-size: auto;
  aspect-ratio: 1996 / 477;
}

/* --------------------------------------------------------------- stage -- */

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-inline-size: 42rem;
}

.headline {
  margin: 0;
  font-size: clamp(2.35rem, 1.4rem + 4.6vw, 4.25rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--ink);
}

.lede {
  margin: clamp(1.35rem, 3.4vh, 2rem) 0 0;
  max-inline-size: 34ch;
  font-size: clamp(1.1rem, 1rem + .55vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink);
  text-wrap: balance;
}

.note {
  margin: .9rem 0 0;
  max-inline-size: 42ch;
  color: var(--muted);
}

/* ------------------------------------------------------------- contact -- */

.contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  margin: clamp(1.9rem, 5vh, 2.9rem) 0 0;
  padding-block-start: clamp(1.5rem, 4vh, 2.25rem);
  border-block-start: 1px solid var(--rule);
  max-inline-size: 34rem;
}

.contact__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact__link {
  max-inline-size: 100%;
  font-size: clamp(1.05rem, .95rem + .55vw, 1.35rem);
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  overflow-wrap: anywhere;
  transition: color .18s ease, text-decoration-color .18s ease;
}

.contact__link:hover {
  color: var(--ink);
  text-decoration-thickness: 2px;
}

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

/* ------------------------------------------------------------ colophon -- */

.colophon {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem clamp(1rem, 4vw, 2.5rem);
  align-items: baseline;
  justify-content: space-between;
  padding-block-start: clamp(1.25rem, 3.5vh, 2rem);
  border-block-start: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--muted);
}

.colophon p { margin: 0; }

.colophon__place { letter-spacing: .16em; text-transform: uppercase; }

/* --------------------------------------------------------------- error -- */

.error-code {
  margin: 0 0 .85rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
}

.back-link {
  display: inline-block;
  margin-block-start: clamp(1.6rem, 4vh, 2.4rem);
  font-family: var(--font-mono);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .32em;
  transition: color .18s ease;
}

.back-link:hover { color: var(--ink); }

/* ------------------------------------------------------ reduced motion -- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------- forced colors - */

@media (forced-colors: active) {
  .pixel-field { display: none; }
  a:focus-visible { outline: 3px solid CanvasText; }
}

/* --------------------------------------------------------------- print -- */

@media print {
  .pixel-field { display: none; }
  body { background: #FFFFFF; color: #000000; }
}