/* Torqfolio public redesign — precision automotive studio */
#publicSite{
  --tf-ink:#17191c;--tf-muted:#40464a;--tf-paper:#f5f3ee;--tf-white:#fff;
  --tf-line:#d4d2cc;--tf-signal:#a94325;--tf-signal-dark:#853019;--tf-signal-soft:#f1dfd7;--tf-steel:#e8eaeb;
  --tf-dark:#17191c;--tf-display:"Space Grotesk",system-ui,sans-serif;
  --tf-body:Inter,system-ui,sans-serif;--tf-mono:"IBM Plex Mono",monospace;
  --tf-width:min(1360px,92vw);background:var(--tf-paper);color:var(--tf-ink);
  /* clip, not hidden. Both stop the hero's angled panels spilling sideways,
     but overflow:hidden makes this element the scroll container for the whole
     public site, and position:sticky inside a scroll container that is not
     the viewport never fires. That is why the car page's rail scrolled away
     with the page. clip contains the same overflow without the side effect. */
  font-family:var(--tf-body);overflow:clip
}
#publicSite *{box-sizing:border-box}
#publicSite :focus-visible{outline:3px solid rgba(169,67,37,.32);outline-offset:3px}
#publicSite h1,#publicSite h2,#publicSite h3{margin:0;color:var(--tf-ink);font-family:var(--tf-display);font-weight:600;text-transform:none;letter-spacing:-.045em;line-height:1}
#publicSite p{margin:0;color:var(--tf-muted);line-height:1.7}
#publicSite button,#publicSite a{font-family:inherit}
#publicSite .tf-kicker{display:block;color:var(--tf-signal);font:600 11px/1 var(--tf-mono);letter-spacing:.14em;text-transform:uppercase}

/* Contrast guardrails. The public page previously inherited pale typography
   from its retired dark-green theme, creating white-on-white combinations. */
#publicSite .tf-hero,#publicSite .tf-services,#publicSite .tf-process{color:var(--tf-ink)}
#publicSite .tf-hero p,#publicSite .tf-services p,#publicSite .tf-process p{color:var(--tf-muted)}
#publicSite .tf-status-card,#publicSite .tf-float-card,#publicSite .tf-evidence-board{color:var(--tf-ink)}
#publicSite .tf-status-card p,#publicSite .tf-float-card p,#publicSite .tf-evidence-board p{color:var(--tf-muted)}
#publicSite .tf-proof,#publicSite .tf-svc-featured,#publicSite .tf-about,#publicSite .tf-final,#publicSite .tf-foot{color:#fff}

#publicSite .tf-nav{position:sticky;top:0;z-index:20;width:100%;height:78px;margin:0;padding:0 max(4vw,calc((100vw - 1360px)/2));display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid rgba(23,25,28,.12);background:rgba(245,243,238,.94);backdrop-filter:blur(16px)}
#publicSite .tf-logo{display:flex;align-items:center;gap:10px;color:var(--tf-ink);text-decoration:none}
#publicSite .tf-logo i{display:grid;width:36px;height:36px;place-items:center;border-radius:50%;background:var(--tf-ink);color:var(--tf-paper)}
#publicSite .tf-logo i svg{width:22px;height:22px}
#publicSite .tf-logo b{font:700 20px/1 var(--tf-display);letter-spacing:-.04em;text-transform:none}
#publicSite .tf-nav-links{display:flex;gap:32px}
#publicSite .tf-nav-links a{color:#4e5256;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;border:0;padding:0}
#publicSite .tf-nav-links a:hover{color:var(--tf-signal);border:0}
#publicSite .tf-nav-act{display:flex;align-items:center;gap:18px}
#publicSite .tf-nav-burger{display:none;width:38px;height:38px;padding:0;border:1px solid rgba(23,25,28,.16);border-radius:10px;background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
#publicSite .tf-nav-burger span{display:block;width:16px;height:1.6px;border-radius:2px;background:#17191c;transition:transform .2s ease,opacity .2s ease}
#publicSite .tf-nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
#publicSite .tf-nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
#publicSite .tf-nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}
#publicSite .tf-nav-menu{display:none}
#publicSite .tf-text-btn{padding:0;border:0;background:transparent;color:var(--tf-ink);font-size:13px;font-weight:650;cursor:pointer}
#publicSite .tf-text-btn:hover{color:var(--tf-signal)}
#publicSite .tf-btn{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:13px 18px;border:1px solid transparent;border-radius:8px;font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}
#publicSite .tf-btn:hover{transform:translateY(-2px)}
#publicSite .tf-btn-primary{background:var(--tf-signal);border-color:var(--tf-signal);color:#fff;box-shadow:0 10px 24px rgba(133,48,25,.16)}
#publicSite .tf-btn-primary:hover{background:var(--tf-signal-dark);border-color:var(--tf-signal-dark);box-shadow:0 14px 32px rgba(133,48,25,.22)}
#publicSite .tf-btn-ghost{background:transparent;border-color:#bfc1c1;color:var(--tf-ink)}
#publicSite .tf-btn-ghost:hover{background:#fff;border-color:#8f9294}
#publicSite .tf-btn-large{min-height:56px;padding:16px 24px;font-size:14px}
#publicSite .tf-btn-dark{background:var(--tf-dark);color:#fff;border-color:var(--tf-dark)}

#publicSite .tf-hero{position:relative;width:var(--tf-width);min-height:720px;margin:auto;padding:76px 0 92px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr);gap:clamp(50px,7vw,110px);align-items:center}
#publicSite .tf-hero::before{content:"";position:absolute;top:-87px;right:-20vw;width:68vw;height:810px;background:#e7e8e5;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%);z-index:0}
#publicSite .tf-hero-copy,#publicSite .tf-status-stage{position:relative;z-index:1}
#publicSite .tf-live{display:flex;align-items:center;gap:10px;margin-bottom:26px;color:#4d514f;font:600 11px/1 var(--tf-mono);letter-spacing:.08em;text-transform:uppercase}
#publicSite .tf-live i{width:8px;height:8px;border-radius:50%;background:#2ca766;box-shadow:0 0 0 5px rgba(44,167,102,.12);animation:none}
#publicSite .tf-hero h1{font-size:clamp(64px,7.1vw,112px);line-height:.84;letter-spacing:-.075em}
#publicSite .tf-hero h1 em{display:inline;color:var(--tf-signal);font-style:normal}
#publicSite .tf-lede{max-width:620px;margin-top:32px;font-size:clamp(17px,1.3vw,20px);line-height:1.65;color:#555a5d}
#publicSite .tf-cta{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin-top:34px}
#publicSite .tf-trust{display:flex;flex-wrap:wrap;gap:22px;margin-top:40px;padding-top:24px;border-top:1px solid var(--tf-line)}
#publicSite .tf-trust span{font-size:11px;font-weight:650;color:#54585b}
#publicSite .tf-trust span::before{content:"✓";margin-right:7px;color:var(--tf-signal);font-weight:800}

#publicSite .tf-status-stage{min-height:570px;display:grid;place-items:center}
#publicSite .tf-status-glow{position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(169,67,37,.1);filter:blur(45px)}
#publicSite .tf-status-card{position:relative;width:min(570px,100%);padding:26px;border:1px solid rgba(255,255,255,.7);border-radius:22px;background:rgba(255,255,255,.9);box-shadow:0 35px 90px rgba(24,28,31,.18);backdrop-filter:blur(18px)}
#publicSite .tf-status-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
#publicSite .tf-status-head strong,#publicSite .tf-status-head small{display:block}
#publicSite .tf-status-head strong{margin-top:9px;font:650 19px/1.2 var(--tf-display);letter-spacing:-.03em}
#publicSite .tf-status-head small{margin-top:5px;color:#5f6468;font:500 10px/1.3 var(--tf-mono)}
#publicSite .tf-status-pill{padding:8px 11px;border-radius:99px;background:var(--tf-signal-soft);color:#7f2d18;font:600 9px/1 var(--tf-mono);letter-spacing:.08em;text-transform:uppercase}
#publicSite .tf-car-art{position:relative;height:210px;margin:18px 0 10px;display:grid;place-items:center;overflow:hidden;border-radius:15px;background:linear-gradient(145deg,#272b2e,#111315);color:#bfc2c3}
#publicSite .tf-car-art img{width:100%;height:100%;object-fit:cover;object-position:center 58%;filter:saturate(.72) contrast(1.05)}
#publicSite .tf-car-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,14,.02) 35%,rgba(10,12,14,.75) 100%)}
#publicSite .tf-car-art a{position:absolute;z-index:1;right:10px;bottom:8px;color:#e3e6e7;font:500 7px/1.2 var(--tf-mono);text-decoration:none;opacity:.82}
#publicSite .tf-progress{display:grid;grid-template-columns:repeat(5,1fr);margin:22px 2px 24px}
#publicSite .tf-progress button{position:relative;padding:0;border:0;background:transparent;text-align:center;color:#55595c;font:600 8px/1 var(--tf-mono);text-transform:uppercase;cursor:pointer}
#publicSite .tf-progress button::before{content:"";position:absolute;z-index:0;top:10px;left:-50%;width:100%;height:2px;background:#dedfdf}
#publicSite .tf-progress button:first-child::before{display:none}
#publicSite .tf-progress i{position:relative;z-index:1;display:grid;width:22px;height:22px;margin:0 auto 8px;place-items:center;border-radius:50%;background:#e5e6e6;color:#55595b;font-style:normal;font-size:9px}
#publicSite .tf-progress .is-done i{background:var(--tf-dark);color:#fff}
#publicSite .tf-progress .is-done::before,#publicSite .tf-progress .is-active::before{background:var(--tf-signal)}
#publicSite .tf-progress .is-active{color:var(--tf-ink);font-weight:700}
#publicSite .tf-progress .is-active i{background:var(--tf-signal);color:#fff;box-shadow:0 0 0 5px rgba(169,67,37,.12)}
#publicSite .tf-progress button:hover{color:var(--tf-ink)}
#publicSite .tf-finding{display:grid;grid-template-columns:36px 1fr auto;gap:13px;align-items:center;padding:15px;border-radius:12px;background:#f3f1ed}
#publicSite .tf-finding-icon{display:grid;width:36px;height:36px;place-items:center;border-radius:9px;background:var(--tf-signal-soft);color:var(--tf-signal);font-weight:800}
#publicSite .tf-finding span,#publicSite .tf-finding strong{display:block}
#publicSite .tf-finding span{color:var(--tf-signal);font:600 8px/1 var(--tf-mono);letter-spacing:.1em;text-transform:uppercase}
#publicSite .tf-finding strong{margin-top:5px;font-size:12px}
#publicSite .tf-finding p{margin-top:4px;font-size:10px;line-height:1.45}
#publicSite .tf-finding button{width:32px;height:32px;border:0;border-radius:50%;background:var(--tf-dark);color:#fff;cursor:pointer}
#publicSite .tf-finding.is-changing{animation:tfPreviewIn .28s ease}
@keyframes tfPreviewIn{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:none}}
#publicSite .tf-float-card{position:absolute;z-index:2;padding:13px 16px;border-radius:10px;background:#fff;box-shadow:0 16px 40px rgba(20,22,24,.16)}
#publicSite .tf-float-card span,#publicSite .tf-float-card strong,#publicSite .tf-float-card small{display:block}
#publicSite .tf-float-card span,#publicSite .tf-float-card small{color:#5f6467;font:600 8px/1.4 var(--tf-mono);text-transform:uppercase;letter-spacing:.08em}
#publicSite .tf-float-card strong{margin-top:5px;font-size:11px}
#publicSite .tf-float-top{top:52px;right:-20px}
#publicSite .tf-float-bottom{bottom:35px;left:-35px;display:flex;align-items:center;gap:10px}
#publicSite .tf-float-bottom>i{display:grid;width:28px;height:28px;place-items:center;border-radius:50%;background:#e5f5eb;color:#18884d;font-style:normal}

