/* ==========================================================================
   ExpansionIQ marketing site
   Implementation of "Expansion IQ Marketing Site.dc.html".
   Every value below resolves to a token from the ExpansionIQ design system
   (_ds/…/tokens/*.css); raw hex appears only where the design system has no
   token for that exact value.
   ========================================================================== */

:root{
  /* Section rhythm — mirrors the canvas `density` prop.
     Comfortable = 108px (default), Compact = 76px. */
  --sec-pad:108px;
  --shell:1280px;
  /* Fallback only — js/site.js measures the real header and overwrites this,
     so the hero height and every anchor's scroll offset stay exact when the
     webfonts land or the viewport changes. */
  --header-h:69px;

  /* Frosted-glass surface, expressed against the design-system palette:
     --bg-surface at 60%, --border-subtle at 80%, --accent-cyan at 40% on
     hover. --glass-fill-solid is the opaque stand-in used where
     backdrop-filter is switched off (small screens, print). */
  --glass-fill:rgba(15,23,42,.6);
  --glass-fill-solid:rgba(15,23,42,.94);
  --glass-blur:blur(12px) saturate(135%);
  --glass-blur-lg:blur(20px) saturate(140%);
  --glass-border:rgba(51,65,85,.8);
  --glass-border-hot:rgba(56,189,248,.4);
  --glass-sheen:inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---------- Base ---------- */

html{scroll-behavior:smooth}

body{
  margin:0;
  background-color:var(--bg-main);
  color:var(--text-primary);
  font-family:var(--font-sans);
  overflow-x:hidden;
}

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

a{color:var(--accent-cyan);text-decoration:none}
a:hover{color:var(--text-pure);text-decoration:none}

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

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

.eiq-skip{
  position:absolute;left:var(--space-8);top:calc(-1 * var(--space-16) - 20px);
  z-index:2000;
  background:var(--bg-surface-elevated);
  color:var(--text-primary);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:var(--pad-button);
  font-size:var(--text-base);font-weight:var(--weight-semibold);
  transition:var(--transition-control);
}
.eiq-skip:focus{top:var(--space-8)}

@keyframes eiq-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Ambient wash ---------- */

.eiq-ambient{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 620px at 10% -8%,rgba(99,102,241,.12),transparent 60%),
    radial-gradient(820px 620px at 92% 22%,rgba(56,189,248,.10),transparent 60%),
    radial-gradient(760px 560px at 16% 58%,rgba(139,92,246,.09),transparent 62%),
    radial-gradient(700px 500px at 46% 108%,rgba(16,185,129,.06),transparent 60%);
}

/* ---------- Layout primitives ---------- */

.eiq-shell{max-width:var(--shell);margin:0 auto}

.eiq-section{
  position:relative;z-index:1;
  padding:var(--sec-pad) var(--layout-gutter);
  scroll-margin-top:var(--header-h);
}
.eiq-section--cta{padding-bottom:96px}

.eiq-stack{display:flex;flex-direction:column;gap:var(--space-16)}

.eiq-intro{display:flex;flex-direction:column;gap:var(--space-7);max-width:760px}

.eiq-h2{
  margin:0;
  font-size:clamp(1.85rem,1.15rem + 2.1vw,2.5rem);
  font-weight:var(--weight-extrabold);
  letter-spacing:-1.2px;
  color:var(--text-pure);
  line-height:1.12;
  text-wrap:balance;
}
.eiq-h2--sm{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.1rem);letter-spacing:-1px;line-height:1.15}

.eiq-sub{
  margin:0;
  font-size:1rem;line-height:var(--leading-relaxed);
  color:var(--text-secondary);
  text-wrap:pretty;
}

.eiq-label{
  font-size:var(--text-2xs);
  text-transform:uppercase;
  letter-spacing:var(--tracking-label);
  font-weight:var(--weight-semibold);
  color:var(--text-muted);
  line-height:1.2;
}
.eiq-label--accent{color:var(--accent-cyan);font-weight:var(--weight-bold);font-size:var(--text-2xs)}
.eiq-label--purple{color:var(--tint-purple-text);font-weight:var(--weight-bold);font-size:var(--text-xs)}

/* ==========================================================================
   Design-system components, rebuilt as CSS
   ========================================================================== */

/* ---------- Button ---------- */

.eiq-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--gap-inline);
  min-height:40px;
  font-family:var(--font-sans);
  font-size:var(--text-base);
  font-weight:var(--weight-semibold);
  padding:var(--pad-button);
  border-radius:var(--radius-md);
  border:none;
  cursor:pointer;
  transition:var(--transition-control);
  text-decoration:none;
  line-height:var(--leading-snug);
  white-space:nowrap;
}
.eiq-btn--sm{min-height:32px;font-size:var(--text-sm);padding:var(--pad-button-sm)}

