/* CARTELIER — design tokens
   Rules carried verbatim from design/reference/cartelier-original.html
   (approved SHA-256 cc9de111...0692). Selectors and declarations are the
   prototype's own; only their file placement is new.
   The single declaration of colour and font family. Nothing else may
   declare a colour literal or a font-family. No new brand colour. */

:root{
  --ink:#0B0B0C; --ink2:#16161A; --ink3:#212127; --ink4:#2C2C33;
  --paper:#F4F2ED; --paper2:#E8E5DE; --paper3:#DCD8CF;
  --accent:#9E9EA6; --accent-l:#54545C;
  --on-dark:#EFEDE9; --on-dark-mute:#9A988F;
  --on-light:#17171A; --on-light-mute:#6B6A64;
  --line-d:rgba(239,237,233,.13); --line-l:rgba(23,23,26,.14);
  --ok:#6E8B6B; --warn:#B8863B; --no:#A2554B;
  --d:'Jost',system-ui,sans-serif;
  --b:'Archivo',system-ui,sans-serif;
  --m:'IBM Plex Mono',ui-monospace,monospace;
}

/* CARTELIER — base
   Rules carried verbatim from design/reference/cartelier-original.html
   (approved SHA-256 cc9de111...0692). Selectors and declarations are the
   prototype's own; only their file placement is new.
   Reset, document ground, layout primitives (.wrap/.narrow/.band),
   focus visibility and reduced-motion. Loaded before everything else. */

