/* ELV homepage sample. Direction: the page is the object (the car's paperwork folder). Libre Franklin / Source Serif 4.
   Palette taken from the subject (asphalt, number-plate yellow, road-sign green, V5C paper) in the dealt proportions. */
@font-face{font-family:"Libre Franklin";src:url(fonts/franklin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fonts/serif.woff2) format("woff2");font-weight:200 900;font-display:swap}

:root{
  --bg:#14161a; --surface:#1d2025; --slate:#2c3138;
  --ink:#ececE6; --muted:#babbb3;
  --paper:#e7e8e2; --paper-ink:#15171a; --paper-step:#d6d7cf;
  --accent:#0e6b46; --accent-ink:#f2f3ee;
  --yellow:#ffd21f; --yellow-ink:#15171a;
  --focus:#ffd21f;
  --m:clamp(16px,2.2vw,32px);
  --display-face:"Libre Franklin","Arial Narrow",Arial,sans-serif;
  --text-face:"Source Serif 4",Georgia,serif;
  --step-small:1rem;
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2rem,1.3rem + 3.2vw,4rem);
  --step-display:clamp(31px,6.4vw,104px);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --gap-sec:clamp(44px,5vw,72px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--step-body)/1.55 var(--text-face);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display-face);font-weight:700;margin:0;letter-spacing:-.035em;line-height:1}
