/* ==========================================================================
   ZYXON - precision manufacturing / rapid prototyping
   Plain static site (no build step) - matches the RizeStack customer-site
   pattern used by jms-decorating-limited/ and bright-coat-painting/.
   Palette is taken from the supplied logo: near-black base, cool steel
   greys, single electric-blue accent (#00a8f6 sampled from the logo mark).
   ========================================================================== */

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

:root {
  --bg:        #05070a;
  --bg-2:      #080b10;
  --bg-3:      #0b0f16;
  --panel:     #0e131b;
  --panel-2:   #121821;
  --line:      rgba(255, 255, 255, 0.09);
  --line-2:    rgba(255, 255, 255, 0.16);
  --text:      #eef2f7;
  --text-dim:  #9aa7b6;
  --text-mute: #6e7b8b;
  --accent:    #00a8f6;
  --accent-2:  #0b7fd4;
  --accent-3:  #66d0ff;
  --accent-glow: rgba(0, 168, 246, 0.35);

  /* Soft accent bloom sitting behind cards / panels. Deliberately wide, low
     alpha and heavily negative-spread so it reads as light coming off the
     edge of the container rather than a neon outline. */
  --glow:       0 16px 44px -30px rgba(0, 168, 246, 0.55),
                0 0 28px -16px rgba(0, 168, 246, 0.18);
  --glow-hover: 0 26px 62px -30px rgba(0, 168, 246, 0.8),
                0 0 38px -14px rgba(0, 168, 246, 0.3);

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 14px;
  --radius-sm: 10px;

  --font-display: "Archivo", "Archivo Expanded", "Oswald", "Bebas Neue",
                  -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Horizontal-sweep animations mean children can sit outside the layout box
   mid-flight. `clip` (rather than `hidden`) keeps position:sticky working. */
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

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

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: #041018; padding: 10px 18px;
  font-weight: 700; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.02; letter-spacing: -0.015em; }

.section-label {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--text-mute);
}
.section-label::after {
  content: ""; width: 44px; height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}

.section-title {
  font-size: clamp(2.1rem, 5.4vw, 4rem);
  text-transform: uppercase;
  margin: 18px 0 20px;
}
.section-title .accent { color: var(--accent); }

.section-copy { color: var(--text-dim); max-width: 46ch; font-size: 1rem; }
.section-copy + .section-copy { margin-top: 14px; }

/* ---------- buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 13px 26px;
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.02em;
  border-radius: 8px; border: 1px solid transparent;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease,
              background-color .25s ease, border-color .25s ease, color .25s ease;
}
.btn .arrow { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #02121d;
  box-shadow: 0 10px 30px -12px var(--accent-glow);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -14px var(--accent-glow); }
/* sheen sweep micro-interaction */
.btn-primary::after {
  content: ""; position: absolute; inset: 0 auto 0 -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
.btn-primary:hover::after { animation: sheen .75s ease forwards; }
@keyframes sheen { from { left: -60%; opacity: 1; } to { left: 120%; opacity: 0; } }

.btn-ghost {
  background: rgba(255,255,255,.03);
  border-color: var(--line-2);
  color: var(--text);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255,255,255,.08); border-color: var(--accent); transform: translateY(-2px); }

