/* ============================================================================
   codeqraft — shared design system  ·  "engineering drawing sheet"
   Doss-accurate: near-black ground · off-white ink · mono annotations. Dark-only.
   System fonts only (CSP font-src 'self'). All motion is line-based, reduced-motion
   safe, and progressive-enhancement gated on html.anim (no-JS shows everything).
   ============================================================================ */

/* ---- tokens -------------------------------------------------------------- */
:root {
  --paper:#0A0A0A; --surface:#151514; --raise:#1C1C1A;
  --ink:#E0DDD8; --ink-2:#A6A199; --ink-3:#6F6B63;
  --line:#262523; --line-2:#35332F;
  --accent:#E0DDD8; --accent-ink:#0A0A0A; --accent-soft:#1E1E1C;
  --btn:#E0DDD8; --btn-ink:#0A0A0A;
  --shadow-sm:0 1px 0 var(--line);
  --shadow:0 1px 2px -1px rgba(0,0,0,.6), 0 30px 56px -34px rgba(0,0,0,.8);
  --grid:rgba(224,221,216,.05);
  --sans:ui-sans-serif,-apple-system,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}

/* ---- base ---------------------------------------------------------------- */
* { 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(--paper); color: var(--ink); font-family: var(--sans);
  font-size: 17.5px; line-height: 1.62; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; font-feature-settings: "kern","liga","cv11";
  overflow-x: hidden;
}
.mono { font-family: var(--mono); }
::selection { background: var(--accent); color: var(--accent-ink); }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
img, svg { max-width: 100%; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 clamp(22px, 5.2vw, 64px); }
.measure { max-width: 56ch; }

h1,h2,h3 { margin: 0; font-weight: 600; letter-spacing: -.025em; line-height: 1.03; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 4.9rem); letter-spacing: -.035em; font-weight: 620; }
h2 { font-size: clamp(1.85rem, 3.6vw, 3rem); }
h3 { font-size: 1.16rem; letter-spacing: -.015em; }
p { margin: 0; }

/* mono index label (the drawing-sheet annotation voice) */
.idx { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
       color: var(--ink-3); display: inline-flex; align-items: center; gap: .8em; }
.idx .n { color: var(--accent); }
.idx::before { content:""; width: 22px; height: 1px; background: var(--line-2); }