p{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.hleft,.hright .waitlist,.paper,.visit,.foot .card{--focus:#0e6b46}
.hright{--focus:#ffd21f}
.skip{position:absolute;left:var(--m);transform:translateY(-200%);background:var(--yellow);color:var(--yellow-ink);padding:12px 18px;font:700 var(--step-small) var(--display-face);z-index:20}
.skip:focus{transform:none;top:12px}

/* top bar: wordmark dead centre, one link far right */
.top{position:relative;display:flex;align-items:center;justify-content:center;height:68px;padding-inline:var(--m)}
.brand{display:block;line-height:0}
.brand img{height:36px;width:auto}
.toplink{position:absolute;right:var(--m);top:50%;transform:translateY(-50%);font:600 var(--step-small) var(--display-face);text-decoration:none;padding:10px 0}
.toplink:hover{text-decoration:underline;text-underline-offset:4px}

/* hero: the paperwork card over the street */
.top{position:absolute;z-index:3;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;height:64px;padding-inline:var(--m)}
.toplink{position:static;transform:none}
.stage{position:relative;min-height:max(100svh,700px);display:grid;align-items:center;padding:96px var(--m) 56px;overflow:hidden}
.herobg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.2) brightness(.6);transform-origin:60% 50%;animation:slowzoom 18s var(--ease-soft) both}
@keyframes slowzoom{from{transform:scale(1.08)}to{transform:scale(1)}}
.hcard{position:relative;width:100%;margin:0;display:grid;grid-template-columns:minmax(0,700px) minmax(0,350px);justify-content:space-between;align-items:end;color:var(--paper-ink);animation:rise 1s var(--ease-expo) .15s both}
.hleft{padding:clamp(24px,3vw,44px);background:var(--paper)}
.hright{justify-content:flex-start;background:var(--paper-ink);padding:clamp(20px,2.4vw,32px);color:var(--paper);display:flex;flex-direction:column;gap:20px}
.plates figure:first-child img{object-position:58% 50%}
.stage h1{font-size:clamp(2.25rem,4.4vw,4rem);line-height:.98;max-width:20ch;text-wrap:balance}
.sub{font-size:var(--step-body);line-height:1.5;max-width:60ch;margin:16px 0 22px}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.qhead{margin-top:6px}
.qtitle{font:600 var(--step-small) var(--display-face)}
.hright .tag{margin:0;padding:0;background:none}
.hright .ready{margin-top:22px}
.hright .tag::before{display:none}
.hright .tag h3{color:var(--paper)}
.hright .waitlist{margin:0;background:var(--paper)}
.hright .waitlist .btn.ghost{background:var(--paper-step)}

/* the form */
.qhead{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.qhead h2{font-size:var(--step-small);letter-spacing:0;font-weight:700}
.cue{font:600 var(--step-small) var(--display-face);color:#4b4d4f}
.lane{display:flex;gap:6px;margin:10px 0 18px}
.lane i{flex:1;height:6px;background:var(--paper-step);transition:background .3s ease}
.lane i.on{background:var(--accent)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font:700 var(--step-lead)/1.1 var(--display-face);letter-spacing:-.02em;padding:0;margin-bottom:14px}
label{display:block;font:600 var(--step-small) var(--display-face);margin:0 0 6px;color:var(--paper-ink)}
.opt{font-weight:400;color:#46484a}
input.solid,textarea.solid{width:100%;font:400 var(--step-body) var(--text-face);color:var(--paper-ink);background:var(--paper-step);border:0;border-radius:0;padding:15px 16px;min-height:56px;transition:background .18s ease}
input.solid:hover,textarea.solid:hover{background:#d3cfbc}
input.solid::placeholder,.plate input::placeholder{color:#5c5e5f;opacity:1}
.plate{container-type:inline-size;background:var(--yellow);padding:10px 20px;transition:transform .2s var(--ease-out)}
.plate:focus-within{transform:translateY(-3px)}
.plate input{display:block;width:100%;min-width:0;background:transparent;border:0;color:var(--yellow-ink);text-transform:uppercase;text-align:center;font:700 min(var(--step-head),13cqw)/1.15 var(--display-face);letter-spacing:.02em;padding:6px 0;outline-offset:8px}
.plate input::placeholder{color:#222426;opacity:1}
.pair{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:18px;align-items:end}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.fieldbox{min-width:0}
.pick{display:flex;align-items:center;gap:12px;background:var(--paper-step);padding:14px 16px;margin:0 0 8px;cursor:pointer;font:400 var(--step-body) var(--text-face);transition:background .18s ease}
.pick:hover{background:#d3cfbc}
.pick input{width:22px;height:22px;accent-color:var(--accent);margin:0}
fieldset label[for="damage"]{margin-top:14px}
.privacy{font-size:var(--step-small);line-height:1.5;margin-top:14px;max-width:62ch}
.privacy a,.guide-link a,.fine a{color:var(--accent);font-weight:600}
.msg{min-height:0;font-size:var(--step-small);margin-top:6px;color:var(--paper-ink)}
.msg.bad{color:#a3281b;font-weight:600}
.stepnav{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 var(--step-body)/1 var(--display-face);letter-spacing:-.01em;padding:17px 28px;min-height:56px;border:0;border-radius:0;text-decoration:none;cursor:pointer;background:var(--accent);color:var(--accent-ink);transition:transform .14s var(--ease-out),background .18s ease}
.btn:hover{background:#0a5a3a}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--paper-step);color:var(--paper-ink)}
.btn.ghost:hover{background:#cdc9b5}
.btn:disabled{opacity:.55;cursor:wait}
.btn.wide{display:flex;width:100%}
.result{margin-top:16px;padding:18px 20px;background:var(--paper-ink);color:var(--paper);font-size:var(--step-body)}
.result.ok{background:var(--accent);color:var(--accent-ink)}
.result p+p{margin-top:8px}
.result .ref{display:block;font:700 var(--step-lead)/1.1 var(--display-face);margin:4px 0 10px}
.result .sum{white-space:pre-line;margin-top:10px;background:rgba(0,0,0,.2);padding:12px 14px;font-size:var(--step-small)}

/* the tear-off stub: where this enquiry would go */
.tag{position:relative;background:var(--paper-ink);color:var(--paper);padding:clamp(20px,2vw,28px);margin-left:20px}
.tag::before{content:"";position:absolute;left:-18px;top:0;bottom:0;border-left:5px dotted var(--paper-ink)}
.tag h3{font-size:var(--step-body);letter-spacing:-.01em;line-height:1.2}
.tagstate{margin-top:12px;font-weight:600}
.route{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px}
.route li{position:relative;padding-left:30px}
.route li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:14px;background:var(--yellow)}
.ready{margin-top:18px;font-size:var(--step-small);line-height:1.5;color:var(--muted)}
.ready b{color:var(--paper)}
.tag.ok{animation:stub .6s var(--ease-expo)}
@keyframes stub{from{transform:translateY(10px);opacity:.4}to{transform:none;opacity:1}}
.tag.none .route,.tag.none .ready{display:none}
.waitlist{margin-top:18px;margin-left:20px;background:var(--paper-step);padding:clamp(18px,2vw,24px)}
.waitlist label.pick{background:var(--paper);margin-top:12px}
.guide-link{margin-top:12px;font-size:var(--step-small)}
.fine{font-size:var(--step-small)}

/* how it works: the itinerary slip */
.how,.changes,.areas{padding:var(--gap-sec) var(--m) 0}
.changes h2,.areas h2,.howintro h2{font-size:var(--step-head);text-wrap:balance;max-width:20ch}
.how{background:var(--slate);margin-top:var(--gap-sec);padding-bottom:var(--gap-sec)}
.howgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:start}
.howintro{grid-column:1/6}
.howintro .statement{max-width:30ch}
.plates{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px);margin-top:clamp(28px,3vw,48px)}
.plates figure{margin:0;aspect-ratio:1/1;overflow:hidden;background:var(--surface)}
.plates figure:nth-child(2){margin-top:clamp(20px,3vw,40px)}
.plates img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.04);transition:transform 1.2s var(--ease-expo)}
.plates figure:hover img{transform:scale(1.05)}
.slipwrap{grid-column:7/12}
.slip{position:relative;background:var(--paper);color:var(--paper-ink);padding:clamp(24px,3vw,40px) clamp(20px,2.6vw,36px) clamp(52px,5vw,68px);font-variant-numeric:tabular-nums}
.slip::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:14px;background:var(--paper);-webkit-mask:var(--zig) repeat-x 0 0/24px 14px;mask:var(--zig) repeat-x 0 0/24px 14px}
:root{--zig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0L12 14L24 0Z'/%3E%3C/svg%3E")}
.slip h3{font-size:var(--step-lead);letter-spacing:-.02em;margin-top:28px}
.slip h3:first-child{margin-top:0}
.slip ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.slip li,.slip .total{display:flex;align-items:flex-end;gap:10px}
.slip li span{flex:0 1 auto;max-width:72%}
.slip li i{flex:1 1 20px;min-width:20px;align-self:flex-end;margin-bottom:.4em;height:0;border-bottom:4px dotted var(--paper-ink)}
.slip li b,.slip .total b{font:700 var(--step-body)/1.2 var(--display-face);white-space:nowrap}
.slip .total{margin-top:28px;background:var(--paper-ink);color:var(--paper);padding:14px 18px;min-height:56px;justify-content:space-between;align-items:center}
.howcta{margin-top:clamp(24px,3vw,40px)}

/* what can change the price: three cards side by side */
.statement{font-size:var(--step-lead);line-height:1.4;max-width:46ch;margin-top:20px}
.sheets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);margin-top:clamp(28px,3vw,44px)}
.sheet{display:flex;flex-direction:column;background:var(--sc);color:var(--si)}
.sheet figure{order:-1;margin:0;aspect-ratio:4/3;max-height:320px;overflow:hidden}
.sheet figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) contrast(1.04);transition:transform 1.2s var(--ease-expo)}
.sheet:hover figure img{transform:scale(1.05)}
.sheet h3{padding:20px 22px 0;font-size:var(--step-lead)}
.sheet .txt{padding:10px 22px 24px}
.sheet .big{font:700 var(--step-body)/1.3 var(--display-face);letter-spacing:-.01em;margin-bottom:10px}
.s1{--sc:var(--yellow);--si:var(--yellow-ink)}
.s2{--sc:var(--accent);--si:var(--accent-ink)}
.s3{--sc:var(--slate);--si:var(--ink)}

/* the printed menu sheet, beside a contained photograph */
.cars{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(16px,2vw,32px);align-items:stretch;padding:var(--gap-sec) var(--m) 0}
.carfig{margin:0;min-height:320px;overflow:hidden;background:var(--surface)}
.carfig img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:transform 1.2s var(--ease-expo)}
.carfig:hover img{transform:scale(1.04)}
.paper{position:relative;background:var(--paper);color:var(--paper-ink)}
.menu{padding:clamp(28px,3vw,44px) clamp(22px,3vw,44px);text-align:center;margin:16px 0}
.menu::before,.menu::after,.foot .card::before{content:"";position:absolute;left:0;right:0;height:16px;background:var(--paper);-webkit-mask:var(--scallop) repeat-x 0 0/28px 16px;mask:var(--scallop) repeat-x 0 0/28px 16px}
.menu::before{top:-15px}
.menu::after{bottom:-15px;transform:scaleY(-1)}
:root{--scallop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16A14 16 0 0 1 28 16Z'/%3E%3C/svg%3E")}
.menu h2{font-size:var(--step-head);text-wrap:balance;max-width:14ch;margin-inline:auto}
.menu .note{margin-top:12px}
.group{margin-top:24px}
.group h3{font-size:var(--step-lead);letter-spacing:-.02em}
.group ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.group p{margin-top:10px}
.close{margin-top:24px;font-weight:600}

/* kent and the guides: photo tiles with label strips */
.areas h2{margin-bottom:0}
.tiles{list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,28px) clamp(12px,1.6vw,24px)}
.tiles a{display:block;text-decoration:none;transition:opacity .25s ease,transform .35s var(--ease-out)}
.tiles:hover a{opacity:.55}
.tiles a:hover,.tiles a:focus-visible{opacity:1;transform:translateY(-6px)}
.tiles .pic{display:block}
.tiles img{width:100%;height:220px;object-fit:cover;filter:grayscale(.3) contrast(1.04)}
.strip{display:grid;gap:2px;padding:12px 16px;min-height:76px;background:var(--pc);color:var(--pi)}
.strip b{font:700 var(--step-body)/1.15 var(--display-face);letter-spacing:-.01em}
.strip span{font-size:var(--step-small);line-height:1.35}
.c1{--pc:var(--yellow);--pi:var(--yellow-ink)}
.c2{--pc:var(--paper);--pi:var(--paper-ink)}
.c3{--pc:var(--accent);--pi:var(--accent-ink)}
.c4{--pc:var(--slate);--pi:var(--ink)}

/* the visit card beside a contained photograph */
.talk{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(16px,2vw,32px);align-items:stretch;padding:var(--gap-sec) var(--m) 0}
.talk figure{margin:0;min-height:340px;overflow:hidden;background:var(--surface)}
.talk figure img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.95);transition:transform 1.2s var(--ease-expo)}
.talk figure:hover img{transform:scale(1.04)}
.visit{background:var(--paper);color:var(--paper-ink);padding:28px 28px 0;display:flex;flex-direction:column}
.visit h2{font-size:var(--step-lead);letter-spacing:-.02em}
.visit>p{margin-top:8px}
.visit .fine{margin-top:14px;font-size:var(--step-body)}
.visit .btn{margin:auto -28px 0;width:calc(100% + 56px);align-self:stretch}
.visit .fine{margin-bottom:24px}

