/* ============================================================
   MODULE 1 — FOUNDATION
   Design tokens, reset, typography, shared UI primitives,
   app shell, Access Node modal.
   ============================================================ */

:root{
  /* --- Color Matrix --- */
  --c-canvas:      #F8F9FA;   /* Warm Alabaster White — surface canvas */
  --c-surface:     #FFFFFF;   /* secondary containers */
  --c-ink:         #09090B;   /* Deep Architectural Charcoal — structural copy / borders */
  --c-ink-soft:    rgba(9,9,11,0.62);
  --c-ink-faint:   rgba(9,9,11,0.38);
  --c-gold:        #9A7B1C;   /* Refined Antique Gold — status / calculus accents */
  --c-gold-soft:   rgba(154,123,28,0.12);
  --c-risk:        #DC2626;   /* muted alert red */
  --c-risk-soft:   rgba(220,38,38,0.10);
  --c-success:     #16A34A;   /* muted emerald green */
  --c-success-soft:rgba(22,163,74,0.10);
  --c-line:        rgba(9,9,11,0.12);
  --c-line-strong: rgba(9,9,11,0.24);

  /* --- Type ---
     Display: Space Grotesk — geometric, architectural sans reserved for
     editorial moments (hero, section titles) on client-facing surfaces.
     Uppercase + wide tracking throughout, matching the same convention
     already used on nav/buttons/wordmark — one consistent typographic
     language instead of a serif fighting the rest of the system. Body/UI:
     Public Sans, used everywhere else including all of Admin. Ledger:
     IBM Plex Mono, replacing the dated Courier New typewriter feel. All
     fall back gracefully if fonts fail to load. */
  --f-display: "Space Grotesk", "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --f-ui:   "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", "Courier New", Courier, monospace;
  --fs-base: 11pt;

  /* --- Rhythm --- */
  --radius: 2px;
  --shadow-panel: 0 1px 2px rgba(9,9,11,0.04), 0 12px 32px -16px rgba(9,9,11,0.18);
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html, body{
  margin:0; padding:0;
  background: var(--c-canvas);
  color: var(--c-ink);
  font-family: var(--f-ui);
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body{ min-height:100vh; }

h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }

button, input, select{ font-family: inherit; font-size: inherit; color: inherit; }

button{ cursor:pointer; background:none; border:none; }

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

::selection{ background: var(--c-gold-soft); color: var(--c-ink); }

/* --- Typographic scale --- */
.eyebrow{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-gold);
}

.display{
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.08;
  text-transform: uppercase; /* consistent with nav/buttons/wordmark — Space Grotesk is drawn for confident caps */
}

.wordmark{
  font-family: var(--f-ui);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.mono{ font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* --- Shared primitives --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding: 12px 22px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: all .25s var(--ease);
  white-space: nowrap;
  max-width: 100%;
}
/* A long CTA label forces its button to stay exactly as wide as the
   unbroken text, which can overflow the viewport on a phone — nowrap
   only ever made sense on desktop where there's room. Below 480px,
   buttons wrap onto a second line instead of pushing the page wider
   than the screen. */
@media (max-width: 480px){
  .btn{ white-space: normal; text-align:center; }
}
.btn-primary{
  background: var(--c-ink);
  color: var(--c-canvas);
  border: 1px solid var(--c-ink);
}
.btn-primary:hover{ background:#000; }
.btn-ghost{
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-line-strong);
}
.btn-ghost:hover{ border-color: var(--c-ink); }
.btn-gold{
  background: var(--c-gold);
  color: #fff;
  border: 1px solid var(--c-gold);
}
.btn-gold:hover{ filter: brightness(1.08); }

.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 4px 10px;
  font-size: 9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
}
.badge-risk{ color: var(--c-risk); background: var(--c-risk-soft); border-color: rgba(220,38,38,0.25); }
.badge-success{ color: var(--c-success); background: var(--c-success-soft); border-color: rgba(22,163,74,0.25); }
.badge-neutral{ color: var(--c-ink-soft); background: rgba(9,9,11,0.04); }

.panel{
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-panel);
}

