/* ---------------------------------------------------------------------------
   TechEnsemble Solutions — one stylesheet, no build step, no external request.

   Built to the comps in /Design (Home, About, Services, How We work, Contact),
   with three deliberate departures, each for a reason that outlasts the comp:

   1. NO TAILWIND. The comps pull it from a CDN. This site fetches nothing from
      anybody — no framework, no font, no icon set. A visitor's browser talks to
      this host and nowhere else, and a test fails on any absolute URL that is
      not ours. That promise is worth more than the convenience.
   2. NO GOOGLE FONT. The comps use Plus Jakarta Sans over Google's CDN. Same
      reason, and it is a blocking request in the critical path on a phone. The
      stack below is what is already on the machine.
   3. OUR BLUE, NOT THE COMP'S. The comps use #38BDF8. The brand blue measured
      off the supplied logo is #38B6FF — 8,149 pixels of it. Close enough to
      mistake, far enough to see beside the logo. Brand wins.

   Contrast, computed rather than assumed — tests/test_site.py recomputes it.
   The worst ground on the site is a card (white 14%) over the lit top of the
   sky, which composites to #334263 — every value below is measured against it,
   not against the darkest patch where everything passes easily:
     #ffffff on #334263 ... 10.00:1   headings
     #c3cfe2 on #334263 .... 6.35:1   body
     #b4c3d6 on #334263 .... 5.58:1   muted, the labels and the asides
     #7fd2ff on #334263 .... 5.98:1   the accent AS TYPE
     #38b6ff on #334263 .... 4.43:1   FAIL — which is why the brand blue fills
                                      shapes here and a lighter tint carries words
     #000000 on #38b6ff .... 9.30:1   every button, black on blue
     #ffffff on #38b6ff .... 2.26:1   FAIL — which is why no button is white on blue

   Sizes are measured too, in a browser, by tools/browser-audit.py. Nothing that
   carries a sentence is under 14px, no line runs past about 75 characters, and
   nothing a finger has to hit is under 24px. Those three were all failing on
   2026-09-06; the complaint was that the text hurt to read, and it was right.
   --------------------------------------------------------------------------- */

:root{
  --blue:#38b6ff;          /* the brand blue. Surfaces: buttons, nodes, dots, rails */
  --blue-text:#7fd2ff;     /* the same hue as type. #38b6ff on a lit card is 4.43:1 */
  --blue-deep:#0f7ec0;
  --navy:#0d1a42;

  /* The ground is the holding page's, value for value — #0a1228 lit from above
     rather than #040915 flat. The site was three shades darker than the page it
     is supposed to continue, which is most of why it read as a different, colder
     thing. */
  --bg:#0a1228;
  --bg-2:#0d1730;     /* an alternating band, lifted rather than sunk */
  --bg-3:#070f22;     /* the footer */
  --surface:#12234a;

  /* Glass, not slate. White at 14% over a lit ground reads as a lifted panel;
     a dark fill over a dark ground reads as a hole cut in it. */
  --card:radial-gradient(130% 115% at 0% 0%, rgba(255,255,255,.14),
         rgba(255,255,255,.07) 42%, rgba(255,255,255,.05));
  --card-2:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.18);

  --head:#ffffff;
  --text:#c3cfe2;
  --muted:#b4c3d6;   /* lifted from #a7b8cf: it fell to 3.99:1 inside a console */

  --sans:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,
         "Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono","Liberation Mono",monospace;

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem; --s6:2rem;
  --s7:3rem; --s8:4.5rem; --s9:6.5rem;
  --shell:78rem;

  --glow-card:0 20px 40px -15px rgba(2,6,23,.75), inset 0 1px 0 rgba(255,255,255,.08);
  --glow-cyan:0 0 35px -5px rgba(56,182,255,.4);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--bg); color:var(--text);
  font:17px/1.75 var(--sans); overflow-x:hidden; text-rendering:optimizeLegibility}
img{display:block; max-width:100%; height:auto}

.shell{position:relative; z-index:2; max-width:var(--shell); margin:0 auto;
  padding:0 var(--s5)}
