/* 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:     #a3b1c2;
  --body:    #c3cedb;
  --dim-2:   #7d90a8;
  --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: clip; }

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;
  will-change: transform;
}
@keyframes drift { to { transform: perspective(520px) rotateX(62deg) translateY(calc(-8% + 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(--body); 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: 64px 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: 11.5px; letter-spacing: .13em; 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; }
.foot-social { display: inline-flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.foot-social a, .foot-social button.soon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; flex: 0 0 auto; box-sizing: border-box;
  border-radius: 10px; border: 1px solid var(--line); background: var(--panel);
  color: var(--dim); cursor: pointer;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.foot-social a:hover, .foot-social button.soon:hover {
  color: var(--sky); border-color: var(--steel); transform: translateY(-2px);
}
.contact-direct {
  margin: 22px 0 0; font-size: 19px; line-height: 1.6; color: var(--body);
  padding: 14px 18px; border: 1px solid var(--line); border-left: 3px solid var(--orange);
  border-radius: 12px; background: var(--panel);
}
.contact-direct a { color: var(--sky); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ---------- 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); }

/* Touch targets: the whole tile is the link.
   On a phone each tile is a full width card, but only the title text was
   tappable, about 19px tall out of a card over 100px tall. The overlay makes
   the entire card the tap target without changing the markup or the visuals.
   The tile's ::before and ::after decorations sit at the default z-index, so
   the overlay is raised above them and the title text above that. */
/* inset:0 resolves against the nearest POSITIONED ancestor. .tile is already
   position:relative and h2 must stay static, otherwise the overlay shrinks to
   the title and the card is no more tappable than before. z-index:1 lifts it
   over the tile's decorative ::before sheen so the tap lands on the link. */
.tile h2 a::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}

/* Secondary navigation is small by design, but it still has to be tappable.
   Padding only, so nothing moves: the extra height is inside the line box. */
@media (max-width: 760px) {
  .crumbs a, .crumb a, .src-count {
    display: inline-block; padding: 7px 2px; margin: -7px 0;
  }
}

.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: 11.5px; letter-spacing: .13em;
  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;
  will-change: transform;
}
/* Moves by transform, not `left`: a layout property animated every frame
   forced layout and paint of the console 60 times a second. */
@keyframes beam-run {
  0%   { transform: translateX(0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(386%); 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: 118px 0 72px; }
.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: 118px 0 12px; }
.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: 64px; }
.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); }

.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: 118px 0 72px; }
.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(--body); font-size: 17.5px; line-height: 1.78; margin: 0 0 24px; }
.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(--body); font-size: 17.5px; line-height: 1.75; margin-bottom: 10px; }
.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; font-size: 17px; }
.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;
}

/* Certifications. Deliberately plain rows rather than badge images: the
   provider logos are trademarked and their use is governed by partner
   programmes, which is a different claim from holding the certification. */
.certs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 28px; margin-top: 30px; }
.cert {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line); align-items: center;
}
.cert-issuer {
  grid-column: 1 / -1; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--orange);
}
.cert-name { color: var(--ink); font-size: 15px; line-height: 1.45; }
.cert-level {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
.cert-level.cert-progress { border-style: dashed; opacity: .75; }
@media (max-width: 820px) { .certs { grid-template-columns: 1fr; } }

/* Sources at the foot of an article. Attribution the reader can follow, and a
   visible record of what the piece was built from. */
.sources {
  margin: 48px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line);
}
.sources h2 { font-size: 18px; margin: 0 0 6px; letter-spacing: -.01em; }
.sources > p { color: var(--dim-2); font-size: 13.5px; margin: 0 0 16px; }
.sources ol { margin: 0; padding-left: 20px; }
.sources li { margin-bottom: 11px; }
.sources a {
  color: var(--sky); text-decoration: none; font-size: 15px;
  display: inline-flex; flex-direction: column; gap: 2px;
}
.sources a:hover { color: var(--orange); }
.sources a:hover .src-url { color: var(--dim); }
.src-url {
  font-family: var(--mono); font-size: 11.5px; color: var(--dim-2);
  word-break: break-all; transition: color .2s ease;
}

/* ---------------------------------------------------------- byline ---
   The article's provenance, stated up front rather than buried: who wrote it,
   when, how long it takes, and how many sources sit behind it. */
.byline {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 0 20px; border-bottom: 1px solid var(--line);
  position: relative;
}
.byline::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 84px; height: 1px;
  background: linear-gradient(90deg, var(--orange), transparent);
}
.byline-avatar { position: relative; flex: 0 0 auto; display: inline-flex; }
.byline-avatar img {
  border-radius: 11px; border: 1px solid var(--line-2);
  background: var(--panel-2);
}
.byline-pulse {
  position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px;
  border-radius: 50%; background: #5fd39b; border: 2px solid var(--void);
  box-shadow: 0 0 0 0 rgba(95, 211, 155, .55);
  animation: byline-pulse 2.6s ease-out infinite;
}
@keyframes byline-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(95, 211, 155, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(95, 211, 155, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 211, 155, 0); }
}
.byline-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.byline-who { font-size: 14.5px; color: var(--dim); }
.byline-who b { color: var(--ink); font-weight: 600; }
.byline-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim-2);
}
.byline-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); }

