/* ============================================================
   FONTS — self-hosted, latin + latin-ext only.
   Regenerate from Google Fonts with the script in the commit history;
   files live in assets/fonts/.
   ============================================================ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-100-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(fonts/archivo-100-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   COG-AI — DESIGN TOKENS  (drawing-sheet direction)
   Light = drafting vellum + graphite + survey orange
   Dark  = blueprint field + pale line-work + survey orange
   ============================================================ */
:root{
  --paper:      oklch(0.966 0.005 240);
  --paper-2:    oklch(0.945 0.007 240);
  --ink:        oklch(0.245 0.015 255);
  --ink-soft:   oklch(0.43 0.015 255);
  --line:       oklch(0.245 0.015 255 / 0.16);
  --line-hard:  oklch(0.245 0.015 255 / 0.42);
  --accent:     oklch(0.665 0.195 42);
  --accent-ink: oklch(0.545 0.175 42);
  --accent-dim: oklch(0.665 0.195 42 / 0.12);

  --font-d: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-m: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* modular scale — perfect fourth on 17px */
  --fs--1: 0.8125rem;
  --fs-0:  1.0625rem;
  --fs-1:  1.375rem;
  --fs-2:  1.875rem;
  --fs-3:  clamp(2rem, 1.2rem + 2.4vw, 3.3rem);
  --fs-d:  clamp(2.85rem, 1.3rem + 5.5vw, 6.4rem);

  --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem;
  --sp-5: 3rem;  --sp-6: 4rem; --sp-7: 6rem;
  --sect: clamp(4.5rem, 9vw, 8.5rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 220ms; --t-med: 380ms;

  --frame: 10px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:      oklch(0.225 0.045 252);
    --paper-2:    oklch(0.255 0.048 252);
    --ink:        oklch(0.93 0.02 240);
    --ink-soft:   oklch(0.78 0.03 245);
    --line:       oklch(0.93 0.02 240 / 0.17);
    --line-hard:  oklch(0.93 0.02 240 / 0.45);
    --accent:     oklch(0.72 0.185 45);
    --accent-ink: oklch(0.76 0.17 48);
    --accent-dim: oklch(0.72 0.185 45 / 0.14);
  }
}

/* ============ base ============ */
*,*::before,*::after{ box-sizing:border-box; margin:0 }
html{ scroll-behavior:smooth }
body{
  font-family: var(--font-d);
  font-size: var(--fs-0);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection{ background: var(--accent); color: oklch(0.16 0.02 255) }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px }
h1,h2,h3{ line-height:1.05; font-weight:760; font-stretch:118%; letter-spacing:-0.02em; text-wrap:balance }
p{ max-width: 62ch; text-wrap: pretty }
a{ color: inherit }
img,svg{ display:block; max-width:100% }

@media (min-width: 901px){
  ::-webkit-scrollbar{ width:10px }
  ::-webkit-scrollbar-thumb{ background: var(--line-hard); border:3px solid var(--paper) }
  ::-webkit-scrollbar-track{ background: var(--paper) }
}

.vh{ position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0 }
.skip{ position:absolute; left:-999px; top:8px; z-index:99; background:var(--accent); color:oklch(0.16 0.02 255);
  padding:.5rem 1rem; font-family:var(--font-m); font-size:var(--fs--1) }
.skip:focus{ left: 16px }

/* drawing-sheet frame + grain */
.frame{ position:fixed; inset:var(--frame); border:1px solid var(--line-hard); pointer-events:none; z-index:60 }
.grain{ position:fixed; inset:0; pointer-events:none; z-index:70; opacity:.05; mix-blend-mode:multiply;
  background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="140" height="140" filter="url(%23n)" opacity="0.6"/></svg>') }
@media (prefers-color-scheme: dark){ .grain{ mix-blend-mode:screen; opacity:.07 } }

.wrap{ max-width:1240px; margin-inline:auto; padding-inline: clamp(1.25rem, 4.5vw, 3rem) }

/* mono utility voice */
.mono{ font-family:var(--font-m); font-size:var(--fs--1); letter-spacing:.08em; text-transform:uppercase }
.o{ color: var(--accent-ink) }

/* underline-draw links */
.u{ text-decoration:none; background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 0% 1px;
  transition: background-size var(--t-med) var(--ease-out) }
.u:hover{ background-size:100% 1px }

/* ============ header ============ */
header{
  position:sticky; top:0; z-index:50;
  background: var(--paper);
  border-bottom:1px solid var(--line);
}
.bar{ display:flex; align-items:center; gap:var(--sp-4); padding-block:.8rem }
.logo{ text-decoration:none; font-weight:860; font-stretch:125%; letter-spacing:-0.01em; font-size:1.25rem; text-decoration:none }
.logo em{ font-style:normal; color:var(--accent-ink) }
nav.top{ margin-left:auto; display:flex; gap:clamp(.9rem,2vw,1.8rem) }
nav.top a{ font-family:var(--font-m); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none;
  background:linear-gradient(var(--accent),var(--accent)) no-repeat 0 100% / 0% 1px; transition: background-size var(--t-med) var(--ease-out), color var(--t-fast) ease }
nav.top a:hover{ background-size:100% 1px }
nav.top a:hover{ color:var(--ink) }
.sheetno{ font-family:var(--font-m); font-size:.72rem; letter-spacing:.12em; color:var(--ink-soft);
  border:1px solid var(--line-hard); padding:.28rem .55rem }
@media (max-width:760px){ nav.top{ display:none } .sheetno{ display:none } }

/* mobile sheet-index drawer */
.navtoggle{ display:none; margin-left:auto; align-items:center; gap:.5rem; cursor:pointer;
  font-family:var(--font-m); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); background:transparent; border:1px solid var(--line-hard); padding:.42rem .7rem }