*{box-sizing:border-box}
body{margin:0;padding-bottom:39px;background:var(--ink);color:var(--on-dark);font-family:var(--b);font-weight:300;font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.narrow{max-width:820px;margin:0 auto;padding:0 32px}
.band.light .eyebrow,.cms .eyebrow{color:var(--accent-l)}
.band{padding:clamp(72px,10vw,130px) 0;border-top:1px solid var(--line-d)}
.band.light{background:var(--paper);color:var(--on-light);border-top:none}
.band.light .lede{color:var(--on-light-mute)}
.band.light .eyebrow.plain{color:var(--on-light-mute)}
.band.light .btn{border-color:var(--line-l)}
.band.light .btn:hover{background:var(--on-light);color:var(--paper);border-color:var(--on-light)}
.band.light .btn.solid{background:var(--on-light);color:var(--paper)}
.band.light .btn.solid:hover{background:transparent;color:var(--on-light)}
body.locked{overflow:hidden}
.band.light .grid{background:var(--line-l);border-color:var(--line-l)}
.band.light .cell{background:var(--paper)}
.band.light .field label{color:var(--on-light-mute)}
.band.light .field input,.band.light .field select,.band.light .field textarea{border-bottom-color:var(--line-l)}
[hidden]{display:none!important}
.route{animation:rise .45s ease both}

/* CARTELIER — typography
   Rules carried verbatim from design/reference/cartelier-original.html
   (approved SHA-256 cc9de111...0692). Selectors and declarations are the
   prototype's own; only their file placement is new.
   Jost = display/hierarchy. Archivo = body copy. IBM Plex Mono = all
   numeric, technical and reference data. No substitutions. */

/* Self-hosted. SIL OFL 1.1 — ship each family's OFL.txt beside the files.
   The binaries are a DEPLOYMENT DEPENDENCY and are not in the repository:
   see docs/CARTELIER-FONT-HOSTING-DECISION.md for the exact file list.
   Until they are present every family falls back to the stack in tokens.css,
   which is fallback behaviour only and is not the approved typography. */
@font-face{font-family:'Jost';font-style:normal;font-weight:200;font-display:swap;
  src:url('/fonts/jost-200.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;
  src:url('/fonts/jost-300.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/jost-400.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/jost-500.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:300;font-display:swap;
  src:url('/fonts/archivo-300.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/archivo-400.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/archivo-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:300;font-display:swap;
  src:url('/fonts/ibm-plex-mono-300.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2')}

.eyebrow{font-family:var(--d);font-weight:500;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin:0 0 22px}
.eyebrow.plain{color:var(--on-dark-mute)}
h1,h2,h3,h4{font-family:var(--d);font-weight:200;margin:0;text-wrap:balance;letter-spacing:.01em}
h1{font-size:clamp(38px,6vw,74px);line-height:1.04}
h2{font-size:clamp(28px,3.6vw,44px);line-height:1.12}
h3{font-size:20px;font-weight:300}
p{margin:0 0 18px}
.lede{font-size:17px;line-height:1.8;color:var(--on-dark-mute);max-width:62ch}
.house{max-width:60ch;margin:30px auto 0;text-align:center}
.house p{font-size:15px;line-height:1.78;color:var(--on-dark-mute);margin:0 0 30px}
.house p:last-child{margin-bottom:0}
.mono{font-family:var(--m);font-size:12px;letter-spacing:.04em;font-variant-numeric:tabular-nums}

/* CARTELIER — components
   Rules carried verbatim from design/reference/cartelier-original.html
   (approved SHA-256 cc9de111...0692). Selectors and declarations are the
   prototype's own; only their file placement is new.
   Surface-agnostic UI shared by both worlds: buttons, placeholder
   photography, hairline grids, galleries, public forms, keyframes. */

button,input,select,textarea{font:inherit;color:inherit}
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--d);font-size:11px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;padding:15px 30px;border:1px solid var(--line-d);background:none;cursor:pointer;transition:background .35s,color .35s,border-color .35s}
.btn:hover{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.btn.solid{background:var(--on-dark);color:var(--ink);border-color:var(--on-dark)}
.btn.solid:hover{background:transparent;color:var(--on-dark)}
.shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:
   radial-gradient(115% 85% at 50% 18%, #34343B 0%, #1D1D22 42%, #0E0E11 100%);}
.shot::before{content:"";position:absolute;inset:0;
  background:linear-gradient(112deg,transparent 32%,rgba(255,255,255,.075) 46%,rgba(255,255,255,.015) 52%,transparent 63%)}
.shot::after{content:"";position:absolute;left:6%;right:6%;bottom:9%;height:26%;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.62),transparent 72%)}
.shot span{position:absolute;inset:auto 0 46% 0;text-align:center;font-family:var(--d);font-weight:200;
  font-size:clamp(13px,2vw,20px);letter-spacing:.44em;text-transform:uppercase;color:rgba(239,237,233,.15);z-index:1}
.shot.wide{aspect-ratio:16/9}
.shot.photo::before,.shot.photo::after{display:none}
.shot.photo img{width:100%;height:100%;object-fit:cover;display:block}
.shot.tall{aspect-ratio:1/1}
.protobar{position:fixed;bottom:0;left:0;right:0;z-index:210;background:rgba(22,22,26,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line-d);display:flex;align-items:center;gap:16px;padding:8px 22px;font-family:var(--d);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mute)}
.protobar .sw{margin-left:auto;display:flex;border:1px solid var(--line-d)}
.protobar .sw a{padding:5px 14px;color:var(--on-dark-mute);letter-spacing:.18em;transition:background .3s,color .3s}
.protobar .sw a+a{border-left:1px solid var(--line-d)}
.protobar .sw a:hover{color:var(--on-dark)}
.protobar .sw a.on{background:var(--on-dark);color:var(--ink)}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid transparent;transition:background .45s,border-color .45s,backdrop-filter .45s}
.nav.solid{background:rgba(11,11,12,.92);backdrop-filter:blur(16px);border-bottom-color:var(--line-d)}
.nav .wrap{display:flex;align-items:center;height:76px;gap:20px}
.nav .brand img{height:24px;width:auto;transition:height .45s}
.nav.solid .brand img{height:21px}
.menubtn{margin-left:auto;display:flex;align-items:center;gap:14px;background:none;border:0;padding:8px 0;cursor:pointer;font-family:var(--d);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--on-dark);transition:color .3s}
.menubtn:hover{color:#fff}
.menubtn .bars{display:grid;gap:5px;width:26px}
.menubtn .bars i{display:block;height:1px;background:currentColor;transition:transform .4s,width .4s}
.menubtn .bars i:last-child{width:16px;margin-left:auto}
.menubtn:hover .bars i:last-child{width:26px}
.navpad{height:76px}
.menu{position:fixed;inset:0;z-index:200;background:var(--ink);display:flex;flex-direction:column;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .42s ease,visibility .42s}
.menu.open{opacity:1;visibility:visible}
.menu .mtop{display:flex;align-items:center;height:76px;padding:0 32px;border-bottom:1px solid var(--line-d);flex:0 0 auto}
.menu .mtop img{height:24px;width:auto}
.closebtn{margin-left:auto;display:flex;align-items:center;gap:14px;background:none;border:0;cursor:pointer;font-family:var(--d);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--on-dark);padding:8px 0}
.closebtn:hover{color:#fff}
.closebtn .x{position:relative;width:26px;height:12px}
.closebtn .x i{position:absolute;top:6px;left:0;width:26px;height:1px;background:currentColor}
.closebtn .x i:first-child{transform:rotate(45deg)}
.closebtn .x i:last-child{transform:rotate(-45deg)}
.mbody{flex:1;display:grid;grid-template-columns:1.6fr 1fr;gap:0;align-items:stretch}
.mmain{padding:clamp(24px,5vh,56px) 32px}
.mlink{display:flex;align-items:baseline;gap:20px;padding:clamp(14px,2.4vh,22px) 0;border-bottom:1px solid var(--line-d);
  font-family:var(--d);font-weight:200;font-size:clamp(26px,4.4vw,46px);letter-spacing:.04em;text-transform:uppercase;color:var(--on-dark);
  opacity:0;transform:translateY(16px);transition:color .3s,transform .35s}
.menu.open .mlink{animation:mIn .55s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes mIn{to{opacity:1;transform:none}}
.mlink:hover{color:#fff;transform:translateX(8px)}
.mlink .meta{margin-left:auto;font-family:var(--m);font-size:11px;letter-spacing:.06em;text-transform:none;color:var(--on-dark-mute);align-self:center}
.mlink .arw{font-family:var(--d);font-size:15px;color:var(--on-dark);opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s;align-self:center}
.mlink:hover .arw{opacity:1;transform:none}
.maside{border-left:1px solid var(--line-d);padding:clamp(24px,5vh,56px) 32px;display:flex;flex-direction:column;gap:30px;background:var(--ink2)}
.maside .feat .shot{aspect-ratio:16/10}
.maside .feat h4{font-family:var(--d);font-weight:300;font-size:17px;margin:14px 0 4px}
.mfoot{flex:0 0 auto;border-top:1px solid var(--line-d);padding:16px 32px;display:flex;gap:16px;flex-wrap:wrap;
  font-family:var(--m);font-size:10.5px;color:var(--on-dark-mute)}
.mfoot a:hover{color:var(--on-dark)}
.hero{position:relative;min-height:82vh;display:grid;place-items:center;text-align:center;overflow:hidden;
  background:radial-gradient(120% 78% at 50% 8%, #2B2B31 0%, #141418 44%, #0B0B0C 100%)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;
  background:radial-gradient(60% 100% at 50% 100%,rgba(0,0,0,.72),transparent 70%)}
.hero .inner{position:relative;z-index:2;padding:120px 32px}
.hero img{height:clamp(38px,6vw,64px);width:auto;margin:0 auto 40px;opacity:.97}
.hero .tag{font-family:var(--d);font-weight:200;font-size:clamp(15px,2.2vw,22px);letter-spacing:.4em;text-transform:uppercase;color:var(--on-dark-mute)}
.hero .rule{width:1px;height:64px;background:linear-gradient(var(--accent),transparent);margin:56px auto 0}
.hero::before{content:"";position:absolute;inset:-10%;opacity:0;transition:opacity .6s;
  background:radial-gradient(42% 38% at 30% 34%,rgba(255,255,255,.11),transparent 70%),
             radial-gradient(36% 32% at 72% 56%,rgba(255,255,255,.075),transparent 72%)}
.hero.vid::before{opacity:1;animation:heroPan 15s ease-in-out infinite alternate}
@keyframes heroPan{from{transform:translate3d(-2%,-1%,0) scale(1.02)}to{transform:translate3d(2%,1.5%,0) scale(1.09)}}
.heroBadge{position:absolute;left:32px;bottom:26px;z-index:3;font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-mute);border:1px solid var(--line-d);padding:5px 11px;display:none}
.hero.vid .heroBadge{display:block}
.grid{display:grid;gap:1px;background:var(--line-d);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.cell{background:var(--ink);padding:40px 34px}
.cars{display:grid;grid-template-columns:repeat(3,1fr);gap:52px 34px;margin-top:56px}
.car{cursor:pointer;display:block;text-align:left;background:none;border:0;padding:0;width:100%}
.car .shotwrap{position:relative;overflow:hidden}
.car .shot{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.car:hover .shot{transform:scale(1.035)}
.car .ribbon{position:absolute;top:0;left:0;z-index:2;font-family:var(--d);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;padding:7px 13px;background:var(--ink);color:var(--on-dark);border-right:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.car .ribbon.sold{background:var(--on-dark);color:var(--ink)}
.car h3{margin:20px 0 4px;font-size:19px}
.car .sub{font-size:12.5px;color:var(--on-dark-mute);letter-spacing:.04em}
.car .meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-d);font-family:var(--m);font-size:11px;color:var(--on-dark-mute);letter-spacing:.03em}
.car .price{margin-top:14px;font-family:var(--d);font-weight:300;font-size:17px;letter-spacing:.02em}
.car .price.poa{color:var(--accent);font-family:var(--d);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding-top:3px}
.filters{display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding:22px 0;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.filters select,.filters input{background:transparent;border:1px solid var(--line-d);padding:11px 14px;font-family:var(--d);font-size:11px;letter-spacing:.14em;text-transform:uppercase;min-width:150px}
.filters select option{background:var(--ink2)}
.count{margin-left:auto;font-family:var(--m);font-size:11px;color:var(--on-dark-mute)}
.detail{display:grid;grid-template-columns:1.35fr 1fr;gap:64px;align-items:start}
.gal{position:relative;overflow:hidden;background:#0E0E11;aspect-ratio:16/9;cursor:zoom-in}
.gzoom{position:absolute;left:14px;bottom:14px;z-index:2;font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-mute);background:rgba(11,11,12,.55);padding:5px 10px;opacity:0;transition:opacity .3s}
.gal:hover .gzoom{opacity:1}
.lbox{position:fixed;inset:0;z-index:400;background:rgba(8,8,10,.97);display:none;flex-direction:column}
.lbox.open{display:flex}
.lbar{display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line-d);flex:0 0 auto}
.lbar .t3{font-family:var(--d);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-mute)}
.lbar button{margin-left:auto;background:none;border:1px solid var(--line-d);color:var(--on-dark);font-family:var(--d);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding:8px 15px;cursor:pointer}
.lbar button:hover{background:var(--on-dark);color:var(--ink)}
.lstage{flex:1;position:relative;display:grid;place-items:center;padding:24px;min-height:0}
.lstage img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.lstage .ph2{width:min(92vw,1400px);aspect-ratio:16/9;display:grid;place-items:center;background:radial-gradient(115% 85% at 50% 18%,#34343B 0%,#1D1D22 42%,#0E0E11 100%);font-family:var(--d);font-weight:200;letter-spacing:.44em;text-transform:uppercase;color:rgba(239,237,233,.16)}
.lnav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:1px solid var(--line-d);background:rgba(11,11,12,.5);color:var(--on-dark);font-size:26px;line-height:1;cursor:pointer}
.lnav:hover{background:var(--on-dark);color:var(--ink)}
.lnav.p{left:20px}
.lnav.n{right:20px}
.lfilm{flex:0 0 auto;display:flex;gap:8px;overflow-x:auto;padding:14px 24px;border-top:1px solid var(--line-d);scrollbar-width:thin}
.lfilm button{flex:0 0 92px;aspect-ratio:4/3;border:0;padding:0;cursor:pointer;overflow:hidden;opacity:.4;outline:1px solid transparent;outline-offset:-1px;background:#1a1a1f}
.lfilm button.on{opacity:1;outline-color:var(--on-dark)}
.lfilm img{width:100%;height:100%;object-fit:cover;display:block}
.gtrack{display:flex;height:100%;transition:transform .55s cubic-bezier(.22,.75,.2,1)}
.gslide{flex:0 0 100%;height:100%}
.gslide img{width:100%;height:100%;object-fit:cover;display:block}
.gslide.ph{display:grid;place-items:center;background:radial-gradient(115% 85% at 50% 18%,#34343B 0%,#1D1D22 42%,#0E0E11 100%)}
.gslide.ph span{font-family:var(--d);font-weight:200;font-size:clamp(13px,2vw,20px);letter-spacing:.44em;text-transform:uppercase;color:rgba(239,237,233,.15)}
.gnav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border:1px solid var(--line-d);background:rgba(11,11,12,.5);backdrop-filter:blur(6px);color:var(--on-dark);font-size:22px;line-height:1;cursor:pointer;opacity:0;transition:opacity .3s,background .3s}
.gal:hover .gnav{opacity:1}
.gnav:hover{background:var(--on-dark);color:var(--ink)}
.gnav.prev{left:14px}
.gnav.next{right:14px}
.gcount{position:absolute;right:14px;bottom:14px;z-index:2;font-family:var(--m);font-size:10.5px;letter-spacing:.1em;color:var(--on-dark-mute);background:rgba(11,11,12,.55);padding:5px 10px}
.gthumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:rgba(239,237,233,.22) transparent}
.gthumbs::-webkit-scrollbar{height:3px}
.gthumbs::-webkit-scrollbar-thumb{background:rgba(239,237,233,.22)}
.gthumb{flex:0 0 96px}
.gthumb{position:relative;aspect-ratio:4/3;border:0;padding:0;cursor:pointer;overflow:hidden;background:radial-gradient(115% 85% at 50% 18%,#2B2B31 0%,#18181C 60%,#0E0E11 100%);opacity:.45;transition:opacity .3s,outline-color .3s;outline:1px solid transparent;outline-offset:-1px;min-width:70px}
.gthumb:hover{opacity:.85}
.gthumb.on{opacity:1;outline-color:var(--on-dark)}
.gthumb img{width:100%;height:100%;object-fit:cover;display:block}
.gthumb span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--m);font-size:11px;color:rgba(239,237,233,.4)}
.specgroup{border-top:1px solid var(--line-d);padding:26px 0}
.specgroup h4{font-family:var(--d);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:16px}
.spec{display:grid;grid-template-columns:1fr auto;gap:10px;padding:8px 0;font-size:13.5px;border-bottom:1px solid rgba(239,237,233,.055)}
.spec dt{color:var(--on-dark-mute)}
.spec dd{margin:0;font-family:var(--m);font-size:12.5px;text-align:right}
.pricebox{border:1px solid var(--line-d);padding:28px}
.writeup{border:1px solid var(--line-d);padding:34px 36px;margin-top:46px}
.writeup h4{font-family:var(--d);font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin:0 0 22px}
.writeup .body{max-width:66ch}
.writeup .body p{font-size:15px;line-height:1.95;margin:0 0 20px}
.writeup .body p:first-child{font-size:17px;line-height:1.85;color:#fff}
.writeup .body p:last-child{margin-bottom:0}
.writeup .sig{margin-top:26px;padding-top:18px;border-top:1px solid var(--line-d);display:flex;gap:18px;flex-wrap:wrap;font-family:var(--m);font-size:11px;color:var(--on-dark-mute)}
.pricebox .big{font-family:var(--d);font-weight:200;font-size:38px;letter-spacing:0}
.calc{margin-top:26px;border-top:1px solid var(--line-d);padding-top:22px}
.calc>summary{font-family:var(--d);font-size:10.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}
.calc>summary::-webkit-details-marker{display:none}
.calc>summary::before{content:"+";font-size:14px;line-height:1;width:12px}
.calc[open]>summary::before{content:"\2013"}
.calc>summary:hover{color:#fff}
.calc[open]>summary{margin-bottom:20px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:1px;background:var(--line-d);margin:16px 0 10px;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--on-dark)}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--on-dark)}
.dpline{display:flex;justify-content:space-between;font-family:var(--m);font-size:11px;color:var(--on-dark-mute)}
.ltvnote{margin:16px 0 0;padding:12px 14px;border:1px solid var(--warn);color:var(--warn);font-size:12px;line-height:1.7}
.calc label{display:block;font-family:var(--d);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mute);margin-bottom:8px}
.calc .row{display:flex;gap:14px;margin-bottom:16px}
.calc .row>div{flex:1}
.calc input,.calc select{width:100%;background:transparent;border:1px solid var(--line-d);padding:10px 12px;font-family:var(--m);font-size:13px}
.calc select option{background:var(--ink2)}
.calcout{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line-d);padding-top:16px;margin-top:4px}
.calcout b{font-family:var(--d);font-weight:300;font-size:26px}
.form{display:grid;gap:20px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field label{display:block;font-family:var(--d);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mute);margin-bottom:9px}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-d);padding:11px 2px;font-size:14.5px;transition:border-color .3s}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--on-dark);outline:none}
.field select option{background:var(--ink2)}
.steps{display:flex;gap:0;margin-bottom:44px;border-bottom:1px solid var(--line-d)}
.stepx{flex:1;padding:0 0 16px;font-family:var(--d);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-mute);border-bottom:1px solid transparent;margin-bottom:-1px}
.stepx.on{color:var(--on-dark);border-bottom-color:var(--on-dark)}
.stepx.done{color:var(--accent)}
.verdict{border:1px solid var(--line-d);padding:38px;display:none}
.verdict.show{display:block;animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.verdict .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:12px;vertical-align:middle}
.v-ok .dot{background:var(--ok)}
.v-warn .dot{background:var(--warn)}
.v-no .dot{background:var(--no)}
.verdict h3{display:inline-block;vertical-align:middle}
.reasons{list-style:none;padding:0;margin:22px 0 0;font-size:13.5px}
.reasons li{padding:9px 0;border-top:1px solid var(--line-d);display:flex;gap:14px;color:var(--on-dark-mute)}
.reasons li b{font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;min-width:66px}
.pass b{color:var(--ok)}
.flag b{color:var(--warn)}
.fail b{color:var(--no)}
.foot{border-top:1px solid var(--line-d);padding:70px 0 44px}
.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.foot img{height:22px;width:auto;margin-bottom:20px}
.foot h5{font-family:var(--d);font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--accent);margin:0 0 16px}
.foot a,.foot p{display:block;font-size:13px;color:var(--on-dark-mute);margin:0 0 9px}
.foot a:hover{color:var(--on-dark)}
.legal{margin-top:52px;padding-top:24px;border-top:1px solid var(--line-d);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-family:var(--m);font-size:10.5px;color:var(--on-dark-mute)}
.depbox{border-top:1px solid var(--line-d);margin-top:22px;padding-top:20px}
.depbox .dl{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.depbox .dl b{font-family:var(--d);font-weight:300;font-size:28px;letter-spacing:0}
.depbox .dl.sm{margin-top:14px;padding-top:14px;border-top:1px solid rgba(239,237,233,.07)}
.depbox .dl.sm b{font-size:19px;color:var(--on-dark-mute)}
.depbox .dlab{font-family:var(--d);font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.depbox .sub{font-family:var(--m);font-size:11px;color:var(--on-dark-mute);margin-top:6px}
.depbox details{margin-top:16px}
.depbox summary{font-family:var(--d);font-size:9.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);cursor:pointer;list-style:none}
.depbox summary::-webkit-details-marker{display:none}
.depbox summary::before{content:"+ ";}
.depbox details[open] summary::before{content:"– ";}
.work{margin-top:14px;font-family:var(--m);font-size:11.5px;color:var(--on-dark-mute)}
.work div{display:flex;justify-content:space-between;gap:16px;padding:5px 0;border-bottom:1px solid rgba(239,237,233,.055)}
.work div:last-child{border-bottom:0;color:var(--on-dark);padding-top:9px;border-top:1px solid var(--line-d);margin-top:4px}
.scheme{display:inline-block;font-family:var(--d);font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-l);border:1px solid var(--line-l);padding:3px 9px;margin-top:12px}
.capped{color:var(--warn)}

