/* semiqlassical.tech home — graph-book stylesheet.
   Ported from design/redesign-sept/04-semiqlassical.html. This page no longer
   loads Bootstrap, style.css or custom.css: the other four company pages still
   do their own thing, and none of them share this file. */
:root{
  /* graph-book ground, matching the Toymodel template. The attractor cannot
     live on white — additive blending saturates — so it moves into its own
     dark plate, the way a photographic figure is pasted into a lab notebook. */
  --ground:#ffffff; --panel:#ffffff; --panel-sunk:#eef4f6;
  --zb-gold:#EDAA0E; --zb-orange:#e8852e;
  --gold-ink:#7d5800; --orange-ink:#9c4409;
  --zb-text:#0c3a46; --zb-text-mid:#315f6c; --zb-text-dim:#557b87;
  --rule:rgba(204, 208, 209, 0.16); --rule-2:rgba(12,58,70,.28);
  --ok:#EDAA0E; --warn:#e8852e;
  --mono:"IBM Plex Mono","SF Mono","Fira Code",monospace;
  --sans:"Urbanist","Helvetica Neue",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--zb-text);
  font-family:var(--mono);font-size:13px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
::selection{background:var(--zb-gold);color:#0c3a46}

/* ── plain white ground. No graph rules here: the attractor is the figure on
   this page, and the pad would compete with it. The Toymodel template keeps
   the grid, since its figures sit in panels. ─────────────────────────────── */
/* The attractor draws straight onto the paper. Its canvas is transparent, so
   the graph rules read through the trails. */
.chaos-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}
.site{position:relative;z-index:1}
.shell{max-width:1240px;margin:0 auto;padding:0 40px}
@media(max-width:900px){.shell{padding:0 18px}}

/* ── glyph icons, inherited from the Toymodel template ─────── */
.gl{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:1.7}
.gl.fill{fill:currentColor}

/* ── header ────────────────────────────────────────────────── */
.rule-grad{height:3px;background:linear-gradient(90deg,var(--zb-gold),var(--zb-orange))}
header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.93);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.hdr{display:flex;align-items:center;gap:1.9rem;padding:.7rem 0;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--zb-text-dim)}
.hdr .mark{display:flex;align-items:center;gap:.6rem;font-size:13px;font-weight:700;
  letter-spacing:.18em;color:var(--zb-text);text-decoration:none}
.hdr nav{display:flex;gap:1.4rem;margin-left:auto}
.hdr nav a{text-decoration:none;font-weight:800;color:var(--zb-text-mid);transition:.15s}
.hdr nav a:hover{color:var(--gold-ink)}
/* One nav link no longer earns a row of its own, so the header stays on a
   single line and wraps only when it truly runs out of room. */
@media(max-width:820px){
  .hdr{flex-wrap:wrap;gap:.5rem 1.1rem}
}

/* ── hero ──────────────────────────────────────────────────── */
.hero{padding:5.2rem 0 4.4rem;max-width:min(60ch,100%);position:relative}
/* keeps the copy readable where the network crosses it, and fades out to the
   right so the drawing stays fully visible past the column.

   The mask fades the same scrim out at its bottom edge. Without it the scrim
   ends on a hard line and the network appears all at once along it, which reads
   as a cut rather than a background. A fixed 140px is used rather than a
   percentage so the fade is the same depth whatever the hero's height. */
.hero::before{content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-1.5rem -8rem -1.5rem -3rem;
  background:linear-gradient(100deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.93) 58%,rgba(255,255,255,0) 97%);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 140px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 140px),transparent 100%)}
.kicker{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange-ink);
  display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-bottom:1.5rem}