.btn-outline { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn-outline:hover { background: rgba(0,168,246,.12); transform: translateY(-2px); }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color .35s ease, backdrop-filter .35s ease,
              border-color .35s ease, transform .4s cubic-bezier(.22,1,.36,1), padding .35s ease;
  border-bottom: 1px solid transparent;
  padding: 14px 0;
}
.site-header.is-scrolled {
  background: rgba(5, 7, 10, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
  padding: 8px 0;
}
.site-header.is-hidden { transform: translateY(-100%); }

.header-inner { display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
/* Logo PNG is white/blue on a transparent background - sits directly on the
   dark header with no plate behind it. */
.brand img { height: 40px; width: auto; transition: height .35s ease; }
.site-header.is-scrolled .brand img { height: 34px; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.site-nav a {
  position: relative; font-size: 0.82rem; font-weight: 500;
  color: var(--text-dim); padding: 6px 0; transition: color .2s ease;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--accent); transition: right .3s cubic-bezier(.22,1,.36,1);
}
.site-nav a:hover, .site-nav a.is-active { color: var(--text); }
.site-nav a:hover::after, .site-nav a.is-active::after { right: 0; }

.header-cta { flex: 0 0 auto; }

.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; margin-left: auto; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); position: relative; transition: background .2s ease; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--text);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 140px 0 0;
  overflow: hidden;
  background: #04060a;
}
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
}
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%;
  filter: brightness(1.06) contrast(1.05) saturate(1.04);
  will-change: transform;
}
/* The supplied CNC photo is the hero of the page, so the wash over it is kept
   deliberately light: a soft scrim on the left third (where the copy sits) and
   small top/bottom fades for the fixed header and the stat strip. The middle
   and right of the frame - the machine head and the part being cut - are left
   almost untouched. Legibility of the copy comes from the local scrim behind
   .hero-copy plus text-shadow, not from darkening the whole photograph. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4,6,10,.88) 0%, rgba(4,6,10,.6) 22%, rgba(4,6,10,.26) 44%, rgba(4,6,10,.05) 62%, transparent 78%),
    linear-gradient(180deg, rgba(4,6,10,.58) 0%, transparent 20%, transparent 66%, rgba(4,6,10,.8) 100%);
}
.hero-grid-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 20%, transparent 75%);
}

.hero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: 130px; }
/* Local, feathered scrim - only under the copy, so the rest of the photo stays
   bright. No z-index here on purpose: the ::before (z-index:-1) then resolves
   inside .hero-inner's stacking context, i.e. behind the words but still in
   front of .hero-media. */
.hero-copy { position: relative; max-width: 680px; }
.hero-copy::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -64px -110px -54px -80px;
  background: radial-gradient(ellipse at 30% 50%,
              rgba(3,5,9,.74) 0%, rgba(3,5,9,.46) 46%, rgba(3,5,9,.12) 68%, transparent 80%);
}
.hero-eyebrow { margin-bottom: 22px; }

.hero h1 {
  font-size: clamp(2.8rem, 7.6vw, 6.2rem);
  text-transform: uppercase;
  line-height: 0.94;
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; text-shadow: 0 2px 30px rgba(2,4,8,.8), 0 1px 3px rgba(2,4,8,.5); }
.hero h1 .l2 { color: var(--accent); }
.hero-eyebrow, .hero-sub, .hero-support { text-shadow: 0 1px 16px rgba(2,4,8,.9), 0 1px 2px rgba(2,4,8,.6); }

.hero-sub {
  margin-top: 26px;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 600; color: #dbe4ee; max-width: 26ch;
  line-height: 1.35;
}
.hero-support { margin-top: 20px; color: var(--text-dim); max-width: 48ch; font-size: 0.97rem; }
.hero-actions { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }

/* hero stat strip */
.hero-strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(5,7,10,.25), rgba(5,7,10,.85));
  box-shadow: 0 -18px 46px -34px rgba(0,168,246,.6);
  backdrop-filter: blur(6px);
}
.hero-strip .container { display: flex; align-items: center; gap: 0; }
.strip-items { display: flex; flex: 1 1 auto; flex-wrap: wrap; }
.strip-item {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 28px 20px 0; margin-right: 28px;
  border-right: 1px solid var(--line);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-dim);
}
.strip-item:last-child { border-right: 0; margin-right: 0; }
.strip-item svg { flex: 0 0 auto; width: 22px; height: 22px; stroke: var(--accent); }
.strip-tag {
  margin-left: auto; text-align: right;
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-mute); white-space: nowrap;
}
.strip-tag span { display: block; }
.strip-tag span:last-child { color: var(--text-dim); border-bottom: 1px solid var(--accent); padding-bottom: 4px; }

/* ---------- generic section ---------- */
.section { position: relative; padding: clamp(84px, 11vw, 150px) 0; }
.section-alt { background: var(--bg-2); }
.section-hairline::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 22%, var(--line-2) 78%, transparent);
}

