/* ED Consulting Group. Palette pulled from the logo (deep navy + steel blue on
   the left of the mark, orange to amber on the right), rebuilt dark so the
   mark's own glow carries the page. */
:root {
  --void:    #04070c;
  --deep:    #070d16;
  --panel:   rgba(255, 255, 255, .028);
  --panel-2: rgba(255, 255, 255, .05);
  --line:    rgba(122, 162, 204, .16);
  --line-2:  rgba(122, 162, 204, .30);
  --ink:     #e9eff7;
  --dim:     #8a9bb0;
  --dim-2:   #64768c;
  --steel:   #4aa3d8;
  --sky:     #7cc9f0;
  --orange:  #ff7a1a;
  --amber:   #ffc247;
  --radius:  14px;
  --wrap:    1180px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

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

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 26px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 200; background: var(--orange); color: #08111c; padding: 10px 16px; border-radius: 8px; }

/* ---------- ambient field ---------- */
.field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.grid {
  position: absolute; inset: -50% -50% 0 -50%; height: 150%;
  background-image:
    linear-gradient(to right, rgba(122,162,204,.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(122,162,204,.09) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(520px) rotateX(62deg) translateY(-8%);
  transform-origin: 50% 0;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
  animation: drift 22s linear infinite;
}
@keyframes drift { to { background-position: 0 64px, 0 64px; } }

/* Static glows. Animating a 90px-blurred 600px element re-rasterizes a huge
   layer every frame, which was the main CPU/GPU/memory drain. A smaller blur,
   painted once, gives the same look at almost no cost. */
.orb { position: absolute; border-radius: 50%; filter: blur(52px); opacity: .42; }
.orb-a {
  width: 560px; height: 560px; top: -160px; right: -120px;
  background: radial-gradient(circle, rgba(255,122,26,.5), transparent 68%);
}
.orb-b {
  width: 520px; height: 520px; top: 24%; left: -180px;
  background: radial-gradient(circle, rgba(74,163,216,.4), transparent 68%);
}

.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, transparent 30%, var(--void) 82%);
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(4, 7, 12, .72);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand-mark { position: relative; display: grid; place-items: center; }
.brand-mark img { border-radius: 8px; display: block; }
.brand-mark::after {
  content: ""; position: absolute; inset: -6px; border-radius: 12px;
  background: radial-gradient(circle, rgba(255,122,26,.42), transparent 70%);
  filter: blur(9px); z-index: -1;
}
.brand-name { font-size: 12.5px; letter-spacing: .17em; font-weight: 700; color: var(--ink); }

.nav nav { display: flex; align-items: center; gap: 26px; }
.nav nav a { color: var(--dim); text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: .01em; }
.nav nav a:hover { color: var(--ink); }
.nav .cta {
  color: var(--ink) !important; border: 1px solid var(--line-2);
  padding: 8px 16px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
  transition: border-color .2s, box-shadow .2s;
}
.nav .cta:hover { border-color: var(--orange); box-shadow: 0 0 22px -6px rgba(255,122,26,.7); }

/* ---------- shared bits ---------- */
main, .nav, .foot { position: relative; z-index: 1; }

.tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim); margin: 0 0 20px;
}
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 12px 2px rgba(255,122,26,.85);
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }

.grad {
  display: block;
  background: linear-gradient(96deg, var(--orange), var(--amber) 55%, var(--sky));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.lede { color: var(--dim); font-size: 19px; line-height: 1.6; max-width: 56ch; margin: 0 0 32px; }
.lede.small { font-size: 16.5px; }

.btn {
  display: inline-block; padding: 13px 26px; border-radius: 999px;
  font-size: 14.5px; font-weight: 650; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: transform .12s ease, box-shadow .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(96deg, var(--orange), var(--amber));
  color: #100a02; box-shadow: 0 0 30px -8px rgba(255,140,40,.85);
}
.btn.primary:hover { box-shadow: 0 0 42px -6px rgba(255,140,40,1); }
.btn.ghost { border-color: var(--line-2); color: var(--ink); }
.btn.ghost:hover { border-color: var(--sky); box-shadow: 0 0 26px -8px rgba(124,201,240,.8); }
.btn.wide { width: 100%; text-align: center; }
.btn[disabled] { opacity: .55; cursor: default; }

.rule {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}

/* ---------- hero ---------- */
.hero { padding: 92px 0 0; }
.hero-in { position: relative; padding-bottom: 92px; }
.hero h1 {
  margin: 0 0 22px; font-size: clamp(36px, 6.4vw, 76px); line-height: 1.02;
  letter-spacing: -.035em; font-weight: 800; max-width: 15ch; text-wrap: balance;
}
.actions { display: flex; gap: 14px; flex-wrap: wrap; }

.mark {
  position: absolute; top: 6%; right: 0; width: 300px; height: 300px;
  display: grid; place-items: center; pointer-events: none;
}
.mark img { width: 180px; height: 180px; border-radius: 26px; position: relative; z-index: 2;
  box-shadow: 0 30px 80px -30px rgba(255,122,26,.75); }
.mark .ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent, rgba(255,122,26,.55), transparent 55%, rgba(74,163,216,.5), transparent);
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: spin 14s linear infinite;
}
.mark .ring-2 { inset: 34px; animation-duration: 22s; animation-direction: reverse; opacity: .65; }
@keyframes spin { to { transform: rotate(360deg); } }
.mark.small { position: static; width: 150px; height: 150px; margin: 0 auto 22px; }
.mark.small img { width: 96px; height: 96px; border-radius: 18px; }