.kicker s{text-decoration:none;color:var(--zb-text-dim)}
h1{font-family:var(--sans);font-weight:400;font-size:clamp(2.4rem,5.4vw,4.2rem);line-height:1.0;
  letter-spacing:-.035em;margin:0 0 1.3rem;color:#0c3a46}
h1 b{font-weight:900}
.grad-rule{width:60px;height:3px;margin:0 0 1.5rem;background:linear-gradient(90deg,var(--zb-gold),var(--zb-orange))}
.lede{font-family:var(--sans)}
.lede p{margin:0 0 1.05rem;color:#315f6c;font-size:15px;line-height:1.62;font-weight:500}
.lede p.first{color:#0c3a46;font-size:17.5px;line-height:1.5}
.lede b{color:#0c3a46;font-weight:700}
.facts{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.5rem}
.facts span{border:1px solid var(--rule-2);padding:.32rem .62rem;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--zb-text-mid);background:#ffffff}
.actions{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.9rem}
.btn{display:inline-block;white-space:nowrap;
  text-decoration:none;padding:.72rem 1.25rem;border:1px solid var(--rule-2);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--zb-text);transition:.15s;
  background:#ffffff}
.btn:hover{border-color:var(--zb-gold);color:var(--gold-ink)}
.btn.pri{background:linear-gradient(135deg,var(--zb-gold),var(--zb-orange));border-color:transparent;color:#0c3a46}
.btn.pri:hover{color:#0c3a46;filter:brightness(1.08)}

/* ── section heads ─────────────────────────────────────────── */
.sechead{display:flex;align-items:baseline;gap:1rem;margin:0 0 1.2rem;
  border-bottom:1px solid var(--rule-2);padding-bottom:.7rem}
.sechead .n{background:var(--zb-text);color:#ffffff;font-weight:700;font-size:10px;
  letter-spacing:.1em;padding:.15rem .5rem}
.sechead h2{font-family:var(--sans);font-size:1.5rem;font-weight:800;letter-spacing:-.025em;margin:0;color:#0c3a46}
/* a light halo where the attractor's ink crosses text on the bare paper */
.sublede,.sechead h2{
  text-shadow:0 0 12px rgba(255,255,255,.95),0 0 4px rgba(255,255,255,.95)}
.sublede{max-width:70ch;font-family:var(--sans);color:#315f6c;font-size:14px;line-height:1.62;margin:0 0 1.5rem}
.sublede b{color:var(--zb-text);font-weight:700}
section.band{padding:3.4rem 0}

/* ── capability grid ───────────────────────────────────────── */
.caps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
@media(max-width:980px){.caps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.caps{grid-template-columns:1fr}}
.cap-i{background:var(--panel);padding:1.5rem 1.4rem;transition:background .18s}
.cap-i:hover{background:#f1f8f9}
.cap-i .ch{font-size:9.5px;letter-spacing:.2em;color:var(--zb-text-dim);text-transform:uppercase;
  display:flex;align-items:center;gap:.5rem}
.cap-i .ch .gl{color:var(--zb-text-mid);font-size:12px}
.cap-i h3{font-family:var(--sans);font-weight:900;letter-spacing:-.03em;line-height:1.05;
  color:#0c3a46;margin:.75rem 0 .78rem;font-size:clamp(1.15rem,1.9vw,1.5rem);position:relative}
.cap-i h3::after{content:"";position:absolute;left:0;bottom:-.34rem;height:3px;width:0;
  background:linear-gradient(90deg,var(--zb-gold),var(--zb-orange));
  transition:width .34s cubic-bezier(.22,.61,.36,1)}
.cap-i:hover h3::after{width:100%}
.cap-i .u{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-ink)}
.cap-i p{margin:.85rem 0 0;font-family:var(--sans);font-size:13.5px;line-height:1.58;
  color:#315f6c;font-weight:500}

/* ── founders ──────────────────────────────────────────────── */
.founders{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
@media(max-width:860px){.founders{grid-template-columns:1fr}}
.fo{background:var(--panel);padding:1.8rem 1.6rem;display:flex;gap:1.2rem;transition:background .18s}
.fo:hover{background:#f1f8f9}
.fo img{width:82px;height:97px;object-fit:cover;flex:0 0 auto;
  border:1px solid var(--rule-2);filter:grayscale(1) contrast(1.05)}
.fo:hover img{filter:none}
.fo .who{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--zb-text-dim)}
.fo h3{font-family:var(--sans);font-weight:900;font-size:1.32rem;letter-spacing:-.025em;
  color:#0c3a46;margin:.5rem 0 .55rem;position:relative}
.fo h3::after{content:"";position:absolute;left:0;bottom:-.3rem;height:2px;width:0;
  background:linear-gradient(90deg,var(--zb-gold),var(--zb-orange));
  transition:width .34s cubic-bezier(.22,.61,.36,1)}
.fo:hover h3::after{width:100%}
/* Affiliation: a step below the name in size and weight, a step lighter in
   ink, so it reads as a subtitle rather than a second heading. */
.fo .affil{font-family:var(--sans);font-weight:700;font-size:1.02rem;letter-spacing:-.015em;
  color:var(--zb-text-mid);margin:-.25rem 0 .45rem}
.fo .role{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange-ink);margin-bottom:.9rem}
.fo p{margin:0;font-family:var(--sans);font-size:13.5px;line-height:1.58;color:#315f6c;font-weight:500}
.fo .links{margin-top:.9rem;display:flex;gap:.45rem}
.fo .links a{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;
  border:1px solid var(--rule-2);color:var(--zb-text-mid);text-decoration:none;transition:.15s}
.fo .links a:hover{color:var(--gold-ink);border-color:var(--zb-gold)}
.fo .links svg{width:13px;height:13px;fill:currentColor}

/* ── contact ───────────────────────────────────────────────── */
.contact{display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.contact > div{background:var(--panel);padding:2.1rem}
.contact h3{font-family:var(--sans);font-weight:400;font-size:clamp(1.5rem,2.8vw,2.1rem);
  letter-spacing:-.03em;margin:.9rem 0;color:#0c3a46;line-height:1.08}
.contact h3 b{font-weight:900}
.contact p{margin:0 0 1.5rem;font-family:var(--sans);color:var(--zb-text-mid);font-size:14px;
  line-height:1.6;max-width:44ch}

/* Opaque, so the attractor stops at the footer rule instead of running under
   the closing lines. Full bleed: the ground covers the window, the shell
   inside it keeps the text on measure. */
footer{background:var(--panel);position:relative;z-index:1;
  border-top:1px solid var(--rule-2);padding:2.4rem 0 3.2rem;margin-top:3.4rem;
  font-size:11px;color:var(--zb-text-dim);line-height:2}
footer .cols{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;margin-bottom:1.6rem}
footer a{text-decoration:none;color:var(--zb-text-mid);text-transform:uppercase;letter-spacing:.1em;font-size:12.5px}
footer a:hover{color:var(--gold-ink)}
footer .sig{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;letter-spacing:.1em;font-size:12px;font-weight:600;
  border-top:1px solid var(--rule);padding-top:1.2rem}
@media(prefers-reduced-motion:reduce){.chaos-canvas{display:none}}

/* ── production additions, not in the mock ─────────────────── */

/* Keyboard users get a way past the header. */
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--zb-text);color:#fff;
  padding:.6rem 1rem;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.skip:focus{left:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--zb-gold);outline-offset:2px}

/* The real mark. img/logo-small.png is the orbit glyph on its own, already gold
   on a light ground, so it sits beside the letterspaced wordmark the way the
   Toymodel pages pair a glyph with their name. The full lockup in img/logo.png
   carries its own wordmark and would say the name twice here. */
.hdr .mark img.logomark{flex:0 0 auto;width:27px;height:27px;display:block}

/* Copy-to-clipboard control beside the address, carried over from the old
   footer so the affordance is not lost in the redesign. */
.copy-btn{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;
  border:1px solid var(--rule-2);background:#fff;color:var(--zb-text-mid);cursor:pointer;
  font:inherit;font-size:11px;padding:0;transition:.15s}
.copy-btn:hover{color:var(--gold-ink);border-color:var(--zb-gold)}
.copy-btn[data-copied="true"]{color:var(--gold-ink);border-color:var(--zb-gold)}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The contact rows hold a label, a value and sometimes a button. */

/* ── narrow screens ────────────────────────────────────────── */
@media(max-width:700px){
  .hero{padding:3.4rem 0 3rem}
  /* the halo reached 8rem past the column, which pushed the page sideways */
  .hero::before{inset:-1rem -1.2rem}
  /* Side by side, the second button has to wrap; give each its own line. */
  .actions{flex-direction:column;align-items:flex-start}
  .shell{padding:0 18px}
  section.band{padding:2.4rem 0}
  .sechead{flex-wrap:wrap;gap:.5rem .9rem}
  .panel > .cap{flex-wrap:wrap;gap:.4rem .8rem}
  .panel > .cap .r{margin-left:0}
  .fo{flex-direction:column}
  .fo img{width:72px;height:85px}
  footer .sig{gap:.4rem .9rem}
}



/* The founders intro sat on bare paper, where the attractor crosses it. It now
   takes the same opaque ground as the cards below, so no halo is needed. */
.introcard{background:var(--panel);border:1px solid var(--rule);padding:1.5rem 1.6rem;margin:0 0 1.5rem}
.introcard .sublede{margin:0;max-width:none;text-shadow:none}

/* The signature row sets its own size, so its links follow it rather than the
   uppercase nav size above. */
footer .sig a{font-size:12px;text-transform:none;letter-spacing:0}
footer .sig .mailrow{display:inline-flex;align-items:center;gap:.45rem}