/* split layout: sticky text column + content */
.split {
  display: grid; gap: clamp(36px, 5vw, 72px);
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
}
.split-intro { position: sticky; top: 120px; }
/* Sections whose right-hand column carries a 3- or 4-up grid need more of
   the row; the intro headline scales down to suit its narrower column. */
.split-wide { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); }
.split-widest { grid-template-columns: minmax(0, 0.48fr) minmax(0, 1.52fr); }
.split .section-title { font-size: clamp(1.85rem, 3.3vw, 2.95rem); }
.split .section-copy { font-size: 0.95rem; max-width: 40ch; }

/* ---------- capabilities ---------- */
.cap-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cap-card {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 268px; padding: 24px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--glow);
  transition: border-color .35s ease, transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
.cap-card:nth-child(1), .cap-card:nth-child(4) { min-height: 300px; }
.cap-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  filter: saturate(.85) contrast(1.06);
  transition: transform .8s cubic-bezier(.22,1,.36,1);
}
.cap-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(200deg, rgba(5,7,10,.25) 0%, rgba(5,7,10,.78) 52%, rgba(5,7,10,.96) 100%);
  transition: background .4s ease;
}
.cap-img { z-index: 0; }
.cap-body { position: relative; z-index: 2; }
.cap-card:hover { border-color: rgba(0,168,246,.55); transform: translateY(-5px); box-shadow: var(--glow-hover); }
.cap-card:hover .cap-img { transform: scale(1.09); }

.cap-body { width: 100%; }
.cap-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 14px;
  border: 1px solid rgba(0,168,246,.4); border-radius: 10px;
  background: rgba(0,168,246,.1);
  box-shadow: 0 0 24px -10px rgba(0,168,246,.55);
}
.cap-icon svg { width: 21px; height: 21px; stroke: var(--accent); }
.cap-card h3 { font-size: 1.28rem; text-transform: none; letter-spacing: -0.01em; }
.cap-card p { margin-top: 8px; color: var(--text-dim); font-size: 0.88rem; max-width: 34ch; }
.cap-mark {
  position: absolute; right: 20px; bottom: 20px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.cap-card:hover .cap-mark { background: var(--accent); border-color: var(--accent); color: #02121d; transform: translateX(3px); }
.cap-index {
  position: absolute; top: 18px; left: 22px; z-index: 2;
  font-family: var(--font-display); font-size: 0.72rem; letter-spacing: .2em;
  color: var(--text-mute);
}

/* ---------- process ---------- */
.process { position: relative; overflow: hidden; }
.process-bg {
  position: absolute; inset: 0; z-index: 0; opacity: .07;
  background: url("assets/img/process-drawings.jpg") center/cover no-repeat;
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%, transparent 100%);
  filter: grayscale(1) contrast(1.1);
}
.process .container { position: relative; z-index: 1; }

.process-track { position: relative; }
.process-line {
  position: absolute; top: 28px; left: 28px; right: 28px; height: 2px;
  background: var(--line); overflow: hidden;
}
.process-line i {
  display: block; height: 100%; width: 100%;
  transform-origin: left center; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
}
.process-steps {
  position: relative; list-style: none;
  display: grid; gap: 30px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.step-num {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  border: 1.5px solid var(--accent);
  background: var(--bg-2);
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: var(--text);
  box-shadow: 0 0 0 6px rgba(5,7,10,.9), 0 0 32px -6px var(--accent-glow);
}
.step-head { display: flex; align-items: center; gap: 16px; }
.step-icon { width: 34px; height: 34px; stroke: var(--accent); opacity: .8; }
.step h3 { margin-top: 24px; font-size: 1.16rem; text-transform: none; }
.step p { margin-top: 10px; color: var(--text-dim); font-size: 0.9rem; max-width: 32ch; }

/* ---------- industries ---------- */
.ind-grid { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ind-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--glow);
  transition: border-color .35s ease, transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
.ind-card:hover { border-color: rgba(0,168,246,.45); transform: translateY(-5px); box-shadow: var(--glow-hover); }
.ind-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.ind-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.22,1,.36,1);
  filter: saturate(.85) contrast(1.05);
}
.ind-card:hover .ind-media img { transform: scale(1.07); }
.ind-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,7,10,.1), rgba(5,7,10,.85));
}
.ind-body { padding: 20px 20px 24px; }
.ind-body svg { width: 24px; height: 24px; stroke: var(--accent); margin-bottom: 12px; }
.ind-body h3 { font-size: 1.02rem; text-transform: none; }
.ind-body p { margin-top: 8px; color: var(--text-dim); font-size: 0.84rem; }

