/* ==========================================================================
   Primofort — homepage variant 5: "The index"
   Same palette, same three typefaces, same content as the live homepage.
   What changes is density: the page is built as a numbered technical index —
   hairline rules, tight rows, no cards, big numerals as section markers, and
   content that expands and sorts in place instead of sitting in boxes.
   Token block below is copied verbatim from assets/css/site.css so colour and
   type cannot drift from the main site.
   ========================================================================== */

@font-face{font-family:"Archivo";src:url(../assets/fonts/archivo-var.woff2) format("woff2-variations");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url(../assets/fonts/plexsans-var.woff2) format("woff2-variations");
  font-weight:100 700;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url(../assets/fonts/plexmono-var.woff2) format("woff2-variations");
  font-weight:100 700;font-style:normal;font-display:swap}

:root{
  --bg:#0b0c0e; --bg2:#101114; --card:#15161a; --card2:#1b1d22; --raised:#212329;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.055);
  --ink:#f2f2ef; --dim:#a8aaa6; --faint:#73756f;
  --brand:#f5b301;
  --amber:#ffb454;
  --steel:#7da2c4;
  --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --sans:"Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"Plex Mono",ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,monospace;
  --s1:8px; --s2:14px; --s3:22px; --s4:34px; --s5:52px; --s6:76px; --s7:104px; --s8:132px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%}
body{background:var(--bg);color:var(--ink);font:400 15.5px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700}
.num,table,.stat b{font-variant-numeric:tabular-nums}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(20px,3.4vw,44px)}
.mono{font-family:var(--mono)}

.mock{background:#1a1503;border-bottom:1px solid #3a2f06;color:#e8c15a;
  font:500 12.5px/1.5 var(--mono);text-align:center;padding:7px 16px}
