.lx{display:block;--sp:clamp(96px,10vw,152px);--f-x:var(--f-d);--xk:1;--xw:500;--xls:-.02em;--hh:calc(100svh - 72px)}
body.sx .lx{--f-x:var(--f-n);--xk:.8;--xw:400;--xls:-.045em}
.lx [id]{scroll-margin-top:24px}
.lx .x1,.lx .x2,.lx .x3,.lx .xq{font-family:var(--f-x);font-weight:var(--xw);letter-spacing:var(--xls);text-wrap:balance;color:inherit}
.lx .x1{font-size:calc(var(--xk)*clamp(48px,6.6vw,104px));line-height:.98}
.lx .x2{font-size:calc(var(--xk)*clamp(36px,4.2vw,64px));line-height:1.02}
.lx .x3{font-size:calc(var(--xk)*clamp(22px,1.9vw,28px));line-height:1.2;letter-spacing:calc(var(--xls)*.5)}
.lx .xq{font-size:calc(var(--xk)*clamp(28px,3.2vw,48px));line-height:1.16}
body.sx .lx .x1,body.sx .lx .x2{line-height:1.02}
.lx .ey{display:block;font-family:var(--f-n);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.lx .ld{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--ink-2);max-width:32em;text-wrap:pretty}
.lx .tx p,.lx p.tx{font-size:16px;line-height:27px;color:var(--ink-2);max-width:36em;text-wrap:pretty}
.lx .tx p+p{margin-top:14px}
.lx .tl{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-n);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--green);text-decoration:none;padding-bottom:9px;border-bottom:1px solid currentColor;white-space:nowrap;width:max-content}
.lx .tl::after{content:'\2197';font-size:14px;letter-spacing:0;line-height:1;transition:transform .25s var(--ease)}
.lx .tl.r::after{content:'\2192'}.lx .tl.d::after{content:'\2193'}
.lx .tl:hover::after{transform:translate(2px,-2px)}.lx .tl.r:hover::after{transform:translateX(3px)}.lx .tl.d:hover::after{transform:translateY(3px)}
.lx .bt{display:flex;flex-wrap:wrap;gap:12px}
.lx .bt .pb{flex:none;min-width:232px}
body.look .lx #about:not(.gr):not(.b){background:transparent;color:var(--ink)}
body.look .lx #about.b{background:var(--card);color:var(--ink)}
.lx .sl{position:relative;border-radius:var(--pr);overflow:hidden;background:var(--bone-2);min-width:0}
.lx .sl>.slot{position:absolute;inset:0}
.lx .sl.dk>.slot{background:repeating-linear-gradient(135deg,transparent 0 13px,rgba(243,239,231,.045) 13px 14px),#21302B}
.lx .sl.dk .slot i,.lx .sl.dk .slot em{color:rgba(243,239,231,.45)}
.lx .sec2{padding:var(--sp) 0}
.lx .q-hr{border-top:1px solid var(--hair)}
.lx .gr{background:var(--green);color:var(--paper)}
.lx .gr .ey{color:rgba(243,239,231,.62)}.lx .gr .tx p,.lx .gr p.tx,.lx .gr .ld{color:rgba(243,239,231,.8)}.lx .gr .tl{color:var(--paper)}
body.look .lx .pb.iv{border-color:rgba(243,239,231,.75);color:var(--paper);background:transparent}
body.look .lx .pb.iv:hover,body.look .lx .pb.iv:focus-visible{background:var(--paper);border-color:var(--paper);color:var(--green)}
.lx .film{border-radius:var(--pr)}
/* shared sections */
.lx .ab-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px 64px}
.lx .ab-g .x2{margin-top:20px;max-width:9em}.lx .ab-g .tx{padding-top:8px}
.lx .abc{text-align:center}.lx .abc .x2{margin:20px auto 0;max-width:13em}.lx .abc .tx{margin:32px auto 0;max-width:36em}.lx .abc .tx p{margin-left:auto;margin-right:auto}
.lx .abg .ab-g.sp{margin-top:clamp(72px,9vw,120px);padding-top:40px;border-top:1px solid rgba(243,239,231,.25)}
.lx .pq{margin:0;max-width:22em}.lx .pq .ey{margin-top:32px}
.lx .pq.q-sm{max-width:30em;margin:56px auto 0}.lx .abc .pq.q-sm .ey{margin-top:20px}
.lx .wk-g{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
.lx .wk-g.fl>.sl{order:2}.lx .wk-g.fl{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.lx .wk-t .x2{margin-top:20px;max-width:10em}.lx .wk-t .tx{margin-top:24px}.lx .wk-t .tl{margin-top:32px}
.lx .fm-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:48px}
.lx .fm-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.lx .fm-g.big{grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:end}
.lx .fm-g .tx{margin-top:16px;font-size:15px;line-height:24px}
.lx .lb-g{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:end}
.lx .lb-g .x2{margin-top:20px;max-width:12em}.lx .lb-g .bt{margin-top:32px}
.lx .pr .pq .xq{color:var(--paper)}
/* the collection page */
.cx .cx-h{padding:clamp(48px,9vh,104px) 0 56px}
.cx .cx-g{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:end}
.cx .cx-g .x1{margin-top:20px}.cx .cnt2{margin-top:24px}
.cx .cx-b{padding:24px 0 var(--sp)}
@media(max-width:900px){
 .lx .ab-g,.lx .wk-g,.lx .wk-g.fl,.lx .lb-g,.lx .fm-g,.lx .fm-g.big,.cx .cx-g{grid-template-columns:minmax(0,1fr);gap:32px}
 .lx .wk-g.fl>.sl{order:0}.lx .fm-g{gap:40px}
}
@media(max-width:640px){
 .lx{--sp:88px}
 .lx .bt .pb{min-width:0!important;width:100%!important;flex:none!important}
 .lx .bt{flex-direction:column!important;gap:8px}
 .lx .fm-h{flex-direction:column;align-items:flex-start;margin-bottom:32px}
}
/* header with the logo in the middle (idea 4) */
@media(min-width:901px){
 body[data-hd="c"] .hd-in{display:grid;grid-template-columns:1fr auto 1fr}
 body[data-hd="c"] .nv{order:-1;margin-left:0;justify-self:start}
 body[data-hd="c"] .wm{justify-self:center}
 body[data-hd="c"] .hd-r{justify-self:end}
}


html{scroll-behavior:auto}
.lx .ph{position:relative;overflow:hidden;border-radius:var(--pr);background:var(--bone-2);min-width:0;isolation:isolate}
.lx .ph>i{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat}
.lx .ph[data-par]>i{inset:-9% 0}
.lx .ph.fb{border-radius:0}
.lx .ln-mask{padding-bottom:.16em;margin-bottom:-.16em}
.lx .q-hr:not(.gr){border-top:0;background-image:linear-gradient(var(--hair),var(--hair));background-repeat:no-repeat;background-size:var(--hrw,100%) 1px;background-position:0 0}
.lx .scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(12,16,14,.4) 0,rgba(12,16,14,0) 22%),radial-gradient(130% 95% at 0% 100%,rgba(12,16,14,.66) 0,rgba(12,16,14,.3) 42%,rgba(12,16,14,0) 72%),linear-gradient(0deg,rgba(12,16,14,.25),rgba(12,16,14,0) 40%)}
.lx .on-ph{color:var(--paper)}.lx .on-ph .ey{color:rgba(243,239,231,.74)}.lx .on-ph .ld,.lx .on-ph .tx p,.lx .on-ph p.tx{color:rgba(243,239,231,.86)}
.lx .on-ph .tl{color:var(--paper)}
.lx .lab{display:flex;align-items:center;gap:14px;font-family:var(--f-n);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.lx .lab i{font-style:normal;color:var(--green)}.lx .lab s{display:block;width:40px;height:1px;background:currentColor;opacity:.5;text-decoration:none}
.lx .nb{font-family:var(--f-x);font-weight:var(--xw);letter-spacing:var(--xls);font-variant-numeric:lining-nums tabular-nums;line-height:.85}
/* the header: stays at the top, slips away while reading down, comes back on the way up */
body.hx .hd{position:sticky;top:0;transition:transform .6s var(--ease),background-color .35s,border-color .35s}
body.hx .hd.up{transform:translateY(-101%)}
/* over a photo: transparent with ivory words until the page moves */
body.ho .hd{position:fixed;left:0;right:0;top:0;background:transparent;border-bottom-color:rgba(243,239,231,.22)}
body.ho .hd.solid{background:var(--paper);border-bottom-color:var(--hair)}
body.ho .hd:not(.solid) .wm,body.ho .hd:not(.solid) .nv a,body.ho .hd:not(.solid) .lng-b{color:var(--paper)}
body.ho .hd:not(.solid) .nv a:hover{color:#fff}

html.rm .lx *{animation:none!important;transition:none!important}


.lx .film.pt{background:#1d2420}
.lx .film.pt>.ph{position:absolute;inset:0;border-radius:0}
.lx .film.pt .film-b{color:var(--paper)}
.lx .film.pt .film-b::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,16,14,0) 40%,rgba(12,16,14,.58));transition:background-color .35s}
.lx .film.pt .film-b:hover::before{background-color:rgba(12,16,14,.12)}
.lx .film.pt .film-b small{color:rgba(243,239,231,.78)}