/* ---------- sections ---------- */
.section { padding: 96px 0; }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px 24px; position: relative; overflow: hidden;
  transition: border-color .22s ease, background .22s ease, transform .22s ease;
}
.tile::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  opacity: 0; transition: opacity .25s ease;
}
.tile:hover { border-color: var(--line-2); background: var(--panel-2); transform: translateY(-3px); }
.tile:hover::after { opacity: 1; }
.idx { font-family: var(--mono); font-size: 11px; color: var(--orange); letter-spacing: .12em; }
.tile h2 { margin: 12px 0 9px; font-size: 17px; letter-spacing: -.015em; font-weight: 650; }
.tile p { margin: 0; color: var(--dim); font-size: 14px; }

/* ---------- homepage section heading + lede ---------- */
.section-title {
  margin: 14px 0 0; max-width: 20ch; font-weight: 800;
  font-size: clamp(28px, 4vw, 42px); letter-spacing: -.03em; line-height: 1.08;
}
.section-lede {
  margin: 18px 0 0; max-width: 66ch; color: var(--dim);
  font-size: 18px; line-height: 1.62;
}

/* ---------- why us: value proposition pillars ---------- */
.pillars {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  margin-top: 30px;
}
.pillar {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; transition: border-color .22s ease, background .22s ease, transform .22s ease;
}
.pillar:hover { border-color: var(--line-2); background: var(--panel-2); transform: translateY(-3px); }
.pillar h3 {
  margin: 0 0 10px; font-size: 19px; font-weight: 700; letter-spacing: -.015em;
}
.pillar p { margin: 0; color: var(--dim); font-size: 15.5px; line-height: 1.66; }

/* ---------- capabilities CTA under the service tiles ---------- */
.cap-cta {
  margin-top: 36px; display: flex; align-items: center; gap: 18px 22px; flex-wrap: wrap;
}
.cap-cta .btn { flex: 0 0 auto; }
.cap-cta-note { margin: 0; color: var(--dim-2); font-size: 14.5px; line-height: 1.55; max-width: 46ch; }
.section-title + .tiles, .section-lede + .tiles { margin-top: 34px; }