/* CARTELIER — auth
   Rules carried verbatim from design/reference/cartelier-original.html
   (approved SHA-256 cc9de111...0692). Selectors and declarations are the
   prototype's own; only their file placement is new.
   The authentication environment: radial ground and the centred box.
   Dark surface, line-based fields. */

.login{min-height:100vh;display:grid;place-items:center;padding:60px 24px;
  background:radial-gradient(120% 80% at 50% 0%, #23232A 0%, #131317 46%, #0B0B0C 100%)}
.loginbox{width:100%;max-width:380px}
.loginbox img{height:26px;width:auto;margin:0 auto 40px;opacity:.95}
.loginbox .card{border:1px solid var(--line-d);background:rgba(11,11,12,.55);padding:36px 32px}
.loginbox .note{font-family:var(--m);font-size:10.5px;color:var(--on-dark-mute);text-align:center;margin-top:24px;line-height:1.9}

/* CARTELIER — responsive
   Rules carried verbatim from design/reference/cartelier-original.html
   (approved SHA-256 cc9de111...0692). Selectors and declarations are the
   prototype's own; only their file placement is new.
   Every @media block, collected and loaded last so each override
   lands after the rule it overrides. */

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:640px){.protobar span.note{display:none}}
@media(max-width:520px){.menubtn span{display:none}}
@media(max-width:900px){.mbody{grid-template-columns:1fr}}
@media(max-width:600px){
  .mlink{flex-direction:column;align-items:flex-start;gap:5px;font-size:24px}
  .mlink .meta{margin-left:0;align-self:flex-start}
  .mlink .arw{display:none}
  .mlink:hover{transform:none}
}
@media(max-width:900px){.maside{border-left:0;border-top:1px solid var(--line-d)}}
@media(max-width:900px){.g3,.g2{grid-template-columns:1fr}}
@media(max-width:1000px){.cars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.cars{grid-template-columns:1fr}}
@media(max-width:980px){.detail{grid-template-columns:1fr;gap:40px}}
@media(max-width:600px){.writeup{padding:26px 22px}}
@media(max-width:700px){.form .two{grid-template-columns:1fr}}
@media(max-width:900px){.cmslayout{grid-template-columns:1fr}}
@media(max-width:600px){.main{padding:28px 20px 60px}}
@media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1000px){#usrGrid{grid-template-columns:1fr}}
@media(max-width:1000px){.twocol{grid-template-columns:1fr}}
@media(max-width:1100px){.reclist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.reclist{grid-template-columns:1fr}}
@media(max-width:1000px){.sides{grid-template-columns:1fr}}
@media(max-width:640px){.doc{padding:28px 22px}}
@media(max-width:840px){.foot .cols{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.grid3,.grid2{grid-template-columns:1fr}}
@media(max-width:820px){#copyFields{grid-template-columns:1fr}}
@media(max-width:900px){.upset .row4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.upgrid{grid-template-columns:repeat(2,1fr)}}

/* CARTELIER — production states
   States the approved prototype does not contain: validation, security messaging,
   loading/disabled, and the mobile operating drawer (§11, §15).

   These are NEW rules, deliberately kept out of the verbatim layers so that
   tokens/base/typography/components/auth/operating/responsive remain provably
   identical to design/reference/cartelier-original.html.

   Every rule here is built from the prototype's own grammar:
   square edges, 1px hairlines, tonal surfaces, --no / --warn in text and border
   only, Jost for labels, IBM Plex Mono for reference text. No filled banners,
   no shadows, no rounded corners, no new colour. */

/* ---------- field-level validation ---------- */
.fieldhint{margin:7px 0 0;font-size:10.5px;color:var(--on-dark-mute);letter-spacing:.04em}
.fielderror{margin:8px 0 0;font-family:var(--m);font-size:11px;letter-spacing:.03em;color:var(--no)}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-bottom-color:var(--no)}
.field input[aria-invalid="true"]:focus{border-bottom-color:var(--no)}

/* Light/operating surfaces: the boxed field inverts the same idea. */
.band.light .fieldhint,.cms .fieldhint{color:var(--on-light-mute)}
.cms .ff input[aria-invalid="true"],
.cms .ff select[aria-invalid="true"],
.cms .ff textarea[aria-invalid="true"]{border-color:var(--no)}

/* ---------- page-level state panel ---------- */
.cx-alert{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  border:1px solid var(--line-d);padding:14px 16px;margin:0 0 22px;font-size:13.5px;line-height:1.7}
.cx-alert-label{flex:0 0 auto;margin:0;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid currentColor;padding:3px 9px;white-space:nowrap}
.cx-alert-body{min-width:0}
.cx-alert-body b{font-family:var(--d);font-weight:500;display:block;margin-bottom:3px}
.cx-alert.is-no{border-color:var(--no);color:var(--no)}
.cx-alert.is-warn{border-color:var(--warn);color:var(--warn)}
.cx-alert.is-ok{border-color:var(--ok);color:var(--ok)}
/* Body copy stays readable; only the label and border carry the colour. */
.cx-alert.is-no .cx-alert-body,
.cx-alert.is-warn .cx-alert-body,
.cx-alert.is-ok .cx-alert-body{color:var(--on-dark)}
.cms .cx-alert.is-no .cx-alert-body,
.cms .cx-alert.is-warn .cx-alert-body,
.cms .cx-alert.is-ok .cx-alert-body,
.band.light .cx-alert .cx-alert-body{color:var(--on-light)}
@media(max-width:480px){
  .cx-alert{grid-template-columns:1fr;gap:9px}
  .cx-alert-label{justify-self:start}
}

/* ---------- loading / disabled (§15: copy and state, not spinners) ---------- */
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn[data-pending]{opacity:.6;pointer-events:none}
form[data-submitting] .field input,
form[data-submitting] .field select{opacity:.6}

/* ---------- recovery codes ---------- */
/* The prototype's 1px-gap grid device, applied to one-time codes. */
.codegrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line-d);border:1px solid var(--line-d);margin:18px 0}
.codegrid code{background:var(--ink);padding:12px 14px;font-family:var(--m);font-size:13.5px;
  letter-spacing:.14em;font-variant-numeric:tabular-nums;text-align:center;color:var(--on-dark)}
.codegrid code.used{color:var(--on-dark-mute);text-decoration:line-through}
@media(max-width:420px){.codegrid{grid-template-columns:1fr}}

/* ---------- TOTP enrolment ---------- */
/* A QR must stay scannable, so it sits on --on-dark. Square, no frame, no shadow.
   Recorded as an intentional deviation in docs/UI-REGRESSION-CHECKLIST.md. */
.qrtile{background:var(--on-dark);padding:14px;width:max-content;margin:0 auto;line-height:0}
.qrtile img,.qrtile svg{display:block;width:180px;height:180px;image-rendering:pixelated}
.totpsecret{margin:16px 0 0;padding:12px 14px;border:1px solid var(--line-d);
  font-family:var(--m);font-size:12.5px;letter-spacing:.18em;text-align:center;
  word-break:break-all;color:var(--on-dark)}

/* One-time-code entry: wide tracking so digits are individually legible. */
.field input.otp{font-family:var(--m);font-size:22px;letter-spacing:.42em;text-align:center;
  font-variant-numeric:tabular-nums;padding:14px 2px}
@media(max-width:380px){.field input.otp{font-size:18px;letter-spacing:.3em}}

/* ---------- long values must wrap, never widen the page ---------- */
.loginbox .card,.cx-alert,.main{min-width:0}
.breakword{overflow-wrap:anywhere;word-break:break-word}

/* ---------- mobile operating navigation (§11) ---------- */
/* Desktop: the 224px ink rail is untouched. Below 900px it becomes a dark
   drawer in the same language as the public overlay menu (.menu). */
