/* ==========================================================================
   REXTON.STUDIO, SHARED DESIGN SYSTEM
   Concept: "Blued Steel", the dark oxide-blue finish smiths temper into
   tool steel. Brand blue stays, read through a fabrication lens instead
   of a generic dark-SaaS lens. Sharp/cut corners, spec-sheet framing,
   one warm "weld seam" accent used only in the signature detail.
   ========================================================================== */

:root {
  /* ---- Color: named + hex, 6 total ---- */
  --steel-black: #05070A;   /* page base */
  --blued-navy: #0B1017;    /* raised surface / cards */
  --blued-navy-2: #111923;  /* hover surface / stronger border */
  --forge-blue: #1788F2;    /* primary accent, exact hex from the Rexton Studio logo mark */
  --steel-silver: #98A7BA;  /* secondary text on dark */
  --paper: #EDEFF2;         /* light surface + text on dark */
  --ember: #F2A900;         /* signature-only warm accent, exact hex from the logo mark */

  --ink: #0c1017;           /* text on light surfaces */
  --line: #223142;
  --line-strong: #223142;
  --forge-blue-bright: #35A3FF; /* lit tint of forge-blue, for gradient highlights only */
  /* Accessibility variants of the logo blue (WCAG 2.1 AA, measured 2026-09-27).
     #0e7ad5 itself passes as text only on pure black (4.76:1); on the navy
     cards it is 3.96:1 and white text on a #0e7ad5 button is 4.41:1, both
     under the 4.5:1 AA needs for small text. So:
       --forge-blue-text  any blue TEXT: 6.26 on black, 5.21 on navy, 4.61 on navy-2
       --forge-blue-fill  any blue FILL carrying white text: 5.05:1 with #fff
     Keep --forge-blue for borders, glows, icons and rules (3:1 is enough there). */
  --forge-blue-text: #1788F2;
  --forge-blue-fill: #1788F2;

  /* ---- Type ---- */
  --font-display: "Inter Tight", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  /* ---- Nav height: shared with .hero's top padding calc so the two
     never drift out of sync when this changes per breakpoint ---- */
  --nav-h: 76px;

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* ---- Radius: fabricated edges stay near-square; only small parts get eased ----
     Cut steel doesn't round over. Radius is reserved for pills (tags/buttons)
     and never applied to structural cards/panels. */
  --radius-cut: 2px;
  --radius-pill: 999px;

  /* ---- Elevation: beveled-edge highlight, not colored glow blobs ---- */
  --bevel: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 0 1px rgba(159, 176, 196, 0.08);
  --shadow-lift: 0 24px 48px -24px rgba(0, 0, 0, 0.55);

  /* ---- Motion ---- */
  --ease-forge: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 720ms;
}

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

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--steel-black);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

::selection { background: var(--forge-blue); color: var(--paper); }

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

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--sp-6);
}

@media (max-width: 640px) {
  .container { padding: 0 var(--sp-4); }
}

/* ---- Type scale ---- */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0;
  text-transform: uppercase;
}
h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
  text-transform: uppercase;
}

h1 { font-weight: 800; }

.eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--steel-silver);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--ember);
  border-radius: 1px;
  transform: rotate(45deg);
  flex-shrink: 0;
}

p { margin: 0; }

.text-silver { color: var(--steel-silver); }

/* ==========================================================================
   SECTION FRAMING
   Sections are separated by a hairline rule, cards carry crop-mark corners
   like a technical drawing register mark. The numbered "SHEET 01 / 03" index
   labels that used to sit in each section corner were removed at the owner's
   request: only the heading carries the section now. Do not reinstate them.
   ========================================================================== */

.sheet {
  position: relative;
  padding: var(--sp-24) 0;
  border-top: 1px solid var(--line);
}

@media (max-width: 640px) {
  .sheet { padding: var(--sp-16) 0; }
}

/* Crop-mark card: corner brackets like a technical drawing register mark */
.crop {
  position: relative;
}

.crop::before,
.crop::after,
.crop > .crop-tl,
.crop > .crop-br {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  opacity: 0.5;
}

.crop::before {
  content: "";
  top: -1px; left: -1px;
  border-top: 1.5px solid var(--forge-blue);
  border-left: 1.5px solid var(--forge-blue);
}