/* ---------- band ---------- */
.band { border-block: 1px solid var(--line); background: rgba(255,255,255,.014); }
.band-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; padding: 26px; }
.band-in div { display: flex; flex-direction: column; gap: 2px; }
.band-in b { font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.band-in span { font-family: var(--mono); font-size: 11px; color: var(--dim-2); letter-spacing: .08em; }

/* ---------- contact ---------- */
.contact-in { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.contact-copy h2 { margin: 0 0 16px; font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -.03em; line-height: 1.1; font-weight: 800; }

.form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fld { display: flex; flex-direction: column; margin-bottom: 16px; }
.fld label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.fld .opt { color: var(--dim-2); }
.fld input, .fld textarea {
  font: inherit; font-size: 15px; padding: 12px 13px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.fld input::placeholder, .fld textarea::placeholder { color: var(--dim-2); }
.fld input:focus, .fld textarea:focus {
  outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(74,163,216,.16);
}
.fld.invalid input, .fld.invalid textarea { border-color: #ff6b5e; }
.fld textarea { resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.status { margin: 14px 0 0; font-size: 14px; min-height: 1.2em; color: var(--dim); }
.status.ok { color: #6ee7a8; }
.status.err { color: #ff8a7d; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 26px 0; }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.foot-brand img { border-radius: 6px; }
.foot-meta { font-family: var(--mono); font-size: 11.5px; color: var(--dim-2); letter-spacing: .06em; }

/* ---------- 404 ---------- */
.notfound { min-height: 100vh; display: grid; place-items: center; text-align: center; position: relative; z-index: 1; }
.notfound h1 { margin: 0 0 6px; font-size: clamp(48px, 9vw, 84px); letter-spacing: -.04em; font-weight: 800; }
.notfound .tag { justify-content: center; }
.notfound .lede { margin-inline: auto; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1040px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .mark { position: static; margin: 40px auto 0; }
}
@media (max-width: 820px) {
  .contact-in { grid-template-columns: 1fr; gap: 34px; }
  .hero { padding-top: 60px; }
  .hero-in { padding-bottom: 64px; }
  .section { padding: 64px 0; }
  .pillars { grid-template-columns: 1fr; }
  .nav nav a:not(.cta) { display: none; }
  /* Hide the rotating hero emblem on phones. Its spin animation grows the
     bounding box past the viewport and pushes the layout wider than the
     screen; it also overlaps the heading at this size. Inner pages use the
     static .mark.small, which stays. */
  .hero-in .mark { display: none; }
}
@media (max-width: 560px) {
  .tiles, .field-row { grid-template-columns: 1fr; }
  .band-in { gap: 14px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .grid, .orb, .ring, .dot { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition: none !important; }
}

/* ---------- AI discovery console ---------- */
.console {
  margin-top: 44px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid var(--line-2);
  border-radius: 16px;
  overflow: hidden;
  max-width: 760px;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.9), 0 0 60px -30px rgba(255,122,26,.4);
  position: relative;
}
.console::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange), var(--sky), transparent);
}

.console-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,.28);
}
@keyframes blink { 50% { opacity: 0; } }

.console-body {
  padding: 20px 18px; max-height: 340px; min-height: 150px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth;
}
.console-body::-webkit-scrollbar { width: 8px; }
.console-body::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }

.msg { display: flex; flex-direction: column; gap: 5px; }
.msg .who {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim-2);
}
.msg p { margin: 0; font-size: 17px; white-space: pre-wrap; }
.msg.bot .who { color: var(--orange); }
.msg.bot p { color: var(--ink); }
.msg.you { align-items: flex-end; }
.msg.you .who { color: var(--sky); }
.msg.you p {
  color: var(--ink); background: rgba(74,163,216,.12);
  border: 1px solid rgba(74,163,216,.28); border-radius: 12px 12px 2px 12px;
  padding: 11px 15px; max-width: 82%;
}
.msg.err p { color: #ff8a7d; }
.msg .cursor {
  display: inline-block; width: 8px; height: 1em; vertical-align: -2px;
  background: var(--orange); margin-left: 2px; animation: blink 1.1s steps(2) infinite;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 16px; }
.chips button {
  font: inherit; font-size: 12.5px; color: var(--dim);
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.chips button:hover { color: var(--ink); border-color: var(--line-2); background: rgba(255,255,255,.07); }
.chips.hidden { display: none; }

.console-input {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-top: 1px solid var(--line); background: rgba(0,0,0,.24);
}
.caret { font-family: var(--mono); color: var(--orange); font-size: 16px; }
.console-input input {
  flex: 1; font: inherit; font-size: 15px; background: transparent;
  border: 0; color: var(--ink); padding: 6px 0;
}
.console-input input:focus { outline: none; }
.console-input input::placeholder { color: var(--dim-2); }
.console-input button {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 20px; flex: 0 0 auto;
  border-radius: 12px; border: 0; cursor: pointer;
  background: linear-gradient(96deg, var(--orange), var(--amber)); color: #0a0602;
  font-size: 15.5px; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 0 20px -8px rgba(255,140,40,.9);
  transition: box-shadow .2s, transform .08s, opacity .2s;
}
.console-input button:hover { box-shadow: 0 0 30px -5px rgba(255,140,40,1); }
.console-input button:active { transform: translateY(1px); }
.console-input button[disabled] { opacity: .5; cursor: default; box-shadow: none; }
.send-text { display: inline; }
.send-icon { font-size: 17px; line-height: 1; }

.console-note {
  margin: 0; padding: 0 20px 15px;
  font-size: 13px; line-height: 1.55; color: var(--dim-2);
}

@media (max-width: 820px) {
  .console { margin-top: 32px; }
  .console-body { max-height: 280px; }
}

/* ---------- service pages ---------- */
.service-hero { padding: 72px 0 0; }
.service-hero .wrap { padding-bottom: 68px; }
.service-hero h1 {
  margin: 0 0 20px; font-size: clamp(34px, 5.4vw, 62px); line-height: 1.04;
  letter-spacing: -.035em; font-weight: 800; max-width: 18ch;
}

.crumb { font-family: var(--mono); font-size: 11.5px; color: var(--dim-2); margin-bottom: 22px; }
.crumb a { color: var(--dim); text-decoration: none; }
.crumb a:hover { color: var(--orange); }
.crumb span { margin: 0 4px; }

.section.alt { background: rgba(255,255,255,.014); border-block: 1px solid var(--line); }

.prose { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.prose-block {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px;
}
.prose-block h2 { margin: 0 0 10px; font-size: 18px; letter-spacing: -.018em; font-weight: 650; }
.prose-block p { margin: 0; color: var(--dim); font-size: 14.5px; }

.faq { display: grid; gap: 14px; max-width: 820px; }
.faq-item { border-left: 2px solid var(--line-2); padding: 2px 0 2px 20px; }
.faq-item h3 { margin: 0 0 6px; font-size: 15.5px; font-weight: 650; }
.faq-item p { margin: 0; color: var(--dim); font-size: 14.5px; }

.rels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rel {
  display: flex; flex-direction: column; gap: 5px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 18px; transition: border-color .2s ease, transform .2s ease;
}
.rel:hover { border-color: var(--line-2); transform: translateY(-2px); }
.rel b { color: var(--ink); font-size: 15px; font-weight: 650; }
.rel span { color: var(--dim); font-size: 13px; }

.tile h2 a { color: inherit; text-decoration: none; }
.tile h2 a:hover { color: var(--orange); }

.foot-links {
  display: flex; flex-wrap: wrap; gap: 8px 26px; padding-bottom: 20px;
  border-bottom: 1px solid var(--line); margin-bottom: 20px;
}
.foot-links a { color: var(--dim); text-decoration: none; font-size: 13.5px; }
.foot-links a:hover { color: var(--orange); }

@media (max-width: 900px) {
  .prose, .rels { grid-template-columns: 1fr; }
}

/* ============================================================
   FUTURISTIC LAYER
   HUD framing, scanlines, grain, and a cursor-tracked spotlight.
   Every effect here is decorative and sits behind
   prefers-reduced-motion at the bottom of this file.
   ============================================================ */

/* ---- film grain: takes the flatness off the black ---- */
.grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
}

/* ---- cursor spotlight: the page lights up where you look ---- */
.spot {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(
    520px circle at 70% 22%,
    rgba(255, 122, 26, .06), transparent 70%
  );
}

/* ---- HUD corner brackets ---- */
.hud { position: relative; }
.hud::before, .hud::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border-color: var(--line-2); border-style: solid; pointer-events: none;
  transition: border-color .25s ease;
}
.hud::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.hud::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.hud:hover::before, .hud:hover::after { border-color: var(--orange); }

/* ---- console: scanline sweep + brighter frame ---- */
.console { position: relative; }
.console::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, transparent 0%, rgba(124, 201, 240, .05) 50%, transparent 100%);
  height: 34%;
  animation: sweep 5.5s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes sweep {
  0%   { transform: translateY(-40%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(330%); opacity: 0; }
}

/* ---- live status pill in the nav ---- */
.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px;
}
.status-pill i {
  width: 5px; height: 5px; border-radius: 50%; background: #5fd39b;
  box-shadow: 0 0 8px 1px rgba(95, 211, 155, .9);
  animation: pulse 2.4s ease-in-out infinite;
}
@media (max-width: 980px) { .status-pill { display: none; } }