/* Provenance note above the sources. Quiet, but not hidden. */
.ai-note {
  margin: 44px 0 0; padding: 18px 20px;
  border: 1px solid var(--line); border-left: 2px solid var(--orange);
  border-radius: 4px var(--radius) var(--radius) 4px;
  background: linear-gradient(90deg, rgba(255,122,26,.05), transparent 70%);
}
.ai-note p { margin: 0; color: var(--dim); font-size: 13.5px; line-height: 1.7; }
.ai-note b { color: var(--ink); font-weight: 600; }
.ai-note a { color: var(--sky); text-decoration: underline; text-underline-offset: 3px; }
.ai-note a:hover { color: var(--orange); }

@media (prefers-reduced-motion: reduce) { .byline-pulse { animation: none; } }

/* ------------------------------------------------ article, futuristic ---
   The home page earns attention with motion; an article has to hold it for
   fifteen hundred words. So the treatment here is structural rather than
   animated: a luminous rule under the title, headings that carry the mark,
   and code and quotes that read as instruments rather than decoration. */
.post { position: relative; }
.post::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 420px;
  background:
    radial-gradient(80% 100% at 12% 0%, rgba(255,122,26,.09), transparent 62%),
    radial-gradient(70% 100% at 88% 6%, rgba(74,163,216,.08), transparent 60%);
  pointer-events: none; z-index: 0;
}
.post-wrap { position: relative; z-index: 1; }

.post h1 {
  background: linear-gradient(180deg, var(--ink) 62%, rgba(233,239,247,.72));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Headings get a short mark in the margin, so scanning the piece reads as a
   structure rather than a wall. */
.post-body h2 { position: relative; padding-top: 6px; }
.post-body h2::before {
  content: ""; position: absolute; top: -10px; left: 0; width: 46px; height: 2px;
  background: linear-gradient(90deg, var(--orange), transparent);
}
.post-body h3 { color: var(--sky); }

.post-body pre {
  position: relative;
  background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.34));
  border-color: var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.post-body pre::before {
  content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,122,26,.5), transparent);
}

.post-body blockquote {
  border-left-width: 2px;
  background: linear-gradient(90deg, rgba(255,122,26,.05), transparent 60%);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px 14px 20px;
}

.post-body table {
  width: 100%; border-collapse: collapse; margin: 0 0 24px;
  font-size: 15px; display: block; overflow-x: auto;
}
.post-body th {
  text-align: left; font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--orange);
  padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.post-body td {
  padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line);
  color: var(--body); vertical-align: top;
}
.post-body tr:last-child td { border-bottom: 0; }

/* Cover image sits in a frame rather than floating. */
.post-cover img { border-color: var(--line-2); object-fit: contain; background: var(--panel-2); }
.post-cover {
  position: relative; border-radius: var(--radius); overflow: hidden;
}
.post-cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: var(--radius);
  background: linear-gradient(180deg, transparent 62%, rgba(4,7,12,.4));
}
.post-cover figcaption { position: relative; z-index: 1; padding: 0 2px; }

/* Tags. Removed with the old card grid, still needed by the rows, the article
   header and the related list. */
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.post-tag {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .05em;
  color: var(--dim-2); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px; text-decoration: none; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
a.post-tag:hover { color: var(--sky); border-color: var(--line-2); }

/* The blog index stacks a hero, a tag nav and then the rows. Each brought its
   own vertical padding, which added up to a gap large enough to look like a
   missing element. Tightened so the first article sits just below the filters. */
.blog-index .page-hero { padding-bottom: 0; }
.blog-index .tag-nav { margin-top: 22px; }
/* The hero is itself a <section>, so :first-of-type matched the hero and left
   the rows on their default 96px. Target the section that follows it. */
.blog-index .page-hero + .section { padding-top: 30px; }

/* --------------------------------------------------- blog index rows ---
   Full width rows rather than a grid of small cards. Each one gets enough of
   the article to decide on, a clickable heading, and its own Read more. */
.post-rows { display: flex; flex-direction: column; gap: 18px; }
.post-row {
  display: grid; grid-template-columns: 260px 1fr; gap: 26px;
  padding: 22px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); position: relative; overflow: hidden;
  transition: border-color .25s ease, transform .25s ease;
}
.post-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--orange), transparent);
  opacity: 0; transition: opacity .25s ease;
}
.post-row:hover { border-color: var(--line-2); transform: translateY(-2px); }
.post-row:hover::before { opacity: 1; }
.post-row:not(:has(.post-row-img)) { grid-template-columns: 1fr; }

.post-row-img {
  display: block; border-radius: 10px; overflow: hidden;
  background: var(--panel-2); aspect-ratio: 16 / 10; border: 1px solid var(--line);
}
.post-row-img img {
  width: 100%; height: 100%; display: block;
  /* contain, not cover: a diagram loses its meaning when the edges are cropped
     away, and covers are generated at 1200x630 which will not match every
     card ratio. */
  object-fit: contain; object-position: center;
}

