/* Berehaven Motor Works: the public design layer, built from the approved comp
   (../_intake/mockup-a-*.html, "Forecourt", approved by T on 2026-10-01).
   One typeface (Archivo: wide and bold for headings, normal for text). The logo blue is the only
   accent. White ground with one pale cool tint. Corners: 10px on pictures and panels, 8px on
   buttons and fields. Type scale: h1 page, h2 section, h3 item, body 17px, nothing under 15px.
   No kickers, no breadcrumb stacks, no uppercase labels (the name beside the car drawing is the
   logo's own lettering, in capitals as the logo has it). */
:root{
  --blue:#1F5890;          /* sampled from the logo */
  --blue-deep:#153F69;     /* hover, pressed */
  --ink:#14202B;
  --ink-2:#465564;
  --line:#D3DCE5;
  --tint:#EEF3F8;
  --white:#fff;
  --sold:#8A2A2A;
  --ok:#1E6B3A;
  --r-lg:10px; --r-sm:8px;
  --h1:clamp(2.05rem,4vw,3.25rem);
  --h2:clamp(1.65rem,2.7vw,2.25rem);
  --h3:1.2rem;
  --body:1.0625rem;        /* 17px */
  --small:.9375rem;        /* 15px */
  --gutter:48px;
  --pad:24px;
  --head:"Archivo",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:112px}
body{font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:var(--body);line-height:1.55;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased}
body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh} /* a short page (not found, no cars listed) keeps its footer at the foot of the screen */
body > main{flex:1 0 auto}
img{display:block;max-width:100%}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--blue-deep)}
h1,h2,h3{font-family:var(--head);font-stretch:112%;font-weight:700;line-height:1.12;text-wrap:balance;color:var(--ink)}
h1{font-size:var(--h1);letter-spacing:-.015em}
h2{font-size:var(--h2);letter-spacing:-.01em}
h3{font-size:var(--h3);line-height:1.25}
p{max-width:62ch}
ul{list-style:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.ic{width:1.25em;height:1.25em;flex:none;display:inline-block;vertical-align:-.22em}
.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:12px 18px;z-index:60;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0;color:#fff}

.wrap{max-width:1248px;margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:88px}
.section.tint{background:var(--tint)}
.lede{color:var(--ink-2);margin-top:12px}
.pair{display:grid;grid-template-columns:5fr 7fr;gap:var(--gutter);align-items:start}
.pair.flip{grid-template-columns:7fr 5fr}
.pair > *{min-width:0}

/* Buttons: 8px corners, sentence case, one line */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:var(--r-sm);font:600 var(--body)/1 "Archivo",sans-serif;text-decoration:none;white-space:nowrap;border:2px solid var(--blue);background:var(--blue);color:#fff;cursor:pointer;transition:background .15s,transform .1s}
.btn:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--blue)}
.btn.ghost:hover{background:var(--tint);color:var(--blue-deep)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:600}

/* Header: leaves on the way down, comes back on the way up (site.js) */
.site-head{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);transition:transform .25s}
.site-head.away{transform:translateY(-100%)}
/* The wordmark is part of the type scale: never smaller than a section heading (h2), the strongest thing
   in the header; the menu sits a step below the body (small). */
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:100px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--blue)}
.brand .mark{display:block;height:72px;overflow:hidden;flex:none}
.brand .mark img,.site-foot .logo img{width:100%;height:100%;object-fit:cover} /* framed in Rest of Site, like every photo */
.brand .name{white-space:nowrap;font-family:var(--head);font-stretch:118%;font-weight:700;font-size:var(--h2);line-height:1;text-transform:uppercase;color:var(--blue)}
.site-nav{display:flex;align-items:center;gap:28px}
.site-nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:var(--small)}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--blue);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.site-nav .btn,.site-nav .btn:hover{color:#fff;text-decoration:none;font-size:var(--body)}
.menu-btn{display:none;align-items:center;gap:8px;min-height:48px;padding:0 12px;border:2px solid var(--line);background:#fff;border-radius:var(--r-sm);font:600 var(--small)/1 "Archivo",sans-serif;color:var(--ink);cursor:pointer}

/* Hero */
.hero{padding-block:56px 72px}
.hero .pair{margin-top:32px}
.hero .pair.solo{grid-template-columns:1fr;max-width:720px}
.hero .sub{font-size:1.2rem;color:var(--ink-2)}
.hero .btn-row{margin-top:28px}
.hero .facts-list{margin-top:32px}
.hero .facts-list li:last-child{border-bottom:1px solid var(--line)}
.frame{display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--tint)}
.frame img{width:100%;height:100%;object-fit:cover}
.hero .frame{aspect-ratio:16/9}
.hero figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-top:12px;color:var(--ink-2)}
.hero figcaption a{font-weight:600}