.navtoggle .bars{ display:grid; gap:3px; width:14px }
.navtoggle .bars i{ height:1.5px; background:currentColor; transition:transform var(--t-fast) var(--ease-out), opacity var(--t-fast) ease }
.navtoggle[aria-expanded="true"] .bars i:nth-child(1){ transform:translateY(4.5px) rotate(45deg) }
.navtoggle[aria-expanded="true"] .bars i:nth-child(2){ opacity:0 }
.navtoggle[aria-expanded="true"] .bars i:nth-child(3){ transform:translateY(-4.5px) rotate(-45deg) }
@media (max-width:760px){ .navtoggle{ display:flex } }

.drawer{ position:fixed; inset:0; z-index:55; background:var(--paper);
  padding:5rem clamp(1.25rem,5vw,2rem) 2rem; overflow-y:auto;
  animation: drawer-in var(--t-med) var(--ease-out) both }
.drawer[hidden]{ display:none }
@keyframes drawer-in{ from{ opacity:0; transform:translateY(-10px) } to{ opacity:1; transform:none } }
.drawer .d-head{ font-family:var(--font-m); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); border-bottom:1px solid var(--line-hard); padding-bottom:.7rem; margin-bottom:.4rem }
.drawer a{ display:grid; grid-template-columns:74px 1fr; align-items:baseline; gap:.9rem;
  padding:1.05rem .2rem; border-bottom:1px solid var(--line); text-decoration:none }
.drawer a .ref{ font-family:var(--font-m); font-size:var(--fs--1); letter-spacing:.1em; color:var(--accent-ink) }
.drawer a .ttl{ font-weight:680; font-stretch:112%; font-size:1.15rem; letter-spacing:-0.01em }
.drawer .d-cta{ margin-top:var(--sp-4); display:block; text-align:center }
body.locked{ overflow:hidden }

/* ============ hero ============ */
.hero{ position:relative; padding-block: clamp(3rem, 7vw, 6rem) var(--sect) }
.zone{ display:flex; justify-content:space-between; border-bottom:1px solid var(--line);
  padding-bottom:.4rem; margin-bottom:clamp(2.5rem,6vw,4.5rem); color:var(--ink-soft);
  font-family:var(--font-m); font-size:.68rem; letter-spacing:.1em }
.zone span{ border-left:1px solid var(--line-hard); padding-left:.5rem }
.zone{ position:relative }
.zone::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:5px;
  background:repeating-linear-gradient(90deg, var(--line-hard) 0 1px, transparent 1px calc(100% / 56)) }
@media (max-width:640px){ .zone{ display:none } }
.hero-grid{ display:grid; grid-template-columns: minmax(0,6.4fr) minmax(0,5.6fr); gap:clamp(2rem,5vw,4.5rem); align-items:center }
@media (max-width:940px){ .hero-grid{ grid-template-columns:1fr } .schem{ max-width:470px; margin-top:var(--sp-5) } }
.kicker{ display:flex; align-items:center; gap:.75rem; margin-bottom:var(--sp-3) }
.kicker::before{ content:""; width:34px; height:1px; background:var(--accent) }
h1.display{
  font-size:var(--fs-d); font-weight:830; font-stretch:122%;
  letter-spacing:-0.03em; line-height:.96; text-transform:uppercase;
}
h1 .load{ color:var(--accent-ink) }
.lede{ margin-top:var(--sp-4); font-size:var(--fs-1); line-height:1.5; color:var(--ink-soft); max-width:40ch }
.cta-row{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-5); align-items:center }
.btn{
  font-family:var(--font-m); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; padding:1rem 1.5rem; border:1px solid var(--ink);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.btn.pri{ background:var(--accent); border-color:var(--accent); color:oklch(0.17 0.03 40); font-weight:600 }
.btn.pri:hover{ transform:translateY(-2px); box-shadow:0 1px 0 oklch(0.17 0.03 40 / .3), 0 10px 26px oklch(0.55 0.18 42 / .35) }
.btn.sec:hover{ background:var(--ink); color:var(--paper) }
@media (max-width:480px){ .cta-row{ flex-direction:column; align-items:stretch } .btn{ text-align:center } }

.schem{ position:relative }
.schem svg{ width:100%; height:auto; color:var(--ink) }
.schem .lbl{ font-family:var(--font-m); font-size:10.5px; letter-spacing:.12em; fill:var(--ink-soft) }
.schem .dim, .schem .dim-t{ color:var(--accent-ink) }
.schem .dim-t{ fill:var(--accent-ink); font-family:var(--font-m); font-size:10px; letter-spacing:.14em }

/* spec strip under hero */
.spec{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-hard);
  border-bottom:1px solid var(--line-hard); margin-top:var(--sect) }