.post-row-body { display: flex; flex-direction: column; min-width: 0; }
.post-row-meta {
  display: flex; align-items: center; gap: 9px; margin-bottom: 11px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dim-2);
}
.post-row h2 { font-size: 23px; line-height: 1.28; margin: 0 0 11px; letter-spacing: -.02em; }
.post-row h2 a { color: var(--ink); text-decoration: none; transition: color .2s ease; }
.post-row h2 a:hover { color: var(--orange); }
.post-row p { color: var(--body); font-size: 15.5px; line-height: 1.7; margin: 0 0 18px; }
.post-row-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: auto;
}
.btn.small { padding: 9px 18px; font-size: 14px; }
.btn.ghost.small:hover span { transform: translateX(3px); }
.btn.ghost.small span { display: inline-block; transition: transform .2s ease; }

/* Pagination with page numbers. */
.pager {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); flex-wrap: wrap;
}
.pager-step { color: var(--sky); text-decoration: none; font-size: 14.5px; white-space: nowrap; }
.pager-step:hover { color: var(--orange); }
.pager-step.off { color: var(--dim-2); opacity: .45; }
.pager-nums { display: flex; align-items: center; gap: 6px; }
.pager-n {
  min-width: 34px; height: 34px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--line); border-radius: 9px;
  color: var(--dim); text-decoration: none; font-family: var(--mono); font-size: 13px;
  transition: color .2s ease, border-color .2s ease;
}
.pager-n:hover { color: var(--sky); border-color: var(--line-2); }
.pager-n.on { color: #180b02; background: linear-gradient(96deg, var(--orange), var(--amber)); border-color: transparent; font-weight: 700; }
.pager-gap { color: var(--dim-2); padding: 0 2px; }

@media (max-width: 820px) {
  .post-row { grid-template-columns: 1fr; gap: 16px; }
  .post-row-img { aspect-ratio: 16 / 9; }
}

/* --------------------------------------------- chat field and send ---
   The caret blinks like a terminal cursor, which is the clearest signal that
   a field is waiting for input without adding any instruction text. */
.caret.blink { animation: caret-blink 1.15s steps(1) infinite; }
@keyframes caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }
.chat-field:focus-within .caret.blink { animation: none; opacity: 1; color: var(--amber); }

/* Send: label centred, with the keyboard shortcut stacked beneath it rather
   than an arrow beside it. */
.console-input button {
  flex-direction: column; gap: 3px; padding: 12px 24px; line-height: 1.15;
}
.send-text { font-weight: 700; text-align: center; }
.send-key {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; opacity: .72;
}
.send-key svg { display: block; }

/* A larger, squarer mark reads more clearly at header size. */
.brand-mark img { border-radius: 10px; width: 44px; height: 44px; object-fit: cover; }
.brand-mark::after { inset: -3px; }
.nav-in { min-height: 68px; }

/* ==================================================================== */
/* MOBILE                                                               */
/* Phones are where the assistant gets used, so the console is treated  */
/* as the priority rather than something that merely survives shrinking. */
/* ==================================================================== */

/* Nothing may exceed the viewport. A single wide element causes the whole
   page to scroll sideways, which reads as broken. */
/* clip, not hidden: hidden makes html/body a scroll container, which
   quietly breaks position: sticky on the header. clip only clips. */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, pre, table { max-width: 100%; }