.crop::after {
  content: "";
  bottom: -1px; right: -1px;
  border-bottom: 1.5px solid var(--forge-blue);
  border-right: 1.5px solid var(--forge-blue);
}

/* ==========================================================================
   SIGNATURE ELEMENT, THE WELD SEAM
   A hairline that runs along a card/panel edge, dark by default. On
   hover/focus it lights the way a fresh weld glows: a bright point of
   heat sweeps along the seam and fades behind it.
   ========================================================================== */

.seam {
  position: relative;
  background: var(--blued-navy);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-cut);
  box-shadow: var(--bevel);
  overflow: hidden;
}

.seam::after {
  content: "";
  position: absolute;
  top: 0; left: -30%;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ember) 40%, var(--forge-blue) 70%, transparent);
  filter: blur(0.5px);
  transition: left var(--dur-slow) var(--ease-forge);
}

.seam:hover::after,
.seam:focus-within::after {
  left: 100%;
}

/* Cursor-aware glint: JS sets --mx/--my (0-100) per card */
.seam.glint {
  --mx: 50%;
  --my: 0%;
}

.seam.glint::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(47, 111, 237, 0.14), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-forge);
  pointer-events: none;
}

.seam.glint:hover::before { opacity: 1; }

/* ---- Buttons ---- */
.btn {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.btn-primary {
  background: linear-gradient(90deg, #0869C7, #1788F2);
  color: #fff;
  box-shadow: 0 10px 30px -12px rgba(23, 136, 242, 0.4);
}

.btn-primary:hover { background: #35A3FF; transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(23, 136, 242, 0.6); }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--line-strong);
}

.btn-ghost:hover { border-color: var(--forge-blue); background: rgba(47, 111, 237, 0.08); transform: translateY(-2px); }

.btn-dark {
  background: var(--steel-black);
  color: var(--paper);
  border-color: var(--line-strong);
}
.btn-dark:hover { border-color: var(--forge-blue); transform: translateY(-2px); }

/* ---- Liquid glass: frosted, translucent, refractive, for the one
   floating pill that sits directly over live page content rather than on
   a card surface, where a flat fill would just look like a flat chip. ---- */
.btn-glass {
  background: rgba(14, 122, 213, 0.32);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(86, 194, 255, 0.45);
  box-shadow: 0 8px 32px -8px rgba(14, 122, 213, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  color: var(--paper);
}
.btn-glass:hover { background: rgba(14, 122, 213, 0.42); transform: translateY(-2px); }
.btn-glass:active { transform: translateY(0); }

/* ---- Nav ---- */
/* Transparent over the hero by default, floats directly on the page like
   the reference sites, no bar/border until it detaches on scroll. The
   detach itself is an instant state change now, not an eased transition:
   animating top/left/width was the source of the persistent "not smooth"
   feel, a real position/size snap reads cleaner than an animation that
   keeps stuttering. */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
}

.site-nav .container {
  position: relative;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: height var(--dur-med) var(--ease-forge);
}

@media (max-width: 640px) {
  :root { --nav-h: 66px; }
}

/* ---- Floating pill: once you've scrolled past the hero, the bar detaches
   from the top edge and shrinks in, like iOS Safari's compact toolbar.
   Desktop only, on mobile this state change never read as smooth no
   matter how it was tuned, so mobile nav now just stays put, transparent,
   the whole way down instead of chasing an animation that kept stuttering. ---- */
@media (min-width: 641px) {
  .site-nav.is-floating {
    top: 14px;
    left: 50%;
    right: auto;
    width: min(880px, 92vw);
    transform: translateX(-50%);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(18, 26, 38, 0.55);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    /* Cosmetic-only transition, a soft materialize on color/shadow, none of
       it is on the properties that were causing the jank above. */
    transition: background var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out;
  }
  .site-nav.is-floating .container { height: calc(var(--nav-h) - 12px); }
}

/* Header, mobile default: logo centered, brand name pinned left, burger right.
   Desktop (see grid media query below) rearranges the same elements:
   logo far left, services centered, brand name + CTA far right. */
.nav-zone-left {
  display: flex;
  align-items: center;
}

.logo-link {
  display: flex;
  align-items: center;
}

.brand-text {
  position: absolute;
  /* Absolute offsets align with the container's outer edge, not its padding
     edge, so this has to match .container's own padding exactly (both
     breakpoints) to sit flush with where a normal child would land, same as
     the burger button does on the opposite side. */
  left: var(--sp-6);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper);
}

@media (max-width: 640px) {
  .brand-text { left: var(--sp-4); font-size: 1.15rem; }
}

/* Below desktop, the logo now sits left in its natural place, the
   separate wordmark text next to it was redundant on a narrow header. */
@media (max-width: 1219px) {
  .brand-text { display: none; }
}

.nav-logo {
  height: 56px;
  width: auto;
  display: block;
}

@media (max-width: 640px) {
  .nav-logo {
  height: 56px;
  width: auto;
  display: block;
}
}

@media (max-width: 460px) {
  .nav-logo {
  height: 56px;
  width: auto;
  display: block;
}
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.wordmark .mark {
  width: 9px;
  height: 9px;
  background: var(--forge-blue);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.wordmark .logo-icon {
  height: 48px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.wordmark span.accent { color: var(--forge-blue); }

.nav-right {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

.nav-center, .nav-util { display: none; }

/* ---- Desktop: Cloudflare-style layout, logo left, services centered, brand + CTA right.
   Container stays flex + space-between (same as mobile); nav-center is absolute-centered
   on the container so it sits at the true page midpoint regardless of how wide the logo
   or the right-hand cluster are, a grid 1fr/auto/1fr track does NOT give this (each 1fr
   track reserves its own content's minimum width first, so unequal side content skews
   the "centered" column off true center). Held off until 1220px: below that, the centered
   service row and the right-hand cluster don't have room to both fit without crowding, so
   the layout falls back to the mobile bar (logo centered, name left, burger menu). ---- */
@media (min-width: 1220px) {
  .logo-link { position: static; transform: none; }

  .nav-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: var(--sp-6);
  }

  .nav-center a, .nav-util {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--steel-silver);
    text-transform: uppercase;
    position: relative;
    padding-bottom: 4px;
    transition: color var(--dur-fast);
  }

  .nav-center a:hover, .nav-util:hover { color: var(--paper); }

  .nav-center a::after, .nav-util::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    height: 1px;
    width: 0;
    background: var(--forge-blue);
    transition: width var(--dur-fast) var(--ease-forge);
  }

  .nav-center a:hover::after, .nav-util:hover::after { width: 100%; }

  .nav-center a.is-active, .nav-util.is-active { color: var(--paper); }
  .nav-center a.is-active::after, .nav-util.is-active::after { width: 100%; }

  .nav-util { display: inline-flex; }

  .brand-text { position: static; transform: none; }
}

.nav-burger {
  width: 40px; height: 40px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
  background: none; border: none; cursor: pointer;
}
@media (min-width: 1220px) { .nav-burger { display: none; } }

.nav-burger span {
  width: 20px; height: 1.5px; background: var(--paper);
  transition: transform var(--dur-fast), opacity var(--dur-fast);
}


.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 10, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 99;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
  pointer-events: none;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.menu-bg-glow {
  position: absolute;
  top: -10%; left: -10%; right: -10%; height: 50vh;
  background: radial-gradient(circle at 50% 0%, rgba(23,136,242,0.15), transparent 70%);
  pointer-events: none;
}

.mobile-nav-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: calc(var(--nav-h) + 2rem) var(--sp-6) var(--sp-6);
  justify-content: space-between;
  position: relative;
  z-index: 2;
  height: 100vh;
  overflow-y: auto;
}

.mobile-links {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 2rem;
}

.menu-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.75rem;
  text-transform: uppercase;
  color: var(--paper);
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
}