.railtoggle{display:none}
.railbar{display:none}
@media(max-width:900px){
  .cmslayout{grid-template-columns:1fr}
  .railbar{display:flex;align-items:center;gap:14px;position:sticky;
    top:env(safe-area-inset-top,0px);z-index:60;
    background:var(--ink);color:var(--on-dark);
    border-bottom:1px solid var(--line-d);padding:0 20px;height:60px}
  .railbar img{height:18px;width:auto}
  .railtoggle{display:flex;align-items:center;gap:12px;margin-left:auto;
    background:none;border:0;padding:8px 0;cursor:pointer;
    font-family:var(--d);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
    color:var(--on-dark)}
  .railtoggle .bars{display:grid;gap:5px;width:24px}
  .railtoggle .bars i{display:block;height:1px;background:currentColor;transition:width .4s}
  .railtoggle .bars i:last-child{width:15px;margin-left:auto}
  .railtoggle[aria-expanded="true"] .bars i:last-child{width:24px}

  .rail{position:fixed;inset:0;z-index:200;overflow-y:auto;
    padding:26px 0 calc(26px + env(safe-area-inset-bottom,0px));
    opacity:0;visibility:hidden;transition:opacity .42s ease,visibility .42s}
  .rail[data-open="true"]{opacity:1;visibility:visible}
  .rail a{padding:14px 24px;font-size:13px}
  .rail .sep{margin:26px 24px 12px}
  .railclose{position:absolute;top:18px;right:20px;background:none;border:0;cursor:pointer;
    display:flex;align-items:center;gap:12px;color:var(--on-dark);padding:8px 0;
    font-family:var(--d);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase}
  .railclose .x{position:relative;width:24px;height:12px}
  .railclose .x i{position:absolute;top:6px;left:0;width:24px;height:1px;background:currentColor}
  .railclose .x i:first-child{transform:rotate(45deg)}
  .railclose .x i:last-child{transform:rotate(-45deg)}
  body.locked{overflow:hidden}
}
@media(min-width:901px){
  .rail{opacity:1;visibility:visible}
  .railclose{display:none}
}

/* ---------- horizontal containment (production fix) ---------- */
/* Grid and flex children default to min-width:auto, so a wide table or a long
   unbroken string stretches its column and scrolls the whole page sideways
   instead of scrolling inside .tablewrap. Measured at 390, 768 and 1024.
   The approved prototype has the same behaviour; production must not, so this
   is recorded as an intentional deviation in docs/UI-REGRESSION-CHECKLIST.md. */
.cmslayout,.cmslayout>*,.main,.twocol,.twocol>*,.sides,.sides>*,
.panel,.panel>.pad,.tiles,.tile{min-width:0}
.tablewrap{max-width:100%}
/* Long email addresses and names must wrap rather than widen a cell. */
.kv span:first-child,.kv span:last-child{overflow-wrap:anywhere}

/* ========== REVIEW FINDINGS ========== */

/* --- production body: the prototype's 39px bottom padding was reserved for the
   .protobar design-prototype switcher, which does not exist in production. --- */
body{padding-bottom:0}

/* --- CMS buttons (shared) ---------------------------------------------------
   The prototype's .btn.solid inverts to `color:var(--on-dark)` on hover, which
   on the warm-paper workspace renders near-white text on near-white ground.
   These give the operating surface its own correct inversion, replacing the
   per-call inline styles that previously patched it. --- */
.cms .btn{border-color:var(--line-l);color:var(--on-light)}
.cms .btn:hover{background:var(--on-light);color:var(--paper);border-color:var(--on-light)}
.cms .btn.solid{background:var(--on-light);color:var(--paper);border-color:var(--on-light)}
.cms .btn.solid:hover{background:transparent;color:var(--on-light);border-color:var(--on-light)}
.cms .btn:focus-visible{outline:1px solid var(--accent-l);outline-offset:3px}
/* Inverted bars keep the light-on-dark treatment. */
.bulkbar .btn{border-color:rgba(244,242,237,.3);color:var(--paper)}
.bulkbar .btn:hover{background:var(--paper);color:var(--on-light);border-color:var(--paper)}

/* --- small status text contrast --------------------------------------------
   Measured on --paper2: --warn 2.56:1, --ok 3.00:1, p-stock 4.31:1 — all below
   4.5:1, and pill labels are 9.5px, i.e. small text.
   The restrained palette is preserved: the 5px dot and the 1px border keep the
   original token. Only the LABEL TEXT darkens, and each tone below keeps its
   token's hue and saturation with lightness reduced to reach >=4.5:1. --- */
:root{
  --ok-text:#566C53;      /* from --ok   #6E8B6B — 4.55:1 on --paper2 */
  --warn-text:#84602A;    /* from --warn #B8863B — 4.53:1 */
  --no-text:#9B5248;      /* from --no   #A2554B — 4.52:1 */
  --stock-text:#3C6C8A;   /* from        #3E6F8E — 4.51:1 */
  --mute-text:#686762;    /* from --on-light-mute #6B6A64 — 4.51:1 */
}
.cms .pill,.band.light .pill{color:var(--mute-text)}
.cms .pill::before,.band.light .pill::before{background:currentColor}
.cms .p-stock{color:var(--stock-text)}
.cms .p-res,.cms .p-draft{color:var(--warn-text)}
.cms .p-sold,.cms .p-signed,.cms .p-ok{color:var(--ok-text)}
.cms .p-in,.cms .p-none,.cms .p-none2{color:var(--mute-text)}
.cms .pos{color:var(--ok-text)}
.cms .neg{color:var(--no-text)}
.cms .tile .d.up{color:var(--ok-text)}
.cms .tile .d.warn{color:var(--warn-text)}
.cms .capped,.cms .uperr{color:var(--no-text)}
.cms .remrow.high .ic{border-color:var(--no);color:var(--no-text)}
.cms .remrow.mid .ic{border-color:var(--warn);color:var(--warn-text)}
.cms .matchchip{border-color:var(--ok);color:var(--ok-text)}
.cms .matchchip:hover{background:var(--ok-text);color:#fff;border-color:var(--ok-text)}
/* The dot and the border keep the original restrained token. */
.cms .p-stock::before{background:#3E6F8E}
.cms .p-res::before,.cms .p-draft::before{background:var(--warn)}
.cms .p-sold::before,.cms .p-signed::before,.cms .p-ok::before{background:var(--ok)}
/* Alerts on light surfaces take the same treatment. */
.cms .cx-alert.is-no,.band.light .cx-alert.is-no{color:var(--no-text);border-color:var(--no)}
.cms .cx-alert.is-warn,.band.light .cx-alert.is-warn{color:var(--warn-text);border-color:var(--warn)}
.cms .cx-alert.is-ok,.band.light .cx-alert.is-ok{color:var(--ok-text);border-color:var(--ok)}
.cms .fielderror{color:var(--no-text)}

/* --- classes replacing inline styles in Blade -------------------------------- */
.cmshead .eyebrow{margin-bottom:10px}
.cmshead .sp .btn+.btn{margin-left:0}
.tablewrap.flush{border:0}
.panel .tablewrap{border:0}
table caption.tcap{caption-side:top;text-align:left;padding:0 0 10px;
  font-size:10.5px;color:var(--on-light-mute)}
.btn.block{width:100%;justify-content:center}
.btn.mt{margin-top:6px}
.authbox-wide{max-width:420px}
.center{text-align:center}
.mb-eyebrow{margin-bottom:26px}
.mb-eyebrow-sm{margin-bottom:22px}


/* ========== public site — pages the prototype rendered via hash routing ==========
   Same grammar throughout: square edges, 1px hairlines, tonal surfaces,
   no shadows, no new colour. */

body{padding-bottom:0}

.skiplink{position:absolute;left:-9999px;top:0;z-index:300;background:var(--on-dark);
  color:var(--ink);padding:12px 20px;font-family:var(--d);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase}
.skiplink:focus{left:0}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* The overlay menu is [hidden] until opened, so the transition needs the class. */
.menu[hidden]{display:none!important}
.maddr{color:var(--on-dark-mute);font-size:11px;line-height:2}

.bandhead{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap}
.bandhead .btn{margin-left:auto}
@media(max-width:600px){.bandhead .btn{margin-left:0}}

.cellbody{margin-top:14px;color:var(--on-light-mute);font-size:14px}
.marques{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 46px;
  font-family:var(--d);font-weight:200;font-size:15px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--on-light-mute);margin-top:28px}

/* Vehicle cards are links, not buttons: a real URL that can be opened in a tab. */
a.car{color:inherit;text-decoration:none}
a.car:focus-visible{outline:1px solid var(--accent);outline-offset:4px}

.crumbs{font-family:var(--m);font-size:11px;color:var(--on-dark-mute);
  margin:0 0 34px;display:flex;gap:9px;flex-wrap:wrap}
.crumbs a:hover{color:var(--on-dark)}

.sticky{position:sticky;top:110px}
@media(max-width:980px){.sticky{position:static}}
.vtitle{font-family:var(--d);font-weight:200;font-size:32px;margin:0}
.vmeta{color:var(--on-dark-mute);margin:10px 0 28px}
.shotnote{color:var(--on-dark-mute);margin-top:14px}

.writeup h2{font-family:var(--d);font-size:10.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);margin:0 0 22px}
.specgroup h2{font-family:var(--d);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:16px}

.contactcard{margin-top:26px}
.contactline{font-family:var(--d);font-weight:300;font-size:20px;margin:0 0 8px;
  letter-spacing:.01em}
.contactline a{border-bottom:1px solid var(--line-d);transition:border-color .3s}
.contactline a:hover{border-bottom-color:var(--on-dark)}
.contactsplit{border-top:1px solid var(--line-d);margin-top:20px;padding-top:20px}
.contactsplit .mono{color:var(--on-dark-mute)}
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:30px 40px;margin-top:40px;
  padding-top:34px;border-top:1px solid var(--line-d)}
@media(max-width:600px){.contactgrid{grid-template-columns:1fr}}
.contactgrid .mono{color:var(--on-dark-mute);line-height:2}

.steps-list{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:1px;
  background:var(--line-d);border-top:1px solid var(--line-d);
  border-bottom:1px solid var(--line-d)}
.steps-list li{display:flex;gap:26px;background:var(--ink);padding:28px 0}
.steps-list h3{font-size:18px;margin:0 0 8px}
.steps-list p{margin:0;color:var(--on-dark-mute);max-width:62ch}
.stepn{color:var(--accent);font-size:11px;letter-spacing:.14em;padding-top:5px;flex:0 0 auto}
@media(max-width:600px){.steps-list li{flex-direction:column;gap:10px}}

.plainlist{list-style:none;margin:22px 0 0;padding:0}
.plainlist li{padding:11px 0;border-top:1px solid var(--line-d);font-size:14.5px;
  line-height:1.7}
.band.light .plainlist li{border-top-color:var(--line-l)}

.emptystate{margin:56px 0 0;text-align:center;color:var(--on-dark-mute);font-size:14.5px}
.linkbtn{background:none;border:0;padding:0;cursor:pointer;color:var(--on-dark);
  font:inherit;border-bottom:1px solid var(--line-d)}
.linkbtn:hover{border-bottom-color:var(--on-dark)}

.legal-doc h2{font-family:var(--d);font-weight:300;font-size:19px;
  margin:46px 0 14px;letter-spacing:.01em}
.legal-doc p{color:var(--on-dark-mute);font-size:14.5px;line-height:1.85;max-width:66ch}
.legal-doc .plainlist li{color:var(--on-dark-mute)}
.legal-doc .updated{color:var(--on-dark-mute);margin:14px 0 40px}