@media (max-width: 760px) {
  .wrap { padding: 0 18px; }
  .section { padding: 44px 0; }
  .page-hero { padding: 92px 0 8px; }
  .post { padding: 92px 0 56px; }
  .legal { padding: 92px 0 56px; }
  .closer { padding-bottom: 44px; }

  /* Header: the logo and one action. Everything else is noise at this size. */
  .nav-in { min-height: 60px; }
  .brand-name { font-size: 12.5px; letter-spacing: .08em; }
  .brand-mark img { width: 38px; height: 38px; }
  .nav nav { gap: 12px; }
  .nav nav a:not(.cta) { display: none; }
  .nav .cta { padding: 9px 16px; font-size: 13.5px; }

  h1, .hero h1 { font-size: clamp(30px, 8.4vw, 40px); max-width: none; }
  .lede { font-size: 16.5px; max-width: none; }

  /* The console. Input first, full width, thumb-sized targets. */
  .console { margin-top: 30px; border-radius: 14px; }
  .console-body { padding: 16px 14px; }
  .console-bar { padding: 12px 14px; }
  .msg.bot p, .msg.you p { font-size: 16px; line-height: 1.6; padding: 12px 14px; max-width: 94%; }
  .chips { padding: 0 14px 14px; gap: 7px; }
  .chips button {
    font-size: 14px; padding: 11px 14px; min-height: 44px;
    width: 100%; text-align: left; white-space: normal;
  }
  .console-input { flex-direction: column; gap: 10px; padding: 14px; }
  .chat-field { width: 100%; }
  /* 16px is the threshold below which iOS zooms the page on focus. */
  .console-input input,
  .console-input input::placeholder { font-size: 16px; }
  .console-input button { width: 100%; min-height: 52px; font-size: 16px; }
  .console-note, .consent { padding-left: 14px; padding-right: 14px; }
  .console .consent { padding-bottom: 16px; }

  /* Forms: same 16px rule, and targets big enough to hit. */
  .fld input, .fld textarea { font-size: 16px; padding: 13px 14px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .btn { padding: 13px 22px; min-height: 46px; }
  .btn.wide { min-height: 52px; }

  /* Long-form reading. */
  .post h1 { font-size: clamp(27px, 8vw, 34px); }
  .post-body p, .post-body li { font-size: 16.5px; line-height: 1.72; }
  .post-body h2 { font-size: 22px; }
  .post-body h3 { font-size: 18px; }
  .post-body pre { padding: 14px; border-radius: 9px; }
  .post-body pre code { font-size: 12.5px; }
  .byline { gap: 11px; }
  .byline-who { font-size: 13.5px; }

  /* Blog index rows already stack; make the touch targets right. */
  .post-row { padding: 16px; }
  .post-row h2 { font-size: 20px; }
  .post-row-foot { gap: 12px; }
  .btn.small { min-height: 44px; }
  .pager { gap: 12px; justify-content: center; }
  .pager-n { min-width: 40px; height: 40px; }
  .tag-nav a { padding: 9px 14px; min-height: 40px; display: inline-flex; align-items: center; }

  /* Everything that was a multi-column grid becomes one column. */
  .tiles, .pillars, .comps, .post-rows, .certs { grid-template-columns: 1fr; }
  .snap-row, .env-row { grid-template-columns: 1fr; gap: 6px; }
  .foot-links, .foot-legal-links { gap: 10px 18px; }
}

/* Very small phones, iPhone SE and similar. */
@media (max-width: 380px) {
  .wrap { padding: 0 14px; }
  .brand-name { display: none; }
  .console-body { padding: 14px 12px; }
  .chips { padding: 0 12px 12px; }
  .console-input { padding: 12px; }
  .msg.bot p, .msg.you p { max-width: 100%; }
}

/* Landscape on a phone: the header eats the viewport, so trim it. */
@media (max-height: 460px) and (orientation: landscape) {
  .page-hero, .post, .legal { padding-top: 76px; }
  .console { margin-top: 18px; }
}

/* ---- section photography ---- */
.photo-band{padding:36px 0 0}
.page-photo{margin:0;position:relative;border-radius:16px;overflow:hidden;
  border:1px solid rgba(124,201,240,.16);transform:translateZ(0);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.page-photo img{display:block;width:100%;height:clamp(220px,36vw,420px);object-fit:cover}
.page-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,7,12,.22),rgba(4,7,12,0) 38%,rgba(4,7,12,.30));
  }
@media (max-width:760px){.page-photo img{height:220px}}

/* ---- services dropdown ---- */
.nav-drop{position:relative}
.nav-drop-btn{background:none;border:0;cursor:pointer;font:inherit;color:var(--dim);
  font-size:14px;font-weight:500;letter-spacing:.01em;padding:0;display:inline-flex;
  align-items:center;gap:5px}
.nav-drop-btn .caret{font-size:10px;transform:translateY(1px);transition:transform .2s}
.nav-drop:hover .nav-drop-btn,.nav-drop:focus-within .nav-drop-btn{color:var(--ink)}
.nav-drop:hover .caret,.nav-drop:focus-within .caret{transform:rotate(180deg) translateY(-1px)}
.nav-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%);
  padding-top:18px;display:none;z-index:60}
.nav-drop:hover .nav-panel,.nav-drop:focus-within .nav-panel{display:block}
.nav-panel-in{display:grid;grid-template-columns:1fr 1fr;gap:26px;width:560px;
  background:rgba(7,12,20,.97);border:1px solid rgba(124,201,240,.18);border-radius:14px;
  padding:22px 24px;box-shadow:0 30px 70px -18px rgba(0,0,0,.85);
  backdrop-filter:blur(14px)}
.nav-col{display:flex;flex-direction:column;gap:2px}
.nav-col b{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#7d90a8;
  font-weight:600;margin-bottom:8px}
.nav .nav-col a{display:block;padding:7px 10px;margin:0 -10px;border-radius:8px;font-size:14px}
.nav .nav-col a:hover{background:rgba(124,201,240,.08);color:var(--ink)}

/* ---- mobile menu ---- */
.nav-burger{display:none;background:none;border:0;cursor:pointer;padding:10px;
  flex-direction:column;gap:5px}
.nav-burger span{display:block;width:22px;height:2px;background:var(--ink);
  border-radius:2px;transition:transform .25s,opacity .2s}
body.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-burger span:nth-child(2){opacity:0}
body.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none}
body.menu-open{overflow:hidden}
@media (max-width:760px){
  .nav-burger{display:flex}
  .mobile-menu.open{display:block;position:fixed;top:60px;left:0;right:0;bottom:0;
    overflow-y:auto;background:rgba(4,7,12,.985);z-index:50;padding:22px 0 40px;
    border-top:1px solid rgba(124,201,240,.14)}
  .mm-group{display:flex;flex-direction:column;padding:14px 0;border-bottom:1px solid rgba(124,201,240,.09)}
  .mm-group b{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#7d90a8;
    font-weight:600;padding:6px 0 8px}
  .mm-group a{color:var(--ink);text-decoration:none;font-size:16.5px;padding:11px 0;
    min-height:44px;display:flex;align-items:center}
  .mm-cta{margin-top:20px;justify-content:center;display:flex}
}