.mobile-menu.is-open .menu-link {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu.is-open .menu-link:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.is-open .menu-link:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu.is-open .menu-link:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu.is-open .menu-link:nth-child(4) { transition-delay: 0.25s; }

.menu-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--forge-blue);
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.menu-link:hover { color: var(--forge-blue); }

.mobile-footer {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease 0.3s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
  border-top: 1px solid var(--line-strong);
  padding-top: 1.5rem;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mobile-menu.is-open .mobile-footer {
  opacity: 1;
  transform: translateY(0);
}

.menu-email {
  font-family: var(--font-mono);
  color: var(--paper);
  font-size: 1rem;
  margin: 0;
}

.menu-socials {
  display: flex;
  gap: 1.5rem;
}
.menu-socials a {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--steel-silver);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.2s;
}
.menu-socials a:hover { color: var(--forge-blue); }

/* ---- Footer: /* ---- Footer: a filled, rounded-top navy panel that lifts off the black
   page instead of just being another flat strip, same idea as a "card
   lifting" seam, kept inside the brand's own blue rather than borrowing
   an outside accent color. ---- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--blued-navy);
  border-radius: 32px 32px 0 0;
  padding: var(--sp-16) 0 var(--sp-8);
  box-shadow: 0 -1px 0 var(--line-strong);
}

.site-footer::before {
  content: "";
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  height: 360px;
  background: radial-gradient(ellipse closest-side, rgba(14, 122, 213, 0.16), transparent 78%);
  pointer-events: none;
}

.site-footer .container { position: relative; z-index: 1; }

@media (max-width: 640px) {
  /* Extra bottom padding reserves room for the floating sticky-cta pill
     kept on the footer itself (not body) so the navy panel's own
     background fills that space instead of leaving a bare black strip
     between the footer and the true bottom of the page. */
  .site-footer { border-radius: 20px 20px 0 0; padding-bottom: calc(var(--sp-8) + var(--sp-16)); }
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr auto;
  align-items: start;
  gap: var(--sp-8);
}

