/* ==========================================================================
   Warp 17 — site styles
   Design tokens and section rhythm carried over from the original home page
   design: near-black navy ground, single blue accent, hairline rules,
   Newsreader serif headings over IBM Plex Sans body and Plex Mono labels.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('../fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  --bg: #03060d;
  --bg-raised: #060b17;
  --bg-band: #0f1f45;

  --ink: #f2f7ff;      /* headings */
  --body: #dbe6f5;     /* default text */
  --muted: #9fb6d4;    /* lead paragraphs */
  --dim: #8fa8c9;      /* supporting copy */
  --label: #5f7fa8;    /* section labels — 4.75:1 on --bg */
  --faint: #6c86a8;    /* smallest meta — 5.25:1 on --bg */
  --accent: #4da6ff;

  --line: rgba(120, 160, 220, 0.14);
  --line-mid: rgba(120, 160, 220, 0.18);
  --line-strong: rgba(120, 160, 220, 0.28);

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1400px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(64px, 8vw, 100px);
}

/* --- Reset --------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* `clip`, not `hidden`: hidden here (or on body) makes the element a scroll
     container, which silently breaks smooth anchor scrolling. */
  overflow-x: clip;
}

/* The header is sticky, so anchored sections must reserve room for it or the
   first line of every jump target lands underneath it. */
section[id] { scroll-margin-top: 96px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, li, figure { margin: 0; padding: 0; }
ul { list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; transition: opacity 0.2s ease, color 0.2s ease; }
a:hover { opacity: 0.75; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  padding: 12px 22px;
  background: var(--accent);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --- Shared layout primitives -------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 0 var(--section-y); }
.section--ruled { border-top: 1px solid var(--line); padding-top: var(--section-y); }

/* Small mono uppercase label used for every section heading */
.label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--label);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.section-head__link { font-size: 13px; color: var(--accent); }

.eyebrow {
  font-family: var(--mono);
  font-size: clamp(10px, 1.2vw, 13px);
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: #8fbfef;
}

.btn {
  display: inline-block;
  padding: 16px 28px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.btn--primary { background: var(--accent); color: var(--bg); }
.btn--ghost {
  border: 1px solid rgba(143, 168, 201, 0.4);
  color: var(--body);
  font-weight: 500;
}
.btn:hover { opacity: 0.85; }

/* --- Header -------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(3, 6, 13, 0.88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header__bar {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* width:auto is load-bearing. The <img> carries width="429" height="120"
   attributes, which act as presentational hints — overriding only the height
   leaves the box wanting 429px wide, so it gets clamped to the available space
   and the SVG letterboxes and centres inside it, floating the wordmark away
   from the left margin. Sizing from the height keeps the box exactly as wide
   as the artwork, so its left edge sits on the page gutter. */
.header__logo { flex: 0 0 auto; }
.header__logo img { height: 40px; width: auto; }

.nav {
  display: flex;
  gap: clamp(18px, 2.4vw, 36px);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.nav a:hover { color: var(--body); opacity: 1; }
.nav__cta { color: var(--accent); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(120, 160, 220, 0.3);
  color: var(--body);
  /* Square, and 44px so the tap target stays thumb-sized now that the label is
     gone and only the bars are visible. */
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
}
.nav-toggle:hover { border-color: rgba(120, 160, 220, 0.55); }

/* The three bars sit absolutely inside an 18x12 box. Opening the panel slides
   the outer two to the centre line and rotates them into a cross while the
   middle one fades, so one icon covers both states — no second glyph, and the
   button keeps its accessible name from aria-label rather than from text. */
.nav-toggle__bars {
  position: relative;
  display: block;
  width: 18px;
  height: 12px;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 180ms ease, opacity 120ms ease;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 50%; margin-top: -0.75px; }
.nav-toggle__bars span:nth-child(3) { bottom: 0; }

/* 5.25px = half the box (6px) less half a bar (0.75px): the travel that lands
   an outer bar exactly on the centre line. */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(5.25px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-5.25px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bars span { transition: none; }
}

.nav-mobile {
  display: none;
  flex-direction: column;
  padding: 8px var(--gutter) 24px;
  gap: 2px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--body);
}
.nav-mobile.is-open { display: flex; }
.nav-mobile a {
  padding: 14px 0;
  border-bottom: 1px solid rgba(120, 160, 220, 0.1);
}
.nav-mobile a:last-child { border-bottom: 0; color: var(--accent); }

/* 1000px, not 860px: the desktop nav is six items of tracked-out monospace and
   starts colliding with the logo below roughly 990px. */
@media (max-width: 1000px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 6, 13, 0.72) 0%, rgba(3, 6, 13, 0.5) 38%, rgba(3, 6, 13, 0.86) 72%, rgba(3, 6, 13, 0.99) 100%);
}
.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(84px, 11vh, 132px) var(--gutter) clamp(48px, 7vw, 84px);
}
.hero__eyebrow { margin-bottom: 26px; }
.hero__title {
  max-width: 16ch;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 6.2vw, 74px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.hero__lead {
  margin-top: 26px;
  max-width: 60ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.62;
  color: var(--muted);
  text-wrap: pretty;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

/* --- Who we are (pillars) ------------------------------------------------ */

/* Same 1 / 2 / 4 rhythm as .services, but unnumbered and with a lighter rule,
   so it reads as a distinct band rather than a second list of services. */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3vw, 44px);
}
@media (min-width: 620px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1120px) {
  .pillars { grid-template-columns: repeat(4, 1fr); }
}
.pillar { border-top: 1px solid var(--line); padding-top: 24px; }
.pillar__title {
  margin-bottom: 14px;
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}
.pillar__body { font-size: 15px; line-height: 1.68; color: var(--dim); }