#publicSite .tf-proof{padding:26px max(4vw,calc((100vw - 1360px)/2));display:grid;grid-template-columns:.8fr 2fr;gap:30px;align-items:center;background:var(--tf-dark);color:#fff}
#publicSite .tf-proof p{color:#d2d5d6;font-size:13px}
#publicSite .tf-proof>div{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#publicSite .tf-proof span{font-size:12px;font-weight:600}
#publicSite .tf-proof b{margin-right:10px;color:#e49a81;font:600 9px/1 var(--tf-mono)}

#publicSite .tf-sec{width:var(--tf-width);margin:auto;padding:120px 0;border:0}
#publicSite .tf-sec-head{display:grid;grid-template-columns:1.5fr .65fr;gap:70px;align-items:end;margin:0 0 55px}
#publicSite .tf-sec-head h2{max-width:850px;margin-top:16px;font-size:clamp(43px,5vw,72px)}
#publicSite .tf-sec-head>p{max-width:470px;font-size:15px}
#publicSite .tf-svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
#publicSite .tf-svc{position:relative;min-height:350px;padding:25px;display:flex;flex-direction:column;gap:0;border:1px solid var(--tf-line);border-radius:14px;background:rgba(255,255,255,.48);transition:transform .2s,background .2s,box-shadow .2s}
#publicSite .tf-svc:hover{transform:translateY(-3px);background:#fff;box-shadow:0 18px 42px rgba(28,30,31,.08);border-color:var(--tf-line)}
#publicSite .tf-svc-featured{background:var(--tf-dark);border-color:var(--tf-dark);color:#fff}
#publicSite .tf-svc-featured:hover{background:#222529}
#publicSite .tf-svc-no{align-self:flex-end;color:#666b6e;font:600 10px/1 var(--tf-mono)}
#publicSite .tf-svc-featured .tf-svc-no{color:#d2d5d6}
#publicSite .tf-svc-icon{display:grid;width:48px;height:48px;margin-top:18px;place-items:center;border-radius:12px;background:#e7e6e1;color:var(--tf-ink);font-size:21px}
#publicSite .tf-svc-featured .tf-svc-icon{background:var(--tf-signal);color:#fff}
#publicSite .tf-svc h3{margin-top:32px;font-size:26px;letter-spacing:-.04em}
#publicSite .tf-svc-featured h3{color:#fff}
#publicSite .tf-svc p{margin-top:14px;font-size:13px;line-height:1.65}
#publicSite .tf-svc-featured p{color:#cbd0d2}
#publicSite .tf-svc button{margin-top:auto;padding:22px 0 0;display:flex;justify-content:space-between;border:0;border-top:1px solid var(--tf-line);background:transparent;color:var(--tf-ink);font-size:11px;font-weight:700;cursor:pointer}
#publicSite .tf-svc-featured button{color:#fff;border-color:#373a3d}
#publicSite .tf-svc button span{color:var(--tf-signal)}

#publicSite .tf-evidence{padding:110px max(4vw,calc((100vw - 1360px)/2));display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(60px,9vw,150px);align-items:center;background:#dde0df}
#publicSite .tf-evidence-copy h2{margin-top:18px;font-size:clamp(42px,4.7vw,68px)}
#publicSite .tf-evidence-copy p{max-width:560px;margin-top:25px;font-size:15px}
#publicSite .tf-evidence-copy .tf-btn{margin-top:30px}
#publicSite .tf-evidence-board{border-radius:16px;background:#fff;box-shadow:0 28px 70px rgba(28,30,31,.12);overflow:hidden}
#publicSite .tf-evidence-row{position:relative;padding:23px 28px 23px 145px;border-bottom:1px solid #e5e5e2}
#publicSite .tf-evidence-row:last-child{border:0}
#publicSite .tf-evidence-row>span{position:absolute;left:28px;top:25px;color:#62676a;font:600 9px/1 var(--tf-mono);letter-spacing:.06em;text-transform:uppercase}
#publicSite .tf-evidence-row strong,#publicSite .tf-evidence-row small{display:block}
#publicSite .tf-evidence-row strong{font-size:13px}
#publicSite .tf-evidence-row small{margin-top:7px;color:var(--tf-signal);font:600 9px/1 var(--tf-mono);text-transform:uppercase}
#publicSite .tf-evidence-row.is-alert{background:#fff7f3;border-left:4px solid var(--tf-signal);padding-left:141px}

#publicSite .tf-process{padding-top:120px}
#publicSite .tf-steps{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;border-top:1px solid #c9c9c5}
#publicSite .tf-steps li{position:relative;min-height:250px;padding:26px 30px 20px 0;list-style:none;border-right:1px solid #c9c9c5}
#publicSite .tf-steps li+li{padding-left:30px}
#publicSite .tf-steps li:last-child{border:0}
#publicSite .tf-steps li>span{color:var(--tf-signal);font:600 10px/1 var(--tf-mono)}
#publicSite .tf-steps h3{margin-top:60px;font-size:23px}
#publicSite .tf-steps p{margin-top:13px;font-size:13px;line-height:1.6}

#publicSite .tf-about{padding:100px max(4vw,calc((100vw - 1360px)/2));display:grid;grid-template-columns:120px 1fr .8fr;gap:55px;align-items:center;background:var(--tf-dark)}
#publicSite .tf-about-mark{display:grid;width:96px;height:96px;place-items:center;border-radius:50%;background:var(--tf-signal);color:#fff}
#publicSite .tf-about-mark svg{width:54px}
#publicSite .tf-about h2{max-width:620px;margin-top:16px;color:#fff;font-size:clamp(40px,4.3vw,64px)}
#publicSite .tf-about .tf-kicker{color:#e49a81}
#publicSite .tf-about>div:last-child{padding-left:48px;border-left:1px solid #373a3c}
#publicSite .tf-about p{color:#cbd0d2;font-size:15px}
#publicSite .tf-about p+p{margin-top:16px}
#publicSite .tf-final{padding:135px 5vw;text-align:center;background:#202326;color:#fff}
#publicSite .tf-final .tf-kicker{color:#dc8b70}
#publicSite .tf-final h2{max-width:950px;margin:18px auto 0;color:#fff;font-size:clamp(48px,6vw,88px)}
#publicSite .tf-final p{margin-top:20px;color:#d5d8da;font-size:17px}
#publicSite .tf-final .tf-cta{justify-content:center}
#publicSite .tf-final .tf-btn-primary{background:var(--tf-signal);border-color:var(--tf-signal);color:#fff;box-shadow:none}
#publicSite .tf-final .tf-text-btn{color:#fff}

#publicSite .tf-foot{width:100%;margin:0;padding:40px max(4vw,calc((100vw - 1360px)/2));display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:25px;border:0;background:#101214;color:#b8bcbe;font-size:11px;letter-spacing:0;text-transform:none}
/* Its own line under the rule rather than a fourth column: it is the answer to
   "who am I actually dealing with", which belongs everywhere, not only on the
   legal pages -- but it is not competing with the links for attention. */
#publicSite .tf-foot-legal{
  flex:1 0 100%;order:9;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:11px;line-height:1.65;color:#7e8385;
}
#publicSite .tf-foot-legal b{color:#b8bcbe;font-weight:650}
#publicSite .tf-foot .tf-logo{color:#fff}
#publicSite .tf-foot .tf-logo i{background:#fff;color:var(--tf-ink)}
#publicSite .tf-foot a,#publicSite .tf-foot button{color:#c6c9ca;text-decoration:none;border:0;background:transparent;font:inherit;letter-spacing:0;text-transform:none;cursor:pointer}
#publicSite .tf-foot a:hover,#publicSite .tf-foot button:hover{color:#fff}

