/* ==========================================================================
   rmgtx.dev/about
   An agent cursor selects and draws in the page; the work speaks for itself.
   Mobile-first; the desktop layout starts at 900px.
   ========================================================================== */
@font-face{font-family:Manrope;font-style:normal;font-weight:400 700;font-display:swap;src:url("assets/manrope-variable.woff2") format("woff2")}

:root{--lift:0 18px 40px -24px rgb(32 34 30/.35);--z-header:40;--z-agent:50;--z-skip:100;
  --paper:#F7F7F2; --paper-2:#EFEFE8; --white:#FFFFFF; --ink:#20221E; --muted:#5C6057; --line:#D7D8D0;
  --blue:#2747D9; --blue-soft:#8EA2FF; --coral:#E96343; --yellow:#FFD629;
  --yellow-tint:#FFF5CF; --blue-tint:#E9EDFF;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --gutter:20px; --section:88px; --radius:6px; --radius-lg:18px;
  --fs-display:clamp(88px,27vw,128px); --fs-h2:clamp(30px,9.6vw,48px); --fs-h3:clamp(26px,8.6vw,30px);
  --fs-lead:21px; --fs-body:17px; --fs-small:15px; --fs-mono:12px;
  --ease:cubic-bezier(.2,.7,.2,1); --snap:cubic-bezier(.3,0,0,1); --spring:cubic-bezier(.34,1.56,.64,1);
}
@media (min-width:900px){
  :root{--gutter:32px; --section:128px; --fs-display:clamp(120px,13vw,184px); --fs-h2:clamp(44px,4.6vw,68px); --fs-h3:clamp(32px,3vw,44px); --fs-lead:clamp(22px,1.8vw,26px); --fs-body:18px}
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:72px}
@media (min-width:900px){html{scroll-padding-top:96px}}
main{overflow-x:clip}
html,body{background:var(--paper);color:var(--ink)}
body{font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:4px;z-index:var(--z-skip)}
.skip:focus{top:12px}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono);font-size:var(--fs-mono)}
.section{padding:var(--section) 0}
.wrap.section{padding-inline:var(--gutter)}

/* ---------- type ---------- */
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
h1,h2,h3{font-weight:600;color:var(--ink)}
h2,h3{text-wrap:balance}
p{text-wrap:pretty}
h2{font-size:var(--fs-h2);letter-spacing:-.045em;line-height:1.02}
h3{font-size:var(--fs-h3);letter-spacing:-.035em;line-height:1.08}
.body p{color:var(--muted);max-width:60ch}
.body p+p{margin-top:16px}
.deck{font-size:var(--fs-lead);line-height:1.42;color:var(--ink)!important}