.eiq-btn--primary{
  background:var(--gradient-primary);
  color:var(--text-on-accent);
  box-shadow:var(--shadow-primary);
}
.eiq-btn--primary:hover{
  background:var(--gradient-primary-hover);
  box-shadow:var(--shadow-primary-hover);
  transform:var(--lift-button-hover);
  color:var(--text-on-accent);
}

.eiq-btn--secondary{
  background:var(--bg-surface-elevated);
  color:var(--text-primary);
  border:1px solid var(--border-subtle);
}
.eiq-btn--secondary:hover{
  border-color:var(--border-hover);
  transform:var(--lift-button-hover);
  color:var(--text-primary);
}

.eiq-btn:active{transform:translateY(0)}

/* ---------- Badge ---------- */

.eiq-badge{
  display:inline-flex;align-items:center;gap:var(--gap-tight);
  font-size:var(--text-xs);
  font-weight:var(--weight-semibold);
  padding:var(--pad-pill);
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  white-space:nowrap;
  line-height:1.4;
}
.eiq-badge--tag{border-radius:var(--radius-xs);white-space:normal}

.eiq-badge--cyan{background:var(--tint-cyan-bg);border-color:var(--tint-cyan-border);color:var(--tint-cyan-text)}
.eiq-badge--purple{background:var(--tint-purple-bg);border-color:var(--tint-purple-border);color:var(--tint-purple-text)}
.eiq-badge--emerald{background:var(--tint-emerald-bg);border-color:var(--tint-emerald-border);color:var(--tint-emerald-text)}
.eiq-badge--amber{background:var(--tint-amber-bg);border-color:var(--tint-amber-border);color:var(--tint-amber-text)}
.eiq-badge--neutral{background:var(--bg-surface-elevated);border-color:var(--border-subtle);color:var(--text-secondary)}

/* ---------- MetricTile ---------- */

.eiq-metric{
  background:var(--bg-surface);
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  padding:var(--space-3) var(--space-4);
  display:flex;flex-direction:column;
  min-width:0;
  transition:background-color var(--duration-smooth) var(--ease-decel),
             border-color var(--duration-smooth) var(--ease-decel),
             box-shadow var(--duration-smooth) var(--ease-decel);
}
.eiq-metric__label{
  font-size:var(--text-2xs);
  color:var(--text-muted);
  text-transform:uppercase;
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-label);
}
.eiq-metric__value{
  font-family:var(--font-display);
  overflow-wrap:anywhere;
  font-size:var(--text-md);
  font-weight:var(--weight-bold);
  color:var(--accent-cyan);
}

.eiq-metric--outline{
  background:rgba(9,13,22,.6);
  border:1px solid var(--border-subtle);
  padding:var(--pad-card-tight);
  border-radius:var(--radius-md);
}
.eiq-metric--outline .eiq-metric__label{font-size:var(--text-xs)}
.eiq-metric--outline .eiq-metric__value{font-size:var(--text-xl)}

/* ---------- Shared surfaces ---------- */

.eiq-card{
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:var(--space-11);
  box-shadow:var(--shadow-md),var(--glass-sheen);
}

.eiq-glass{
  background:var(--glass-fill);
  backdrop-filter:var(--glass-blur-lg);
  -webkit-backdrop-filter:var(--glass-blur-lg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md),var(--glass-sheen);
  transition:var(--transition-card);
}
.eiq-glass:hover{border-color:var(--glass-border-hot)}

.eiq-icontile{
  width:44px;height:44px;flex-shrink:0;
  border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;
  font-size:1.15rem;
  border:1px solid transparent;
}
.eiq-icontile--cyan{background:var(--tint-cyan-bg);border-color:var(--tint-cyan-border);color:var(--accent-cyan)}
.eiq-icontile--purple{background:var(--tint-purple-bg);border-color:var(--tint-purple-border);color:var(--accent-purple)}
.eiq-icontile--emerald{background:var(--tint-emerald-bg);border-color:var(--tint-emerald-border);color:var(--accent-emerald)}
.eiq-icontile--amber{background:var(--tint-amber-bg);border-color:var(--tint-amber-border);color:var(--accent-amber)}

.eiq-actions{display:flex;align-items:center;gap:var(--gap-control);flex-wrap:wrap}
.eiq-actions--center{justify-content:center}

/* ---------- Custom System enquiry modal (native <dialog>) ----------
   Matches the demo app's "Configure Your Custom System" card: a single
   gradient surface with a cyan-tinted border + glow and cyan-outlined fields. */