.spec div{ padding:1.1rem 1.25rem 1.1rem 0; border-left:1px solid var(--line); padding-left:1.25rem }
.spec div:first-child{ border-left:0; padding-left:0 }
.spec b{ display:block; font-family:var(--font-m); font-weight:500; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:.35rem }
.spec span{ font-weight:640; font-stretch:110%; font-size:.98rem; letter-spacing:0 }
@media (max-width:760px){ .spec{ grid-template-columns:1fr }
  .spec div{ border-left:0; padding-left:0; border-top:1px solid var(--line) }
  .spec div:first-child{ border-top:0 } }

/* rotating seal */
.seal{ position:absolute; right:6%; bottom:calc(-1 * var(--sect) / 2.1); width:132px; height:132px; z-index:5 }
.seal svg{ overflow:visible }
.seal text{ font-family:var(--font-m); font-size:10.2px; letter-spacing:.32em; fill:var(--ink-soft); text-transform:uppercase }
.seal .rot{ transform-origin:50% 50%; animation: spin 80s linear infinite }
.seal circle.c{ fill:none; stroke:var(--line-hard) }
.seal .hub{ fill:var(--accent) }
@media (max-width:1000px){ .seal{ display:none } }
@keyframes spin{ to{ transform:rotate(1turn) } }

/* ============ sections ============ */
section{ padding-block: var(--sect); position:relative }
.sect-head{ display:flex; align-items:baseline; gap:var(--sp-3); margin-bottom:clamp(2.5rem,5vw,4rem);
  border-bottom:1px solid var(--line-hard); padding-bottom:var(--sp-3) }
.sect-head .ref{ font-family:var(--font-m); font-size:var(--fs--1); letter-spacing:.14em; color:var(--accent-ink) }
.sect-head h2{ font-size:var(--fs-3); text-transform:uppercase; letter-spacing:-0.02em }
.sect-head .note{ margin-left:auto; font-family:var(--font-m); font-size:.68rem; letter-spacing:.12em;
  color:var(--ink-soft); text-transform:uppercase }
@media (max-width:640px){ .sect-head{ flex-wrap:wrap } .sect-head .note{ display:none } }

/* index of drawings */
.index a{ display:grid; grid-template-columns:110px 1fr auto; align-items:baseline; gap:var(--sp-3);
  padding:1.05rem .5rem; border-top:1px solid var(--line); text-decoration:none;
  transition: background var(--t-fast) ease, padding-left var(--t-fast) var(--ease-out) }
.index a:last-child{ border-bottom:1px solid var(--line) }
.index .ref{ font-family:var(--font-m); font-size:var(--fs--1); letter-spacing:.12em; color:var(--accent-ink) }
.index .ttl{ font-weight:680; font-stretch:112%; font-size:var(--fs-1); letter-spacing:-0.01em }
.index .go{ font-family:var(--font-m); font-size:.72rem; letter-spacing:.12em; color:var(--ink-soft);
  transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) ease }
.index a:hover{ background:var(--accent-dim); padding-left:1rem }
.index a:hover .go{ transform:translateX(6px); color:var(--accent-ink) }
@media (max-width:640px){ .index a{ grid-template-columns:60px 1fr auto; gap:.8rem } .index .ttl{ font-size:1.02rem } }

/* services */
.svc{ border-top:1px solid var(--line) }
.svc:last-of-type{ border-bottom:1px solid var(--line) }
.svc{ display:grid; grid-template-columns: 108px minmax(0,1fr) 232px; gap:var(--sp-4);
  padding-block:2.2rem; transition: background var(--t-fast) ease }