.mock b{color:#ffd36b}
.mock a{color:#ffd36b;text-decoration:underline}

.btn{display:inline-block;background:var(--brand);color:#151004;font-family:var(--display);
  font-weight:700;font-size:15px;padding:13px 22px;border-radius:8px;
  transition:background .18s,transform .18s}
.btn:hover{background:#ffc51f;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.28)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn.sm{padding:9px 16px;font-size:13.5px;white-space:nowrap}

.confirm{display:inline-block;vertical-align:.32em;margin-left:6px;
  font:600 9px/1 var(--mono);letter-spacing:.08em;background:rgba(255,180,84,.11);
  color:var(--amber);border:1px solid rgba(255,180,84,.4);border-radius:3px;
  padding:3px 5px;cursor:help}
.confirm:hover{background:rgba(255,180,84,.18);border-color:var(--amber)}

/* ---------- header: the index itself ------------------------------------ */
.top{position:sticky;top:0;z-index:60;background:rgba(11,12,14,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:58px}
.wordmark{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em}
.wordmark span{color:var(--brand)}
.idx{display:flex;gap:2px;margin-left:auto;font:500 11px/1 var(--mono);letter-spacing:.1em}
.idx a{color:var(--faint);padding:8px 9px;border-bottom:1px solid transparent;
  white-space:nowrap;transition:color .2s,border-color .2s}
.idx a:hover{color:var(--dim)}
.idx a.on{color:var(--brand);border-bottom-color:var(--brand)}
.reach{font:500 12px/1.5 var(--mono);color:var(--dim);text-align:right;white-space:nowrap}
.reach a:hover{color:var(--brand)}
.navtoggle{display:none;background:none;border:1px solid var(--line);color:var(--ink);
  border-radius:6px;padding:6px 10px;font-size:16px;cursor:pointer;margin-left:auto}

/* ---------- hero: type first, photos as a filmstrip footer -------------- */
.hero{padding:clamp(48px,7vw,110px) 0 0;border-bottom:1px solid var(--line)}
.eyebrow{font:600 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--brand)}
.hero h1{margin-top:var(--s3);font-size:clamp(38px,6.4vw,82px);line-height:.98;letter-spacing:-.042em;
  max-width:16ch}
.hero h1 em{font-style:normal;color:var(--brand)}
/* each line rises out of its own mask — a set-in-place feel, not a fade */
.mask{display:block;overflow:hidden}
.mask > span{display:block;transform:translateY(105%);
  transition:transform .85s cubic-bezier(.16,.84,.44,1)}
.ready .mask > span{transform:none}
.ready .mask:nth-child(2) > span{transition-delay:.09s}
.ready .mask:nth-child(3) > span{transition-delay:.18s}
.hero p{margin-top:var(--s4);color:var(--dim);max-width:60ch;font-size:16.5px}
.hero .cta{margin-top:var(--s4);display:flex;gap:var(--s2);flex-wrap:wrap}
.statrow{margin-top:var(--s6);display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line)}
.statrow .stat{padding:var(--s3) 0 var(--s4);border-right:1px solid var(--line2);padding-right:16px}
.statrow .stat:last-child{border-right:0}
.stat b{display:block;font:600 24px/1.05 var(--mono);color:var(--brand);letter-spacing:-.03em}
.stat span{display:block;margin-top:6px;font-size:12.5px;color:var(--dim);line-height:1.45}
.reel{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line)}
.reel figure{position:relative;overflow:hidden;background:var(--bg)}
.reel img{width:100%;height:clamp(110px,13vw,168px);object-fit:cover;
  transition:transform .5s cubic-bezier(.16,.84,.44,1);filter:saturate(.9)}
.reel figure:hover img{transform:scale(1.06)}
.reel figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 10px 8px;
  background:linear-gradient(180deg,transparent,rgba(11,12,14,.94));
  font:500 10.5px/1.35 var(--mono);color:#cfd1cd}

/* ---------- ledger sections --------------------------------------------- */
.sec{padding:var(--s6) 0 var(--s7);border-bottom:1px solid var(--line)}
.sechead{display:grid;grid-template-columns:88px minmax(0,1fr) minmax(0,26ch);
  gap:clamp(18px,3vw,44px);align-items:end;padding-bottom:var(--s3)}
.sechead .no{font:600 12px/1 var(--mono);letter-spacing:.2em;color:var(--brand)}
.sechead h2{font-size:clamp(25px,3.3vw,38px);line-height:1.06;letter-spacing:-.03em}
.sechead .sub{color:var(--dim);font-size:14px;line-height:1.6}
/* the rule under every section head draws itself */
.rule{height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.16,.84,.44,1)}
.in .rule,.rule.in{transform:scaleX(1)}

/* rows print in one after another rather than arriving as a block */
.pr{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.16,.84,.44,1)}
.pr.in{opacity:1;transform:none}

/* ---------- bare ruled tables ------------------------------------------- */
.tscroll{overflow-x:auto;margin-top:var(--s4)}
table{border-collapse:collapse;width:100%;min-width:640px}
th,td{text-align:left;padding:14px 14px 14px 0;border-bottom:1px solid var(--line2);font-size:14px}
th{font:600 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--line);white-space:nowrap}
td.n{font-family:var(--mono);white-space:nowrap;color:#dcdedb}
td.proc{font-family:var(--display);font-weight:700;font-size:16px}
td.proc span{display:block;margin-top:3px;font:400 11.5px var(--mono);color:var(--faint)}
tbody tr{transition:background .18s}
tbody tr:hover{background:var(--bg2)}
.tfoot{padding-top:12px;color:var(--faint);font-size:12.5px;line-height:1.6;max-width:92ch}
.tfoot a{color:var(--dim);text-decoration:underline}
.mtable td,.mtable th{white-space:nowrap}
.mtable td:first-child,.mtable td:nth-child(2){white-space:normal}
/* sortable headers */
th.s{cursor:pointer;user-select:none;transition:color .18s}
th.s:hover{color:var(--dim)}
th.s::after{content:"↕";margin-left:6px;opacity:.35;font-size:10px}
th.s.asc::after{content:"↑";opacity:1;color:var(--brand)}
th.s.desc::after{content:"↓";opacity:1;color:var(--brand)}
.sorthint{margin-top:var(--s2);font:500 11.5px var(--mono);color:var(--faint)}

/* ---------- accordion rows ---------------------------------------------- */
.acc{border-top:1px solid var(--line);margin-top:var(--s4)}
.arow{border-bottom:1px solid var(--line2)}
.abtn{width:100%;background:none;border:0;color:inherit;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:88px minmax(0,1fr) minmax(0,30ch) 40px;
  gap:clamp(18px,3vw,44px);align-items:baseline;padding:20px 0;font:inherit;
  transition:color .2s}
.abtn:hover{color:var(--brand)}
.abtn .an{font:600 12px/1 var(--mono);letter-spacing:.2em;color:var(--faint)}
.abtn h3{font-size:clamp(19px,2.1vw,25px);letter-spacing:-.02em;line-height:1.1}
.abtn .one{color:var(--dim);font-size:13.5px;line-height:1.55}
.abtn .pm{justify-self:end;font:400 20px/1 var(--mono);color:var(--faint);
  transition:transform .35s cubic-bezier(.16,.84,.44,1),color .2s}
.arow.open .abtn .pm{transform:rotate(45deg);color:var(--brand)}
.arow.open .abtn h3{color:var(--brand)}
.apanel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.16,.84,.44,1)}
.arow.open .apanel{grid-template-rows:1fr}
.apanel > div{overflow:hidden}
/* column gap only — the row gap was pushing the "in detail" link a full
   44px away from the list it belongs to */