/* footer: the back of the card */
.foot{padding:var(--gap-sec) var(--m) 36px}
.foot .card{position:relative;width:min(100%,83.3%);margin:0 auto;background:var(--paper);color:var(--paper-ink);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);padding:clamp(56px,6vw,84px) clamp(24px,5vw,72px) 28px;margin-top:40px}
.foot .card::before{top:-39px;height:40px;-webkit-mask:var(--scallop) repeat-x 0 0/calc(100%/12) 40px;mask:var(--scallop) repeat-x 0 0/calc(100%/12) 40px}
.foot .card h2{font-size:var(--step-lead);margin-bottom:14px}
.foot .card .half p+p{margin-top:12px}
.foot .card .half:last-child{position:relative;padding-top:6px}
.stamp{position:absolute;right:0;top:0;width:88px;height:auto;aspect-ratio:3/4;object-fit:cover;border:6px solid var(--paper);filter:grayscale(.3)}
.addr{list-style:none;margin:0;padding:0;display:grid;gap:0;font:600 var(--step-body)/1.3 var(--display-face);letter-spacing:-.01em;padding-top:62px}
.addr a{text-decoration:none;display:inline-block;padding:10px 0}
.addr a:hover{text-decoration:underline;text-underline-offset:4px}
.imprint{grid-column:1/-1;text-align:center;font-size:var(--step-small);margin-top:12px}
.credits{max-width:76ch;margin:36px auto 0;font-size:var(--step-small);line-height:1.55;color:var(--muted)}
.credits a{color:var(--ink)}