.eiq-modal{
  width:100%;max-width:100%;height:100%;max-height:100%;
  margin:0;padding:var(--space-11);
  border:none;background:transparent;box-sizing:border-box;
  color:var(--text-primary);
}
.eiq-modal[open]{display:flex;align-items:center;justify-content:center}
.eiq-modal::backdrop{
  background:var(--bg-scrim);
  -webkit-backdrop-filter:var(--blur-scrim);
  backdrop-filter:var(--blur-scrim);
}
/* [hidden] must beat the display rules below (form <-> success toggle on submit) */
.eiq-modal [hidden]{display:none}

.eiq-modal__panel{
  position:relative;
  width:min(680px,100%);
  max-height:100%;
  overflow-y:auto;
  padding:28px;
  background:linear-gradient(180deg,var(--bg-surface) 0%,var(--bg-main) 100%);
  border:1px solid var(--border-glow);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-modal),var(--shadow-glow);
}

.eiq-modal__close{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border:none;border-radius:var(--radius-sm);
  background:transparent;color:var(--text-muted);
  font-size:1rem;cursor:pointer;
  transition:var(--transition-control);
}
.eiq-modal__close:hover{background:var(--bg-surface-elevated);color:var(--text-primary)}

.eiq-modal__head{
  display:flex;align-items:center;gap:var(--space-8);
  margin-bottom:var(--space-11);
  padding-right:32px;   /* clear the close button */
}
.eiq-modal__title{
  margin:0 0 var(--space-2);
  font-family:var(--font-display);
  font-size:var(--text-xl);
  font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-title);
  color:var(--text-primary);
}
.eiq-modal__sub{
  margin:0;
  font-size:var(--text-sm);
  line-height:var(--leading-snug);
  color:var(--text-secondary);
}

/* Form fields */
.eiq-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-grid);margin-bottom:var(--space-8)}
.eiq-field{display:flex;flex-direction:column;gap:var(--gap-tight);margin-bottom:var(--space-8);min-width:0}
.eiq-field-grid .eiq-field{margin-bottom:0}
.eiq-field__label{
  font-size:var(--text-sm);
  font-weight:var(--weight-semibold);
  color:var(--text-code);   /* #cbd5e1 — the demo's label colour */
}

.eiq-input{
  width:100%;box-sizing:border-box;
  font-family:var(--font-sans);
  font-size:var(--text-base);
  color:var(--text-pure);
  background:var(--bg-main);
  border:1px solid rgba(56,189,248,.2);   /* subtle cyan outline, per demo */
  border-radius:var(--radius-sm);
  padding:10px 14px;
  transition:var(--transition-control);
}
.eiq-input::placeholder{color:var(--text-muted)}
.eiq-input:focus{
  outline:none;
  border-color:var(--accent-cyan);
  box-shadow:0 0 0 2px rgba(56,189,248,.2);
}
.eiq-textarea{resize:vertical;min-height:84px;line-height:var(--leading-normal)}
.eiq-select{
  appearance:none;-webkit-appearance:none;
  padding-right:36px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
.eiq-select option{background:var(--bg-surface);color:var(--text-primary)}

.eiq-modal__foot{
  display:flex;justify-content:flex-end;gap:var(--gap-control);
  margin-top:var(--space-10);
}
.eiq-modal__error{
  margin:var(--space-6) 0 0;
  font-size:var(--text-sm);
  color:var(--tint-red-text);
}

/* Success acknowledgement */
.eiq-modal__done{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--space-6);
  padding:var(--space-10) 0 var(--space-4);
}
.eiq-modal__done .eiq-modal__title{margin:0}
.eiq-modal__done .eiq-modal__sub{max-width:44ch}
.eiq-modal__done .eiq-btn{margin-top:var(--space-2)}

@media (prefers-reduced-motion:no-preference){
  @keyframes eiq-modal-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
  @keyframes eiq-backdrop-in{from{opacity:0}to{opacity:1}}
  .eiq-modal[open] .eiq-modal__panel{animation:eiq-modal-in var(--duration-card) var(--ease-decel)}
  .eiq-modal[open]::backdrop{animation:eiq-backdrop-in var(--duration-card) var(--ease-standard)}
}

@media (max-width:600px){
  .eiq-modal{padding:var(--space-6)}
  .eiq-modal__panel{padding:var(--space-11)}
  .eiq-modal__head{gap:var(--space-6)}
  .eiq-field-grid{grid-template-columns:1fr;gap:var(--space-6);margin-bottom:var(--space-6)}
  .eiq-modal__foot{flex-direction:column-reverse}
  .eiq-modal__foot .eiq-btn{width:100%}
}

/* Hero CTA group: actions plus the supporting trust note, kept tight together */
.eiq-hero__cta{display:flex;flex-direction:column;gap:var(--space-4)}
.eiq-hero__trust{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--gap-tight);
  margin:0;
  font-size:var(--text-xs);
  color:var(--text-muted);
  line-height:var(--leading-snug);
}
.eiq-hero__trust i{color:var(--accent-cyan)}
.eiq-hero__trust-dot{color:var(--accent-cyan);opacity:.7}