.skip{position:absolute; left:-9999px; background:var(--blue); color:#000000;
  padding:.6rem 1rem; font-weight:700; border-radius:8px; text-decoration:none}
.skip:focus{left:var(--s4); top:var(--s4); z-index:60}
a:focus,button:focus{outline:2px solid var(--blue); outline-offset:3px}
a:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue); outline-offset:3px}

/* --- the ground ------------------------------------------------------------ */
.sky{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:radial-gradient(120% 80% at 50% -10%, #12234a 0%, #0a1228 55%, #060b18 100%)}
.sky i{position:absolute; border-radius:50%; will-change:transform}
.sky .w1{width:60vmax; height:60vmax; left:-16vmax; top:-22vmax;
  background:radial-gradient(circle, rgba(56,182,255,.30), rgba(56,182,255,0) 66%);
  animation:w1 30s ease-in-out infinite}
.sky .w2{width:52vmax; height:52vmax; right:-14vmax; top:4vmax;
  background:radial-gradient(circle, rgba(24,111,172,.42), rgba(24,111,172,0) 66%);
  animation:w2 38s ease-in-out infinite}
.sky .w3{width:46vmax; height:46vmax; left:38%; bottom:-24vmax;
  background:radial-gradient(circle, rgba(56,182,255,.22), rgba(56,182,255,0) 68%);
  animation:w3 34s ease-in-out infinite}
@keyframes w1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(10vw,7vh) scale(1.12)}}
@keyframes w2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-9vw,9vh) scale(1.16)}}
@keyframes w3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vw,-8vh) scale(.92)}}

/* a fine grid, the way a drawing has one under it */
.sky::before{content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 15%, transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 0%, #000 15%, transparent 72%)}

.motifs{position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden}
.motifs svg{position:absolute; fill:none; stroke:#ffffff; stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round; opacity:.07;
  animation:drift 26s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  50%{transform:translate3d(0,-14px,0) rotate(3deg)}}
.m1{width:70px; left:4%;  top:64%; animation-duration:24s}
.m2{width:82px; right:6%; top:15%; animation-duration:30s; animation-delay:-6s}
.m3{width:64px; left:46%; top:7%;  animation-duration:22s; animation-delay:-3s}
.m4{width:74px; right:17%; bottom:10%; animation-duration:28s; animation-delay:-9s}
.m5{width:60px; left:3%;  top:27%; animation-duration:26s; animation-delay:-12s}
.m6{width:76px; right:4%; bottom:33%; animation-duration:32s; animation-delay:-5s}
@media (max-width:900px){.m3,.m5,.m6{display:none}}

/* --- header ---------------------------------------------------------------- */
.head{position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line);
  background:rgba(10,18,40,.85);
  -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%)}
.head .in{display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  max-width:var(--shell); margin:0 auto; padding:var(--s3) var(--s5)}
.head img{width:clamp(150px,18vw,188px)}
.nav{display:flex; align-items:center; gap:var(--s5)}
.nav a{display:inline-block; color:var(--text); text-decoration:none; font-weight:500;
  font-size:.95rem; padding:.4rem 0; border-bottom:2px solid transparent;
  transition:color .2s}
.nav a:hover{color:var(--head)}
.nav a[aria-current="page"]{color:var(--head); border-bottom-color:var(--blue)}
.nav .call{border-bottom:0; border-radius:999px; background:var(--blue); color:#000000;
  font-weight:700; font-size:.85rem; padding:.55rem 1.05rem; display:inline-flex;
  align-items:center; gap:.45rem; box-shadow:var(--glow-cyan); transition:box-shadow .2s}
.nav .call:hover{box-shadow:0 0 46px -4px rgba(56,182,255,.65)}
.nav .call svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2}
.burger{display:none; background:rgba(255,255,255,.05); border:1px solid var(--line-2);
  border-radius:999px; padding:.5rem .9rem; font:inherit; font-weight:600;
  color:var(--head); cursor:pointer}