/* request and access sheets */
#requestModal.diagnostic,#enquiryModal.diagnostic,#accessModal.diagnostic{display:grid;place-items:center;background:rgba(15,17,19,.78);backdrop-filter:blur(12px);padding:4vh 4vw;overflow:auto}
#requestModal .tf-sheet,#enquiryModal .tf-sheet,#accessModal .tf-sheet{--ink:#17191c;--manila:#fff;width:100%;margin:auto;padding:32px;border:1px solid rgba(255,255,255,.72);border-radius:18px;background:#fff;color:#17191c;font-family:Inter,system-ui,sans-serif;box-shadow:0 40px 100px rgba(0,0,0,.34)}
#requestModal .tf-sheet,#enquiryModal .tf-sheet{max-width:880px}
#accessModal .tf-sheet{max-width:470px}
#requestModal .tf-sheet-head,#enquiryModal .tf-sheet-head,#accessModal .tf-sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;border-bottom:1px solid #e2e2df;padding-bottom:20px;margin-bottom:24px}
#requestModal .tf-sheet-head span,#enquiryModal .tf-sheet-head span,#accessModal .tf-sheet-head span{color:#a94325;font:600 10px/1 "IBM Plex Mono",monospace}
#requestModal .tf-sheet-head h2,#enquiryModal .tf-sheet-head h2,#accessModal .tf-sheet-head h2{margin-top:10px;color:#17191c;font:650 clamp(29px,3vw,40px)/1 "Space Grotesk",sans-serif;text-transform:none;letter-spacing:-.04em}
#requestModal .tf-required-key,#enquiryModal .tf-required-key{margin:10px 0 0;color:#656b6e;font:500 11px/1.4 Inter,system-ui,sans-serif}
#requestModal .tf-required-key b,#enquiryModal .tf-required-key b,#requestModal .tf-required,#enquiryModal .tf-required{color:#b42318;font-weight:800}
#requestModal .tf-x,#enquiryModal .tf-x,#accessModal .tf-x{display:grid;flex:none;width:36px;height:36px;place-items:center;padding:0;border-radius:50%;border:1px solid #d7d8d7;background:#fff;color:#17191c;font-size:20px;line-height:1;cursor:pointer}
#requestModal .tf-x:hover,#enquiryModal .tf-x:hover,#accessModal .tf-x:hover{background:#f0efeb;border-color:#aeb0af}
#requestModal .tf-fields,#enquiryModal .tf-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#requestModal .tf-fields label,#enquiryModal .tf-fields label,#accessModal .tf-sheet form label{display:block;color:#565c60;font:650 10px/1.25 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase}
#requestModal .tf-fields .tf-wide,#enquiryModal .tf-fields .tf-wide{grid-column:1/-1}
#requestModal .tf-fields .tf-span2,#enquiryModal .tf-fields .tf-span2{grid-column:span 2}
#requestModal input,#enquiryModal input,#requestModal select,#enquiryModal select,#requestModal textarea,#enquiryModal textarea,#accessModal input{display:block;width:100%;margin-top:8px;padding:13px 14px;border:1px solid #c9ccca;border-radius:8px;background:#f7f7f5;color:#17191c;font:500 14px/1.35 Inter,system-ui,sans-serif;outline:none}
#requestModal textarea,#enquiryModal textarea{min-height:110px;resize:vertical}
#requestModal input::placeholder,#enquiryModal input::placeholder,#requestModal textarea::placeholder,#enquiryModal textarea::placeholder,#accessModal input::placeholder{color:#6a7073;opacity:1}
#requestModal input:focus,#enquiryModal input:focus,#requestModal select:focus,#enquiryModal select:focus,#requestModal textarea:focus,#enquiryModal textarea:focus,#accessModal input:focus{border-color:#a94325;background:#fff;box-shadow:0 0 0 3px rgba(169,67,37,.1)}
#requestModal .tf-sheet-foot,#enquiryModal .tf-sheet-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;padding-top:18px;border-top:1px solid #e2e2df}
#requestModal .tf-b,#enquiryModal .tf-b,#accessModal .tf-b{display:inline-flex;min-height:46px;align-items:center;justify-content:center;padding:12px 20px;border:1px solid transparent;border-radius:8px;font-family:Inter,system-ui,sans-serif;font-size:13px;letter-spacing:0;text-transform:none;font-weight:700;cursor:pointer}
#requestModal .tf-b-fill,#enquiryModal .tf-b-fill,#accessModal .tf-b-fill{background:#a94325;border-color:#a94325;color:#fff}
#requestModal .tf-b-fill:hover,#enquiryModal .tf-b-fill:hover,#accessModal .tf-b-fill:hover{background:#853019;border-color:#853019}
#requestModal .tf-b-line,#enquiryModal .tf-b-line{border-color:#cfd0cf;background:#fff;color:#17191c}
#accessModal .tf-sheet form,#accessModal #accessFields{display:grid;gap:16px}
#accessModal .tf-b-fill{width:100%}
#accessModal .text-action{justify-self:start;padding:0;border:0;background:transparent;color:#8b351f;font:650 12px/1.4 Inter,system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#accessModal .client-signup-action{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:2px;padding-top:17px;border-top:1px solid #e2e2df;color:#565c60;font:500 12px/1.4 Inter,system-ui,sans-serif}
#accessModal .client-signup-action button{padding:0;border:0;background:transparent;color:#8b351f;font:700 12px/1.4 Inter,system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#accessModal .access-note{margin:0;color:#60666a;font:500 12px/1.6 Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none}
#requestModal :focus-visible,#enquiryModal :focus-visible,#accessModal :focus-visible{outline:3px solid rgba(169,67,37,.25);outline-offset:2px}

/* Session restoration screen used before the authenticated workspace appears. */
.tf-booting{position:fixed;inset:0;z-index:80;display:grid;place-content:center;justify-items:center;gap:16px;background:#17191c;color:#d2d5d6;font:600 11px/1.4 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase}
.tf-booting-mark{display:grid;width:46px;height:46px;place-items:center;border-radius:50%;background:#f5f3ee;color:#17191c}
.tf-booting-mark svg{width:28px;height:28px}

@media(max-width:1050px){
  #publicSite .tf-hero{grid-template-columns:1fr;min-height:0;padding-top:70px}
  #publicSite .tf-hero::before{top:49%;right:-8vw;width:108vw;height:720px;clip-path:polygon(0 12%,100% 0,100% 100%,0 100%)}
  #publicSite .tf-hero-copy{max-width:760px}
  #publicSite .tf-status-stage{width:min(680px,100%);margin:auto}
  #publicSite .tf-svc-grid{grid-template-columns:repeat(2,1fr)}
  #publicSite .tf-proof{grid-template-columns:1fr}
  #publicSite .tf-evidence{grid-template-columns:1fr}
  #publicSite .tf-about{grid-template-columns:90px 1fr}
  #publicSite .tf-about>div:last-child{grid-column:2;padding:0;border:0}
}
@media(max-width:720px){
  #publicSite{--tf-width:min(100% - 34px,1360px)}
  #publicSite .tf-nav{height:72px}
  #publicSite .tf-nav-links,#publicSite .tf-nav-act .tf-text-btn{display:none}
  #publicSite .tf-nav-act .tf-btn{padding:10px 13px;font-size:11px}
  /* Below 720px the inline links are gone, so the burger is the only way to
     reach Inventory, Services or Sign in. Without it the header is a dead end
     on a phone, which is most of the traffic. */
  #publicSite .tf-nav-burger{display:flex}
  #publicSite .tf-nav-menu:not(.hidden){display:flex;flex-direction:column;position:absolute;top:100%;right:max(4vw,17px);left:max(4vw,17px);padding:8px;gap:2px;border:1px solid rgba(23,25,28,.12);border-top:0;border-radius:0 0 14px 14px;background:#f5f3ee;box-shadow:0 18px 40px rgba(23,25,28,.16)}
  #publicSite .tf-nav-menu a,#publicSite .tf-nav-menu .tf-text-btn{display:block;width:100%;padding:13px 12px;border:0;border-radius:9px;background:transparent;color:#17191c;font-size:15px;font-weight:600;line-height:1;letter-spacing:0;text-align:left;text-decoration:none;text-transform:none;cursor:pointer}
  #publicSite .tf-nav-menu a:active,#publicSite .tf-nav-menu .tf-text-btn:active{background:rgba(23,25,28,.06)}
  #publicSite .tf-nav-menu .tf-text-btn{margin-top:4px;border-top:1px solid rgba(23,25,28,.1);border-radius:0 0 9px 9px;color:var(--tf-signal)}
  #publicSite .tf-hero{padding:52px 0 72px;gap:45px}
  #publicSite .tf-hero h1{font-size:clamp(54px,18vw,78px)}
  #publicSite .tf-lede{font-size:16px}
  #publicSite .tf-cta{align-items:stretch;flex-direction:column}
  #publicSite .tf-hero .tf-btn{width:100%}
  #publicSite .tf-trust{gap:12px;flex-direction:column}
  #publicSite .tf-status-stage{min-height:500px}
  #publicSite .tf-status-card{padding:16px;border-radius:16px}
  #publicSite .tf-car-art{height:160px}
  #publicSite .tf-float-card{display:none}
  #publicSite .tf-finding p{display:none}
  #publicSite .tf-status-head strong{font-size:16px}
  #publicSite .tf-progress span{font-size:6px}
  #publicSite .tf-proof{padding:28px 17px}
  #publicSite .tf-proof>div{grid-template-columns:1fr;gap:12px}
  #publicSite .tf-sec{padding:82px 0}
  #publicSite .tf-sec-head{grid-template-columns:1fr;gap:20px;margin-bottom:35px}
  #publicSite .tf-sec-head h2{font-size:42px}
  #publicSite .tf-svc-grid{grid-template-columns:1fr}
  #publicSite .tf-svc{min-height:315px}
  #publicSite .tf-evidence{padding:80px 17px;gap:45px}
  #publicSite .tf-evidence-row{padding:20px}
  #publicSite .tf-evidence-row>span{position:static;display:block;margin-bottom:10px}
  #publicSite .tf-evidence-row.is-alert{padding-left:16px}
  #publicSite .tf-steps{grid-template-columns:1fr}
  #publicSite .tf-steps li,#publicSite .tf-steps li+li{min-height:0;padding:24px 0;border-right:0;border-bottom:1px solid #c9c9c5}
  #publicSite .tf-steps h3{margin-top:28px}
  #publicSite .tf-about{padding:75px 17px;grid-template-columns:1fr;gap:35px}
  #publicSite .tf-about-mark{width:70px;height:70px}
  #publicSite .tf-about-mark svg{width:38px}
  #publicSite .tf-about>div:last-child{grid-column:auto}
  #publicSite .tf-final{padding:90px 17px}
  #publicSite .tf-final h2{font-size:47px}
  #publicSite .tf-foot{align-items:flex-start;flex-direction:column;padding:36px 17px}
  #requestModal .tf-fields,#enquiryModal .tf-fields{grid-template-columns:1fr}
  #requestModal .tf-fields .tf-span2,#enquiryModal .tf-fields .tf-span2{grid-column:auto}
  #requestModal .tf-sheet,#enquiryModal .tf-sheet,#accessModal .tf-sheet{padding:22px;border-radius:14px}
  #requestModal .tf-sheet-foot,#enquiryModal .tf-sheet-foot{flex-direction:column-reverse}
  #requestModal .tf-sheet-foot .tf-b,#enquiryModal .tf-sheet-foot .tf-b{width:100%}
}
@media(prefers-reduced-motion:reduce){#publicSite *{animation:none!important;transition:none!important}}

/* --- storefront -----------------------------------------------------------
   Colors all come from the public site's own tokens, so inventory reads as
   part of the marketing page rather than the workshop bolted onto it. */
/* ===========================================================================
   The storefront. Two surfaces: a results page with a filter rail, and a car
   page built as a long reading column beside a rail that stays put.

   Shaped by the sites buyers already use, then cut back to what this shop can
   honestly show. No monthly payment estimate anywhere -- the shop does not
   offer finance, and a figure with an invented APR behind it reads as an offer
   of credit. No dealer-fee line either, because there is not one.
   =========================================================================== */
#publicSite .tf-shop{
  width:var(--tf-width);margin:0 auto;padding:46px 0 90px;
}
#publicSite .tf-shop-head{margin-bottom:22px}
#publicSite .tf-shop-head p{max-width:62ch}
#publicSite #tfShopCount{
  display:inline-block;margin-left:4px;font-family:var(--tf-mono);
  font-size:12px;color:var(--tf-signal);
}
#publicSite .tf-i{width:15px;height:15px;flex:none;vertical-align:-2px}

/* --- results layout ------------------------------------------------------ */
#publicSite .tf-shop-layout{display:grid;grid-template-columns:252px minmax(0,1fr);gap:30px;align-items:start}
#publicSite .tf-frail-toggle{display:none}
/* One panel, divided. Not a stack of boxes with hairlines near them.

   This had three left edges inside a 218px column: the panel's own content
   edge, where the head, the search and the group RULES sat; two pixels in,
   where every summary and body sat because both carried padding:0 2px; and a
   2px grid gap that floated each rule off whatever was above it. None of it
   was enough to look broken and all of it was enough to look wrong.

   The gap is gone -- the rules do the separating -- and the rules run the full
   width of the panel rather than stopping at the text. A divider that stops
   short of the edge reads as a box that failed to close. */
/* The panel holds no padding of its own and clips to its own corners, so a
   child cannot sit outside it no matter what it asks for. Each row carries
   its own 16px instead.

   The previous version got the same look with margin:0 -16px on each group,
   pulled back against the panel's padding. That works only while the two
   numbers agree, and if they ever disagree every rule and every field spills
   out to the right of the card at once — which is what Bensky photographed.
   A layout that is correct only by coincidence of two numbers is not correct. */
#publicSite .tf-shop-rail{
  position:sticky;top:96px;display:grid;gap:0;padding:0;overflow:hidden;
  border:1px solid var(--tf-line);border-radius:13px;background:var(--tf-white);
}
#publicSite .tf-frail-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:16px 16px 13px;
}
#publicSite .tf-frail-head h3{
  margin:0;font:650 15px/1 var(--tf-display);letter-spacing:-.03em;color:var(--tf-ink);
}
#publicSite .tf-flink{
  border:0;background:none;padding:0;cursor:pointer;color:var(--tf-signal);
  font:650 11px/1 var(--tf-body);letter-spacing:0;text-transform:none;
}
#publicSite .tf-flink.is-off{opacity:.35;pointer-events:none}
#publicSite .tf-fsearch{
  display:flex;align-items:center;gap:8px;min-width:0;margin:0 16px 16px;padding:0 11px;
  border:1px solid var(--tf-line);border-radius:9px;background:var(--tf-paper);color:#6c7275;
}
#publicSite .tf-fsearch input{
  flex:1;min-width:0;border:0;background:none;padding:10px 0;
  font:500 13px/1 var(--tf-body);color:var(--tf-ink);
}
#publicSite .tf-fsearch input:focus{outline:none}
#publicSite .tf-fsearch:focus-within{border-color:var(--tf-signal)}