.footer-legal-link { text-align: right; }

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .footer-legal-link { text-align: left; }
}
.footer-legal-link a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--steel-silver);
  transition: color var(--dur-fast);
}
.footer-legal-link a:hover { color: var(--forge-blue-text); }

.footer-grid h2,
.footer-grid h4 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--steel-silver);
  font-weight: 500;
  margin-bottom: var(--sp-4);
}

.footer-grid a, .footer-grid p { color: var(--steel-silver); font-size: 0.9rem; }
.footer-grid a { display: block; margin-bottom: var(--sp-2); transition: color var(--dur-fast); }
.footer-grid a:hover { color: var(--paper); }
/* .footer-grid a's `display: block` beats .wordmark's own display by
   specificity (class+type > single class), restore inline-flex here,
   at matching specificity, so the logo link's hit area hugs its content
   instead of stretching block-wide across the column. */
.footer-grid .wordmark { display: inline-flex; margin-bottom: 0; }

.footer-bottom a { color: var(--steel-silver); transition: color var(--dur-fast); }
.footer-bottom a:hover { color: var(--paper); }
.footer-bottom {
  margin-top: var(--sp-12);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--steel-silver);
  flex-wrap: wrap;
  gap: var(--sp-4);
}

/* ---- Sticky mobile "Book a Call" pill. No business phone number exists on
   the site yet, so this drives to the contact form rather than a tel: link.
   A small floating liquid-glass pill, not a bar, no bounding box behind
   it, just the button itself sitting above the page content. ---- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  justify-content: center;
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.sticky-cta a { pointer-events: auto; padding: 0.7rem 1.35rem; font-size: 0.8rem; }
.sticky-cta a svg { width: 14px; height: 14px; }
@media (max-width: 640px) {
  .sticky-cta { display: flex; }
}

/* ---- Reveal on scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-forge), transform var(--dur-slow) var(--ease-forge);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---- Gradient accent text: a lit "glint" sweeping through brand blue,
   used sparingly on one phrase per headline. ---- */
.grad-text {
  color: var(--forge-blue);
  background: none;
  -webkit-text-fill-color: var(--forge-blue);
}
/* One glint as the headline arrives, not a loop. A shimmer that never stops is
   moving content lasting over 5s, which WCAG 2.2.2 says needs a pause control;
   a single pass under 5s does not, and reads as more deliberate anyway. The
   gradient tiles at 220%, so the end frame is identical to the start frame. */
.reveal.is-visible .grad-text {
  color: var(--forge-blue);
  background: none;
  -webkit-text-fill-color: var(--forge-blue);
}

