/* /portfolio: the catalog as an inspected index.
   Shares the homepage's ink / mint / light palette, Instrument Sans and hairline editorial rules.
   Idea: the whole catalog is a set of things being checked. The hero shows its shape (six families,
   one column each) and a scan passes across it; selected work is "checked" Input -> Review -> Output;
   problems link to real entries; the full index reveals each capture like a plate being developed.

   Everything is visible by default. Start-hidden states exist only under .motion (set by portfolio.js
   when IntersectionObserver exists and reduced motion is off), and every animation is inside a
   prefers-reduced-motion: no-preference block. */

:root{
  --paper:#edf0ee; --paper-2:#e2e8e5; --ink:#0c1518; --ink-2:#13221f; --muted:#56676b; --line:#ccd6d3;
  --brand:#0b6b73; --brand-deep:#06393e; --mint:#9fe0d6; --on-dark:#e9f0ee; --on-dark-muted:#8fa5a7; --dark-line:#24363a;
  --amber:#e8a35a; --coral:#ef8a6f;
  --display:"Instrument Sans",ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  --body:"Instrument Sans",ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4vw,64px); --max:1440px; --ease:cubic-bezier(.16,.84,.24,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0b1416; --paper-2:#101c1e; --ink:#e7eeec; --ink-2:#13221f; --muted:#94a8aa; --line:#223338;
  --brand:#5cc4b8; --brand-deep:#06393e; color-scheme:dark}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:72px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0;list-style:none}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.04em;line-height:.98;text-wrap:balance}
button,input{font-family:inherit}
:focus-visible{outline:2px solid var(--focus,var(--brand));outline-offset:4px;border-radius:2px}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.label{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:10px;z-index:100;padding:12px 18px;border-radius:8px;background:var(--mint);color:#062026;font-weight:600;transform:translateY(-160%)}
.skip-link:focus{transform:none;outline-offset:2px}
.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:3px}

/* ---------- buttons ---------- */
.pill{white-space:nowrap;display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 20px;border-radius:999px;font-weight:500;font-size:15px;transition:background .3s,color .3s}
.pill .arr{display:inline-block;transition:transform .35s var(--ease)}
.pill:hover .arr{transform:translateX(4px)}
.pill-light{background:var(--on-dark);color:#0c1518}
.pill-light:hover{background:var(--mint)}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border:0;border-radius:999px;background:var(--btn-bg,var(--ink));color:var(--btn-fg,var(--paper));font:500 15px/1.2 var(--body);cursor:pointer;transition:background .3s,color .3s}
.btn:hover{background:var(--btn-hover,var(--brand));color:var(--btn-hover-fg,var(--paper))}
.btn-quiet{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-weight:500;border-bottom:1px solid currentColor;align-self:center;padding-block:2px}
.btn-quiet:hover{color:var(--link-hover,var(--brand))}

/* ---------- header ---------- */
.head{position:fixed;inset-inline:0;top:0;z-index:40;padding-top:env(safe-area-inset-top,0px);color:var(--on-dark);--focus:var(--mint);transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.head.solid{background:color-mix(in srgb,#0c1518 94%,transparent);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-color:var(--dark-line)}
.head .wrap{display:flex;align-items:center;gap:28px;height:72px}
.brand{display:flex;align-items:center;white-space:nowrap}
.brand img{height:30px;width:auto}
.nav{display:flex;gap:30px;margin-left:auto;font-size:15px;color:var(--on-dark-muted)}
.nav a{position:relative;padding-block:4px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a:hover,.nav a[aria-current]{color:var(--on-dark)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav a[aria-current]::after{transform:scaleX(1);background:var(--mint)}
.mobile-navigation{display:none;position:relative;margin-left:auto}
.mobile-navigation summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:1px solid var(--dark-line);border-radius:999px;font-weight:500;font-size:15px;user-select:none}
.mobile-navigation summary::-webkit-details-marker{display:none}
.mobile-navigation[open] summary{background:#ffffff14}
.mobile-navigation nav{position:absolute;right:0;top:calc(100% + 10px);width:min(320px,calc(100vw - 2 * var(--gutter)));display:grid;padding:8px;background:#0c1518;border:1px solid var(--dark-line);border-radius:14px;box-shadow:0 30px 60px -20px #000c;max-height:calc(100vh - 100px);overflow:auto}
.mobile-navigation nav a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:8px;color:var(--on-dark-muted)}
.mobile-navigation nav a:hover,.mobile-navigation nav a[aria-current]{background:#ffffff10;color:var(--on-dark)}
.mobile-navigation nav a.menu-cta{margin-top:6px;gap:10px;background:var(--on-dark);color:#0c1518;font-weight:500}
.mobile-navigation nav a.menu-cta:hover{background:var(--mint)}
@media (max-width:900px){.nav{display:none}.mobile-navigation{display:block}.head .wrap{gap:12px}}
@media (max-width:560px){.head .pill{display:none}}

/* ---------- hero: the shape of the catalog ---------- */
.hero{position:relative;background:#0c1518;color:var(--on-dark);overflow:hidden;isolation:isolate;--focus:var(--mint)}
.hero .wrap{padding-block:clamp(112px,12vw,150px) clamp(40px,5vw,72px)}
.eyebrow{margin:0 0 22px;font:600 13.5px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.hero h1{font-size:clamp(46px,7.2vw,116px);font-weight:600;letter-spacing:-.045em;line-height:.96}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.hero h1 .ln>span{display:block}
.hero h1 .soft{color:var(--mint)}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:end;margin-top:clamp(28px,3.4vw,48px);padding-top:26px;border-top:1px solid var(--dark-line)}
.hero-foot p{max-width:42em;color:var(--on-dark-muted);font-size:clamp(16px,1.3vw,19px)}
.hero-acts{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center}
.ghost{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:500;color:var(--on-dark)}
.ghost .cue{width:30px;height:1px;background:currentColor;position:relative;overflow:hidden}
.ghost .cue::after{content:"";position:absolute;inset:0;background:var(--mint);transform:translateX(-100%)}
@media (max-width:760px){.hero-foot{grid-template-columns:1fr}}

.wall{position:relative;margin-top:clamp(36px,4.4vw,60px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 12px;align-items:start;isolation:isolate}
.wall::before{content:"";position:absolute;inset:-44px -24px -20px;z-index:-1;pointer-events:none;background-image:linear-gradient(#9fe0d612 1px,transparent 1px),linear-gradient(90deg,#9fe0d612 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 50% 45%,#000 20%,transparent 75%)}
.wall-col{min-width:0}
.wall-head{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:baseline;align-content:start;min-height:64px;margin-bottom:10px;border-bottom:1px solid var(--dark-line)}
.wall-head::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--mint);opacity:0}
.wall-no{font:600 12.5px/1 var(--body);letter-spacing:.12em;color:var(--mint)}
.wall-title{font-size:13.5px;font-weight:600;line-height:1.25;letter-spacing:.01em;color:var(--on-dark);transition:color .3s}
.wall-count{font-size:13px;color:var(--on-dark-muted);font-variant-numeric:tabular-nums}
.wall-desc,.meter{display:none}
.wall-head:hover .wall-title{color:var(--mint)}
.wall-tiles{display:grid;gap:5px}
.wall-tile{position:relative;display:block;height:34px;padding:0 11px;border-radius:8px;border:1px solid #ffffff1a;background:linear-gradient(160deg,#ffffff12,#ffffff05);font-size:13.5px;line-height:32px;color:#cfdcdb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .25s,border-color .25s}
.wall-tile::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--mint);background:#9fe0d61f;opacity:0;pointer-events:none}
.wall-tile:hover,.wall-tile:focus-visible{color:#fff;border-color:#9fe0d699}
.beam{position:absolute;top:-8px;bottom:0;left:0;width:2px;background:#d8fff8;box-shadow:0 0 18px 4px #9fe0d6aa;opacity:0;pointer-events:none}
.beam::before{content:"";position:absolute;top:0;bottom:0;right:2px;width:150px;background:linear-gradient(90deg,transparent,#9fe0d61c)}

/* below 1100px the tiles give way to a compact family index: same links, same six ids */
@media (max-width:1099px){
  .wall{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,5vw,64px)}
  .wall::before,.beam,.wall-tiles{display:none}
  .wall-head{min-height:0;margin:0;padding:20px 0 22px;gap:6px 14px}
  .wall-title{font-size:clamp(20px,2.4vw,26px);font-weight:500;letter-spacing:-.02em}
  .wall-count{font-size:15px}
  .wall-desc{display:block;grid-column:2/-1;color:var(--on-dark-muted);font-size:15px;line-height:1.45}
  .meter{display:flex;flex-wrap:wrap;gap:4px;grid-column:2/-1;margin-top:6px}
  .meter i{width:10px;height:10px;border-radius:3px;background:#9fe0d640;position:relative}
}
@media (max-width:700px){.wall{grid-template-columns:1fr}}

/* ---------- section scaffolding ---------- */
.sec-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px;padding-bottom:28px;border-bottom:1px solid var(--ink)}
.sec-top h2{font-size:clamp(36px,5vw,76px)}
.sec-top p{max-width:32em;color:var(--muted)}

/* ---------- selected work ---------- */
.sw{padding-top:clamp(88px,10vw,150px)}
.sw>.wrap{padding-bottom:clamp(40px,5vw,72px)}
.sw-toc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,3vw,48px);margin-top:12px}
.sw-toc a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 14px;align-items:baseline;padding-block:22px;border-bottom:1px solid var(--line);transition:border-color .3s}
.sw-toc .n{font-size:14px;font-weight:600;letter-spacing:.1em;color:var(--brand)}
.sw-toc b{font-size:clamp(24px,2.2vw,32px);font-weight:500;letter-spacing:-.03em;line-height:1.05;transition:color .3s}
.sw-toc small{grid-column:2;font-size:14px;color:var(--muted)}
.sw-toc i{grid-row:1;grid-column:3;font-style:normal;transition:transform .5s var(--ease)}
.sw-toc a:hover{border-color:var(--ink)}
.sw-toc a:hover b{color:var(--brand)}
.sw-toc a:hover i{transform:translateY(4px)}
@media (max-width:860px){.sw-toc{grid-template-columns:1fr}}

.story-panel{position:relative;overflow:hidden;padding-block:clamp(72px,9vw,140px);--acc:var(--brand);--scan-core:var(--brand);--link-hover:var(--brand)}
.story-panel[data-tone="paper"]{background:var(--paper-2);color:var(--ink)}
.story-panel[data-tone="ink"],.story-panel[data-tone="deep"]{color:var(--on-dark);--acc:var(--mint);--scan-core:#d8fff8;--btn-bg:var(--on-dark);--btn-fg:#0c1518;--btn-hover:var(--mint);--btn-hover-fg:#062026;--link-hover:var(--mint);--focus:var(--mint)}
.story-panel[data-tone="ink"]{background:#0c1518}
.story-panel[data-tone="deep"]{background:var(--brand-deep)}
.kicker{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid currentColor;font-size:14px;letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.kicker>span{opacity:.85}
.kicker .st{display:inline-flex;align-items:center;gap:8px}
.kicker .st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.ch-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,88px);align-items:start;margin-top:clamp(36px,5vw,64px)}
@media (max-width:960px){.ch-grid{grid-template-columns:1fr}}
.ch-copy{min-width:0}
.ch-copy h3{font-size:clamp(44px,5.2vw,92px)}
.ch-copy .line{font-family:var(--display);font-size:clamp(22px,2.2vw,32px);line-height:1.15;letter-spacing:-.02em;margin-top:22px;max-width:18ch}
.ch-copy .lede{margin-top:20px;max-width:34em;opacity:.9}
.ch-copy .aud{margin-top:14px;opacity:.9}
.ch-copy .aud b{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;opacity:.7;margin-right:6px}
.fact{margin-top:clamp(24px,3vw,36px);display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;padding-top:16px;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.fact dt{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;opacity:.66;padding-top:3px}
.fact dd{font-size:16px;line-height:1.55;opacity:.9}
@media (max-width:520px){.fact{grid-template-columns:1fr;gap:4px}}

/* Input -> Review -> Output: a rail that lights step by step once the chapter is seen */
.flow{margin-top:clamp(26px,3.2vw,40px);padding-top:22px;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.flow li{position:relative;display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;padding:0 0 22px 38px}
.flow li:last-child{padding-bottom:4px}
.flow li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--acc);background:var(--acc);box-sizing:border-box}
.flow li:not(:last-child)::after{content:"";position:absolute;left:7.5px;top:24px;bottom:2px;width:1px;background-color:color-mix(in srgb,currentColor 24%,transparent);background-image:linear-gradient(var(--acc),var(--acc));background-repeat:no-repeat;background-position:top;background-size:100% 100%}
.flow .k{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;opacity:.7;padding-top:2px}
.flow .v{font-size:16.5px;line-height:1.45}
@media (max-width:520px){.flow li{grid-template-columns:1fr;gap:2px}}

.story-boundary{margin-top:clamp(20px,2.4vw,28px);border-top:1px solid color-mix(in srgb,currentColor 22%,transparent);border-bottom:1px solid color-mix(in srgb,currentColor 22%,transparent)}
.story-boundary summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:52px;cursor:pointer;list-style:none;font-weight:500;font-size:16px}
.story-boundary summary::-webkit-details-marker{display:none}
.story-boundary summary span{font-size:24px;line-height:1;color:var(--acc,var(--brand));transition:transform .3s var(--ease)}
.story-boundary[open] summary span{transform:rotate(45deg)}
.story-boundary p{padding:2px 0 18px;max-width:40em;font-size:15.5px;opacity:.9}
.acts{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center;margin-top:clamp(22px,2.6vw,32px)}

.plate{position:relative;min-width:0}
.plate-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:14px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;opacity:.75}
.plate .frame{position:relative;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 60px 120px -50px #000c,0 0 0 1px #ffffff14}
[data-tone="paper"] .plate .frame{box-shadow:0 60px 120px -60px #0c151866,0 0 0 1px #0c151814}
.plate img{width:100%;height:auto}
.plate figcaption{margin-top:14px;font-size:13.5px;opacity:.72;max-width:40em}
.scan{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--scan-core);box-shadow:0 0 18px 4px color-mix(in srgb,var(--scan-core) 60%,transparent);opacity:0;pointer-events:none}

/* ---------- product workflows ---------- */
.stories{padding-block:clamp(88px,10vw,150px)}
.project-story{margin-top:clamp(56px,7vw,104px)}
.story-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,88px);align-items:start;padding-top:28px;border-top:1px solid var(--ink)}
.project-story h3{font-size:clamp(40px,4.6vw,76px);margin-top:14px}
.story-lead{font-family:var(--display);font-size:clamp(21px,2vw,30px);line-height:1.15;letter-spacing:-.02em;margin-top:20px;max-width:20ch}
.story-text{margin-top:16px;max-width:34em;color:var(--muted)}
.project-story .story-boundary{margin-top:0}
@media (max-width:860px){.story-head{grid-template-columns:1fr}}

.sequence{--gap:clamp(20px,3vw,44px);--p:1;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(36px,5vw,64px);padding-top:38px}
.sequence::before,.sequence::after{content:"";position:absolute;top:8px;left:0;right:calc((100% - 2 * var(--gap)) / 3 - 16px);height:1px}
.sequence::before{background:var(--line)}
.sequence::after{background:var(--brand);transform-origin:left;transform:scaleX(var(--p))}
.seq-step{position:relative;display:grid;gap:4px;align-content:start;min-width:0}
.seq-step::before{content:"";position:absolute;top:-38px;left:0;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--brand);background:var(--brand);box-sizing:border-box;z-index:1}
.seq-step strong{font-size:clamp(20px,1.8vw,26px);font-weight:500;letter-spacing:-.02em}
.seq-step>span{color:var(--muted);font-size:15.5px}
.seq-step figure{margin-top:14px}
.seq-step img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:#fff}
.seq-step figcaption{margin-top:10px;font-size:13.5px;color:var(--muted)}
@media (max-width:760px){
  .sequence{grid-template-columns:1fr;padding:0 0 0 40px;row-gap:40px}
  .sequence::before,.sequence::after{top:8px;bottom:0;left:7.5px;right:auto;width:1px;height:auto}
  .sequence::after{transform-origin:top;transform:scaleY(var(--p))}
  .seq-step::before{top:2px;left:-40px}
}

.story-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,88px);align-items:start;padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--ink)}
.story-split .story-copy{min-width:0}
.story-split h3{margin-top:12px}
.story-facts{margin-top:clamp(22px,3vw,34px);display:grid;gap:0}
.story-facts div{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;padding-block:14px;border-top:1px solid var(--line)}
.story-facts dt{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--muted);padding-top:3px}
.story-facts dd{font-size:16px}
.story-split .story-boundary{margin-top:clamp(18px,2.4vw,26px)}
.story-split .acts{--btn-hover:var(--brand)}
@media (max-width:900px){.story-split{grid-template-columns:1fr}}

.retrieval-diagram{--focus:var(--mint);display:grid;padding:clamp(20px,3vw,36px);border-radius:16px;background:#0c1518;color:var(--on-dark);border:1px solid var(--dark-line);box-shadow:0 50px 90px -50px #0c1518aa}
.diagram-label{font:600 12.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-bottom:22px}
.retrieval-node{position:relative;display:grid;gap:2px;padding:14px 16px;border-radius:12px;border:1px solid #ffffff1f;background:linear-gradient(160deg,#ffffff12,#ffffff04)}
.retrieval-node small{font:600 11.5px/1.4 var(--body);letter-spacing:.12em;color:#a7bbbc}
.retrieval-node strong{font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.retrieval-node span{color:#a7bbbc;font-size:14.5px;line-height:1.4}
.retrieval-branches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.diagram-connector{position:relative;display:block;width:1px;height:34px;margin-inline:auto;background:#ffffff2e;overflow:hidden}
.diagram-connector::after{content:"";position:absolute;left:-1px;top:-14px;width:3px;height:14px;border-radius:2px;background:var(--mint);box-shadow:0 0 10px var(--mint);opacity:0}
.retrieval-diagram>p{margin-top:20px;font-size:13px;color:#8fa5a7}
@media (max-width:520px){.retrieval-branches{grid-template-columns:1fr}}

/* ---------- start from the problem ---------- */
.finder{background:var(--ink-2);color:var(--on-dark);padding-block:clamp(88px,11vw,160px);--focus:var(--mint)}
.finder .sec-top{border-color:var(--on-dark)}
.finder .sec-top p{color:var(--on-dark-muted)}
.find-list{margin-top:6px}
.find-row{position:relative;display:grid;grid-template-columns:56px minmax(0,1.1fr) minmax(0,1fr);gap:18px clamp(20px,4vw,64px);align-items:start;padding-block:clamp(26px,3vw,42px)}
.find-row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--dark-line);transform-origin:left}
.find-row .n{font:600 14px/1 var(--body);letter-spacing:.1em;color:var(--mint);padding-top:.8em}
.find-main h3{font-size:clamp(25px,2.8vw,42px);line-height:1.04;letter-spacing:-.035em;transition:transform .6s var(--ease),color .3s}
.find-main p{margin-top:12px;max-width:30em;color:var(--on-dark-muted);font-size:16px}
.find-names{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;padding-top:6px}
.find-names a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #9fe0d666;font-weight:500;font-size:15px;transition:background .25s,color .25s,border-color .25s}
.find-names a:hover,.find-names a:focus-visible{background:var(--mint);color:#062026;border-color:var(--mint)}
@media (hover:hover){.find-row:hover .find-main h3{transform:translateX(14px);color:var(--mint)}}
@media (max-width:900px){.find-row{grid-template-columns:40px minmax(0,1fr)}.find-names{grid-column:2}}

/* ---------- full index ---------- */
.browse{padding-block:clamp(88px,11vw,160px)}
.catalog-controls{margin-top:30px;display:grid;gap:18px}
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters button{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--ink);font:500 15px/1 var(--body);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.filters button span{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.filters button:hover{border-color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filters button[aria-pressed="true"] span{color:inherit;opacity:.75}
.search-row{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
.portfolio-search{position:relative;display:block;flex:1 1 320px;max-width:520px}
.portfolio-search svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.portfolio-search input{width:100%;min-height:48px;padding:10px 18px 10px 46px;border-radius:999px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);font:400 17px/1.4 var(--body)}
.portfolio-search input::placeholder{color:var(--muted);opacity:1}
#results-count{color:var(--muted);font-size:15px;font-variant-numeric:tabular-nums}
.family-notes{min-height:3.2em}
.family-note{max-width:46em;color:var(--muted);font-size:15.5px}
.family-note b{color:var(--ink);font-weight:500}

.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(44px,4.6vw,72px) clamp(22px,2.6vw,40px);align-items:start;margin-top:clamp(28px,3.4vw,44px)}
@media (max-width:1100px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.product-grid{grid-template-columns:1fr}}
.product-card{display:grid;gap:14px;align-content:start;min-width:0;padding-top:16px;border-top:1px solid var(--ink)}
.card-top{display:flex;justify-content:space-between;gap:16px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--muted)}
.card-top span:last-child{text-align:right}
.catalog-card-heading{display:grid;gap:4px}
.card-description{display:grid;gap:10px;align-content:start}
.catalog-card-heading h3{font-size:clamp(26px,2.3vw,34px);line-height:1.02}
.card-audience{color:var(--muted);font-size:15.5px}
.card-media{position:relative}
@supports (grid-template-rows:subgrid){
  .product-grid{row-gap:14px}
  .product-card{grid-template-rows:subgrid;grid-row:span 6;row-gap:14px;padding-bottom:clamp(28px,3.5vw,56px)}
}
@media (max-width:700px){
  .filters{flex-wrap:nowrap;overflow-x:auto;padding-block:4px 8px;scrollbar-width:thin}
  .filters button{flex-shrink:0}
}
.card-evidence{position:absolute;z-index:2;top:10px;left:10px;max-width:calc(100% - 20px);padding:6px 10px 5px;border-radius:999px;background:#0c1518;color:#fff;font:600 11.5px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 0 1px #ffffff26}
.card-evidence[data-kind="access"],.card-evidence[data-kind="config"],.card-evidence[data-kind="mark"]{color:var(--amber);box-shadow:0 0 0 1px #e8a35a99}
.catalog-capture-frame{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;border-radius:8px;border:1px solid var(--line);background:#f1f5f4}
.catalog-capture-frame img{width:100%;height:100%;object-fit:contain;transition:transform .7s var(--ease)}
.catalog-capture-frame::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--brand);box-shadow:0 0 14px 3px color-mix(in srgb,var(--brand) 55%,transparent);opacity:0;pointer-events:none}
@media (hover:hover){.product-card:hover .catalog-capture-frame img{transform:scale(1.025)}}
.catalog-capture figcaption{margin-top:9px;font-size:13px;line-height:1.45;color:var(--muted)}
.card-outcome{font-size:16.5px;line-height:1.5}
.catalog-story-link{justify-self:start;font-size:15px}
.product-card details{border-top:1px solid var(--line)}
.product-card summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:48px;cursor:pointer;list-style:none;font-weight:500;font-size:15.5px}
.product-card summary::-webkit-details-marker{display:none}
.product-card summary span{font-size:24px;line-height:1;color:var(--brand);transition:transform .3s var(--ease)}
.product-card details[open] summary span{transform:rotate(45deg)}
.card-detail{display:grid;gap:10px;padding:2px 0 8px;font-size:15px;color:var(--muted)}
.card-detail strong{color:var(--ink);font-weight:500}
.card-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;padding-top:12px;border-top:1px solid var(--line)}
.card-demo{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;font-size:15.5px;color:var(--brand);border-bottom:1px solid transparent;transition:border-color .25s}
.card-demo:hover{border-bottom-color:currentColor}
.card-index{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.empty-state{margin-top:clamp(28px,3.4vw,44px);padding:clamp(32px,5vw,64px);border:1px dashed var(--muted);border-radius:16px;text-align:center;display:grid;gap:10px;justify-items:center}
.empty-state h3{font-size:clamp(26px,3vw,40px)}
.empty-state p{color:var(--muted)}
.to-filters{margin-top:clamp(36px,5vw,64px)}

/* ---------- closing ---------- */
.close{background:var(--brand-deep);color:var(--on-dark);padding-block:clamp(96px,13vw,190px);--focus:var(--mint)}
.close .label{color:var(--mint);margin-bottom:clamp(20px,3vw,32px)}
.close h2{font-size:clamp(52px,9vw,156px);font-weight:600;letter-spacing:-.045em;line-height:.96;max-width:10ch}
.close h2 .ln{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.close h2 .ln>span{display:block}
.close-row{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between;margin-top:clamp(36px,5vw,56px);padding-top:28px;border-top:1px solid #9fe0d63d}
.close-row p{color:#c4d6d4;max-width:34em}
.close-acts{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.close .mail{color:#c4d6d4;border-bottom:1px solid #9fe0d666;padding-block:10px 2px;word-break:break-all}
.close .mail:hover{color:#fff}

/* ---------- footer (same as the homepage) ---------- */
.foot{background:#0c1518;color:var(--on-dark-muted);overflow:hidden;--focus:var(--mint)}
.foot .top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 40px;padding-block:40px 0;font-size:14px}
.foot nav{display:flex;flex-wrap:wrap;gap:12px 28px}
.foot nav a{padding-block:4px}
.foot nav a:hover{color:var(--on-dark)}
.flogo{padding-block:64px 48px}
.flogo img{width:min(100%,760px);height:auto}

/* ---------- hover / focus preview ---------- */
.peek{position:fixed;left:0;top:0;z-index:60;width:min(380px,32vw);pointer-events:none;will-change:transform}
.peek-in{border-radius:10px;overflow:hidden;background:#0c1518;border:1px solid #ffffff22;box-shadow:0 40px 80px -30px #000a;opacity:0;transform:scale(.94);clip-path:inset(10% 10% 10% 10% round 10px);transition:opacity .25s,clip-path .45s var(--ease),transform .45s var(--ease)}
.peek.on .peek-in{opacity:1;transform:none;clip-path:inset(0 round 10px)}
.peek img{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;background:#fff;opacity:0;transition:opacity .2s}
.peek img.ready{opacity:1}
.peek p{padding:10px 14px 13px;font-size:13px;line-height:1.4;color:#c5d3d3}
.peek b{display:block;font-size:15px;font-weight:600;color:#fff}
@media (hover:none),(max-width:820px){.peek{display:none}}

/* =====================================================================
   Motion layer. Nothing below is needed to read or use the page.
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @keyframes up{from{transform:translateY(105%)}to{transform:none}}
  @keyframes fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes cue{60%,100%{transform:translateX(100%)}}

  /* hero: headline, then the family wall assembles column by column */
  .eyebrow{animation:fade 1.2s .1s var(--ease) both}
  .hero h1 .ln>span{animation:up 1.2s var(--ease) both}
  .hero h1 .ln:nth-child(2)>span{animation-delay:.1s}
  .hero-foot{animation:fade 1.2s .5s var(--ease) both}
  .ghost .cue::after{animation:cue 2.4s var(--ease) infinite}

  @keyframes tile-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  @keyframes head-in{from{opacity:0}to{opacity:1}}
  .wall-head{animation:head-in .8s calc(.5s + var(--c) * .09s) both}
  .wall-tiles li{animation:tile-in .8s var(--ease) calc(.6s + var(--c) * .09s + var(--r) * .035s) both}
  .meter i{animation:tile-in .6s var(--ease) calc(.6s + var(--c) * .09s) both}

  /* a scan crosses the six families, "checking" each column as it passes (one 12s loop, synced by column) */
  @keyframes beam{0%{left:0;opacity:0}2%{opacity:1}46%{left:100%;opacity:1}50%,100%{left:100%;opacity:0}}
  @keyframes flash{0%{opacity:0}6%{opacity:1}18%,100%{opacity:0}}
  .beam{animation:beam 12s linear 2s infinite}
  .wall-tile::after,.wall-head::after,.meter i::after{animation:flash 12s linear calc(2s + var(--c) * .88s + var(--r, 0) * .03s) infinite}
  .meter i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--mint);opacity:0}
  .wall.off *,.wall.off *::before,.wall.off *::after{animation-play-state:paused}

  /* Input -> Review -> Output lights in order once the flow is seen */
  .motion .flow:not(.in) li::before{background:transparent}
  .motion .flow:not(.in) li:not(:last-child)::after{background-size:100% 0}
  .motion .flow li::before{transition:background .4s ease calc(.7s + var(--i) * .5s)}
  .motion .flow li:not(:last-child)::after{transition:background-size .5s linear calc(.9s + var(--i) * .5s)}
  @keyframes tick{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 60%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
  .motion .flow.in li::before{animation:tick .9s ease-out calc(.7s + var(--i) * .5s) both}

  /* the screenshot is revealed by a scan that follows the edge of the wipe, then drifts against the text */
  .motion .plate{transform:translate3d(0,var(--dy,0px),0)}
  .motion .plate:not(.in) img{clip-path:inset(0 100% 0 0)}
  .motion .plate.in img{clip-path:inset(0);transition:clip-path 1.4s var(--ease) .15s}
  @keyframes scanx{0%{left:0;opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
  .motion .plate.in .scan{animation:scanx 1.4s var(--ease) .15s both}

  /* Album Approve: the line fills as the section is scrolled; each step lights when it is reached */
  .motion .sequence{--p:0}
  .motion .seq-step:not(.on)::before{background:var(--paper)}
  .seq-step::before{transition:background .35s}

  /* Pulpit: data moves down the diagram, lighting each stage in turn */
  @keyframes drop{0%,100%{transform:translateY(0);opacity:0}2%{opacity:1}16%{transform:translateY(50px);opacity:1}18%{transform:translateY(50px);opacity:0}}
  @keyframes node{0%,100%{opacity:0}6%,24%{opacity:1}}
  .retrieval-node::before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid #9fe0d6b3;background:#9fe0d61c;opacity:0;pointer-events:none;animation:node 7.2s linear calc(var(--k) * 1.2s) infinite}
  .diagram-connector::after{animation:drop 7.2s linear infinite}
  .retrieval-node+.diagram-connector::after{animation-delay:.4s}
  .retrieval-branches+.diagram-connector::after{animation-delay:1.6s}
  .retrieval-diagram.off *,.retrieval-diagram.off *::before,.retrieval-diagram.off *::after{animation-play-state:paused}

  /* problems: rules draw, entries arrive in sequence */
  .motion .find-row:not(.in)::after{transform:scaleX(0)}
  .motion .find-row::after{transition:transform 1.2s var(--ease)}
  .motion .find-row:not(.in) .find-names a{opacity:0;transform:translateY(10px)}
  .motion .find-row .find-names a{transition:opacity .6s var(--ease) calc(.25s + var(--k) * .08s),transform .6s var(--ease) calc(.25s + var(--k) * .08s),background .25s,color .25s,border-color .25s}
  .motion .find-row:not(.in) .find-main h3{transform:translateY(14px);opacity:.0}
  .motion .find-row .find-main h3{transition:transform .8s var(--ease),opacity .8s var(--ease),color .3s}
  .motion .find-row.in .find-main h3{opacity:1}

  /* the index: each capture is developed when its card is first seen; filtering settles cards back in */
  .motion .product-card:not([data-seen]) .catalog-capture-frame img{clip-path:inset(0 0 100% 0)}
  .motion .product-card[data-seen] .catalog-capture-frame img{clip-path:inset(0);transition:clip-path .9s var(--ease) var(--d,0s),transform .7s var(--ease)}
  @keyframes scany{0%{top:0;opacity:1}85%{opacity:1}100%{top:calc(100% - 2px);opacity:0}}
  .motion .product-card[data-seen] .catalog-capture-frame::after{animation:scany .9s var(--ease) var(--d,0s) both}
  @keyframes card-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .motion .product-card[data-refresh]{animation:card-in .5s var(--ease) var(--d,0s) both}
  .family-note:not([hidden]){animation:fade .5s var(--ease) both}
  .product-card details[open] .card-detail{animation:fade .4s var(--ease) both}
  .story-boundary[open] p{animation:fade .4s var(--ease) both}

  /* closing headline writes itself up from its baseline */
  .motion .close h2:not(.in) .ln>span{transform:translateY(105%)}
  .motion .close h2 .ln>span{transition:transform 1.2s var(--ease)}

  .mobile-navigation[open] nav{animation:fade .35s var(--ease) both}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}
}
@media print{
  .head,.peek,.catalog-controls,.beam{display:none!important}
  .hero,.finder,.close,.story-panel[data-tone="ink"],.story-panel[data-tone="deep"]{background:#fff!important;color:#000!important}
}