.svc:hover{ background: var(--accent-dim) }
.svc .ref{ font-family:var(--font-m); font-size:var(--fs--1); letter-spacing:.12em; color:var(--accent-ink); padding-top:.5rem }
.svc h3{ font-size:var(--fs-2); text-transform:uppercase; margin-bottom:.6rem }
.svc p{ color:var(--ink-soft) }
.tags{ display:flex; flex-direction:column; gap:.45rem; align-items:flex-start; padding-top:.4rem }
.tag{ font-family:var(--font-m); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase;
  border:1px solid var(--line-hard); padding:.3rem .55rem; color:var(--ink-soft); white-space:nowrap }
@media (max-width:900px){
  .svc{ grid-template-columns:1fr; gap:var(--sp-2) }
  .tags{ flex-direction:row; flex-wrap:wrap }
}

/* case — ARKI-AI */
.case-grid{ display:grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap:clamp(2rem,5vw,5rem) }
.case-left{ position:sticky; top:6.5rem; align-self:start }
.case-left .big{ font-size:var(--fs-3); text-transform:uppercase; font-weight:800; font-stretch:120%;
  letter-spacing:-0.02em; line-height:1 }
.case-left .big .o{ display:block }
.case-left .mono{ margin-top:var(--sp-3); color:var(--ink-soft) }
.case-body p + p{ margin-top:var(--sp-3) }
.case-body .chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--sp-4) }
.case-body .cta{ display:inline-block; margin-top:var(--sp-5); font-family:var(--font-m); font-size:.8rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink) }
@media (max-width:900px){ .case-grid{ grid-template-columns:1fr } .case-left{ position:static } }

/* method */
.step{ display:grid; grid-template-columns: 150px minmax(0,1fr); gap:var(--sp-4);
  padding-block:2.4rem; border-top:1px solid var(--line) }
.step:last-of-type{ border-bottom:1px solid var(--line) }
.step .num{ font-weight:870; font-stretch:70%; font-size:clamp(3rem,6vw,5rem); line-height:.8;
  color:transparent; -webkit-text-stroke:1.2px var(--line-hard) }
.step:hover .num{ color:var(--accent-dim); -webkit-text-stroke-color:var(--accent-ink);
  transition: color var(--t-med) ease }
.step h3{ font-size:var(--fs-1); text-transform:uppercase; margin-bottom:.5rem }
.step p{ color:var(--ink-soft); max-width:58ch }
@media (max-width:640px){ .step{ grid-template-columns:76px 1fr } }

/* principal */
.pe-grid{ display:grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap:clamp(2rem,5vw,5rem); align-items:start }
.pull{ font-size:clamp(2.1rem, 1.2rem + 3.4vw, 4rem); font-weight:820; font-stretch:120%;
  letter-spacing:-0.028em; line-height:1.02; text-transform:uppercase; text-wrap:balance }
.pull .o{ color:var(--accent-ink) }
.pe-body p + p{ margin-top:var(--sp-3) }
.pe-body p{ color:var(--ink-soft) }
.cred{ margin-top:var(--sp-4); border-top:1px solid var(--line-hard) }
.cred li{ list-style:none; display:flex; justify-content:space-between; gap:1rem;
  padding:.8rem 0; border-bottom:1px solid var(--line);
  font-family:var(--font-m); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase }
.cred li b{ font-weight:600; color:var(--accent-ink) }
.cred li span{ text-align:right }
@media (max-width:900px){ .pe-grid{ grid-template-columns:1fr } }

/* title block / contact */
.tb-cta{ margin-bottom:clamp(2.5rem,5vw,4rem) }
.tb-cta a{ font-size:clamp(1.9rem, 1rem + 3.4vw, 3.6rem); font-weight:800; font-stretch:118%;
  letter-spacing:-0.025em; text-transform:uppercase; line-height:1.06 }
.tb-cta .arrow{ color:var(--accent-ink) }
.tblock{ border:1.5px solid var(--line-hard); background:var(--paper-2) }
.tb-row{ display:grid; grid-template-columns: 2fr 2fr 1.2fr 1fr }
.tb-row + .tb-row{ border-top:1px solid var(--line-hard) }
.tb-cell{ padding:.8rem 1rem; border-left:1px solid var(--line-hard); min-width:0 }
.tb-cell:first-child{ border-left:0 }
.tb-cell b{ display:block; font-family:var(--font-m); font-weight:500; font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.3rem }
.tb-cell span{ font-weight:660; font-stretch:110%; font-size:.95rem; overflow-wrap:anywhere }
.tb-cell .sheet{ font-size:1.6rem; font-weight:850; font-stretch:122%; color:var(--accent-ink) }
@media (max-width:760px){ .tb-row{ grid-template-columns:1fr 1fr } .tb-cell{ border-top:1px solid var(--line) } .tb-cell:nth-child(odd){ border-left:0 } }