/* ---------- projects ---------- */
.projects-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; margin-bottom: 46px;
}
.proj-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.proj-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--glow);
  transition: border-color .35s ease, box-shadow .45s ease;
}
.proj-card:hover { border-color: rgba(0,168,246,.5); box-shadow: var(--glow-hover); }
.proj-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.proj-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s cubic-bezier(.22,1,.36,1), filter .5s ease;
  filter: saturate(.9) contrast(1.06);
}
.proj-card:hover .proj-media img { transform: scale(1.06); filter: saturate(1) contrast(1.1); }
.proj-num {
  position: absolute; top: 14px; left: 16px; z-index: 2;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 800;
  letter-spacing: .2em; color: var(--text);
  background: rgba(5,7,10,.7); border: 1px solid var(--line-2);
  padding: 5px 10px; border-radius: 6px; backdrop-filter: blur(4px);
}
.proj-body {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px 20px;
}
.proj-body h3 { font-size: 1.04rem; text-transform: none; }
.proj-body p { margin-top: 5px; color: var(--text-dim); font-size: 0.82rem; }
.proj-link {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.proj-card:hover .proj-link { background: var(--accent); border-color: var(--accent); color: #02121d; transform: translateX(3px); }
.placeholder-note {
  margin-top: 26px; font-size: 0.74rem; color: var(--text-mute);
  letter-spacing: .04em;
}

/* ---------- applications (data-driven, hidden when empty) ---------- */
.app-grid, .testimonial-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.app-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  box-shadow: var(--glow);
  transition: border-color .3s ease, transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.app-card:hover { border-color: rgba(0,168,246,.45); transform: translateY(-4px); box-shadow: var(--glow-hover); }
.app-type {
  align-self: flex-start;
  font-size: 0.64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgba(0,168,246,.35);
  background: rgba(0,168,246,.08); padding: 4px 10px; border-radius: 999px;
}
.app-card h3 { font-size: 1.1rem; text-transform: none; }
.app-card p { color: var(--text-dim); font-size: 0.88rem; }
.app-card .btn { margin-top: auto; align-self: flex-start; }

.testimonial-card {
  position: relative; padding: 30px 28px 26px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  box-shadow: var(--glow);
}
.testimonial-card::before {
  content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 2px;
  background: linear-gradient(180deg, var(--accent), transparent);
}
.testimonial-text { color: #dbe4ee; font-size: 0.97rem; line-height: 1.75; }
.testimonial-author {
  margin-top: 16px; font-size: 0.74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute);
}

/* ---------- apply modal ---------- */
.modal { position: fixed; inset: 0; z-index: 300; display: none; }
.modal.open { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(2,4,7,.82); backdrop-filter: blur(5px); }
.modal-panel {
  position: relative; z-index: 1;
  width: min(560px, calc(100% - 32px));
  max-height: calc(100svh - 64px); overflow-y: auto;
  margin: 32px auto;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--radius);
  box-shadow: var(--glow-hover);
  padding: 30px;
}
.modal-panel h3 { font-size: 1.3rem; text-transform: none; padding-right: 40px; }
.modal-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; font-size: 1.3rem; color: var(--text-dim); }
.modal-close:hover { color: var(--text); }
.field { display: block; margin-top: 16px; }
.field span { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 7px; }
.field input, .field textarea {
  width: 100%; padding: 12px 14px;
  background: var(--bg-3); color: var(--text);
  border: 1px solid var(--line-2); border-radius: 8px;
  font: inherit; font-size: 0.92rem;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.form-error { margin-top: 14px; color: #ff8080; font-size: 0.85rem; }
.form-success { display: none; color: var(--accent-3); font-size: 0.95rem; }
.form-success.open { display: block; }

/* ---------- final CTA ---------- */
.cta {
  position: relative; overflow: hidden;
  padding: clamp(80px, 10vw, 130px) 0;
  background: #06090e;
}
.cta-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url("assets/img/cta-precision-parts.jpg") center right / cover no-repeat;
  filter: grayscale(.4) brightness(.55) contrast(1.15);
}
.cta-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #05070a 0%, rgba(5,7,10,.96) 34%, rgba(5,7,10,.7) 62%, rgba(5,7,10,.55) 100%),
    linear-gradient(135deg, rgba(0,168,246,.18), transparent 55%);
}
/* angled technical shards, echoing the logo's mountain mark */
.cta-shard {
  position: absolute; z-index: 1; pointer-events: none;
  width: 260px; height: 130%;
  background: linear-gradient(180deg, rgba(0,168,246,.16), transparent);
  transform: skewX(-18deg);
}
.cta-shard.s1 { left: 6%; top: -15%; opacity: .5; }
.cta-shard.s2 { left: 20%; top: -15%; width: 110px; opacity: .28; }
.cta .container { position: relative; z-index: 2; }
.cta-grid {
  display: grid; gap: clamp(28px, 4vw, 56px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) auto;
  align-items: center;
}
.cta h2 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); text-transform: uppercase; margin-top: 16px; }
.cta h2 .q { color: var(--accent); }
.cta-copy p { color: var(--text-dim); font-size: 0.97rem; }
.cta-copy p + p { margin-top: 12px; }