.ain{display:grid;grid-template-columns:88px minmax(0,1fr);gap:0 clamp(18px,3vw,44px);
  padding:0 0 26px}
.ain ul{list-style:none;grid-column:2}
.ain li{padding-left:16px;position:relative;color:var(--dim);font-size:14.5px;margin-bottom:9px}
.ain li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:1px;background:var(--brand)}
.ain .more{grid-column:2;color:var(--brand);font-weight:600;font-size:14px;margin-top:4px}

/* ---------- three highlights, as ruled columns -------------------------- */
.hi{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:var(--s4)}
.hi > div{background:var(--bg);padding:24px 22px}
.hi .t{font:600 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.hi .n{margin-top:var(--s2);font:600 clamp(22px,2.4vw,28px)/1.05 var(--mono);color:var(--brand);
  letter-spacing:-.03em}
.hi .n small{font-size:14px;color:var(--dim);letter-spacing:0}
.hi p{margin-top:var(--s2);color:var(--dim);font-size:13.5px}

/* ---------- video list rows --------------------------------------------- */
.vlist{border-top:1px solid var(--line);margin-top:var(--s4)}
.vrow{display:grid;grid-template-columns:88px 200px minmax(0,1fr);gap:clamp(18px,3vw,44px);
  align-items:center;padding:16px 0;border-bottom:1px solid var(--line2)}
.vrow .vn{font:600 12px/1 var(--mono);letter-spacing:.2em;color:var(--faint)}
.vframe{position:relative;aspect-ratio:16/9;background:var(--card2);border:1px solid var(--line);
  overflow:hidden;cursor:pointer}
.vframe img,.vframe iframe{width:100%;height:100%;object-fit:cover;border:0}
.vframe .play{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;
  border-radius:50%;background:rgba(11,12,14,.72);border:1px solid var(--brand);transition:transform .2s}
.vframe .play::after{content:"";position:absolute;left:13px;top:10px;border:6px solid transparent;
  border-left:10px solid var(--brand)}
.vframe:hover .play{transform:scale(1.12)}
.vframe.noposter{background:linear-gradient(135deg,var(--card2),var(--raised))}
.vrow h3{font-size:16px;letter-spacing:-.015em}
.vrow .attr{margin-top:5px;font:500 11.5px/1.5 var(--mono);color:var(--faint)}
.vrow .attr b{color:var(--dim)}
.vrow .attr .ext{color:var(--brand);margin-left:6px}

/* ---------- process, as a two-column ledger ----------------------------- */
.plist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,64px);
  border-top:1px solid var(--line);margin-top:var(--s4)}
.pstep{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;padding:18px 0;
  border-bottom:1px solid var(--line2)}