/* ---- service bullet lists ---- */
.svc-items{list-style:none;margin:16px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:9px 20px}
.svc-items li{position:relative;padding-left:18px;color:var(--dim);font-size:15px;line-height:1.55}
.svc-items li::before{content:"";position:absolute;left:0;top:10px;width:9px;height:2px;
  background:linear-gradient(90deg,var(--orange),#ffc247)}

/* ---- footer columns ---- */
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;
  padding:38px 0 30px;border-bottom:1px solid rgba(124,201,240,.10);margin-bottom:22px}
.foot-col{display:flex;flex-direction:column;gap:4px}
.foot-col b{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#7d90a8;
  font-weight:600;margin-bottom:9px}
.foot-col a{color:var(--dim);text-decoration:none;font-size:14px;padding:4px 0}
.foot-col a:hover{color:var(--ink)}
@media (max-width:900px){.foot-cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-cols{grid-template-columns:1fr}}

/* ---- dropdown above everything, animated ---- */
header.nav{z-index:220}
.nav-panel{display:block;visibility:hidden;opacity:0;pointer-events:none;
  transform:translateX(-50%) translateY(8px);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
.nav-drop:hover .nav-panel,.nav-drop:focus-within .nav-panel{visibility:visible;opacity:1;
  pointer-events:auto;transform:translateX(-50%) translateY(0);
  transition:opacity .18s ease,transform .18s ease}
.nav-drop-btn{text-decoration:none}
.nav-drop-btn .caret{transition:transform .22s ease;flex:0 0 auto}
.nav-all{grid-column:1/-1;display:flex;align-items:center;gap:7px;margin-top:2px;
  padding:13px 10px 2px;border-top:1px solid rgba(124,201,240,.12);
  color:var(--orange);font-size:13.5px;font-weight:600;text-decoration:none}
.nav-all:hover{color:#ffc247}

/* ---- services index cards ---- */
.svcx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:18px;margin-top:28px}
.svcx-card{display:flex;flex-direction:column;text-decoration:none;overflow:hidden;
  border:1px solid rgba(124,201,240,.14);border-radius:16px;background:rgba(10,16,26,.55);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.svcx-card:hover{transform:translateY(-4px);border-color:rgba(255,122,26,.5);
  box-shadow:0 22px 44px -18px rgba(0,0,0,.75)}
.svcx-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  border-bottom:1px solid rgba(124,201,240,.10)}
.svcx-body{display:flex;flex-direction:column;gap:7px;padding:16px 18px 18px}
.svcx-body h3{margin:0;color:var(--ink);font-size:17px;line-height:1.3}
.svcx-body p{margin:0;color:var(--dim);font-size:14px;line-height:1.55}
.svcx-more{margin-top:4px;color:var(--orange);font-size:13.5px;font-weight:600}

/* ---- three-group dropdown ---- */
.nav-panel-in{grid-template-columns:repeat(3,1fr);width:840px;max-width:calc(100vw - 36px)}
.foot-cols{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1000px){.foot-cols{grid-template-columns:1fr 1fr}}

/* ---- dropdown opens on click too ---- */
.nav-drop.open .nav-panel{visibility:visible;opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(0)}
.nav-drop.open .nav-drop-btn{color:var(--ink)}
.nav-drop.open .caret{transform:rotate(180deg)}

/* ---- sources jump link ---- */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
#sources{scroll-margin-top:92px}
.src-count{color:inherit;text-decoration:underline;text-decoration-color:rgba(124,201,240,.45);
  text-underline-offset:3px}
.src-count:hover{color:var(--sky)}

/* ---- nav items: whole section clickable and hoverable ---- */
.nav nav{gap:4px}
.nav nav > a:not(.cta), .nav-drop-btn{
  padding:10px 14px;border-radius:9px;
  transition:background .15s ease,color .15s ease}
.nav nav > a:not(.cta):hover,
.nav nav > a:not(.cta):focus-visible,
.nav-drop:hover .nav-drop-btn,
.nav-drop:focus-within .nav-drop-btn,
.nav-drop.open .nav-drop-btn{background:rgba(124,201,240,.10);color:var(--ink)}
.nav .status-pill{margin-right:10px}
.nav .cta{margin-left:10px}

/* ---- version ---- */
.foot-ver{color:#5b6b7f;font-size:11.5px;letter-spacing:.06em;
  border:1px solid rgba(124,201,240,.16);border-radius:999px;padding:3px 10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---- ad landing pages ---- */
.lp-bullets{margin-top:6px}
.lp-bullets li{font-size:16px;color:var(--ink);padding-left:22px}
.lp-bullets li::before{top:12px;width:11px}
.lp-certs{margin-top:26px;font-size:13px;line-height:1.7;letter-spacing:.02em}

/* ---- hero video ---- */
.hero-top{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:46px;
  align-items:center;margin-bottom:40px}
.hero-in.has-video .mark{display:none}
.hero-video{position:relative}
.hv-frame{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#04070c;
  border:1px solid rgba(124,201,240,.24);
  box-shadow:0 0 0 1px rgba(255,122,26,.10),0 46px 100px -34px rgba(0,0,0,.95),0 0 70px -22px rgba(74,163,216,.45)}
.hv-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#04070c}
.hv-frame::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(4,7,12,.10),rgba(4,7,12,0) 30%,rgba(4,7,12,.45))}
.hv-corner{position:absolute;width:20px;height:20px;z-index:3;border:2px solid var(--orange);
}
.hv-corner.tl{top:12px;left:12px;border-right:0;border-bottom:0;border-radius:3px 0 0 0}
.hv-corner.tr{top:12px;right:12px;border-left:0;border-bottom:0;border-radius:0 3px 0 0}
.hv-corner.bl{bottom:12px;left:12px;border-right:0;border-top:0;border-radius:0 0 0 3px}
.hv-corner.br{bottom:12px;right:12px;border-left:0;border-top:0;border-radius:0 0 3px 0}
.hv-scan{position:absolute;left:0;right:0;top:0;height:2px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(124,201,240,.75),transparent);
  display:none}
