:root{--red:#ea0032;--red-dark:#aa0036;--ink:#242424;--muted:#5d6470;--line:#e3e6ea;--bg:#fff;--soft:#f6f7f9}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
 font:400 17px/1.65 Roboto,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--red)}
.wrap{width:min(1080px,calc(100% - 32px));margin-inline:auto}

.topbar{background:var(--ink);color:#fff;font-size:15px}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
 justify-content:flex-end;padding:8px 0}
.topbar a{color:#fff;text-decoration:none;font-weight:500}
.topbar a:hover{text-decoration:underline}
.topbar .tel{font-weight:700}

header.site{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
 background:#fff}
header.site .wrap{display:flex;align-items:center;gap:20px;padding:12px 0}
header.site img{width:265px}
.brandline{font-size:14px;color:var(--muted);margin:2px 0 0}

nav.main{margin-left:auto}
nav.main ul{list-style:none;display:flex;gap:4px;margin:0;padding:0;flex-wrap:wrap}
nav.main li{position:relative}
nav.main a{display:block;padding:10px 13px;color:var(--ink);text-decoration:none;
 font-weight:500;border-radius:5px;font-size:16px}
nav.main a:hover,nav.main a:focus{background:var(--red);color:#fff}
nav.main ul ul{display:none;position:absolute;left:0;top:100%;background:#fff;min-width:230px;
 border:1px solid var(--line);border-radius:6px;box-shadow:0 12px 28px rgba(0,0,0,.12);
 padding:6px;flex-direction:column;z-index:60}
nav.main li:hover>ul,nav.main li:focus-within>ul{display:flex}
.navtoggle{display:none;margin-left:auto;background:var(--red);color:#fff;border:0;
 padding:11px 15px;border-radius:5px;font:700 16px Roboto,Arial,sans-serif;cursor:pointer}

/* The slider. Red, because that is the logo and the branding. No plugin, no library:
   the track is a scroll-snap strip, so a phone swipe works with no JavaScript at all and
   the small script below only adds the arrows, the dots and the auto-advance. */
.slider{position:relative;color:#fff;
 background:linear-gradient(135deg,#e2000f 0%,#7d0012 100%)}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
 scrollbar-width:none;-ms-overflow-style:none}
/* No scroll-behavior:smooth here on purpose. With it set in CSS the browser turns even an
   instant scrollTo into an animation and then ignores the next one mid-flight, which made the
   arrows skip. The script asks for smooth or instant explicitly instead. */
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;min-width:0;scroll-snap-align:start}
.slide .wrap{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center;
 padding:54px 0 62px}
.slide h2{font-size:clamp(27px,4vw,44px);line-height:1.12;margin:0 0 14px;font-weight:700;
 text-transform:uppercase}
.slide p{font-size:18px;line-height:1.6;margin:0 0 26px;color:rgba(255,255,255,.93)}
.slide img{border-radius:8px;box-shadow:0 16px 36px rgba(0,0,0,.3)}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 22px;border-radius:6px;text-decoration:none;
 font-weight:700;border:2px solid var(--red)}
.btn-solid{background:var(--red);color:#fff}
.btn-solid:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn-line{background:#fff;color:var(--red)}
.btn-line:hover{background:var(--red);color:#fff}
.btn-white{background:#fff;color:#c1000f;border-color:#fff}
.btn-white:hover{background:#ffe3e6}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.btn-ghost:hover{background:#fff;color:#c1000f;border-color:#fff}
.sarrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;z-index:4;
 border:0;border-radius:50%;background:rgba(0,0,0,.3);color:#fff;cursor:pointer;
 font:700 24px/1 Roboto,Arial,sans-serif}
.sarrow:hover{background:rgba(0,0,0,.55)}
.sarrow.prev{left:12px}
.sarrow.next{right:12px}
.sdots{position:absolute;left:0;right:0;bottom:16px;z-index:4;display:flex;justify-content:center;
 gap:10px}
.sdots button{width:12px;height:12px;padding:0;border-radius:50%;border:2px solid #fff;
 background:transparent;cursor:pointer}
.sdots button[aria-current="true"]{background:#fff}

main{padding:44px 0 56px}
main h1{font-size:clamp(26px,3.4vw,36px);line-height:1.2;margin:0 0 18px}
main h2{font-size:23px;margin:34px 0 12px}
.cols{display:grid;grid-template-columns:1.6fr 1fr;gap:44px;align-items:start}
ul.ticks{list-style:none;padding:0;margin:0 0 10px}
ul.ticks li{padding:7px 0 7px 30px;position:relative;border-bottom:1px solid var(--line)}
ul.ticks li:before{content:"";position:absolute;left:4px;top:15px;width:9px;height:16px;
 border:solid var(--red);border-width:0 3px 3px 0;transform:rotate(45deg)}
.chips{display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:0;list-style:none}
.chips a{display:inline-block;padding:9px 15px;border:1px solid var(--line);border-radius:999px;
 text-decoration:none;color:var(--ink);font-weight:500;font-size:16px;background:#fff}
.chips a:hover{background:var(--red);color:#fff;border-color:var(--red)}

.callback{border:1px solid var(--line);border-radius:10px;padding:24px;background:var(--soft);
 position:sticky;top:96px}
.callback h2{margin:0 0 4px;font-size:22px}
.callback p.small{margin:0 0 16px;color:var(--muted);font-size:15px}
.callback label{display:block;font-weight:500;margin:12px 0 5px;font-size:15px}
.callback input{width:100%;padding:12px;border:1px solid #c9ced6;border-radius:5px;
 font:inherit;background:#fff}
.callback input:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.callback button{margin-top:18px;width:100%;padding:14px;border:0;border-radius:6px;
 background:var(--red);color:#fff;font:700 17px Roboto,Arial,sans-serif;cursor:pointer}
.callback button:hover{background:var(--red-dark)}
.req{color:var(--red)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{margin-top:12px;font-size:15px;padding:11px 13px;border-radius:5px;display:none}
.formnote.ok{display:block;background:#e7f6ec;border:1px solid #9cd3ae;color:#17532c}
.formnote.bad{display:block;background:#fdecef;border:1px solid #f1a7b6;color:#8a0b26}

footer.site{background:var(--ink);color:#c8ced8;padding:34px 0;font-size:16px}
footer.site .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:28px}
footer.site a{color:#fff}
footer.site h3{color:#fff;margin:0 0 10px;font-size:18px}
footer.site .legal{border-top:1px solid #3a3a3a;margin-top:26px;padding-top:16px;font-size:14px;
 color:#9aa2ae}

@media(max-width:900px){
  .slide .wrap,.cols,footer.site .wrap{grid-template-columns:1fr}
  .slide .wrap{padding:30px 0 50px;gap:24px}
  header.site img{width:185px}
  .sarrow{display:none}
  .callback{position:static}
  .navtoggle{display:block}
  nav.main{order:5;width:100%;margin-left:0}
  nav.main ul{display:none;flex-direction:column;gap:0}
  nav.main.open ul{display:flex}
  nav.main ul ul{display:flex;position:static;border:0;box-shadow:none;padding:0 0 0 16px;
   min-width:0}
  nav.main a{padding:12px 6px;border-bottom:1px solid var(--line);border-radius:0}
}

@media(max-width:600px){
  .slide p{font-size:16px;margin-bottom:22px}
  .slide .btns .btn{flex:1 1 100%;text-align:center}
}

/* ---------------------------------------------------------------- inner pages */
.pagehead{background:var(--soft);border-bottom:1px solid var(--line)}
.pagehead .wrap{padding:30px 0 26px}
.pagehead h1{font-size:clamp(25px,3.6vw,38px);line-height:1.15;margin:0}
main .cols>div>h2{font-size:23px;margin:32px 0 12px}
main .cols>div>h2:first-child{margin-top:0}
main .cols>div>h3{font-size:19px;margin:26px 0 10px}
main p{margin:0 0 16px}
figure.shot{margin:22px 0}
figure.shot img{border-radius:8px;border:1px solid var(--line)}
.card{border:1px solid var(--line);border-left:4px solid var(--red);border-radius:8px;
 padding:20px 22px;margin:26px 0;background:var(--soft)}
.card h2{margin:0 0 10px;font-size:20px}
.card p{margin:0 0 10px}
.card .addr{color:var(--muted)}
.card a.big{font-weight:700;font-size:19px;text-decoration:none}
.map{margin:26px 0;border-radius:8px;overflow:hidden;border:1px solid var(--line);line-height:0}
.map iframe{width:100%;height:380px;border:0;display:block}

/* Icon and detail on ONE line - the old site stacked the address under its icon and left the
   phone icon with no number beside it at all. */
.crow{display:flex;align-items:center;gap:14px;margin:18px 0}
.crow img{width:48px;height:48px;flex:0 0 48px;border-radius:6px}
.crow a{font-weight:700;font-size:20px;text-decoration:none;word-break:break-word}
.crow a:hover{text-decoration:underline}

/* Back to the top. Laptops and desktops only - on a phone it sits over the content and a thumb
   flick up is quicker anyway. */
#totop{position:fixed;right:22px;bottom:22px;z-index:60;width:48px;height:48px;border:0;
 border-radius:50%;background:var(--red);color:#fff;cursor:pointer;font:700 22px/1 Roboto,Arial,sans-serif;
 box-shadow:0 6px 18px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .2s,background .2s}
#totop.on{opacity:1;pointer-events:auto}
#totop:hover{background:var(--red-dark)}
#totop:focus-visible{outline:3px solid #242424;outline-offset:2px}
@media(max-width:900px){#totop{display:none}}
@media(prefers-reduced-motion:reduce){#totop{transition:none}}