/* ---- scroll progress hairline ------------------------------------------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; background: transparent; }
.progress > i { display: block; height: 100%; background: var(--accent); transform: scaleX(var(--sp,0)); transform-origin: left; }
html:not(.anim) .progress { display: none; }

/* ---- top bar / nav ------------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 84%, transparent);
          backdrop-filter: saturate(120%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.topbar.stuck { border-bottom-color: var(--line); }
.bar { display: flex; align-items: center; gap: 20px; height: 66px; }
.brand { display: inline-flex; align-items: baseline; gap: 9px; font-weight: 640; letter-spacing: -.03em; font-size: 1.18rem; }
.brand .sq { width: 10px; height: 10px; border-radius: 2px; background: var(--accent); transform: translateY(1px); position: relative; }
.brand .tag { font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
nav.main { margin-left: auto; display: flex; align-items: center; gap: 26px; }
nav.main a.lnk { color: var(--ink-2); font-size: .93rem; position: relative; padding: 4px 0; transition: color .15s; }
nav.main a.lnk::after { content:""; position:absolute; left:0; right:100%; bottom:-1px; height:1.5px; background: var(--accent); transition: right .28s cubic-bezier(.2,.7,.2,1); }
nav.main a.lnk:hover { color: var(--ink); }
nav.main a.lnk:hover::after, nav.main a.lnk.here::after { right: 0; }
nav.main a.lnk.here { color: var(--ink); }
.lang { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; color: var(--ink-3); border-left: 1px solid var(--line); padding-left: 22px; }
.lang a:hover { color: var(--ink); }
.btn { display: inline-flex; align-items: center; gap: 8px; background: var(--btn); color: var(--btn-ink);
        font-weight: 560; font-size: .92rem; padding: 10px 17px; border-radius: 8px; border: 1px solid transparent;
        transition: transform .15s ease, opacity .15s ease, box-shadow .2s ease; }
.btn:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 16px -10px rgba(26,24,19,.5); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); box-shadow: none; }
.btn.ghost:hover { background: var(--surface); opacity: 1; }
@media (max-width: 820px) {
  nav.main { gap: 15px; }
  nav.main a.lnk[data-opt="1"], .lang { display: none; }
  nav.main a.lnk { font-size: .85rem; }
  .btn { padding: 9px 13px; font-size: .84rem; }
  .brand .tag { display: none; }
}
@media (max-width: 420px) { nav.main a.lnk { display: none; } }

/* ---- hero ---------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero::before { content:""; position: absolute; inset: -2px 0 0 0;
  background: linear-gradient(var(--grid) 1px, transparent 1px) 0 0/100% 38px,
              linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/38px 100%;
  mask-image: radial-gradient(120% 80% at 78% 8%, #000 0%, transparent 62%);
  transform: translateY(var(--hero-shift,0)); will-change: transform; pointer-events: none; }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px,4vw,56px);
              align-items: center; padding-top: clamp(56px,9vw,112px); padding-bottom: clamp(52px,8vw,96px); }
.hero.solo .wrap { grid-template-columns: 1fr; max-width: 900px; }
.hero h1 { margin-top: 22px; max-width: 13ch; }
.hero.solo h1 { max-width: 15ch; }
.lede { margin-top: 24px; font-size: clamp(1.06rem,1.5vw,1.22rem); color: var(--ink-2); max-width: 46ch; line-height: 1.55; }
.hero.solo .lede { max-width: 54ch; }
.cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn.lg { padding: 13px 22px; font-size: .98rem; border-radius: 9px; }
.lnk-u { color: var(--ink); font-weight: 560; font-size: .98rem; border-bottom: 1.5px solid var(--accent); padding-bottom: 2px; transition: color .15s; }
.lnk-u:hover { color: var(--ink); border-bottom-color: var(--ink); }
.cta .note { color: var(--ink-3); font-size: .85rem; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } .hero-art { order: -1; max-width: 480px; } }

/* hero coordinate strip — a drawing-sheet dimension line under the hero copy */
.coords { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center;
          font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.coords b { color: var(--accent); font-weight: 600; }
.coords .sep { width: 26px; height: 1px; background: var(--line-2); }

/* ---- drawing plate (framed panel with title block) ---------------------- */
.plate, .hero-art, .spec { border: 1px solid var(--line); border-radius: 14px; background: var(--raise); box-shadow: var(--shadow); overflow: hidden; }
.plate-cap, .hero-art .cap, .spec .st { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px;
   border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.hero-art .cap .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; margin-right: 8px; }
.plate-body { padding: clamp(20px,3vw,30px); }
.hero-art svg { display: block; width: 100%; height: auto; padding: 20px clamp(14px,3vw,26px) 26px; }

/* hero circuit art */
.a-lbl { fill: var(--ink-3); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.a-tangle { fill: none; stroke: var(--ink-3); stroke-width: 2.2; stroke-linecap: round; opacity: .8; }
.a-guide { fill: none; stroke: var(--line-2); stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.a-wire { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: square; }
.a-node { fill: var(--raise); stroke: var(--ink); stroke-width: 2.4; }
.a-node.io { fill: var(--accent-soft); stroke: var(--accent); }
.a-merge { fill: var(--accent); }
.a-pulse { fill: var(--accent); opacity: 0; offset-path: path("M280 131 H452"); offset-distance: 0%; }

/* ---- section scaffolding ------------------------------------------------- */
section { border-bottom: 1px solid var(--line); }
.sec { padding: clamp(60px,9vw,116px) 0; }
.sec.tight { padding: clamp(48px,7vw,88px) 0; }
.head { display: grid; gap: 18px; margin-bottom: clamp(34px,5vw,58px); }
.head h2 { max-width: 18ch; }
.head .measure { color: var(--ink-2); font-size: 1.05rem; }
.section-accent { background: var(--surface); }

/* ---- problem list (.sym) ------------------------------------------------- */
.sym { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sym li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; transition: padding-left .3s ease; }
.sym li:hover { padding-left: 8px; }
.sym .k { font-family: var(--mono); color: var(--accent); font-size: .8rem; }
.sym strong { font-weight: 600; }
.sym .sub { display: block; color: var(--ink-2); margin-top: 4px; font-size: .99rem; }

/* ---- steps grid (compact 4-up) ------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--line);
         border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.step { background: var(--surface); padding: 26px clamp(18px,1.8vw,24px) 30px; transition: background .3s ease; }
.step:hover { background: var(--raise); }
.step .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.step .no { font-family: var(--mono); font-size: 1.5rem; font-weight: 500; color: var(--ink-3); letter-spacing: -.02em; }
.step .verb { font-family: var(--mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.step h3 { margin-bottom: 9px; }
.step p { color: var(--ink-2); font-size: .96rem; line-height: 1.55; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---- blueprint spine (the signature scroll-drawn process) --------------- */
.flow { --railcol: clamp(54px, 7vw, 104px); position: relative; }
.flow-track { position: absolute; left: calc(var(--railcol)/2 - 1px); top: 18px; bottom: 18px; width: 2px;
              background: var(--line); border-radius: 2px; overflow: hidden; }
.flow-track > i { display: block; width: 100%; height: 100%; background: var(--accent);
                  transform: scaleY(var(--spine,0)); transform-origin: top center; }
html:not(.anim) .flow-track > i { transform: none; }
.fsteps { list-style: none; margin: 0; padding: 0; }
.fstep { display: grid; grid-template-columns: var(--railcol) 1fr; gap: clamp(16px,3vw,44px);
         padding: clamp(26px,3.6vw,46px) 0; border-bottom: 1px solid var(--line); align-items: start; }
.fstep:last-child { border-bottom: none; padding-bottom: 6px; }
.fmark { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fdot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line-2); background: var(--paper);
        position: relative; z-index: 1; transition: border-color .5s ease, background .5s ease, box-shadow .5s ease; }
.fstep.show .fdot, html:not(.anim) .fdot { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.fno { font-family: var(--mono); font-size: clamp(1.15rem,2vw,1.7rem); color: var(--ink-3); letter-spacing: -.02em; }
.fbody .verb { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.fbody h3 { font-size: clamp(1.24rem,2.4vw,1.7rem); letter-spacing: -.02em; margin: 10px 0 12px; }
.fbody p { color: var(--ink-2); max-width: 60ch; }
.fbody .p2 { margin-top: 12px; font-size: .97rem; }
@media (max-width: 560px) { .flow { --railcol: 40px; } .fno { display: none; } .fstep { gap: 16px; } }

/* ---- split (delivery engine + spec) ------------------------------------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px,4vw,64px); align-items: start; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.spec dl { margin: 0; }
.spec .r { display: grid; grid-template-columns: 8.5rem 1fr; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--line); align-items: baseline; }
.spec .r:last-child { border-bottom: none; }
.spec dt { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.spec dd { margin: 0; font-weight: 560; font-size: 1rem; }
.spec dd em { font-style: normal; color: var(--ink); font-weight: 600; }

/* ---- cards (outcomes / altitudes) --------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } }
.oc { border: 1px solid var(--line); border-radius: 14px; padding: 26px 26px 28px; background: var(--surface); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.oc:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.oc .t { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 1.04rem; margin-bottom: 9px; letter-spacing: -.01em; }
.oc .t .m { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); flex: none; }
.oc .tier { margin-left: auto; font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line-2); border-radius: 5px; padding: 3px 7px; }
.oc p { color: var(--ink-2); font-size: .98rem; line-height: 1.55; }

/* ---- engagements (.ec) --------------------------------------------------- */
.eng { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 860px) { .eng { grid-template-columns: 1fr; } }
.ec { border: 1px solid var(--line); border-radius: 14px; padding: 26px 26px 30px; background: var(--surface); display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.ec:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-2); }
.ec .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.ec .mk { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--accent); color: var(--accent);
          border-radius: 8px; font-family: var(--mono); font-size: .86rem; font-weight: 600; }
.ec .dur { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ec h3 { margin-bottom: 10px; }
.ec p { color: var(--ink-2); font-size: .97rem; line-height: 1.55; }

/* ---- about --------------------------------------------------------------- */
.about { display: grid; grid-template-columns: 14rem 1fr; gap: clamp(24px,4vw,64px); align-items: start; }
@media (max-width: 760px) { .about { grid-template-columns: 1fr; gap: 18px; } }
.about .lead2 { color: var(--ink-2); margin-top: 16px; }

/* ---- teaser band (product teaser / cross links) ------------------------- */
.teaser { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: clamp(26px,4vw,44px);
          display: grid; gap: 18px; }

/* ---- product plates: four equals (Blueprint · Build · Decide · Org) ------ */
.prods { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
@media (max-width: 760px) { .prods { grid-template-columns: 1fr; } }
.prod { border: 1px solid var(--line); border-radius: 14px; background: var(--raise); box-shadow: var(--shadow);
        overflow: hidden; display: flex; flex-direction: column; transition: transform .3s ease, border-color .3s ease; }
.prod:hover { transform: translateY(-3px); border-color: var(--line-2); }
.prod-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.prod-cap .name { font-weight: 640; letter-spacing: -.02em; font-size: 1.16rem; display: inline-flex; align-items: center; gap: 10px; }
.prod-cap .name .m { width: 9px; height: 9px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); flex: none; }
.prod-cap .name small { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-left: 2px; }
.prod-tag { font-family: var(--mono); font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
            border: 1px solid var(--accent); border-radius: 5px; padding: 3px 7px; white-space: nowrap; }
.prod-body { padding: clamp(18px,2.4vw,24px); display: grid; gap: 12px; }
.prod-id { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; color: var(--ink-2); }
.prod-body > p { color: var(--ink-2); font-size: .98rem; line-height: 1.55; }
.prod-notes { margin: 2px 0 0; padding-top: 14px; border-top: 1px dashed var(--line-2); display: grid; gap: 9px; }
.pn { display: grid; grid-template-columns: 5.6rem 1fr; gap: 12px; align-items: baseline; }
.pn dt { font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.pn dd { margin: 0; font-size: .9rem; color: var(--ink-2); line-height: 1.5; }

/* ---- compose: run-alone vs combine -------------------------------------- */
.compose { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(28px,4vw,44px); }
@media (max-width: 760px) { .compose { grid-template-columns: 1fr; } }
.compose .oc .t .m { border-radius: 50%; transform: none; }

/* ---- company diagram (org + board) — drawing-sheet SVG ------------------ */
.company .cap .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; margin-right: 8px; }
.company svg { display: block; width: 100%; height: auto; padding: 18px clamp(12px,2.4vw,24px) 22px; }
.o-wire { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: square; }
.o-wire.dash { stroke: var(--line-2); stroke-width: 1.6; stroke-dasharray: 2 6; }
.o-box { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; }
.o-box.you { fill: var(--raise); stroke: var(--ink); }
.o-box.prod { fill: var(--accent-soft); stroke: var(--accent); }
.o-t { fill: var(--ink); font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; text-anchor: middle; }
.o-s { fill: var(--ink-3); font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; text-anchor: middle; }
.o-s.acc { fill: var(--accent); }
.o-note { fill: var(--ink-3); font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; }

/* ---- contact ------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px,5vw,72px); align-items: start; }
@media (max-width: 880px) { .contact { grid-template-columns: 1fr; } }
.cmeta { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 13px; }
.cmeta li { display: flex; align-items: center; gap: 13px; color: var(--ink-2); font-size: .96rem; }
.cmeta .mk { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line-2);
             border-radius: 7px; color: var(--accent); font-family: var(--mono); font-size: .9rem; }
form.cform { border: 1px solid var(--line); border-radius: 16px; background: var(--raise); box-shadow: var(--shadow);
             padding: clamp(22px,3vw,32px); display: grid; gap: 17px; }
.field { display: grid; gap: 7px; }
.field label { font-size: .8rem; font-weight: 600; color: var(--ink); }
.field label .opt { color: var(--ink-3); font-weight: 400; }
.field input, .field textarea { font: inherit; font-size: .98rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; width: 100%; resize: vertical; transition: border-color .15s, box-shadow .15s; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form.cform .btn { justify-content: center; padding: 14px 18px; font-size: .98rem; }
form.cform .btn[disabled] { opacity: .6; cursor: progress; }
.cstat { margin: 0; font-size: .9rem; min-height: 1.2em; }
.cstat.ok { color: var(--ink); }
.cstat.err { color: #f2b8b5; }
:root[data-theme="light"] .cstat.err { color: #f2b8b5; }

/* ---- footer -------------------------------------------------------------- */
footer { padding: 46px 0 56px; }
.foot { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: baseline; justify-content: space-between; }
.foot .meta { color: var(--ink-3); font-size: .82rem; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot .meta a:hover { color: var(--ink); }

/* ---- motion (progressive-enhancement gated on html.anim) ---------------- */
.rise { }
.anim .rise { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.anim .rise.left  { transform: translateX(-20px); }
.anim .rise.right { transform: translateX(20px); }
.anim .rise.show { opacity: 1; transform: none; }
.d1{transition-delay:.06s} .d2{transition-delay:.12s} .d3{transition-delay:.18s} .d4{transition-delay:.24s} .d5{transition-delay:.30s}

.draw { stroke-dasharray: var(--len,900); stroke-dashoffset: var(--len,900); transition: stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1); }
.art-in .draw { stroke-dashoffset: 0; }
.art-node { opacity: 0; transition: opacity .5s ease .9s; }
.art-in .art-node { opacity: 1; }
.art-in .a-pulse { animation: pulse 3.4s ease-in-out 1.6s infinite; }
@keyframes pulse {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: .85; }
  55% { opacity: .85; }
  70%,100% { offset-distance: 100%; opacity: 0; }
}
html:not(.anim) .draw { stroke-dashoffset: 0; }
html:not(.anim) .art-node { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .anim .rise { opacity: 1; transform: none; transition: none; }
  .draw { stroke-dashoffset: 0; transition: none; }
  .art-node { opacity: 1; transition: none; }
  .art-in .a-pulse { animation: none; }
  .oc:hover, .ec:hover, .btn:hover, .sym li:hover { transform: none; }
}

/* ---- motion · simple css, doss-restrained (additive) -------------------- */
.step, .oc, .ec, .prod {
  transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .45s ease;
}
.spec, .hero-art { transition: box-shadow .45s ease, border-color .3s ease; }
.btn { transition: transform .18s ease, opacity .18s ease, background-color .2s ease; }
.lnk-u { transition: color .2s ease, border-color .2s ease; }
.lnk { transition: color .2s ease; }
/* nav underline grows on hover; stays for the current page */
nav.main a.lnk { position: relative; }
nav.main a.lnk::after {
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background: currentColor; opacity:.55; transition: right .35s cubic-bezier(.65,0,.35,1);
}
nav.main a.lnk[aria-current="page"]::after { right:0; opacity:1; }
/* section-heading hairline draws in with its label */
.head .idx::after {
  content:""; height:1px; width:0; background: var(--accent);
  transition: width .7s cubic-bezier(.65,0,.35,1) .15s;
}
.head .idx.show::after { width: 34px; }
@media (prefers-reduced-motion: no-preference) {
  .step:hover, .oc:hover, .ec:hover, .prod:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: var(--shadow); }
  .spec:hover, .hero-art:hover { box-shadow: var(--shadow); }
  .btn:hover { transform: translateY(-1px); }
  nav.main a.lnk:hover::after { right:0; }
}
@media (prefers-reduced-motion: reduce) { .head .idx::after { transition:none; width:34px; } }

/* ---- animated org viz · work flowing through the hierarchy (loops) ------- */
.orgviz { border:1px solid var(--line); background:var(--raise); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.orgviz .cap { display:flex; justify-content:space-between; align-items:center; padding:11px 16px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.orgviz .cap .dot { width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block; margin-right:8px; animation:ovpulse 2.4s ease-in-out infinite; }
.orgviz svg { display:block; width:100%; height:auto; padding:16px clamp(10px,2vw,22px) 22px; }
.ov-base { fill:none; stroke:var(--line-2); stroke-width:1.4; }
.ov-flow { fill:none; stroke:var(--accent); stroke-width:1.7; stroke-dasharray:3 9; stroke-linecap:round; animation:ovflow 1.5s linear infinite; }
.ov-box { fill:var(--surface); stroke:var(--line-2); stroke-width:1.4; }
.ov-box.p { stroke:var(--accent); stroke-width:1.7; }
.ov-t { fill:var(--ink); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; text-anchor:middle; font-weight:600; }
.ov-s { fill:var(--ink-3); font-family:var(--mono); font-size:8.5px; letter-spacing:.05em; text-transform:uppercase; text-anchor:middle; }
.ov-s.acc { fill:var(--accent); }
@keyframes ovflow  { to { stroke-dashoffset:-24; } }
@keyframes ovpulse { 0%,100% { opacity:.35; } 50% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .ov-flow { animation:none; opacity:.55; } .orgviz .cap .dot { animation:none; } }

/* nav CTA: subtle outline, not a heavy filled block (doss-minimal); readable hover */
nav.main .btn { background: transparent; color: var(--ink); border-color: var(--line-2); box-shadow: none; font-weight: 540; }
nav.main .btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-1px); box-shadow: none; opacity: 1; }

/* nav CTA button removed from the top bar (per request) */
nav.main .btn { display: none !important; }