/* entrances (only once the script has marked the page) */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-expo) var(--d,0ms),transform .9s var(--ease-expo) var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
.js .menu.rv,.js .visit.rv{transform:translateY(40px)}
.js .menu.rv.in,.js .visit.rv.in{transform:none}

@media (max-width:900px){
  .howgrid{display:block}
  .slipwrap{margin-top:36px}
  .plates{max-width:520px}
  .hcard{grid-template-columns:1fr;align-items:start}
  .stage{padding:80px 10px 40px;align-items:start}
  .pair{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr}
  .sheets{grid-template-columns:1fr}
  .sheet figure{aspect-ratio:16/9;max-height:none}
  .cars,.talk{grid-template-columns:1fr}
  .carfig,.talk figure{min-height:0;aspect-ratio:16/9}
  .menu{padding-inline:20px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px}
  .tiles img{height:140px}
  .strip{padding:10px 12px;min-height:72px}
  .visit .btn{margin-top:20px}
  .foot .card{grid-template-columns:1fr;width:100%}
  .foot .card::before{-webkit-mask-size:calc(100%/6) 40px;mask-size:calc(100%/6) 40px}
  .addr{padding-top:12px}
  .stamp{position:static;display:block;margin:0 0 14px auto;width:64px}
  .half:last-child{order:3}
}
@media (max-width:480px){
  .stage h1{font-size:1.75rem}
  .hleft{padding:20px 16px}
}
/* round 3: one 3-column grid shared by every section, one photo grade, compact figures */
:root{--g:clamp(16px,1.7vw,24px);--pad:clamp(20px,2vw,28px)}
.herobg{filter:grayscale(1) brightness(.6) contrast(1.05)}
.plates img,.sheet figure img,.carfig img,.tiles img,.talk figure img,.stamp{filter:grayscale(1) contrast(1.06)}
.hcard{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);justify-content:normal;align-items:end}
.hleft{grid-column:1/3;padding:var(--pad)}
.hright{grid-column:3;padding:var(--pad)}
.howgrid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g)}
.howintro{grid-column:1/3}
.slipwrap{grid-column:3}
.slip{padding:var(--pad) var(--pad) 56px}
.plates{gap:var(--g)}
.plates figure{aspect-ratio:4/3}
.plates figure:nth-child(2){margin-top:0}
.sheets{gap:var(--g)}
.sheet h3{padding:var(--pad) var(--pad) 0}
.sheet .txt{padding:10px var(--pad) var(--pad)}
.cars{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.carfig{grid-column:1;position:relative;min-height:0}
.carfig img{position:absolute;inset:0}
.menu{grid-column:2/4;padding:var(--pad) calc(var(--pad)*1.5)}
.menu h2{max-width:none}
.mcols{display:grid;grid-template-columns:1fr 1fr;gap:var(--g);margin-top:4px}
.mcols .group{margin-top:20px}
.close{margin-top:20px}
.tiles{gap:var(--g)}
.strip{padding:12px var(--pad)}
.talk{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.talk figure{grid-column:1/3;position:relative;min-height:340px}
.talk figure img{position:absolute;inset:0}
.visit{grid-column:3;padding:var(--pad) var(--pad) 0}
.visit .btn{margin:auto calc(-1*var(--pad)) 0;width:calc(100% + 2*var(--pad))}
.foot .card{width:100%}
.credits{max-width:none;margin:28px 0 0;color:var(--muted)}
.credits summary{cursor:pointer;font:600 var(--step-body) var(--display-face);color:var(--ink);padding:8px 0}
.credits p{margin-top:10px;max-width:72ch}
@media (max-width:900px){
  :root{--pad:20px}
  .hcard{grid-template-columns:1fr}
  .hleft,.hright{grid-column:1}
  .howgrid{display:block}
  .slipwrap{margin-top:28px}
  .plates{max-width:none}
  .plates figure{aspect-ratio:1/1}
  .sheet figure{aspect-ratio:21/9}
  .sheet .txt p:not(.big){display:none}
  .sheet .txt{padding-bottom:20px}
  .sheet h3{padding-top:16px}
  .cars,.talk{grid-template-columns:1fr}
  .carfig,.menu,.talk figure,.visit{grid-column:1}
  .carfig,.talk figure{aspect-ratio:21/9;min-height:0}
  .menu{padding-inline:20px}
  .mcols{grid-template-columns:1fr}
  .tiles img{height:96px}
  .strip{padding:8px 12px;min-height:60px}

  .plates{grid-template-columns:1fr}
  .plates figure{aspect-ratio:16/7}
  .plates figure:nth-child(2){display:none}
  .hright .ready{display:none}
  .hright{padding-block:18px}
  .foot .card{padding:44px 20px 20px;gap:16px}
  .stamp{display:none}
  .group ul{gap:6px}
  .slip h3{margin-top:18px}
  .slip ul{gap:8px}
  .menu{margin:8px 0}
  .group{margin-top:16px}
  .sheet figure{aspect-ratio:2.6/1}
}
/* round 3 critique fixes: varied rhythm, a second ground band, bigger sheet statements */
.areas{background:var(--slate);margin-top:var(--gap-sec);padding-bottom:var(--gap-sec)}
.c4{--pc:#40464e;--pi:var(--ink)}
.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles li:nth-child(1),.tiles li:nth-child(6){grid-column:span 2}
.tiles img{height:220px}
.sheet .big{font-size:var(--step-lead);line-height:1.2;margin-bottom:12px}
@media (max-width:900px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles li:nth-child(1),.tiles li:nth-child(6){grid-column:auto}
  .tiles img{height:96px}
  .sheet .big{font-size:1.25rem}
}
/* hero: card in column 1 only so the scrapyard stays in view */
.hleft{grid-column:1/3}
.stage h1{font-size:clamp(2rem,3.4vw,3.25rem);max-width:none}
.hleft .pair{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--g)}
.hleft .sub{font-size:var(--step-body);margin:12px 0 16px}
.hleft .lane{margin:8px 0 12px}
.hleft legend{margin-bottom:8px}
@media (max-width:900px){.hleft .pair{grid-template-columns:1fr}}
/* one shared warm grade for every photograph */
:root{--grade:saturate(.84) sepia(.14) contrast(1.04)}
.herobg{filter:var(--grade) brightness(.62)}
.plates img,.sheet figure img,.carfig img,.tiles img,.talk figure img,.stamp{filter:var(--grade)}
.s3 figure{background:#d9d3c3}
.s3 figure img{mix-blend-mode:multiply}
.carfig img{filter:saturate(.45) sepia(.08) contrast(1.04)}
.tiles li:nth-child(2) img{filter:saturate(.7) sepia(.2) contrast(1.04)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}

/* ---- the real site: parts the sample did not need ---- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.muted{color:var(--muted)}
.wrap{padding-inline:var(--m)}
textarea.solid{display:block;resize:vertical;min-height:112px;line-height:1.45}
.fine.age{margin-top:10px}
noscript p{background:var(--paper);color:var(--paper-ink);padding:12px var(--m);font-size:var(--step-small)}
.slot{display:inline-block;border:2px dashed currentColor;padding:1px 8px;font-weight:700;font-size:var(--step-small)}
.turnstile:empty{display:none}
.turnstile{margin-top:10px}
.fieldbox .msg:empty,.msg:empty{display:none}

/* results: the reference as a number plate, the summary as a printed slip */
.result-in{display:grid;gap:10px}
.result.err{border-left:6px solid #ff8f70}
.tagref{display:inline-grid;gap:2px;background:var(--yellow);color:var(--yellow-ink);padding:10px 18px;justify-self:start}
.tagref small{font:600 var(--step-small) var(--display-face)}
.tagref b{font:700 var(--step-lead)/1.1 var(--display-face);letter-spacing:.06em}
.result pre{white-space:pre-wrap;font:inherit;margin:0;background:rgba(0,0,0,.22);padding:12px 14px;font-size:var(--step-small)}

/* the price panel: yellow strip under the stub, only once a buyer exists */
.estimate{background:var(--yellow);color:var(--yellow-ink);padding:var(--pad);display:grid;gap:10px;align-content:start}
.estimate .guide{font:700 var(--step-lead)/1.2 var(--display-face);letter-spacing:-.02em}
.estimate a:not(.btn){color:var(--yellow-ink);font-weight:600}
.estimate .btn.call{background:var(--paper-ink);color:var(--paper);justify-self:start;white-space:normal;text-align:left}
.estimate .btn.call:hover{background:#000}
.btn.small{padding:10px 18px;min-height:44px;font-size:var(--step-small)}
.btn.call{background:var(--paper);color:var(--paper-ink)}

/* header on every page except the home page, where it floats over the hero */
body:not([data-page="home"]) .top{position:relative}
.top nav{display:flex;align-items:center;gap:16px}

/* the visit card holds the contact form */
.visit dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:14px 0 0}
.visit dt{color:#46484a}
.visit dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.visit a:not(.btn){color:var(--accent);font-weight:600}
.visit form{display:grid;gap:6px;margin:16px 0 0}
.visit form label{margin-top:8px}
.visit form .btn{margin:14px calc(-1*var(--pad)) 0;width:calc(100% + 2*var(--pad))}
.talk .visit{padding-bottom:0}
.talk .visit>.btn,.talk .visit form .btn{margin-bottom:0}

/* footer content */
.foot .card h2{font-size:var(--step-lead)}
.foot .addr.pages{padding-top:0;margin-top:22px;font-size:var(--step-small);gap:6px}
.foot .card a{color:var(--paper-ink)}
.foot .card .half a:not(.addr a){font-weight:600}
.credits a{text-underline-offset:3px}
.credits ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:6px;max-width:80ch}

/* the other pages: same tokens, type and grid, no new look */

/* inner-page hero: the home hero in small. Photograph full-bleed behind, the paper card over it. */
div.hero{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);align-items:end;margin:0 calc(-1*var(--m));padding:clamp(48px,9vw,128px) var(--m) clamp(24px,3vw,44px);min-height:min(78svh,680px);overflow:hidden}
div.hero .hero-copy{position:relative;z-index:1;grid-column:1/3;background:var(--paper);color:var(--paper-ink);padding:clamp(24px,3vw,44px);animation:rise 1s var(--ease-expo) .15s both}
div.hero h1{font-size:clamp(2.1rem,5.4vw,5rem);line-height:.98;text-wrap:balance}
div.hero .lead{font-size:var(--step-lead);line-height:1.4;margin-top:18px;max-width:56ch}
div.hero .hero-copy p+p{margin-top:12px}
div.hero .hero-copy a:not(.btn){color:var(--accent);font-weight:600}
div.hero .cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}
div.hero .muted{color:#46484a;font-size:var(--step-small)}
div.hero .crumbs{color:#46484a;margin-top:20px;padding:0}
.photo{margin:0;background:var(--surface);color:var(--muted);display:grid;place-items:center;text-align:center;padding:20px}
.photo.filled{display:block;position:relative;padding:0}
.photo img{width:100%;height:100%;object-fit:cover;filter:var(--grade)}
div.hero .hero-photo{position:absolute;inset:0;z-index:0}
div.hero .hero-photo img{filter:var(--grade) brightness(.62);animation:slowzoom 18s var(--ease-soft) both}
section.block .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
section.block .tiles li:nth-child(1),section.block .tiles li:nth-child(6){grid-column:auto}
.crumbs{font-size:var(--step-small);color:var(--muted)}
.crumbs a,.prose a,.muted a,.legal a,.fine a{color:var(--yellow);text-underline-offset:3px}
section.block{padding:var(--gap-sec) 0 0}
section.block>h2{font-size:var(--step-head);max-width:22ch;text-wrap:balance}
.prose{display:grid;gap:14px;max-width:48em;margin-top:18px}
.prose h3{font-size:var(--step-lead);letter-spacing:-.02em;margin-top:12px}
ul.prose{padding-left:1.2em}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);margin-top:18px;align-items:start}
.cols>.prose{grid-column:1/3;margin-top:0}
.cols .card{background:var(--paper);color:var(--paper-ink);padding:var(--pad);display:grid;gap:12px;align-content:start}
.cols .card h3{font-size:var(--step-lead);letter-spacing:-.02em}
.cols .card a{color:var(--accent);font-weight:600}
.legal{max-width:46em;padding-block:20px 72px;display:grid;gap:14px}
.legal h1{font-size:var(--step-head)}
.legal h2{font-size:var(--step-lead);letter-spacing:-.02em;margin-top:22px}
.legal .note{background:var(--paper);color:var(--paper-ink);padding:14px 18px}
.legal dl{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;margin:0}
.legal dt{color:var(--muted)}
.legal dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.legal ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.sticky{display:none}
@media (max-width:760px){
  .has-sticky .sticky{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;inset:auto 0 0 0;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--bg);z-index:5}
  .has-sticky .sticky.one{grid-template-columns:1fr}
  body.has-sticky{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}
@media (max-width:900px){
  div.hero{grid-template-columns:1fr;min-height:0;padding-top:72px}
  div.hero .hero-copy{grid-column:1}
  section.block .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols{grid-template-columns:1fr}
  .cols>.prose{grid-column:1}
  .hleft .pair{grid-template-columns:1fr}
  .visit form .btn{margin-top:14px}
}
@media (max-width:520px){
}
@media print{.top,.sticky{display:none}body{background:#fff;color:#000}}
@media (max-width:900px){div.hero{margin-bottom:48px}}
@media (max-width:900px){section.block{padding-top:80px}}
/* one label on every stock picture, small and quiet, in a corner of the picture (Themis #164 rule 15) */
.photolabel{position:absolute;top:0;right:0;z-index:2;background:rgba(20,22,26,.72);color:var(--ink);font:400 13px/1 var(--text-face);padding:5px 8px;margin:0;pointer-events:none}
.plates figure,.sheet figure,.tiles a{position:relative}
.stage .photolabel,div.hero .photolabel{top:auto;bottom:12px;right:var(--m)}
.foot .card a{padding-block:10px}
.credits a{padding-block:10px}
.credits ul{gap:0}
.credits li{padding-block:2px}
.foot .addr.pages{margin-top:14px;gap:0}