/* ============ metrics strip (case study) ============ */
.metrics{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-hard);
  border-bottom:1px solid var(--line-hard); margin-top:var(--sp-5) }
.metrics div{ padding:1.2rem 1.25rem 1.2rem 0; border-left:1px solid var(--line); padding-left:1.25rem }
.metrics div:first-child{ border-left:0; padding-left:0 }
.metrics .n{ display:block; font-size:clamp(1.9rem,4vw,2.9rem); font-weight:850; font-stretch:118%;
  line-height:1; letter-spacing:-0.02em; color:var(--accent-ink) }
.metrics .l{ display:block; margin-top:.5rem; font-family:var(--font-m); font-size:.64rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); line-height:1.6 }
@media (max-width:760px){ .metrics{ grid-template-columns:1fr }
  .metrics div{ border-left:0; padding-left:0; border-top:1px solid var(--line) }
  .metrics div:first-child{ border-top:0 } }

/* figures awaiting the principal's sign-off — visibly unshippable */
.tbd{ display:inline-block; color:var(--ink-soft); border-bottom:1.5px dashed var(--accent);
  font-stretch:100%; letter-spacing:.02em }
.tbd::after{ content:"REV PENDING"; display:block; font-family:var(--font-m); font-size:.55rem;
  letter-spacing:.16em; color:var(--accent-ink); border-bottom:0; margin-top:.15rem }
.tbd.i{ font-size:inherit }
.tbd.i::after{ display:inline; margin:0 0 0 .5em; font-size:.85em }

/* ============ selected work ledger ============ */
.ledger{ border-top:1px solid var(--line-hard) }
.ledger .row{ display:grid; grid-template-columns:108px minmax(0,1fr) 200px; gap:var(--sp-4);
  padding-block:1.6rem; border-bottom:1px solid var(--line); align-items:baseline }
.ledger .ref{ font-family:var(--font-m); font-size:var(--fs--1); letter-spacing:.12em; color:var(--accent-ink) }
.ledger h3{ font-size:var(--fs-1); text-transform:uppercase; margin-bottom:.4rem }
.ledger p{ color:var(--ink-soft); font-size:.98rem; max-width:60ch }
.ledger .stat{ font-family:var(--font-m); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); text-align:right; line-height:1.8 }
@media (max-width:900px){ .ledger .row{ grid-template-columns:1fr; gap:var(--sp-2) }
  .ledger .stat{ text-align:left } }

/* ============ engagement / fees ============ */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); border:1.5px solid var(--line-hard) }
.tiers > div{ padding:1.6rem 1.5rem 1.8rem; border-left:1px solid var(--line-hard); display:flex; flex-direction:column }
.tiers > div:first-child{ border-left:0 }
.tiers .ref{ font-family:var(--font-m); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-ink); margin-bottom:.7rem }
.tiers h3{ font-size:var(--fs-1); text-transform:uppercase; margin-bottom:.7rem }
.tiers .fee{ font-size:clamp(1.5rem,3vw,2.1rem); font-weight:840; font-stretch:118%; letter-spacing:-0.02em;
  line-height:1.1; margin-bottom:.3rem }
.tiers .unit{ font-family:var(--font-m); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:1.1rem }
.tiers p{ color:var(--ink-soft); font-size:.97rem }
.tiers ul{ list-style:none; margin-top:1.1rem; padding:0 }
.tiers li{ position:relative; padding-left:1.1rem; margin-top:.55rem; font-size:.93rem; color:var(--ink-soft) }
.tiers li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:5px;
  border:1px solid var(--accent-ink) }
.tiers .lead{ background:var(--accent-dim) }
@media (max-width:900px){ .tiers{ grid-template-columns:1fr }
  .tiers > div{ border-left:0; border-top:1px solid var(--line-hard) }
  .tiers > div:first-child{ border-top:0 } }
.fee-note{ margin-top:var(--sp-4); font-family:var(--font-m); font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-soft); line-height:1.9; max-width:78ch }

/* ============ general notes ============ */
.notes{ counter-reset:note; border-top:1px solid var(--line-hard) }
.notes > li{ list-style:none; counter-increment:note; display:grid;
  grid-template-columns:74px minmax(0,1fr); gap:var(--sp-3);
  padding-block:1.5rem; border-bottom:1px solid var(--line) }
.notes > li::before{ content:counter(note,decimal-leading-zero) "."; font-family:var(--font-m);
  font-size:var(--fs--1); letter-spacing:.1em; color:var(--accent-ink); padding-top:.2rem }
.notes h3{ font-size:1.05rem; text-transform:uppercase; letter-spacing:.02em; margin-bottom:.45rem;
  font-stretch:112%; font-weight:700 }