@keyframes hvscan{0%{transform:translateY(0)}100%{transform:translateY(calc(100% * 200))}}
.hv-play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;z-index:4;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;
  background:rgba(4,7,12,.72);border:1px solid rgba(255,255,255,.28);
  transition:transform .2s ease,background .2s ease}
.hv-play:hover,.hv-play:focus-visible{transform:scale(1.06);background:rgba(255,122,26,.85)}
.hv-play svg{margin-left:4px}
.hv-ring{position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(255,122,26,.7);
  animation:hvpulse 2.4s ease-out infinite}
@keyframes hvpulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.5);opacity:0}}
.hv-caption{position:absolute;left:18px;bottom:16px;z-index:4;display:flex;flex-direction:column;gap:2px;
  text-shadow:0 1px 10px rgba(0,0,0,.9);pointer-events:none}
.hv-caption b{color:#fff;font-size:14px;letter-spacing:.01em}
.hv-caption span{color:#c6d1e0;font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
.hero-video.playing .hv-play,.hero-video.playing .hv-caption,.hero-video.playing .hv-teaser,
.hero-video.playing .hv-scan,.hero-video.playing .hv-frame::after{display:none}
.hero-video.playing .hv-full{position:absolute}
@media (prefers-reduced-motion: reduce){.hv-ring,.hv-scan{animation:none}}
@media (max-width:900px){.hero-top{grid-template-columns:1fr;gap:28px;margin-bottom:30px}
  .hv-play{width:68px;height:68px}}
.hv-frame video[hidden]{display:none}

/* ---- hero video: centred on the text row, buttons on their own line ---- */
.hero-in.has-video .hero-top{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:48px;align-items:center;margin-bottom:34px}
.hero-in.has-video .hero-video{align-self:center;justify-self:end;width:100%}
.hero-actions{display:flex;flex-wrap:nowrap;gap:12px;margin-bottom:34px}
.hero-actions .btn{white-space:nowrap}
@media (min-width:1300px){.hero-in.has-video .hero-video{margin-right:-44px;width:calc(100% + 44px)}}
@media (max-width:900px){
  .hero-in.has-video .hero-top{grid-template-columns:1fr;gap:28px;margin-bottom:26px}
  .hero-in.has-video .hero-video{justify-self:stretch}
  .hero-actions{flex-wrap:wrap}
}

/* ---- video lightbox ---- */
.hv-modal{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  padding:28px;background:rgba(2,5,10,.84);backdrop-filter:blur(12px);
  animation:hvfade .22s ease}
.hv-modal[hidden]{display:none}
@keyframes hvfade{from{opacity:0}to{opacity:1}}
.hv-shell{position:relative;width:min(1180px,96vw);animation:hvrise .28s cubic-bezier(.2,.8,.2,1)}
@keyframes hvrise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.hv-dialog{position:relative;aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;
  border:1px solid rgba(124,201,240,.30);
  box-shadow:0 0 0 1px rgba(255,122,26,.12),0 60px 140px -40px rgba(0,0,0,1),0 0 110px -30px rgba(74,163,216,.55)}
.hv-dialog video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000}
.hv-dialog .hv-corner{z-index:5;pointer-events:none}
.hv-close{position:absolute;top:-54px;right:0;width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);
  transition:background .15s ease,transform .15s ease}