/* --- type ------------------------------------------------------------------ */
h1,h2,h3,h4{color:var(--head); font-weight:700; letter-spacing:-.015em; line-height:1.18;
  margin:0 0 var(--s4)}
h1{font-size:clamp(2.1rem,4.2vw,3.1rem); letter-spacing:-.022em; line-height:1.12}
h2{font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.2}
h3{font-size:1.15rem; letter-spacing:-.01em; line-height:1.35}
h4{font-size:1.02rem; letter-spacing:-.005em; line-height:1.4}
p{margin:0 0 var(--s4); max-width:54ch}   /* ~75 characters, measured */
p:last-child{margin-bottom:0}
strong,b{color:var(--head); font-weight:600}
.lead{font-size:1.14rem; line-height:1.65; color:var(--text); max-width:56ch}
.muted{color:var(--muted)}
.accent{color:var(--blue-text)}

/* the monospace micro-label that runs through the whole design */
.tag{display:inline-flex; align-items:center; gap:.55rem; margin:0 0 var(--s4);
  font:600 .76rem/1.4 var(--mono); letter-spacing:.11em; text-transform:uppercase;
  color:var(--blue-text)}
.tag::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--blue);
  flex:none; box-shadow:0 0 10px rgba(56,182,255,.9)}
.tag--plain::before{display:none}
/* a label: two or three words, read at a glance */
.mono{font:500 .88rem/1.6 var(--mono); letter-spacing:.035em; color:var(--text)}
.mono--dim{color:var(--muted)}
/* an aside: the same voice, but a whole sentence, so it is sized to be read
   and the tracking comes off */
.note{font:400 .92rem/1.75 var(--mono); letter-spacing:0; color:var(--muted);
  max-width:62ch}

/* --- sections -------------------------------------------------------------- */
/* The sky is fixed, so on a long page only the top of the document is lit and
   everything below it falls into the flat base — which is exactly why the site
   read darker than the holding page it continues. Each section carries a little
   light of its own, alternating sides so the page does not stripe. (The comps do
   the same thing: glow-radial-hero and glow-radial-bottom.) */
.section{padding:var(--s9) 0; position:relative; isolation:isolate}
.section::before{content:""; position:absolute; inset:-10% 0; z-index:-1;
  pointer-events:none;
  background:radial-gradient(60% 55% at 18% 30%, rgba(56,182,255,.10), transparent 70%)}
.section:nth-of-type(even)::before{
  background:radial-gradient(60% 55% at 82% 40%, rgba(24,111,172,.14), transparent 70%)}
.section--alt{position:relative}
.section--tight{padding:var(--s8) 0}
.section--alt{background:var(--bg-2); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.35)}
.head-block{max-width:60ch; margin:0 0 var(--s7)}
.head-block>*:last-child{margin-bottom:0}
/* heading on the left, the sentence that qualifies it on the right */
.head-split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--s6) var(--s7); align-items:end; margin:0 0 var(--s7)}
.head-split h2{margin:0}
.head-split p{margin:0; max-width:52ch}
@media (max-width:900px){.head-split{grid-template-columns:1fr; align-items:start}}

/* --- hero ------------------------------------------------------------------ */
.hero{padding:var(--s8) 0 var(--s9); position:relative; isolation:isolate}
.hero::before{content:""; position:absolute; inset:-20% 0 -10%; z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle at 68% 30%, rgba(56,182,255,.16) 0%,
             rgba(15,126,192,.06) 38%, transparent 70%)}
.hero--split>.shell{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:var(--s7); align-items:center}
.hero h1{margin-bottom:var(--s5)}
.hero .bar{width:64px; height:3px; border:0; border-radius:2px; margin:0 0 var(--s5);
  background:linear-gradient(90deg,var(--blue),rgba(56,182,255,0))}
.hero p{max-width:56ch}
@media (max-width:900px){.hero--split>.shell{grid-template-columns:1fr; gap:var(--s6)}}