.notes p{ color:var(--ink-soft); font-size:.98rem; max-width:70ch }
@media (max-width:640px){ .notes > li{ grid-template-columns:46px minmax(0,1fr); gap:var(--sp-2) } }

/* ============ revision block (R-001) ============ */
.revs{ margin-top:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--line-hard) }
.rev{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:var(--sp-4);
  padding-block:2.2rem; border-bottom:1px solid var(--line) }
.rev-no b{ display:block; font-size:var(--fs-1); font-weight:840; font-stretch:118%;
  text-transform:uppercase; letter-spacing:-0.01em; color:var(--accent-ink) }
.rev-no span{ display:block; margin-top:.35rem; font-family:var(--font-m); font-size:.68rem;
  letter-spacing:.12em; color:var(--ink-soft) }
.rev-body h3{ font-size:var(--fs-1); text-transform:uppercase; margin-bottom:.6rem }
.rev-body p{ color:var(--ink-soft) }
.rev-body .by{ margin-top:.9rem; font-family:var(--font-m); font-size:.64rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-soft) }
@media (max-width:640px){ .rev{ grid-template-columns:1fr; gap:var(--sp-2) } }

/* ============ capacity stamp ============ */
.capacity{ display:inline-flex; align-items:center; gap:.6rem; margin-top:var(--sp-4);
  border:1px solid var(--accent); padding:.5rem .8rem;
  font-family:var(--font-m); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink) }
.capacity .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;
  animation: pulse 2.6s var(--ease-io) infinite }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.28 } }
.cap-strip{ border-bottom:1px solid var(--line); background:var(--paper-2) }
.cap-strip .in{ display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; align-items:center; padding-block:.55rem;
  font-family:var(--font-m); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft) }
.cap-strip b{ color:var(--accent-ink); font-weight:500 }
.cap-strip a{ margin-left:auto; color:var(--ink) }

/* ============ RFI intake form (title block as form) ============ */
.rfi-lead{ display:grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap:clamp(2rem,5vw,4rem);
  align-items:end; margin-bottom:clamp(2rem,4vw,3rem) }
@media (max-width:900px){ .rfi-lead{ grid-template-columns:1fr; align-items:start } }
.rfi-lead .alt{ font-family:var(--font-m); font-size:var(--fs--1); letter-spacing:.06em; color:var(--ink-soft) }
.rfi-lead .alt a{ color:var(--accent-ink) }

form.rfi{ border:1.5px solid var(--line-hard); background:var(--paper-2) }
.rfi-row{ display:grid; grid-template-columns:repeat(3,1fr) }
.rfi-row + .rfi-row{ border-top:1px solid var(--line-hard) }
.rfi-row.two{ grid-template-columns:repeat(2,1fr) }
.rfi-row.one{ grid-template-columns:1fr }
.f{ padding:.8rem 1rem 1rem; border-left:1px solid var(--line-hard); min-width:0; display:flex; flex-direction:column }
.f:first-child{ border-left:0 }
.f > label{ font-family:var(--font-m); font-weight:500; font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:.45rem; display:block }
.f > label .req{ color:var(--accent-ink) }
.f input, .f select, .f textarea{
  font-family:var(--font-d); font-size:.98rem; font-weight:620; font-stretch:110%; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line-hard); border-radius:0;
  padding:.3rem 0 .45rem; width:100%; transition: border-color var(--t-fast) ease;
}
.f textarea{ font-weight:450; font-stretch:100%; font-size:1rem; line-height:1.55; resize:vertical; min-height:7.5rem }
.f select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 9px) calc(50% - 1px), calc(100% - 4px) calc(50% - 1px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:1.4rem }
.f select option{ background:var(--paper); color:var(--ink) }
.f input::placeholder, .f textarea::placeholder{ color:var(--ink-soft); opacity:.55; font-weight:400 }
.f input:focus, .f select:focus, .f textarea:focus{ outline:0; border-bottom-color:var(--accent) }
.f input:focus-visible, .f select:focus-visible, .f textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.f .hint{ font-family:var(--font-m); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:.5rem }
.f.err input, .f.err select, .f.err textarea{ border-bottom-color:var(--accent); border-bottom-width:1.5px }
.f .msg{ font-family:var(--font-m); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-ink); margin-top:.5rem; display:none }
.f.err .msg{ display:block }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.rfi-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
  padding:1rem; border-top:1px solid var(--line-hard) }
.rfi-foot .note{ font-family:var(--font-m); font-size:.62rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-soft); max-width:46ch; line-height:1.7 }
button.btn{ font-family:var(--font-m); cursor:pointer; background:transparent; color:inherit }
button.btn[disabled]{ opacity:.55; cursor:progress }

.rfi-status{ margin-left:auto; font-family:var(--font-m); font-size:.68rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--accent-ink); text-align:right }
@media (max-width:760px){ .rfi-status{ margin-left:0; text-align:left } }