/* ---- tiles: a beam that runs the top edge on hover ---- */
.tile::before {
  content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange), var(--sky), transparent);
  transition: left .7s cubic-bezier(.4, 0, .2, 1);
}
.tile:hover::before { left: 100%; }

/* ---- headline decode ---- */
.decode { display: inline; }
/* Each word is one inline-block so a line can only break between words; the
   per-character spans inside it are what animate. Without this the browser
   treats every character as its own box and splits words mid-glyph. */
.decode .w { display: inline-block; white-space: nowrap; }
.decode .ch { display: inline-block; }
.decode .ch.scrambling { color: var(--steel); opacity: .85; }

/* ---- reduced motion: strip every moving part ---- */
@media (prefers-reduced-motion: reduce) {
  .grain, .console::after, .status-pill i { animation: none !important; }
  .spot { display: none; }
  .tile::before { transition: none; }
}

/* ---------- footer legal ---------- */
.foot-legal {
  margin: 16px 0 0; padding-top: 15px; border-top: 1px solid var(--line);
  color: var(--dim-2); font-size: 11.5px; line-height: 1.65; max-width: 78ch;
}

/* ============================================================
   CONSOLE, refined
   A rotating gradient border, a live identity block, an activity
   equaliser that runs only while the model is generating, and
   messages that arrive rather than appear.
   ============================================================ */