/* Full-bleed: the rule belongs to the panel, so it reaches both sides of it.
   The 16px it pulls back is the panel's own padding, put back on the summary
   and the body so every word still starts on one left edge. */
/* No negative margin. The group is an ordinary child of a padding-free panel,
   so its border-top already reaches both edges. */
#publicSite .tf-fgroup{
  min-width:0;margin:0;padding:0 16px;border-top:1px solid var(--tf-line);
}
#publicSite .tf-fgroup summary{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:13px 0;cursor:pointer;list-style:none;
  font:650 12px/1 var(--tf-body);color:var(--tf-ink);letter-spacing:0;
}
#publicSite .tf-fgroup summary:focus-visible{outline:2px solid var(--tf-signal);outline-offset:-2px}
#publicSite .tf-fgroup summary::-webkit-details-marker{display:none}
#publicSite .tf-fgroup summary i{
  width:8px;height:8px;border-right:1.6px solid #8b9093;border-bottom:1.6px solid #8b9093;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .16s ease;
}
#publicSite .tf-fgroup[open] summary i{transform:rotate(-135deg) translate(-2px,-2px)}
/* The last group's body used to add 14px on top of the panel's own 16px,
   leaving thirty pixels of nothing under the final control. */
#publicSite .tf-fbody{min-width:0;padding:0 0 15px;display:grid;gap:9px}
#publicSite .tf-fgroup:last-of-type .tf-fbody{padding-bottom:16px}
/* minmax(0,1fr), not 1fr. A grid track defaults to min-content as its floor,
   and a number input's min-content is wider than half this column, so plain
   1fr lets the pair push past the panel. */
#publicSite .tf-frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
#publicSite .tf-frow label,#publicSite .tf-fone{
  display:grid;gap:5px;min-width:0;font:600 9.5px/1 var(--tf-mono);
  letter-spacing:.08em;text-transform:uppercase;color:#6c7275;
}
#publicSite .tf-frow input,#publicSite .tf-frow select,#publicSite .tf-fone select{
  width:100%;padding:9px 10px;border:1px solid var(--tf-line);border-radius:8px;
  background:var(--tf-paper);font:500 13px/1 var(--tf-body);color:var(--tf-ink);
;min-width:0;width:100%}
#publicSite .tf-frow input:focus,#publicSite .tf-frow select:focus,#publicSite .tf-fone select:focus{
  outline:none;border-color:var(--tf-signal);
}
#publicSite .tf-fcheck{
  display:flex;align-items:center;gap:9px;padding:3px 0;cursor:pointer;
  font:500 13px/1.3 var(--tf-body);color:var(--tf-ink);
}
#publicSite .tf-fcheck input{width:15px;height:15px;flex:none;accent-color:var(--tf-signal);margin:0}
#publicSite .tf-fcheck span{flex:1;min-width:0}
#publicSite .tf-fcheck em{font-style:normal;font-family:var(--tf-mono);font-size:11px;color:#8b9093}

#publicSite .tf-shop-resulthead{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--tf-line);
}
#publicSite .tf-fcount{margin:0;font-size:14px;color:var(--tf-muted)}
#publicSite .tf-fcount b{font:650 19px/1 var(--tf-display);letter-spacing:-.03em;color:var(--tf-ink);margin-right:4px}
#publicSite .tf-fsort{
  display:flex;align-items:center;gap:8px;font:600 9.5px/1 var(--tf-mono);
  letter-spacing:.08em;text-transform:uppercase;color:#6c7275;white-space:nowrap;
}
#publicSite .tf-fsort select{
  padding:8px 10px;border:1px solid var(--tf-line);border-radius:8px;background:var(--tf-white);
  font:500 13px/1 var(--tf-body);color:var(--tf-ink);text-transform:none;letter-spacing:0;
}
#publicSite .tf-shop-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
#publicSite .tf-chip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 11px;cursor:pointer;
  border:1px solid var(--tf-line);border-radius:99px;background:var(--tf-white);
  font:600 12px/1 var(--tf-body);color:var(--tf-ink);
}
#publicSite .tf-chip i{font-style:normal;font-size:15px;line-height:1;color:#8b9093}
#publicSite .tf-chip:hover{border-color:var(--tf-signal);color:var(--tf-signal)}
#publicSite .tf-chip:hover i{color:var(--tf-signal)}

/* --- cards --------------------------------------------------------------- */
#publicSite .tf-car-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:20px;
}
/* A lot with one car was a 272px card against eight hundred pixels of nothing:
   auto-fill keeps the empty tracks, so the row stayed the width of the page
   and the card sat in the corner of it looking like a loading error. A single
   card turns sideways instead and uses the row it is already occupying. */
@media(min-width:760px){
  /* The track has to widen too. Styling the card alone left it turned
     sideways inside a 272px column, which is worse than the problem. */
  #publicSite .tf-car-grid:has(> :only-child){grid-template-columns:minmax(0,1fr)}
  #publicSite .tf-car-grid:has(> :only-child) .tf-car-card{
    display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);align-items:stretch;
  }
  #publicSite .tf-car-grid:has(> :only-child) .tf-car-shot{height:100%;aspect-ratio:auto;min-height:270px}
  #publicSite .tf-car-grid:has(> :only-child) .tf-car-body{align-content:center;padding:26px 28px}
  #publicSite .tf-car-grid:has(> :only-child) .tf-car-body strong{font-size:24px}
  #publicSite .tf-car-grid:has(> :only-child) .tf-car-price{font-size:27px}
}
#publicSite .tf-car-card{
  display:block;overflow:hidden;text-decoration:none;background:var(--tf-white);
  border:1px solid var(--tf-line);border-radius:13px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