/* ---------- shape marks (small) ---------- */

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:var(--z-header);transition:background 200ms,box-shadow 200ms}
.site-header.on-ink{color:var(--paper);--act-rest:rgba(247,247,242,.28)}
.site-header.on-ink.scrolled{background:color-mix(in srgb,var(--ink) 86%,transparent);box-shadow:0 1px 0 #3A3D36}
.site-header.on-ink .wordmark{color:var(--paper)}
.site-header.scrolled{background:color-mix(in srgb,var(--paper) 84%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
.nav-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:10px}
.wordmark{font-weight:600;font-size:28px;letter-spacing:-.05em;line-height:1}
.site-header nav{order:3;width:100%;display:flex;justify-content:space-between;margin-top:14px;padding:10px 4px 0;border-top:1px solid var(--line);font-size:var(--fs-small)}
.site-header nav a{position:relative;padding:6px 2px}
.talk{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-small);padding:6px 2px}
/* phones: the nav row tucks away once you start reading */
@media (max-width:899px){
  .site-header nav{max-height:60px;overflow:hidden;transition:max-height 260ms var(--ease),margin 260ms var(--ease),padding 260ms var(--ease),opacity 200ms,border-color 200ms}
  .site-header.scrolled nav{max-height:0;margin-top:0;padding-top:0;opacity:0;border-color:transparent}
  .site-header.scrolled .nav-bar{padding-bottom:12px}
}
@media (min-width:900px){
  .nav-bar{flex-wrap:nowrap;height:80px;padding-top:0;padding-bottom:0}
  .site-header nav{order:0;width:auto;margin:0;padding:0;border:0;gap:32px}
}

/* phones: a fixed header, so collapsing the nav row never shifts the page */
@media (max-width:899px){
  .site-header{position:fixed;inset:0 0 auto}
  main{padding-top:99px}
  .nav-bar{padding-top:6px;padding-bottom:0}
  .wordmark,.talk,.site-header nav a{display:inline-flex;align-items:center;min-height:44px}
  .site-header nav{margin-top:4px;padding:0}
  .site-header.scrolled .nav-bar{padding-bottom:4px}
}

/* ---------- hero ---------- */
.hero{display:grid;gap:28px;padding-top:28px}
@media (max-width:899px){.hero-copy{order:1}.portrait{order:2}.hero .proof{order:3}.hero .baseline{display:none}.metric .lab span{font-size:13px}.metric{padding:12px 0}.metric .lab{margin-top:2px}.metric .lab b{font-size:14px}}
.hello{font-size:var(--fs-display);letter-spacing:-.065em;line-height:.88;margin-left:-.045em}
.hello .t{display:inline-block;padding-right:.04em}
.lede{font-size:var(--fs-lead);line-height:1.4;color:var(--muted);max-width:26ch;margin-top:22px}
.lede .tag{color:var(--ink);font-weight:500}
.btn{display:inline-flex;align-items:stretch;margin-top:30px;background:var(--ink);color:var(--paper);border-radius:4px;overflow:hidden;font-size:16px;font-weight:500;transform-origin:left center}
.btn-label{padding:17px 22px}
.btn-cell{position:relative;display:grid;place-items:center;width:56px;background:var(--yellow);color:var(--ink);overflow:hidden}
.portrait{position:relative;justify-self:center;width:min(100%,380px);aspect-ratio:1/1.06;display:grid;align-items:end;justify-items:center}
.portrait .circle{position:absolute;width:84%;aspect-ratio:1;border-radius:50%;background:var(--yellow);bottom:5%;left:8%}
.portrait picture{position:relative;width:90%}
.portrait img{width:100%;filter:grayscale(1) contrast(1.06)}
/* The ring: role, place and local time set on a circle just outside the yellow one, turning slowly.
   site.js places one character per equal angle and picks the size (between --ring-min and --ring-max). */
.portrait{--rg:20px;--ring-gap:8px;--ring-min:8px;--ring-max:9.5px}
.portrait .ring{position:absolute;left:calc(8% - var(--rg));bottom:calc(5% - var(--rg));width:calc(84% + var(--rg) * 2);aspect-ratio:1;overflow:visible;pointer-events:none;transform-origin:50% 50%}
.ring-text,.ring-glyphs{font-family:var(--mono);font-size:9px;font-weight:500;fill:var(--ink)}
.ring-text{letter-spacing:.15em}
.ring-glyphs text{text-anchor:middle}
.ring .sep{fill:var(--muted)}
.ring .colon{fill:var(--blue);font-weight:700;animation:ring-blink 1s steps(1,end) infinite}
@keyframes ring-blink{50%{opacity:0}}
.motion .ring{opacity:0;transition:opacity .9s var(--ease);animation:ring-spin 90s linear infinite;will-change:transform}
.motion .ring.on{opacity:1}
@keyframes ring-spin{to{transform:rotate(360deg)}}
.baseline{height:1px;background:var(--line)}
@media (min-width:900px){
  .hero{grid-template-columns:1.05fr .95fr;align-items:end;gap:24px;padding-top:12px}
  .hero .baseline,.hero .proof{grid-column:1/-1}
  .hero-copy{padding-bottom:64px}
  .lede{max-width:28ch;margin-top:28px}
  .btn{margin-top:36px}
  .btn-label{padding:18px 24px}
  .portrait{width:min(100%,540px,max(400px,calc((100svh - 304px) / 1.06)));--rg:22px;--ring-gap:10px}
}

/* tablets: a two-column hero instead of a stretched phone layout */
@media (min-width:600px) and (max-width:899px){.site-header nav{justify-content:flex-start;gap:32px}}
@media (min-width:600px) and (max-width:899px){.hero{grid-template-columns:1fr 1fr;align-items:end;gap:24px}.hello{font-size:clamp(88px,15vw,128px)}.hero-copy{padding-bottom:40px}}

/* ---------- proof strip: the three results, as cards that straddle the paper/ink edge ---------- */
:root{--straddle:76px}
.proof{position:relative;z-index:1;display:grid;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:2px 20px}
.metric{padding:14px 0}
.metric+.metric{border-top:1px solid var(--line)}
.metric .val{display:block;font-size:clamp(28px,7.4vw,32px);font-weight:400;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}
.metric .val .was{color:var(--muted)}
.metric .val em{font-style:normal;font-weight:600;color:var(--ink)}
.metric{transition:box-shadow 240ms var(--ease),transform 240ms var(--ease)}
@media (hover:hover){.metric:hover{box-shadow:var(--lift);transform:translateY(-2px)}}
.metric .lab{display:grid;gap:2px;font-size:13px;color:var(--muted);margin-top:4px}
.metric .lab b{font-weight:600;color:var(--ink)}
@media (min-width:900px){
  .proof{grid-template-columns:repeat(3,1fr);gap:24px;background:none;border:0;border-radius:0;padding:0}
  .metric{min-height:calc(var(--straddle) * 2);padding:28px;background:var(--white);border:1px solid var(--line);border-radius:16px}
  .metric+.metric{border-top:1px solid var(--line)}
  .metric .val{font-size:clamp(30px,2.5vw,42px);letter-spacing:-.05em;line-height:1.05;white-space:nowrap}
  .metric .lab{font-size:14px;margin-top:12px;gap:3px}
  .metric .lab b{font-size:16px}
  .work.dark{margin-top:calc(-1 * var(--straddle));padding-top:calc(var(--section) + var(--straddle))}
  .stories{padding-bottom:var(--section)}
}

/* ---------- abstract compositions ---------- */
.comp,.contact-disc{position:relative}
.sh{position:absolute;display:block}
.sh.circle,.sh.disc,.sh.dot{border-radius:50%;background:var(--yellow)}
.sh.square{background:var(--blue);border-radius:8%}
.sh.half{background:var(--yellow);border-radius:999px 999px 0 0}
.sh.bar{background:var(--ink);border-radius:999px}
.sh.pivot{background:var(--ink);border-radius:8%}


.comp-p1,.comp-p2,.comp-p3{width:140px;height:84px;margin-bottom:44px}
.comp .bar{height:6px;transform-origin:left center;--from:scaleX(.1)}
.comp .bar.leg{width:6px;height:34px;transform-origin:bottom center;--from:scaleY(.1)}
.comp .square{width:18px;height:18px;--from:translateY(14px) scale(.5)}
.comp .circle{width:20px;height:20px;--from:translateY(-16px) scale(.3)}
/* 01 · the workbench: the work is on the bench, and I come to it */
.comp-p1 .leg:nth-child(1){left:22px;top:50px;--i:0}
.comp-p1 .leg:nth-child(2){left:112px;top:50px;--i:1}
.comp-p1 .bar:nth-child(3){left:8px;top:44px;width:124px;--i:2}
.comp-p1 .square:nth-child(4){left:36px;top:26px;--i:3}
.comp-p1 .square:nth-child(5){left:60px;top:26px;--i:4}
.comp-p1 .circle{left:92px;top:8px;--i:5;--hover:translateY(16px)}
/* 02 · the balance: the call tips toward the light, and it is mine */
.comp-p2 .bar:nth-child(1){left:34px;top:76px;width:72px;transform-origin:center;--i:0}
.comp-p2 .pivot{left:63px;top:62px;width:14px;height:14px;--i:1;--from:translateY(14px) scale(.5)}
.comp-p2 .beam{left:10px;top:56px;width:120px;transform-origin:center;--i:2;--hover:rotate(6deg)}
.comp-p2 .square{left:14px;top:38px;--i:3;--hover:translateY(-5px) rotate(6deg)}
.comp-p2 .circle{left:106px;top:36px;--i:4;--hover:translateY(5px)}
/* 03 · after launch: the next piece, and I place it */
.comp-p3 .bar{left:0;top:78px;width:140px;--i:0}
.comp-p3 .circle{left:16px;top:56px;--i:1;--from:translateX(-16px) scale(.3);--hover:none}
.comp-p3 .square:nth-child(3){left:60px;top:58px;--i:2}
.comp-p3 .square:nth-child(4){left:82px;top:58px;--i:3}
.comp-p3 .square:nth-child(5){left:82px;top:36px;--i:4}
.comp-p3 .square:nth-child(6){left:104px;top:58px;--i:5}
.comp-p3 .square:nth-child(7){left:104px;top:36px;--i:6}
.comp-p3 .square.top{left:104px;top:4px;--i:7;--from:translateY(-14px) scale(.5);--hover:translateY(10px)}

/* assemble on view; hover nudges */
.motion [data-shapes] .sh{opacity:0;transform:var(--from,translateY(24px))}
.motion [data-shapes].in .sh{opacity:1;transform:none;transition:transform 900ms var(--spring) calc(var(--i,0)*90ms),opacity 260ms ease calc(var(--i,0)*90ms)}
.motion .principles article:hover [data-shapes].in .sh{transform:var(--hover,none);transition:transform 420ms var(--spring)}


/* ---------- stories ---------- */
.work.dark{padding-bottom:88px}
.work.dark .section-head{margin-bottom:0}
.work.dark h2 .lit{color:var(--yellow)}
/* the three problems: an index on the band, and a stamp on each story */
.problems{list-style:none;display:grid;gap:4px;margin-top:48px}
.problems a{display:grid;gap:8px;padding:18px 0 4px;border-top:1px solid rgba(247,247,242,.14);color:var(--paper);text-decoration:none}
.p-n{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--muted)}
.problems .p-t{font-size:clamp(20px,5.4vw,26px);font-weight:500;letter-spacing:-.025em;line-height:1.15;transition:color 200ms}
.problems a:hover .p-t{color:var(--yellow)}
.stamp{display:flex;align-items:baseline;gap:12px;font-size:18px;font-weight:500;letter-spacing:-.015em;color:var(--ink);margin-bottom:18px}
@media (min-width:900px){.problems{grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}}
.stories{padding-bottom:var(--section)}
.stories .story:first-child{border-top:0}
.section-head{margin-bottom:48px}
.section-deck{font-size:var(--fs-lead);line-height:1.4;color:var(--muted);max-width:36ch;margin-top:20px;text-wrap:balance}
.story{display:grid;grid-template-areas:"head" "viewer" "body";gap:28px;padding:56px 0;border-top:1px solid var(--line)}
.s-head{grid-area:head}
.s-head h3{max-width:16ch}
.s-body{grid-area:body}
.story:last-child{padding-bottom:0}
.s-body p{color:var(--muted);max-width:40ch}
.link{display:inline-flex;align-items:center;gap:12px;margin-top:26px;font-size:var(--fs-small);font-weight:500;padding:4px 0}
@media (min-width:900px){
  .section-head{margin-bottom:72px}
  .story{grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:1fr auto auto 1fr;grid-template-areas:". viewer" "head viewer" "body viewer" ". viewer";column-gap:56px;row-gap:22px;padding:80px 0}
  .s-head h3{font-size:clamp(28px,2.6vw,36px)}
  .s-head .eyebrow{margin-bottom:16px}
}