.console {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.017));
  border: 1px solid var(--line-2);
  box-shadow:
    0 40px 100px -45px rgba(0,0,0,.95),
    0 0 70px -34px rgba(255,122,26,.5),
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* An animated light that runs the top edge, plus a steady hairline beneath it.
   A rotating conic masked to a 1px ring was the first attempt: mask-composite
   is unreliable enough across engines that it leaked the gradient diagonally
   across the whole panel. This does the same job and always looks the same. */
.console-beam {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  z-index: 2; pointer-events: none; overflow: hidden;
  background: linear-gradient(90deg, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent);
}
.console-beam::after {
  content: ""; position: absolute; top: 0; left: -35%; width: 35%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--orange), var(--amber), var(--sky), transparent);
  animation: beam-run 4.5s cubic-bezier(.55, 0, .45, 1) infinite;
}
@keyframes beam-run {
  0%   { left: -35%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.console-bar, .console-body, .chips, .console-input, .console-note {
  position: relative; z-index: 1;
}

.console-bar {
  gap: 12px; padding: 13px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.24));
}

.console-avatar { position: relative; display: inline-flex; }
.console-avatar img { border-radius: 7px; display: block; }
.console-avatar::after {
  content: ""; position: absolute; inset: -4px; border-radius: 11px; z-index: -1;
  background: radial-gradient(circle, rgba(255,122,26,.5), transparent 70%);
  filter: blur(7px);
}
.console-avatar .live {
  position: absolute; right: -3px; bottom: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #5fd39b; border: 2px solid #0a1018;
  box-shadow: 0 0 9px 1px rgba(95,211,155,.9);
  animation: pulse 2.4s ease-in-out infinite;
}

.console-id { display: flex; flex-direction: column; line-height: 1.25; }
.console-id b { font-size: 15px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.console-id em {
  font-style: normal; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: #5fd39b;
}
.console-id em.busy { color: var(--amber); }
.console-id em.off  { color: #ff8a7d; }

/* Activity equaliser: still by default, animates while generating. */
.console-eq { margin-left: auto; display: inline-flex; align-items: flex-end; gap: 3px; height: 15px; }
.console-eq i {
  width: 3px; height: 4px; border-radius: 2px;
  background: linear-gradient(180deg, var(--amber), var(--orange));
  opacity: .28; transition: opacity .3s ease;
}
.console-eq.on i { opacity: 1; animation: eq 1s ease-in-out infinite; }
.console-eq.on i:nth-child(2) { animation-delay: .13s; }
.console-eq.on i:nth-child(3) { animation-delay: .26s; }
.console-eq.on i:nth-child(4) { animation-delay: .39s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 15px; } }

/* Messages arrive with a short rise. */
.console-body { padding: 22px 20px; gap: 18px; }
.msg { animation: msg-in .4s cubic-bezier(.2,.7,.3,1) both; }
@keyframes msg-in { from { opacity: 0; transform: translateY(9px); } }
.msg .who { font-size: 11px; letter-spacing: .08em; }
.msg.bot p {
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  border-radius: 3px 13px 13px 13px; padding: 13px 17px; max-width: 88%;
  font-size: 17px; line-height: 1.65;
}
.msg.you p { border-radius: 13px 3px 13px 13px; font-size: 17px; }

/* Typing indicator while waiting for the first token. */
.typing { display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px; }
.typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--orange);
  opacity: .35; animation: dot 1.25s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: .17s; }