#publicSite .tf-car-card:hover{transform:translateY(-3px);border-color:#cfd2ce;box-shadow:0 16px 40px rgba(23,25,28,.12)}
#publicSite .tf-car-card.is-sold{opacity:.72}
#publicSite .tf-car-shot{
  position:relative;display:block;aspect-ratio:4/3;background:var(--tf-steel);
}
#publicSite .tf-car-shot img{width:100%;height:100%;object-fit:contain;display:block}
#publicSite .tf-car-shot em{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--tf-mono);font-size:11px;font-style:normal;color:#6c7275;
}
#publicSite .tf-car-badge{
  position:absolute;top:10px;left:10px;padding:5px 9px;border-radius:4px;
  background:var(--tf-dark);color:#fff;font:650 9.5px/1 var(--tf-mono);
  letter-spacing:.1em;text-transform:uppercase;
}
#publicSite .tf-car-badge.is-pending{background:var(--tf-signal)}
#publicSite .tf-car-shots{
  position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:5px;
  padding:5px 8px;border-radius:4px;background:rgba(15,17,19,.72);color:#fff;
  font:650 10px/1 var(--tf-mono);backdrop-filter:blur(6px);
}
#publicSite .tf-car-shots .tf-i{width:13px;height:13px}
#publicSite .tf-car-body{display:grid;gap:3px;padding:14px 16px 16px}
#publicSite .tf-car-kicker{
  font:650 9.5px/1 var(--tf-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tf-signal);
}
#publicSite .tf-car-body strong{
  font:650 17px/1.2 var(--tf-display);letter-spacing:-.03em;color:var(--tf-ink);
}
#publicSite .tf-car-sub{font-size:13px;color:var(--tf-muted)}
#publicSite .tf-car-price{
  margin-top:5px;font:650 22px/1 var(--tf-display);letter-spacing:-.035em;color:var(--tf-ink);
}
#publicSite .tf-car-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
#publicSite .tf-car-chips em{
  display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:4px;
  background:var(--tf-paper);color:#4e5256;font:600 10.5px/1.2 var(--tf-body);font-style:normal;
}
#publicSite .tf-car-chips .tf-i{width:12px;height:12px}
#publicSite .tf-shop-empty{
  grid-column:1/-1;padding:44px;text-align:center;color:var(--tf-muted);
  border:1px dashed var(--tf-line);border-radius:13px;background:var(--tf-white);
}
#publicSite .tf-shop-empty strong{
  display:block;margin-bottom:6px;font:650 19px/1.2 var(--tf-display);
  letter-spacing:-.03em;color:var(--tf-ink);
}
#publicSite .tf-shop-empty button,#publicSite .tf-shop-empty a{
  border:0;background:none;padding:0;cursor:pointer;color:var(--tf-signal);
  font:650 13px/1 var(--tf-body);text-decoration:none;
}

/* --- one car ------------------------------------------------------------- */
#publicSite .tf-shop-back{
  display:inline-block;margin-bottom:16px;color:var(--tf-signal);
  font:650 13px/1 var(--tf-body);text-decoration:none;
}
/* Arrives once the real heading has gone by, so the price and the way to ask
   about it are never off screen on a long page. */
#publicSite .tf-car-bar{
  position:fixed;left:0;right:0;top:0;z-index:19;
  border-bottom:1px solid var(--tf-line);background:#f5f3ee;
  transform:translateY(-100%);transition:transform .2s ease;pointer-events:none;
}
#publicSite .tf-car-bar.is-on{transform:translateY(0);pointer-events:auto}
#publicSite .tf-car-bar-in{
  width:var(--tf-width);margin:0 auto;display:flex;align-items:center;gap:14px;padding:11px 0;
}
#publicSite .tf-car-bar img{width:58px;height:42px;object-fit:cover;border-radius:6px;flex:none}
#publicSite .tf-car-bar span{display:grid;gap:2px;flex:1;min-width:0}
#publicSite .tf-car-bar b{
  font:650 15px/1.2 var(--tf-display);letter-spacing:-.03em;color:var(--tf-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#publicSite .tf-car-bar em{font-style:normal;font:650 15px/1 var(--tf-display);color:var(--tf-signal)}

#publicSite .tf-car-page{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:38px;align-items:start}
#publicSite .tf-car-main{min-width:0}

#publicSite .tf-car-stage{
  position:relative;margin:0;border-radius:14px;overflow:hidden;
  border:1px solid var(--tf-line);background:var(--tf-steel);
}
/* Capped rather than left at its ratio: on a wide screen a 4:3 hero is 770px
   tall and pushes the name, the price and the enquiry form off the first
   screen, which is everything the page is for. */
/* contain, not cover. A buyer is looking at the whole car; a crop that eats
   the roof and the bumper to fill a 3:2 box is the one thing this image must
   not do. The shots come off a phone at 16:9 and sometimes portrait, so
   filling the frame means throwing away the ends of the car. Letterboxed on
   the stage's own ground instead. */
#publicSite .tf-car-stage img{
  /* 16/9 because that is what the shop's phone takes, so a photo fills the
     frame rather than floating in it. The old 3/2 was set when the stage
     shared its row with the price rail; full width it made a 3.5:1 slot with
     the car marooned in the middle of it. The cap keeps the name and the
     price on the first screen, which is what the cap was always for. */
  display:block;width:100%;aspect-ratio:16/9;max-height:min(68vh,620px);object-fit:contain;
}
#publicSite .tf-car-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;
  display:grid;place-items:center;cursor:pointer;border:0;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--tf-ink);font-size:24px;line-height:1;
  box-shadow:0 4px 14px rgba(23,25,28,.18);
}
#publicSite .tf-car-nav.is-prev{left:12px}
#publicSite .tf-car-nav.is-next{right:12px}
#publicSite .tf-car-nav:hover{background:#fff}
#publicSite .tf-car-stage figcaption{
  position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;
  padding:5px 9px;border-radius:4px;background:rgba(15,17,19,.72);color:#fff;
  font:650 10px/1 var(--tf-mono);
}
#publicSite .tf-car-thumbs{
  display:flex;gap:8px;margin-top:9px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
}
#publicSite .tf-car-thumbs::-webkit-scrollbar{display:none}
#publicSite .tf-car-thumb{
  flex:0 0 88px;padding:0;cursor:pointer;border:1px solid var(--tf-line);border-radius:8px;
  overflow:hidden;background:var(--tf-steel);opacity:.62;transition:opacity .15s ease,border-color .15s ease;
}
#publicSite .tf-car-thumb img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain}
#publicSite .tf-car-thumb.is-on{opacity:1;border-color:var(--tf-signal)}
#publicSite .tf-car-thumb:hover{opacity:1}
/* Same cap as the real gallery. Without it the empty-state placeholder was
   taller than the photo it stands in for. */
#publicSite .tf-car-noshot{
  display:grid;place-items:center;aspect-ratio:16/9;max-height:min(68vh,620px);
  border-radius:14px;
  background:var(--tf-steel);color:#6c7275;font-family:var(--tf-mono);font-size:12px;
}

#publicSite .tf-car-title{margin-top:26px}
#publicSite .tf-car-title h1{
  margin:0;font:600 clamp(30px,4vw,44px)/1.02 var(--tf-display);letter-spacing:-.045em;color:var(--tf-ink);
}
#publicSite .tf-car-sold{
  display:inline-block;margin-bottom:12px;padding:6px 11px;border-radius:99px;
  background:var(--tf-dark);color:#fff;font:650 10px/1 var(--tf-mono);
  letter-spacing:.1em;text-transform:uppercase;
}
#publicSite .tf-car-sold.is-pending{background:var(--tf-signal)}
#publicSite .tf-car-headline{margin:10px 0 0;font-size:16px;color:var(--tf-muted)}

#publicSite .tf-car-facts{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;padding:14px 16px;
  border:1px solid var(--tf-line);border-radius:11px;background:var(--tf-white);
}
#publicSite .tf-car-facts span{
  display:inline-flex;align-items:center;gap:7px;
  font:600 13px/1 var(--tf-body);color:var(--tf-ink);
}
#publicSite .tf-car-facts span+span{padding-left:10px;border-left:1px solid var(--tf-line)}
#publicSite .tf-car-facts .tf-i{color:var(--tf-signal)}
#publicSite .tf-dot{
  width:13px;height:13px;border-radius:50%;flex:none;
  border:1px solid rgba(23,25,28,.22);box-shadow:inset 0 -2px 3px rgba(0,0,0,.14);
}
/* The seller's note.

   Everything else on this page is a white card holding data. The description
   is the only place a person is talking, and it was sitting bare on the page
   between two cards, reading as text somebody forgot to style. Putting it in a
   card would have fixed the raggedness and lost the point: the page would be
   nothing but boxes and the one human sentence would look like another data
   panel.

   So it is set on manila instead -- the work-order stock this whole identity
   is built on -- with the margin rule a docket has down its left edge. A
   different material, not another panel. Larger than the surrounding body and
   set to a reading measure, because it is the one thing on the page meant to
   be read rather than scanned. */
#publicSite .tf-car-note{
  position:relative;margin:26px 0 0;padding:22px 26px 24px 30px;
  /* Ends where the writing ends. Stretched to the column it read as a band
     with a hole in the right half; sized to its measure it reads as a piece of
     paper somebody put on the page. */
  max-width:calc(58ch + 56px);
  border-radius:4px 12px 12px 4px;background:#f3e8d2;
}
#publicSite .tf-car-note:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  border-radius:4px 0 0 4px;background:var(--tf-signal);
}
#publicSite .tf-note-from{
  display:block;margin-bottom:10px;
  font:650 10px/1 var(--tf-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--tf-signal);
}
#publicSite .tf-car-note p{
  margin:0;max-width:58ch;
  font:400 16.5px/1.75 var(--tf-body);color:#2a2a25;
}
@media(max-width:720px){
  #publicSite .tf-car-note{padding:18px 18px 20px 22px}
  #publicSite .tf-car-note p{font-size:15.5px;line-height:1.7}
}