/* ==========================================================================
   Header
   ========================================================================== */

.eiq-header{
  position:sticky;top:0;z-index:1000;
  background:var(--bg-header-glass);
  backdrop-filter:var(--blur-header);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-subtle);
}
.eiq-header__inner{
  max-width:var(--shell);margin:0 auto;
  padding:var(--space-6) var(--layout-gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-14);
}

.eiq-lockup{display:flex;align-items:center;gap:var(--space-6);color:inherit;flex-shrink:0}
.eiq-lockup:hover{color:inherit}
.eiq-lockup__mark{width:44px;height:44px;object-fit:contain;flex-shrink:0}
.eiq-lockup__text{display:flex;flex-direction:column;gap:var(--space-1)}
.eiq-lockup__name{
  font-family:var(--font-display);
  font-size:1.15rem;font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-display);
  color:var(--text-pure);line-height:1.15;
}
.eiq-lockup__iq{color:var(--accent-cyan)}
.eiq-lockup__tag{
  font-size:var(--text-2xs);text-transform:uppercase;
  letter-spacing:var(--tracking-label);
  font-weight:var(--weight-semibold);
  color:var(--text-muted);line-height:1.2;
}

.eiq-nav{
  display:flex;align-items:center;gap:26px;
  font-size:var(--text-base);font-weight:var(--weight-semibold);
}
.eiq-nav > a{color:var(--text-secondary);transition:var(--transition-control)}
.eiq-nav > a:hover{color:var(--text-primary)}
.eiq-nav__actions{display:flex;align-items:center;gap:var(--gap-control)}

.eiq-navtoggle{
  display:none;
  width:40px;height:40px;
  align-items:center;justify-content:center;
  background:var(--bg-surface-elevated);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  color:var(--text-primary);
  font-size:1rem;cursor:pointer;
  transition:var(--transition-control);
}
.eiq-navtoggle:hover{border-color:var(--border-hover)}

/* ==========================================================================
   Hero
   ========================================================================== */

.eiq-hero{
  position:relative;z-index:1;
  display:grid;align-content:center;
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  padding:56px var(--layout-gutter);
}
.eiq-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:56px;align-items:center;
}

.eiq-hero__copy{display:flex;flex-direction:column;gap:26px;min-width:0}

.eiq-hero__title{
  margin:0;
  font-size:clamp(2.05rem,1.3rem + 3vw,3.6rem);
  line-height:1.06;
  font-weight:var(--weight-extrabold);
  letter-spacing:-1.8px;
  color:var(--text-pure);
  text-wrap:balance;
  max-width:660px;
}

.eiq-hero__lede{
  margin:0;
  font-size:1.12rem;line-height:1.62;
  color:var(--text-secondary);
  max-width:620px;text-wrap:pretty;
}

.eiq-checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-5)}
.eiq-checklist li{
  display:flex;gap:var(--space-5);
  font-size:.95rem;color:var(--text-code);line-height:var(--leading-normal);
}
.eiq-checklist i{color:var(--accent-emerald);margin-top:4px;flex-shrink:0}

/* ---------- Live facility record ---------- */

.eiq-record{
  position:relative;
  overflow:hidden;
  background:var(--glass-fill);
  backdrop-filter:var(--glass-blur-lg);
  -webkit-backdrop-filter:var(--glass-blur-lg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-xl);
  padding:22px;
  box-shadow:var(--shadow-xl),0 0 44px rgba(56,189,248,.10),var(--shadow-inset-top);
  display:flex;flex-direction:column;gap:var(--space-8);
  min-width:0;
}
.eiq-record__accent{
  position:absolute;top:0;left:var(--space-11);right:var(--space-11);height:2px;
  background:linear-gradient(90deg,var(--accent-cyan),#818cf8);
}

.eiq-record__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}

.eiq-record__ident{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-6)}
.eiq-record__names{display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.eiq-record__name{font-size:1.15rem;font-weight:var(--weight-bold);color:var(--text-pure);line-height:var(--leading-tight)}
.eiq-record__meta{font-size:var(--text-sm);color:var(--text-muted)}

.eiq-record__metrics{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}

.eiq-record__facts{
  margin:0;
  background:rgba(9,13,22,.66);
  border:1px solid rgba(51,65,85,.7);
  border-radius:var(--radius-md);
  padding:var(--space-5) var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-1);
}
.eiq-record__facts > div{
  display:flex;justify-content:space-between;gap:var(--space-6);
  font-size:var(--text-base);
  padding:var(--space-3) var(--space-4);
}
.eiq-record__facts dt{color:var(--text-muted)}
.eiq-record__facts dd{margin:0;font-weight:var(--weight-semibold);color:var(--text-primary);text-align:right}
.eiq-record__facts dd.is-positive{color:var(--tint-emerald-text)}
.eiq-record__facts dd.is-display{font-family:var(--font-display);font-weight:var(--weight-bold);color:var(--accent-cyan)}