/* issued stamp shown on successful submit */
.stamp{ border:2px solid var(--accent); padding:1.4rem 1.6rem; margin-top:0; background:var(--paper-2) }
.stamp b{ display:block; font-family:var(--font-m); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--accent-ink); margin-bottom:.6rem }
.stamp .no{ font-size:clamp(1.5rem,3.5vw,2.4rem); font-weight:850; font-stretch:120%;
  letter-spacing:-0.01em; text-transform:uppercase }
.stamp p{ margin-top:.7rem; color:var(--ink-soft); font-size:.95rem }
@media (max-width:900px){
  .rfi-row, .rfi-row.two{ grid-template-columns:1fr }
  .f{ border-left:0; border-top:1px solid var(--line) }
  .rfi-row > .f:first-child{ border-top:0 }
}

footer{ padding: var(--sp-5) 0 calc(var(--sp-5) + var(--frame)); }
.foot{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  font-family:var(--font-m); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft) }

/* ============ motion ============ */
@keyframes rise{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:none } }
@keyframes fadein{ to{ opacity:1 } }
@keyframes draw{ to{ stroke-dashoffset:0 } }

.rise{ animation: rise .8s var(--ease-out) both; animation-delay: var(--d, 0s) }

.schem .draw{ stroke-dasharray:1; stroke-dashoffset:1; animation: draw 1.15s var(--ease-io) forwards; animation-delay:var(--d,0s) }
.schem .late{ opacity:0; animation: fadein .6s ease forwards; animation-delay:var(--d, 1.4s) }
.gear-spin{ transform-box:fill-box; transform-origin:center; animation: spin 90s linear infinite }
.gear-spin.rev{ animation-direction: reverse; animation-duration: 64s }

@supports (animation-timeline: view()){
  .rev-s{ animation: rise linear both; animation-timeline: view(); animation-range: entry 8% entry 42% }
}

/* ============================================================
   PRINT — the page issues as an actual drawing set.
   One sheet per section, title stamp at the foot of each.
   ============================================================ */