/* Feature groups sit side by side, each with its own mark, so a buyer can
   scan for the one thing they care about instead of reading a single list. */
#publicSite .tf-car-features-wrap{margin-top:28px}
#publicSite .tf-car-features{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;align-items:start;
}
#publicSite .tf-car-features h3 b{
  margin-left:auto;font:650 10px/1 var(--tf-mono);color:#8b9093;
}
#publicSite .tf-feat-more{display:none}
#publicSite .tf-car-features.is-all .tf-feat-more{display:block}
#publicSite .tf-car-features.is-all .tf-feat-count{display:none}
#publicSite .tf-feat-count{
  display:block;margin-top:9px;font:650 11px/1 var(--tf-mono);color:#8b9093;
}
#publicSite .tf-feat-all{
  display:block;width:100%;margin-top:14px;padding:12px;cursor:pointer;
  border:1px solid var(--tf-line);border-radius:10px;background:var(--tf-white);
  font:650 13px/1 var(--tf-body);color:var(--tf-signal);
}
#publicSite .tf-feat-all:hover{border-color:var(--tf-signal)}
#publicSite .tf-car-features section{
  padding:16px 18px;border:1px solid var(--tf-line);border-radius:11px;background:var(--tf-white);
}
#publicSite .tf-car-features h3{
  display:flex;align-items:center;gap:8px;margin:0 0 11px;width:100%;
  font:650 14px/1 var(--tf-display);letter-spacing:-.02em;color:var(--tf-ink);
}
#publicSite .tf-car-features h3 .tf-i{color:var(--tf-signal)}
#publicSite .tf-car-features ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
#publicSite .tf-car-features li{
  position:relative;padding-left:15px;font-size:13.5px;line-height:1.45;color:var(--tf-muted);
}
#publicSite .tf-car-features li:before{
  content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;
  background:var(--tf-signal);
}
/* Condition. Cards rather than bullets, worst first, each one located, graded
   and shown. The grade is a status: its own mark and its own word every time,
   so the color is reinforcement and never the message. Amber and red are set
   apart far enough to clear the separation floor -- the obvious pair, #c78312
   against #d9412c, measures 14.4 and does not. */
#publicSite .tf-car-issues{
  margin-top:22px;padding:18px 20px 20px;border:1px solid var(--tf-line);
  border-radius:12px;background:var(--tf-white);
}
#publicSite .tf-cond-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
#publicSite .tf-car-issues h3{
  display:flex;align-items:center;gap:8px;margin:0;
  font:650 17px/1.15 var(--tf-display);letter-spacing:-.03em;color:var(--tf-ink);
}
#publicSite .tf-car-issues h3 .tf-i{color:#b52d1c}
#publicSite .tf-cond-tally{display:flex;gap:7px;flex-wrap:wrap}
#publicSite .tf-cond-tally em{
  font-style:normal;padding:4px 8px;border-radius:4px;
  font:650 10.5px/1.2 var(--tf-mono);letter-spacing:.03em;
}
#publicSite .tf-cond-tally .is-cosmetic{background:#f0efec;color:#5b6063}
#publicSite .tf-cond-tally .is-wear{background:#faf0da;color:#7d5307}
#publicSite .tf-cond-tally .is-needs_work{background:#f9e5e1;color:#8e2315}
#publicSite .tf-car-issues>p{margin:9px 0 14px;font-size:13.5px;line-height:1.6;color:var(--tf-muted);max-width:64ch}

#publicSite .tf-cond-list{display:grid;gap:10px}
#publicSite .tf-cond{
  display:flex;gap:14px;padding:13px 15px;align-items:flex-start;
  border:1px solid var(--tf-line);border-left:3px solid #c9ccc8;
  border-radius:10px;background:var(--tf-paper);
}
#publicSite .tf-cond.is-wear{border-left-color:#c78312}
#publicSite .tf-cond.is-needs_work{border-left-color:#b52d1c}
#publicSite .tf-cond-shot{
  flex:0 0 94px;display:block;border-radius:7px;overflow:hidden;
  border:1px solid var(--tf-line);background:var(--tf-steel);
}
#publicSite .tf-cond-shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain}
#publicSite .tf-cond-body{min-width:0;flex:1}
#publicSite .tf-cond-top{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:5px}
#publicSite .tf-cond-grade{
  display:inline-flex;align-items:center;gap:5px;
  font:650 10.5px/1 var(--tf-mono);letter-spacing:.06em;text-transform:uppercase;color:#5b6063;
}
#publicSite .tf-cond-grade svg{width:14px;height:14px;flex:none}
#publicSite .tf-cond.is-wear .tf-cond-grade{color:#7d5307}
#publicSite .tf-cond.is-needs_work .tf-cond-grade{color:#8e2315}
#publicSite .tf-cond-where{
  font:500 11.5px/1 var(--tf-mono);color:var(--tf-muted);
  padding-left:9px;border-left:1px solid var(--tf-line);
}
#publicSite .tf-cond-what{margin:0;font:600 14.5px/1.45 var(--tf-body);color:var(--tf-ink)}
#publicSite .tf-cond-says{margin:3px 0 0;font-size:12.5px;line-height:1.4;color:var(--tf-muted)}
@media(max-width:600px){
  #publicSite .tf-cond{flex-direction:column}
  #publicSite .tf-cond-shot{flex:none;width:100%;max-width:220px}
}

/* Mileage against a baseline. One hue on the bar -- the arrow and the sentence
   carry the direction, because the obvious green/red encoding fails CVD
   separation at delta-E 4.8 under deuteranopia. Track is a light step of the
   bar's own ramp so the state reads across the whole width. */
#publicSite .tf-car-miles{
  margin-top:26px;padding:19px 21px;border:1px solid var(--tf-line);
  border-radius:12px;background:var(--tf-white);
}
#publicSite .tf-car-miles h3{
  margin:0 0 14px;font:650 17px/1.15 var(--tf-display);letter-spacing:-.03em;color:var(--tf-ink);
}
#publicSite .tf-miles-track{
  position:relative;height:12px;border-radius:6px;background:#f0ece7;overflow:visible;
}
#publicSite .tf-miles-fill{
  display:block;position:absolute;left:0;top:0;bottom:0;max-width:100%;
  border-radius:6px 4px 4px 6px;background:var(--tf-signal);
}
/* The baseline marker. Ink rather than a second hue: it is a reference, not a
   second series, and giving it a color would make it look like one. */
#publicSite .tf-miles-mark{
  display:block;position:absolute;top:-4px;bottom:-4px;width:2px;
  background:var(--tf-ink);opacity:.6;border-radius:1px;
}
#publicSite .tf-miles-scale{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-top:11px;font-size:13px;color:var(--tf-muted);flex-wrap:wrap;
}
#publicSite .tf-miles-scale b{
  font:650 15px/1 var(--tf-display);letter-spacing:-.02em;color:var(--tf-ink);margin-right:3px;
}
#publicSite .tf-miles-typ{display:inline-flex;align-items:center;gap:7px;font-family:var(--tf-mono);font-size:11.5px}
#publicSite .tf-miles-typ i{width:2px;height:12px;border-radius:1px;background:var(--tf-ink);opacity:.6;flex:none}
#publicSite .tf-miles-say{
  display:flex;align-items:flex-start;gap:8px;margin:13px 0 0;
  font:600 14px/1.5 var(--tf-body);color:var(--tf-ink);
}
#publicSite .tf-miles-say svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--tf-signal)}
#publicSite .tf-miles-note{
  margin:8px 0 0;font-size:12.5px;line-height:1.6;color:var(--tf-muted);max-width:64ch;
}
@media(max-width:720px){
  #publicSite .tf-miles-scale{flex-direction:column;gap:4px}
}

#publicSite .tf-car-specs{margin-top:28px}
#publicSite .tf-car-specs h3{
  margin:0 0 12px;font:650 17px/1.15 var(--tf-display);letter-spacing:-.03em;color:var(--tf-ink);
}
#publicSite .tf-car-spec{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;margin:0;
  border:1px solid var(--tf-line);border-radius:11px;overflow:hidden;background:var(--tf-line);
}
#publicSite .tf-car-spec>div{padding:12px 15px;background:var(--tf-white)}
#publicSite .tf-car-spec dt{
  font:650 9.5px/1 var(--tf-mono);letter-spacing:.1em;text-transform:uppercase;color:#8b9093;
}
#publicSite .tf-car-spec dd{margin:6px 0 0;font-size:14px;font-weight:600;color:var(--tf-ink);word-break:break-word}
#publicSite .tf-car-warranty{
  margin-top:22px;padding:14px 17px;border-left:3px solid var(--tf-signal);
  border-radius:0 8px 8px 0;background:#fbeee9;font-size:13.5px;color:#6d3a24;
}
#publicSite .tf-car-warranty b{
  display:block;margin-bottom:3px;font:650 9.5px/1 var(--tf-mono);
  letter-spacing:.1em;text-transform:uppercase;color:var(--tf-signal);
}
#publicSite .tf-car-video{margin-top:28px}
#publicSite .tf-car-video h3{
  margin:0 0 12px;font:650 17px/1.15 var(--tf-display);letter-spacing:-.03em;color:var(--tf-ink);
}
#publicSite .tf-car-frame{position:relative;aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:var(--tf-steel)}
#publicSite .tf-car-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- the rail ------------------------------------------------------------ */
#publicSite .tf-car-rail{position:sticky;top:96px;display:grid;gap:14px}
#publicSite .tf-car-pricecard{
  padding:20px;border:1px solid var(--tf-line);border-radius:13px;background:var(--tf-white);
}
#publicSite .tf-car-priceline{
  display:block;font:650 34px/1 var(--tf-display);letter-spacing:-.045em;color:var(--tf-ink);
}
#publicSite .tf-car-pricenote{margin:9px 0 16px;font-size:12.5px;line-height:1.55;color:var(--tf-muted)}
#publicSite .tf-car-pricecard .tf-btn{width:100%;justify-content:center}
#publicSite .tf-car-phone{
  display:block;margin-top:12px;text-align:center;color:var(--tf-signal);
  font:650 16px/1 var(--tf-display);letter-spacing:-.02em;text-decoration:none;
}
#publicSite .tf-car-ask{
  display:grid;gap:11px;padding:20px;border:1px solid var(--tf-line);
  border-radius:13px;background:var(--tf-white);
}
#publicSite .tf-car-ask h3{
  margin:0;font:650 17px/1.15 var(--tf-display);letter-spacing:-.03em;color:var(--tf-ink);
}
#publicSite .tf-car-ask label{
  display:grid;gap:5px;font:650 9.5px/1 var(--tf-mono);
  letter-spacing:.08em;text-transform:uppercase;color:#6c7275;
}
#publicSite .tf-car-ask-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
#publicSite .tf-car-ask input,#publicSite .tf-car-ask select,#publicSite .tf-car-ask textarea{
  width:100%;padding:10px 11px;border:1px solid var(--tf-line);border-radius:8px;
  background:var(--tf-paper);font:500 13.5px/1.45 var(--tf-body);color:var(--tf-ink);
}
#publicSite .tf-car-ask textarea{resize:vertical;min-height:84px}
#publicSite .tf-car-ask input:focus,#publicSite .tf-car-ask select:focus,#publicSite .tf-car-ask textarea:focus{
  outline:none;border-color:var(--tf-signal);
}
#publicSite .tf-car-ask .tf-btn{width:100%;justify-content:center}
#publicSite .tf-car-ask-note{margin:0;font-size:11.5px;line-height:1.5;color:#8b9093;text-align:center}
#publicSite .tf-car-ask-sent{margin:0;font-size:13.5px;line-height:1.6;color:var(--tf-muted)}