.typing i:nth-child(3) { animation-delay: .34s; }
@keyframes dot { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

.chips button { font-size: 13.5px; padding: 9px 16px; }
.console-input { padding: 13px 15px; }

@media (prefers-reduced-motion: reduce) {
  .console-beam::after, .console-avatar .live, .console-eq.on i, .msg, .typing i {
    animation: none !important;
  }
  .console-beam::after { display: none; }
}

/* ============================================================
   CONSOLE, centred and with an unmissable input
   ============================================================ */

.console {
  margin: 52px auto 0;
  max-width: 800px;
  width: 100%;
}

/* The hero column is left-aligned; the console is the focal point, so it gets
   the full width of the wrap and sits centred beneath the copy. */
.hero-in .console { margin-left: auto; margin-right: auto; }

.console-input {
  display: flex; align-items: stretch; gap: 12px;
  padding: 16px; border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, .3);
}

/* The whole block is a label, so any click inside lands in the input. */
.chat-field {
  flex: 1; display: flex; flex-direction: column; align-items: stretch;
  justify-content: center; gap: 6px; cursor: text; text-align: left;
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid var(--line-2);
  border-radius: 13px; padding: 11px 15px 12px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.chat-field:hover { border-color: var(--sky); background: rgba(255, 255, 255, .08); }
.chat-field:focus-within {
  border-color: var(--orange);
  background: rgba(255, 255, 255, .085);
  box-shadow: 0 0 0 4px rgba(255, 122, 26, .17);
}

.field-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--orange); line-height: 1;
  transition: color .2s ease;
}
.chat-field:focus-within .field-label { color: var(--amber); }

.chat-row { display: flex; align-items: center; gap: 9px; }
.chat-row .caret { font-size: 16px; line-height: 1; color: var(--orange); }
.console-input input {
  flex: 1; font: inherit; font-size: 17px; background: transparent;
  border: 0; color: var(--ink); padding: 2px 0;
}
.console-input input:focus { outline: none; }
.console-input input::placeholder { color: var(--dim-2); font-size: 16px; }

/* A labelled button reads as an action; a bare glyph does not. */
.console-input button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  flex: 0 0 auto; width: auto; height: auto; min-width: 120px; padding: 0 26px;
  border-radius: 13px; border: 0; cursor: pointer;
  background: linear-gradient(96deg, var(--orange), var(--amber));
  color: #180b02; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 8px 24px -8px rgba(255, 140, 40, .9), inset 0 1px 0 rgba(255, 255, 255, .38);
  transition: box-shadow .2s ease, transform .12s ease, filter .2s ease, opacity .2s ease;
}
.console-input button:hover {
  filter: brightness(1.05);
  box-shadow: 0 10px 32px -6px rgba(255, 140, 40, 1), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.console-input button:hover .send-icon { transform: translateX(3px); }
.console-input button:active { transform: translateY(1px); }
.console-input button[disabled] { opacity: .45; cursor: default; box-shadow: none; filter: none; }
.console-input button[disabled] .send-icon { transform: none; }
.send-text { font-weight: 700; }
.send-icon { font-size: 18px; line-height: 1; transition: transform .18s ease; }

/* Idle attention cue on the field itself. */
.chat-field.idle { animation: field-breathe 3s ease-in-out infinite; }

@media (max-width: 620px) {
  .console-input { flex-direction: column; }
  .console-input button { padding: 13px 24px; }
  .console-input input, .console-input input::placeholder { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-field.idle { animation: none !important; }
  .console-input button:hover .send-icon { transform: none; }
}

/* ---------------------------------------------------------------- legal ---
   Privacy and terms. Long-form reading, so this deliberately drops the
   futuristic treatment used elsewhere: generous measure, quiet colour, and
   nothing that moves while someone is trying to read a retention period. */
.legal { padding: 120px 22px 96px; }
.legal .wrap {
  max-width: 880px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(28px, 4.5vw, 60px);
}
.legal h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.06; margin: 0 0 18px; }
.legal .lede { max-width: 68ch; margin-bottom: 10px; }
.legal-date {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim-2);
  margin: 0 0 44px; padding-bottom: 26px; border-bottom: 1px solid var(--line);
}
.legal-block { margin: 0 0 38px; }
.legal-block h2 {
  font-size: 20px; line-height: 1.25; margin: 0 0 14px; color: var(--ink);
  letter-spacing: -.01em;
}
.legal-block p { color: var(--dim); font-size: 15.5px; line-height: 1.78; margin: 0 0 14px; max-width: 72ch; }
.legal-block p:last-child { margin-bottom: 0; }
.legal-block strong { color: var(--ink); font-weight: 600; }
.legal-block ul { margin: 0 0 14px; padding-left: 20px; }
.legal-block li { color: var(--dim); font-size: 15.5px; line-height: 1.75; margin-bottom: 9px; max-width: 72ch; }
.legal-block a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.legal-block a:hover { color: var(--orange); }
.legal-block p, .legal-block li { overflow-wrap: break-word; }

