/* ============================================================
   Streamline Automation Solutions. Homepage (v2: chrome + blue).
   Brushed-steel logo, full-bleed industrial hero, results gallery.
   Self-hosted fonts (Saira, Space Grotesk, Inter, JetBrains Mono).
   No CDN, no inline styles, no runtime external calls.
   Created by Alex Villarroel.
   ============================================================ */

/* ---- Self-hosted fonts (latin subset, variable woff2) ---- */
@font-face { font-family:"Saira"; font-style:normal; font-weight:600 800; font-display:swap; src:url("../fonts/saira-latin-var.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/space-grotesk-latin-var.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400 600; font-display:swap; src:url("../fonts/inter-latin-var.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:400 600; font-display:swap; src:url("../fonts/jetbrains-mono-latin-var.woff2") format("woff2"); }

/* ---- Tokens ---- */
:root {
  --navy:#0E1220; --navy-2:#0B0E1A; --surface:#11162A; --surface-hi:#1A2240;
  --border:#232A45; --border-soft:#1D2540; --border-blue:#2A3358;
  /* brand blue (sampled from the logo) + a lighter steel-blue for text on dark */
  --blue:#2C5E92; --blue-hi:#3A6FA6; --blue-text:#6FA8DC;
  --chrome:#C7CEDB; --steel:#7D8AA3;
  --text:#E6EAF2; --muted:#9AA4BD; --faint:#7C88A2;

  --saira:"Saira", system-ui, sans-serif;
  --display:"Space Grotesk", system-ui, sans-serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "Consolas", monospace;

  --maxw:1200px; --gutter:36px;
}

/* ---- Reset / base ---- */
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; overflow-x:hidden; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body {
  background:var(--navy); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:inherit; text-decoration:none; }
img,svg { display:block; max-width:100%; }
h1,h2,h3 { margin:0; }

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

.skip-link {
  position:absolute; left:12px; top:-60px; z-index:100;
  background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:10px 16px; transition:top .15s ease;
}
.skip-link:focus { top:12px; }

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

.kicker {
  font-family:var(--mono); font-size:12px; letter-spacing:0.24em;
  color:var(--blue-text); text-transform:uppercase; margin:0 0 14px;
}

/* ---- Header ---- */
.site-header {
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(12px); background:rgba(14,18,32,0.82);
  border-bottom:1px solid var(--border-soft);
}
.site-header .wrap { height:68px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.lockup { display:flex; align-items:center; gap:13px; }
/* Header real-logo lockup: brushed-steel emblem + wordmark crops (see footer below for the inline-SVG mark) */
.site-header .lockup { gap:11px; }
.site-header .lockup picture { display:inline-flex; flex:none; }
.site-header .logo-emblem { height:54px; width:auto; display:block; }
.site-header .logo-wordmark { height:34px; width:auto; display:block; }
.logo-mark { height:44px; width:44px; flex:none; }
.wordmark { line-height:1; }
.wordmark .name { font-family:var(--saira); font-weight:800; font-size:21px; color:var(--chrome); letter-spacing:0.04em; }
.wordmark .name .a { color:var(--blue-text); }
.wordmark .sub { font-family:var(--saira); font-weight:600; font-size:7.5px; letter-spacing:0.3em; color:var(--blue-text); text-transform:uppercase; margin-top:4px; }

.nav { display:flex; align-items:center; gap:34px; }
.nav-links { display:flex; align-items:center; gap:34px; }
.nav-links a { font-size:14px; color:var(--muted); display:inline-flex; align-items:center; min-height:44px; }
.nav-links a:hover { color:var(--text); }
.nav-toggle { display:none; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:600; border:1px solid transparent; cursor:pointer;
}
.btn-primary { color:#FFFFFF; background:var(--blue); }
.btn-primary:hover { background:var(--blue-hi); }
.btn-ghost { color:var(--text); background:transparent; border-color:var(--border-blue); font-weight:500; }
.btn-ghost:hover { border-color:var(--blue-text); color:#FFFFFF; }
.btn-header { font-size:14px; padding:10px 18px; border-radius:7px; min-height:44px; }
.btn-lg { font-size:15px; padding:14px 24px; border-radius:8px; min-height:48px; }
.ico-arr { width:15px; height:15px; flex:none; }
.ico-arr path { stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ---- Hero (full-bleed industrial background) ---- */
.hero { position:relative; overflow:hidden; min-height:84vh; display:flex; align-items:center; }
.hero-bg-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-scrim {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(14,18,32,0.94) 0%, rgba(14,18,32,0.80) 38%, rgba(14,18,32,0.42) 72%, rgba(14,18,32,0.30) 100%),
    linear-gradient(180deg, rgba(14,18,32,0.55) 0%, rgba(14,18,32,0.15) 30%, rgba(14,18,32,0.65) 100%);
}
.hero-grid {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:linear-gradient(rgba(199,206,219,0.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(199,206,219,0.05) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(120% 100% at 20% 30%, #000 25%, transparent 75%);
  mask-image:radial-gradient(120% 100% at 20% 30%, #000 25%, transparent 75%);
}
.hero-inner { position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:120px var(--gutter); width:100%; }
.hero-content { max-width:640px; }
.pill {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.2em; color:var(--blue-text); text-transform:uppercase;
  border:1px solid #2c4664; background:rgba(44,94,146,0.14); padding:7px 13px; border-radius:999px;
}
.pill .led { width:6px; height:6px; border-radius:50%; background:var(--blue-text); }
.hero h1 { font-family:var(--display); font-weight:700; font-size:62px; line-height:1.02; letter-spacing:-0.02em; color:#FFFFFF; margin:26px 0 0; }
.hero h1 .accent { color:var(--blue-text); }
.hero .lead { font-size:18px; line-height:1.62; color:var(--text); max-width:500px; margin:24px 0 0; }
.hero-cta { display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }
.hero-micro { margin-top:44px; display:flex; align-items:center; gap:14px; font-family:var(--mono); font-size:11px; letter-spacing:0.12em; color:var(--chrome); text-transform:uppercase; flex-wrap:wrap; }
.hero-micro .sep { color:var(--blue-text); }

/* ---- Disciplines strip ---- */
.disciplines { position:relative; border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); background:var(--navy-2); }
.disciplines .wrap { padding:18px var(--gutter); display:flex; flex-wrap:wrap; gap:10px 28px; font-family:var(--mono); font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:#8b97b4; }
.disciplines .mid { color:var(--blue-text); }

/* ---- Section heading rows ---- */
.section { padding:96px var(--gutter); max-width:var(--maxw); margin:0 auto; }
.svc-head { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:44px; }
.h2 { font-family:var(--display); font-weight:700; font-size:40px; line-height:1.05; letter-spacing:-0.01em; color:#FFFFFF; margin:0; }
.svc-head .intro { font-size:15.5px; color:var(--muted); max-width:380px; margin:0; line-height:1.6; }

/* ---- Services cards ---- */
.card-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:30px; }
.card .icon { width:40px; height:40px; }
.card .icon path, .card .icon rect, .card .icon circle { stroke:var(--text); stroke-width:2.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.card .icon .warm { stroke:var(--blue-text); }
.card h3 { font-family:var(--display); font-weight:700; font-size:21px; color:#FFFFFF; margin:22px 0 10px; }
.card p { font-size:14.5px; line-height:1.62; color:var(--muted); margin:0 0 18px; }
.tags { display:flex; flex-wrap:wrap; gap:8px; }
.tag { font-family:var(--mono); font-size:11px; color:var(--muted); border:1px solid var(--border); border-radius:6px; padding:5px 10px; }

/* ---- Process ---- */
.process { background:var(--navy-2); border-top:1px solid var(--border-soft); border-bottom:1px solid var(--border-soft); }
.process-inner { max-width:var(--maxw); margin:0 auto; padding:88px var(--gutter); position:relative; }
.process .lead { font-size:15.5px; color:var(--muted); max-width:520px; margin:0 0 48px; line-height:1.6; }
.process-flow { width:100%; height:44px; opacity:0.6; margin-bottom:-22px; display:block; }
.process-flow path { stroke:var(--blue-text); stroke-width:2; stroke-linecap:round; fill:none; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.step { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:26px; }
.step .n { font-family:var(--display); font-weight:700; font-size:34px; color:var(--border-blue); line-height:1; }
.step .n.last { color:var(--blue-text); }
.step h3 { font-family:var(--display); font-weight:700; font-size:18px; color:#FFFFFF; margin:16px 0 8px; }
.step p { font-size:13.5px; line-height:1.6; color:var(--muted); margin:0; }

/* ---- Results carousel (JS-off: native horizontal scroll/swipe + dot anchors) ---- */
.carousel { position:relative; margin-top:40px; }
.carousel-track {
  display:flex; list-style:none; margin:0; padding:0;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  border:1px solid var(--border); border-radius:14px; background:var(--surface);
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar { display:none; }
.carousel-track:focus-visible { outline:2px solid var(--blue-text); outline-offset:3px; }
.slide { min-width:100%; scroll-snap-align:center; margin:0; position:relative; }
/* Mixed portrait + landscape set: a balanced frame whose height tracks the
   viewport width (clamped), so portraits read big on the dark navy ground while
   wide shots keep modest, on-brand letterbox instead of huge bars on small
   screens. object-fit:contain means nothing is ever cropped or over-zoomed. */
.slide img { width:100%; height:clamp(360px, 52vw, 600px); object-fit:contain; background:var(--navy-2); display:block; }
.slide figcaption {
  position:absolute; left:14px; bottom:14px; z-index:2;
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text); background:rgba(11,14,26,0.8); border:1px solid var(--border-blue);
  padding:5px 11px; border-radius:6px;
}
/* prev/next: progressive enhancement (shown only when JS is active) */
.car-btn {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%;
  background:rgba(11,14,26,0.78); border:1px solid var(--border-blue); color:var(--chrome);
  display:none; align-items:center; justify-content:center; cursor:pointer;
}
body.js .car-btn { display:inline-flex; }
.car-btn:hover { border-color:var(--blue-text); color:#FFFFFF; background:rgba(11,14,26,0.92); }
.car-btn.prev { left:14px; } .car-btn.next { right:14px; }
.car-btn svg { width:18px; height:18px; }
.car-btn path { stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.carousel-dots { display:flex; justify-content:center; gap:6px; margin-top:16px; }
.carousel-dots a {
  width:26px; height:44px; display:inline-flex; align-items:center; justify-content:center;
}
.carousel-dots a::before {
  content:""; width:9px; height:9px; border-radius:50%;
  border:1px solid var(--border-blue); background:transparent; transition:background .15s ease, border-color .15s ease;
}
.carousel-dots a:hover::before { border-color:var(--blue-text); }
.carousel-dots a[aria-current="true"]::before { background:var(--blue-text); border-color:var(--blue-text); }

/* ---- Capabilities (text only; photos live in the gallery now) ---- */
.caps-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.caps h2 { margin-bottom:24px; }
.caps .lead { font-size:15.5px; color:var(--muted); line-height:1.65; margin:0; }
.caps-list { display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; list-style:none; padding:0; margin:0; }
.caps-list li { display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:var(--text); line-height:1.4; }
.caps-list .tick { color:var(--blue-text); font-family:var(--mono); flex:none; }

/* ---- CTA / brand moment ---- */
.cta { background:radial-gradient(120% 120% at 50% 0%, var(--surface-hi) 0%, var(--navy) 60%); border-top:1px solid var(--border-soft); }
.cta-inner { max-width:880px; margin:0 auto; padding:96px var(--gutter); text-align:center; }
.cta .brandlogo { width:min(420px, 78%); height:auto; margin:0 auto 36px; filter:drop-shadow(0 10px 30px rgba(0,0,0,0.45)); }
.cta h2 { font-family:var(--display); font-weight:700; font-size:42px; line-height:1.06; letter-spacing:-0.02em; color:#FFFFFF; margin:0 0 18px; }
.cta .lead { font-size:17px; color:var(--muted); line-height:1.6; max-width:560px; margin:0 auto 36px; }
.cta-actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn-mail { font-family:var(--mono); font-size:14px; color:var(--text); background:transparent; border:1px solid var(--border-blue); padding:15px 24px; border-radius:8px; min-height:48px; display:inline-flex; align-items:center; }
.btn-mail:hover { border-color:var(--blue-text); }

/* ---- Footer ---- */
.site-footer { border-top:1px solid var(--border-soft); background:var(--navy-2); }
.footer-top { max-width:var(--maxw); margin:0 auto; padding:56px var(--gutter) 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.footer-brand .lockup { margin-bottom:16px; }
.footer-brand .logo-mark { height:34px; width:34px; }
.footer-brand p { font-size:13.5px; color:var(--muted); max-width:280px; line-height:1.6; margin:0; }
.footer-col .col-h { font-family:var(--mono); font-size:11px; letter-spacing:0.18em; color:var(--faint); text-transform:uppercase; margin-bottom:16px; }
.footer-col .links { display:flex; flex-direction:column; gap:10px; font-size:14px; color:var(--muted); }
.footer-col .links a { display:inline-flex; min-height:32px; align-items:center; }
.footer-col .links a:hover { color:var(--text); }
.footer-rule { border-top:1px solid var(--border-soft); }
.footer-rule .wrap { padding:20px var(--gutter); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--faint); }

/* ---- Motion (gated) ---- */
@media (prefers-reduced-motion: no-preference) {
  .nav-links a, .footer-col .links a, .btn { transition:color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease; }
  .card, .tile { transition:transform .15s ease, border-color .15s ease; }
  .card:hover { transform:translateY(-3px); border-color:#3a4570; }
  .tile:hover { transform:translateY(-3px); border-color:var(--blue); }
  .process-flow path { stroke-dasharray:8 10; animation:sl-flow 4s linear infinite; }
}
@keyframes sl-flow { to { stroke-dashoffset:-96; } }

/* ---- Responsive ---- */
@media (max-width:980px) {
  .hero h1 { font-size:clamp(2.4rem, 9vw, 3.4rem); }
  .caps-grid { grid-template-columns:1fr; gap:30px; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .steps { grid-template-columns:repeat(2,1fr); gap:18px; }
  .process-flow { display:none; }
}
@media (max-width:760px) {
  /* JS-off: nav links stay visible and wrap (fully usable). */
  .nav-links { gap:8px 18px; flex-wrap:wrap; }
  /* JS-on: collapse the links behind the hamburger. */
  body.js .nav-toggle {
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:8px; background:transparent;
    border:1px solid var(--border); color:var(--text); cursor:pointer;
  }
  body.js .nav-links {
    position:absolute; top:68px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--navy-2); border-bottom:1px solid var(--border-soft); padding:8px 24px 16px; display:none;
  }
  body.js .nav-links.open { display:flex; }
  body.js .nav-links a { padding:12px 4px; border-bottom:1px solid var(--border-soft); }
  .nav { gap:10px; }
  .hero { min-height:0; }
  .hero-inner { padding:96px var(--gutter) 80px; }
  .section { padding:64px var(--gutter); }
  .svc-head { margin-bottom:32px; }
  .card-grid { grid-template-columns:1fr; }
  .process-inner { padding:64px var(--gutter); }
  .cta-inner { padding:72px var(--gutter); }
  .cta h2 { font-size:clamp(1.9rem, 8vw, 2.6rem); }
  .footer-top { grid-template-columns:1fr; gap:32px; }
}
@media (max-width:520px) {
  :root { --gutter:20px; }
  .site-header .logo-emblem { height:42px; }
  .site-header .logo-wordmark { height:26px; }
  .hero-inner { padding:84px var(--gutter) 64px; }
  .steps { grid-template-columns:1fr; }
  .caps-list { grid-template-columns:1fr; }
  .h2 { font-size:32px; }
}