/* ---------- the demo stage: one frame for all three stories ----------
   The markup is the finished frame (no JavaScript, ?static, reduced motion). With motion on, site.js
   arms a stage ([data-armed]) and plays its beats: select (the inset frame + chip), fill, grow, shrink.
   Shapes keep one job each: the yellow circle is the outcome, blue squares are units, ink bars measure. */
.stage{grid-area:viewer;position:relative;display:grid;grid-template-rows:auto 1fr auto;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;background:var(--field);color:var(--ink);--field:var(--yellow-tint)}
@media (min-width:600px){.stage{aspect-ratio:16/10}}
.stage-tint{--field:var(--blue-tint)}
.stage{--line:#D7D8D0;--muted:#5C6057;--blue:#2347D8}
.dark .stage .act{--act-rest:var(--line)}
.stage-paper{--field:var(--paper)}
.stage-ink{--field:var(--ink);color:var(--paper)}
.stage-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 0}
.stage-status{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--paper);border-radius:999px;padding:5px 10px 5px 8px;white-space:nowrap}
.stage-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--yellow);flex:none}
.stage-ink .stage-status{background:var(--paper);color:var(--ink)}
.stage-body{position:relative;margin:16px 20px 0}
.stage-body>*{position:absolute}
.stage-foot{position:relative;z-index:1;display:flex;justify-content:flex-end;padding:6px 20px 12px}
.stage-ink .replay{color:var(--line)}
/* the kit */
.k-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stage-ink .k-label{color:var(--line)}
.k-num{display:block;font-size:clamp(30px,4.2vw,54px);font-weight:600;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.k-card{display:block;background:var(--white);border-radius:6px;box-shadow:var(--lift)}
.k-circle{display:block;border-radius:50%;background:var(--yellow)}
.k-bar{display:block;height:4px;border-radius:999px;background:var(--ink)}
.stage .sq{display:block;background:var(--blue);border-radius:8%}
.stage .ln{display:block;height:6px;width:var(--w,80%);border-radius:999px;background:var(--line)}
.k-pin{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
.k-pin::before{content:"";width:6px;height:6px;background:currentColor}
.k-frame{left:0;top:0;width:0;height:0;border:1.5px dashed var(--blue);border-radius:4px;opacity:0;pointer-events:none;transition:left 420ms var(--snap),top 420ms var(--snap),width 420ms var(--snap),height 420ms var(--snap),opacity 160ms}
.k-chip{position:absolute;left:-1.5px;bottom:100%;margin-bottom:4px;font-family:var(--mono);font-size:10.5px;line-height:1;background:var(--blue);color:#fff;padding:4px 6px;border-radius:3px;white-space:nowrap}
.k-frame.chip-below .k-chip{bottom:auto;top:100%;margin:4px 0 0}
.stage-ink .k-frame{border-color:var(--blue-soft)}
.stage-ink .k-chip{background:var(--blue-soft);color:var(--ink)}
/* beats: pre-play states exist only on an armed stage */
.stage [data-v]{transition:clip-path 420ms var(--ease),transform 560ms var(--ease),opacity 220ms ease}
.stage.arming,.stage.arming *{transition:none!important}
.motion .stage[data-armed] [data-v=fill]:not(.on){clip-path:inset(0 100% 0 0)}
.motion .stage[data-armed] [data-v=grow]:not(.on){transform:scale(0);opacity:0}
.motion .stage[data-armed] [data-v=show]:not(.on){opacity:0}
.motion .stage[data-armed] [data-v=shrink]:not(.on){transform:none}

/* story 1 · the full run: every step done, by the agent, in minutes, at real volume */
.s1-hero{left:5%;top:3%;display:grid;gap:8px}
.s1-hero .k-num{font-size:clamp(34px,4.2vw,54px);white-space:nowrap}
.s1-was{font-weight:400}
.s1-now{display:inline-block;transform-origin:left 70%}
.stage .s1-now{transition:transform 520ms cubic-bezier(.34,1.56,.64,1),opacity 200ms ease}
.s1-per,.s1-vol{color:var(--ink)!important}
.s1-vol{left:70%;top:89%;font-weight:600;white-space:nowrap}
.s1-paper{left:5%;top:42%;width:12%;height:44%}
.s1-paper .k-card{position:absolute;inset:0;border-radius:4px;display:grid;align-content:start;gap:10px;padding:14px 12px 0}
.s1-paper .k-card:first-child{transform:translate(6px,6px)}
.s1-plate{position:absolute;left:12px;bottom:12%;width:60%;height:16%;border-radius:2px;background:var(--line)}
.s1-c{height:2px;top:64%;background:var(--ink)}
.s1-c1{left:17%;width:4%}.s1-c2{left:36%;width:1.5%}.s1-c3{left:50.5%;width:1.5%}.s1-c4{left:65%;width:5%}
.s1-pt{left:21%;top:36%;width:1px;height:1px}
.s1-run{left:21%;top:36%;width:46%;height:54%;pointer-events:none}
.s1-tile{top:49%;width:13%;height:30%;border-radius:6px;display:grid;align-content:start;gap:10px;padding:12px 12px;transform-origin:center bottom}
.s1-tile .k-label{color:var(--ink);margin-bottom:6px}
.s1-read{left:23%}.s1-check{left:37.5%}.s1-write{left:52%}
.s1-row{display:flex;align-items:center;gap:5px}
.s1-row .sq{width:8px;height:8px;flex:none}
.s1-row .ln{height:4px;flex:none}
.s1-tile .s1-row .ln{width:var(--w)}
.stage .s1-row{transition:opacity 200ms ease calc(140ms + var(--i,0) * 60ms)}
.s1-row:nth-of-type(2){--i:1}.s1-row:nth-of-type(3){--i:2}.s1-row:nth-of-type(4){--i:3}
.motion .stage[data-armed] [data-v]:not(.on) .s1-row{opacity:0}
.s1-erp{left:70%;top:38%;width:24%;height:48%}
.s1-erp>.k-card{position:absolute;inset:0;border-radius:6px}
.s1-erp>.k-card:nth-child(1){transform:translate(12px,-12px)}
.s1-erp>.k-card:nth-child(2){transform:translate(6px,-6px)}
.s1-order{display:grid;align-content:start;gap:11px;padding:0 14px;overflow:hidden}
.s1-order .k-label{display:block;margin:0 -14px 2px;padding:9px 14px;background:var(--blue-tint);color:var(--ink)}
.s1-order .s1-row .ln{width:var(--w)}
@media (max-width:599px){
  .s1-hero{top:2%}
  .s1-paper,.s1-c1{display:none}
  .s1-pt{left:4%;top:31%}.s1-run{left:4%;top:31%;width:92%;height:34%}
  .s1-tile{top:37%;width:26%;height:24%;gap:7px;padding:8px}
  .s1-tile .s1-row:nth-of-type(4){display:none}
  .s1-read{left:7%}.s1-check{left:37%}.s1-write{left:67%}
  .s1-c{top:49%}.s1-c2{left:33%;width:4%}.s1-c3{left:63%;width:4%}
  .s1-c4{left:50%;top:61%;width:2px;height:10%}
  .s1-erp{left:22%;top:71%;width:44%;height:27%}
  .s1-order{gap:7px}.s1-order .s1-row:nth-of-type(4),.s1-order .s1-row:nth-of-type(5){display:none}
  .s1-vol{left:auto;right:4%;top:84%}
}

/* story 2 · the field narrows: 26,326 manuals to one cited page */
.s2-job{left:0;right:0;top:0;display:flex;align-items:baseline;gap:12px;padding-bottom:10px;border-bottom:1px solid rgba(247,247,242,.16);font-size:14px}
.stage-paper .s2-job{border-color:var(--line)}
.s2-result{left:0;top:16%}
.s2-result .k-num{font-size:clamp(28px,3.4vw,44px)}
.s2-lib{left:0;top:50%;width:42%;bottom:2%}
.s2-field{display:block}
.s2-field pattern rect{fill:var(--muted)}
.stage-paper .s2-field pattern rect{fill:#B9BCB2}
.s2-hit{position:absolute;left:98px;top:63px;width:12px;height:12px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 5px rgba(255,214,41,.22)}
.s2-cap{position:absolute;left:0;top:-22px}
.s2-page{left:52%;top:15%;width:45%;bottom:2%;display:grid;align-content:start;gap:10px;padding:16px 18px;color:var(--ink);transform-origin:-14% 40%}
.stage-paper .s2-page{border:1px solid var(--line)}
.s2-page .k-label{color:var(--muted)}
.s2-hl{display:block;background:var(--yellow);padding:4px 6px;margin:0 -6px;font-size:13px;font-weight:500;line-height:1.35;border-radius:2px}

/* story 3 · the last quote is the price: a new job, its match in 157,061 past quotes, the quote */
.s3-hero{left:5%;top:3%;display:grid;gap:8px}
.s3-hero .k-num{font-size:clamp(34px,4.2vw,54px);white-space:nowrap}
.s3-was{font-weight:400}
.s3-now{display:inline-block;transform-origin:left 70%}
.stage .s3-now{transition:transform 520ms cubic-bezier(.34,1.56,.64,1),opacity 200ms ease}
.s3-cap{color:var(--ink)!important}
.s3-job{left:5%;top:46%;width:17%}
.s3-job .k-card{display:grid;gap:9px;padding:12px}
.s3-job .k-card>.k-label{color:var(--ink);margin-bottom:2px}
.s3-ledger{left:35%;top:30%;width:28%;display:grid;gap:8px}
.s3-ledger>.k-label{white-space:nowrap}
.s3-ledger .k-card{display:grid;gap:8px;padding:10px 12px 12px;overflow:hidden}
.s3-th{display:grid;grid-template-columns:1fr 1fr .6fr;gap:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-bottom:6px;border-bottom:1px solid var(--line)}
.s3-win{display:block;height:112px;overflow:hidden}
.s3-rows{display:grid;gap:9px}
.s3-tr{display:grid;grid-template-columns:1fr 1fr .6fr;gap:8px;align-items:center;position:relative}
.s3-tr .ln{width:var(--w)}
.s3-tr{padding-left:13px}
.s3-match .sq{position:absolute;left:0;top:50%;width:7px;height:7px;transform:translateY(-50%)}
.stage .s3-hit{background:var(--ink)}
.s3-echo{display:none}
.s3-echo .sq,.s3-echo .s3-hit{display:none}
.s3-echo{display:grid}.s3-echo .ln{background:var(--line)}
@keyframes s3-scan{to{transform:translateY(calc(-50% - 4.5px))}}
.motion .s3-rows.on{animation:s3-scan 420ms linear 3}
.motion .stage[data-armed] .s3-match:not(.on) .sq,.motion .stage[data-armed] .s3-match:not(.on) .s3-hit{opacity:0}
.s3-job .ln,.s3-ledger .ln,.s3-quote .ln{width:var(--w)}
.s3-row{display:flex;align-items:center;gap:5px}
.s3-row .sq{width:8px;height:8px;flex:none}
.s3-hit{background:var(--ink)}
.s3-p1{left:22%;top:62%;width:13%;height:3px}
.s3-p2{left:63%;top:62%;width:9%;height:3px}
.s3-quote{left:72%;top:46%;width:23%;display:grid;gap:10px;padding:12px 14px 16px;transform-origin:left center}
.s3-qh{display:flex;justify-content:space-between;align-items:center}
.s3-qh .k-label{color:var(--ink)}
.s3-qh .k-circle{width:14px;height:14px}
@media (max-width:599px){
  .s3-hero{top:2%}
  .s3-job{left:4%;top:32%;width:28%}.s3-job .k-card{gap:7px;padding:9px}
  .s3-p1{left:32%;top:44%;width:8%;height:2px}
  .s3-ledger{left:40%;top:30%;width:34%}.s3-ledger .k-card{gap:6px;padding:8px}
  .s3-ledger .s3-win{height:70px}
  .s3-p2{left:57%;top:73%;width:2px;height:5%}
  .s3-quote{left:40%;top:78%;width:42%;gap:8px;padding:10px 12px 12px}
}

/* ---------- leadership: the same system, inverted ---------- */
.dark{background:var(--ink);color:var(--paper);--line:#3A3D36;--muted:#B9BCB2;--blue:var(--blue-soft)}
.dark h2,.dark h3{color:var(--paper)}
.dark .eyebrow{color:#9EA197}
.dark .body p{color:var(--muted)}
.lead-grid{display:grid;gap:56px}
.lead-grid h2+.body{margin-top:28px}
/* the portfolio view: a dark board card, built from the demo kit */
.value-composition{position:relative;background:var(--ink);color:var(--paper);border-radius:var(--radius-lg);padding:22px 24px 24px;--muted:#B9BCB2;--line:#3A3D36;--paper:#F7F7F2}
.value-composition .k-label{color:#9EA197}
.value-composition .stage-status{background:var(--paper);color:var(--ink)}
.value-composition .k-frame{position:absolute;border-color:var(--blue-soft)}
.value-composition .k-chip{background:var(--blue-soft);color:var(--ink)}
.vd-bar{display:flex;justify-content:space-between;align-items:center;gap:12px}
.vd-main{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:end;margin-top:22px}
.vd-value .k-label{display:block}
.vd-num{display:block;margin-top:6px;font-size:clamp(48px,5.4vw,72px);font-weight:600;letter-spacing:-.05em;line-height:.95;color:var(--paper);font-variant-numeric:tabular-nums}
.vd-sub{display:block;margin-top:8px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.vd-spark{display:block;width:100%;height:auto;max-height:110px}
.vd-spark path{fill:none;stroke:var(--yellow);stroke-width:3;stroke-linecap:round}
.vd-spark circle{fill:var(--yellow)}
.vd-tiles{display:grid;grid-template-columns:repeat(33,1fr);gap:3px;margin-top:22px}
.vd-tiles i{display:block;aspect-ratio:1;border-radius:2px;background:var(--blue-soft)}
.vd-cap{display:block;margin-top:10px}
.vd-rows{margin-top:18px;border-top:1px solid var(--line)}
.vd-rows div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.vd-rows span{color:var(--muted)}
.vd-rows b{font-weight:600;color:var(--paper);font-variant-numeric:tabular-nums;white-space:nowrap}
.value-composition [data-v]{transition:clip-path 520ms var(--ease),opacity 260ms ease}
.motion .value-composition[data-armed] [data-v=fill]:not(.on){clip-path:inset(0 100% 0 0)}
.motion .value-composition[data-armed] [data-v=show]:not(.on){opacity:0}
@media (max-width:599px){.vd-main{grid-template-columns:1fr}.vd-tiles{grid-template-columns:repeat(21,1fr)}}
.facts{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px 72px;margin-top:64px;padding-top:32px}
.facts::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--line)}
.fact{display:grid;gap:6px}
.fact-val{font-size:clamp(34px,9vw,52px);font-weight:500;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.05}
.fact-t{color:var(--muted)}
@media (min-width:900px){
  .lead-grid{grid-template-columns:1fr 1fr;gap:72px;align-items:center}
  .facts{grid-template-columns:1fr 1fr;margin-top:88px}
}

/* ---------- principles ---------- */
.principles{display:grid;gap:16px}
.principles article{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 24px}
.principles .n{display:block;font-family:var(--mono);font-size:var(--fs-mono);color:var(--muted);margin-bottom:10px}
.principles h3{font-size:clamp(24px,6.5vw,30px);margin-bottom:12px}
.principles p{color:var(--muted);font-size:var(--fs-small)}
@media (min-width:900px){.principles{grid-template-columns:repeat(3,1fr);gap:24px}.principles article{padding:32px 28px}.principles h3{font-size:clamp(24px,2.2vw,30px)}}

/* ---------- personal, résumé, contact ---------- */
.personal{background:var(--blue);color:var(--paper);padding:var(--section) 0}
.personal .eyebrow,.personal .p-body{color:var(--blue-tint)}
.personal h2{color:var(--paper);max-width:14ch}
.personal .link{color:var(--paper)}
.personal .act{--act-rest:rgba(247,247,242,.35)}
.p-body{margin-top:18px;max-width:52ch}
.p-grid{display:grid;gap:48px}
.wp-field{display:grid;grid-template-columns:repeat(10,1fr);gap:2.5%;width:100%;max-width:440px}
.wp-field .sh{position:static;width:auto;aspect-ratio:1;background:var(--blue-soft);border-radius:12%;--from:scale(.3)}
.wp-field .circle{background:var(--yellow);border-radius:50%;--i:13}
.wp-field .square:nth-child(n+11){--i:2}.wp-field .square:nth-child(n+21){--i:4}
.wp-field .square:nth-child(n+31){--i:6}.wp-field .square:nth-child(n+41){--i:8}
.wp-field .square:nth-child(n+51){--i:10}
@media (min-width:900px){.p-grid{grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}}
.meta{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:8px}

.contact{position:relative;overflow:hidden;padding:var(--section) 0 36px}
.contact-disc{position:absolute;right:-42vw;bottom:-56vw;width:110vw;aspect-ratio:1;pointer-events:none}
.contact-disc .disc{inset:0;--from:scale(.3)}
.contact .wrap{position:relative}
.contact-title{display:inline-block;font-size:clamp(64px,22.5vw,200px);font-weight:600;letter-spacing:-.065em;line-height:.9;margin:20px 0 32px}
.contact-bottom{display:grid;gap:28px}
.c-actions{display:grid;gap:14px;justify-items:start}
.resume{font-size:var(--fs-body);font-weight:500;padding-bottom:4px}
.mail{display:inline-flex;align-items:center;gap:12px;justify-self:start;font-size:clamp(19px,5vw,26px);font-weight:500;padding-bottom:4px}
/* touch targets of at least 44px */
.link,.mail,.resume,.replay{position:relative}
.link::after,.mail::after,.resume::after,.replay::after{content:"";position:absolute;inset:-12px -6px}
.contact-bottom p{color:var(--muted)}
footer{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;margin-top:80px;padding-top:22px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--muted)}
footer .wordmark{font-family:var(--sans);font-size:22px;color:var(--ink)}
.f-links{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.f-links a:hover,.agent-toggle:hover{color:var(--ink)}
.agent-toggle{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;color:var(--muted)}
@media (pointer:coarse){.f-links{row-gap:0}.f-links a,.agent-toggle{display:inline-flex;align-items:center;min-height:44px}}
.agent-toggle i{width:9px;height:9px;border:1.5px dashed var(--blue);border-radius:2px}
.agent-toggle[aria-pressed="false"] i{border-style:solid;border-color:var(--line)}
@media (min-width:900px){.contact-disc{right:-12vw;bottom:-30vw;width:62vw;max-width:900px}.contact-bottom{grid-template-columns:auto 1fr;align-items:end;gap:32px}.c-note{justify-self:end;text-align:right}}

/* small text floor */
.v-foot,.replay{font-size:12px}

/* ---------- actions: one behavior, two families (ported from the 52dcdad action system) ----------
   A button (ink label + yellow arrow cell) and a text link. One SVG arrow, rotated by data-dir.
   On hover or keyboard focus the arrow leaves and its copy arrives; links draw an ink line over
   a resting hairline; the button takes a yellow wipe. Color comes from the surface, never from JS. */
.sprite{position:absolute;width:0;height:0;overflow:hidden} /* the one arrow, defined once and referenced by every action */
.act{--act-dur:280ms;--act-wipe:420ms;--act-ease:cubic-bezier(.22,1,.36,1);--act-rest:var(--line);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.dark .act{--act-rest:rgba(247,247,242,.28)}
.act-icon{position:relative;display:inline-grid;width:16px;height:16px;overflow:hidden;flex:none}
.act-icon .g{grid-area:1/1;display:grid;place-items:center;transition:transform var(--act-dur) var(--act-ease),opacity var(--act-dur) var(--act-ease)}
.act-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.act-icon .copy{opacity:0;transform:translate(-125%,125%)}
.act[data-dir=down] .act-icon svg{transform:rotate(135deg)}
.act[data-dir=down] .act-icon .copy{transform:translateY(-140%)}
.act[data-dir=up] .act-icon svg{transform:rotate(-45deg)}
.act[data-dir=up] .act-icon .copy{transform:translateY(140%)}
.act[data-dir=back] .act-icon svg{transform:rotate(180deg)}
.act[data-dir=back] .act-icon .copy{transform:translate(125%,-125%)}
.act-link{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat,linear-gradient(var(--act-rest),var(--act-rest)) 0 100%/100% 1.5px no-repeat;transition:background-size var(--act-wipe) var(--act-ease),color 200ms}
.act-link.quiet{background-size:0 1.5px,0 1.5px}
.act-link[aria-current]{background-size:100% 1.5px,0 1.5px}
.act-button{position:relative;isolation:isolate;transition:transform 160ms var(--act-ease),box-shadow 160ms ease}
.act-button::before{content:"";position:absolute;inset:0;background:var(--yellow);transform:scaleX(0);transform-origin:right;transition:transform var(--act-wipe) var(--act-ease);z-index:-1}
.act-button .btn-label{transition:color 220ms ease}
.act:focus-visible .act-icon .g:not(.copy){opacity:0;transform:translate(125%,-125%)}
.act[data-dir=down]:focus-visible .act-icon .g:not(.copy){transform:translateY(140%)}
.act[data-dir=up]:focus-visible .act-icon .g:not(.copy){transform:translateY(-140%)}
.act[data-dir=back]:focus-visible .act-icon .g:not(.copy){transform:translate(-125%,125%)}
.act:focus-visible .act-icon .copy{opacity:1;transform:none}
.act-link:focus-visible{background-size:100% 1.5px,100% 1.5px}
.act-button:focus-visible::before{transform:scaleX(1)}
.act-button:focus-visible .btn-label{color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .act:hover .act-icon .g:not(.copy){opacity:0;transform:translate(125%,-125%)}
  .act[data-dir=down]:hover .act-icon .g:not(.copy){transform:translateY(140%)}
  .act[data-dir=up]:hover .act-icon .g:not(.copy){transform:translateY(-140%)}
  .act[data-dir=back]:hover .act-icon .g:not(.copy){transform:translate(-125%,125%)}
  .act:hover .act-icon .copy{opacity:1;transform:none}
  .act-link:hover{background-size:100% 1.5px,100% 1.5px}
  .act-button:hover::before{transform:scaleX(1)}
  .act-button:hover .btn-label{color:var(--ink)}
  .act-button:hover{box-shadow:0 7px 0 -4px var(--ink)}
}
.act-button:active{transform:translateY(2px);box-shadow:none}
@media (forced-colors:active){.act-button{border:1px solid ButtonText}.act-button::before{display:none}.act-link{background:none;text-decoration:underline}}
@media (prefers-reduced-motion:reduce){.act-icon .copy{display:none}.act .act-icon .g{transform:none!important;opacity:1!important}}

/* ---------- global agent layer ---------- */
#agent{position:fixed;inset:0;pointer-events:none;z-index:var(--z-agent);overflow:hidden}
.a-cursor{position:absolute;left:0;top:0;opacity:0;will-change:transform;transition:opacity 200ms}
.a-cursor svg{display:block;fill:var(--blue);stroke:#fff;stroke-width:1.4;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18))}
.a-tag{position:absolute;left:15px;top:17px;font-family:var(--mono);font-size:11px;line-height:1;background:var(--blue);color:#fff;padding:4px 6px;border-radius:3px;white-space:nowrap;transition:opacity 150ms}
.a-frame{position:absolute;left:0;top:0;border:1.5px dashed var(--blue);border-radius:var(--radius);opacity:0;transition:opacity 140ms}
.a-chip{position:absolute;left:-1.5px;bottom:100%;margin-bottom:4px;font-family:var(--mono);font-size:11px;line-height:1;background:var(--blue);color:#fff;padding:5px 7px;border-radius:3px;white-space:nowrap}
.a-frame.confirmed{border-color:var(--ink);border-style:solid}
.a-frame.chip-below .a-chip{bottom:auto;top:100%;margin:4px 0 0}
.a-frame.chip-end .a-chip{left:auto;right:-1.5px}
.a-frame.clipped{visibility:hidden}
.a-frame.dragging{transition:none} /* the frame never lags behind a drag */
.a-frame.on-dark{border-color:var(--blue-soft)}
.a-frame.on-dark .a-chip{background:var(--blue-soft);color:var(--ink)}
.a-frame.on-dark.confirmed{border-color:var(--paper)}

/* ---------- entrance states (only when motion is on) ---------- */
.motion .scene-wait{opacity:0}
/* ?static: the finished page at t=0, nothing in transit */
.static *,.static *::before,.static *::after{transition:none!important;animation:none!important}
/* the footer toggle pauses what keeps moving (WCAG 2.2.2) */
.paused .ring,.paused .ring .colon{animation-play-state:paused}
/* with JavaScript, the agent's frame is the focus indicator on its targets */
.frames [data-agent]:focus-visible{outline-color:transparent}

/* ---------- case-study dialog ---------- */
dialog{margin:auto;width:min(820px,calc(100% - 24px));max-height:90dvh;border:0;padding:0;background:var(--paper);color:var(--ink);overflow:auto;border-radius:20px;box-shadow:0 40px 120px -40px rgba(0,0,0,.45)}
dialog::backdrop{background:rgba(32,34,30,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dialog-close{position:sticky;top:0;z-index:3;display:block;margin:0 0 0 auto;padding:16px 20px;font-family:var(--mono);font-size:12px;background:color-mix(in srgb,var(--paper) 90%,transparent);border-bottom-left-radius:10px}
#case-content{padding:0 24px 8px}
.case{display:none}
.case:target,#case-content .case{display:block}
.case:target{padding:var(--section) 0}
#case-content .case{padding:0}
#case-content .case-back{display:none}
.case .eyebrow{margin:4px 0 12px}
.case h2{font-size:clamp(30px,6vw,46px);max-width:20ch}
.case-beats{display:grid;gap:22px;margin-top:28px}
.case-beats dt{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.case-beats dd{margin-top:6px;color:var(--ink);max-width:62ch}
@media (min-width:900px){.case-beats>div{display:grid;grid-template-columns:170px 1fr;gap:24px;border-top:1px solid var(--line);padding-top:18px}.case-beats dd{margin-top:0}}
.case-foot{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px;font-size:var(--fs-small);font-weight:500}
.case-visual:empty{display:none}
.case-metric{display:block;margin-top:22px;font-size:clamp(22px,4vw,28px);letter-spacing:-.03em;line-height:1.25;color:var(--ink)!important;font-weight:500}
.case-metric::before{content:"";display:inline-block;width:8px;height:8px;margin-right:12px;border-radius:50%;background:var(--yellow);vertical-align:.18em}
.case-metric .was{color:var(--muted)}
.case-stack{font-family:var(--mono);font-size:12px;color:var(--muted);border-block:1px solid var(--line);padding:16px 0;margin-top:28px}
.case-visual{margin:28px 0;pointer-events:none}
.case-visual .stage-foot{display:none}
.case-visual .value-composition .k-frame{display:none}
.dialog-done{display:inline-flex;align-items:center;gap:10px;margin:8px 24px 28px;font-size:var(--fs-small);font-weight:500;padding-bottom:4px}
@media (min-width:900px){#case-content{padding:0 48px 8px}.dialog-done{margin:8px 48px 40px}}
dialog[open]{animation:panel-in 260ms var(--ease) both}
dialog.is-closing{animation:panel-out 240ms var(--ease) both}
@keyframes panel-in{from{opacity:0;transform:translateY(16px) scale(.985)}}
@keyframes panel-out{to{opacity:0;transform:translateY(10px) scale(.99)}}

/* ---------- reduced motion: everything final and still ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}