/* Cargate Automotive — stylesheet
   Concept: building blocks. Solid slabs of ink, white and concrete, one signal red that marks
   everything you can act on. Archivo, stretched wide and set heavy, carries the voice; Hanken Grotesk
   carries the facts. Square corners, 2px rules, flat colour, no gradients, no shadows. */

@font-face{font-family:"Archivo Variable";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2-variations"),url(fonts/archivo-latin-ext-wdth-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo Variable";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(fonts/archivo-latin-wdth-normal.woff2) format("woff2-variations"),url(fonts/archivo-latin-wdth-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk Variable";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format("woff2-variations"),url(fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk Variable";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2-variations"),url(fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Cyrillic (Bulgarian): same family names, so each letter falls back inside the family; downloaded only when needed */
@font-face{font-family:"Archivo Variable";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/montserrat-cyrillic-wght-normal.woff2) format("woff2-variations"),url(fonts/montserrat-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Hanken Grotesk Variable";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/onest-cyrillic-wght-normal.woff2) format("woff2-variations"),url(fonts/onest-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* Menu face: Manrope, used only for the navigation (desktop menu, mobile menu, language switch) */
@font-face{font-family:"Manrope Variable";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/manrope-latin-ext-wght-normal.woff2) format("woff2-variations"),url(fonts/manrope-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Manrope Variable";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/manrope-latin-wght-normal.woff2) format("woff2-variations"),url(fonts/manrope-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope Variable";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(fonts/manrope-cyrillic-wght-normal.woff2) format("woff2-variations"),url(fonts/manrope-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  /* palette: ink, white, concrete, one signal red */
  --ink:#0D0D0E;
  --ink-2:#18181A;
  --ink-3:#2A2A2E;
  --white:#fff;
  --concrete:#ECECE9;
  --red:#E4151F;
  --grey-d:#B6B8BD;           /* secondary text on ink */
  --grey-l:#54565B;           /* secondary text on white and concrete */
  --ok:#2FBF7A;
  /* type */
  --f-display:"Archivo Variable","Archivo","Arial Black","Helvetica Neue",Arial,sans-serif;
  --f-body:"Hanken Grotesk Variable","Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-menu:"Manrope Variable","Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* layout */
  --gutter:clamp(20px,5vw,72px);
  --max:1320px;
  --edge:max(var(--gutter),calc((100vw - var(--max))/2));
  --head:76px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 16px)}
body{margin:0;background:var(--ink);color:#fff;font:400 1.0625rem/1.65 var(--f-body);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
::selection{background:var(--red);color:#fff}
h1,h2,h3{font-family:var(--f-display);font-weight:800;font-stretch:118%;line-height:1;letter-spacing:-.025em;margin:0;text-wrap:balance;overflow-wrap:break-word;hyphens:manual}
h1{font-size:clamp(2.2rem,6vw,5.4rem);line-height:.98;letter-spacing:-.03em}
h2{font-size:clamp(1.8rem,3.9vw,3.3rem);line-height:1.03}
h3{font-size:1.3rem;font-weight:750;font-stretch:108%;line-height:1.15;letter-spacing:-.012em}
.lead{font-size:clamp(1.08rem,1.4vw,1.25rem);line-height:1.6}
.prose{max-width:62ch}
.prose p+p{margin-top:1.1em}
.prose strong{font-weight:700}
.link,.prose a{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em;transition:color .2s}
.link:hover,.prose a:hover{color:var(--red)}
.dark .link:hover,.dark .prose a:hover{color:#fff;text-decoration-color:var(--red)}
.ico{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter;flex:none}
.ico--fill{fill:currentColor;stroke:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.dark :focus-visible,.on-red :focus-visible,.site-header :focus-visible,.footer :focus-visible{outline-color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:-80px;z-index:100;background:#fff;color:#000;padding:12px 18px;font-weight:700}
.skip:focus{top:12px}

/* surfaces */
.dark{background:var(--ink);color:#fff;color-scheme:dark}
.paper{background:var(--concrete);color:var(--ink);color-scheme:light}
.band{background:#fff;color:var(--ink);color-scheme:light;border-bottom:2px solid var(--ink)}
.dark .muted{color:var(--grey-d)}
.paper .muted,.band .muted,.panel .muted{color:var(--grey-l)}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.sec{padding-block:clamp(64px,9vw,128px)}
.sec--flush-top{padding-top:0}
.sec--stock{padding-top:clamp(24px,3vw,40px)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:start}
.stack{display:grid;gap:clamp(18px,2vw,28px);align-content:start}
.sec-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px clamp(32px,6vw,96px);align-items:end;margin-bottom:clamp(36px,5vw,72px)}
.sec-head h2{max-width:17ch}

/* buttons: hard rectangles, a fill rises on hover */
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn{--fill:var(--ink);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.75em;min-height:60px;padding:0 1.9em;font:700 .98rem/1 var(--f-display);font-stretch:112%;text-decoration:none;border:2px solid transparent;border-radius:0;cursor:pointer;color:inherit;transition:color .3s var(--ease),border-color .3s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fill);transform:scaleY(0);transform-origin:50% 100%;transition:transform .4s var(--ease-io)}
.btn:hover::before{transform:scaleY(1)}
.btn .ico{width:1.2rem;height:1.2rem;stroke-width:2.4}
.btn[disabled]{opacity:.6;cursor:progress}
.btn--red{background:var(--red);color:#fff;--fill:#fff}
.btn--red:hover{color:var(--ink)}
.paper .btn--red,.band .btn--red,.panel .btn--red{--fill:var(--ink)}
.paper .btn--red:hover,.band .btn--red:hover,.panel .btn--red:hover{color:#fff}
.btn--white{background:#fff;color:var(--ink);--fill:var(--ink)}
.btn--white:hover{color:#fff}
.btn--dark{background:var(--ink);color:#fff;--fill:var(--red)}
.btn--line{color:#fff;border-color:#fff;--fill:#fff}
.btn--line:hover{color:var(--ink)}
.paper .btn--line,.band .btn--line{color:var(--ink);border-color:var(--ink);--fill:var(--ink)}
.paper .btn--line:hover,.band .btn--line:hover{color:#fff}

/* header: an ink bar, the phone number is a red block flush with the edge */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--ink);color:#fff;border-bottom:2px solid var(--ink-3);view-transition-name:site-header}
.bar{display:flex;align-items:stretch;height:var(--head);padding-left:var(--edge)}
.brand{display:flex;flex-direction:column;justify-content:center;gap:7px;text-decoration:none;color:#fff;line-height:1;flex:none;margin-right:24px}
.brand b{font:900 1.55rem/1 var(--f-display);font-stretch:125%;letter-spacing:.01em}
.brand b::after{content:"";display:inline-block;width:.3em;height:.3em;background:var(--red);margin-left:.1em}
.brand i{display:block;font:700 .56rem/1 var(--f-display);font-style:normal;font-stretch:125%;letter-spacing:.52em;color:var(--grey-d)}
.bar>nav{margin-left:auto;display:flex}
.nav{display:flex;align-items:stretch}
.nav>li{position:relative;display:flex;align-items:stretch}
.nav a,.nav .caret{display:flex;align-items:center;color:#fff;text-decoration:none;font:650 .98rem/1 var(--f-menu);letter-spacing:.005em;padding:0 1.15em;transition:background-color .25s}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--red);transform:scaleY(0);transform-origin:50% 100%;transition:transform .3s var(--ease-io)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleY(1)}
.nav>li>a:hover,.nav>li>.caret:hover,.has-sub:hover>a,.has-sub:hover>.caret{background:var(--ink-2)}
.nav .caret{background:none;border:0;cursor:pointer;padding:0 1em 0 0;margin-left:-.9em}
.nav .caret .ico{width:1rem;height:1rem;transition:transform .3s}
.has-sub.open .caret .ico{transform:rotate(180deg)}
.sub{position:absolute;top:100%;left:0;min-width:280px;background:#fff;color:var(--ink);border:2px solid var(--ink);display:grid;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .3s var(--ease),visibility .2s}
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{opacity:1;visibility:visible;transform:none}
.nav .sub a{color:var(--ink);padding:1.05em 1.3em}
.nav .sub a::after{display:none}
.nav .sub a+a{border-top:2px solid var(--concrete)}
.nav .sub a:hover{background:var(--red);color:#fff}
.head-cta{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);margin-left:16px}
.head-cta a{display:flex;align-items:center;gap:.7em;padding:0 clamp(20px,2.4vw,40px);color:#fff;font:700 .95rem/1 var(--f-display);font-stretch:112%;text-decoration:none;white-space:nowrap;transition:background-color .3s,color .3s}
.head-tel{background:var(--red)}
.head-mail{background:#000}
.head-cta a:hover{background:#fff;color:var(--ink)}
.head-cta .ico{width:1.1rem;height:1.1rem}
.menu-btn{display:none;margin-left:auto;width:var(--head);border:0;border-radius:0;background:var(--red);color:#fff;cursor:pointer;place-items:center}
.menu-btn .ico{width:1.6rem;height:1.6rem;stroke-width:2.4}
.menu-btn .x{display:none}
.menu-btn[aria-expanded="true"] .x{display:block}
.menu-btn[aria-expanded="true"] .m{display:none}
.mnav{position:fixed;inset:calc(var(--head) + env(safe-area-inset-top,0px)) 0 0 0;z-index:49;background:var(--ink);padding:0 0 calc(32px + env(safe-area-inset-bottom,0px));overflow-y:auto;display:grid;align-content:start}
.mnav[hidden]{display:none}
.mnav a{display:block;text-decoration:none;font:750 1.8rem/1.1 var(--f-menu);letter-spacing:-.015em;padding:.7em var(--gutter);border-bottom:2px solid var(--ink-3)}
.mnav a[aria-current="page"]{box-shadow:inset 8px 0 0 var(--red)}
.mnav .msub{display:grid;background:var(--ink-2)}
.mnav .msub a{font:600 1rem/1.3 var(--f-menu);letter-spacing:0;padding:1em var(--gutter) 1em calc(var(--gutter) + 14px);color:var(--grey-d);border-bottom:2px solid var(--ink)}
.mnav .mcall{display:inline-flex;margin:24px var(--gutter) 0;padding:0 1.9em;min-height:60px;border:0;font-size:1rem;line-height:1;color:#fff;justify-self:stretch}
body.menu-open{overflow:hidden}

/* language switch: a dark block in the bar, a square list underneath */
.lang{display:none;position:relative;align-items:stretch;margin-left:16px}
.js .lang{display:flex}
.lang-btn{display:flex;align-items:center;gap:.55em;height:100%;padding:0 clamp(14px,1.4vw,22px);background:var(--ink-2);color:#fff;border:0;border-radius:0;font:700 .9rem/1 var(--f-menu);cursor:pointer;transition:background-color .25s}
.lang-btn:hover,.lang.open .lang-btn{background:var(--ink-3)}
.lang-btn .ico{width:1.25rem;height:1.25rem}
.lang-list{position:absolute;top:100%;right:0;z-index:60;width:min(340px,calc(100vw - 2 * var(--gutter)));margin:0;padding:0;list-style:none;background:#fff;color:var(--ink);border:2px solid var(--ink);display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.lang-list[hidden]{display:none}
.lang-list li:nth-child(n+3){border-top:2px solid var(--concrete)}
.lang-list li:nth-child(even){border-left:2px solid var(--concrete)}
.lang-list button{display:block;width:100%;min-height:56px;padding:0 1.1em;background:none;border:0;border-radius:0;color:var(--ink);font:700 .98rem/1.2 var(--f-menu);text-align:start;cursor:pointer;transition:background-color .2s,color .2s}
.lang-list button:hover{background:var(--red);color:#fff}
.lang-list button[aria-current="true"]{box-shadow:inset 6px 0 0 var(--red);padding-inline-start:1.4em}
.lang-list button[aria-current="true"]:hover{box-shadow:inset 6px 0 0 var(--ink)}
.lang-list button:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
.i18n-wait body{visibility:hidden}

/* other scripts: system faces for the letters Archivo and Hanken do not have, no letter tracking on joined or ideographic text */
html[lang="ar"]{--f-menu:"Manrope Variable","Segoe UI","Geeza Pro","Noto Sans Arabic","Noto Naskh Arabic",Tahoma,system-ui,sans-serif;--f-display:"Archivo Variable","Archivo","Segoe UI","Geeza Pro","Noto Sans Arabic","Noto Naskh Arabic",Tahoma,Arial,sans-serif;--f-body:"Hanken Grotesk Variable","Segoe UI","Geeza Pro","Noto Sans Arabic","Noto Naskh Arabic",Tahoma,system-ui,sans-serif}
html[lang="zh"]{--f-menu:"Manrope Variable","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC","WenQuanYi Micro Hei",system-ui,sans-serif;--f-display:"Archivo Variable","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC","WenQuanYi Micro Hei",sans-serif;--f-body:"Hanken Grotesk Variable","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC","WenQuanYi Micro Hei",system-ui,sans-serif}
html[lang="ar"] :is(h1,h2,h3,.stat b,.route .num),html[lang="zh"] :is(h1,h2,h3){letter-spacing:0}
html[lang="ar"] body,html[lang="zh"] body{line-height:1.75}
/* long words in other languages: break inside the word instead of pushing the layout wider */
html:not([lang="nl"]) :is(h1,h2,h3,h4,.btn,.ledger li,.services-list a){overflow-wrap:anywhere;hyphens:auto}
html:not([lang="nl"]) .stack{grid-template-columns:minmax(0,1fr)}

/* hero: a full photograph with a black slab pushed in from the left edge */
.hero{position:relative;isolation:isolate;min-height:clamp(620px,calc(100svh - var(--head)),880px);display:flex;align-items:flex-end;justify-content:space-between;overflow:hidden;background:var(--ink)}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;animation:settle 2.4s var(--ease) both}
.hero-slab{width:calc(var(--edge) + min(780px,56vw));padding:clamp(32px,4.4vw,64px) clamp(28px,4vw,56px) clamp(36px,4.6vw,64px) var(--edge);background:rgba(13,13,14,.4);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:slab 1s var(--ease-io) both}
.hero h1{font-size:clamp(2.3rem,6.1vw,5.6rem);line-height:.96;font-stretch:120%;letter-spacing:-.035em}
.ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.ln>span{display:block;animation:rise 1.1s var(--ease) both;animation-delay:calc(var(--i,0) * .1s + .55s)}
.ap{margin-inline:-.05em}
.ln:nth-child(2)>span{--i:1}
.ln:nth-child(3)>span{--i:2}
.hero .lead{max-width:42ch;margin-top:clamp(20px,2.6vw,32px);color:rgba(255,255,255,.88);animation:fade 1s 1s both}
.hero .btn-row{margin-top:clamp(24px,3vw,36px);animation:fade 1s 1.15s both}
.hero-meta{align-self:flex-end;width:min(320px,24vw);margin-right:max(var(--edge),88px);display:grid;animation:fade 1s 1.3s both}
.rating{display:grid;gap:10px;padding:22px 24px;background:#fff;color:var(--ink);font:600 .95rem/1.35 var(--f-body)}
.stars{display:flex;gap:4px;color:var(--red)}
.stars .ico{width:1.1rem;height:1.1rem}
.hero-meta .open-now{padding:22px 24px;background:var(--red);color:#fff;align-items:flex-start}
.open-now{display:inline-flex;align-items:center;gap:.7em;font:600 .95rem/1.35 var(--f-body);color:inherit}
.open-now::before{content:"";width:.62em;height:.62em;background:currentColor;flex:none}
.open-now[data-state="open"]::before{animation:pulse 2s ease-in-out infinite}
.hero-meta .open-now::before{margin-top:.35em}
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-inline:2px solid var(--ink)}
.trust li{display:grid;gap:6px;align-content:start;padding:clamp(24px,3vw,40px) clamp(18px,2.2vw,32px)}
.trust li+li{border-left:2px solid var(--ink)}
.trust .ico{width:52px;height:52px;padding:13px;background:var(--red);color:#fff;margin-bottom:14px}
.trust b{font:750 1.1rem/1.2 var(--f-display);font-stretch:108%}
.trust span{color:var(--grey-l);font-size:.96rem;line-height:1.5}

/* inner page header: title and one sentence on ink, a photograph on the right, a red bar that draws in */
.phead{position:relative;overflow:hidden;background:var(--ink);color:#fff;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:clamp(380px,34vw,520px)}
.phead--plain{grid-template-columns:minmax(0,1fr);min-height:0}
.phead::after{content:"";position:absolute;z-index:3;left:0;right:0;bottom:0;height:12px;background:var(--red);transform-origin:left;animation:bar 1.2s var(--ease-io) .15s both}
.phead-grid{display:grid;gap:clamp(18px,2.4vw,32px);align-content:center;padding:clamp(48px,6vw,96px) clamp(24px,4vw,64px) clamp(56px,7vw,104px) var(--edge)}
.phead-grid>*{max-width:44rem}
.phead--plain .phead-grid>*{max-width:60rem}
.phead h1{font-size:clamp(2rem,4.4vw,4.1rem)}
.phead .lead{color:var(--grey-d);max-width:48ch}
.phead-photo{position:relative;min-height:100%;background:var(--ink-2);animation:wipe 1.1s var(--ease-io) .1s both}
.phead-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phead-photo::after{content:"";position:absolute;left:0;top:0;width:clamp(36px,4vw,56px);aspect-ratio:1;background:var(--red)}

/* services: touching tiles, ink rules between them */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--ink);border:2px solid var(--ink)}
.tiles li{display:flex}
.tile{display:grid;grid-template-rows:auto 1fr;width:100%;background:#fff;color:var(--ink);text-decoration:none;transition:background-color .3s,color .3s}
.tile figure{aspect-ratio:3/2;overflow:hidden;background:var(--ink-2)}
.tile img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .5s,transform 1s var(--ease)}
.tile-b{display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:clamp(22px,2.4vw,32px)}
.tile h3{font-size:clamp(1.25rem,1.8vw,1.55rem)}
.tile p{color:var(--grey-l);transition:color .3s}
.tile-go{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;font:700 .95rem/1.2 var(--f-display);font-stretch:108%}
.tile-go .ico{width:52px;height:52px;padding:14px;background:var(--red);color:#fff;stroke-width:2.4;transition:transform .4s var(--ease)}
.tile:hover{background:var(--ink);color:#fff}
.tile:hover p{color:var(--grey-d)}
.tile:hover img{filter:none;transform:scale(1.06)}
.tile:hover .tile-go .ico{transform:translateX(6px)}

/* photographs: plain rectangles with a red corner block; a red block wipes away as they enter */
.ph{position:relative;isolation:isolate}
.ph::after{content:"";position:absolute;z-index:3;right:0;bottom:0;width:clamp(32px,4vw,56px);aspect-ratio:1;background:var(--red)}
.ph-in{position:relative;overflow:hidden;aspect-ratio:var(--ratio,4/5);background:var(--ink-2)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.ph:hover img{transform:scale(1.03)}
.curtain .ph-in::before{content:"";position:absolute;inset:0;z-index:2;background:var(--red);transform-origin:100% 50%;transform:scaleX(0);transition:transform 1s var(--ease-io)}
.curtain img{transition:transform 1.6s var(--ease-io)}
.curtain.armed .ph-in::before{transform:scaleX(1);transition:none}
.curtain.armed img{transform:scale(1.15)}

/* about */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,112px);align-items:center}
.about-art{max-width:600px;width:100%}
.about-copy{display:grid;gap:clamp(22px,3vw,34px);justify-items:start}
.dark .about-copy .prose{color:var(--grey-d)}
.paper .about-copy .prose{color:#33343a}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(40px,6vw,80px)}
.stat{display:grid;gap:10px;align-content:space-between;padding:clamp(22px,3vw,40px);background:var(--ink-3);color:#fff}
.stat:nth-child(1){background:var(--red)}
.stat:nth-child(2){background:#fff;color:var(--ink)}
.stat b{display:block;font:900 clamp(2.3rem,4.6vw,4.2rem)/1 var(--f-display);font-stretch:112%;letter-spacing:-.03em;white-space:nowrap}
.stat span{display:block;font:600 1rem/1.35 var(--f-body)}

/* ---- over ons strip: the photo stays put while the page scrolls (also on iPhone), three red blocks on top ---- */
.fixbg{position:relative;isolation:isolate;clip-path:inset(0);display:grid;min-height:clamp(560px,80vh,800px)}
.fixbg-img{position:fixed;top:0;left:0;z-index:-1;width:100%;height:100vh;height:100lvh;object-fit:cover;object-position:62% 50%}
.fixbg::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(13,13,14,.5)}
.fixbg-in{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(48px,8vw,120px);padding-block:clamp(48px,6vw,88px)}
.fixbg-top{display:grid;gap:clamp(20px,2.4vw,32px);justify-items:start}
.fixbg-top h2{font-size:clamp(2.4rem,6.5vw,5.4rem)}
.stats--red{margin-top:0;gap:clamp(8px,1.2vw,16px)}
.stats--red .stat:nth-child(n){background:var(--red);color:#fff}

/* ---- film: a portrait video with poster and the browser's own controls, it never starts by itself ---- */
.film{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,7vw,112px);align-items:center}
.film-box{position:relative;isolation:isolate;width:100%;max-width:380px;justify-self:start;background:var(--ink)}
.film-box::before{content:"";position:absolute;z-index:3;left:0;top:0;width:clamp(32px,4vw,56px);aspect-ratio:1;background:var(--red);pointer-events:none}
.film-box video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:var(--ink)}
.film .btn-row{margin-top:6px}
.film-btn{position:absolute;z-index:4;inset-inline-end:0;bottom:0;display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:0;background:var(--ink);color:#fff;cursor:pointer;transition:background-color .25s}
.film-btn[hidden],.film-box:not(.is-auto) .film-btn{display:none}
.film-btn:hover{background:var(--red)}
.film-btn:focus-visible{outline:3px solid #fff;outline-offset:-7px}
.film-btn .ico{width:22px;height:22px;stroke-width:2.6}

/* export route: four tiles, a red bar draws across the top of each */
.route{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--ink);border:2px solid var(--ink)}
.route li{position:relative;display:grid;gap:14px;align-content:start;background:#fff;color:var(--ink);padding:calc(clamp(22px,2.6vw,36px) + 10px) clamp(22px,2.6vw,36px) clamp(22px,2.6vw,36px)}
.route li::after{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--red);transform-origin:left;transform:scaleX(1);transition:transform 1s var(--ease-io) var(--rd,0s)}
.route.armed li::after{transform:scaleX(0);transition:none}
.route-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.route .num{font:900 clamp(3rem,5.2vw,4.8rem)/.9 var(--f-display);font-stretch:125%;letter-spacing:-.04em}
.route-ico{display:grid;place-items:center;width:52px;height:52px;background:var(--ink);color:#fff}
.route h3{font-size:1.25rem}
.route p{color:var(--grey-l);font-size:.98rem;line-height:1.6}

/* two big blocks: insurance on ink, financing on red */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.duo>div{display:grid;gap:22px;align-content:start;justify-items:start;padding:clamp(44px,6vw,96px) clamp(24px,5vw,80px)}
.duo>div:first-child{padding-left:var(--edge);background:var(--ink);color:#fff}
.duo>div:last-child{padding-right:var(--edge);background:var(--red);color:#fff}
.duo .ico{width:60px;height:60px;padding:15px;stroke-width:2.2}
.duo>div:first-child .ico{background:var(--red)}
.duo>div:last-child .ico{background:var(--ink)}
.duo h2{font-size:clamp(1.8rem,3.2vw,2.8rem);max-width:17ch}
.duo p{max-width:50ch}
.duo>div:first-child p{color:var(--grey-d)}

/* closing band: red message block, ink block of contact rows */
.cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.cta-l{background:var(--red);color:#fff;padding:clamp(48px,7vw,112px) clamp(24px,5vw,80px) clamp(48px,7vw,112px) var(--edge)}
.cta h2{font-size:clamp(2rem,4.4vw,4rem)}
.cta .lead{margin-top:22px;max-width:40ch}
.cta .open-now{margin-top:26px}
.cta-links{display:grid;grid-auto-rows:1fr;background:var(--ink);color:#fff}
.cta-links a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(22px,2.6vw,34px) var(--edge) clamp(22px,2.6vw,34px) clamp(24px,5vw,80px);border-bottom:2px solid var(--ink-3);text-decoration:none;color:#fff;font:800 clamp(1.1rem,1.9vw,1.55rem)/1.2 var(--f-display);font-stretch:112%;transition:background-color .3s,color .3s;overflow-wrap:anywhere}
.cta-links a:last-child{border-bottom:0}
.cta-links a:hover{background:#fff;color:var(--ink)}
.cta-links .ico{width:50px;height:50px;padding:13px;background:var(--red);color:#fff;stroke-width:2.4;transition:transform .35s var(--ease)}
.cta-links a:hover .ico{transform:translateX(6px)}

/* lists */
.ticks{display:grid;gap:14px}
.ticks li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.ticks .ico{width:28px;height:28px;padding:5px;background:var(--red);color:#fff;stroke-width:3;margin-top:-.05em}
.services-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--ink);border:2px solid var(--ink)}
.services-list li{display:flex;gap:18px;align-items:center;padding:20px 26px;background:#fff;color:var(--ink);font:700 1.15rem/1.2 var(--f-display);font-stretch:108%;transition:background-color .3s,color .3s}
.services-list .ico{width:48px;height:48px;padding:11px;background:var(--red);color:#fff}
.services-list li:hover{background:var(--ink);color:#fff}
.ledger{border-top:2px solid currentColor}
.ledger li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 28px;align-items:baseline;padding:26px 0;border-bottom:2px solid currentColor}
.ledger h3{grid-column:1;font-size:1.35rem}
.ledger p{grid-column:1;color:var(--grey-l);font-size:.98rem;max-width:56ch}
.ledger .price{grid-column:2;grid-row:1/3;font:800 clamp(1.5rem,2.6vw,2.1rem)/1 var(--f-display);font-stretch:112%;white-space:nowrap;align-self:center;text-align:right}
.ledger .price small{display:block;font:600 .8rem/1.2 var(--f-body);color:var(--grey-l);margin-bottom:6px}
.ledger .price.ask{font:700 .95rem/1.2 var(--f-display);font-stretch:108%;color:var(--grey-l)}
.steps{counter-reset:st;display:grid;gap:2px;background:var(--ink);border:2px solid var(--ink)}
.steps li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 20px;padding:24px;background:#fff;counter-increment:st}
.steps li::before{content:counter(st);grid-row:1/3;display:grid;place-items:center;width:56px;height:56px;background:var(--red);color:#fff;font:900 1.5rem/1 var(--f-display);font-stretch:112%}
.steps p{color:var(--grey-l)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:.7em;min-height:56px;padding:.5em 1.3em;border:2px solid #fff;font:700 .95rem/1.2 var(--f-display);font-stretch:104%}
.chip img{height:26px;width:auto;background:#fff;padding:2px 6px}
.paper .chip{border-color:var(--ink)}
.quality{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,7vw,112px);align-items:center}
.hours{display:grid}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:2px solid rgba(255,255,255,.22)}
.hours li:first-child{border-top:2px solid rgba(255,255,255,.22)}
.paper .hours li,.band .hours li,.panel .hours li{border-color:var(--ink)}
.hours li b{font-weight:700}
.facts{display:grid;gap:24px}
.facts div{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.facts .ico{width:48px;height:48px;padding:11px;background:var(--ink);color:#fff}
.facts b{display:block;font:750 1.1rem/1.3 var(--f-display);font-stretch:108%;margin-bottom:2px}
.facts a{text-decoration:none}
.facts a:hover{text-decoration:underline;text-decoration-thickness:2px}

/* forms: a white block with a red top bar, boxed fields */
.panel{background:#fff;color:var(--ink);color-scheme:light;border:2px solid var(--ink);border-top:12px solid var(--red);padding:clamp(24px,3.6vw,52px)}
.panel h2,.panel h3{margin-bottom:8px}
.panel .facts .ico{background:var(--red)}
.form{display:grid;gap:22px;margin-top:28px}
.form .row-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.field{display:grid;gap:8px;min-width:0}
.field label{font:700 .85rem/1.2 var(--f-display);font-stretch:108%}
.field input,.field textarea,.field select{width:100%;min-height:56px;padding:.7em .9em;background:var(--concrete);border:2px solid var(--ink);border-radius:0;color:var(--ink);font:inherit;transition:background-color .2s,box-shadow .2s}
.field textarea{min-height:130px;resize:vertical}
.field input:hover,.field textarea:hover{background:#fff}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:none;background-color:#fff;box-shadow:0 0 0 3px var(--red)}
.field input:-webkit-autofill,.field textarea:-webkit-autofill{-webkit-text-fill-color:var(--ink);-webkit-box-shadow:0 0 0 60px var(--concrete) inset;caret-color:var(--ink)}
.field--photos{position:relative;gap:10px}
.field .lab{font:700 .85rem/1.2 var(--f-display);font-stretch:108%}
.field .lab i{font:500 .85rem/1.2 var(--f-body);font-style:normal;color:var(--grey-l)}
.field .drop-in{position:absolute;left:0;top:0;width:1px;height:1px;min-height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.field .drop{font:400 1rem/1.4 var(--f-body);display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:14px 16px;background:var(--concrete);border:2px solid var(--ink);cursor:pointer;transition:background-color .2s,box-shadow .2s}
.drop:hover,.drop.is-over{background:#fff}
.drop.is-over{box-shadow:0 0 0 3px var(--red)}
.drop-in:focus-visible+.drop{background:#fff;box-shadow:0 0 0 3px var(--red)}
.drop-ico{display:grid;place-items:center;width:56px;height:56px;background:var(--red);color:#fff}
.drop-ico .ico{width:28px;height:28px}
.drop b{display:block;font:700 1rem/1.2 var(--f-display);font-stretch:108%}
.drop small{display:block;margin-top:4px;color:var(--grey-l);font-size:.86rem;line-height:1.45}
.thumbs{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;margin:0;padding:0}
.thumbs[hidden]{display:none}
.thumbs li{position:relative;aspect-ratio:1;background:var(--ink);border:2px solid var(--ink);animation:pop .35s var(--ease) both}
.thumbs img{display:block;width:100%;height:100%;object-fit:cover}
.thumbs button{position:absolute;top:-2px;right:-2px;display:grid;place-items:center;width:34px;height:34px;padding:0;background:var(--ink);color:#fff;border:0;border-radius:0;cursor:pointer;transition:background-color .2s}
.thumbs button:hover{background:var(--red)}
.thumbs button .ico{width:16px;height:16px;stroke-width:2.8}
.drop-msg{min-height:1.3em;font-size:.88rem;line-height:1.45;color:var(--grey-l)}
.drop-msg.err{color:var(--red);font-weight:600}
@keyframes pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.form-note{font-size:.88rem;color:var(--grey-l);line-height:1.55}
.form-msg{padding:16px 18px;font-weight:600;font-size:.96rem;line-height:1.55}
.form-msg[hidden]{display:none}
.form-msg.ok{background:var(--ink);color:#fff;border-left:8px solid var(--ok)}
.form-msg.err{background:var(--red);color:#fff}
.form-msg a{color:inherit}
.hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

/* voorraad embed */
.stock{min-height:520px;background:#fff;border:2px solid var(--ink);overflow:hidden}
.stock iframe{display:block;width:100%;border:0}
.quote{background:#fff;border:2px solid var(--ink);overflow:hidden}
.quote iframe{display:block;width:100%;border:0;height:800px}
.stock-help{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}

/* footer */
.footer{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-top:2px solid var(--ink-3);padding-top:clamp(56px,7vw,104px)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(32px,4vw,64px);padding-bottom:clamp(48px,6vw,80px)}
.foot-grid h2{font:800 1rem/1.2 var(--f-display);font-stretch:112%;letter-spacing:0;margin-bottom:22px}
.foot-grid ul{display:grid;gap:11px}
.foot-grid a{text-decoration:none;color:var(--grey-d);transition:color .2s}
.foot-grid .brand{color:#fff}
.foot-grid a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.25em}
.foot-grid address{font-style:normal;color:var(--grey-d);display:grid;gap:8px}
.foot-grid .hours-foot li{color:var(--grey-d)}
.foot-brand{display:grid;gap:24px;justify-items:start;align-content:start}
.foot-brand p{color:var(--grey-d);max-width:34ch}
.socials{display:flex;gap:2px}
.socials a{display:grid;place-items:center;width:52px;height:52px;background:var(--ink-3);color:#fff;transition:background-color .25s}
.socials a:hover{background:var(--red);color:#fff}
.follow,.mfollow{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px}
.follow{margin-top:30px}
.follow>b,.mfollow>b{font:800 .95rem/1 var(--f-display);font-stretch:112%}
.on-red .socials a{background:var(--ink)}
.on-red .socials a:hover{background:#fff;color:var(--ink)}
.mnav .mfollow{margin:28px var(--gutter) 0}
.mnav .mfollow a{display:grid;place-items:center;width:56px;height:56px;padding:0;border:0;font-size:1rem}
.qr{display:flex;gap:16px;align-items:center;margin-top:6px}
.qr img{width:84px;height:84px;background:#fff;padding:6px}
.qr span{font-size:.88rem;color:var(--grey-d);line-height:1.45}
.legal{border-top:2px solid var(--ink-3);padding-block:24px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:8px 32px;font-size:.86rem;color:var(--grey-d)}
.foot-mark{display:block;margin-top:clamp(8px,2vw,24px);font:900 clamp(3rem,15.4vw,15.6rem)/.8 var(--f-display);font-stretch:125%;letter-spacing:-.03em;text-align:center;white-space:nowrap;color:var(--ink-2);user-select:none;pointer-events:none;margin-bottom:-.05em}
.fab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:40;width:60px;height:60px;background:var(--ink);color:#fff;border:2px solid #fff;display:grid;place-items:center;transition:background-color .25s,transform .3s var(--ease)}
.fab:hover{background:var(--red);transform:translateY(-3px)}
.fab .ico{width:1.7rem;height:1.7rem}

/* page transitions (multi-page cross fade, supported browsers only) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .2s ease both}
::view-transition-new(root){animation:vt-in .5s var(--ease) both}

@keyframes settle{from{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes slab{from{transform:translateX(-100%)}}
@keyframes rise{from{transform:translateY(108%)}}
@keyframes fade{from{opacity:0;transform:translateY(14px)}}
@keyframes bar{from{transform:scaleX(0)}}
@keyframes wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes pulse{50%{opacity:.25}}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* ---- later additions, same blocks: select arrow, frequently asked questions, other-vehicle links, chips on paper ---- */
.field select{appearance:none;-webkit-appearance:none;padding-inline-end:2.8em;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E4151F' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.field select:hover{background-color:#fff}
.paper .chip{border-color:var(--ink)}
.chips--tight{gap:8px}
.chips--tight .chip{min-height:46px;padding:.35em 1.05em;font-size:.9rem}
.faq{border-top:2px solid currentColor}
.faq details{border-bottom:2px solid currentColor}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;cursor:pointer;list-style:none;font:750 clamp(1.02rem,1.5vw,1.25rem)/1.25 var(--f-display);font-stretch:108%;letter-spacing:-.012em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover>span:first-child{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.25em;text-decoration-color:var(--red)}
.faq-i{position:relative;flex:none;width:44px;height:44px;background:var(--red)}
.faq-i::before,.faq-i::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:3px;background:#fff;transform:translate(-50%,-50%);transition:transform .35s var(--ease)}
.faq-i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .faq-i::after{transform:translate(-50%,-50%) rotate(0)}
.faq-a{padding:0 0 26px;max-width:66ch;color:var(--grey-l);animation:faq-in .4s var(--ease)}
.faq-a p+p{margin-top:.9em}
.dark .faq-a{color:var(--grey-d)}
@keyframes faq-in{from{opacity:0;transform:translateY(-8px)}}
.kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--ink);border:2px solid var(--ink)}
.kinds li{display:flex}
.kinds a{flex:1;display:grid;grid-template-rows:auto auto 1fr auto;gap:14px;padding:clamp(24px,3vw,40px);background:#fff;color:var(--ink);text-decoration:none;transition:background-color .3s,color .3s}
.kind-ico{display:grid;place-items:center;width:64px;height:64px;background:var(--red);color:#fff}
.kind-ico .ico{width:32px;height:32px;stroke-width:2.2}
.kinds p{color:var(--grey-l);transition:color .3s}
.kinds .tile-go{margin-top:0;padding-top:10px}
.kinds a:hover{background:var(--ink);color:#fff}
.kinds a:hover p{color:var(--grey-d)}
.kinds a:hover .tile-go .ico{transform:translateX(6px)}
.dark .kinds{border-color:var(--ink-3);background:var(--ink-3)}
.sub-h{font-size:1.3rem;margin-top:10px}
.sub-h--first{margin:0 0 20px}
.notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px);margin-top:clamp(32px,5vw,64px)}
.notes--one{grid-template-columns:minmax(0,1fr)}

/* ---- ticker: two rows of words, the top row drifts right, the bottom row drifts left ---- */
.ticker{background:var(--ink);color:#fff;border-bottom:2px solid var(--ink-3);overflow:hidden;direction:ltr;padding-block:clamp(10px,1.2vw,16px)}
.tk-row{display:flex;overflow:hidden}
.tk-row+.tk-row{margin-top:clamp(5px,.8vw,10px)}
.tk-track{display:flex;flex:none;width:max-content;will-change:transform;animation:tk-left var(--tk,84s) linear infinite}
.tk-row--r .tk-track{animation-name:tk-right}
.tk-set{display:flex;flex:none;margin:0;padding:0;list-style:none}
.tk-set li{flex:none;padding-inline:clamp(14px,2vw,32px);font:600 clamp(.9rem,1.4vw,1.3rem)/1.25 var(--f-display);font-stretch:112%;white-space:nowrap;unicode-bidi:plaintext}
.tk-set .tk-mark{color:var(--red);font-weight:800;font-stretch:125%;letter-spacing:.02em}
.ticker:hover .tk-track{animation-play-state:paused}
@keyframes tk-left{to{transform:translateX(-50%)}}
@keyframes tk-right{from{transform:translateX(-50%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .ticker .tk-row{display:block;overflow:visible}
  .ticker .tk-track{width:auto;display:block;transform:none}
  .ticker .tk-set{flex-wrap:wrap;justify-content:center}
  .ticker .tk-set:not(:first-child){display:none}
}

/* ---- contact: plain page, rules instead of boxes ---- */
.contact{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,7vw,112px);align-items:start}
.contact h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:clamp(8px,1.2vw,16px)}
.contact .form{margin-top:clamp(16px,2vw,24px)}
.info{display:grid;gap:clamp(40px,5vw,64px);align-content:start}
.rows{display:grid;margin-top:clamp(16px,2vw,24px)}
.rows>div{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:4px 24px;padding:5px 0}
.rows dt{font:750 .98rem/1.45 var(--f-display);font-stretch:108%}
.rows dd{margin:0;line-height:1.5;overflow-wrap:anywhere}
.rows a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em;text-decoration-color:transparent;transition:text-decoration-color .2s}
.rows a:hover{text-decoration-color:var(--red)}
.rows .link{display:inline-block;margin-top:6px}
.contact .hours{margin-top:clamp(8px,1vw,12px)}
.contact .hours li{padding:5px 0;border:0}
.contact .hours+.muted{margin-top:8px}
.contact .open-now{margin-top:6px}
.contact .muted{margin-top:14px;font-size:.95rem}

/* ---- map: a still image of the neighbourhood, the pin links to Google Maps ---- */
.map{position:relative;border-block:2px solid var(--ink);background:var(--concrete);overflow:hidden}
.map-link{position:relative;display:block;height:clamp(380px,46vw,640px);color:#fff;text-decoration:none}
.map-link img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:filter .3s}
.map-link:hover img{filter:contrast(1.04)}
.pin{position:absolute;left:50%;top:50%;width:56px;height:56px;transform:translate(-50%,calc(-100% - 14px))}
.pin-mark{position:relative;display:grid;place-items:center;width:56px;height:56px;background:var(--red);color:#fff;transition:background-color .25s,transform .35s var(--ease)}
.pin-mark .ico{width:28px;height:28px}
.pin-mark::after{content:"";position:absolute;left:50%;top:100%;width:0;height:0;margin-left:-12px;border:12px solid transparent;border-top:14px solid var(--red);border-bottom:0;transition:border-top-color .25s}
.pin-tag{position:absolute;inset-inline-start:100%;top:0;display:grid;align-content:center;gap:3px;height:56px;padding:0 20px;background:var(--ink);color:#fff;white-space:nowrap}
.pin-tag b{font:800 1rem/1.1 var(--f-display);font-stretch:112%}
.pin-tag span{font-size:.88rem;line-height:1.1;color:var(--grey-d)}
.map-link:hover .pin-mark,.map-link:focus-visible .pin-mark{background:var(--ink);transform:translateY(-6px)}
.map-link:hover .pin-mark::after,.map-link:focus-visible .pin-mark::after{border-top-color:var(--ink)}
.map-link:focus-visible{outline:4px solid var(--red);outline-offset:-4px}
.map-credit{position:absolute;right:0;bottom:0;padding:5px 10px;background:rgba(255,255,255,.88);color:var(--ink);font-size:.74rem;line-height:1.3;text-decoration:none}
.map-credit:hover{text-decoration:underline}

/* ---- nieuws: overzicht (een groot bericht, daaronder blokken) en de pagina van een bericht ---- */
.nmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font:700 .92rem/1.2 var(--f-body);font-variant-numeric:tabular-nums}
.ncat{display:inline-block;padding:6px 11px;background:var(--red);color:#fff;font:700 .84rem/1 var(--f-display);font-stretch:108%}
.nlist{display:grid;gap:2px;background:var(--ink);border:2px solid var(--ink)}
.nfeat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);background:var(--ink);color:#fff}
.nfeat-main{display:grid;gap:clamp(28px,3.4vw,48px);align-content:space-between;justify-items:start;padding:clamp(28px,4vw,56px)}
.nfeat-main>div{display:grid;gap:clamp(16px,2vw,24px)}
.nfeat h2{font-size:clamp(1.9rem,3.6vw,3.2rem);max-width:20ch}
.nfeat h2 a{text-decoration:none}
.nfeat h2 a:hover{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--red);text-underline-offset:.15em}
.nfeat .lead{color:var(--grey-d);max-width:48ch}
.paper .nfeat .btn--red{--fill:#fff}
.paper .nfeat .btn--red:hover{color:var(--ink)}
.nfacts{display:grid;grid-auto-rows:1fr;gap:2px;background:var(--ink)}
.nfacts li{display:grid;gap:8px;align-content:center;padding:clamp(22px,3vw,40px);background:var(--red);color:#fff}
.nfacts b{display:block;font:900 clamp(2rem,3.6vw,3.3rem)/1 var(--f-display);font-stretch:112%;letter-spacing:-.03em;overflow-wrap:anywhere}
.nfacts span{display:block;font:600 1rem/1.35 var(--f-body)}
.ngrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:var(--ink);border:2px solid var(--ink)}
.nlist .ngrid{border:0}
.ngrid li{display:flex}
.ngrid li:last-child:nth-child(odd){grid-column:1/-1}
.ntile{grid-template-rows:1fr auto;gap:clamp(20px,2.4vw,32px);padding:clamp(24px,3vw,40px)}
.ntile-b{display:grid;gap:14px;align-content:start}
.ntile h3{font-size:clamp(1.3rem,2vw,1.75rem)}
.ntile .tile-go{margin-top:0}
.nmore-h{margin-bottom:clamp(24px,3vw,40px);font-size:clamp(1.6rem,3vw,2.4rem)}
.nhead{display:grid;gap:clamp(14px,2vw,24px)}
.nback{display:inline-flex;align-items:center;gap:.7em;margin-bottom:clamp(18px,2.4vw,28px);font:700 .95rem/1 var(--f-display);font-stretch:108%;text-decoration:none;color:var(--grey-d);transition:color .2s}
.nback .ico{width:1.2rem;height:1.2rem;transform:scaleX(-1)}
.nback:hover{color:#fff}
.nart{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,96px);align-items:start}
.ncol{display:grid;gap:clamp(32px,4vw,56px);justify-items:start;min-width:0}
.ntext{font-size:clamp(1.06rem,1.25vw,1.18rem);color:#26272b}
.ntext h2{font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.1;margin:1.7em 0 .6em}
.ntext h2:first-child{margin-top:0}
.nsrc{display:grid;gap:14px;width:100%;padding-top:clamp(20px,2.4vw,32px);border-top:2px solid var(--ink)}
.nsrc h2{font-size:clamp(1.2rem,1.8vw,1.5rem)}
.nsrc ul{display:grid;gap:8px}
.nsrc .muted{max-width:60ch;font-size:.92rem}
.nside{position:sticky;top:calc(var(--head) + 24px);display:grid;gap:16px;min-width:0}
.nside h2{font-size:clamp(1.2rem,1.8vw,1.5rem)}
html[dir="rtl"] .phead[dir="ltr"] .phead-grid{padding:clamp(48px,6vw,96px) clamp(24px,4vw,64px) clamp(56px,7vw,104px) var(--edge)}
html[dir="rtl"] [dir="ltr"] .ico--dir{transform:none}
html[dir="rtl"] [dir="ltr"] .tile:hover .tile-go .ico--dir{transform:translateX(6px)}
html[dir="rtl"] [dir="ltr"] .nback .ico--dir{transform:scaleX(-1)}
@media (max-width:960px){
  .nfeat,.nart{grid-template-columns:minmax(0,1fr)}
  .nfeat .nfacts,.nside .nfacts{grid-auto-rows:auto;grid-template-columns:repeat(3,minmax(0,1fr))}
  .nside{position:static;order:-1}
}
@media (max-width:560px){
  .ngrid,.nfeat .nfacts,.nside .nfacts{grid-template-columns:minmax(0,1fr)}
}

/* responsive */
@media (max-width:1180px){
  .nav a,.nav .caret{font-size:.9rem;padding-inline:.9em}
  .head-cta span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .head-cta a{padding:0 22px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .route{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  :root{--head:68px}
  .nav,.head-cta{display:none}
  .menu-btn{display:grid;margin-left:0}
  .lang{position:static;margin-left:auto}
  .lang-list{left:0;right:0;width:auto}
  .hero{display:block;min-height:0}
  .hero-media{position:relative;aspect-ratio:4/3;max-height:62svh;width:100%}
  .hero-slab{width:auto;padding:36px var(--gutter);animation:none;background:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
  .hero h1{font-size:clamp(2.2rem,8vw,3.6rem)}
  .hero-meta{width:auto;margin:0;grid-template-columns:repeat(2,minmax(0,1fr))}
  .about,.quality,.split,.sec-head,.film{grid-template-columns:minmax(0,1fr)}
  .film-box{order:2;max-width:340px}
  .about-art{max-width:520px}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust li:nth-child(3){border-left:0}
  .trust li:nth-child(n+3){border-top:2px solid var(--ink)}
  .duo,.cta{grid-template-columns:minmax(0,1fr)}
  .duo>div:first-child,.duo>div:last-child,.cta-l{padding-inline:var(--gutter)}
  .cta-links a{padding-inline:var(--gutter)}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
  .phead{grid-template-columns:minmax(0,1fr);min-height:0}
  .phead-grid{padding:48px var(--gutter) 40px}
  .phead-photo{min-height:0;aspect-ratio:16/9}
  .services-list,.kinds,.notes,.contact{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  h1,h2{font-stretch:104%}
  .quote iframe{height:880px}
  h1{font-size:clamp(2rem,9.4vw,2.6rem)}
  .hero h1{font-size:clamp(2.2rem,11vw,3.6rem);font-stretch:114%}
  .phead-photo{aspect-ratio:3/2}
  .fab{width:52px;height:52px}
  .hero-media{aspect-ratio:1/1;max-height:none}
  .hero-meta{grid-template-columns:minmax(0,1fr)}
  .form .row-2{grid-template-columns:minmax(0,1fr)}
  .trust{grid-template-columns:minmax(0,1fr)}
  .trust li+li,.trust li:nth-child(n+3){border-left:0;border-top:2px solid var(--ink)}
  .tiles,.route{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  .btn-row .btn{flex:1 1 auto}
  .ledger li{grid-template-columns:minmax(0,1fr)}
  .ledger .price{grid-column:1;grid-row:auto;text-align:left}
  .stats{grid-template-columns:minmax(0,1fr)}
  .stat{grid-template-columns:1fr auto;align-items:center}
  .stat b{font-size:clamp(2rem,10vw,2.6rem)}
  .steps li{padding:18px}
  .drop{gap:14px;padding:12px}
  .drop-ico{width:48px;height:48px}
  .thumbs{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
  .thumbs button{width:40px;height:40px}
  .rows>div{grid-template-columns:minmax(0,1fr)}
  .pin-tag{inset-inline-start:50%;top:auto;bottom:calc(100% + 12px);transform:translateX(-50%);justify-items:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .fixbg-img{position:absolute;height:100%}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---- right-to-left (Arabic): mirrors every rule above that points left or right ---- */
@keyframes slab-r{from{transform:translateX(100%)}}
html[dir="rtl"] .skip{left:auto;right:var(--gutter)}
html[dir="rtl"] .bar{padding-left:0;padding-right:var(--edge)}
html[dir="rtl"] .brand{direction:ltr;margin-right:0;margin-left:24px}
html[dir="rtl"] .bar>nav{margin-left:0;margin-right:auto}
html[dir="rtl"] .nav .caret{padding:0 0 0 1em;margin-left:0;margin-right:-.9em}
html[dir="rtl"] .sub{left:auto;right:0}
html[dir="rtl"] .lang{margin-left:0;margin-right:16px}
html[dir="rtl"] .head-cta{margin-left:0;margin-right:16px}
html[dir="rtl"] .lang-list{right:auto;left:0}
html[dir="rtl"] .menu-btn{margin-left:0;margin-right:auto}
html[dir="rtl"] .mnav a[aria-current="page"]{box-shadow:inset -8px 0 0 var(--red)}
html[dir="rtl"] .mnav .msub a{padding:1em calc(var(--gutter) + 14px) 1em var(--gutter)}
html[dir="rtl"] .hero-media{transform:scaleX(-1)}
html[dir="rtl"] .hero-slab{padding:clamp(32px,4.4vw,64px) var(--edge) clamp(36px,4.6vw,64px) clamp(28px,4vw,56px);animation-name:slab-r}
html[dir="rtl"] .hero-meta{margin-right:0;margin-left:max(var(--edge),88px)}
html[dir="rtl"] .trust li+li{border-left:0;border-right:2px solid var(--ink)}
html[dir="rtl"] .phead::after,html[dir="rtl"] .route li::after{transform-origin:right}
html[dir="rtl"] .phead-grid{padding:clamp(48px,6vw,96px) var(--edge) clamp(56px,7vw,104px) clamp(24px,4vw,64px)}
html[dir="rtl"] .phead-photo::after{left:auto;right:0}
html[dir="rtl"] .duo>div:first-child{padding-left:clamp(24px,5vw,80px);padding-right:var(--edge)}
html[dir="rtl"] .duo>div:last-child{padding-right:clamp(24px,5vw,80px);padding-left:var(--edge)}
html[dir="rtl"] .cta-l{padding:clamp(48px,7vw,112px) var(--edge) clamp(48px,7vw,112px) clamp(24px,5vw,80px)}
html[dir="rtl"] .cta-links a{padding:clamp(22px,2.6vw,34px) clamp(24px,5vw,80px) clamp(22px,2.6vw,34px) var(--edge)}
html[dir="rtl"] .ico--dir{transform:scaleX(-1)}
html[dir="rtl"] .tile:hover .tile-go .ico--dir,html[dir="rtl"] .cta-links a:hover .ico--dir{transform:translateX(-6px) scaleX(-1)}
html[dir="rtl"] .ledger .price{text-align:left}
html[dir="rtl"] .kinds a:hover .tile-go .ico--dir{transform:translateX(-6px) scaleX(-1)}
html[dir="rtl"] .field select{background-position:left 14px center}
html[dir="rtl"] .thumbs button{right:auto;left:-2px}
html[dir="rtl"] .form-msg.ok{border-left:0;border-right:8px solid var(--ok)}
html[dir="rtl"] .field :is(input[type="email"],input[type="tel"],input[name="kenteken"],input[name="kilometerstand"],input[name="bouwjaar"]){direction:ltr;text-align:right}
html[dir="rtl"] .fab{right:auto;left:max(16px,env(safe-area-inset-left,0px))}
@media (max-width:960px){
  html[dir="rtl"] .menu-btn{margin-right:0}
  html[dir="rtl"] .lang{margin-left:0;margin-right:auto}
  html[dir="rtl"] .lang-list{left:0;right:0}
  html[dir="rtl"] .hero-slab{padding:36px var(--gutter)}
  html[dir="rtl"] .trust li:nth-child(3){border-right:0}
}
@media (max-width:560px){
  html[dir="rtl"] .trust li+li,html[dir="rtl"] .trust li:nth-child(n+3){border-right:0;border-top:2px solid var(--ink)}
  html[dir="rtl"] .ledger .price{text-align:right}
  html[dir="rtl"] .pin-tag{transform:translateX(50%)}
}