.eiq-record__foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);
  padding-top:var(--space-6);
  border-top:1px solid var(--border-subtle);
}
.eiq-record__note{font-size:var(--text-xs);color:var(--text-muted)}

.eiq-dots{display:flex;gap:var(--gap-tight)}
.eiq-dot{
  width:26px;height:6px;border-radius:var(--radius-pill);
  border:none;padding:0;cursor:pointer;
  background:var(--border-subtle);
  transition:var(--transition-control);
}
.eiq-dot:hover{background:var(--border-hover)}
.eiq-dot.is-active{background:var(--accent-cyan)}
.eiq-dot:focus-visible{outline-offset:4px}

/* Values swapping between records */
.eiq-record.is-swapping [data-fac]{opacity:0;transform:translateY(3px)}
.eiq-record [data-fac]{transition:opacity .18s ease,transform .18s ease}

/* ==========================================================================
   Engine
   ========================================================================== */

.eiq-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-10)}

.eiq-stage{display:flex;flex-direction:column;gap:var(--space-7);transition:var(--transition-card)}
.eiq-stage:hover{
  transform:var(--lift-card-hover);
  border-color:var(--glass-border-hot);
  box-shadow:var(--shadow-md),var(--glass-sheen),var(--shadow-glow);
}
.eiq-stage__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.eiq-stage__num{
  font-family:var(--font-display);
  font-size:1.6rem;font-weight:var(--weight-bold);
  color:var(--bg-surface-elevated);
  letter-spacing:var(--tracking-display);
}
.eiq-stage__title{margin:0;font-size:var(--text-xl);font-weight:var(--weight-bold);color:var(--text-pure);letter-spacing:-.4px}
.eiq-stage__body{margin:0;font-size:var(--text-md);line-height:1.55;color:var(--text-secondary)}

.eiq-featurelist{
  list-style:none;margin:0;padding:var(--space-6) 0 0;
  display:flex;flex-direction:column;gap:var(--space-4);
  border-top:1px solid var(--border-hairline);
  margin-top:auto;
}
.eiq-featurelist li{display:flex;gap:var(--space-4);font-size:var(--text-base);color:var(--text-secondary);line-height:1.45}
.eiq-featurelist i{margin-top:3px;flex-shrink:0}

/* ==========================================================================
   Sectors
   ========================================================================== */

.eiq-grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap-grid)}

.eiq-sector{
  position:relative;text-align:left;
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  padding:var(--pad-card);
  cursor:pointer;
  font-family:var(--font-sans);
  color:var(--text-primary);
  display:flex;flex-direction:column;gap:var(--gap-control);
  transition:var(--transition-card);
  box-shadow:var(--shadow-md),var(--glass-sheen);
}
.eiq-sector:hover{
  border-color:var(--glass-border-hot);
  transform:var(--lift-card-hover);
  box-shadow:var(--shadow-md),var(--glass-sheen),var(--shadow-glow);
}
.eiq-sector.is-active::after{
  content:"";position:absolute;inset:-1px;
  border:1px solid var(--accent-cyan);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-glow);
  pointer-events:none;
}
.eiq-sector .eiq-icontile{width:42px;height:42px;font-size:1.2rem}
.eiq-sector__title{font-size:1rem;font-weight:var(--weight-bold);color:var(--text-pure);line-height:1.25}
.eiq-sector__body{font-size:var(--text-base);color:var(--text-secondary);line-height:1.45}

.eiq-sectorpanel{padding:var(--space-12)}
.eiq-sectorpanel__grid{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:36px;
  animation:eiq-rise var(--duration-card) var(--ease-standard);
}
.eiq-sectorpanel__copy{display:flex;flex-direction:column;gap:var(--space-7);min-width:0}
.eiq-sectorpanel__title{margin:0;font-size:1.3rem;font-weight:var(--weight-bold);color:var(--text-pure);letter-spacing:-.4px}
.eiq-sectorpanel__body{margin:0;font-size:.94rem;line-height:var(--leading-relaxed);color:var(--text-secondary)}

.eiq-tagblock{display:flex;flex-direction:column;gap:var(--space-4);padding-top:var(--space-3)}
.eiq-tags{display:flex;gap:var(--space-4);flex-wrap:wrap}

.eiq-trigger{
  background:rgba(9,13,22,.6);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  padding:var(--space-9);
  display:flex;flex-direction:column;gap:var(--space-7);
  min-width:0;
}
.eiq-trigger__text{margin:0;font-size:.92rem;line-height:1.55;color:#e2e8f0}
.eiq-trigger__kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);padding-top:var(--space-3)}
.eiq-trigger__lead{margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--leading-normal)}