/* The evidence block. Deliberately the most substantial thing on the car page
   after the price: it is the reason to buy here rather than off a forecourt. */
#publicSite .tf-car-evidence{
  margin:28px 0 0;padding:20px 22px;border:1px solid var(--tf-line);
  border-radius:12px;background:var(--tf-white);
}
#publicSite .tf-car-evidence h3{
  display:flex;align-items:center;gap:8px;margin:0 0 6px;
  font:600 19px/1.15 var(--tf-display);letter-spacing:-.03em;color:var(--tf-ink);
}
#publicSite .tf-car-evidence h3 .tf-i{color:var(--tf-signal)}
#publicSite .tf-car-evidence>p{margin:0 0 14px;font-size:13.5px;color:var(--tf-muted)}
#publicSite .tf-car-evidence ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}

#publicSite .tf-shop-teaser p a{color:var(--tf-signal);text-decoration:none;font-weight:650}

@media(max-width:1040px){
  #publicSite .tf-car-page{grid-template-columns:1fr;gap:26px}
  #publicSite .tf-car-rail{position:static}
}
@media(max-width:860px){
  #publicSite .tf-shop-layout{grid-template-columns:1fr;gap:0}
  /* The rail becomes a panel you open. A 250px column of filters above the
     cars would push every car below the fold. */
  #publicSite .tf-frail-toggle{
    display:block;width:100%;margin-bottom:14px;padding:12px;cursor:pointer;
    border:1px solid var(--tf-line);border-radius:10px;background:var(--tf-white);
    font:650 13px/1 var(--tf-body);color:var(--tf-ink);
  }
  #publicSite .tf-shop-rail{position:static;display:none;margin-bottom:18px}
  #publicSite .tf-shop-rail.is-open{display:grid}
  #publicSite .tf-shop-resulthead{flex-wrap:wrap;gap:10px}
}
@media(max-width:720px){
  #publicSite .tf-car-grid{grid-template-columns:1fr;gap:16px}
  #publicSite .tf-car-facts span+span{padding-left:0;border-left:0}
  #publicSite .tf-car-facts{gap:8px 16px}
  #publicSite .tf-car-bar img{display:none}
  #publicSite .tf-car-bar .tf-btn{padding:9px 12px;font-size:11px}
  #publicSite .tf-car-ask-row{grid-template-columns:1fr}
}
#publicSite .tf-car-evidence a{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 14px;
  border:1px solid var(--tf-line);border-radius:9px;background:var(--tf-paper);
  text-decoration:none;transition:border-color .16s,background .16s;
}
#publicSite .tf-car-evidence a:hover{border-color:var(--tf-signal);background:var(--tf-white)}
#publicSite .tf-car-evidence b{
  font:650 10px/1 var(--tf-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--tf-signal);
}
#publicSite .tf-car-evidence em{font-style:normal;font-size:13.5px;color:var(--tf-ink)}


/* A sign-up or password-reset link the auth server refused. Amber rather than
   red: nothing is broken on the visitor's side, the link just did not work. */
.tf-auth-notice{margin:0;padding:13px 22px;border-bottom:1px solid #e0c58a;
  background:#fdf5e3;color:#7d4d06;font-size:13.5px;line-height:1.5;text-align:center}


/* ===========================================================================
   The car page, built to Listing.dc.html.

   One column, capped at 560px and centred on white against the paper ground,
   with every section divided by a single hairline. That is the design's shape
   and it is a phone's shape: the mock previews at 430 wide because that is
   where people look at cars for sale.

   The design's palette is Tremor's neutral grey. The tokens below are the
   storefront's own -- warm paper, the terracotta signal, IBM Plex Mono for
   figures -- so the page belongs to the site it sits in rather than arriving
   as a grey rectangle in the middle of it. Structure, order, spacing and
   type scale are the design's.
   =========================================================================== */
#publicSite{--tf-ash:#5d6469}

#publicSite .tf-listing{
  max-width:560px;margin:0 auto;background:var(--tf-white);
  border-left:1px solid var(--tf-line);border-right:1px solid var(--tf-line);
  padding-bottom:84px;position:relative;
}
#publicSite .tf-lsec{padding:20px 16px;border-bottom:1px solid var(--tf-line)}
#publicSite .tf-lsec h2{margin:0;font-size:16px;line-height:24px;font-weight:600;letter-spacing:0}
#publicSite .tf-lsec-sub{margin:4px 0 14px;font-size:14px;line-height:20px;color:var(--tf-ash)}
#publicSite .tf-lsec h3{margin:18px 0 8px;font-size:14px;line-height:20px;font-weight:600}

/* 1. Hero. 4/3 as the design has it, contain so nothing is cropped away. */
#publicSite .tf-lhero{
  position:relative;aspect-ratio:4/3;background:var(--tf-steel);
  border-bottom:1px solid var(--tf-line);display:grid;place-items:center;overflow:hidden;
}
/* min-*:0 again. .tf-lhero is a grid, so the image carries an automatic
   minimum size equal to its own intrinsic height and will not shrink to the
   frame -- it was 629px tall in a 471px box, overflowing and being clipped by
   the frame's own overflow:hidden. So the photo was cropped after all that. */
#publicSite .tf-lhero img{min-width:0;min-height:0;width:100%;height:100%;object-fit:contain;display:block}
#publicSite .tf-lhero-state{
  position:absolute;left:12px;top:12px;padding:3px 9px;border-radius:6px;
  font-size:12px;line-height:16px;font-weight:500;background:#0f7a55;color:#fff;
}
#publicSite .tf-lhero-state.is-pending{background:#8a5a06}
#publicSite .tf-lhero-state.is-sold{background:var(--tf-ink)}
#publicSite .tf-lhero-count{
  position:absolute;right:12px;bottom:12px;padding:4px 9px;border-radius:6px;
  background:rgb(23 25 28/.78);color:#fff;font:400 12px/16px var(--tf-mono);
}
#publicSite .tf-lhero-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;
  display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  background:rgb(255 255 255/.92);color:var(--tf-ink);font-size:20px;line-height:1;
}
#publicSite .tf-lhero-nav.is-prev{left:10px}
#publicSite .tf-lhero-nav.is-next{right:10px}

/* 2. Thumbnail rail. */
#publicSite .tf-lthumbs{
  display:flex;gap:8px;overflow-x:auto;padding:10px 16px;
  border-bottom:1px solid var(--tf-line);scrollbar-width:none;
}
#publicSite .tf-lthumbs::-webkit-scrollbar{display:none}
#publicSite .tf-lthumb{
  flex:0 0 78px;width:78px;aspect-ratio:4/3;padding:0;cursor:pointer;
  border:1px solid var(--tf-line);border-radius:6px;overflow:hidden;
  background:var(--tf-steel);
}
#publicSite .tf-lthumb.is-on{border-color:var(--tf-signal);border-width:2px}
#publicSite .tf-lthumb img{width:100%;height:100%;object-fit:contain;display:block}
#publicSite .tf-lshots{
  margin:0;padding:8px 16px;border-bottom:1px solid var(--tf-line);
  font-size:12px;line-height:16px;color:var(--tf-ash);
}

/* 3. Name, price, mileage. */
#publicSite .tf-lhead-eyebrow{margin:0;font:400 12px/16px var(--tf-mono);color:var(--tf-ash)}
#publicSite .tf-listing h1{
  margin:4px 0 0;font-size:24px;line-height:30px;font-weight:600;letter-spacing:-.02em;
}
#publicSite .tf-lprice-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:14px}
#publicSite .tf-lprice{
  font-size:30px;line-height:36px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
#publicSite .tf-lpermo{font-size:14px;line-height:20px;color:var(--tf-ash);font-variant-numeric:tabular-nums}
#publicSite .tf-lfin{margin:4px 0 0;font-size:12px;line-height:16px;color:var(--tf-ash)}
#publicSite .tf-lmiles{margin:12px 0 0;font-size:16px;line-height:24px;font-weight:500;font-variant-numeric:tabular-nums}
#publicSite .tf-lnote{margin:10px 0 0;font-size:12px;line-height:16px;color:var(--tf-ash)}

/* 4. Spec grid. The 1px gap is the line -- the grid's own background shows
      through between the white cells, which is how the design draws it. */