/* ---------- footer ---------- */
.site-footer { background: #04060a; border-top: 1px solid var(--line); padding: 64px 0 28px; }
.footer-grid {
  display: grid; gap: 40px;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr) minmax(0, 1.2fr);
}
.footer-brand img { height: 44px; width: auto; }
.footer-tag {
  margin-top: 16px; font-size: 0.66rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--text-mute);
}
.footer-desc { margin-top: 16px; color: var(--text-dim); font-size: 0.87rem; max-width: 42ch; }
.footer-col h4 { font-size: 0.7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 16px; font-weight: 700; }
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-col a { color: var(--text-dim); font-size: 0.88rem; transition: color .2s ease; }
.footer-col a:hover { color: var(--accent); }
.footer-contact li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-dim); font-size: 0.88rem; }
.footer-contact svg { width: 17px; height: 17px; stroke: var(--accent); flex: 0 0 auto; margin-top: 3px; }
.footer-bottom {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 0.75rem; color: var(--text-mute);
}
.footer-bottom a { color: var(--text-dim); }
.footer-bottom a:hover { color: var(--accent); }
.footer-bottom .legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-sig { letter-spacing: .22em; text-transform: uppercase; font-size: 0.66rem; }

/* ---------- booking iframe shell (required RizeStack embed) ---------- */
.booking-wrap { padding: 150px var(--gutter) 90px; }
.booking-wrap h1 { font-size: clamp(2.2rem, 5.4vw, 3.6rem); text-transform: uppercase; }
.booking-wrap .lede { margin-top: 16px; color: var(--text-dim); max-width: 60ch; }
.booking-frame-shell {
  margin-top: 36px;
  width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--panel);
  box-shadow: var(--glow);
}
.booking-frame-shell iframe { display: block; width: 100%; min-height: 760px; border: 0; }
.booking-fallback { margin-top: 18px; font-size: 0.85rem; color: var(--text-mute); }
.booking-fallback a { color: var(--accent); }
.spec-list { margin-top: 30px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.spec-list li {
  list-style: none; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel);
  color: var(--text-dim); font-size: 0.85rem;
  box-shadow: var(--glow);
}
.spec-list strong { display: block; color: var(--text); font-size: 0.8rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 5px; }