/* Consent line under the assistant and the contact form. */
.consent {
  margin: 16px auto 0; color: var(--dim-2); font-size: 12px; line-height: 1.65;
  max-width: 52ch; text-align: center; text-wrap: pretty;
}
.consent a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }
.consent a:hover { color: var(--sky); }

/* Inside the console the consent line is the last child of a rounded, clipped
   container, so without its own padding the text sits straight on the bottom
   border. The note above it already carries 15px, so the top margin here stays
   small and the bottom does the work. */
.console .consent {
  margin-top: 6px;
  padding: 0 22px 22px;
  max-width: 58ch;
}

@media (max-width: 820px) {
  .console .consent { padding: 0 16px 18px; }
}

/* Legal links sit under the service links in the footer, quieter than them. */
.foot-legal-links {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  padding-bottom: 20px; margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.foot-legal-links a {
  color: var(--dim-2); text-decoration: none; font-size: 12.5px;
  transition: color .2s ease;
}
.foot-legal-links a:hover { color: var(--sky); }

@media (max-width: 640px) {
  .legal { padding: 96px 14px 72px; }
  .legal-date { margin-bottom: 34px; }
}

/* ---------------------------------------------------- standalone pages ---
   About, Capabilities and Contact. These are read, not scanned, so the
   treatment is calmer than the home page: no console glow, wider measure,
   and structure carried by spacing rather than borders. */
.page-hero { padding: 132px 0 20px; }
.page-hero h1 {
  font-size: clamp(38px, 6vw, 66px); line-height: 1.03;
  letter-spacing: -.035em; margin: 0 0 20px; max-width: 16ch;
}
.page-hero .accent { color: var(--orange); }
.page-hero .lede { max-width: 62ch; font-size: 18px; }

/* Snapshot and environment tables: a definition list reads better than a
   grid here, and it stays legible when a value wraps to three lines. */
.snapshot, .envlist { margin: 0; display: grid; gap: 0; }
.snap-row, .env-row {
  display: grid; grid-template-columns: 220px 1fr; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.snap-row:first-child, .env-row:first-child { border-top: 1px solid var(--line); }
.snap-row dt, .env-row dt {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); padding-top: 3px;
}
.snap-row dd, .env-row dd {
  margin: 0; color: var(--dim); font-size: 15.5px; line-height: 1.7;
}

/* Core competencies: four blocks, each with a short lead and a scannable
   list of what the work actually includes. */
.comps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 34px; }
.comp {
  padding: 26px 26px 24px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel);
}
.comp h3 { font-size: 18px; margin: 0 0 10px; letter-spacing: -.01em; }
.comp > p { color: var(--dim); font-size: 15px; line-height: 1.7; margin: 0 0 16px; }
.comp ul { margin: 0; padding: 0; list-style: none; }
.comp li {
  color: var(--dim-2); font-size: 14px; line-height: 1.5;
  padding: 7px 0 7px 18px; position: relative; border-top: 1px solid var(--line);
}
.comp li::before {
  content: ""; position: absolute; left: 2px; top: 15px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--steel);
}

/* Numbered pillars, shared by About principles and Contact steps. */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.pillar {
  padding: 24px 22px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel);
}
.pillar-n {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .18em; color: var(--orange); margin-bottom: 12px;
}
.pillar h3 { font-size: 16.5px; margin: 0 0 9px; letter-spacing: -.01em; }
.pillar p { color: var(--dim); font-size: 14.5px; line-height: 1.65; margin: 0; }