.hv-close:hover,.hv-close:focus-visible{background:rgba(255,122,26,.9);border-color:transparent;transform:scale(1.06)}
.hv-modal-title{margin:16px 0 0;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.hv-modal-title b{color:#fff;font-size:15px}
.hv-modal-title span{color:#8fa0b8;font-size:12.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
body.hv-open{overflow:hidden}
@media (max-width:640px){
  .hv-modal{padding:14px}
  .hv-close{top:auto;bottom:-58px;right:50%;transform:translateX(50%)}
  .hv-close:hover,.hv-close:focus-visible{transform:translateX(50%) scale(1.06)}
  .hv-modal-title{display:none}
}
@media (prefers-reduced-motion: reduce){.hv-modal,.hv-shell{animation:none}}

/* ---- cookie consent bar ---- */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:300;padding:14px 20px 18px;
  background:rgba(7,12,20,.97);border-top:1px solid rgba(124,201,240,.18);
  box-shadow:0 -20px 50px -20px rgba(0,0,0,.8)}
.cookiebar[hidden]{display:none}
.cookiebar-in{max-width:1128px;margin:0 auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cookiebar p{margin:0;flex:1 1 420px;color:var(--dim);font-size:14px;line-height:1.55;text-align:left}
.cookiebar p a{color:var(--sky)}
.cookiebar-actions{display:flex;gap:10px;flex:0 0 auto}
.cookiebar .btn.small{padding:10px 18px;font-size:13.5px}
.cookiebar .btn.ghost{background:transparent;color:var(--ink);border:1px solid rgba(124,201,240,.35)}

/* ---- phone header: logo, compact CTA, burger; everything else in the menu ---- */
@media (max-width:760px){
  .nav .nav-drop,.nav .status-pill{display:none}
  .nav nav{gap:8px}
  .nav .cta{padding:8px 13px;font-size:13px;margin-left:0;white-space:nowrap}
  .nav-in{height:60px;min-height:60px;gap:8px}
  .brand{gap:8px;min-width:0}
  .brand-mark img{width:36px;height:36px}
  .brand-name{font-size:10.5px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-burger{margin-right:-8px}
  .mobile-menu.open{top:60px}
}
@media (max-width:430px){
  .brand-name{display:none}
}

/* ---- phone menu: full screen, links visible, CTA beside the burger ---- */
@media (max-width:760px){
  .nav nav{margin-left:auto}
  .mobile-menu.open{z-index:350;top:60px}
  .mobile-menu .mm-group a{display:flex}
  .mobile-menu .mm-group{padding:10px 0}
  .mobile-menu .mm-group a{padding:10px 0;min-height:42px;font-size:16px}
}
@media (max-width:640px){
  .cookiebar{padding:10px 14px 12px}
  .cookiebar-in{gap:10px}
  .cookiebar p{font-size:12.5px;line-height:1.45;flex-basis:100%}
  .cookiebar-actions{width:100%;justify-content:flex-end}
  .cookiebar .btn.small{padding:8px 14px;font-size:13px}
}
@media (max-width:760px){
  .mobile-menu.open{background:#04070c}
  .nav-burger{width:44px;height:44px;padding:0;align-items:center;justify-content:center;margin-right:-6px}
  .nav .cta{min-height:40px;display:inline-flex;align-items:center}
}
@media (max-width:760px){
  .nav .cta{gap:6px}
}
@media (max-width:640px){
  .hv-play{width:58px;height:58px}
  .hv-play svg{width:22px;height:22px}
  .hv-caption{left:14px;bottom:12px;max-width:62%}
  .hv-caption b{font-size:12.5px;line-height:1.3}
  .hv-caption span{display:none}
}

/* ---- sticky header: this must beat the shared "position: relative" rule ---- */
header.nav{position:sticky;top:0}

/* ---------- book a call ---------- */
.book-opt { margin: 18px 0 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.book-opt > label { display: block; margin-bottom: 4px; }
.fld select {
  font: inherit; font-size: 15px; padding: 12px 13px; border-radius: 10px; width: 100%;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1.2 5.5 5.8 10 1.2' stroke='%23a3b1c2' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.fld select:focus { outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(74,163,216,.16); }
.fld select:disabled { opacity: .55; cursor: not-allowed; }
.fld select option { background: var(--deep); color: var(--ink); }
.book { max-width: 720px; }
.book-note { font-size: 13.5px; color: var(--dim-2); margin: 6px 0 14px; }
.book-days[hidden], .book-slots[hidden] { display: none; }
.book-days { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.book-day { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--body); cursor: pointer; font-size: 13.5px; }
.book-day.sel { border-color: var(--steel); color: var(--ink); background: rgba(74,163,216,.12); }
.book-slots { display: flex; gap: 8px; flex-wrap: wrap; min-height: 40px; }
.book-slot { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--body); cursor: pointer; font-family: var(--mono); font-size: 13px; }
.book-slot:hover { border-color: var(--line-2); }
.book-slot.sel { border-color: var(--orange); color: var(--ink); background: rgba(255,122,26,.12); }
.book-form { margin-top: 18px; }
.book-chosen { margin: 0 0 12px; color: var(--body); }
.linklike { background: none; border: none; color: var(--steel); cursor: pointer; padding: 0; font-size: 13px; text-decoration: underline; }

/* ---------- coming soon dialog ---------- */
.soon-overlay {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(4, 7, 12, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; padding: 20px;
}
.soon-overlay.open { opacity: 1; pointer-events: auto; }
.soon-card {
  position: relative; max-width: 460px; width: 100%; padding: 34px 34px 30px;
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, rgba(20, 30, 44, .96), rgba(7, 13, 22, .98));
  border: 1px solid rgba(122, 162, 204, .35);
  box-shadow: 0 0 0 1px rgba(255, 122, 26, .12), 0 0 60px rgba(74, 163, 216, .18), 0 30px 80px rgba(0, 0, 0, .6);
  transform: translateY(14px) scale(.97); transition: transform .28s cubic-bezier(.2, .9, .3, 1.2);
}
.soon-overlay.open .soon-card { transform: translateY(0) scale(1); }
.soon-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(124, 201, 240, .10) 1px, transparent 1px);
  background-size: 22px 22px;
}
.soon-scan {
  position: absolute; left: 0; right: 0; top: -40%; height: 40%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(124, 201, 240, .07), transparent);
  animation: soonscan 3.2s linear infinite;
}
@keyframes soonscan { to { top: 140%; } }
.soon-kicker {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sky);
}
.soon-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px var(--orange); animation: soonpulse 1.4s ease-in-out infinite; }
@keyframes soonpulse { 50% { opacity: .35; } }
.soon-card h3 {
  margin: 0 0 10px; font-size: clamp(26px, 4vw, 34px); letter-spacing: -.02em; color: var(--ink);
  background: linear-gradient(90deg, var(--ink), var(--sky)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.soon-body { margin: 0 0 20px; color: var(--body); font-size: 15.5px; line-height: 1.65; }
.soon-body b { color: var(--ink); }
.soon-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.soon-close {
  position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--dim);
  font-size: 20px; line-height: 1; cursor: pointer; transition: color .18s ease, border-color .18s ease;
}
.soon-close:hover { color: var(--ink); border-color: var(--line-2); }

/* ---- dropdown panel: keep it inside the viewport ----
   The panel is centred on the Services button via left:50% + translateX(-50%),
   with .nav-drop as its containing block. On a narrow desktop or a tablet in
   portrait that centring puts part of the panel outside the viewport, and the
   right-hand part drags the whole page sideways.

   Below 1100px the containing block is taken away from the button
   (position:static), so the panel centres on the viewport instead. It then
   cannot leave the screen on either side, whatever the button's position in
   the bar. Two columns keep it comfortably inside. */
@media (min-width: 761px) and (max-width: 1100px) {
  .nav-drop { position: static; }
  .nav-panel { left: 50%; right: auto; transform: translateX(-50%) translateY(8px); }
  .nav-drop:hover .nav-panel,
  .nav-drop:focus-within .nav-panel,
  .nav-drop.open .nav-panel { transform: translateX(-50%) translateY(0); }
  .nav-panel-in { grid-template-columns: repeat(2, 1fr); width: 600px; max-width: calc(100vw - 36px); }

  /* Six links plus the call to action is a tight fit on a narrow desktop.
     Trimming the horizontal padding reclaims enough room that the CTA stays
     inside the viewport instead of pushing the page sideways. */
  .nav nav > a:not(.cta), .nav-drop-btn { padding-left: 9px; padding-right: 9px; }
  .nav nav { gap: 2px; }
}

/* The header gained an Assessments link, which tightens the bar enough that
   "Talk to us" and its arrow broke onto two lines and doubled the button's
   height. The label is a fixed phrase and must never wrap. The mobile
   breakpoint already sets this; the desktop bar needs it too. */
.nav .cta { white-space: nowrap; }

/* footer security and privacy badges, self-attested controls */
.foot-trust{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 2px;padding-top:20px;border-top:1px solid var(--line)}
.trust-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel);color:var(--dim);font-size:12px;font-weight:500;letter-spacing:.01em;text-decoration:none;transition:color .15s,border-color .15s}
.trust-badge svg{width:14px;height:14px;color:var(--sky);flex:none}
.trust-badge:hover{border-color:var(--line-2);color:var(--ink)}
@media (max-width:480px){.trust-badge{font-size:11.5px;padding:5px 9px}}