/* --- Services (numbered columns) ---------------------------------------- */

/* Four services: explicit breakpoints rather than auto-fit, so the set always
   lands as 1×4, 2×2 or 4×1 — auto-fit gives a 3+1 orphan at mid widths. */
.services {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3vw, 44px);
}
@media (min-width: 620px) {
  .services { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1120px) {
  .services { grid-template-columns: repeat(4, 1fr); }
}
.service { border-top: 1px solid var(--line-strong); padding-top: 26px; }
.service__title {
  margin-bottom: 14px;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
  /* Let the browser choose the break so titles stay even at 4-across and
     still collapse to one line at 2-across — no hard-coded <br> needed. */
  text-wrap: balance;
}
.service__body { font-size: 15px; line-height: 1.68; color: var(--dim); }

/* --- Capability / platform groups --------------------------------------- */

.stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(28px, 3vw, 40px);
}
.stack__group { border-top: 1px solid var(--line-strong); padding-top: 22px; }
.stack__name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
/* One item per line. An inline "a · b · c" run strands a separator at every
   line break, which reads as a typo at narrow widths. */
.stack__items li {
  font-size: 15px;
  line-height: 1.9;
  color: var(--body);
}

/* --- Industries cards --------------------------------------------------- */

.industries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.industry {
  background: var(--bg-raised);
  border: 1px solid var(--line-mid);
  padding: 28px 26px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.industry__name {
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}
.industry__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--dim);
  text-wrap: pretty;
}

/* --- How we work -------------------------------------------------------- */

.approach {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(28px, 3vw, 44px);
}
.approach__item { border-top: 1px solid var(--line-strong); padding-top: 24px; }
.approach__title {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 12px;
}
.approach__body { font-size: 15px; line-height: 1.68; color: var(--dim); }
.approach__list { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.approach__list li {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--body);
  padding-left: 18px;
  position: relative;
}
.approach__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: var(--accent);
}

/* --- Contact band ------------------------------------------------------- */

.contact { background: var(--bg-band); }
.contact__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(52px, 6vw, 76px) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}
.contact__copy {
  flex: 1 1 34ch;
  min-width: 0;
}
.contact__title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 300;
  line-height: 1.14;
  color: var(--ink);
  max-width: 18ch;
}
.contact__lead {
  margin-top: 18px;
  max-width: 54ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.62;
  color: #b9d3f0;
  text-wrap: pretty;
}
.contact__aside {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.contact__email { font-size: 15px; color: #b9d3f0; }
.contact__email a { border-bottom: 1px solid rgba(185, 211, 240, 0.35); }

/* --- Footer ------------------------------------------------------------- */

.footer { border-top: 1px solid var(--line); }
.footer__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(44px, 5vw, 64px) var(--gutter) 36px;
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(28px, 3vw, 44px);
  padding-bottom: 48px;
}
.footer__logo { height: 38px; width: auto; margin-bottom: 18px; }
.footer__blurb {
  font-size: 14px;
  line-height: 1.7;
  color: #7d95b6;
  max-width: 34ch;
}
.footer__col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--dim); }
.footer__col-head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 4px;
}
.footer__legal {
  font-size: 13px;
  line-height: 1.8;
  color: var(--faint);
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* --- Scroll reveal ------------------------------------------------------ */

/* Only hide ahead of the reveal when JS is actually running, so a script
   failure can never leave the page blank. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 0.9, 0.28, 1);
}

/* --- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* --- Print -------------------------------------------------------------- */

@media print {
  .header, .hero__canvas, .hero__scrim { display: none !important; }
  body { background: #fff; color: #000; }
  .hero__title, .service__title, .pillar__title, .contact__title { color: #000; }
  .service__body, .pillar__body, .approach__body, .contact__lead { color: #333; }
}