.container{
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (max-width: 480px){
  .container{ padding: 0 20px; }
}

/* --- Site header / nav — shared markup in index.html and about.html.
   Desktop layout below matches what was previously written inline on the
   header/nav/links directly; pulled into classes here so the mobile media
   query can actually override it (a media query can't beat an inline
   style without !important). Nothing changes visually above the 720px
   breakpoint. --- */
.site-header{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  column-gap:16px;
  padding-top:28px;
  padding-bottom:28px;
  position:relative;
}
.site-header .wordmark{ font-size:15px; justify-self:start; }

.site-nav{
  display:flex;
  gap:32px;
  justify-self:center;
}
.site-nav-link{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--c-ink-soft);
  white-space:nowrap;
  transition: color .2s var(--ease);
}
.site-nav-link:hover{ color: var(--c-ink); }

/* Hamburger toggle — occupies the header's third grid column (currently
   just a reserved, empty spot for the future Access button on desktop),
   invisible above the breakpoint. */
.nav-toggle{
  justify-self:end;
  display:none;
  width:34px; height:34px;
  align-items:center; justify-content:center;
  border:1px solid var(--c-line-strong);
  border-radius: var(--radius);
  background: var(--c-surface);
}
.nav-toggle-bars{ position:relative; width:16px; height:11px; flex:none; }
.nav-toggle-bars span{
  position:absolute; left:0; width:100%; height:1.5px;
  background: var(--c-ink);
  transition: transform .25s var(--ease), opacity .2s var(--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; }
.nav-toggle.is-open .nav-toggle-bars span:nth-child(1){ transform: translateY(4.75px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bars span:nth-child(2){ opacity:0; }
.nav-toggle.is-open .nav-toggle-bars span:nth-child(3){ transform: translateY(-4.75px) rotate(-45deg); }

@media (max-width: 720px){
  .site-header{ grid-template-columns: 1fr auto; column-gap:12px; }
  .nav-toggle{ display:inline-flex; }

  /* Collapses into a full-width dropdown panel anchored under the header,
     hidden by default and revealed by the toggle button — rather than the
     5-item row that was silently overflowing the viewport on any phone. */
  .site-nav{
    position:absolute;
    top:100%; left:0; right:0;
    justify-self:stretch;
    flex-direction:column;
    gap:0;
    background: var(--c-surface);
    border-bottom:1px solid var(--c-line);
    box-shadow: var(--shadow-panel);
    max-height:0;
    overflow:hidden;
    transition: max-height .3s var(--ease);
    z-index:20;
  }
  .site-nav.is-open{ max-height:320px; }
  .site-nav-link{
    padding:16px 0;
    border-top:1px solid var(--c-line);
    white-space:normal;
  }
}

/* --- App shell --- */
#app{ min-height:100vh; display:flex; flex-direction:column; }

[data-view]{ display:none; }
[data-view].is-active{ display:block; }

/* Toggles shared Gateway chrome (header/footer) without touching — and
   so without destroying — whatever display value it already had. */
.chrome-hidden{ display:none !important; }

/* fade-in utility used across views/modules */
.fade-step{
  opacity:0;
  transform: translateY(6px);
  animation: fadeStep .5s var(--ease) forwards;
}
@keyframes fadeStep{
  to{ opacity:1; transform:translateY(0); }
}

/* ============================================================
   MODULE 2 — GATEWAY LANDING NARRATIVE
   ============================================================ */

.gw-section{ padding: 96px 0; border-top: 1px solid var(--c-line); }
.gw-section-alt{ background: var(--c-surface); }
.gw-section-title{ font-size: 30px; margin-top: 10px; margin-bottom: 48px; max-width: 640px; }

/* --- Hero --- */
.gw-hero{ padding: 96px 0 108px; max-width: 780px; }
.gw-hero-title{ font-size: clamp(30px, 4.4vw, 52px); margin-top:18px; }
.gw-hero-sub{ font-size: 15px; line-height:1.65; color: var(--c-ink-soft); max-width: 540px; margin-top:26px; font-weight:400; text-transform:none; letter-spacing:normal; }
.gw-hero-actions{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; }

/* --- Architecture --- */
.gw-arch-grid{ display:grid; grid-template-columns: 360px 1fr; gap: 40px; align-items:start; }
@media (max-width: 860px){ .gw-arch-grid{ grid-template-columns: 1fr; } }

.gw-pillar-row{
  display:block; width:100%; text-align:left;
  padding: 20px 22px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  margin-bottom: 12px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.gw-pillar-row:hover{ border-color: var(--c-line-strong); }
.gw-pillar-row.is-active{ border-color: var(--c-gold); background: var(--c-gold-soft); }
.gw-pillar-num{ font-family: var(--f-mono); font-size:10.5px; color: var(--c-gold); letter-spacing:.08em; }
.gw-pillar-title{ font-size: 14px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-top:6px; }
.gw-pillar-desc{ font-size: 12px; color: var(--c-ink-soft); line-height:1.55; margin-top:8px; font-weight:400; }

.gw-flow-canvas{
  min-height: 360px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  padding: 36px;
  display:flex; flex-direction:column; justify-content:center; gap: 0;
}
.gw-flow-block{
  padding: 16px 20px;
  border: 1px solid var(--c-line-strong);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--radius);
  background: var(--c-canvas);
  display:flex; flex-direction:column; gap:6px;
}
.gw-flow-block-label{ font-size: 12.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
.gw-flow-block-caption{ font-size: 11.5px; color: var(--c-ink-soft); font-weight:400; line-height:1.5; }
.gw-flow-arrow{
  align-self:center;
  font-family: var(--f-mono);
  color: var(--c-gold);
  font-size: 15px;
  padding: 6px 0;
}

/* --- Capabilities --- */
.gw-capability-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px){ .gw-capability-grid{ grid-template-columns: 1fr; } }
.gw-cap-card{
  padding: 28px 26px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-canvas);
}
.gw-cap-tag{ font-family: var(--f-mono); font-size:10.5px; color: var(--c-gold); }
.gw-cap-title{ font-size: 15px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin-top:14px; }
.gw-cap-body{ font-size: 12.5px; color: var(--c-ink-soft); line-height:1.6; margin-top:12px; font-weight:400; }

/* --- Credibility strip --- */
.gw-credibility{ text-align:center; }
.gw-credibility-line{ font-size: 14px; color: var(--c-ink-soft); max-width:600px; margin: 0 auto 48px; font-weight:400; }
.gw-capacity{ display:flex; flex-direction:column; align-items:center; gap:24px; max-width:560px; margin:0 auto; }
.gw-capacity-rule{ display:block; width:40px; height:1px; background: var(--c-gold); }
.gw-capacity-statement{ font-size: 19px; line-height:1.5; font-weight:500; color: var(--c-ink); }
.gw-capacity-substatement{ font-size: 12px; letter-spacing:.04em; color: var(--c-gold); font-family: var(--f-mono); text-transform:uppercase; }

/* --- Final CTA --- */
.gw-final-cta{ background: var(--c-ink); color: var(--c-canvas); }
.gw-final-cta-title{ font-size: clamp(22px, 3vw, 32px); margin-top:14px; max-width:640px; margin-left:auto; margin-right:auto; }

/* ============================================================
   SLIDE-OUT DRAWER (GCC Compliance)
   ============================================================ */
.drawer-overlay{
  position:fixed; inset:0; z-index:400;
  background: rgba(9,9,11,0.5);
  opacity:0; pointer-events:none;
  transition: opacity .3s var(--ease);
}
.drawer-overlay.is-open{ opacity:1; pointer-events:auto; }

.drawer{
  position:absolute; top:0; right:0; bottom:0;
  width: 420px; max-width: calc(100vw - 40px);
  background: var(--c-surface);
  border-left: 1px solid var(--c-line);
  padding: 44px 40px;
  overflow-y:auto;
  transform: translateX(100%);
  transition: transform .4s var(--ease);
}
.drawer-overlay.is-open .drawer{ transform: translateX(0); }

.drawer-close{
  position:absolute; top:20px; right:24px;
  font-size:10.5px; letter-spacing:.1em; color: var(--c-ink-faint);
}
.drawer-close:hover{ color: var(--c-ink); }

.drawer-module{ padding: 20px 0; border-top: 1px solid var(--c-line); }
.drawer-module:last-child{ padding-bottom:0; }
.drawer-module-tag{ font-size: 10.5px; color: var(--c-gold); }
.drawer-module-title{ font-size: 13.5px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin-top:8px; }
.drawer-module-body{ font-size: 12.5px; color: var(--c-ink-soft); line-height:1.6; margin-top:10px; font-weight:400; }

/* ============================================================
   ENQUIRY PANEL
   ============================================================ */
.eq-overlay{ z-index:450; display:flex; align-items:center; justify-content:center; background: rgba(9,9,11,0.55); }
.eq-panel{
  position:relative;
  width: 440px; max-width: calc(100vw - 48px);
  max-height: calc(100vh - 64px);
  overflow-y:auto;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 40px 36px 32px;
  transform: translateY(10px) scale(.98);
  opacity:0;
  transition: all .35s var(--ease);
}
.eq-overlay.is-open .eq-panel{ transform:none; opacity:1; }
.eq-bar{
  position:absolute; top:0; left:0; right:0; height:2px;
  background: var(--c-gold);
}
.eq-sub{ font-size:12.5px; color: var(--c-ink-soft); line-height:1.6; margin-bottom:26px; font-weight:400; }
.eq-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.eq-field label{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--c-ink-faint); }
.eq-input{
  background: var(--c-canvas);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius);
  padding: 11px 13px;
  outline:none;
  transition: border-color .2s var(--ease);
  resize:vertical;
}
.eq-input:focus{ border-color: var(--c-gold); }
.eq-textarea{ font-family: var(--f-ui); }
.eq-msg{ min-height:14px; font-size:10.5px; color: var(--c-risk); margin-bottom:10px; }
.eq-direct{
  display:block; text-align:center;
  font-size: 10.5px; color: var(--c-ink-faint);
  margin-top:16px; text-decoration:underline;
}
.eq-direct:hover{ color: var(--c-ink-soft); }
.eq-thanks{ text-align:left; }