.pstep .pn{font:600 12px/1 var(--mono);letter-spacing:.18em;color:var(--brand);padding-top:4px}
.pstep h4{font-size:16.5px;letter-spacing:-.015em}
.pstep p{margin-top:4px;color:var(--dim);font-size:14px}

/* ---------- quote -------------------------------------------------------- */
.qgrid{display:grid;grid-template-columns:88px minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(18px,3vw,44px);margin-top:var(--s4);align-items:start}
.qgrid .qn{font:600 12px/1 var(--mono);letter-spacing:.2em;color:var(--faint)}
.assure{list-style:none;border-top:1px solid var(--line)}
.assure li{padding:14px 0;border-bottom:1px solid var(--line2);color:var(--dim);font-size:14.5px}
.assure b{color:var(--ink);font-weight:700}
.fallback{margin-top:var(--s3);padding:14px 16px;border:1px solid var(--line);background:var(--bg2);
  font-size:14px}
.fallback a{color:var(--brand);font-family:var(--mono);font-size:13px}
form{border:1px solid var(--line);background:var(--bg2);padding:clamp(20px,2.6vw,28px)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{margin-bottom:12px}
.field label{display:block;font:600 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin-bottom:6px}
.field input,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line);
  color:var(--ink);font:400 14.5px/1.5 var(--sans);padding:11px 12px;border-radius:0}
.field textarea{min-height:98px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand)}
.nda{display:flex;gap:9px;align-items:flex-start;color:var(--dim);font-size:13.5px;margin:4px 0 16px}
#mocknote{display:none;margin-top:12px;padding:12px 14px;background:rgba(255,180,84,.1);
  border:1px solid rgba(255,180,84,.36);color:var(--amber);font-size:13.5px}
.formfoot{margin-top:12px;color:var(--faint);font-size:12.5px;line-height:1.6}

/* ---------- closing + footer -------------------------------------------- */
.ctaband{padding:var(--s6) 0;border-bottom:1px solid var(--line)}
.ctaband .wrap{display:flex;gap:var(--s4);align-items:center;justify-content:space-between;flex-wrap:wrap}
.ctaband h2{font-size:clamp(24px,2.8vw,34px);letter-spacing:-.03em}
.ctaband p{margin-top:var(--s1);color:var(--dim)}
.acts{display:flex;gap:var(--s2);flex-wrap:wrap}
footer{padding:var(--s6) 0 44px;color:var(--faint);font-size:13.5px}
.sitemap{margin-top:var(--s4);display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:24px}
.sitemap h4{font:600 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand);margin-bottom:11px}
.sitemap a{display:block;color:var(--dim);padding:4px 0;font-size:13.5px}
.sitemap a:hover{color:var(--ink)}
.addr{margin-top:var(--s4);font:500 12.5px/1.7 var(--mono);color:var(--faint)}
.addr b{color:var(--dim)}
.fine{margin-top:var(--s3);padding-top:18px;border-top:1px solid var(--line);line-height:1.7;max-width:86ch}
.fine a{color:var(--dim);text-decoration:underline}

/* ---------- responsive --------------------------------------------------- */
@media (max-width:980px){
  .idx{display:none}
  .idx.open{display:flex;position:absolute;left:0;right:0;top:100%;background:var(--bg2);
    border-bottom:1px solid var(--line);flex-wrap:wrap;gap:6px;padding:14px 20px}
  .reach{display:none}
  .navtoggle{display:block}
  .sechead{grid-template-columns:1fr;gap:var(--s2);align-items:start}
  .abtn{grid-template-columns:56px minmax(0,1fr) 34px}
  .abtn .one{display:none}
  .ain{grid-template-columns:56px minmax(0,1fr)}
  .vrow{grid-template-columns:150px minmax(0,1fr);gap:18px}
  .vrow .vn{display:none}
  .qgrid{grid-template-columns:1fr}
  .qgrid .qn{display:none}
  .plist{grid-template-columns:1fr}
  .hi{grid-template-columns:1fr}
  .reel{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .statrow{grid-template-columns:repeat(2,1fr)}
  .frow{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .mask > span{transform:none}
  .rule{transform:scaleX(1)}
  .pr{opacity:1;transform:none}
}