/* ---------- the drawings */
.lx .art{display:block;width:100%;height:100%;stroke:var(--green);overflow:visible}
.lx .art.a-car{stroke-width:3.4}.lx .art.a-sp{stroke-width:2.3}.lx .art.a-key{stroke-width:2.1}
.lx .art .fn{stroke-width:1.3}.lx .art.a-car .fn{stroke-width:2}
.lx .art .stc{stroke-dasharray:5 6}
.lx .gr .art{stroke:var(--paper)}
.lx .z-box{position:relative;aspect-ratio:4/3;border-radius:var(--pr);background:var(--card);overflow:hidden}
.lx .z-box>.art{position:absolute;left:14%;top:13%;width:72%;height:74%}
.lx .z-box>.a-car{left:5%;width:90%}
.lx .gr .z-box{background:rgba(243,239,231,.06)}
.lx .z-bt .x3{margin-top:18px}.lx .z-bt .x2{margin-top:20px;max-width:11em}.lx .z-bt .tx{margin-top:14px}.lx .z-bt .tl{margin-top:22px}
.lx .gr .lab{color:rgba(243,239,231,.62)}.lx .gr .lab i{color:var(--paper)}
.lx .z-bh .x2{margin-top:20px;max-width:14em}
.lx .z-gby{display:flex;align-items:center;gap:16px}.lx .z-gby img{flex:none}
/* ---------- doors (23) */
.lx .z-stage{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--paper)}
.lx .z-back{position:absolute;inset:0;background:#1d2420}
.lx .z-back>.z-bg{position:absolute;inset:0}
.lx .z-door{position:absolute;top:0;bottom:0;width:50.1%;background:var(--paper);z-index:2}
.lx .z-dl{left:0}.lx .z-dr{right:0}
.lx .z-dp{position:absolute;top:16px;bottom:16px;width:58%}
.lx .z-dl .z-dp{left:0;border-top-left-radius:0;border-bottom-left-radius:0}.lx .z-dr .z-dp{right:0;border-top-right-radius:0;border-bottom-right-radius:0}
.lx .z-mid{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 31%;pointer-events:none}
.lx .z-mid .bt{pointer-events:auto;justify-content:center;margin-top:40px}.lx .z-mid .bt .pb{min-width:200px}
.lx .z-mid img{width:clamp(88px,8vw,120px);height:auto}
.lx .z-mid .x1{margin-top:32px;font-size:calc(var(--xk)*clamp(40px,4.6vw,76px));white-space:nowrap}
.lx .z-mid .ld{margin-top:20px}
.lx .z-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding-bottom:clamp(40px,7vh,72px)}
.lx .z-cap .x1{margin-top:16px;max-width:9em}.lx .z-cap .bt{margin-top:32px}
.lx .z-ctr{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:64px var(--gut) 0}
.lx .z-ctr .x1{margin-top:24px;max-width:11em}.lx .z-ctr .ld{margin:20px auto 0}.lx .z-ctr .bt{justify-content:center;margin-top:36px}
.lx .z-sc2{background:radial-gradient(ellipse 62% 58% at 50% 52%,rgba(12,16,14,.52),rgba(12,16,14,.14)),linear-gradient(180deg,rgba(12,16,14,.42),rgba(12,16,14,0) 26%)}
.lx .z-gq{position:absolute;inset:0;display:flex;align-items:center}
.lx .z-gq .wrap{display:flex;flex-direction:column;align-items:center;text-align:center}
.lx .z-gq .xq{font-size:calc(var(--xk)*clamp(34px,5.6vw,92px));line-height:1.06;max-width:14.5em;color:var(--paper);text-wrap:balance}
.lx .z-gq .z-gby{margin-top:clamp(36px,5vh,56px);flex-direction:column;gap:14px}.lx .z-gq .z-gby img{width:64px;height:auto}
.lx .z-back .z-cols{top:-30vh}
.lx .z-doors[data-rv="collage"] .z-back{background:var(--paper)}
@media(max-width:1100px){.lx .z-mid{padding:0 30%}.lx .z-mid .bt{flex-direction:column}}
@media(max-width:900px){.lx .z-dp{top:auto;bottom:0;width:100%;height:44%;border-radius:0!important}.lx .z-mid{justify-content:flex-start;padding:40px 20px 0}.lx .z-mid .x1{white-space:normal}.lx .z-mid img{width:72px}.lx .z-mid .bt{flex-direction:row}}
@media(max-width:640px){.lx .z-mid .x1{margin-top:20px}.lx .z-mid .bt{margin-top:28px}.lx .z-gq .xq{font-size:calc(var(--xk)*36px)}}
/* ---------- photo with words in the middle (28) */
.lx .z-pt{position:relative;height:100svh;min-height:620px;max-height:1000px;overflow:hidden;background:#1d2420}
.lx .z-pt>.z-bg{position:absolute;inset:0;border-radius:0}
.lx .z-pt .z-ctr{padding-top:0}
/* ---------- words that light up (28) */
.lx .z-stm{margin-top:28px;font-size:calc(var(--xk)*clamp(30px,3.8vw,58px));line-height:1.16;color:inherit;text-wrap:pretty}
.lx .z-stm p+p{margin-top:.6em}
.lx .z-words .z-stm{color:var(--ink)}
.lx .z-gw{padding:clamp(80px,9vw,128px) 0}
.lx .z-gw .z-stm{color:var(--paper)}
.lx .z-gwq{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end;margin-top:clamp(56px,6vw,88px);padding-top:40px;border-top:1px solid rgba(243,239,231,.22)}
.lx .z-gwq .x3{max-width:30em;color:var(--paper)}
@media(max-width:900px){.lx .z-gwq{grid-template-columns:1fr;gap:28px}}
/* ---------- three photos (28) */
.lx .z-three{position:relative;padding:40px 0 48px}
.lx .z-s3{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:16px;align-items:center}
.lx .z-s3>.a,.lx .z-s3>.c,.lx .z-f.a>.ph,.lx .z-f.c>.ph{aspect-ratio:3/4}.lx .z-s3>.b,.lx .z-f.b>.ph{aspect-ratio:4/5}
.lx .z-tl{padding:clamp(120px,16vh,180px) 0;overflow:hidden}
.lx .z-tl .z-rows{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:0;display:flex;flex-direction:column;gap:2vh}
.lx .z-tl .z-s3{position:relative;z-index:1;max-width:1080px;gap:5vw}
.lx .z-tf .z-s3{align-items:start}
.lx .z-fig{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-top:24px}
.lx .z-fig .nb{font-size:calc(var(--xk)*clamp(72px,7vw,112px))}.lx .z-fig .ey{color:var(--ink-2);max-width:20em}.lx .z-fig .tl{margin-top:6px}
@media(max-width:640px){.lx .z-s3{grid-template-columns:1fr 1fr}.lx .z-s3>.b{display:none}.lx .z-tl .z-s3{gap:12px}
 .lx .z-tf .z-s3{grid-template-columns:1fr;gap:48px}.lx .z-tf .z-f>.ph{aspect-ratio:4/3!important}
 .lx .z-tl{padding:72px 0}.lx .z-tl .z-rows{position:relative;top:auto;transform:none;margin-bottom:40px}}
/* ---------- figures (29) */
.lx .z-figs{padding:clamp(72px,8vw,120px) 0}
.lx .z-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.lx .z-sx{padding:32px 32px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:16px}.lx .z-sx+.z-sx{padding-left:32px;border-left:1px solid var(--hair)}
.lx .z-sx .nb{font-size:calc(var(--xk)*clamp(96px,10vw,160px))}
.lx .z-sx .ey{color:var(--ink-2);max-width:24em}
.lx .gr .z-sx+.z-sx{border-left-color:rgba(243,239,231,.22)}.lx .gr .z-sx .ey{color:rgba(243,239,231,.78)}
.lx .z-figs.gr .q-hr{background-image:linear-gradient(rgba(243,239,231,.22),rgba(243,239,231,.22))}
.lx .z-mfs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.lx .z-mf{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.lx .z-mdn{position:relative;width:clamp(180px,17vw,236px);aspect-ratio:1;display:grid;place-items:center}
.lx .z-mdn .z-ring{position:absolute;inset:0;width:100%;height:100%;stroke:var(--green);stroke-width:1.2}.lx .z-mdn .z-ring .fn{stroke-width:.8}
.lx .z-mdn .nb{font-size:calc(var(--xk)*clamp(64px,6vw,92px));color:var(--ink)}
.lx .z-mf .ey{color:var(--ink-2);max-width:18em}
@media(max-width:900px){.lx .z-stats,.lx .z-mfs{grid-template-columns:1fr}.lx .z-sx,.lx .z-sx+.z-sx{padding:28px 0;border-left:0;border-bottom:1px solid var(--hair)}.lx .gr .z-sx{border-bottom-color:rgba(243,239,231,.22)}.lx .z-mfs{gap:56px}}
/* ---------- the moving lines (32) */
.lx .z-lines{padding:clamp(80px,12vh,140px) 0;overflow:hidden}
.lx .z-row>div{display:flex;width:max-content;white-space:nowrap;font-family:var(--f-x);font-weight:var(--xw);letter-spacing:var(--xls);font-size:calc(var(--xk)*clamp(64px,10vw,168px));line-height:1.06}
.lx .z-row span,.lx .z-row i{padding:0 .28em}.lx .z-row i{font-style:normal;color:var(--stone)}
.lx .z-row.r1{color:var(--ink)}.lx .z-row.r2{color:var(--green)}
/* ---------- buy, restore, sell (31, drawn) */
.lx .z-by{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(48px,6vw,72px)}
.lx .z-bay .z-bt{padding:28px 8px 0 0}
.lx .z-gd{position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(180deg,var(--card) 0 1px,var(--paper) 1px 38px,var(--hair) 38px 39px)}
.lx .z-garage.gr .z-gd{background:repeating-linear-gradient(180deg,#14473a 0 1px,var(--green) 1px 38px,rgba(243,239,231,.16) 38px 39px)}
.lx .z-scrub .z-by{gap:0;border-top:1px solid var(--hair)}
.lx .z-scrub .z-bay{padding:40px 32px 0}.lx .z-scrub .z-bay:first-child{padding-left:0}.lx .z-scrub .z-bay:last-child{padding-right:0}.lx .z-scrub .z-bay+.z-bay{border-left:1px solid var(--hair)}
.lx .z-scrub .z-box{background:none}.lx .z-scrub .z-box>.art{left:6%;top:8%;width:88%;height:84%}.lx .z-scrub .z-box>.a-car{left:0;width:100%}
@media(max-width:900px){.lx .z-by{grid-template-columns:1fr;gap:48px}.lx .z-scrub .z-bay,.lx .z-scrub .z-bay+.z-bay{padding:32px 0 40px;border-left:0;border-bottom:1px solid var(--hair)}}
/* one at a time */
.lx .z-ps{height:100svh;min-height:600px;display:flex;align-items:center}
.lx .z-pg{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center;width:100%}
.lx .z-pa{aspect-ratio:5/4;padding:0}
.lx .z-pi{position:absolute;inset:12% 14%}.lx .z-pi>.art{position:absolute;left:0;top:0;width:100%;height:100%}.lx .z-pi>.a-car{left:-10%;width:120%}
.lx .z-pr{display:flex;flex-direction:column;justify-content:center;min-height:min(520px,60svh)}
.lx .z-ptx{position:relative;margin-top:8px;min-height:340px}
.lx .z-pj{position:absolute;left:0;right:0;top:0}
.lx .z-pn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
.lx .z-pn span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--stone)}.lx .z-pn b{font-weight:500;color:var(--green)}
.lx .z-pn u{display:block;height:1px;margin-top:12px;background:var(--hair);position:relative}.lx .z-pn i{position:absolute;inset:0;background:var(--green);transform-origin:left;transform:scaleX(0)}
@media(max-width:900px){.lx .z-ps{padding-top:56px}.lx .z-pg{grid-template-columns:1fr;gap:24px}.lx .z-pa{aspect-ratio:4/3}.lx .z-pr{min-height:0}.lx .z-ptx{min-height:250px}.lx .z-pn{order:-1;margin:0 0 20px}}
/* sideways */
.lx .z-side{padding:clamp(56px,7vh,88px) 0;overflow:hidden}
.lx .z-sh{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.lx .z-sn{font-size:13px;color:var(--stone);font-variant-numeric:tabular-nums;white-space:nowrap}.lx .z-sn b{color:var(--ink);font-weight:500}
.lx .z-sv{margin-top:44px;overflow:hidden}
.lx .z-st{display:flex;gap:24px;width:max-content;padding:0 max(var(--gut),calc((100vw - 1280px) / 2 + var(--gut)))}
.lx .z-sp{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;width:min(1080px,78vw)}
.lx .z-spb{margin-top:40px;height:1px;background:var(--hair);position:relative}.lx .z-spb u{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0)}
@media(max-width:900px){.lx .z-sh{flex-direction:column;align-items:flex-start;gap:20px}.lx .z-sv{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.lx .z-sv::-webkit-scrollbar{display:none}
 .lx .z-st{padding:0 var(--gut);gap:16px}.lx .z-sp{grid-template-columns:1fr;gap:24px;width:82vw;scroll-snap-align:start;align-items:start}}
/* chapters */
.lx .z-ch{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center;margin-top:clamp(72px,9vw,128px)}
.lx .z-ch.fl{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.lx .z-ch.fl>.z-box{order:2}
.lx .z-num{display:block;font-family:var(--f-x);font-weight:var(--xw);font-size:calc(var(--xk)*clamp(56px,5vw,80px));line-height:1;color:var(--green);font-variant-numeric:lining-nums}
.lx .z-ct .lab{display:none}
@media(max-width:900px){.lx .z-ch,.lx .z-ch.fl{grid-template-columns:1fr;gap:28px}.lx .z-ch.fl>.z-box{order:0}}
/* medallions */
.lx .z-medal{overflow:clip}.lx .z-medal .z-by{gap:32px}
@media(max-width:640px){.lx .z-med{width:min(100%,300px)}}
.lx .z-mb{display:flex;flex-direction:column;align-items:center;text-align:center}
.lx .z-med{position:relative;width:min(100%,340px);aspect-ratio:1}
.lx .z-med .z-ring{position:absolute;inset:0;width:100%;height:100%;stroke:var(--green);stroke-width:1.1;overflow:visible}.lx .z-med .z-ring .fn{stroke-width:.7}
.lx .z-med text{fill:var(--green);stroke:none;font:500 11.5px var(--f-n);letter-spacing:.2em}
.lx .z-mi{position:absolute;inset:27%}.lx .z-mi>.art{position:absolute;left:0;top:0;width:100%;height:100%}
.lx .z-mi>.a-car{left:-22%;width:144%}
.lx .z-mb .z-bt{display:flex;flex-direction:column;align-items:center;padding-top:28px}.lx .z-mb .tx{margin-left:auto;margin-right:auto}.lx .z-mb .lab{justify-content:center}
/* the big door */
.lx .z-bds{position:relative;height:100svh;min-height:680px;overflow:hidden;display:flex;align-items:center}
.lx .z-bdi{width:100%}
.lx .z-bdoor .z-box{aspect-ratio:16/10}
.lx .z-bdoor .z-by{margin-top:clamp(28px,4vh,48px)}
.lx .z-bdoor .z-bt{padding-top:20px}.lx .z-bdoor .z-bt .tx{font-size:15px;line-height:24px}
.lx .z-bdd{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:repeating-linear-gradient(180deg,var(--card) 0 1px,var(--paper) 1px 54px,var(--hair) 54px 55px);border-bottom:1px solid var(--hair)}
.lx .z-bdd img{width:clamp(80px,8vw,112px);height:auto}
.lx .z-hdl{position:absolute;left:50%;bottom:10%;width:150px;height:8px;margin-left:-75px;border-radius:4px;border:1px solid var(--hair);background:var(--bone)}
@media(max-width:900px){.lx .z-bds{height:auto;min-height:0;display:block;padding:88px 0}}
/* ---------- the road (39) */
.lx .z-road{position:relative;padding:clamp(96px,12vh,140px) 0 var(--sp)}
.lx .z-rd{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.lx .z-rd path{fill:none;stroke-linecap:round;stroke-linejoin:round}.lx .z-rb{stroke:var(--hair);stroke-width:1.5}.lx .z-rl{stroke:var(--green);stroke-width:1.5}.lx .z-rdot{fill:var(--paper);stroke:var(--green);stroke-width:1.5}
.lx .z-rh{position:relative;z-index:1;text-align:center;margin-bottom:clamp(72px,10vh,120px)}.lx .z-rh .x2{margin-left:auto;margin-right:auto}
.lx .z-rr{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr);align-items:center}
.lx .z-rr+.z-rr{margin-top:clamp(96px,14vh,168px)}
.lx .z-r1{grid-column:1;grid-row:1}.lx .z-r2{grid-column:3;grid-row:1}
.lx .z-rp{aspect-ratio:4/5}
.lx .z-rs{font-size:calc(var(--xk)*clamp(26px,2.6vw,40px));color:var(--ink)}
.lx .z-r1 .z-box+.z-bt,.lx .z-r2 .z-box+.z-bt{padding-top:28px}
.lx .z-rf .z-sx{padding:22px 0;border-left:0!important;border-top:1px solid var(--hair);flex-direction:row;align-items:baseline;gap:20px;flex-wrap:wrap}
.lx .z-rf .z-sx .nb{font-size:calc(var(--xk)*clamp(56px,5vw,84px));min-width:1.3em}.lx .z-rf .z-sx .ey{flex:1;min-width:12em}
@media(max-width:900px){.lx .z-rr,.lx .z-rr.fl{grid-template-columns:1fr;padding-left:36px;gap:32px}.lx .z-r1,.lx .z-r2{grid-column:1;grid-row:auto}.lx .z-rh{text-align:left;padding-left:36px}.lx .z-rp{aspect-ratio:4/3}}
/* ---------- collage (34) */
.lx .z-col{position:relative;height:calc(100svh - 72px);min-height:600px;overflow:hidden}
.lx .z-cols{position:absolute;left:0;right:0;top:-55vh;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:0 16px}
.lx .z-c{display:flex;flex-direction:column;gap:16px}
.lx .z-c .ph{aspect-ratio:3/4;flex:none}
.lx .z-c.k1,.lx .z-c.k3{margin-top:-30%}
.lx .z-card{position:absolute;inset:0;margin:auto;height:fit-content;z-index:2;width:min(580px,calc(100% - 48px));background:var(--paper);border-radius:var(--br);padding:44px 48px 48px;text-align:center;display:flex;flex-direction:column;align-items:center;box-shadow:0 30px 80px -40px rgba(22,22,20,.45)}
.lx .z-card img{width:56px;height:56px}
.lx .z-card .ey{margin-top:20px}
.lx .z-card .x2{margin-top:14px;max-width:11em}.lx .z-card img+.x2{margin-top:22px}.lx .z-card .ld{margin-top:16px}
.lx .z-card .bt{justify-content:center;margin-top:30px;width:100%}.lx .z-card .bt .pb{min-width:0;flex:1 1 0}
.lx .z-back .z-card{z-index:1}
@media(max-width:900px){.lx .z-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 10px}.lx .z-c{gap:10px}.lx .z-c.k2,.lx .z-c.k3{display:none}.lx .z-card{padding:30px 22px 32px}}
/* ---------- green quote (30, tightened) */
.lx .z-quote{padding:clamp(72px,8vw,112px) 0}
.lx .z-qg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end}
.lx .z-qq{font-size:calc(var(--xk)*clamp(34px,4vw,64px));line-height:1.1;max-width:19em;color:var(--paper)}
.lx .z-quote .z-gby{flex-direction:column;align-items:flex-end;text-align:right;gap:16px}.lx .z-quote .z-gby .ey{max-width:13em}
@media(max-width:900px){.lx .z-qg{grid-template-columns:1fr;gap:32px}.lx .z-quote .z-gby{flex-direction:row;align-items:center;text-align:left}}

/* ================================================================ the flow pages (2026-10-12 09:22) */
/* ---------- the green promise behind the doors: the sentence alone */
.lx .f-gq{position:absolute;inset:0;display:flex;align-items:center}
.lx .f-gq .wrap{width:100%}
.lx .f-pq{font-family:var(--f-x);font-weight:var(--xw);letter-spacing:var(--xls);font-size:calc(var(--xk)*clamp(34px,5.4vw,88px));line-height:1.06;max-width:14.5em;margin:0 auto;text-align:center;color:var(--paper);text-wrap:balance}
.lx .f-doors[data-rv="left"] .f-pq{text-align:left;margin:0;max-width:12.5em;font-size:calc(var(--xk)*clamp(40px,6.6vw,112px));line-height:1.02}
.lx .f-doors[data-rv="scale"] .z-back{background:var(--paper)}
@media(max-width:640px){.lx .f-pq,.lx .f-doors[data-rv="left"] .f-pq{font-size:calc(var(--xk)*38px)}}
/* ---------- About us along the road */
.lx .f-ab{position:relative;padding:clamp(104px,13vh,152px) 0 var(--sp);overflow:hidden}
.lx .f-rd{position:absolute;left:0;top:0;width:100%;overflow:visible;pointer-events:none;z-index:0}
.lx .f-rd path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lx .f-rb{stroke:var(--hair);stroke-width:1.5}.lx .f-rl{stroke:var(--green);stroke-width:1.5}
.lx .f-re{stroke:var(--hair);stroke-width:50}.lx .f-rw{stroke:var(--card);stroke-width:48}.lx .f-rc{stroke:var(--stone);stroke-width:1.3;stroke-dasharray:9 13;opacity:.55;stroke-linecap:butt!important}
.lx .f-ab[data-style="lane"] .f-rl{stroke-width:2}
.lx .f-dot{fill:var(--paper);stroke:var(--green);stroke-width:1.5}
.lx .f-car rect,.lx .f-car path{fill:var(--paper);stroke:var(--green);stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round}.lx .f-car .f-gl1{fill:rgba(14,59,46,.16)}
.lx .f-ah{position:relative;z-index:1}.lx .f-ah .x2{margin-top:20px;max-width:10em}
.lx .f-ab[data-style="mid"] .f-ah{text-align:center}.lx .f-ab[data-style="mid"] .f-ah .x2{margin-left:auto;margin-right:auto}
.lx .f-rr{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:48px;align-items:center;margin-top:clamp(88px,13vh,152px)}
.lx .f-ah+.f-rr{margin-top:clamp(64px,9vh,104px)}
.lx .f-rt{grid-column:1;grid-row:1}.lx .f-rs,.lx .f-med{grid-column:2;grid-row:1;justify-self:center}
.lx .f-rr.fl .f-rt{grid-column:2}.lx .f-rr.fl .f-rs,.lx .f-rr.fl .f-med{grid-column:1}
.lx .f-rr.has-med .f-rs{display:none}
.lx .f-ab[data-style="mid"] .f-rr{grid-template-columns:minmax(0,1fr) 160px minmax(0,1fr)}
.lx .f-ab[data-style="mid"] .f-rt{grid-column:1;text-align:right}.lx .f-ab[data-style="mid"] .f-rt .xq{margin-left:auto}.lx .f-ab[data-style="mid"] .f-35{justify-content:flex-end}
.lx .f-ab[data-style="mid"] .f-rr.fl .f-rt{grid-column:3;text-align:left}.lx .f-ab[data-style="mid"] .f-rr.fl .f-rt .xq{margin-left:0}.lx .f-ab[data-style="mid"] .f-rr.fl .f-35{justify-content:flex-start}
.lx .f-ab[data-style="mid"] .f-rs,.lx .f-ab[data-style="mid"] .f-med{grid-column:2!important}
.lx .f-st{font-size:calc(var(--xk)*clamp(30px,3.4vw,52px));line-height:1.14;max-width:13em;color:var(--ink)}
.lx .f-mk{display:block;width:16px;height:16px;border-radius:50%;background:var(--paper);border:1.5px solid var(--stone);transition:background-color .5s,border-color .5s}
.lx .f-rr.on .f-mk{background:var(--green);border-color:var(--green)}
.lx .f-ic{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--paper);border:1px solid var(--hair);transition:border-color .6s}
.lx .f-rr.on .f-ic{border-color:var(--green)}
.lx .f-ic .art{width:44px;height:44px;stroke-width:2.2}
.lx .f-35{display:flex;align-items:flex-end;gap:20px;margin-bottom:18px}
.lx .f-35 .nb{font-size:calc(var(--xk)*clamp(120px,12.5vw,196px));color:var(--green)}
.lx .f-35 .ey{padding-bottom:.9em;max-width:11em;color:var(--ink-2)}
.lx .f-o{position:relative;display:block}.lx .f-o .nb{display:block}
.lx .f-o1{color:transparent;-webkit-text-stroke:1.3px var(--green)}
.lx .f-o2{position:absolute;left:0;top:0;clip-path:inset(100% 0 0 0)}
.lx .f-med{position:relative;width:clamp(200px,17vw,244px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:var(--paper)}
.lx .f-med svg{position:absolute;inset:0;width:100%;height:100%;stroke:var(--green);stroke-width:1.1;overflow:visible}.lx .f-med .fn{stroke-width:.7}
.lx .f-med text{fill:var(--stone);stroke:none;font:500 10.5px var(--f-n);letter-spacing:.2em;transition:fill 1.2s}.lx .f-rr.on .f-med text{fill:var(--green)}
.lx .f-med .f-mb{stroke:var(--hair);stroke-width:1}
.lx .f-med .nb{position:relative;font-size:calc(var(--xk)*clamp(68px,6vw,92px));color:var(--green)}
@media(max-width:900px){
 .lx .f-ab .f-rr,.lx .f-ab[data-style] .f-rr{grid-template-columns:40px minmax(0,1fr);column-gap:18px;align-items:start}
 .lx .f-ab .f-rt,.lx .f-ab[data-style] .f-rt,.lx .f-ab[data-style] .f-rr.fl .f-rt{grid-column:2;text-align:left}
 .lx .f-ab[data-style] .f-rt .xq{margin-left:0}.lx .f-ab[data-style] .f-35{justify-content:flex-start}
 .lx .f-ab .f-rs,.lx .f-ab[data-style] .f-rs{grid-column:1!important;grid-row:1 / span 2;justify-self:center;padding-top:6px}
 .lx .f-ab .f-rr.has-med .f-rs{display:block}
 .lx .f-ab .f-med,.lx .f-ab[data-style] .f-med{grid-column:2!important;grid-row:1;justify-self:start;width:176px;margin-bottom:24px}
 .lx .f-ab .f-rr.has-med .f-rt{grid-row:2}
 .lx .f-ab .f-ah,.lx .f-ab[data-style="mid"] .f-ah{padding-left:58px;text-align:left}.lx .f-ab[data-style="mid"] .f-ah .x2{margin-left:0}
 .lx .f-st{font-size:calc(var(--xk)*30px)}
 .lx .f-ic{width:40px;height:40px}.lx .f-ic .art{width:24px;height:24px;stroke-width:2.8}
 .lx .f-mk{margin-top:6px}
 .lx .f-re{stroke-width:26}.lx .f-rw{stroke-width:24}
 .lx .f-35 .nb{font-size:calc(var(--xk)*112px)}
}
/* ---------- What we do: green, sideways */
@media(min-width:901px){.lx .f-side{min-height:100svh;display:flex;flex-direction:column;justify-content:center}.lx .f-side>.wrap{width:100%}}
.lx .f-side .z-box{background:rgba(243,239,231,.06)}
.lx .f-side .z-sn{color:rgba(243,239,231,.6)}.lx .f-side .z-sn b{color:var(--paper)}
.lx .f-side .z-spb{background:rgba(243,239,231,.2)}.lx .f-side .z-spb u{background:var(--paper)}
.lx .f-side .z-gd{position:absolute;inset:0;z-index:2;background:repeating-linear-gradient(180deg,rgba(243,239,231,.14) 0 1px,#134535 1px 38px,rgba(5,24,18,.5) 38px 39px)}
.lx .f-side[data-style="bare"] .z-box,.lx .f-side[data-style="num"] .z-box,.lx .f-side[data-style="ground"] .z-box{background:none}
.lx .f-side[data-style="bare"] .z-box>.art,.lx .f-side[data-style="ground"] .z-box>.art{left:6%;top:8%;width:88%;height:84%}
.lx .f-side[data-style="bare"] .z-box>.a-car,.lx .f-side[data-style="ground"] .z-box>.a-car{left:-2%;width:104%}
.lx .f-bn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-bottom:3%;font-family:var(--f-x);font-weight:var(--xw);font-size:clamp(240px,25vw,400px);line-height:1;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(243,239,231,.4);font-variant-numeric:lining-nums;z-index:0}
.lx .f-side[data-style="num"] .z-box{overflow:visible}
.lx .f-side[data-style="num"] .z-box>.art{z-index:1}
.lx .f-side .z-st{position:relative}.lx .f-side[data-style="ground"] .z-box{overflow:visible}
.lx .f-gl{position:absolute;left:0;right:0;height:1px;background:rgba(243,239,231,.22);top:70%}
.lx .f-gl u{position:absolute;left:0;top:0;width:100%;height:1px;background:var(--paper);transform-origin:left;transform:scaleX(0)}
.lx .f-gl b{position:absolute;top:-6px;left:0;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:var(--green);border:1.5px solid var(--paper)}
.lx .f-side[data-style="ground"] .z-sp{align-items:end}.lx .f-side[data-style="ground"] .z-bt{padding-bottom:calc(var(--gb,90px) + 32px)}
.lx .f-side[data-style="full"] .z-st{padding:0;gap:0}
.lx .f-full{width:100vw;display:block!important}
.lx .f-fw{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5vw,80px);align-items:center}
.lx .f-full .z-box{width:min(100%,calc(56svh*4/3))}
@media(max-width:900px){.lx .f-side .z-sv{scroll-padding-inline:var(--gut)}.lx .f-gl{display:none}.lx .f-side[data-style="ground"] .z-bt{padding-bottom:0}.lx .f-side[data-style="full"] .z-st{padding:0 var(--gut);gap:16px}.lx .f-full{width:82vw}.lx .f-fw{grid-template-columns:1fr;gap:24px;padding:0}
 .lx .f-bn{font-size:150px}}
/* ---------- the moving lines on green, or with an outlined second row */
.lx .f-ln.gr .z-row.r1{color:var(--paper)}.lx .f-ln.gr .z-row.r2{color:transparent;-webkit-text-stroke:1px rgba(243,239,231,.7)}.lx .f-ln.gr .z-row i{color:rgba(243,239,231,.4)}
.lx .f-ln.f-ol .z-row.r2{color:transparent;-webkit-text-stroke:1.2px var(--green)}
.lx .f-side+.f-ln.gr{padding-top:clamp(24px,4vh,48px)}
.lx .f-ln[data-skew] .z-row{will-change:transform}
/* ---------- three cars */
.lx .f-ch{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.lx .f-ch .x2{margin-top:20px;max-width:12em}
.lx .f-cg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(40px,5vw,64px)}
.lx .f-cd{display:flex;flex-direction:column;color:var(--ink);text-decoration:none;min-width:0}
.lx .f-cd .ph{aspect-ratio:4/3}
.lx .f-cn{margin-top:20px;font-family:var(--f-d);font-weight:500;font-size:24px;line-height:30px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx .f-cpr{margin-top:2px;font-family:var(--f-n);font-size:15px;line-height:26px;font-weight:500;font-variant-numeric:lining-nums}
.lx .f-cl{font-size:14px;line-height:22px;color:var(--stone);font-variant-numeric:lining-nums}
.lx .f-cd:hover .f-cn{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.lx .f-ln+.f-cars{padding-top:calc(var(--sp)*.45)}.lx .f-cars{padding-bottom:calc(var(--sp)*.55)}.lx .f-cars+.fm{padding-top:calc(var(--sp)*.6)}
@media(max-width:900px){.lx .f-cg{grid-template-columns:1fr;gap:40px}.lx .f-ch{flex-direction:column;align-items:flex-start}}

/* ================================================================ What we do, redrawn (18:56): photos, no drawings, one grid */
.lx .ww{position:relative}
.lx .ww .x3{color:var(--paper)}
.lx .ww .ww-b .tx,.lx .ww .ww-b p.tx{max-width:34em;margin-top:12px}
.lx .ww .ww-b .tl{margin-top:22px}
.lx .ww-big{font-family:var(--f-d);font-weight:500;text-transform:uppercase;letter-spacing:.02em;line-height:.86;color:var(--paper)}
.lx .ww .ph{background:#0A2C22}
.lx .ww .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:where(.lx .ww) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:where(.lx .ww) button:focus-visible{outline:1px solid rgba(243,239,231,.7);outline-offset:6px;border-radius:2px}

/* ---------- lit: the words on the left, the photo and its words on the right; the page holds while they change */
.lx .ww-lit .ww-m{display:none}
@media(min-width:901px){
 .lx .ww-lit{height:calc(100svh - var(--hdh));min-height:540px;padding:clamp(40px,7.5vh,80px) 0;overflow:hidden}
 .lx .ww-lit .ww-g{height:100%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(48px,6vw,104px)}
 .lx .ww-lit .ww-l{display:flex;flex-direction:column;justify-content:space-between;gap:32px;min-height:0}
 .lx .ww-ix{list-style:none;display:flex;flex-direction:column;gap:clamp(4px,1vh,12px)}
 .lx .ww-ix li:first-child .ww-w{margin-top:-.12em}  /* the capitals' tops meet the photo's top */
 .lx .ww-w{display:block;font-family:var(--f-d);font-weight:500;font-size:clamp(64px,min(7.4vw,12vh),118px);line-height:.86;letter-spacing:.02em;text-transform:uppercase;text-align:left;
  color:rgba(243,239,231,.2);transition:color .6s cubic-bezier(.16,1,.3,1)}
 @media(hover:hover) and (pointer:fine){.lx .ww-w:hover{color:rgba(243,239,231,.48)}}
 .lx .ww-w.on,.lx .ww-w.on:hover{color:var(--paper)}
 .lx .ww-lit .ww-r{display:grid;min-height:0}
 .lx .ww-ph{position:relative;min-height:0;height:100%;border-radius:var(--pr);overflow:hidden;background:#0A2C22}
 .lx .ww-ph .ww-f{position:absolute;inset:0;border-radius:0;visibility:hidden}
 .lx .ww-ph .ww-f.on{visibility:visible}
 .lx .ww-ph .ww-f>i{will-change:transform}
 .lx .ww-lit .ww-tx{display:grid}
 .lx .ww-lit .ww-b{grid-area:1/1;align-self:end;visibility:hidden;max-width:30em}
 .lx .ww-lit .ww-b.on{visibility:visible}
 .lx .ww-lit .ww-b .tl{margin-bottom:-9px}
}
@media(max-width:900px){
 .lx .ww-lit{padding:var(--sp) 0}
 .lx .ww-lit .ww-ix,.lx .ww-lit .ww-r,.lx .ww-lit .ww-tx{display:none}
 .lx .ww-lit .ww-m{display:flex;flex-direction:column;gap:clamp(56px,9vw,80px)}
 .lx .ww-mw{font-family:var(--f-d);font-weight:500;font-size:clamp(64px,19vw,120px);line-height:.86;letter-spacing:.02em;text-transform:uppercase;color:rgba(243,239,231,.22);transition:color .6s cubic-bezier(.16,1,.3,1);margin:0 0 20px -.04em}
 .lx .ww-mi.on .ww-mw{color:var(--paper)}
 .lx .ww-mph{aspect-ratio:4/3;margin-bottom:24px}
}

/* ---------- side: one photo and its words per screen, sideways; the three words above are the index */
.lx .ww-side{overflow:hidden}
.lx .ws-h{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.lx .ws-ix{display:flex;gap:28px;padding-bottom:.5em}
.lx .ws-x{font:500 11.5px/1 var(--f-n);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,239,231,.45);padding:10px 0;position:relative;transition:color .3s}
.lx .ws-x::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.lx .ws-x.on{color:var(--paper)}.lx .ws-x.on::after{transform:none}
@media(hover:hover) and (pointer:fine){.lx .ws-x:hover{color:rgba(243,239,231,.8)}}
.lx .ws-v{overflow:hidden}
.lx .ws-s{display:flex;width:max-content}
.lx .ws-p{width:var(--pw,100vw);flex:0 0 auto}
.lx .ws-pw{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,88px);align-items:end}
.lx .ws-ph{aspect-ratio:4/3;width:100%}
.lx .ws-ph>i{inset:0 -6%}
.lx .ws-t .ww-big{font-size:clamp(64px,min(7vw,11vh),120px);margin:0 0 clamp(20px,3vh,32px) -.04em}
@media(min-width:901px){.lx .ws-pw{align-items:stretch}.lx .ws-t{display:flex;flex-direction:column;justify-content:space-between}.lx .ws-t .ww-big{margin-top:-.12em}}
@media(min-width:901px){
 .lx .ww-side{height:calc(100svh - var(--hdh));min-height:540px;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,4.5vh,48px);padding:clamp(32px,5vh,56px) 0}
 .lx .ww-side>.wrap{width:100%}
 .lx .ws-ph{width:min(100%,calc((100svh - var(--hdh) - 230px)*4/3))}
}
@media(max-width:900px){
 .lx .ww-side{padding:var(--sp) 0}
 .lx .ws-h{flex-direction:column;align-items:flex-start;gap:20px}
 .lx .ws-v{margin-top:32px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}.lx .ws-v::-webkit-scrollbar{display:none}
 .lx .ws-p{scroll-snap-align:start}
 .lx .ws-pw{grid-template-columns:1fr;row-gap:24px}
 .lx .ws-ph>i{inset:0}
}

/* ---------- rows: three wide rows on fine lines; over a row the photo comes to the pointer */
.lx .ww-rows{padding:var(--sp) 0}
.lx .wr-h{margin-bottom:clamp(32px,5vh,56px)}
.lx .wr-l{list-style:none;border-bottom:1px solid rgba(243,239,231,.18)}
.lx .wr-i{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,88px);align-items:end;padding:clamp(28px,4.5vh,44px) 0;border-top:1px solid rgba(243,239,231,.18)}
.lx .wr-w{font-size:clamp(72px,10.5vw,168px);color:rgba(243,239,231,.24);transition:color .6s cubic-bezier(.16,1,.3,1);margin-left:-.04em}
.lx .wr-i.on .wr-w{color:var(--paper)}
.lx .wr-i .ph{display:none}
.lx .wr-i .ww-b{padding-bottom:.4em}
.lx .wr-fl{position:absolute;left:0;top:0;width:clamp(240px,22vw,340px);aspect-ratio:4/3;border-radius:var(--pr);overflow:hidden;pointer-events:none;z-index:2;
 opacity:0;transform:translate3d(var(--x,0),var(--y,0),0) scale(.94);transition:opacity .3s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1);box-shadow:0 30px 60px -24px rgba(0,0,0,.5)}
.lx .wr-fl.on{opacity:1;transform:translate3d(var(--x,0),var(--y,0),0) scale(1)}
.lx .wr-fl>i{position:absolute;inset:0;background-size:cover;opacity:0;transition:opacity .35s}
.lx .wr-fl>i.on{opacity:1}
@media(hover:none),(pointer:coarse),(max-width:900px){
 .lx .wr-fl{display:none}
 .lx .wr-i{grid-template-columns:1fr;row-gap:20px}
 .lx .wr-i .ph{display:block;aspect-ratio:4/3}
 .lx .wr-w{font-size:clamp(64px,19vw,120px)}
}
html.rm .lx .ww-w,html.rm .lx .ww-mw,html.rm .lx .wr-w{transition:none}

/* ---------- round 4: the drawing beside the words */
.lx .ww-art .ww-ab{position:relative;min-height:0;height:100%}
.lx .ww-art .ww-ab>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* a drawing may mark its phone copy with the class ph; the page's photo frame (.ph) must not style it */
.lx .ww-art svg.wa{background:none;border-radius:0;overflow:visible;isolation:auto}
@media(max-width:900px){.lx .ww-art .ww-ma{aspect-ratio:800/720;margin-bottom:24px}.lx .ww-art .ww-ma>svg{display:block;width:100%;height:100%;overflow:visible}}

/* ================================================================ the final page (2026-10-12 17:23) */
:root{--hdh:73px}
@media(max-width:900px){:root{--hdh:65px}}
/* ---------- tighter spacing between the sections (he found it too much and empty, 18:24) */
.lx.v5,.lx.cx{--sp:clamp(64px,6.4vw,104px)}
@media(max-width:640px){.lx.v5,.lx.cx{--sp:60px}}
.lx.cx .cx-h{padding:clamp(40px,6vh,72px) 0 32px}
.lx.v5 .f-ab{padding-top:clamp(72px,9vh,112px)}
/* ---------- the header stays on screen, with its one button: Contact, in the logo green, opening the contact card */
body.hx .hd.up{transform:none}
.hd .hd-r{gap:28px}
.nv a[href="#visit"]{display:none}
.cta-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px 0 16px;border-radius:var(--br);border:1px solid var(--green);background:var(--green);color:var(--paper);
 font:500 10.5px/1 var(--f-n);letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
 transition:background .25s,border-color .25s,box-shadow .25s,transform .15s}
.cta-b:hover,.cta-b:focus-visible,.cta-b[aria-expanded="true"]{background:#0A2C22;border-color:#0A2C22;outline:none}
.cta-b:active{transform:scale(.97)}
.cta-b .ch-c{width:12px;height:12px}
@media(max-width:900px){.hd .hd-in{gap:12px}.hd .hd-r{gap:16px}.cta-b{height:34px;padding:0 12px 0 14px;gap:7px;font-size:10px;letter-spacing:.13em}.hd .wm{gap:10px}}
@media(max-width:429px){.hd .wm img{width:34px;height:34px}.hd .wm{gap:8px}.hd .wm span{font-size:18px}.hd .hd-r{gap:10px}.cta-b{padding:0 10px 0 12px;font-size:10px;letter-spacing:.1em}}
@media(max-width:389px){.hd .wm span{display:none}}
/* ---------- the arrows: they hop like the Nutgraf menu ball (stretch on take-off, land flat, rebound) and the chevrons
   turn on the Nutgraf toggle's spring, cubic-bezier(.68,-.55,.265,1.55) */
@keyframes ng-hop{
 0%{transform:translate(0,0) scale(1,1);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
 24%{transform:translate(0,var(--hy,-6px)) scale(.72,1.35);animation-timing-function:linear}
 46%{transform:translate(0,calc(var(--hy,-6px)*1.06)) scale(.82,1.15);animation-timing-function:cubic-bezier(.55,0,1,.45)}
 70%{transform:translate(0,1px) scale(1.38,.56);animation-timing-function:cubic-bezier(0,.55,.45,1)}
 84%{transform:translate(0,-2px) scale(.88,1.12);animation-timing-function:cubic-bezier(0,.55,.45,1)}
 93%{transform:translate(0,.4px) scale(.96,1.03);animation-timing-function:ease-in-out}
 100%{transform:translate(0,0) scale(1,1)}}
.ng-h{display:inline-grid;place-items:center;transform-origin:50% 100%}
.ch-c,.cta-b .ch-c,.pbm .ch-c{transition:transform .3s cubic-bezier(.68,-.55,.265,1.55)}
[aria-expanded="true"] .ch-c,.ch.open .ch-c{transform:rotate(180deg)}
.cta-b .ng-h,.pbm .ng-h{--hx:0px;--hx1:0px;--hx2:0px;--hy:-5px}
.cta-b:hover .ng-h,.pbm:hover .ng-h,.ch:not(.open) .ch-b:hover .ch-c{animation:ng-hop .62s both}
.cta-b[aria-expanded="true"] .ng-h,.pbm[aria-expanded="true"] .ng-h{animation:none}
.cta-b.ng-on .ng-h{animation:ng-hop .62s both}
.lx .tl::after,.v5-k.ext::after{display:inline-block;transform-origin:50% 100%}
.lx .tl:hover::after,.lx .tl.r:hover::after{transform:none;animation:ng-hop .62s both}
.lx .tl:not(.r):not(.d):hover::after,.v5-k.ext:hover::after{--hy:-7px}
.v5-k.ext:hover::after{animation:ng-hop .62s both}
html.rm .ng-h,html.rm .tl::after,html.rm .ch-c{animation:none!important;transition:none!important}
/* ---------- Deutsch, until the German pages exist: greyed, with no words added (19:56) */
.lng-m a.soon{color:var(--stone);cursor:default}
.lng-m a.soon:hover{background:none;color:var(--stone)}
/* ---------- round 3 critique (18:56): tap areas, keyboard focus, the map on request */
.lx .v5-coll .f-ch .x2,.lx.cx .cx-h .x1{margin-top:0}
body.look .nv a{padding:12px 0}
.ft-l .ul{display:inline-block;padding:4px 0}
.cta-b:focus-visible,.pbm:focus-visible,.lx .pb:focus-visible,.btn:focus-visible,.lx .tl:focus-visible,
.lng-b:focus-visible,.nv a:focus-visible,.wm:focus-visible,.v5-k:focus-visible,.map-on:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.lx .gr .tl:focus-visible,.lx .gr .pb:focus-visible{outline-color:var(--paper)}
@media(pointer:coarse){
 .lng-b,.cta-b{position:relative}.lng-b::before,.cta-b::before{content:'';position:absolute;inset:-4px -6px}
 .lx .tl{padding-top:17px;margin-top:-17px}
 .ft-l .ul{padding:14px 0;margin:-10px 0}
 .share{min-width:44px;min-height:44px;justify-content:center}
 .expand{width:44px;height:44px}
 .v5-ft .v5-cols{--rg:0px}.v5-c .v5-k{padding:8px 0;background-origin:content-box;background-clip:content-box}.v5-c p+.v5-k{margin-top:0}
}
/* the phone price bar sits over the page end on car pages: leave room so the legal line can be reached */
@media(max-width:900px){body:has(#view .mbar) #visit{padding-bottom:calc(76px + env(safe-area-inset-bottom))}}
.map-off{display:grid}
.map-on{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;border:0;background:var(--bone);cursor:pointer;color:var(--ink);
 font:500 11.5px/1 var(--f-n);letter-spacing:.16em;text-transform:uppercase;transition:color .2s,background .2s}
.map-on small{font:400 13px/1.3 var(--f-n);letter-spacing:0;text-transform:none;color:var(--stone)}
.map-on .ic{width:24px;height:24px;stroke:currentColor}
.map-on:hover{color:var(--green);background:var(--bone-2)}
/* ---------- the footer's button */
.pbm{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px 0 28px;border-radius:var(--br);border:1px solid var(--green);background:transparent;color:var(--green);
 font:500 11.5px/1 var(--f-n);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .25s,color .25s,transform .15s}
.pbm:hover,.pbm[aria-expanded="true"]{background:var(--green);color:var(--paper)}
.pbm:active{transform:scale(.97)}
.pbm .ch-c{width:12px;height:12px}
/* ---------- under the header: the doors and the green What we do fill the rest of the screen exactly */
.v5 .z-stage{height:calc(100svh - var(--hdh));min-height:520px}
.v5 [id]{scroll-margin-top:var(--hdh)}
/* ---------- About us: the road fades out and the coupé parks before the green */
.v5 .f-ab{padding-bottom:calc(var(--sp) + 40px)}
.v5 .f-rd{-webkit-mask-image:linear-gradient(180deg,#000 calc(var(--ye,100%) - 130px),transparent var(--ye,100%));mask-image:linear-gradient(180deg,#000 calc(var(--ye,100%) - 130px),transparent var(--ye,100%))}
/* ---------- the collection, with the site's card */
.lx .v5-coll{padding-top:calc(var(--sp)*.5);padding-bottom:calc(var(--sp)*.6)}
.lx .v5-g{margin-top:clamp(40px,5vw,64px)}
.lx .v5-g .slide .v5-ph{position:absolute;inset:0;background-size:cover;background-position:center}
.lx .v5-coll .f-ch .tl{white-space:nowrap}
/* ---------- the films: the same size */
.lx .v5-fm{padding-top:calc(var(--sp)*.6)}
.lx .v5-fm .fm-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
@media(max-width:900px){.lx .v5-fm .fm-g{grid-template-columns:minmax(0,1fr)}}
/* ---------- the footer: the dot landscape, the invitation in its sky, the details in labelled columns under the road */
.dz-h{display:none}
.ft-site.v5-ft .fp-h{font-family:var(--f-d);font-weight:500;font-size:clamp(40px,4.4vw,68px);line-height:1.02;letter-spacing:-.012em;color:var(--ink)}
.ft-site.v5-ft .fp-p{margin-top:16px;font-size:16px;line-height:26px;color:var(--ink-2);max-width:30em;text-wrap:balance}
.v5-ft .fp-a{margin-top:28px;display:flex}
.v5-ft .fpanel{width:auto;max-width:560px}
.v5-ft .v5-name{display:none}
.v5-ft[data-fv="2"] .fpanel{margin:0 auto;text-align:center}
.v5-ft[data-fv="2"] .fp-p{margin-left:auto;margin-right:auto}
.v5-ft[data-fv="2"] .fp-a{justify-content:center}
.v5-ft[data-fv="3"] .fpanel{max-width:none;text-align:center}
.v5-ft[data-fv="3"] .v5-inv{display:none}
.v5-ft[data-fv="3"] .v5-name{display:block;font-family:var(--f-d);font-weight:500;font-size:clamp(56px,11.2vw,184px);line-height:.95;letter-spacing:-.025em;color:var(--ink);white-space:nowrap}
.v5-name span{display:inline-block;opacity:0;transform:translateY(40%);transition:opacity 1s var(--ease) calc(var(--d)*1s),transform 1.2s var(--ease) calc(var(--d)*1s)}
.v5-ft.in .v5-name span{opacity:1;transform:none}
/* the footer (2026-10-14, idea 5): name and city top left, Imprint bottom left, Contact and Follow on the right */
.v5-cols{--rg:8px;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;
 grid-template-areas:"b c f" "l c f";column-gap:32px}
.v5-fb{grid-area:b;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.v5-ft .v5-fwm{font-size:22px;gap:12px;color:var(--ink)}.v5-ft .v5-fwm img{width:44px;height:44px}
.v5-cy{color:var(--ink-2);font-size:15px;line-height:24px;white-space:nowrap}
.v5-fc{grid-area:c}.v5-ff{grid-area:f}
.v5-ft .v5-lg{grid-area:l;align-self:end;font-size:13px;color:var(--stone)}
.v5-c .v5-k{white-space:nowrap}
.v5-c0{display:none!important}
.v5-ft[data-fv="3"] .v5-cols{grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr))}
.v5-ft[data-fv="3"] .v5-c0{display:flex!important;flex-direction:column;align-items:flex-start;gap:20px}
.v5-ih{font-family:var(--f-d);font-weight:500;font-size:32px;line-height:1.05;letter-spacing:-.01em;color:var(--ink)}
.v5-c{display:flex;flex-direction:column;align-items:flex-start;gap:var(--rg);font-size:15px;line-height:24px;color:var(--ink-2)}
.v5-l{font:500 11px/16px var(--f-n);letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin-bottom:6px}
.v5-k{color:var(--ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.v5-k:hover,.v5-k:focus-visible{background-size:100% 1px;outline:none}
.v5-k.ext::after{content:'\2197';margin-left:5px;font-size:12px;color:var(--stone)}
.v5-c p+.v5-k{margin-top:4px}
/* round 10: the address is the link; the name carries the footer's arrow, the underline runs under each line on hover */
.v5-ad{display:flex;flex-direction:column;align-items:flex-start;background:none;color:var(--ink-2)}
.v5-ad>span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.v5-ad .ad-n{color:var(--ink)}
.v5-ad .ad-n::after{content:'\2197';display:inline-block;margin-left:5px;font-size:12px;color:var(--stone);transform-origin:50% 100%}
.v5-ad:hover>span,.v5-ad:focus-visible>span{background-size:100% 1px}
.v5-ad:hover .ad-n::after{--hy:-7px;animation:ng-hop .62s both}
.v5-ft .rv{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease) calc(var(--d,0)*1s),transform 1s var(--ease) calc(var(--d,0)*1s)}
.v5-ft.in .rv{opacity:1;transform:none}
@media(max-width:1100px){.v5-ft[data-fv="3"] .v5-cols{grid-template-columns:repeat(4,minmax(0,1fr))}.v5-ft[data-fv="3"] .v5-c0{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between}}
@media(max-width:999px){.v5-ft .fpanel{max-width:none}}
@media(max-width:760px){
 .v5-cols{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:none;grid-template-areas:"b b" "c f" "l l";column-gap:16px;row-gap:28px}
 .v5-ft .v5-lg{margin-top:4px}.v5-cy{font-size:14.5px;line-height:23px}
 .v5-ft[data-fv="3"] .v5-c0{flex-direction:column;align-items:flex-start}
 .v5-c{font-size:14.5px;line-height:23px}
 .ft-site.v5-ft .fp-h{font-size:42px}
 .v5-ft[data-fv="3"] .v5-name{font-size:clamp(44px,13.6vw,64px)}
}
html.rm .v5-ft .rv,html.rm .v5-name span{opacity:1;transform:none;transition:none}

/* ---------- round 11: the header's Contact opens sideways into the four ways (idea 11 of round 10) */
.cbar{position:absolute;z-index:5;box-sizing:border-box;display:flex;align-items:center;gap:2px;padding:0 3px 0 6px;background:var(--green);border-radius:var(--br);
 box-shadow:0 10px 30px -12px rgba(22,22,20,.4);clip-path:inset(0 0 0 calc(100% - var(--bw,120px)) round var(--br));transition:clip-path .45s cubic-bezier(.2,.9,.25,1)}
.cbar.on{clip-path:inset(0 0 0 0 round var(--br))}
.cbar[hidden]{display:none}
.cb-a{display:flex;align-items:center;gap:8px;align-self:stretch;padding:0 12px;color:var(--paper);font:500 10.5px/1 var(--f-n);letter-spacing:.15em;text-transform:uppercase;
 white-space:nowrap;text-decoration:none;border-radius:2px;transition:background .2s;-webkit-tap-highlight-color:transparent}
.cb-a svg{flex:0 0 auto;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.cb-n{display:none;color:rgba(243,239,231,.62);letter-spacing:.03em;font-size:11.5px;text-transform:none;font-variant-numeric:lining-nums}
.cb-x{display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border:0;border-radius:2px;background:transparent;color:var(--paper);cursor:pointer}
.cb-x svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.cb-a:focus-visible,.cb-x:focus-visible{outline:2px solid var(--paper);outline-offset:-4px}
@media(hover:hover) and (pointer:fine){.cb-n{display:inline}.cb-a:hover,.cb-x:hover{background:#0A2C22}}
.cb-bg{position:fixed;inset:0;z-index:9;background:rgba(22,22,20,.32);opacity:0;pointer-events:none;transition:opacity .3s}
@media(max-width:900px){.cb-a{font-size:10px;letter-spacing:.13em;padding:0 10px}}
@media(max-width:640px){.cbar{left:8px;right:8px;padding:0 2px 0 4px;clip-path:inset(0 0 0 calc(100% - var(--bw,120px)) round var(--br))}.cb-a{flex:1;justify-content:center;padding:0}
 .cb-w{display:none}.cb-a svg{width:19px;height:19px}.cb-bg.on{opacity:1;pointer-events:auto}}

/* ---------- round 12 (2026-10-13 11:15): the cars' Book a viewing. On a card the four ways come up over the photo (idea 4
   of round 11); on a car page they unfold under the button (idea 7), and in the phone's price bar, above it */
/* the button turns green while open (not .open, which would also show the cards' old menu) */
#view .ch.bv-open .ch-b{background:var(--green);border-color:var(--green);color:var(--card)}
.bv svg{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.bv-ov{position:absolute;inset:0;z-index:4;container-type:inline-size;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--green);color:var(--paper);cursor:default;
 clip-path:inset(100% 0 0 0);visibility:hidden;transition:clip-path .5s cubic-bezier(.2,.9,.25,1),visibility 0s .5s}
.bv-ov.on{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .5s cubic-bezier(.2,.9,.25,1),visibility 0s}
article.card.bv-on .media .nav,article.card.bv-on .media .dots{visibility:hidden}
.bv-ol{width:min(72%,260px)}
.bv-l{display:flex;align-items:center;gap:12px;height:44px;border-bottom:1px solid rgba(243,239,231,.16);color:var(--paper);font:500 11.5px/1 var(--f-n);letter-spacing:.16em;
 text-transform:uppercase;text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.bv-l:last-child{border-bottom:0}
.bv-l svg{flex:0 0 auto;width:16px;height:16px}
.bv-n{display:none;margin-left:auto;letter-spacing:.03em;text-transform:none;font-size:12px;color:rgba(243,239,231,.6);font-variant-numeric:lining-nums}
.bv-x{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:4px;background:transparent;color:var(--paper);cursor:pointer}
.bv-x svg{width:12px;height:12px}
.bv-ov a:focus-visible,.bv-x:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
@media(hover:hover) and (pointer:fine){.bv-n{display:inline}.bv-l{transition:opacity .25s}.bv-ol:hover .bv-l:not(:hover){opacity:.5}.bv-x:hover{background:rgba(243,239,231,.1)}}
.bv-acc{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s cubic-bezier(.2,.9,.25,1),visibility 0s .45s}
.bv-acc.on{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .45s cubic-bezier(.2,.9,.25,1),visibility 0s}
.bv-acc>div{min-height:0;overflow:hidden}
.bv-al{padding-top:6px}
.bv-r{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;height:46px;border-top:1px solid var(--hair);color:var(--ink);font:400 14.5px/1.2 var(--f-n);text-decoration:none;-webkit-tap-highlight-color:transparent}
.bv-r svg{width:16px;height:16px;color:var(--green)}
.bv-r b{font-weight:400}
.bv-r em{font-style:normal;font-size:13px;color:var(--stone);font-variant-numeric:lining-nums}
.bv-r:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(hover:hover){.bv-r:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}}
/* where a card is narrow (two or three to a row on a tablet) the number gives way, as it does on a phone */
@container (max-width:330px){.bv-l .bv-n{display:none}}
.mbar .bv-acc{padding:0 16px}
.mbar:has(.bv-acc.on){background:var(--paper)}
.mbar .bv-al{padding:6px 0 0;border-bottom:1px solid var(--hair)}
.mbar .bv-r:first-child{border-top:0}

/* ---------- round 14 (2026-10-13 12:59), his last fixes */
/* the car page: no rules between its parts, the space already parts them (the lines inside the lists stay) */
#view .sx,#view .others{border-top:0}
/* the four ways under the car page's button start straight under it, with no rule above the first */
.tcr .bv-al .bv-r:first-child{border-top:0}
/* the films: square corners, like the cars' photos */
.lx .v5-fm .film{border-radius:0}
/* the price bar's lines unfold above it, so its chevron points up, and down while they are open */
.mbar .ch-b .ch-c{scale:1 -1}
.mbar .ch-b:hover .ch-c{animation:none}
/* the moving cross: two strokes that are a chevron, a plus or a dot and become the ×, and back */
.mi{position:relative;display:block;width:12px;height:12px;flex:0 0 auto;transition:transform .45s cubic-bezier(.2,.9,.25,1)}
.mi i{--l:11px;--r:45deg;position:absolute;left:50%;top:50%;width:var(--l);height:1.5px;margin:-.75px 0 0 calc(var(--l)/-2);border-radius:1px;background:currentColor;
 transform:translate(var(--x,0px),0) rotate(var(--r));transition:transform .45s cubic-bezier(.2,.9,.25,1),width .45s cubic-bezier(.2,.9,.25,1),margin .45s cubic-bezier(.2,.9,.25,1)}
.mi i+i{--r:-45deg}
.mi[data-s="chev"] i{--l:5.75px;--x:-1.5px}.mi[data-s="chev"] i+i{--x:1.5px}
.mi[data-s="plus"] i{--l:10px;--r:0deg}.mi[data-s="plus"] i+i{--r:90deg}
.mi[data-s="xp"] i+i{--r:135deg}
.mi[data-s="dot"] i{--l:1.5px;--r:-45deg}.mi[data-s="dot"] i+i{--r:-135deg}
.cbar:not(.on) .mi,.sbar:not(.on) .mi{transform:translate(var(--mx,0px),var(--my,0px))}
html.rm .mi,html.rm .mi i{transition:none}
[data-ct],.cta-b,.ch-b[data-bv],.sb-a,.sb-x,.cb-a,.cb-x{-webkit-tap-highlight-color:transparent}
/* the other contact buttons (the doors' Book a viewing, the footer's Book now, Offer us your car) open like the header's
   Contact: the button grows sideways into the four ways, a bar the height of the button, and closes back into itself */
.sbar{position:fixed;z-index:70;box-sizing:border-box;display:flex;align-items:center;gap:2px;padding:0 4px 0 8px;background:var(--green);color:var(--paper);border-radius:var(--br);
 clip-path:inset(var(--ct,0px) var(--cr,0px) var(--cb,0px) var(--cl,0px) round var(--br));transition:clip-path .45s cubic-bezier(.2,.9,.25,1)}
.sbar.on{clip-path:inset(0 0 0 0 round var(--br))}
.sbar[hidden]{display:none}
.sb-a{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:10px;align-self:stretch;padding:0 16px;color:inherit;font:500 11.5px/1 var(--f-n);letter-spacing:.16em;
 text-transform:uppercase;white-space:nowrap;text-decoration:none;border-radius:2px;transition:background .2s;-webkit-tap-highlight-color:transparent}
.sb-a svg{flex:0 0 auto;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.sb-n{display:none;opacity:.62;letter-spacing:.03em;font-size:12.5px;text-transform:none;font-variant-numeric:lining-nums}
.sb-x{display:grid;place-items:center;flex:0 0 auto;width:44px;align-self:stretch;padding:0;border:0;border-radius:2px;background:transparent;color:inherit;cursor:pointer}
.sb-a:focus-visible,.sb-x:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
.sbar.iv{background:var(--paper);color:var(--ink)}
.sbar.iv .sb-a svg{color:var(--green)}
.sbar.ic .sb-w{display:none}.sbar.ic .sb-a{padding:0 12px}.sbar.ic .sb-a svg{width:19px;height:19px}
.sb-bg{z-index:69}
@media(hover:hover) and (pointer:fine){.sbar:not(.ic) .sb-n{display:inline}.sb-a:hover,.sb-x:hover{background:#0A2C22}.sbar.iv .sb-a:hover,.sbar.iv .sb-x:hover{background:var(--bone)}}
.sbar.nn .sb-n{display:none!important}.sbar.tt .sb-a{padding:0 11px}

/* ---------- round 14, after the agents' checks (desktop, phone and tablet, interactions) */
/* the bars are placed with no transition, so the first opening grows out of the button instead of flashing full width */
.np,.np *{transition:none!important}
/* the four ways fade while a bar folds back, so the button never shows a bar's icon or word in its place; a bar over an
   outlined button fades away at the end instead of staying green and vanishing */
.cb-a,.sb-a{transition:background .2s,box-shadow .2s,opacity .2s .12s}
.cbar:not(.on) .cb-a,.sbar:not(.on) .sb-a{opacity:0;transition:background .2s,box-shadow .2s,opacity .14s}
/* a hover fills its whole place: at the two ends it reaches the bar's own edge (it stopped 4 to 8 px short of it), and the
   menu bar's × darkens the full height like the ways beside it, as on the other bars */
.cbar{--hv:#0A2C22;--pl:6px;--pr:3px}.sbar{--hv:#0A2C22;--pl:8px;--pr:4px}.sbar.iv{--hv:var(--bone)}
@media(max-width:640px){.cbar{--pl:4px;--pr:2px}}
.cb-x{align-self:stretch;height:auto}.cb-x,.sb-x{transition:background .2s,box-shadow .2s}
@media(hover:hover) and (pointer:fine){.cb-a:first-child:hover,.sb-a:first-child:hover{box-shadow:calc(-1*var(--pl)) 0 0 var(--hv)}
 .cb-x:hover,.sb-x:hover{box-shadow:var(--pr) 0 0 var(--hv)}}
.sbar{opacity:0;transition:clip-path .45s cubic-bezier(.2,.9,.25,1),opacity .18s .27s}
.sbar.on{opacity:1;transition:clip-path .45s cubic-bezier(.2,.9,.25,1),opacity .1s}
/* a bar that is folding back (or not yet open) lets clicks through to the button under it: a quick second click on
   the button no longer lands on one of the four ways */
.cbar:not(.on),.sbar:not(.on){pointer-events:none}
/* a tap on a card shows no grey flash over the whole card */
.card,.tile{-webkit-tap-highlight-color:transparent}
/* while a button's bar or lines are open, its focus ring does not peek out round them */
[aria-expanded="true"]:focus-visible{outline-color:transparent}
/* the service tiles on Cars for sale open like the cards: the photo turns green with the four ways */
.tile .tm{position:relative}
.tile.bv-on .tm .slot{visibility:hidden}
/* the ticks sit inside the column, the ↗ does not make its row taller */
.tick li::before{transform:translateX(3px) rotate(-45deg) translateY(-3px)}
/* no line straight under a heading: the list and the table start under it the way About this car does */
.tick li:first-child,.rows>div:first-child{border-top:0;padding-top:0}
@media(min-width:901px){.tick li:nth-child(2){border-top:0;padding-top:0}}
.v5-k.ext::after{line-height:1}
/* View all stands on the heading's baseline */
@media(min-width:901px){.lx .v5-coll .f-ch{align-items:baseline}}
/* three cars stay in one row on a tablet, rather than two and one; their colours stand one above the other, whole */
@media(min-width:700px) and (max-width:980px){.lx .v5-coll .grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px}
 .lx .v5-coll .chips{flex-direction:column;align-items:flex-start;height:auto;gap:6px}.lx .v5-coll .chips span{height:22px}}
/* the doors on a phone and tablet: the logo, name and buttons sit in the middle of the space above the photos, which
   no longer depends on the screen's height (a small German phone had the photos over the button) */
@media(max-width:900px){.lx .z-mid{bottom:44%;justify-content:safe center;padding:16px 20px}}
@media(max-width:900px) and (max-height:780px){.lx .z-mid img{width:56px}.lx .z-mid .x1{margin-top:14px}.lx .z-mid .bt{margin-top:20px}}

.p-bentley{background-image:url(/media/journal-bentley-1200.226b1b28.webp)}
.p-civory{background-image:url(/media/journal-ivory-1600.d5e7ff1b.webp)}
.p-dash{background-image:url(/media/doors-left-1400.9c3545cf.webp)}
.p-f8{background-image:url(/media/journal-f8-1200.abf72ab0.webp)}
.p-hall{background-image:url(/media/film-hall-1600.b24b0d1d.webp)}
.p-lights{background-image:url(/media/doors-right-1400.d13f29f3.webp)}
.p-rocks{background-image:url(/media/film-rocks-1920.369fa876.webp)}
/* ---------- the imprint and the privacy policy (22:42; the full width since 23:17) */
.lx.lg .lg-b{padding:0 0 var(--sp)}
.cx.lg .cx-g{grid-template-columns:minmax(0,1fr)}
.lg-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:clamp(40px,6vw,96px);align-items:start}
.lg-t{font:400 16px/1.7 var(--f-n);color:var(--ink-2);overflow-wrap:break-word}
.lg-t h2{font:400 clamp(24px,2.4vw,30px)/1.2 var(--f-d);color:var(--ink);margin:56px 0 14px}
.lg-t h2:first-child{margin-top:0}
/* round 14: the numbered headings in the display face kept its old-style figures (10. looked like io.) */
.lg-t h2,.lg-t h3,.lg-s,.lg-s *{font-variant-numeric:lining-nums}
.lg-t h3,.lg-s h3{font:500 16px/1.4 var(--f-n);color:var(--ink);margin:28px 0 8px}
.lg-t p,.lg-s p{margin:0 0 14px}
.lg-t ul{margin:0 0 14px;padding-left:20px}
.lg-t li{margin:0 0 6px}
.lg-t li:has(>h3){list-style:none;margin-left:-20px}
.lg-t a,.lg-s a{color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* the imprint: his address and contacts on the left, the liability texts on the right */
.lg-imp .lg-s{font:400 16px/1.7 var(--f-n);color:var(--ink-2)}
.lg-imp .lg-s h3:first-of-type{margin-top:32px}
/* the privacy policy: its sections on the left, in view while the text scrolls, the one being read in ink */
.lg-pri .lg-s{position:sticky;top:calc(var(--hdh,72px) + 32px);max-height:calc(100vh - var(--hdh,72px) - 64px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none}
.lg-pri .lg-s::-webkit-scrollbar{display:none}
.lg-tl{font:500 11px/1 var(--f-n);letter-spacing:.16em;text-transform:uppercase;color:var(--stone);margin:7px 0 18px}
.lg-tb{display:none}
.lg-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--hair)}
.lg-toc li{margin:0}
.lg-toc li button{display:flex;gap:12px;width:100%;text-align:left;background:none;border:0;cursor:pointer;font:400 14px/1.4 var(--f-n);color:var(--stone);padding:6px 0 6px 16px;margin-left:-1px;border-left:1px solid transparent;transition:color .25s,border-color .25s}
.lg-toc li button i{font-style:normal;font-variant-numeric:lining-nums tabular-nums;min-width:1.4em}
.lg-toc li button:hover{color:var(--ink)}
.lg-toc li button.on{color:var(--ink);border-left-color:var(--green)}
@media(max-width:900px){
 .lg-g{grid-template-columns:minmax(0,1fr)}
 .lg-imp .lg-s{margin-bottom:28px}
 .lg-pri .lg-s{position:static;max-height:none;overflow:visible;margin-bottom:36px}
 .lg-tl{display:none}
 .lg-tb{display:flex;background:none;border:0;cursor:pointer;align-items:center;justify-content:space-between;width:100%;font:500 11.5px/1 var(--f-n);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding:18px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
 .lg-tb .ng-h{--hx:0px;--hx1:0px;--hx2:0px;--hy:-5px}
 .lg-tb[aria-expanded="true"] .ch-c{transform:rotate(180deg)}
 .lg-toc ol{display:none;border-left:0;padding:6px 0 4px;border-bottom:1px solid var(--hair)}
 .lg-toc.open ol{display:block}
 .lg-toc li button{padding:10px 0;border-left:0;margin:0}
 .lg-toc li button.on{color:var(--stone)}
}
@media(max-width:640px){.lg-t,.lg-imp .lg-s{font-size:15px}.lg-t h2{margin-top:40px}}

/* ---------- round 8: tabular figures widened the hyphen in Inter ("AMG - Sportlenkrad", "6,2 - Liter"); running text
   gets proportional figures, the counters keep tabular ones so they do not shift as they change */
body{font-variant-numeric:lining-nums proportional-nums}
.cnt,.lb-cnt,.lx .nb,.lx .z-sn{font-variant-numeric:lining-nums tabular-nums}
/* ---------- round 8: the German words are longer. KAUFEN, RESTAURIEREN, VERKAUFEN share one size that keeps the
   longest inside its column (it ran into the drawing, and past the screen's edge on a phone) */
/* 2026-10-18: Hewad's words are longer in English too (ACQUISITION, RESTORATION) and in German (RESTAURIERUNG), so the
   rule now holds in both languages, each sized for its longest word */
.lx .ww-art .ww-l,.lx .ww-art .ww-mi{container-type:inline-size}
.lx .ww-art .ww-w{font-size:min(clamp(64px,min(7.4vw,12vh),132px),15cqi)}
.lx .ww-art .ww-mw{font-size:min(clamp(64px,19vw,120px),13cqi)}
html[lang=de] .lx .ww-art .ww-w{font-size:min(clamp(64px,min(7.4vw,12vh),132px),12.8cqi)}
html[lang=de] .lx .ww-art .ww-mw{font-size:min(clamp(64px,19vw,120px),11.4cqi)}
html[lang=ru] .lx .ww-art .ww-w{font-size:min(clamp(64px,min(7.4vw,12vh),132px),13.6cqi)}
html[lang=ru] .lx .ww-art .ww-mw{font-size:min(clamp(64px,19vw,120px),12.2cqi)}

/* round 9: where the footer cannot fit under the menu bar, its invitation sits between the details and the legal line */
.v5-ft.inv-end .fr-wrap .fpanel{margin:clamp(56px,6vw,80px) auto clamp(20px,2.4vw,32px)}
.v5-ft.inv-mid .fr-wrap .fpanel{margin:0 auto clamp(40px,4vw,56px)}
/* the phone price bar steps aside whenever the invitation is on screen, which it always is at the end of a car page now,
   so the room once left under the legal line for the bar goes */
@media(max-width:900px){body:has(#view .mbar) #visit.v5-ft{padding-bottom:0}body.car .v5-ft .fr-wrap{padding-bottom:32px}}

/* ---------- 22:42, short screens (a laptop zoomed to 175%, a phone turned sideways) */
/* the opening keeps its photos at the sides, as on a computer, so they never run under the buttons */
@media(max-width:900px) and (orientation:landscape){
 .v5 .z-stage{min-height:0}
 .lx .z-dp{top:12px;bottom:12px;height:auto;width:58%}
 .lx .z-dl .z-dp{border-radius:0 var(--rp,8px) var(--rp,8px) 0!important}.lx .z-dr .z-dp{border-radius:var(--rp,8px) 0 0 var(--rp,8px)!important}
 .lx .z-mid{justify-content:center;padding:0 29%}
 .lx .z-mid img{width:56px}.lx .z-mid .x1{margin-top:14px;font-size:calc(var(--xk)*34px)}.lx .z-mid .ld{margin-top:10px}
 .lx .z-mid .bt{flex-direction:column;align-items:center;margin-top:18px}
}
/* What we do fits under the header on a short laptop screen too (it was 13 px taller than a 960 x 600 screen) */
.v5 .ww-art.ww-lit{min-height:480px}
/* each step's drawing is never taller than the screen leaves room for */
@media(max-width:900px){.lx .ww-art .ww-ma{width:min(100%,calc((100svh - var(--hdh) - 150px)*800/720));margin-inline:auto}}
/* ---------- 22:42: the moving lines a size smaller ("a bit too big") */
.lx.v5 .f-ln .z-row>div{font-size:calc(var(--xk)*clamp(40px,6vw,100px))}
/* ---------- round 4 (19:56) */
/* the language button's chevron is the Contact button's: same drawing, size, line, gap, turn and hop */
body.look .lng-b{gap:10px}
.lng-b .ng-h{--hx:0px;--hx1:0px;--hx2:0px;--hy:-5px}
.lng-b:hover .ng-h{animation:ng-hop .62s both}
.lng-b[aria-expanded="true"] .ng-h{animation:none}
@media(max-width:900px){body.look .lng-b{gap:8px}}
/* flags: square 4:3 with a fine edge */
.flag.fs{display:block;width:20px;height:15px;border-radius:0;box-shadow:none}
.lng-m a{gap:14px}
/* the cards' photos have square corners ("not rounded like airbnb"); the car page gallery keeps its own */
.card .media,body.look .card .media,body.look .card,.tile .tm,body.look .tile .tm,.mc-ph,body.look .mc-ph{border-radius:0}
/* the chevron's own rules live in the home page's sheet, which is off on car pages: repeat them here */
.ch-c{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ch.open .ch-b .ch-c{transform:rotate(180deg)}
/* while its card is open the chevron points up and stops hopping, even under the pointer */
.ch .ch-b[aria-expanded="true"]:hover .ch-c,.ch .ch-b[aria-expanded="true"] .ch-c{animation:none}
/* the car page: one "Book a viewing" button under the price, and in the phone price bar */
.ch.bk .ch-b .ng-h{--hx:0px;--hx1:0px;--hx2:0px;--hy:-5px}
.ch.bk.open .ch-b{background:var(--green);border-color:var(--green);color:var(--card)}
.ch.bk{display:block;margin-top:16px}
.ch.bk .ch-b{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.mbar .ch.bk{flex:1 1 auto;min-width:0;margin-top:0}

.wa-7 .ln{stroke:var(--paper,#F3EFE7);stroke-width:1.6;vector-effect:non-scaling-stroke}
.wa-7 .lt{stroke-width:1.1}
.wa-7 .ar{stroke-width:1.2}
.wa-7 .oc{fill:var(--green,#0E3B2E);stroke:none}
.wa-7 .pc{fill:rgba(243,239,231,.06);stroke:none}
.wa-7 .pc2{fill:var(--green,#0E3B2E);stroke:none}
.wa-7 .gd2{stroke:rgba(243,239,231,.35);stroke-width:1}
.wa-7 .ro{stroke-width:1.2}
.wa-7 .tr{stroke:rgba(243,239,231,.55);stroke-width:1;fill:var(--green,#0E3B2E)}
.wa-7 .mt{stroke:rgba(243,239,231,.62);stroke-width:1.1}
.wa-7 .mt2{stroke:rgba(243,239,231,.3);stroke-width:1}
.wa-7 .mf{fill:var(--green,#0E3B2E);stroke:none}
.wa-7 .mtint{fill:rgba(243,239,231,.035);stroke:none}
.wa-7 .rc{stroke:rgba(243,239,231,.5);stroke-width:1}
.wa-7 .hz{stroke:rgba(243,239,231,.4);stroke-width:1}
.wa-7 .sun{stroke:#C9AE74;stroke-width:1.2;vector-effect:non-scaling-stroke;fill:rgba(201,174,116,.14)}
.wa-7 .bulb{stroke:#C9AE74;stroke-width:1.4;vector-effect:non-scaling-stroke;fill:rgba(201,174,116,.35);opacity:0}
.wa-7 .cone{stroke:none}
.wa-7 .cone2{stroke:none}
.wa-7 .day{stroke:none;opacity:0}
.wa-7 .gu{stroke:rgba(243,239,231,.42);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke;opacity:0}
.wa-7 .lid{opacity:0}

.no-map .fp-map{display:none}#view{display:contents}