/* ============================================================
   MODULE 3 — PRODUCT PREVIEW (screenshots)
   ============================================================ */
.gw-preview-note{ font-size: 12.5px; color: var(--c-ink-soft); max-width:640px; margin-bottom:40px; font-weight:400; line-height:1.6; }
.gw-preview-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 860px){ .gw-preview-grid{ grid-template-columns: 1fr; } }
.gw-preview-card{ border: 1px solid var(--c-line); border-radius: var(--radius); overflow:hidden; background: var(--c-surface); }
.gw-preview-img{ display:block; width:100%; height:auto; border-bottom:1px solid var(--c-line); }
.gw-preview-caption{ padding: 18px 22px 22px; }
.gw-preview-title{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.gw-preview-body{ font-size:12px; color: var(--c-ink-soft); line-height:1.6; margin-top:8px; font-weight:400; }

/* ============================================================
   MODULE 4 — ABOUT PAGE
   ============================================================ */
.about-hero{ padding: 96px 0 72px; max-width: 760px; }
.about-hero-title{ font-size: clamp(28px, 4vw, 44px); margin-top:18px; }
.about-hero-sub{ font-size: 15px; line-height:1.65; color: var(--c-ink-soft); max-width: 560px; margin-top:24px; font-weight:400; text-transform:none; letter-spacing:normal; }
.about-block{ max-width: 680px; }
.about-block p{ font-size: 13.5px; line-height:1.75; color: var(--c-ink-soft); font-weight:400; margin-bottom:20px; }
.about-block p:last-child{ margin-bottom:0; }
.about-block strong{ color: var(--c-ink); font-weight:600; }
.about-pull{ font-family: var(--f-display); font-size: 21px; line-height:1.4; color: var(--c-ink); margin: 40px 0; max-width:600px; text-transform:none; letter-spacing:0; font-weight:500; }
.about-stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:680px; margin-top:8px; }
@media (max-width: 700px){ .about-stat-row{ grid-template-columns:1fr; } }
.about-stat{ padding: 20px 0; border-top: 1px solid var(--c-line); }
.about-stat-val{ font-family: var(--f-mono); font-size:15px; font-weight:600; color: var(--c-gold); }
.about-stat-label{ font-size:11.5px; color: var(--c-ink-soft); margin-top:6px; line-height:1.5; }

/* ============================================================
   MODULE 5 — COOKIE CONSENT BANNER
   UK visitors only (nexissystems.co.uk or ?region=uk) — a fixed bottom
   bar, not a full-screen overlay like the drawers, so it never blocks
   the rest of the page while a decision is pending.
   ============================================================ */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:500;
  background: var(--c-surface);
  border-top:1px solid var(--c-line);
  box-shadow: var(--shadow-panel);
  transform: translateY(100%);
  transition: transform .35s var(--ease);
}
.cookie-banner.is-open{ transform: translateY(0); }
.cookie-banner-inner{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
  padding-top:18px; padding-bottom:18px;
  flex-wrap:wrap;
}
.cookie-banner-text{
  font-size:11.5px; line-height:1.6; color: var(--c-ink-soft); max-width:620px; font-weight:400;
}
.cookie-banner-link{
  color: var(--c-ink); font-weight:600; text-decoration:underline; text-underline-offset:2px;
}
.cookie-banner-actions{ display:flex; gap:10px; flex:none; }
@media (max-width: 640px){
  .cookie-banner-inner{ flex-direction:column; align-items:stretch; }
  .cookie-banner-actions{ justify-content:flex-end; }
}

/* ============================================================