/* --- buttons --------------------------------------------------------------- */
.btns{display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s6)}
.btn{position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:.55rem;
  text-decoration:none; font:inherit; font-weight:700; font-size:.92rem; cursor:pointer;
  padding:.85rem 1.5rem; border-radius:999px; border:1px solid transparent;
  background:var(--blue); color:#000000; box-shadow:var(--glow-cyan);
  transition:box-shadow .25s ease, background .25s ease}
.btn:hover{box-shadow:0 0 46px -4px rgba(56,182,255,.7)}
.btn::after{content:""; position:absolute; inset:0; transform:translateX(-130%);
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%)}
.btn:hover::after{transition:transform .8s ease; transform:translateX(130%)}
.btn--ghost{background:rgba(255,255,255,.04); color:var(--head);
  border-color:var(--line-2); box-shadow:none}
.btn--ghost:hover{background:rgba(56,182,255,.10); border-color:rgba(56,182,255,.45);
  box-shadow:none}
.btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; flex:none}
.link{display:inline-flex; align-items:center; gap:.4rem; color:var(--blue-text);
  text-decoration:none; font:600 .82rem/1.7 var(--mono); letter-spacing:.07em;
  text-transform:uppercase; padding:.2rem 0}
.link:hover{text-decoration:underline}
.link::after{content:"\2192"; transition:transform .2s}
.link:hover::after{transform:translateX(3px)}

/* --- the card, which is most of the design --------------------------------- */
.card{--card-pad:var(--s6);
  position:relative; overflow:hidden; border-radius:16px; padding:var(--card-pad);
  background:var(--card); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:var(--glow-card);
  transition:border-color .3s ease, box-shadow .3s ease}