@keyframes grad-shimmer {
  from { background-position: 0% 0; }
  to { background-position: -220% 0; }
}

/* ---- Trades marquee: seamless CSS-only ticker of every business we build for ---- */
.trades-band {
  position: relative;
  padding: var(--sp-4) 0;
  overflow: hidden;
}

.trades-band-label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-silver);
  margin: 0 0 var(--sp-4);
}

@media (max-width: 640px) {
  .trades-band { padding: var(--sp-3) 0; }
  .trades-band-label { margin-bottom: var(--sp-3); }
}

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 48s linear infinite;
  will-change: transform;
}
/* WCAG 2.2.2: the ticker moves forever, so it has a visible pause button
   (.marquee-pause) and also holds still while the pointer is over the strip.
   Hover is scoped to the strip, not the band, so pressing play while the
   pointer is still on the button does visibly restart it. */
.marquee:hover .marquee-track,
.trades-band.is-paused .marquee-track { animation-play-state: paused; }

.trades-band-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
}
.trades-band-head .trades-band-label { margin: 0; }
.marquee-pause {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--steel-silver);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.marquee-pause:hover { border-color: var(--forge-blue); color: var(--paper); }
.marquee-pause svg { width: 12px; height: 12px; }
.marquee-pause .i-play { display: none; }
.trades-band.is-paused .marquee-pause .i-play { display: block; }
.trades-band.is-paused .marquee-pause .i-pause { display: none; }
@media (max-width: 640px) {
  .trades-band-head { margin-bottom: var(--sp-3); }
}
/* Reduced motion: no ticker at all. Wrap the one real list so every trade is
   readable, drop the duplicate that only exists to make the loop seamless. */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { width: auto; animation: none; justify-content: center; }
  .marquee-group { flex-wrap: wrap; justify-content: center; row-gap: var(--sp-3); flex-shrink: 1; }
  .marquee-group[aria-hidden="true"] { display: none; }
  .marquee-pause { display: none; }
}

.marquee-group {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

.marquee-group li {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--steel-silver);
  white-space: nowrap;
  padding: 0 var(--sp-6);
}

.marquee-group li::after {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--forge-blue);
  transform: rotate(45deg);
  margin-left: var(--sp-6);
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 640px) {
  .marquee-group li { font-size: 1rem; padding: 0 var(--sp-4); }
  .marquee-group li::after { margin-left: var(--sp-4); }
}

/* ---- Blueprint grid backdrop ---- */
.blueprint-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 65% 60% at 50% 0%, #000 30%, transparent 100%);
  pointer-events: none;
}

/* The inquiry form moved into the hero on 2026-09-12, so on a phone the sticky
   pill now floats directly over the fields somebody is trying to fill in, and
   it points at the very form it is covering. Hidden while the form is on
   screen; index.html toggles the class from an IntersectionObserver. */
.sticky-cta.is-hidden {
  opacity: 0;
  transform: translateY(120%);
  pointer-events: none;
}
.sticky-cta { transition: opacity .3s ease, transform .3s ease; }


/* ============================================================
   ACCESSIBILITY (WCAG 2.1 AA pass, 2026-09-27)
   ============================================================ */

/* Skip link: first thing a keyboard user reaches on every page. Off screen
   until focused, then drops in over the nav. */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-3);
  z-index: 1000;
  padding: 0.7rem 1.1rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  border-radius: var(--radius-pill);
  transform: translateY(-200%);
  transition: transform var(--dur-fast) var(--ease-forge);
}
.skip-link:focus { transform: none; outline: 2px solid var(--forge-blue); outline-offset: 3px; }

/* Text for screen readers only. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The main landmark takes focus from the skip link; no ring on the whole page. */
main:focus { outline: none; }

/* Reflow at 320px (WCAG 1.4.10): a long nowrap button label such as "See
   profile management pricing" is wider than a 288px column and forced the
   page 2px wide. Let button labels wrap on the narrowest phones. */
@media (max-width: 400px) {
  .btn {
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}
}

.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 100%;
  background: radial-gradient(circle 600px at 50% 0%, rgba(23,136,242,0.16), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero-inner { position: relative; z-index: 1; }