#publicSite .tf-lspecs{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--tf-line);border-bottom:1px solid var(--tf-line);
}
#publicSite .tf-lspec{background:var(--tf-white);padding:12px 14px;min-width:0}
#publicSite .tf-lspec-k{
  display:flex;align-items:center;gap:6px;margin:0;
  font-size:12px;line-height:16px;color:var(--tf-ash);
}
#publicSite .tf-lspec-v{margin:4px 0 0;font-size:14px;line-height:20px;font-weight:500;overflow-wrap:anywhere}

/* 5. Buttons. */
#publicSite .tf-lcta{padding:16px;border-bottom:1px solid var(--tf-line);display:grid;gap:8px}
#publicSite .tf-lcta.is-pair{grid-template-columns:1fr 1fr}
#publicSite .tf-lcta .tf-btn{width:100%;justify-content:center}
#publicSite .tf-linterested{background:var(--tf-paper)}

/* 6. Condition and history. */
#publicSite .tf-lhist{display:flex;flex-direction:column;gap:8px}
#publicSite .tf-lhist-row{
  display:flex;gap:10px;align-items:flex-start;border-radius:8px;padding:12px 14px;
  background:var(--tf-steel);
}
#publicSite .tf-lhist-row.is-good{background:#e4f0ea}
#publicSite .tf-lhist-row.is-warn{background:#f6ead2}
#publicSite .tf-lhist-row .tf-i{flex:none;width:18px;height:18px;margin-top:1px}
#publicSite .tf-lhist-name{margin:0;font-size:14px;line-height:20px;font-weight:500}
#publicSite .tf-lhist-detail{margin:2px 0 0;font-size:14px;line-height:20px;color:var(--tf-muted)}
#publicSite .tf-lrow{
  display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-top:1px solid var(--tf-line);font-size:14px;line-height:20px;
}
#publicSite .tf-lrow span:last-child{color:var(--tf-ash);white-space:nowrap;font-variant-numeric:tabular-nums}
#publicSite .tf-lissue{
  display:flex;gap:9px;align-items:flex-start;padding:7px 0;
  border-top:1px solid var(--tf-line);font-size:14px;line-height:20px;color:var(--tf-muted);
}
#publicSite .tf-lissue .tf-i{flex:none;width:16px;height:16px;margin-top:2px;color:#8a5a06}

/* 7. From the seller. */
#publicSite .tf-lsay{margin:0 0 12px;font-size:14px;line-height:24px;color:var(--tf-muted)}
#publicSite .tf-lsay:last-of-type{margin-bottom:0}
#publicSite .tf-lseller{
  display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:16px;
  border-top:1px solid var(--tf-line);
}
#publicSite .tf-lseller-mark{
  width:40px;height:40px;border-radius:50%;background:var(--tf-steel);
  display:grid;place-items:center;font:600 14px/1 var(--tf-display);color:var(--tf-muted);
}
#publicSite .tf-lseller b{display:block;font-size:14px;line-height:20px;font-weight:500}
#publicSite .tf-lseller em{display:block;margin-top:1px;font-size:12px;line-height:16px;color:var(--tf-ash);font-style:normal}

/* 8. Full specifications, grouped. */
#publicSite .tf-lgroup{margin-bottom:16px}
#publicSite .tf-lgroup > p{margin:0 0 6px;font-size:12px;line-height:16px;font-weight:500;color:var(--tf-ash)}
#publicSite .tf-lgroup .tf-lrow span:last-child{
  text-align:right;white-space:normal;overflow-wrap:anywhere;color:var(--tf-ink);
}

/* 9. Where it is. */
#publicSite .tf-lwhere{border:1px solid var(--tf-line);border-radius:8px;overflow:hidden}
#publicSite .tf-lwhere-head{
  aspect-ratio:2/1;background:var(--tf-steel);display:grid;place-items:center;gap:6px;
  align-content:center;color:var(--tf-ash);
}
#publicSite .tf-lwhere-head span{font-size:12px;line-height:16px}
#publicSite .tf-lwhere-body{padding:12px 14px;border-top:1px solid var(--tf-line)}
#publicSite .tf-lwhere-body b{display:block;font-size:14px;line-height:20px;font-weight:500}
#publicSite .tf-lwhere-body p{margin:2px 0 0;font-size:14px;line-height:20px;color:var(--tf-ash)}

/* 10. Also on the lot. */
#publicSite .tf-lalso{display:flex;flex-direction:column;gap:10px}
#publicSite .tf-lalso a{
  display:flex;gap:12px;align-items:center;padding:10px;color:inherit;
  border:1px solid var(--tf-line);border-radius:8px;text-decoration:none;
}
#publicSite .tf-lalso a:hover{background:var(--tf-paper)}
#publicSite .tf-lalso-shot{
  flex:0 0 84px;width:84px;aspect-ratio:4/3;border-radius:6px;overflow:hidden;
  background:var(--tf-steel);display:grid;place-items:center;
}
#publicSite .tf-lalso-shot img{width:100%;height:100%;object-fit:contain}
#publicSite .tf-lalso-id{flex:1;min-width:0}
#publicSite .tf-lalso-id b{display:block;font-size:14px;line-height:20px;font-weight:500}
#publicSite .tf-lalso-id em{display:block;margin-top:2px;font-size:12px;line-height:16px;color:var(--tf-ash);font-style:normal}
#publicSite .tf-lalso-price{text-align:right;flex:none}
#publicSite .tf-lalso-price b{display:block;font-size:14px;line-height:20px;font-weight:600;font-variant-numeric:tabular-nums}
#publicSite .tf-lalso-price em{display:block;margin-top:1px;font-size:12px;line-height:16px;color:var(--tf-ash);font-style:normal}

/* 11. The bar that follows you down the page. */
#publicSite .tf-lbar{
  position:fixed;bottom:0;left:0;right:0;z-index:40;
  max-width:560px;margin:0 auto;background:var(--tf-white);
  border-top:1px solid var(--tf-line);padding:10px 16px;
  display:flex;align-items:center;gap:12px;box-shadow:0 -1px 3px rgb(0 0 0/.05);
}
#publicSite .tf-lbar-price{flex:none}
#publicSite .tf-lbar-price b{display:block;font:600 18px/22px var(--tf-body);font-variant-numeric:tabular-nums}
#publicSite .tf-lbar-price em{display:block;font:400 12px/16px var(--tf-mono);color:var(--tf-ash);font-style:normal}
#publicSite .tf-lbar .tf-btn{flex:1;min-width:0;justify-content:center}

/* ---------------------------------------------------------------------------
   The web version.

   Everything above is the phone, and it stays the phone. Below 980px nothing
   here applies: .tf-lrail is display:contents, so price, specs and the ask
   fall back into the single column in the design's own order.

   From 980px the page turns into what a car listing is on a desktop -- the
   gallery taking the room it deserves on the left, and the price, the specs
   and the ask riding alongside it in a rail that stays put while you read.
   The bottom bar goes: it exists to keep the price reachable on a phone, and
   the rail already does that here.
   --------------------------------------------------------------------------- */
@media(max-width:979.98px){
  #publicSite .tf-lrail{display:contents}
}

@media(min-width:980px){
  #publicSite .tf-listing{
    max-width:min(1240px,94vw);padding-bottom:56px;
    /* clip, not hidden. overflow:hidden on an ancestor makes it the scroll
       container for everything inside, which silently kills position:sticky
       on the rail -- the box was there, the border was there, and it scrolled
       away with the page. clip rounds the corners without that side effect. */
    border:1px solid var(--tf-line);border-radius:14px;overflow:clip;
    display:grid;grid-template-columns:minmax(0,1fr) 372px;align-items:start;
  }
  #publicSite .tf-listing > *{grid-column:1;min-width:0}

  /* One element, spanning every row, so the rail can stick. */
  #publicSite .tf-lrail{
    /* span, not 1/-1. The -1 line is the end of the EXPLICIT grid, and there
       are no explicit rows here -- every row is implicit -- so 1/-1 collapsed
       to row 1 alone and forced that row to the rail's full 750px. The hero
       is 471px, which left 279px of white between the photo and the
       thumbnails. Spanning far past the row count costs nothing: unused
       implicit rows size to zero. */
    grid-column:2;grid-row:1/span 99;align-self:start;
    position:sticky;top:88px;
    border-left:1px solid var(--tf-line);
  }
  #publicSite .tf-lrail > *{border-bottom:1px solid var(--tf-line)}
  #publicSite .tf-lrail > *:last-child{border-bottom:0}

  /* The gallery is the reason the page is wide. */
  #publicSite .tf-lhero{aspect-ratio:16/10;background:var(--tf-steel)}
  #publicSite .tf-lhero-nav{width:42px;height:42px;font-size:24px}
  #publicSite .tf-lthumb{flex:0 0 92px;width:92px}

  /* In the rail the name and price are the page's headline, not a caption. */
  #publicSite .tf-listing h1{font-size:26px;line-height:32px}
  #publicSite .tf-lprice{font-size:32px;line-height:38px}
  #publicSite .tf-lspecs{grid-template-columns:1fr 1fr;border-bottom:0}
  #publicSite .tf-lcta.is-pair{grid-template-columns:1fr;border-bottom:0}

  /* Prose gets a measure. Full width on a 1240px page is a 150-character
     line, which is most of the way to unreadable. */
  #publicSite .tf-lsay,
  #publicSite .tf-lsec-sub{max-width:68ch}

  /* Two columns for the long grouped sheet, so it stops being a scroll. */
  #publicSite .tf-lgroups{columns:2;column-gap:34px}
  #publicSite .tf-lgroup{break-inside:avoid;margin-bottom:22px}

  /* The rail carries the price from the top of the page to the bottom. */
  #publicSite .tf-lbar{display:none}
}

/* Wide enough to give the gallery real height without pushing the rail's
   buttons off the bottom of the screen. */
@media(min-width:1340px){
  #publicSite .tf-listing{grid-template-columns:minmax(0,1fr) 400px}
  #publicSite .tf-lhero{aspect-ratio:16/9}
}