/* ---------- cloud certification badges ---------- */
.certbadges{margin:0}
.cb-head{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim-2);margin:0 0 16px}
.cb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cb-card{display:flex;gap:14px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);transition:border-color .15s}
.cb-card:hover{border-color:var(--line-2)}
.cb-mark{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center}
.cb-mark svg{width:23px;height:23px}
.cb-mark.cb-aws{color:#08111c;background:linear-gradient(135deg,#ffa24d,#ff7a1a)}
.cb-mark.cb-azure{color:#08111c;background:linear-gradient(135deg,#5bb4e6,#2f80d8)}
.cb-dots{flex:none;width:42px;height:42px;border-radius:12px;background:var(--panel-2);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:5px;place-content:center;padding:11px}
.cb-dots i{width:8px;height:8px;border-radius:50%;display:block}
/* Colors live here, not in style attributes: the CSP blocks inline styles. */
.cb-dots i:nth-child(1){background:#4285f4}
.cb-dots i:nth-child(2){background:#ea4335}
.cb-dots i:nth-child(3){background:#fbbc05}
.cb-dots i:nth-child(4){background:#34a853}
.cb-soon{margin:10px 0 0;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--steel)}
.cb-list.cb-planned{margin-top:6px}
.cb-list.cb-planned li{color:var(--steel)}
.cb-list.cb-planned li::before{background:transparent;border:1px solid var(--steel);width:4px;height:4px;top:6px}
.cb-body{min-width:0}
.cb-prov{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:9px}
.cb-prov b{color:var(--sky);font-weight:600}
.cb-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cb-list li{font-size:12.5px;line-height:1.35;color:var(--body);padding-left:15px;position:relative}
.cb-list li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--steel)}
.foot-certs{margin:22px 0 2px}
.foot-certs .cb-head{margin-bottom:12px}
@media (max-width:820px){.cb-grid{grid-template-columns:1fr}}