/* ==========================================================================
   Bespoke
   ========================================================================== */

.eiq-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:44px;align-items:center;
}
.eiq-split__copy{display:flex;flex-direction:column;gap:var(--space-10);min-width:0}

.eiq-pointlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-7)}
.eiq-pointlist li{display:flex;gap:var(--gap-control)}
.eiq-pointlist i{color:var(--tint-purple-text);margin-top:4px;flex-shrink:0}
.eiq-pointlist__title{font-weight:var(--weight-bold);color:var(--text-pure);font-size:.95rem}
.eiq-pointlist__body{font-size:.86rem;color:var(--text-secondary);line-height:var(--leading-normal)}

/* The encode card: each row pairs the sentence a rep would say with the rule
   that sentence becomes. The elbow glyph carries the "becomes" relationship,
   so no icon font is needed and a wrapping quote cannot break the connector. */
.eiq-encode{display:flex;flex-direction:column;gap:var(--space-10);box-shadow:var(--shadow-xl)}

.eiq-encode__head{display:flex;flex-direction:column;gap:var(--space-4)}
.eiq-encode__note{margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:var(--leading-normal)}

.eiq-encode__list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--space-9);
}
.eiq-encode__row{display:flex;flex-direction:column;gap:var(--space-4)}
.eiq-encode__said{
  margin:0;
  font-size:.92rem;line-height:1.5;
  color:var(--text-primary);
  text-wrap:pretty;
}
.eiq-encode__out{display:flex;align-items:flex-start;gap:var(--space-6);min-width:0}
/* padding-top parks the elbow on the first line of the rule, so a rule that
   wraps onto a second line does not drag the glyph down with it. */
.eiq-encode__arrow{
  flex-shrink:0;
  color:var(--tint-purple-text);
  font-size:1rem;line-height:1;
  padding-left:var(--space-3);padding-top:var(--space-5);
}
.eiq-encode__rule{
  flex:1;min-width:0;margin:0;
  background:rgba(9,13,22,.66);
  border:1px solid var(--border-subtle);
  border-left:2px solid var(--tint-cyan-border);
  border-radius:var(--radius-sm);
  padding:var(--space-5) var(--space-6);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-4);
  font-size:.86rem;
}
.eiq-encode__rulelabel{color:var(--text-secondary);font-weight:var(--weight-semibold)}
.eiq-encode__rulevalue{color:var(--tint-cyan-text);font-weight:var(--weight-bold)}

.eiq-encode__foot{
  margin:0;
  padding-top:var(--space-9);
  border-top:1px solid var(--border-hairline);
  font-size:var(--text-base);line-height:var(--leading-normal);
  color:var(--text-secondary);
  text-wrap:pretty;
}

/* ==========================================================================
   Data & compliance
   ========================================================================== */

.eiq-compliance{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-10);align-items:stretch;
}
.eiq-compliance__copy{
  display:flex;flex-direction:column;gap:var(--space-8);
  justify-content:center;padding-right:var(--space-10);
}
.eiq-compliance__copy .eiq-sub{font-size:.98rem;line-height:1.62}
.eiq-compliance__stats{
  background:linear-gradient(145deg,rgba(16,185,129,.10),rgba(15,23,42,.62));
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--tint-emerald-border);
  border-radius:var(--radius-lg);
  padding:26px;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);
  align-content:center;
}

/* ==========================================================================
   CTA
   ========================================================================== */

.eiq-cta{
  position:relative;
  max-width:900px;margin:0 auto;
  padding:52px 44px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--space-10);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl),var(--shadow-inset-top);
}
.eiq-cta__accent{
  position:absolute;top:0;left:60px;right:60px;height:2px;
  background:linear-gradient(90deg,var(--accent-cyan),#818cf8);
}
.eiq-cta__title{
  font-size:clamp(1.95rem,1.2rem + 2.4vw,2.6rem);
  letter-spacing:-1.4px;line-height:1.1;max-width:700px;
}
.eiq-cta__lede{margin:0;font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text-secondary);max-width:600px}
.eiq-cta__note{margin:0;font-size:var(--text-sm);color:var(--text-muted)}

/* ==========================================================================
   Footer
   ========================================================================== */

.eiq-footer{
  position:relative;z-index:1;
  border-top:1px solid var(--border-subtle);
  background:var(--bg-header-glass);
  padding:36px var(--layout-gutter);
}
.eiq-footer__inner{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--space-16);flex-wrap:wrap;
}
.eiq-footer__brand{display:flex;flex-direction:column;gap:var(--gap-control);max-width:430px}
.eiq-footer__legal{margin:0;font-size:var(--text-sm);color:var(--text-muted);line-height:1.55}
.eiq-footer__cols{display:flex;gap:56px;font-size:var(--text-base)}
.eiq-footer__col{display:flex;flex-direction:column;gap:var(--space-4)}
.eiq-footer__col .eiq-label{font-weight:var(--weight-bold);color:var(--text-muted)}
.eiq-footer__col a{color:var(--text-secondary);transition:var(--transition-control)}
.eiq-footer__col a:hover{color:var(--text-primary)}