/* Number plate: the reg, the way it reads on the car */
.plate{display:inline-flex;align-items:stretch;border:1.5px solid var(--ink);border-radius:5px;overflow:hidden;font:700 var(--small)/1 "Archivo",sans-serif;font-stretch:88%;background:#fff;color:var(--ink);vertical-align:middle}
.plate::before{content:"";width:9px;background:var(--blue)}
.plate b{padding:5px 8px 4px;font-weight:700;letter-spacing:.02em}

/* Car cards */
.cars-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;margin-bottom:36px}
.car-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px}
.car{display:flex;flex-direction:column;color:var(--ink);text-decoration:none}
.car .ph{border-radius:var(--r-lg);overflow:hidden;background:var(--tint);aspect-ratio:4/3;display:grid;place-items:center;color:var(--ink-2)}
.car .ph img{width:100%;height:100%;object-fit:cover;transition:opacity .2s}
.car .ph .ic{width:3rem;height:3rem;opacity:.5}
.car:hover .ph img{opacity:.9}
.car h3{margin-top:16px}
.car:hover h3{color:var(--blue)}
.car .ver{color:var(--ink-2)}
.car .facts{color:var(--ink-2);margin-top:8px;font-size:var(--small)}
.car .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);min-height:44px}
.price{font-family:var(--head);font-stretch:112%;font-weight:700;font-size:1.35rem;color:var(--ink)}
.car.sold .ph img{filter:grayscale(1);opacity:.6}
.status{font-weight:700;color:var(--sold)}
.status.agreed{color:var(--blue)}
.empty{padding:48px 24px;text-align:center;background:var(--tint);border-radius:var(--r-lg)}
.section.tint .empty{background:#fff}
.empty p{margin:8px auto 20px}

/* Cars being prepared: a plain list under the stock. No photos and no card boxes, so it never
   reads as cars with their pictures missing. Same rule and hairlines as the service groups. */
.coming{margin-top:64px;border-top:1px solid var(--ink);padding-top:18px}
.coming h2,.coming h3{font-size:var(--h3);line-height:1.25;letter-spacing:0}
.coming .lede{margin-top:6px}
.coming .sample-note{margin:12px 0 0}
.coming ul{margin-top:18px;border-bottom:1px solid var(--line)}
.coming li{display:grid;grid-template-columns:5fr 7fr;gap:2px var(--gutter);padding-block:14px;border-top:1px solid var(--line)}
.coming li p{max-width:none}
.coming .name strong,.coming .name span{display:block}
.coming .name span,.coming .about{color:var(--ink-2)}
.coming .about{display:flex;justify-content:space-between;align-items:baseline;gap:2px 32px}
.coming .about b{font-weight:600;color:var(--ink);text-align:right;margin-left:auto}

/* Services: three groups, no card boxes */
.groups{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px}
.group{border-top:1px solid var(--ink);padding-top:18px}
.group li{padding-block:11px;border-top:1px solid var(--line);display:flex;gap:12px;align-items:flex-start}
.group li:first-child{border-top:0;margin-top:8px}
.group li .ic{color:var(--blue);width:1.35rem;height:1.35rem;margin-top:2px}
.book{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:40px}
.book p{color:var(--ink-2)}

/* Buying a car */
.buy .frame{aspect-ratio:4/3}
.promises{display:grid;grid-template-columns:1fr 1fr;gap:32px var(--gutter);margin-top:32px}
.promises.wide{grid-template-columns:repeat(4,1fr);gap:32px}
.promises .ic{width:1.9rem;height:1.9rem;color:var(--blue)}
.promises h3{margin-top:8px}
.promises p{color:var(--ink-2);margin-top:4px}

/* About */
.about .frame{aspect-ratio:4/3;margin-top:24px}
.about .story p{font-size:1.2rem;max-width:58ch}
.about .story p + p{margin-top:16px}
.about .people{margin-top:20px;color:var(--ink-2)}

/* Find us */
.map{width:100%;aspect-ratio:7/5;border:0;border-radius:var(--r-lg);background:var(--tint);display:block}
.facts-list{margin-top:24px}
.facts-list li{display:grid;grid-template-columns:32px 1fr;gap:6px 10px;padding-block:14px;border-top:1px solid var(--line)}
.facts-list .ic{width:1.45rem;height:1.45rem;color:var(--blue);margin-top:2px}
.facts-list strong{display:block}
.facts-list span{color:var(--ink-2);display:block}
.soc-icons{display:flex;gap:10px;margin-top:20px}
.soc-icons a{width:46px;height:46px;border-radius:var(--r-sm);border:2px solid var(--line);display:grid;place-items:center;color:var(--blue)}
.soc-icons a:hover{border-color:var(--blue);background:var(--tint)}
.soc-icons svg{width:26px;height:26px;fill:currentColor}

/* Footer */
.site-foot{background:var(--tint);padding-block:56px 40px}
.site-foot .cols{display:grid;grid-template-columns:5fr 7fr;gap:var(--gutter);align-items:start}
.site-foot .logo{display:block;width:190px;overflow:hidden}
.site-foot .right{display:flex;justify-content:space-between;gap:32px} /* two columns or three (with Follow): the first on the split, the last ending on the grid's right edge */
.site-foot .right > div{flex:0 1 auto;min-width:0}
.site-foot h3{font-size:var(--body)}
.site-foot li{margin-top:8px}
.site-foot li a{color:var(--ink);text-decoration:none}
.site-foot li a:hover{color:var(--blue);text-decoration:underline}
.site-foot .soc-icons{margin-top:12px}
.site-foot .soc-icons a{background:#fff}
.site-foot .legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);color:var(--ink-2);font-size:var(--small);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.site-foot .legal a{color:var(--ink-2)}
.to-top{position:fixed;right:20px;bottom:20px;width:48px;height:48px;border-radius:var(--r-sm);border:2px solid var(--blue);background:#fff;color:var(--blue);display:none;place-items:center;font-size:1.2rem;cursor:pointer;z-index:15}
.to-top.on{display:grid}
.call-bar{display:none}

/* Stock list page */
.page-head{padding-block:48px 28px}
.filters{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:20px;background:var(--tint);border-radius:var(--r-lg)}
.field label,.field .lab{display:block;font-weight:600;margin-bottom:6px}
.field select,.field input[type=text],.field input[type=tel],.field input[type=email],.field textarea{width:100%;min-height:50px;padding:0 14px;border:2px solid var(--line);border-radius:var(--r-sm);background:#fff;font:400 var(--body)/1.3 "Archivo",sans-serif;color:var(--ink)}
.field textarea{padding:12px 14px;min-height:84px;resize:vertical}
.field select:focus,.field input:focus,.field textarea:focus{border-color:var(--blue);outline:0}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{min-height:48px;padding:0 16px;border:2px solid var(--line);border-radius:var(--r-sm);background:#fff;font:500 var(--body)/1 "Archivo",sans-serif;color:var(--ink);cursor:pointer}
.seg button[aria-pressed=true]{border-color:var(--blue);background:var(--blue);color:#fff}
.type-row{margin-bottom:20px}
.result-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-block:28px 24px;color:var(--ink-2);min-height:44px}
.result-line button{background:none;border:0;color:var(--blue);font:600 var(--body)/1 "Archivo",sans-serif;text-decoration:underline;cursor:pointer;min-height:44px}
.result-line > span{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px}
.result-line .also{display:inline-flex;align-items:center;min-height:44px;font-weight:600;white-space:nowrap} /* on a phone the list of cars is long: a way down to the ones being prepared */
.stock{padding-bottom:88px}

/* Car page */
.back{display:inline-flex;align-items:center;gap:8px;font-weight:600;min-height:44px}
.car-top{padding-block:16px 64px}
.gallery{position:relative}
.gallery .track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:var(--r-lg);background:var(--tint);scrollbar-width:none}
.gallery .track::-webkit-scrollbar{display:none}
.gallery .slide{flex:0 0 100%;aspect-ratio:4/3;scroll-snap-align:center;overflow:hidden}
.gallery .slide img{width:100%;height:100%;object-fit:cover}
.gallery .nav{position:absolute;top:calc((100% - var(--thumbs,0px)) / 2);transform:translateY(-50%);width:48px;height:48px;border-radius:var(--r-sm);border:0;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:1.2rem}
.gallery .nav.prev{left:12px}.gallery .nav.next{right:12px}
.gallery .nav[disabled]{opacity:.35;cursor:default}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:12px}
.thumbs button{border:3px solid transparent;border-radius:var(--r-lg);padding:0;overflow:hidden;cursor:pointer;background:var(--tint);aspect-ratio:4/3}
.thumbs button[aria-current=true]{border-color:var(--blue)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.sample-note{display:inline-block;background:#FFF4C2;color:#4A3B00;border-radius:4px;padding:4px 10px;font-size:var(--small);font-weight:600;margin-bottom:12px}
.credit{margin-top:10px;font-size:var(--small);color:var(--ink-2)}
.credit a{color:var(--ink-2)}
.summary h1{font-size:clamp(1.8rem,3vw,2.5rem)}
.summary .ver{font-size:1.2rem;color:var(--ink-2);margin-top:6px}
.summary .price{font-size:2.2rem;display:block;margin-top:18px}
.summary .status{display:block;margin-top:6px}
.summary .plate{margin-top:14px}
.key{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;margin-top:22px;border-top:1px solid var(--line)}
.key div{padding-block:12px;border-bottom:1px solid var(--line)}
.key dt{color:var(--ink-2);font-size:var(--small)}
.key dd{font-weight:600}
.summary .btn-row{margin-top:24px}
.summary .btn{flex:1 1 200px}
.summary .also{margin-top:16px;color:var(--ink-2)}
.details{padding-block:64px}
.spec{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:32px}
.spec section{border-top:1px solid var(--ink);padding-top:16px}
.spec dl{margin-top:8px}
.spec dl div{display:flex;justify-content:space-between;gap:16px;padding-block:9px}
.spec dt{color:var(--ink-2)}
.spec dd{font-weight:600;text-align:right}
.desc{margin-top:12px;max-width:66ch}
.desc p + p{margin-top:12px}
.ask .btn-row{margin-top:24px}
.ask form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ask .full{grid-column:1/-1}
.ask .sent{color:var(--ok);font-weight:600}
.send-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px}

/* Plain pages: privacy, terms, not found */
.plain{padding-block:56px 88px}
.plain .wrap > *{max-width:720px} /* the copy is narrow; the column starts on the site grid like every section */
.plain h1{margin-bottom:24px}
.plain h2,.plain h3{font-size:1.3rem;margin-top:32px;margin-bottom:8px}
.plain p + p{margin-top:12px}
.plain ul{list-style:disc;padding-left:1.2em;margin-top:8px}
.plain ol{list-style:decimal;padding-left:1.4em;margin-top:8px}
.plain blockquote{margin-top:12px;padding-left:16px;border-left:3px solid var(--line)}
/* Words typed in the admin's editor arrive as one bare <div> per paragraph (server.js richBlocks turns a bold line into an h2) */
.plain .rich-text > div + div,.plain .rich-text > div + p,.plain .rich-text > p + div{margin-top:12px}

@media (max-width:1000px){
  .site-nav{display:none}
  .menu-btn{display:inline-flex}
  .site-nav.open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:8px var(--pad) 20px}
  .site-nav.open a{padding-block:14px;border-bottom:1px solid var(--line);font-size:1.15rem}
  .site-nav.open .btn{margin-top:16px;border-bottom:2px solid var(--blue)}
  .car-grid{grid-template-columns:1fr 1fr}
  .filters{grid-template-columns:1fr 1fr}
  .promises.wide{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  :root{--pad:20px;--gutter:32px}
  .section{padding-block:56px}
  .pair,.pair.flip,.site-foot .cols{grid-template-columns:1fr}
  .hero{padding-block:28px 48px}
  html{scroll-padding-top:96px}
  .site-head .wrap{height:84px;gap:16px}
  .brand .mark{display:none} /* the wordmark at h2 size and the Menu button fill a phone's width; the drawing stays in the footer */
  .brand .name{font-size:var(--h2);font-stretch:112%}
  .btn-row .btn{flex:1 1 100%}
  .car-grid{grid-template-columns:1fr;gap:36px}
  .coming{margin-top:48px}
  .coming li{grid-template-columns:1fr}
  .coming .about{display:block}
  .coming .about b{display:block;text-align:left;margin-top:2px}
  #home-cars .car:nth-child(n+5){display:none}
  .groups{grid-template-columns:1fr;gap:28px}
  .promises,.promises.wide{grid-template-columns:1fr}
  .site-foot .right{display:grid;grid-template-columns:1fr 1fr}
  .site-foot li{margin-top:0}
  .site-foot li a{display:flex;align-items:center;min-height:44px}
  .spec{grid-template-columns:1fr}
  .details{padding-block:48px}
  .ask form{grid-template-columns:1fr;margin-top:8px}
  .thumbs{grid-template-columns:repeat(4,1fr)}
  .stock{padding-bottom:56px}
  .site-foot{padding-bottom:calc(40px + 72px)} /* room for the call bar inside the tinted footer, not a white band under it */
  .call-bar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--blue);padding-bottom:env(safe-area-inset-bottom)}
  .call-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:64px;color:#fff;text-decoration:none;font-weight:600;font-size:var(--small);border-left:1px solid rgba(255,255,255,.25)}
  .call-bar a:first-child{border-left:0}
  .call-bar .ic{width:1.45rem;height:1.45rem}
  .to-top{bottom:84px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.site-head,.call-bar,.to-top,.site-foot .right,.gallery .nav{display:none!important}body{padding:0}}