.card:hover{border-color:rgba(56,182,255,.35);
  box-shadow:var(--glow-card), 0 0 0 1px rgba(56,182,255,.18), var(--glow-cyan)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.console{background:#16203c}
  .head{background:#0a1228}
  .stage .flag{background:#0b162c}
}
.card::before{content:""; position:absolute; left:10%; right:10%; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
.card h3{margin-bottom:var(--s3)}
/* the :not() matters. Without it this rule overrides .mono and .note and the
   label silently becomes body size in a card and stays 11px everywhere else. */
.card p:not(.mono):not(.note){margin-bottom:0; font-size:1rem; max-width:54ch}
.card p{margin-bottom:0}
.card--flat{background:var(--card-2); box-shadow:none}
.card--pad{--card-pad:var(--s5)}

.grid{display:grid; gap:var(--s5)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--split{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:var(--s7)}
@media (max-width:1000px){.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .grid--2,.grid--3,.grid--4,.grid--split{grid-template-columns:1fr}
}

/* a card head: a mono label on the left, a quieter one on the right */
.card-head{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  margin:0 0 var(--s4); flex-wrap:wrap}
.card-head .tag{margin:0}
.chip{display:inline-flex; align-items:center; padding:.34rem .62rem; border-radius:6px;
  background:rgba(56,182,255,.10); border:1px solid rgba(56,182,255,.22);
  font:600 .72rem/1.3 var(--mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--blue-text)}
.chip--plain{background:rgba(255,255,255,.04); border-color:var(--line-2); color:var(--muted)}

.pills{list-style:none; margin:var(--s5) 0 0; padding:0; display:flex; flex-wrap:wrap;
  gap:.4rem}
.pills li{font-size:.86rem; color:var(--text); padding:.42rem .8rem; border-radius:999px;
  background:rgba(255,255,255,.04); border:1px solid var(--line-2); cursor:default;
  transition:background .3s ease, border-color .3s ease, transform .3s ease}
.pills li:hover{background:rgba(56,182,255,.14); border-color:rgba(56,182,255,.5);
  transform:translateY(-2px)}

/* --- the numbered step ----------------------------------------------------- */
.step b{display:block; font:800 2.4rem/1 var(--sans); letter-spacing:-.05em;
  color:var(--blue-text); margin:0 0 var(--s3)}
.step hr{border:0; border-top:1px solid var(--line); margin:var(--s5) 0 var(--s3)}
.step .mono{display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap}

/* --- a checked row --------------------------------------------------------- */
.checks{list-style:none; margin:0; padding:0; display:grid; gap:var(--s3)}
.checks li{display:flex; gap:var(--s4); align-items:flex-start; padding:var(--s5);
  border-radius:14px; background:var(--card-2); border:1px solid var(--line);
  transition:border-color .3s ease, background .3s ease}
.checks li:hover{border-color:rgba(56,182,255,.3); background:rgba(15,27,51,.7)}
.checks li::before{content:""; flex:none; width:22px; height:22px; margin-top:.15em;
  border-radius:50%; background-color:rgba(56,182,255,.14);
  border:1px solid rgba(56,182,255,.45);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338b6ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:13px; background-repeat:no-repeat; background-position:center}
.checks p{margin:0; font-size:1rem; max-width:54ch}
.checks h3{margin:0 0 .35rem; font-size:1.05rem}

/* --- the console strip ----------------------------------------------------- */
.console{position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  background:var(--card); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:var(--glow-card)}
.console-bar{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:.7rem var(--s5); background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--line); flex-wrap:wrap}
.console-bar .mono,.console-foot .mono{margin:0}
.console-body{padding:var(--s6) var(--s5)}
.console-foot{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:.7rem var(--s5); border-top:1px solid var(--line); flex-wrap:wrap;
  background:rgba(255,255,255,.02)}
.channels{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5)}
.channels>div{padding-right:var(--s5); border-right:1px solid var(--line)}
.channels>div:last-child{border-right:0; padding-right:0}
.channels .num{display:inline-block; font:700 1.15rem/1.55 var(--mono); letter-spacing:-.01em;
  color:var(--head); text-decoration:none; padding:.1rem 0}
.channels a.num:hover{color:var(--blue-text)}
.channels .mail{display:inline-block; font:600 .98rem/1.7 var(--mono); color:var(--blue-text);
  text-decoration:none; word-break:break-word; padding:.1rem 0}
.channels .mail:hover{text-decoration:underline}
.channels p{margin:.5rem 0 0; font-size:.95rem; color:var(--muted); max-width:none}
@media (max-width:1000px){
  .channels{grid-template-columns:repeat(2,minmax(0,1fr))}
  .channels>div{border-right:0; padding-right:0}
}
@media (max-width:620px){.channels{grid-template-columns:1fr}}

/* --- the hero instrument --------------------------------------------------- */
.stage{position:relative; display:grid; place-items:center;
  min-height:clamp(280px,34vw,380px)}
.stage .ring{position:absolute; width:min(94%,400px); aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(56,182,255,.18)}
.stage .ring--2{width:min(78%,330px); border-style:dashed;
  border-color:rgba(56,182,255,.14); animation:spin 60s linear infinite}
.stage .arc{position:absolute; width:min(86%,364px); aspect-ratio:1; border-radius:50%;
  background:conic-gradient(from 200deg, transparent, var(--blue) 22%, transparent 44%);
  -webkit-mask:radial-gradient(circle, transparent 68%, #000 69%);
  mask:radial-gradient(circle, transparent 68%, #000 69%);
  filter:drop-shadow(0 0 18px rgba(56,182,255,.5));
  animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.stage .disc{position:relative; width:min(66%,272px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; border:1px solid rgba(56,182,255,.20);
  background:radial-gradient(circle at 36% 28%, rgba(56,182,255,.16), rgba(4,9,21,.92) 66%);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.10)}
.stage .disc img{width:52%; animation:breathe 6s ease-in-out infinite;
  filter:drop-shadow(0 0 18px rgba(56,182,255,.35))}
@keyframes breathe{0%,100%{opacity:.95; transform:scale(1)}50%{opacity:.75; transform:scale(1.03)}}
.stage .flag{position:absolute; display:inline-flex; align-items:center; gap:.45rem;
  padding:.45rem .8rem; border-radius:999px; background:rgba(11,22,44,.92);
  border:1px solid var(--line-2); -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px); font:600 .8rem/1.3 var(--sans); color:var(--head);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.9); animation:bob 7s ease-in-out infinite}
.stage .flag i{width:7px; height:7px; border-radius:50%; background:var(--blue); flex:none;
  box-shadow:0 0 8px rgba(56,182,255,.9)}
.stage .flag--a{top:6%; left:2%}
.stage .flag--b{bottom:10%; right:0; animation-delay:1.4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* the terminal card, used on How we work */
.terminal .dots{display:flex; gap:.35rem}
.terminal .dots i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18)}
.terminal .dots i:first-child{background:rgba(255,99,99,.6)}
.terminal .dots i:nth-child(2){background:rgba(255,199,89,.6)}
.terminal .dots i:nth-child(3){background:rgba(96,220,140,.6)}
.terminal .screen{display:grid; place-items:center; gap:var(--s4); padding:var(--s8) var(--s5);
  text-align:center;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:18px 18px}
.terminal .screen p{max-width:34ch}
.terminal .badge{width:74px; height:74px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(56,182,255,.35); background:rgba(56,182,255,.08);
  box-shadow:0 0 30px -6px rgba(56,182,255,.5); animation:breathe 6s ease-in-out infinite}
.terminal .badge svg{width:30px; height:30px; stroke:var(--blue); fill:none; stroke-width:2}

/* --- the services timeline ------------------------------------------------
   A rail down the left with a node beside every service, and the one you are
   reading lights up. The rail is drawn once on the wrapper rather than per item,
   so it is a continuous line and not eight stacked segments with joins in it. */
.rail{position:relative; padding-left:0}
.rail::before{content:""; position:absolute; left:19px; top:12px; bottom:12px; width:2px;
  border-radius:2px;
  background:linear-gradient(180deg, rgba(56,182,255,.10) 0%, rgba(56,182,255,.45) 50%,
             rgba(56,182,255,.10) 100%)}
.rail-item{position:relative; display:grid; grid-template-columns:64px minmax(0,1fr);
  gap:var(--s5); align-items:start; padding:var(--s5) 0}
.rail-node{position:relative; z-index:2; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; font:700 .84rem/1 var(--mono); color:var(--muted);
  background:var(--bg); border:1px solid var(--line-2);
  transition:background .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease}
.rail-item.is-on .rail-node{background:var(--blue); color:#000; border-color:#fff;
  box-shadow:0 0 16px rgba(56,182,255,.9), 0 0 30px rgba(56,182,255,.5)}
.rail-item.is-on .card{border-color:rgba(56,182,255,.4);
  box-shadow:var(--glow-card), 0 0 30px rgba(56,182,255,.10),
             inset 0 0 15px rgba(56,182,255,.04)}
.rail-body{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:var(--s6)}
@media (max-width:1000px){.rail-body{grid-template-columns:1fr; gap:var(--s5)}}
/* On a phone the rail was costing 48px of column, the card 64px of padding and
   every tick its own box on top of that -- 144px of the 390 left for words, so
   the copy came out four words to a line. Desktop is untouched; below 620px the
   node sits on the line instead of in a column of its own, and the tick rows
   stop being boxes inside a box. */
@media (max-width:620px){
  .rail::before{left:12px}
  .rail-item{grid-template-columns:minmax(0,1fr); gap:0; padding-left:30px}
  .rail-node{position:absolute; left:-1px; top:var(--s5);
    width:26px; height:26px; font-size:.62rem}
  .card{--card-pad:var(--s5)}
  .checks{gap:0}
  .checks li{padding:var(--s3) 0; background:none; border:0; border-radius:0;
    gap:var(--s3); align-items:flex-start}
  .checks li+li{border-top:1px solid var(--line)}
  .checks li:hover{background:none; border-color:var(--line)}
  .checks li::before{width:19px; height:19px; background-size:11px; margin-top:.2em}
  .card-head{gap:var(--s2)}
  /* .card clips its own corners, so at 320px the terminal's generous padding
     pushed 8px of the caption out of the box and it simply vanished. */
  .terminal .screen{padding:var(--s6) var(--s4)}
}

/* --- the ticker ------------------------------------------------------------ */
.ticker{position:relative; z-index:2; overflow:hidden; padding:var(--s4) 0;
  background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.ticker .row{display:flex; width:max-content; animation:slide 40s linear infinite}
.ticker:hover .row{animation-play-state:paused}
.ticker span{display:flex; align-items:center; gap:var(--s5); padding-right:var(--s5);
  white-space:nowrap; font:600 .86rem/1.6 var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--text)}
.ticker span::after{content:""; width:7px; height:7px; flex:none; transform:rotate(45deg);
  background:var(--blue); box-shadow:0 0 10px rgba(56,182,255,.85)}
@keyframes slide{to{transform:translateX(-50%)}}

/* --- reveal on scroll ------------------------------------------------------ */
.rv{opacity:0; transform:translateY(18px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1; transform:none}
.rv-2{transition-delay:.08s}.rv-3{transition-delay:.16s}.rv-4{transition-delay:.24s}

/* --- footer ---------------------------------------------------------------- */
.foot{position:relative; z-index:2; background:var(--bg-3); border-top:1px solid var(--line);
  padding:var(--s8) 0 var(--s6);
  background-image:radial-gradient(ellipse at 50% 100%, rgba(15,126,192,.10) 0%, transparent 60%)}
.foot img{width:186px; margin-bottom:var(--s5)}
.foot h3{color:var(--head); font:700 .78rem/1.4 var(--mono); letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:var(--s4)}
.foot a{color:var(--text); text-decoration:none}
.foot ul a{display:inline-block; padding:.22rem 0}
.foot a:hover{color:var(--blue-text)}
.foot p{color:var(--muted); font-size:.95rem; max-width:34ch}
.foot .cols{display:grid; gap:var(--s6); grid-template-columns:1.6fr 1fr 1fr 1.2fr}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s2); font-size:.95rem}
.foot li{min-height:24px}
.foot .base{border-top:1px solid var(--line); margin-top:var(--s7); padding-top:var(--s5);
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap;
  font:500 .82rem/1.7 var(--mono); letter-spacing:.04em; color:var(--muted)}
@media (max-width:900px){.foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.foot .cols{grid-template-columns:1fr}}

/* --- responsive ------------------------------------------------------------ */
@media (max-width:900px){
  .burger{display:inline-block}
  .nav{position:absolute; left:0; right:0; top:100%; background:rgba(10,18,40,.98);
    border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch;
    gap:0; padding:var(--s3) var(--s5) var(--s5); display:none}
  .nav[data-open="true"]{display:flex}
  .nav a{padding:.75rem 0; border-bottom:1px solid var(--line)}
  .nav .call{margin-top:var(--s3); justify-content:center}
  .section{padding:var(--s8) 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  .rv{opacity:1; transform:none}
}

/* --- on paper --------------------------------------------------------------
   Somebody will print the contact page, or save it to PDF to send on. Without
   this they get white text on a white page and a bill for the ink. */
@media print{
  .sky,.motifs,.ticker,.burger,.skip,.stage,.head .call{display:none !important}
  body{background:#ffffff; color:#111111; font-size:11pt}
  .head{position:static; background:none; border-bottom:1px solid #cccccc;
    -webkit-backdrop-filter:none; backdrop-filter:none}
  h1,h2,h3,h4,strong,b,.accent,.channels .num,.channels .mail{color:#000000}
  .tag,.mono,.note,.muted,.foot p,.foot .base{color:#333333}
  .card,.console,.checks li,.section--alt,.foot{background:#ffffff !important;
    border-color:#cccccc; box-shadow:none; -webkit-backdrop-filter:none;
    backdrop-filter:none}
  .card::before,.section::before,.hero::before{display:none}
  .section,.hero{padding:1.2rem 0}
  a{color:#000000; text-decoration:underline}
  /* a printed link that does not say where it goes is a dead end */
  .foot a[href^="http"]::after,.channels a::after{content:" (" attr(href) ")";
    font-size:9pt; word-break:break-all}
  .rv{opacity:1 !important; transform:none !important}
}