/* Grid and flex children default to min-width:auto, so a long unbroken string
   stretches its track and scrolls the whole page sideways. Measured. */
.wrap,.narrow,.detail,.detail>*,.cars,.cars>*,.grid,.cell,
.contactgrid,.contactgrid>*,.steps-list li{min-width:0}
.contactline,.legal-doc p,.maddr{overflow-wrap:anywhere}

/* The contact card and its parts appear on both surfaces. On the paper band the
   dark-surface muted tone measures 2.07:1 and is unreadable; these are its
   light-surface counterparts. Same tokens, correct side. */
.band.light .pricebox{border-color:var(--line-l)}
.band.light .contactsplit{border-top-color:var(--line-l)}
.band.light .contactsplit .mono,
.band.light .contactgrid .mono,
.band.light .maddr{color:var(--on-light-mute)}
.band.light .contactline a{border-bottom-color:var(--line-l)}
.band.light .contactline a:hover{border-bottom-color:var(--on-light)}
.band.light .eyebrow.plain{color:var(--on-light-mute)}
.band.light .steps-list p,
.band.light .emptystate{color:var(--on-light-mute)}
/* CARTELIER — operating
   Rules carried verbatim from design/reference/cartelier-original.html
   (approved SHA-256 cc9de111...0692). Selectors and declarations are the
   prototype's own; only their file placement is new.
   The operating interface: ink rail against a warm paper workspace,
   tables, tiles, panels, boxed fields, modals and generated documents. */