/* ==========================================================================
   Atmosphere — WebGL terrain, depth veil, section glow
   ========================================================================== */

/* js/terrain.js draws here. It stays transparent until the first frame is
   composed, so a failed CDN or a missing WebGL context shows nothing rather
   than a black plate. */
.eiq-webgl{
  position:fixed;inset:0;z-index:0;
  display:block;width:100%;height:100%;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.1s var(--ease-decel);
}
.eiq-webgl.is-ready{opacity:1}

/* Sits between terrain and content: knocks the wireframe back far enough for
   body copy to stay readable, and vignettes toward the corners. */
.eiq-veil{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(130% 90% at 50% 36%,rgba(9,13,22,0) 0%,rgba(9,13,22,.40) 60%,rgba(9,13,22,.80) 100%),
    linear-gradient(180deg,rgba(9,13,22,.55) 0%,rgba(9,13,22,.24) 50%,rgba(9,13,22,.52) 100%);
}

/* Atmospheric colour lives entirely in the fixed .eiq-ambient layer now.
   These glows used to be painted per section (.eiq-glowzone::before, clipped
   to each section's box). Because the engine/sectors glows were centred near
   their top edge, the box clipped them while still bright, drawing a hard
   horizontal seam at every section boundary — the "lines between sections".
   Folding the colour into the single fixed backdrop removes every boundary,
   so the terrain and wash read as one continuous page from top to bottom.
   .eiq-glowzone stays as a harmless positioning hook in case markup needs it. */
.eiq-glowzone{position:relative}

/* ---------- Text legibility halo -----------------------------------------
   Copy blocks like the section intros and the Bespoke/Compliance columns
   sit directly on the fixed WebGL terrain, and a boxed backdrop-blur patch
   behind them (an earlier version of this rule) read as a hole cut into
   the wireframe wherever its edge met untouched terrain — the opposite of
   "one continuous page". A text-shadow has no box and no edge: it hugs
   each glyph, so it only ever affects the pixels the letters themselves
   cover, and blends away to nothing everywhere else. Terrain motion and
   text color are untouched — only what sits immediately behind each glyph
   changes.
   -------------------------------------------------------------------------- */
.eiq-copy-halo :is(h1,h2,h3,p,li,a,span){
  text-shadow:
    0 1px 2px rgba(9,13,22,.85),
    0 2px 8px rgba(9,13,22,.7),
    0 8px 22px rgba(9,13,22,.5);
}

/* ==========================================================================
   Scroll reveal

   Gated on .js so the page is fully legible without scripting, and armed by
   js/site.js. The stagger index rides on --rv, set per card in the markup.
   ========================================================================== */

.js .eiq-reveal{
  opacity:0;
  transform:translateY(20px) scale(.985);
}
.js .eiq-reveal.is-in{
  opacity:1;
  transform:none;
  transition:
    opacity .6s var(--ease-decel) calc(var(--rv,0) * 90ms),
    transform .6s var(--ease-decel) calc(var(--rv,0) * 90ms);
}

/* ==========================================================================
   Lead inspector

   The tag rail inside the live facility record. Each tag names an attribute
   the site was matched on; lighting a tag lights the field it refers to.
   ========================================================================== */

.eiq-inspector{display:flex;flex-direction:column;gap:var(--space-5)}

.eiq-inspector__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-6);
}

.eiq-inspector__tags{display:flex;flex-wrap:wrap;gap:var(--gap-tight)}

.eiq-chip{
  display:inline-flex;align-items:center;gap:var(--gap-tight);
  font-family:var(--font-sans);
  font-size:var(--text-xs);
  font-weight:var(--weight-semibold);
  line-height:1.4;
  padding:var(--pad-button-sm);
  border-radius:var(--radius-pill);
  background:var(--bg-surface-elevated);
  border:1px solid var(--border-subtle);
  color:var(--text-secondary);
  cursor:default;
  white-space:nowrap;
  transition:var(--transition-control);
}
.eiq-chip i{font-size:.78em;color:var(--text-muted)}

/* Sweep that runs once as a new record lands */
.eiq-record__scan{
  position:absolute;left:0;right:0;top:0;height:38%;
  pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(56,189,248,.12) 56%,rgba(56,189,248,.02));
}
.eiq-record.is-scanning .eiq-record__scan{
  animation:eiq-scan .7s var(--ease-standard);
}
@keyframes eiq-scan{
  0%{opacity:0;transform:translateY(-100%)}
  22%{opacity:1}
  100%{opacity:0;transform:translateY(268%)}
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:1180px){
  .eiq-nav{gap:var(--space-10);font-size:var(--text-sm)}
  .eiq-header__inner{gap:var(--space-10)}
  .eiq-hero__grid{gap:var(--space-16)}
}