/* ---------- legal pages ---------- */
.legal-wrap { padding: 150px var(--gutter) 90px; max-width: 860px; }
.legal-wrap h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); text-transform: uppercase; }
.legal-updated { margin-top: 12px; font-size: 0.76rem; color: var(--text-mute); letter-spacing: .1em; text-transform: uppercase; }
.legal-card {
  margin-top: 34px; padding: clamp(24px, 4vw, 40px);
  background: var(--panel); border: 1px solid var(--line);
  border-top: 2px solid var(--accent); border-radius: var(--radius);
  box-shadow: var(--glow);
}
.legal-card h2 { font-size: 1.15rem; text-transform: none; margin: 30px 0 10px; }
.legal-card h2:first-child { margin-top: 0; }
.legal-card p, .legal-card li { color: var(--text-dim); font-size: 0.93rem; line-height: 1.8; }
.legal-card p + p { margin-top: 12px; }
.legal-card ul { margin: 12px 0 0 20px; display: grid; gap: 8px; }
.legal-card a { color: var(--accent); }
/* ...but a button inside one of these panels keeps its own label colour -
   the accent-on-accent inherited above renders the text invisible. */
.legal-card a.btn-primary { color: #02121d; }
.legal-card a.btn-ghost { color: var(--text); }
.legal-card strong { color: var(--text); }

/* ==========================================================================
   AMBIENT ACCENT BLOOM
   A very low-alpha pool of the logo blue sitting behind each content grid, so
   the cards read as lit from within the page rather than floating on flat
   black. `isolation: isolate` pins the pseudo-element into the grid's own
   stacking context - without it a z-index:0 layer here would fall behind the
   section's background colour and disappear.
   ========================================================================== */
.cap-grid, .ind-grid, .proj-grid, .process-steps, .app-grid, .testimonial-grid, .spec-list {
  position: relative;
  isolation: isolate;
}
.cap-grid::before, .ind-grid::before, .proj-grid::before,
.process-steps::before, .app-grid::before, .testimonial-grid::before, .spec-list::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -9% -7%;
  background: radial-gradient(ellipse at 50% 45%, rgba(0,168,246,.09), transparent 66%);
}
/* Most cards are position:relative already, so DOM order alone keeps them
   painted over the bloom. These are statically positioned and need lifting
   explicitly. (.split-intro is only given a z-index - it is position:sticky
   above and must stay that way.) */
.step, .app-card, .spec-list li, .projects-head { position: relative; z-index: 1; }
.split-intro { z-index: 1; }

/* ==========================================================================
   SCROLL ENTRANCE SYSTEM
   GSAP + ScrollTrigger drives the choreography (see site.js). These classes
   only set the *pre-animation* state, and are applied by JS (`js-anim` on
   <html>) so that with JS off - or GSAP blocked - everything is visible.
   ========================================================================== */
.js-anim [data-sweep] { opacity: 0; will-change: transform, opacity; }
.js-anim .process-line i { transform: scaleX(0); }
.js-anim .process-line-v i { transform: scaleY(0); }

/* Reduced motion: no pre-hidden state at all, no transforms. */
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-sweep] { opacity: 1 !important; transform: none !important; }
  .cap-card::before, .ind-media img, .proj-media img { transition: none !important; }
}

/* ==========================================================================
   RESPONSIVE - grids are recomposed, not just shrunk
   ========================================================================== */
@media (max-width: 1100px) {
  .split, .split-wide, .split-widest { grid-template-columns: 1fr; }
  .split-intro { position: static; }
  .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-grid { grid-template-columns: 1fr; }
  .cta-grid .btn { justify-self: start; }
}