@media print{
  @page{ size: letter landscape; margin: 12mm 14mm }

  :root{
    --paper:#fff; --paper-2:#fff;
    --ink:#111; --ink-soft:#3d3d3d;
    --line:rgba(0,0,0,.22); --line-hard:rgba(0,0,0,.6);
    --accent:#C24A08; --accent-ink:#A83E05; --accent-dim:transparent;
    --sect:0;
  }
  html,body{ background:#fff !important; color:#111 !important }
  body{ font-size:9pt; line-height:1.4 }

  /* screen-only chrome */
  .frame, .grain, .seal, header, .cap-strip, .drawer, .navtoggle,
  .skip, .btn, button, #index, .rfi-lead .tb-cta, .index .go{ display:none !important }

  /* animation systems are inert on paper — pin everything to its end state */
  .rise, .rev-s, .schem .draw, .schem .late, .gear-spin, .seal .rot{
    animation:none !important; opacity:1 !important; transform:none !important;
    stroke-dasharray:none !important; stroke-dashoffset:0 !important;
  }

  .wrap{ max-width:none; padding-inline:0 }
  main{ display:block }

  section{ break-before:page; padding-block:0 0 6mm; position:relative }
  section:first-of-type{ break-before:avoid }
  .hero{ padding-block:0 }

  /* per-sheet stamp, driven by data-sheet on each section */
  section[data-sheet]::after{
    content:"COG-AI  ·  " attr(data-sheet) "  ·  " attr(data-title)
            "  ·  Rev 0  ·  D. Barron, PE  ·  cogai.world";
    display:block; margin-top:7mm; padding-top:2.5mm;
    border-top:1px solid var(--line-hard);
    font-family:var(--font-m); font-size:7pt; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-soft);
  }

  h1.display{ font-size:30pt; line-height:.98 }
  .lede{ font-size:11pt; max-width:52ch }
  .sect-head h2{ font-size:16pt }
  .sect-head{ margin-bottom:4.5mm; padding-bottom:2mm }
  h3{ font-size:11pt !important }
  .svc h3, .step h3, .ledger h3, .tiers h3, .rev-body h3{ font-size:11pt; margin-bottom:1.2mm }
  .step .num{ font-size:22pt }
  .metrics .n{ font-size:16pt }
  .tiers .fee{ font-size:13pt }
  .pull{ font-size:20pt }
  .tb-cta a{ font-size:18pt }
  .case-left .big{ font-size:16pt }
  .sect-head .note{ display:inline }
  .hero-grid{ grid-template-columns:1.05fr .95fr; gap:8mm; align-items:start }
  .schem{ max-width:none }
  .spec{ margin-top:8mm }
  .zone{ display:flex; margin-bottom:6mm }
  .capacity{ margin-top:5mm }

  /* Chrome's print page box measures under the 760/900px breakpoints, so the
     stacked mobile layouts win by default. Put the drawing columns back. */
  .spec, .metrics{ grid-template-columns:repeat(3,1fr) }
  .spec div, .metrics div{ border-left:1px solid var(--line); border-top:0; padding-left:4mm }
  .spec div:first-child, .metrics div:first-child{ border-left:0; padding-left:0 }
  .svc{ grid-template-columns:88px minmax(0,1fr) 180px; gap:6mm }
  .tags{ flex-direction:column }
  .step{ grid-template-columns:100px minmax(0,1fr); gap:6mm }
  .notes > li{ grid-template-columns:60px minmax(0,1fr); gap:5mm }
  .ledger .row{ grid-template-columns:88px minmax(0,1fr) 150px; gap:6mm }
  .ledger .stat{ text-align:right }
  .tiers{ grid-template-columns:repeat(3,1fr) }
  .tiers > div{ border-left:1px solid var(--line-hard); border-top:0 }
  .tiers > div:first-child{ border-left:0 }
  .case-grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:8mm }
  .pe-grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:8mm }
  .rev{ grid-template-columns:110px minmax(0,1fr) }
  .rfi-lead{ grid-template-columns:minmax(0,7fr) minmax(0,5fr) }
  .rfi-row{ grid-template-columns:repeat(3,1fr) }
  .rfi-row.two{ grid-template-columns:repeat(2,1fr) }
  .rfi-row.one{ grid-template-columns:1fr }
  .f{ border-left:1px solid var(--line-hard); border-top:0 }
  .rfi-row > .f:first-child{ border-left:0 }
  .tb-row{ grid-template-columns:2fr 2fr 1.2fr 1fr }
  .tb-cell{ border-top:0; border-left:1px solid var(--line-hard) }
  .tb-cell:first-child{ border-left:0 }

  /* keep rows whole */
  .svc, .step, .notes > li, .ledger .row, .tiers > div, .tb-row,
  .metrics, .case-grid, .pe-grid, .stamp{ break-inside:avoid }
  .svc, .step{ padding-block:2.6mm }
  .notes > li, .ledger .row{ padding-block:2.4mm }
  .tiers > div{ padding:3mm 4mm }
  .tiers li{ margin-top:1mm }
  .metrics div, .spec div{ padding-block:2.5mm }
  .cred li{ padding:1.6mm 0 }
  .case-body p + p, .pe-body p + p{ margin-top:2mm }
  .fee-note{ margin-top:3mm }
  .chips{ margin-top:3mm }
  .rfi-row .f{ padding:1.6mm 3mm 2mm }
  .f textarea{ min-height:17mm }
  .rfi-lead{ margin-bottom:4mm; align-items:end }
  .tb-cell{ padding:2mm 3mm }
  .tblock{ margin-top:4mm }
  .rev{ padding-block:3mm }
  .tiers{ break-inside:auto }
  .case-left{ position:static }
  p{ max-width:66ch; orphans:3; widows:3 }

  /* the RFI prints as a blank form you can fill by hand */
  form.rfi{ break-inside:auto }
  .f input, .f select{ border-bottom:1px solid var(--line-hard); min-height:7mm;
    color:transparent !important; appearance:none; background:none }
  .f textarea{ border:1px solid var(--line-hard); min-height:32mm; color:transparent !important }
  .f input::placeholder, .f textarea::placeholder{ color:transparent !important }
  .f select{ background-image:none }
  .f .hint, .f .msg{ display:none }
  .rfi-foot{ padding:3mm 0 0 }
  .rfi-foot .note{ font-size:7pt }
  .rfi-foot::after{ content:"Complete and return to arki@cogai.world";
    font-family:var(--font-m); font-size:7pt; letter-spacing:.14em; text-transform:uppercase;
    color:var(--accent-ink) }
  .rfi-status{ display:none }

  /* spell out destinations that a printed page can't follow */
  a[href^="http"]::after, a[href^="mailto"]::after{
    content:" [" attr(href) "]"; font-family:var(--font-m); font-size:7pt;
    letter-spacing:.06em; color:var(--ink-soft); text-transform:none }
  a[href^="#"]::after{ content:none }
  a{ text-decoration:none; background-image:none !important }

  footer{ break-before:avoid; padding:4mm 0 0 }
  .foot{ font-size:7pt }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .rise, .rev-s{ animation:none }
  .schem .draw{ animation:none; stroke-dasharray:none; stroke-dashoffset:0 }
  .schem .late{ animation:none; opacity:1 }
  .gear-spin, .seal .rot{ animation:none }
  .btn.pri:hover{ transform:none }
}