.cms{background:var(--paper);color:var(--on-light);min-height:100vh}
.cms .shot{background:radial-gradient(115% 85% at 50% 20%,#C9C5BC 0%,#B4AFA4 45%,#9A958A 100%)}
.cms .shot span{color:rgba(23,23,26,.14)}
.cms .shot::before{background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.4) 48%,transparent 62%)}
.cmslayout{display:grid;grid-template-columns:224px 1fr;min-height:100vh}
.rail{background:var(--ink);color:var(--on-dark);padding:26px 0}
.rail img{height:19px;width:auto;margin:0 22px 34px}
.rail a{display:block;padding:11px 22px;font-family:var(--d);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-mute);border-left:2px solid transparent}
.rail a:hover{color:var(--on-dark)}
.rail a.on{color:var(--on-dark);border-left-color:var(--on-dark);background:rgba(255,255,255,.05)}
.rail .sep{margin:26px 22px 12px;font-family:var(--d);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:rgba(154,152,143,.5)}
.main{padding:38px 40px 90px;max-width:1180px}
.cmshead{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--line-l);margin-bottom:34px}
.cmshead h2{font-size:29px}
.cmshead .sp{margin-left:auto;display:flex;gap:10px}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-l);border:1px solid var(--line-l);margin-bottom:38px}
.tile{background:var(--paper);padding:22px 22px 20px}
.tile .k{font-family:var(--d);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--on-light-mute);margin-bottom:12px}
.tile .v{font-family:var(--d);font-weight:200;font-size:32px;line-height:1;font-variant-numeric:tabular-nums}
.tile .d{font-family:var(--m);font-size:10.5px;color:var(--on-light-mute);margin-top:9px;letter-spacing:.03em}
.tile .d.up{color:var(--ok)}
.tile .d.warn{color:var(--warn)}
table{width:100%;border-collapse:collapse;font-size:13px}
.tablewrap{overflow-x:auto;border:1px solid var(--line-l)}
th{font-family:var(--d);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-light-mute);text-align:left;font-weight:400;padding:13px 14px;background:var(--paper2);white-space:nowrap}
td{padding:13px 14px;border-top:1px solid var(--line-l);white-space:nowrap;font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--paper2)}
td.num{text-align:right;font-family:var(--m);font-size:12px}
.pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--d);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;border:1px solid var(--line-l)}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.p-stock{color:#3E6F8E}
.p-res{color:var(--warn)}
.p-sold{color:var(--ok)}
.p-in{color:var(--on-light-mute)}
.pos{color:var(--ok)}
.neg{color:var(--no)}
.panel{border:1px solid var(--line-l);background:var(--paper);margin-bottom:26px}
.panel>h4{font-family:var(--d);font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;color:var(--on-light-mute);padding:15px 20px;border-bottom:1px solid var(--line-l);background:var(--paper2)}
.panel .pad{padding:22px 20px}
.twocol{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start}
#usrGrid{grid-template-columns:1.75fr 1fr}
#usrBody td,#usrGrid th{padding-left:11px;padding-right:11px}
.kv{display:grid;grid-template-columns:1fr auto;gap:8px;padding:7px 0;font-size:13px;border-bottom:1px solid rgba(23,23,26,.06)}
.kv span:first-child{color:var(--on-light-mute)}
.kv span:last-child{font-family:var(--m);font-size:12px}
.pl{display:grid;grid-template-columns:1fr auto;gap:10px;padding:10px 0;font-size:13.5px;border-bottom:1px solid var(--line-l)}
.pl span:last-child{font-family:var(--m);font-variant-numeric:tabular-nums}
.pl.total{border-bottom:0;border-top:1px solid var(--on-light);margin-top:6px;padding-top:14px;font-family:var(--d);font-size:16px}
.pl.total span:last-child{font-size:19px}
.editrow{display:grid;grid-template-columns:1fr 120px;gap:10px;align-items:center;padding:7px 0}
.editrow label{font-size:13px;color:var(--on-light-mute)}
.editrow input{width:100%;text-align:right;background:transparent;border:1px solid var(--line-l);padding:7px 9px;font-family:var(--m);font-size:12px}
.invbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.invbar input,.invbar select{background:#fff;border:1px solid var(--line-l);padding:9px 12px;font-size:13px;font-family:var(--b)}
.invbar input{min-width:260px}
.invbar input:focus,.invbar select:focus{outline:none;border-color:var(--on-light)}
.bulkbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--on-light);color:var(--paper);padding:10px 16px;margin-bottom:-1px}
.bulkbar .btn{border-color:rgba(244,242,237,.3)!important;color:var(--paper)}
.bulkbar .btn:hover{background:var(--paper);color:var(--on-light)}
tbody tr[data-ref]{cursor:pointer}
td.act a{font-family:var(--d);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--on-light-mute);border-bottom:1px solid var(--line-l)}
td.act a:hover{color:var(--on-light);border-bottom-color:var(--on-light)}
.rectabs{display:inline-flex;border:1px solid var(--line-l);margin-bottom:16px}
.rectabs button{background:none;border:0;padding:10px 20px;cursor:pointer;font-family:var(--d);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-light-mute)}
.rectabs button+button{border-left:1px solid var(--line-l)}
.rectabs button.on{background:var(--on-light);color:var(--paper)}
.reclist{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.reccard{border:1px solid var(--line-l);background:#fff;cursor:pointer;text-align:left;padding:0;transition:border-color .25s,transform .25s}
.reccard:hover{border-color:var(--on-light);transform:translateY(-2px)}
.reccard.on{border-color:var(--on-light);border-width:2px}
.reccard .rc{padding:12px 14px}
.reccard b{display:block;font-family:var(--d);font-weight:400;font-size:14px;margin-bottom:3px}
.reccard .m{font-family:var(--m);font-size:10.5px;color:var(--on-light-mute);line-height:1.8}
.recsum{display:flex;gap:22px;align-items:center;flex-wrap:wrap;border:1px solid var(--line-l);background:#fff;padding:16px 20px;margin-bottom:26px}
.recsum .thumb{width:88px;aspect-ratio:4/3;overflow:hidden;background:var(--paper3);flex:0 0 auto}
.recsum .thumb img{width:100%;height:100%;object-fit:cover}
.recsum h3{font-size:19px}
.recsum .m{font-family:var(--m);font-size:11px;color:var(--on-light-mute);margin-top:4px}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:26px}
.side{border:1px solid var(--line-l);background:#fff}
.side>h4{font-family:var(--d);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding:14px 18px;border-bottom:1px solid var(--line-l);background:var(--paper2);display:flex;gap:10px;align-items:center}
.side>h4 em{font-style:normal;margin-left:auto;font-family:var(--m);font-size:10px;letter-spacing:.04em;text-transform:none;color:var(--on-light-mute)}
.side .party{padding:14px 18px;border-bottom:1px solid var(--line-l)}
.docrow{display:flex;gap:14px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line-l);flex-wrap:wrap}
.docrow:last-child{border-bottom:0}
.docrow .n{font-size:13.5px}
.docrow .n small{display:block;font-family:var(--m);font-size:10px;color:var(--on-light-mute);margin-top:3px}
.docrow .sp2{margin-left:auto;display:flex;gap:8px;align-items:center}
.docrow .mini{font-family:var(--d);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:7px 13px;border:1px solid var(--line-l);background:none;cursor:pointer}
.docrow .mini:hover{background:var(--on-light);color:var(--paper);border-color:var(--on-light)}
.docrow.na{opacity:.45}
.p-none2{color:var(--on-light-mute)}
.remrow{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line-l)}
.remrow:last-child{border-bottom:0}
.remrow .ic{font-family:var(--d);font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border:1px solid var(--line-l);white-space:nowrap;margin-top:2px}
.remrow.high .ic{border-color:var(--no);color:var(--no)}
.remrow.mid .ic{border-color:var(--warn);color:var(--warn)}
.remrow .tx{font-size:13.5px}
.remrow .tx small{display:block;font-family:var(--m);font-size:10.5px;color:var(--on-light-mute);margin-top:4px}
.remrow .go{margin-left:auto;font-family:var(--d);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--on-light-mute);border-bottom:1px solid var(--line-l);cursor:pointer;white-space:nowrap}
.remrow .go:hover{color:var(--on-light);border-color:var(--on-light)}
.demrow{border:1px solid var(--line-l);background:#fff;padding:14px 16px;margin-bottom:10px}
.demrow .top{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.demrow .top b{font-family:var(--d);font-weight:400;font-size:15px}
.demrow .top .who{font-family:var(--m);font-size:11px;color:var(--on-light-mute)}
.demrow .top .sp3{margin-left:auto;display:flex;gap:8px;align-items:center}
.demrow .crit{font-family:var(--m);font-size:11px;color:var(--on-light-mute);margin-top:6px;line-height:1.8}
.demrow .notes{font-size:12.5px;color:var(--on-light);margin-top:8px}
.matchbox{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-l)}
.matchrow{display:flex;gap:12px;align-items:center;padding:8px 0;flex-wrap:wrap}
.matchrow+.matchrow{border-top:1px solid rgba(23,23,26,.06)}
.matchrow .m2{font-size:13px}
.matchrow .m2 small{display:block;font-family:var(--m);font-size:10.5px;color:var(--on-light-mute)}
.matchrow .sp4{margin-left:auto;display:flex;gap:8px}
.matchchip{display:inline-flex;align-items:center;gap:7px;font-family:var(--d);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border:1px solid var(--ok);color:var(--ok);cursor:pointer}
.matchchip:hover{background:var(--ok);color:#fff}
#demDot{display:inline-block;min-width:17px;height:17px;line-height:17px;text-align:center;border-radius:9px;background:var(--ok);color:#fff;font-family:var(--m);font-size:9.5px;margin-left:7px}
#remDot{display:inline-block;min-width:17px;height:17px;line-height:17px;text-align:center;border-radius:9px;background:var(--no);color:#fff;font-family:var(--m);font-size:9.5px;margin-left:7px}
.p-draft{color:var(--warn)}
.p-signed{color:var(--ok)}
.sect2{font-family:var(--d);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--on-light-mute);padding-bottom:12px;border-bottom:1px solid var(--line-l);margin:34px 0 22px}
.docmodal{position:fixed;inset:0;z-index:320;background:rgba(11,11,12,.72);overflow-y:auto;padding:26px 16px 80px;display:none}
.docmodal.open{display:block}
.docwrap{max-width:860px;margin:0 auto}
.docbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--ink2);color:var(--on-dark);padding:12px 18px;position:sticky;top:0;z-index:2}
.docbar .t2{font-family:var(--d);font-size:13px;letter-spacing:.06em}
.docbar .mini{font-family:var(--d);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:7px 13px;border:1px solid var(--line-d);background:none;color:var(--on-dark);cursor:pointer}
.docbar .mini:hover{background:var(--on-dark);color:var(--ink)}
.docbar .mini.close{margin-left:auto}
.docbar .mini.sel{background:none;color:var(--on-dark);border:1px solid var(--line-d);padding:6px 10px;font-family:var(--d);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase}
.docbar .mini.sel option{background:var(--ink2);color:var(--on-dark)}
.sigrow{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--line-l)}
.sigrow:last-child{border-bottom:0}
.sigrow .who b{display:block;font-family:var(--d);font-weight:400;font-size:14px}
.sigrow .who small{font-family:var(--m);font-size:10.5px;color:var(--on-light-mute)}
.sigbox{width:170px;height:56px;border:1px dashed var(--line-l);background:#fff;display:grid;place-items:center;overflow:hidden}
.sigbox img{max-width:92%;max-height:48px}
.sigbox span{font-family:var(--m);font-size:10px;color:var(--on-light-mute)}
.sigacts{margin-left:auto;display:flex;gap:8px}
.sigacts .mini{font-family:var(--d);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:7px 13px;border:1px solid var(--line-l);background:none;cursor:pointer}
.sigacts .mini:hover{background:var(--on-light);color:var(--paper);border-color:var(--on-light)}
.doc{background:#fff;color:#111;padding:52px 56px;font-family:var(--b);font-size:12px;line-height:1.6;color-scheme:light}
.doc+.doc{margin-top:20px}
.doc .dhead{display:flex;align-items:flex-start;gap:20px;border-bottom:1px solid #111;padding-bottom:16px;margin-bottom:26px}
.doc .dhead img{height:22px;width:auto}
.doc .dhead .rt{margin-left:auto;text-align:right;font-family:var(--m);font-size:9.5px;color:#666;line-height:1.8}
.doc h1{font-family:var(--d);font-weight:300;font-size:25px;letter-spacing:.02em;margin:0 0 6px}
.doc .made{font-family:var(--m);font-size:11px;color:#555;margin-bottom:26px}
.doc h3{font-family:var(--d);font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#555;margin:0 0 10px}
.dsect{margin-bottom:22px}
.dgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#d8d8d8;border:1px solid #d8d8d8}
.dfield{background:#fff;padding:8px 10px;min-height:46px;display:flex;flex-direction:column;gap:2px}
.dl2{display:block;font-family:var(--m);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:#777;margin-bottom:4px}
.dv{display:block;font-size:12.5px;color:#111;min-height:16px}
.dv.blank{color:#bbb}
input.di,select.di,textarea.di{width:100%;border:0;border-bottom:1px dashed #c4c4c4;background:#FCFCFB;font-family:var(--b);font-size:12.5px;padding:2px 0;color:#111;color-scheme:light}
input.di:focus,select.di:focus{outline:none;border-bottom-color:#111;background:#fff}
textarea.di.ta{border:1px dashed #c4c4c4;line-height:1.75;padding:7px 9px;resize:vertical;min-height:44px}
textarea.di.ta:focus{outline:none;border-style:solid;border-color:#111;background:#fff}
input.di.mny{font-family:var(--m);font-variant-numeric:tabular-nums}
input.di.r{text-align:right}
input.di.inl{display:inline-block;width:52px;border-bottom:1px solid #111;background:none;text-align:center;font-weight:500}
.dv.calc{font-family:var(--m);font-variant-numeric:tabular-nums}
.dfield{justify-content:flex-start}
input.di.calcin{border-bottom-style:solid;border-bottom-color:#111;background:#fff;font-weight:500;color:#111}
.dtable{width:100%;border-collapse:collapse;font-size:12.5px;border:1px solid #d8d8d8}
.dtable th{background:#f3f3f1;font-family:var(--m);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:#777;text-align:left;padding:8px 10px;font-weight:400}
.dtable td{padding:9px 10px;border-top:1px solid #e6e6e6}
.dtable .r{text-align:right}
.dtable .dv{display:inline;min-height:0}
.dtable td input.di{max-width:140px;margin-left:auto;display:block}
.dtable tr.tot td{border-top:1px solid #111;font-weight:500;font-family:var(--d)}
.dref{font-family:var(--m);color:var(--on-light);letter-spacing:.04em}
.cdrop{border:1px dashed rgba(23,23,26,.28);background:#fff;padding:22px;text-align:center;cursor:pointer;transition:border-color .3s,background .3s}
.cdrop.over{border-color:var(--on-light);background:var(--paper2)}
.cdrop b{display:block;font-family:var(--d);font-weight:400;font-size:15px;margin-bottom:5px}
.cdrop span{font-family:var(--m);font-size:10.5px;color:var(--on-light-mute);line-height:1.8}
.cdlist{margin-top:14px;display:grid;gap:8px}
.cdrow{display:flex;gap:12px;align-items:center;border:1px solid var(--line-l);background:#fff;padding:9px 11px;flex-wrap:wrap}
.cdthumb{width:46px;height:46px;flex:0 0 auto;background:var(--paper2);display:grid;place-items:center;overflow:hidden}
.cdthumb img{width:100%;height:100%;object-fit:cover}
.cdthumb span{font-family:var(--m);font-size:9px;color:var(--on-light-mute)}
.cdmeta{min-width:0;flex:1 1 150px}
.cdmeta b{display:block;font-family:var(--b);font-weight:400;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cdmeta small{font-family:var(--m);font-size:10px;color:var(--on-light-mute)}
.cdtype{border:1px solid var(--line-l);background:#fff;padding:6px 8px;font-size:12px;font-family:var(--b);max-width:190px}
.cddel{font-family:var(--d);font-size:9px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:7px 11px;border:1px solid var(--line-l);background:none;cursor:pointer}
.cddel:hover{background:var(--no);color:#fff;border-color:var(--no)}
.imgview{position:fixed;inset:0;z-index:420;background:rgba(8,8,10,.96);display:none;place-items:center;padding:40px;cursor:zoom-out}
.imgview.open{display:grid}
.imgview img{max-width:100%;max-height:100%;object-fit:contain}
.suplink{cursor:pointer;border-bottom:1px solid var(--line-l)}
.suplink:hover{border-bottom-color:var(--on-light)}
.dchk{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:#333;padding:8px 0}
.dchk span::before{content:"\2610";margin-right:6px;font-size:14px;vertical-align:-1px}
.doc .terms{font-size:10px;line-height:1.65;color:#333;margin-top:8px}
.doc .terms p{margin:0 0 7px}
.doc .terms b{font-family:var(--d);font-weight:500;font-size:10px;letter-spacing:.1em;text-transform:uppercase;display:block;margin:14px 0 5px;color:#111}
.dsign{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:36px}
.dsign>div{font-family:var(--m);font-size:9.5px;color:#555;line-height:2.2}
.dsign .line{height:0;border:0;border-top:1px solid #111;margin:0 0 8px}
.sigslot{height:56px;display:flex;align-items:flex-end}
.sigimg{max-height:54px;max-width:78%;width:auto;display:block;mix-blend-mode:multiply}
.signm{display:block;font-family:var(--b);font-size:11px;color:#111;letter-spacing:0;line-height:1.6}
.dfoot{margin-top:34px;padding-top:12px;border-top:1px solid #ddd;font-family:var(--m);font-size:9px;color:#777;line-height:1.8;text-align:center}
.ddiag{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:10px}
.ddiag div{border:1px solid #d8d8d8;padding:10px;text-align:center;font-family:var(--m);font-size:9px;color:#777}
.ddiag svg{width:100%;height:auto;display:block;margin-bottom:6px}
.savedflash{position:fixed;left:50%;transform:translateX(-50%);bottom:60px;z-index:400;background:var(--on-light);color:var(--paper);padding:12px 22px;font-family:var(--m);font-size:12px;opacity:0;pointer-events:none;transition:opacity .35s}
.savedflash.show{opacity:1}
.kanban{display:grid;grid-template-columns:repeat(6,minmax(190px,1fr));gap:1px;background:var(--line-l);border:1px solid var(--line-l);overflow-x:auto}
.col{background:var(--paper);min-width:190px}
.col>h5{font-family:var(--d);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;margin:0;padding:13px 14px;border-bottom:1px solid var(--line-l);background:var(--paper2);display:flex;justify-content:space-between}
.col .stack{padding:12px;display:grid;gap:10px}
.lead{border:1px solid var(--line-l);background:var(--paper);padding:12px;cursor:grab;transition:border-color .25s,transform .25s}
.lead:hover{border-color:var(--on-light);transform:translateY(-2px)}
.lead b{display:block;font-family:var(--d);font-weight:400;font-size:13px;margin-bottom:5px}
.lead .lc{font-size:11.5px;color:var(--on-light-mute);margin-bottom:9px}
.lead .foot{display:flex;justify-content:space-between;font-family:var(--m);font-size:10px;color:var(--on-light-mute)}
.src{font-family:var(--d);font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-l)}
.aging{display:grid;gap:9px}
.agerow{display:grid;grid-template-columns:78px 1fr 44px;gap:12px;align-items:center;font-size:12px}
.bar{height:7px;background:var(--paper3)}
.bar i{display:block;height:100%;background:var(--on-light)}
.bar i.w{background:var(--warn)}
.bar i.n{background:var(--no)}
.agerow span:last-child{font-family:var(--m);font-size:11px;text-align:right}
.cms .scheme{border-color:var(--line-l)}
.drop{border:1px dashed rgba(23,23,26,.28);background:var(--paper2);padding:52px 30px;text-align:center;margin-bottom:26px;transition:border-color .3s,background .3s}
.drop:hover{border-color:var(--on-light);background:var(--paper)}
.drop .dz-t{font-family:var(--d);font-weight:300;font-size:19px;margin:0 0 6px}
.drop .dz-s{font-family:var(--m);font-size:11px;color:var(--on-light-mute);margin:0 0 16px}
.drop .dz-n{font-family:var(--m);font-size:10.5px;color:var(--on-light-mute);line-height:1.9;max-width:52ch;margin:22px auto 0}
.pipe{list-style:none;margin:0;padding:0;font-size:13px}
.pipe li{display:flex;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid rgba(23,23,26,.06);opacity:.28;transition:opacity .4s}
.pipe li:last-child{border-bottom:0}
.pipe li.done{opacity:1}
.pipe li i{font-family:var(--m);font-style:normal;font-size:11px;color:var(--on-light-mute);min-width:16px}
.pipe li.done i{color:var(--ok)}
.pipe li span:last-child{margin-left:auto;font-family:var(--m);font-size:11px;color:var(--on-light-mute);text-align:right}
.p-ok{color:var(--ok)}
.p-review{color:var(--warn)}
.p-none{color:var(--on-light-mute)}
td input.rev{width:100%;background:var(--paper);border:1px solid var(--warn);padding:6px 8px;font-family:var(--m);font-size:12px}
td input.non{width:100%;background:var(--paper);border:1px solid var(--line-l);padding:6px 8px;font-family:var(--m);font-size:12px}
.done-note{border:1px solid var(--ok);padding:20px;font-size:13.5px;line-height:1.8}
.seg{display:inline-flex;border:1px solid var(--line-l)}
.seg button{background:none;border:0;padding:9px 20px;cursor:pointer;font-family:var(--d);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--on-light-mute);transition:background .3s,color .3s}
.seg button+button{border-left:1px solid var(--line-l)}
.seg button.on{background:var(--on-light);color:var(--paper)}
.ff{display:grid;gap:7px;margin-bottom:16px}
.ff>label{font-family:var(--d);font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-light-mute);display:flex;gap:8px;align-items:center}
.ff input,.ff select,.ff textarea{width:100%;background:#fff;border:1px solid var(--line-l);padding:10px 12px;font-size:13px;font-family:var(--b)}
.ff textarea{resize:vertical;line-height:1.7}
.ff input:focus,.ff select:focus,.ff textarea:focus{outline:none;border-color:var(--on-light)}
.ff .hint{font-family:var(--m);font-size:10px;color:var(--on-light-mute)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:0 20px}
.sect{font-family:var(--d);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--on-light);padding:22px 0 14px;border-bottom:1px solid var(--line-l);margin-bottom:20px}
.sect:first-child{padding-top:0}
#copyFields{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
#copyFields .sect,#copyFields .wide{grid-column:1/-1}
.tag2{font-family:var(--m);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border:1px solid var(--line-l);color:var(--on-light-mute)}
.tag2.auto{border-color:var(--ok);color:var(--ok)}
.tag2.card{border-color:#3E6F8E;color:#3E6F8E}
.tag2.you{border-color:var(--warn);color:var(--warn)}
.ff.fromcard input,.ff.fromcard select{background:#EDF2F5;border-color:#B9CEDA}
.ff.manual input,.ff.manual select,.ff.manual textarea{border-left:2px solid var(--warn)}
.ff.auto input{background:var(--paper2);color:var(--on-light-mute)}
.modal{position:fixed;inset:0;z-index:300;background:rgba(11,11,12,.68);overflow-y:auto;padding:32px 18px 80px;display:none}
.modal.open{display:block}
.modalbox{background:var(--paper);color:var(--on-light);max-width:1040px;margin:0 auto;border:1px solid var(--line-l)}
.modalhead{display:flex;align-items:center;gap:16px;padding:22px 28px;border-bottom:1px solid var(--line-l);background:var(--paper2);position:sticky;top:0;z-index:2}
.modalhead h3{font-size:22px}
.modalhead button.x{margin-left:auto;background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--on-light-mute)}
.modalhead button.x:hover{color:var(--on-light)}
.modalbody{padding:26px 28px}
.modalfoot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:18px 28px;border-top:1px solid var(--line-l);background:var(--paper2);position:sticky;bottom:0}
.importbar{display:flex;gap:18px;align-items:center;flex-wrap:wrap;border:1px solid var(--line-l);background:#fff;padding:16px 20px;margin-bottom:26px}
.importbar .t{font-family:var(--d);font-size:15px;font-weight:400}
.importbar .s{font-family:var(--m);font-size:11px;color:var(--on-light-mute);margin-top:3px}
.importbar.done{border-color:var(--ok);background:#F2F6F1}
.matchnote{border:1px solid var(--ok);background:#F2F6F1;color:var(--on-light);padding:14px 16px;margin:22px 0 0;font-size:13.5px;line-height:1.7}
.matchnote b{font-family:var(--d);font-weight:500}
.photodrop{border:1px dashed rgba(23,23,26,.28);background:#fff;padding:30px;text-align:center;font-family:var(--m);font-size:11.5px;color:var(--on-light-mute);line-height:1.9}
.updrop{border:1px dashed rgba(23,23,26,.3);background:#fff;padding:34px 24px;text-align:center;cursor:pointer;transition:border-color .3s,background .3s}
.updrop.over{border-color:var(--on-light);background:var(--paper2)}
.updrop .t{font-family:var(--d);font-size:16px;font-weight:400;margin-bottom:6px}
.updrop .s{font-family:var(--m);font-size:11px;color:var(--on-light-mute);line-height:1.9}
.upset{margin-top:16px;border:1px solid var(--line-l);background:#fff}
.upset>summary{font-family:var(--d);font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--on-light-mute);padding:12px 16px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px}
.upset>summary::-webkit-details-marker{display:none}
.upset>summary::before{content:"+";width:10px}
.upset[open]>summary::before{content:"\2013"}
.upset .pad2{padding:4px 16px 18px;border-top:1px solid var(--line-l)}
.upset .row4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.upstats{font-family:var(--m);font-size:11px;color:var(--on-light-mute);margin:16px 0 12px;display:flex;gap:20px;flex-wrap:wrap}
.upstats b{color:var(--ok);font-weight:400}
.upgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.uptile{border:1px solid var(--line-l);background:#fff;cursor:pointer;transition:border-color .25s}
.uptile:hover{border-color:var(--on-light)}
.uptile.primary{border-color:var(--on-light);border-width:2px}
.uptile .frame{position:relative;overflow:hidden;background:var(--paper3)}
.uptile .frame img{width:100%;height:100%;object-fit:cover;display:block}
.uptile{position:relative}
.uptile[draggable]{cursor:grab}
.uptile.dragging{opacity:.4}
.uptile.dropto{outline:2px solid var(--on-light);outline-offset:2px}
.uptile .del{position:absolute;top:6px;right:6px;z-index:2;width:22px;height:22px;line-height:1;border:0;border-radius:50%;background:rgba(11,11,12,.62);color:#fff;font-size:15px;cursor:pointer;opacity:0;transition:opacity .2s}
.uptile:hover .del{opacity:1}
.uptile .del:hover{background:var(--no)}
.uptile .badge{position:absolute;top:0;left:0;background:var(--on-light);color:var(--paper);font-family:var(--d);font-size:8.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px}
.uptile .meta2{padding:9px 10px;font-family:var(--m);font-size:10px;color:var(--on-light-mute);line-height:1.7}
.uptile .meta2 .nm{color:var(--on-light);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uptile .save{color:var(--ok)}
.uperr{color:var(--no)}


/* ---- CMS additions ---- */
.cddel.armed{background:var(--no);color:#fff;border-color:var(--no)}
.uptile .meta2 .cddel{font-size:8.5px;padding:5px 8px}
.cmshead .eyebrow a{border-bottom:1px solid var(--line-l)}
.cmshead .eyebrow a:hover{border-bottom-color:var(--on-light)}
.cms .ff input[type=file]{padding:8px;background:var(--paper2);font-family:var(--b);font-size:12.5px}
.cms .invbar{align-items:center}
.cms td.act a{margin-right:4px}
.cms .panel>h4{position:relative}
.cms .pl.total span:last-child{white-space:nowrap}

/* ---- admin fixes found by rendering ---- */

/* A long calculated figure with white-space:nowrap pushed the page sideways at
   390px. Let it wrap on narrow screens; keep it on one line where there is room. */
.pl.total{align-items:baseline}
@media(max-width:520px){
  .pl,.kv{grid-template-columns:1fr;gap:2px}
  .pl span:last-child,.kv span:last-child{white-space:normal;text-align:left}
  .pl.total span:last-child{white-space:normal;font-size:17px}
}
.kv span:last-child,.pl span:last-child{overflow-wrap:anywhere}
.cms .main,.cms .twocol,.cms .twocol>*,.cms .panel,.cms .pad,
.cms .grid2,.cms .grid2>*,.cms .tiles,.cms .tile,.cms .upgrid,.cms .upgrid>*{min-width:0}
@media(max-width:700px){.cms .grid2,.cms .grid3{grid-template-columns:1fr}}

/* --on-light-mute (#6B6A64) measures 4.85:1 on --paper but only 4.31:1 on
   --paper2, which is what table headers and panel headers sit on. Same hue and
   saturation, lightness reduced until it clears 4.5:1 there. */
.cms th,
.cms .panel>h4,
.cms .side>h4,
.cms td.act a,
.cms td .mono,
.cms .col>h5{color:var(--mute-text)}
.cms .plate{font-size:10.5px;color:var(--mute-text)}

/* ---- operating interface: responsive overrides, re-declared ----------------
   The collected @media block near the top of this file (the "responsive"
   section) was written to load last, and for the public site it does — every
   public base rule it overrides sits above it.

   The operating section does not: its base rules are appended below that block,
   so on the CMS the cascade ran the wrong way round and every one of those
   overrides lost to the rule it was meant to override. The visible consequence
   was that .cmslayout kept its 224px rail column on a phone — while the rail
   itself had correctly become a hidden fixed drawer — leaving the workspace
   166px wide on a 390px screen with the table and the tiles clipped inside it.

   These are the same declarations, re-declared after the rules they override.
   Nothing public is touched: every selector here belongs to the CMS.          */

@media(max-width:1100px){.reclist{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1000px){
  #usrGrid,.twocol,.sides{grid-template-columns:1fr}
}
@media(max-width:900px){
  .cmslayout{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .upset .row4,.upgrid{grid-template-columns:repeat(2,1fr)}
  .rail{padding:26px 0 calc(26px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:820px){.grid3,.grid2,#copyFields{grid-template-columns:1fr}}
@media(max-width:640px){.doc{padding:28px 22px}}
@media(max-width:620px){.reclist{grid-template-columns:1fr}}
@media(max-width:600px){
  .main{padding:28px 20px 60px}
  .tiles{grid-template-columns:1fr}
}

/* ---- staff accounts, dashboard reminders, activity -------------------------
   New components, drawn in the same language as the rest of the operating
   interface: hairlines rather than cards, mono for anything numeric or
   referential, uppercase labels on the tracking ladder, no corner radius and
   no shadow.                                                                */

/* Who is signed in, at the foot of the rail. */
.railwho{margin:34px 22px 0;padding-top:18px;border-top:1px solid var(--line-d)}
.railwho .n{display:block;font-family:var(--b);font-size:13px;color:var(--on-dark)}
.railwho .r{display:block;margin-top:5px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}

/* Dashboard: what needs attention. Each group is a hairline-separated list,
   the count sits on the right of its heading, and the whole row is the link —
   a reminder you have to aim at is a reminder you ignore. */
.attn{border-bottom:1px solid var(--line-l)}
.attn:last-child{border-bottom:0}
.attnhead{display:flex;align-items:center;gap:12px;margin:0;padding:14px 20px 10px;
  font-family:var(--d);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute-text)}
.attnhead .count{margin-left:auto;font-size:11px;letter-spacing:.04em;color:var(--on-light)}
.attnrow{display:flex;align-items:baseline;gap:14px;padding:9px 20px;
  text-decoration:none;color:var(--on-light);font-size:13.5px}
.attnrow:last-child{padding-bottom:16px}
.attnrow:hover{background:var(--paper2)}
.attnrow em{font-style:normal;font-size:11px;letter-spacing:.04em;color:var(--mute-text);margin-left:8px}
.attnrow .rt{margin-left:auto;font-size:11.5px;letter-spacing:.04em;color:var(--mute-text);
  white-space:nowrap;font-variant-numeric:tabular-nums}

/* Dashboard: recent activity. */
.actrow{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;
  padding:12px 20px;border-bottom:1px solid var(--line-l)}
.actrow:last-of-type{border-bottom:0}
.actrow .who{font-size:12.5px;color:var(--on-light)}
.actrow .what{font-size:12.5px;color:var(--mute-text);min-width:0;overflow-wrap:anywhere}
.actrow .when{font-size:10.5px;color:var(--mute-text);white-space:nowrap}

/* Checkboxes that sit in a row of fields, and inside the filter bar. */
.checkrow,.checkinline{display:flex;gap:10px;align-items:center;font-family:var(--b);
  text-transform:none;letter-spacing:0;font-size:13px;color:var(--on-light)}
.checkrow input,.checkinline input{width:auto;height:auto;accent-color:var(--ink)}
.checkinline{font-size:12.5px;color:var(--mute-text);white-space:nowrap}

/* A negative margin is the one figure in the CMS that may carry colour. */
td.neg,.pl.total span.neg,.neg{color:var(--no)}
.pl.total small{font-size:11px;letter-spacing:.04em;color:var(--mute-text);margin-left:8px}

/* A disabled field must read as "not yours", not as "broken". */
.cms input:disabled,.cms select:disabled,.cms textarea:disabled{
  background:var(--paper2);color:var(--mute-text);cursor:not-allowed;opacity:1}

@media(max-width:900px){
  .railwho{margin:26px 24px 0}
  .actrow{grid-template-columns:1fr;gap:4px}
  .actrow .when{margin-top:2px}
}

/* The role key. .kv puts label and value in two columns, which is right for
   "PARF rate / 50% of ARF" and wrong here: a role name is a word, not a
   figure, and squeezing "Administrator" into the label column set it one
   letter per line. Name above, description below. */
.rolerow{padding:14px 0;border-bottom:1px solid var(--line-l)}
.rolerow:first-child{padding-top:0}
.rolerow:last-child{border-bottom:0;padding-bottom:0}
.rolename{margin:0 0 5px;font-family:var(--d);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-light)}
.roledesc{margin:0;font-size:13px;line-height:1.6;color:var(--mute-text)}

/* ---- public calculators and the enquiry form ------------------------------
   These sit on the ink surface beside the price, so they borrow the pricebox
   treatment: a hairline box, no fill, no radius, figures in the mono face on
   the tabular-numeral setting so a column of dollars lines up.             */

.calcbox{margin-top:16px}
.calcout .big{font-family:var(--d);font-weight:200;font-size:38px;line-height:1;
  font-variant-numeric:tabular-nums}
.calcout .sub{margin:10px 0 0;font-family:var(--m);font-weight:300;font-size:11px;
  letter-spacing:.04em;color:var(--on-dark-mute)}

.calcfields{margin:24px 0 4px;display:grid;gap:18px}
.calcf{display:grid;gap:8px}
.calcf .dlab{font-family:var(--d);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent)}
.calcf output{font-family:var(--m);font-weight:300;font-size:11.5px;letter-spacing:.04em;
  color:var(--on-dark);font-variant-numeric:tabular-nums}
.calcf input[type=range]{width:100%;accent-color:var(--on-dark);background:transparent;
  height:22px;cursor:pointer;margin:0}
.calcf input[type=range]:focus-visible{outline:1px solid var(--accent);outline-offset:4px}

.calcwork{margin-top:20px;border-top:1px solid var(--line-d);padding-top:16px}
.calcnote{margin:14px 0 0;font-size:10.5px;line-height:1.75;letter-spacing:.04em;
  color:var(--on-dark-mute)}
/* When the controls go past what a regulated lender may write, the note stops
   being background information and starts being the point. */
.calcnote.is-warn{color:var(--warn)}
.calcbox.beyond .calcout .big{color:var(--warn)}

/* Depreciation at different holding periods. */
.depcalc{margin-top:56px;border-top:1px solid var(--line-d);padding-top:40px}
.depcalc h2{font-size:clamp(24px,3vw,34px)}
.deplede{margin:14px 0 26px;max-width:62ch;color:var(--on-dark-mute);font-size:14.5px;line-height:1.8}
.depslider{max-width:340px;margin-bottom:24px}
.deptable{width:100%;border-collapse:collapse;font-size:13px}
.deptable th{text-align:left;font-family:var(--d);font-weight:400;font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  padding:0 16px 12px 0;border-bottom:1px solid var(--line-d)}
.deptable th.num,.deptable td.num{text-align:right;padding-right:0}
.deptable td{padding:13px 16px 13px 0;border-bottom:1px solid var(--line-d);
  color:var(--on-dark-mute);font-variant-numeric:tabular-nums}
.deptable tr.on td{color:var(--on-dark);background:var(--ink2)}
.deptable tr.on td:first-child{box-shadow:inset 2px 0 0 var(--on-dark)}

/* The enquiry form. */
.enqform{margin-top:16px;border:1px solid var(--line-d);padding:26px 24px 28px}
.enqform .field{margin-bottom:18px}
.enqform .btn{margin-top:6px}
/* The honeypot: present in the markup, never on the screen, never in the
   accessibility tree, and never reachable by keyboard. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.narrowband{max-width:760px}

@media(max-width:900px){
  .depcalc{margin-top:44px;padding-top:32px}
  .deptable{font-size:12px}
  .deptable td,.deptable th{padding-right:12px}
}

/* ---- checklists, documents, the lead pipeline, masked contact details ----- */

/* A count sitting in a panel heading. */
.panel>h4 .hcount{float:right;font-family:var(--m);font-weight:300;font-size:11px;
  letter-spacing:.04em;color:var(--on-light);text-transform:none}

/* Progress: one hairline bar, no percentage shouted at anyone. */
.meter{height:2px;background:var(--paper3)}
.meter span{display:block;height:2px;background:var(--on-light);transition:width .3s ease}

.tasklist{list-style:none;margin:0;padding:0}
.tasklist li{display:flex;align-items:flex-start;gap:12px;padding:11px 20px;
  border-bottom:1px solid var(--line-l)}
.tasklist li:last-child{border-bottom:0}
.tasklist li.done .tlabel{color:var(--mute-text)}
.tform{display:inline;margin:0}
.tbox{width:16px;height:16px;flex:none;margin-top:2px;border:1px solid var(--on-light);
  background:transparent;cursor:pointer;padding:0;line-height:1;font-size:11px;
  color:var(--on-light);display:grid;place-items:center}
.tasklist li.done .tbox{background:var(--on-light);color:var(--paper)}
.tbox.static{cursor:default}
.tlabel{flex:1;min-width:0;font-size:13.5px;line-height:1.5}
.tlabel em{display:block;margin-top:4px;font-style:normal;font-size:10.5px;
  letter-spacing:.04em;color:var(--mute-text)}
.trm{background:none;border:0;color:var(--mute-text);cursor:pointer;font-size:16px;
  line-height:1;padding:0 2px}
.trm:hover{color:var(--no)}
.addtask{display:flex;gap:10px}
.addtask input{flex:1;min-width:0}

.docform .ff{margin-bottom:14px}
.doclist{list-style:none;margin:0;padding:0}
.doclist li{display:flex;align-items:baseline;gap:10px;padding:12px 20px;
  border-bottom:1px solid var(--line-l);flex-wrap:wrap}
.doclist li:last-child{border-bottom:0}
.doclist .dmeta{flex-basis:100%;font-size:10.5px;color:var(--mute-text)}

/* The pipeline, as one strip of counts rather than draggable columns: a
   brokerage with a few dozen live enquiries reads a strip faster than a board,
   and a board invites dragging, which on a phone is a fight. */
.pipeline{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-l);
  border:1px solid var(--line-l);margin-bottom:26px}
.pipecol{background:var(--paper);padding:16px 14px;text-decoration:none;display:block;min-width:0}
.pipecol:hover{background:var(--paper2)}
.pipecol.on{background:var(--paper2);box-shadow:inset 0 2px 0 var(--on-light)}
.pipecol .k{display:block;font-family:var(--d);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute-text)}
.pipecol .v{display:block;margin-top:10px;font-family:var(--d);font-weight:200;font-size:26px;
  line-height:1;color:var(--on-light);font-variant-numeric:tabular-nums}

/* Contact details someone's role does not extend to. Saying "held" is better
   than showing a blank, which reads as missing data. */
.masked{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-text)}

@media(max-width:900px){
  .pipeline{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:480px){
  .pipeline{grid-template-columns:repeat(2,1fr)}
  .addtask{flex-wrap:wrap}
}

/* The dashboard holds three panels: what needs doing (long), what is waiting
   (short) and what just happened (short). Letting the first span both rows
   keeps the two short ones stacked beside it instead of leaving a gap. */
.twocol.dash{grid-template-columns:1.45fr 1fr;align-items:start}
.twocol.dash>section:first-child{grid-row:span 2}
@media(max-width:1000px){
  .twocol.dash{grid-template-columns:1fr}
  .twocol.dash>section:first-child{grid-row:auto}
}

/* The depreciation table needed its own wrapper. Borrowing .tablewrap brought
   the operating interface's table styling with it — a paper-coloured header
   row, which on the ink surface of a vehicle page reads as a mistake. */
.depwrap{overflow-x:auto;max-width:100%}
.depwrap .deptable th{background:none}