@media (max-width: 900px) {
  .site-nav {
    position: fixed; inset: 0 0 auto 0; top: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 90px 24px 28px;
    background: rgba(5,7,10,.97); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-105%);
    transition: transform .45s cubic-bezier(.22,1,.36,1);
    margin-left: 0;
  }
  .site-nav.open { transform: translateY(0); }
  .site-nav a { font-size: 1.05rem; padding: 15px 0; border-bottom: 1px solid var(--line); }
  .site-nav a::after { display: none; }
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .site-nav .nav-cta { display: inline-flex; margin-top: 20px; }

  .proj-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; gap: 34px; }
  .process-line { display: none; }
  .process-line-v {
    position: absolute; left: 28px; top: 40px; bottom: 40px; width: 2px;
    background: var(--line); overflow: hidden;
  }
  .process-line-v i {
    display: block; width: 100%; height: 100%;
    transform-origin: top center;
    background: linear-gradient(180deg, var(--accent), var(--accent-3));
  }

  /* Stacked layout: the step number sits in its own left-hand column with the
     heading and paragraph beside it, instead of the copy running full-bleed
     under the circle (which put the vertical connector straight through the
     paragraph text and read as the number sitting on top of the words). */
  .step {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 18px;
    align-items: start;
  }
  /* display:contents dissolves the head wrapper so the number and the icon
     become grid items of .step in their own right - the number can then hold
     the left column on its own while the icon moves over to sit above the
     heading, instead of both stacking down the left and colliding with the
     vertical connector. */
  .step-head { display: contents; }
  .step-num { grid-column: 1; grid-row: 1 / span 3; }
  .step-icon { grid-column: 2; grid-row: 1; width: 26px; height: 26px; margin-bottom: 12px; }
  .step h3 { grid-column: 2; grid-row: 2; margin-top: 0; }
  .step p { grid-column: 2; grid-row: 3; margin-top: 10px; max-width: none; }
  .hero-strip .container { flex-direction: column; align-items: flex-start; }
  .strip-tag { margin-left: 0; text-align: left; padding-bottom: 16px; }
}

@media (min-width: 901px) { .process-line-v { display: none; } .site-nav .nav-cta { display: none; } }

@media (max-width: 720px) {
  .cap-grid { grid-template-columns: 1fr; }
  .cap-card, .cap-card:nth-child(1), .cap-card:nth-child(4) { min-height: 240px; }
  .ind-grid { grid-template-columns: 1fr; }
  .ind-media { aspect-ratio: 16 / 9; }
  /* On phones the stat strip is too tall to overlay the hero copy, so it
     drops out of absolute positioning and stacks underneath it instead. */
  .hero { min-height: auto; padding: 118px 0 0; display: block; }
  .hero-inner { padding-bottom: 44px; }
  .hero-strip { position: static; backdrop-filter: none; }
  .strip-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .hero-media img { object-position: 64% 45%; }
  /* Much lighter than before - the phone hero was washing the photograph out
     almost completely. The copy keeps its own local scrim + text-shadow. */
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(4,6,10,.72) 0%, rgba(4,6,10,.34) 38%, rgba(4,6,10,.4) 66%, rgba(4,6,10,.86) 100%),
      linear-gradient(90deg, rgba(4,6,10,.46), rgba(4,6,10,.1) 70%);
  }
  .hero-copy::before {
    inset: -34px -26px -28px -26px;
    background: radial-gradient(ellipse at 50% 50%,
                rgba(3,5,9,.8) 0%, rgba(3,5,9,.58) 52%, rgba(3,5,9,.2) 74%, transparent 88%);
  }
  .hero-sub, .hero-support { max-width: none; }
  .hero-actions .btn { flex: 1 1 100%; }
  .strip-item { border-right: 0; padding: 12px 0; margin-right: 0; width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .projects-head { margin-bottom: 32px; }
  .booking-frame-shell iframe { min-height: 860px; }
  .section-title { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  /* Phones: slightly smaller number so the copy column keeps a usable measure
     at 375px. The connector moves with it so it stays dead-centre behind the
     circles and well clear of the text. */
  .step { grid-template-columns: 50px minmax(0, 1fr); column-gap: 15px; }
  .step-num { width: 50px; height: 50px; font-size: 1rem; }
  .process-line-v { left: 24px; }
}

@media (min-width: 1600px) { :root { --maxw: 1400px; } }