/* Closing call to action. */
.closer { padding-bottom: 96px; }
.closer-in { text-align: center; }
.closer-in h2 { font-size: clamp(26px, 3.6vw, 38px); margin: 0 0 14px; letter-spacing: -.025em; }
.closer-in .lede { margin: 0 auto 28px; }
.closer-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 980px) {
  .comps { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .page-hero { padding: 108px 0 12px; }
  .pillars { grid-template-columns: 1fr; }
  .snap-row, .env-row { grid-template-columns: 1fr; gap: 7px; padding: 15px 0; }
}

/* ------------------------------------------------------------- blog ---
   Index cards and the article itself. Articles are read end to end, so the
   body uses a narrower measure and larger type than the marketing pages. */
.tag-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.tag-nav a {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--dim-2); text-decoration: none;
  padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px;
  transition: color .2s ease, border-color .2s ease;
}
.tag-nav a:hover, .tag-nav a.on { color: var(--sky); border-color: var(--line-2); }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.post-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); transition: border-color .2s ease, transform .2s ease;
}
.post-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.post-card-link { display: block; padding: 24px 22px; text-decoration: none; color: inherit; height: 100%; }
.post-card-meta {
  display: flex; gap: 14px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .05em; color: var(--dim-2); margin-bottom: 13px;
}
.post-card h2 { font-size: 18.5px; line-height: 1.3; margin: 0 0 10px; letter-spacing: -.015em; }
.post-card p { color: var(--dim); font-size: 14.5px; line-height: 1.65; margin: 0 0 18px; }
.post-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.post-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  color: var(--dim-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 9px; text-decoration: none;
}
a.post-tag:hover { color: var(--sky); border-color: var(--line-2); }
.post-more { font-size: 13px; color: var(--orange); white-space: nowrap; }

.pager {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line);
}
.pager a { color: var(--sky); text-decoration: none; font-size: 14.5px; }
.pager a:hover { color: var(--orange); }
.pager-at { font-family: var(--mono); font-size: 11.5px; color: var(--dim-2); letter-spacing: .05em; }

/* Article */
.post { padding: 128px 0 80px; }
.post-wrap { max-width: 760px; }
.crumbs { font-size: 13px; color: var(--dim-2); margin-bottom: 20px; }
.crumbs a { color: var(--dim); text-decoration: none; }
.crumbs a:hover { color: var(--sky); }
.post h1 {
  font-size: clamp(32px, 4.6vw, 50px); line-height: 1.08;
  letter-spacing: -.03em; margin: 0 0 18px;
}
.post-meta {
  display: flex; flex-wrap: wrap; gap: 16px; font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .05em; color: var(--dim-2);
  padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.post .post-tags { margin: 18px 0 0; }
.post-body { margin-top: 34px; }
.post-body p { color: var(--dim); font-size: 17px; line-height: 1.75; margin: 0 0 22px; }
.post-body h2 { font-size: 26px; line-height: 1.25; margin: 44px 0 16px; letter-spacing: -.02em; }
.post-body h3 { font-size: 20px; line-height: 1.3; margin: 34px 0 12px; letter-spacing: -.015em; }
.post-body h4 { font-size: 17px; margin: 28px 0 10px; }
.post-body ul, .post-body ol { margin: 0 0 22px; padding-left: 22px; }
.post-body li { color: var(--dim); font-size: 17px; line-height: 1.72; margin-bottom: 9px; }
.post-body a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: var(--orange); }
.post-body strong { color: var(--ink); font-weight: 600; }
.post-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0 22px; }
.post-body hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.post-body blockquote {
  margin: 0 0 22px; padding: 4px 0 4px 20px; border-left: 2px solid var(--orange);
}
.post-body blockquote p { margin: 0; color: var(--ink); font-style: italic; }
.post-body code {
  font-family: var(--mono); font-size: .88em; color: var(--amber);
  background: rgba(255,255,255,.05); padding: 2px 6px; border-radius: 5px;
}
.post-body pre {
  background: rgba(0,0,0,.4); border: 1px solid var(--line); border-radius: 10px;
  padding: 18px 20px; overflow-x: auto; margin: 0 0 24px;
}
.post-body pre code { background: none; padding: 0; color: var(--ink); font-size: 13.5px; line-height: 1.6; }

@media (max-width: 980px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .post-grid { grid-template-columns: 1fr; }
  .post { padding: 106px 0 64px; }
  .post-body p, .post-body li { font-size: 16.5px; }
}

/* Post cards carry an optional thumbnail. Without one the card is text only,
   so a post is never blocked on finding an image. */
.post-card.has-img .post-card-link { padding: 0 0 24px; }
.post-card-img {
  display: block; margin-bottom: 18px; border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden; background: var(--panel-2); aspect-ratio: 16 / 9;
}
.post-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post-card.has-img .post-card-meta,
.post-card.has-img h2,
.post-card.has-img p,
.post-card.has-img .post-card-foot { padding-left: 22px; padding-right: 22px; }

/* Article hero image. */
.post-cover { margin: 28px 0 0; }
.post-cover img {
  width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid var(--line); display: block;
}
.post-cover figcaption {
  margin-top: 10px; font-size: 13px; color: var(--dim-2); line-height: 1.5;
}