@media (max-width:1024px){
  :root{--sec-pad:84px}

  .eiq-hero{padding:64px var(--layout-gutter) 76px}
  .eiq-hero__grid{grid-template-columns:minmax(0,1fr);gap:44px}
  .eiq-hero__title,.eiq-hero__lede{max-width:none}

  .eiq-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .eiq-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}

  .eiq-sectorpanel__grid{grid-template-columns:minmax(0,1fr);gap:var(--space-11)}

  .eiq-split{grid-template-columns:minmax(0,1fr);gap:var(--space-14)}
  .eiq-compliance{grid-template-columns:minmax(0,1fr);gap:var(--space-12)}
  .eiq-compliance__copy{padding-right:0}
}

/* Collapse the primary nav into a disclosure panel */
@media (max-width:900px){
  .eiq-navtoggle{display:inline-flex}

  .eiq-header__inner{flex-wrap:wrap}

  .eiq-nav{
    display:none;
    order:3;
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:var(--space-2);
    padding:var(--space-4) 0 var(--space-6);
    border-top:1px solid var(--border-hairline);
    margin-top:var(--space-2);
    font-size:var(--text-md);
  }
  .eiq-nav.is-open{display:flex;animation:eiq-rise var(--duration-fast) var(--ease-standard)}
  .eiq-nav > a{padding:var(--space-5) var(--space-2);border-radius:var(--radius-sm)}
  .eiq-nav__actions{padding-top:var(--space-4);flex-wrap:wrap}
  .eiq-nav__actions .eiq-btn{flex:1 1 auto}
}

@media (max-width:720px){
  :root{--sec-pad:68px;--layout-gutter:18px}

  .eiq-grid-3,.eiq-grid-4{grid-template-columns:minmax(0,1fr)}
  .eiq-stage:hover,.eiq-sector:hover{transform:none}

  .eiq-record{padding:var(--space-9)}
  .eiq-record__ident{flex-direction:column;align-items:flex-start}
  .eiq-record__foot{flex-direction:column;align-items:flex-start;gap:var(--space-5)}

  .eiq-sectorpanel{padding:var(--space-10)}
  .eiq-compliance__stats{padding:var(--space-10)}

  /* backdrop-filter is the single most expensive thing on this page; on
     phones the panels go opaque instead and nothing else changes. */
  .eiq-card,.eiq-glass,.eiq-sector,.eiq-record{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:var(--glass-fill-solid);
  }
  .eiq-compliance__stats{
    -webkit-backdrop-filter:none;backdrop-filter:none;
    background:linear-gradient(145deg,rgba(16,185,129,.10),var(--glass-fill-solid));
  }

  .eiq-cta{padding:36px var(--space-11)}
  .eiq-cta__accent{left:var(--space-12);right:var(--space-12)}
  .eiq-actions .eiq-btn{flex:1 1 100%}

  .eiq-footer__inner{gap:var(--space-12)}
  .eiq-footer__cols{gap:var(--space-14);flex-wrap:wrap}
}

/* On a phone the hero copy runs the full width and lands squarely on the
   terrain band, so the grid steps back and the veil comes forward. */
@media (max-width:720px){
  .eiq-webgl.is-ready{opacity:.5}
  .eiq-veil{
    background:
      radial-gradient(140% 80% at 50% 40%,rgba(9,13,22,.12) 0%,rgba(9,13,22,.56) 62%,rgba(9,13,22,.86) 100%),
      linear-gradient(180deg,rgba(9,13,22,.74) 0%,rgba(9,13,22,.50) 34%,rgba(9,13,22,.50) 64%,rgba(9,13,22,.76) 100%);
  }
}

@media (max-width:520px){
  .eiq-trigger__kpis,.eiq-compliance__stats{grid-template-columns:minmax(0,1fr)}
  .eiq-record__head{flex-direction:column;align-items:flex-start;gap:var(--space-2)}
  .eiq-record__facts > div{flex-direction:column;gap:var(--space-1)}
  .eiq-record__facts dd{text-align:left}
  .eiq-lockup__tag{display:none}
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .eiq-stage:hover,.eiq-sector:hover,.eiq-btn:hover{transform:none}
  .js .eiq-reveal{opacity:1;transform:none}
}

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

@media print{
  .eiq-ambient,.eiq-webgl,.eiq-veil,.eiq-header,.eiq-dots,.eiq-navtoggle,.eiq-inspector{display:none}
  .js .eiq-reveal{opacity:1;transform:none}
  body{background:#fff;color:#000}
}