/* Barlow + Barlow Condensed, self-hosted (SIL Open Font License 1.1).
   Served from this domain on purpose: linking fonts.googleapis.com would send
   every visitor's IP address to Google before they consent, which the cookie
   banner cannot cover. Do not swap these back for a Google Fonts <link>. */
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-400-latin-ext.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:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-400-latin.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:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-500-latin-ext.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:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-500-latin.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:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-600-latin-ext.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:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-600-latin.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:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-700-latin-ext.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:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-700-latin.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:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-600-latin-ext.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:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-600-latin.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:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-700-latin-ext.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:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-700-latin.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}

/* ==========================================================================
   Tyre Shop by Lassko, 1189 Chaussee de Mons, 1070 Anderlecht
   Palette, type and rhythm are defined once as custom properties. Everything
   downstream reads from them, so a colour change is a token edit.
   ========================================================================== */

:root{
  /* Red is the fill colour. red-ink is the darker red reserved for red TEXT on
     white, where the bright red would only reach 4.0:1 and fail WCAG AA. */
  --red:#E11D22;
  --red-ink:#C20A10;
  --red-deep:#A00A0E;
  --ink:#0E0E0E;
  --ink-2:#191919;
  --ink-3:#262626;
  --paper:#FFFFFF;
  --ash:#5A5A5A;           /* secondary text on white, 7.0:1 */
  --ash-dark:#A6A6A6;      /* secondary text on ink,  7.4:1 */
  --line:#E4E4E4;
  --line-dark:#333333;

  --font-display:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --font-body:'Barlow','Helvetica Neue',system-ui,sans-serif;

  /* One easing for the whole page. Exponential ease-out, so movement is visible
     immediately and the interface reads as responsive rather than sluggish. */
  --ease:cubic-bezier(.23,1,.32,1);

  --wrap:1240px;
  --gut:clamp(1.25rem,4vw,3rem);
  --sect:clamp(4rem,9vw,7.5rem);
  --radius:3px;            /* one radius system, near square, signage-like */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

/* Browser surfaces the page still owns. */
::selection{background:var(--red);color:#fff}
:focus-visible{outline:3px solid var(--red-ink);outline-offset:3px;border-radius:2px}
.on-ink :focus-visible,.bar :focus-visible,.emg :focus-visible{outline-color:#fff}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.005em;
  text-transform:uppercase;
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.6rem,6.4vw,5rem)}
h2{font-size:clamp(2.1rem,5vw,3.9rem)}
h3{font-size:clamp(1.45rem,2.6vw,2.1rem)}
h4{font-size:clamp(1.15rem,1.8vw,1.4rem)}
p{margin:0 0 1em}
a{color:inherit}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sect)}
.lede{font-size:clamp(1.0625rem,1.5vw,1.25rem);color:var(--ash);max-width:60ch}
.on-ink .lede{color:var(--ash-dark)}

/* The red wall stripe. Every photo of this workshop has a red band painted
   across the walls at waist height. It is the shop's own dividing line, so it
   divides the page too. */
.stripe{height:6px;background:var(--red);border:0;margin:0}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:.9rem 1.4rem;font-weight:600}
.skip:focus{left:0}

/* ---------- buttons ------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1rem,1.5vw,1.15rem);letter-spacing:.01em;
  padding:.85rem 1.6rem;min-height:52px;
  border:2px solid transparent;border-radius:var(--radius);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),transform .16s var(--ease);
}
.btn:active{transform:scale(.97)}   /* the press has to be felt, not just seen */
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-deep)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-3)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-ghost-ink{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost-ink:hover{background:var(--ink);color:#fff}
.btn-white{background:#fff;color:var(--red-ink)}
.btn-white:hover{background:#F0F0F0}
.btn svg{width:1.05em;height:1.05em;flex:none}

/* ---------- header ------------------------------------------------------- */
.head{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.75rem);height:74px;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand img{width:auto;height:38px}
.nav{display:flex;align-items:center;gap:clamp(.85rem,1.7vw,1.6rem);margin-left:auto}
.nav a{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:1.0625rem;letter-spacing:.01em;text-decoration:none;
  padding:.35rem 0;border-bottom:2px solid transparent;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.nav a:hover{border-bottom-color:var(--red)}
.nav .btn{border-bottom:0}
.nav .btn:hover{border-bottom-color:transparent}
.head-tel{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--red-ink);text-decoration:none;white-space:nowrap}
.head-tel:hover{text-decoration:underline;text-underline-offset:3px}

.lang{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;flex:none}
.lang button{
  font-family:var(--font-display);font-weight:700;font-size:.9rem;letter-spacing:.04em;
  background:none;border:0;color:var(--ash);padding:.45rem .55rem;cursor:pointer;min-height:38px;
  transition:background-color .18s var(--ease),color .18s var(--ease);
}
.lang button+button{border-left:1px solid var(--line)}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--ink);color:#fff}

.burger{display:none;background:none;border:0;padding:.6rem;cursor:pointer;min-height:44px;min-width:44px}
.burger span{display:block;width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .2s var(--ease),opacity .2s var(--ease)}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}

@media (max-width:980px){
  .burger{display:block}
  .nav{
    position:fixed;inset:74px 0 auto 0;background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;margin:0;
    padding:.5rem var(--gut) 1.75rem;border-bottom:1px solid var(--line);
    max-height:calc(100dvh - 74px);overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:transform .2s var(--ease),opacity .2s var(--ease),visibility .2s;
  }
  .nav[data-open="true"]{transform:none;opacity:1;visibility:visible}
  .nav a{font-size:1.5rem;padding:.75rem 0;border-bottom:1px solid var(--line)}
  .nav a:hover{border-bottom-color:var(--line)}
  .nav .btn{margin-top:1.15rem;border-bottom:0}
  .head-tel{margin-left:auto}
}
@media (max-width:980px){
  /* Touch sizing: 44px is the smallest comfortable target, and the language
     switch is the one control a visitor uses before anything else. */
  .lang button{min-height:44px;padding-inline:.7rem}
  .brand{min-height:44px}
}
@media (max-width:600px){
  .head-tel{display:none}
  .brand img{height:32px}
}

/* ---------- hero --------------------------------------------------------- */
.hero{position:relative;background:var(--ink);color:#fff;isolation:isolate}
.hero-img{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover;opacity:.55}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(14,14,14,.95) 0%,rgba(14,14,14,.8) 46%,rgba(14,14,14,.4) 100%)}
.hero-in{
  max-width:var(--wrap);margin-inline:auto;
  padding:clamp(3rem,6vw,4.5rem) var(--gut) clamp(3rem,6vw,4.5rem);
}

}
.hero h1{max-width:15ch}
.hero h1 .n{display:block;color:var(--red)}
.hero p{max-width:52ch;color:#DCDCDC;font-size:clamp(1.0625rem,1.6vw,1.3rem);margin-top:1.4rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
/* Spans both hero columns so it sits under the text and the video alike. On a
   phone this puts it after the video, which keeps the loop above the fold. */
.hero-trust{display:flex;flex-wrap:wrap;gap:.7rem 2.75rem;margin:1.5rem 0 0;padding:1.4rem 0 0;list-style:none;border-top:1px solid rgba(255,255,255,.22)}
.hero-trust li{font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:1.05rem;letter-spacing:.02em;color:#fff}

/* ---------- services ----------------------------------------------------- */
/* Deliberately not three equal cards. The roadside call-out is the reason this
   business gets phoned at 6am, so it takes the full-width panel and the two
   workshop services share the row above it. */
.svc{display:grid;gap:clamp(1.25rem,2.5vw,2rem);grid-template-columns:repeat(2,1fr);margin-top:clamp(2.5rem,5vw,4rem)}
.svc-item{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.svc-item figure{margin:0;overflow:hidden;background:var(--ink-2)}
.svc-item figure img{width:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .5s var(--ease)}
.svc-item:hover figure img{transform:scale(1.03)}
.svc-body{padding:clamp(1.4rem,2.5vw,2rem);display:flex;flex-direction:column;flex:1}
.svc-body p{margin-top:.7rem;color:var(--ash)}
.svc-list{margin:.4rem 0 0;padding:0;list-style:none;font-size:.98rem;color:var(--ash)}
.svc-list li{padding-left:1.1rem;position:relative;line-height:1.5;margin-top:.35rem}
.svc-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:2px;background:var(--red)}

.svc-wide{grid-column:1 / -1;flex-direction:row;background:var(--ink);border-color:var(--ink);color:#fff}
.svc-wide figure{flex:1 1 46%;min-width:0;display:flex}
.svc-wide figure img{aspect-ratio:auto;height:100%;width:100%;min-height:360px}
.svc-wide .svc-body{flex:1 1 54%;justify-content:center;padding:clamp(1.75rem,4vw,3.5rem)}
.svc-wide h3{font-size:clamp(1.8rem,3.4vw,3rem)}
.svc-wide p{color:#D2D2D2;font-size:1.1rem;max-width:44ch}
.svc-wide .btn{align-self:flex-start;margin-top:1.5rem}
.svc-note{font-family:var(--font-display);text-transform:uppercase;font-weight:600;letter-spacing:.03em;color:var(--red);font-size:1.05rem;margin-top:1.1rem}
@media (max-width:820px){
  .svc{grid-template-columns:1fr}
  .svc-wide{flex-direction:column}
  .svc-wide figure img{min-height:0;aspect-ratio:4/3}
}

/* ---------- emergency band ----------------------------------------------- */
/* The loudest moment on the page. For a driver stood on a hard shoulder the
   phone number IS the interface, so it is set at display scale and it is the
   button, rather than a label sitting next to one. */
.emg{background:var(--red);color:#fff;overflow:hidden}
.emg-in{max-width:var(--wrap);margin-inline:auto;padding:clamp(3rem,6vw,4.5rem) var(--gut);display:grid;gap:clamp(1.75rem,4vw,3.5rem);grid-template-columns:1.05fr .95fr;align-items:center}
.emg h2{font-size:clamp(2rem,4.4vw,3.4rem);max-width:14ch}
/* White, not a pink tint. Anything softer than #FFF7F7 drops under 4.5:1 on
   this red, so hierarchy here comes from size and weight instead of colour. */
.emg p{margin-top:1rem;max-width:46ch;color:#fff;font-size:1.15rem;font-weight:500}
.emg-tel{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:1.75rem;
  font-family:var(--font-display);font-weight:700;line-height:1;
  font-size:clamp(2.5rem,6.5vw,4.75rem);letter-spacing:-.015em;
  color:#fff;text-decoration:none;
  transition:transform .16s var(--ease),opacity .18s var(--ease);
}
.emg-tel:hover{opacity:.86}
.emg-tel:active{transform:scale(.985)}
.emg-tel svg{width:.6em;height:.6em;flex:none}
.emg-sub{margin-top:.7rem;font-size:.98rem;color:#fff;font-weight:500}
.emg-fig{margin:0;position:relative}
.emg-fig > img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
/* Wins over the rule above on specificity, not just source order, so the badge
   keeps its own size instead of being stretched to the photo's dimensions. */
.emg-fig > img.emg-badge{
  position:absolute;left:-8px;bottom:-8px;
  width:clamp(84px,12vw,124px);height:auto;aspect-ratio:auto;object-fit:contain;
  background:#fff;padding:.5rem;border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}
@media (max-width:860px){
  .emg-in{grid-template-columns:1fr}
  .emg-fig{order:-1}
  .emg-badge{left:auto;right:-4px}
}

.work{background:var(--ink);color:#fff}

/* ---------- before / after tyre slider ----------------------------------- */
/* Two pixel-aligned frames of the same car. The top one is clipped by the
   handle position, so dragging wipes between worn and new. */
.ba{background:var(--ink);color:#fff}
.ba-wrap{
  position:relative;margin:clamp(2rem,4vw,3rem) auto 0;max-width:1000px;
  border-radius:var(--radius);overflow:hidden;background:var(--ink);
  touch-action:pan-y;
}
.ba-wrap img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  user-select:none;-webkit-user-drag:none;
}
.ba-top{
  position:absolute;inset:0;
  clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0);
}
.ba-top img{height:100%}

.ba-line{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;
  background:var(--red);transform:translateX(-1px);pointer-events:none;
}
/* pointer-events:none is the whole trick. The handle is painted on top of the
   range input, so without this it swallows the drag and the slider only
   responds when you grab anywhere EXCEPT the handle, which is backwards. */
.ba-handle{
  position:absolute;top:50%;left:var(--pos,50%);
  width:52px;height:52px;transform:translate(-50%,-50%);
  border-radius:50%;border:2px solid #fff;background:var(--red);
  display:grid;place-items:center;padding:0;
  box-shadow:0 4px 18px rgba(0,0,0,.45);
  pointer-events:none;
  transition:transform .16s var(--ease);
}
.ba-wrap:active .ba-handle{transform:translate(-50%,-50%) scale(.94)}
.ba-handle svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Labels sit outside the image, never on top of it. */
.ba-legend{
  display:flex;justify-content:space-between;gap:1rem;
  margin:.9rem auto 0;max-width:1000px;
}
.ba-legend span{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:1rem;letter-spacing:.04em;
}
.ba-legend .worn{color:#fff}
.ba-legend .new{color:var(--red)}
.ba-hint{text-align:center;color:var(--ash-dark);font-size:.92rem;margin:.75rem 0 0}

/* Native range input laid over the whole frame: this is what actually drives
   the wipe, so keyboard and screen reader users get the same control. */
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:ew-resize;margin:0;
}
.ba-range:focus-visible + .ba-line{box-shadow:0 0 0 3px rgba(255,255,255,.9)}

@media (max-width:600px){
  .ba-handle{width:44px;height:44px}
  .ba-handle svg{width:22px;height:22px}
}

/* ---------- radial orbital services -------------------------------------- */
/* Services arranged on an orbit around a hub. Click a node and its description
   opens in the middle. The dashed ring rotates as ambient motion, but the nodes
   themselves stay put: a moving click target is hostile, and these are the
   controls the section exists for. */
.orb{position:relative;max-width:660px;margin:clamp(2.5rem,5vw,3.5rem) auto 0}
.orb-stage{position:relative;aspect-ratio:1/1;width:100%}

.orb-ring,.orb-ring2{
  position:absolute;inset:8%;border-radius:50%;
  border:1px dashed rgba(255,255,255,.18);
  animation:orb-spin 90s linear infinite;
}
.orb-ring2{inset:22%;border-style:solid;border-color:rgba(255,255,255,.09);animation-duration:64s;animation-direction:reverse}
@keyframes orb-spin{to{transform:rotate(360deg)}}

/* Each slot spans the whole stage. Rotating the slot sweeps its top-centre
   point around the circle, carrying the node with it; the node then counter-
   rotates so the label stays upright. The orbit radius is therefore half the
   slot height, which is why the inset below sets it. Percentages inside
   translate() would resolve against the button, not the stage, so they cannot
   be used for this. */
/* The whole orbit turns slowly. Each slot is offset by its index, and the
   node counter-rotates by the same running angle so the labels never tip over.
   One shared --spin variable drives both, so they can never drift apart. */
.orb-stage{--spin:0deg}
.orb-slot{
  position:absolute;inset:11%;
  transform:rotate(calc(var(--spin) + var(--i) * 45deg));
  pointer-events:none;
}
.orb-node{
  position:absolute;left:50%;top:0;
  width:clamp(74px,13.5vw,92px);height:clamp(74px,13.5vw,92px);
  transform:translate(-50%,-50%) rotate(calc(-1 * (var(--spin) + var(--i) * 45deg)));
  pointer-events:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.28rem;
  background:var(--ink-2);color:#fff;
  border:1.5px solid #333;border-radius:50%;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:.72rem;letter-spacing:.02em;line-height:1.05;text-align:center;
  padding:.4rem;cursor:pointer;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),
             color .25s var(--ease),box-shadow .25s var(--ease);
}
.orb-node svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* No max-width and no break-word here: in a condensed face 9ch is barely
   40px, which snapped labels mid-word ("CLIMATISA TION"). Words wrap at
   spaces only and the longest single word still fits inside the circle. */
.orb-node span{display:block;hyphens:none;overflow-wrap:normal;word-break:normal}
.orb-node:hover{border-color:var(--red);background:var(--ink-3)}
.orb-node[aria-pressed="true"]{
  background:var(--red);border-color:var(--red);color:#fff;
  box-shadow:0 0 0 6px rgba(225,29,34,.16);
}


/* Hub: the panel the chosen service opens into. */
.orb-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:44%;text-align:center;
}
.orb-hub h3{font-size:clamp(1.05rem,2.1vw,1.5rem);color:#fff}
.orb-hub p{color:var(--ash-dark);font-size:.92rem;line-height:1.5;margin:.6rem 0 0}
.orb-hub .orb-hint{color:var(--ash-dark);font-size:.92rem;margin:0}
/* The resting state is VISIBLE, and the entrance is a transition off a data
   attribute rather than a keyframe. A keyframe that fails to tick (a throttled
   or off-screen compositor) leaves the panel stuck at opacity 0 with the text
   unreadable; a transition can only ever fall back to the readable base. */
#orb-detail{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
#orb-detail[data-swapping]{opacity:0;transform:translateY(6px);transition:none}

@media (max-width:720px){
  /* The middle of an orbit is too small for prose on a phone, so the panel
     drops below the ring and the hub keeps only the mark. */
  .orb-stage{max-width:420px;margin-inline:auto}
  .orb-slot{inset:13%}
  .orb-node{width:64px;height:64px;font-size:.6rem;padding:.3rem}
  .orb-node svg{width:18px;height:18px}
  .orb-node svg{width:18px;height:18px}
  .orb-hub{
    position:static;transform:none;width:auto;text-align:left;
    margin-top:1.75rem;padding:1.25rem;
    border:1px solid #2C2C2C;border-radius:var(--radius);background:var(--ink-2);
  }
}
@media (prefers-reduced-motion:reduce){
  .orb-ring,.orb-ring2{animation:none}
  #orb-detail,#orb-detail[data-swapping]{opacity:1;transform:none;transition:none}
  .orb-stage{--spin:0deg !important}
}

/* ---------- why ---------------------------------------------------------- */
.why-grid{display:grid;gap:clamp(1.5rem,3vw,2.25rem);grid-template-columns:repeat(2,1fr)}
.why-grid > div{border-top:3px solid var(--red);padding-top:1.15rem}
.why-grid h4{margin-bottom:.5rem}
.why-grid p{color:var(--ash);font-size:.98rem;margin:0}
@media (max-width:700px){.why-grid{grid-template-columns:1fr}}

/* ---------- diagonal photo marquee --------------------------------------- */
/* Vanilla port of a diagonal marquee carousel: rows of photos tilted off axis,
   scrolling in alternating directions. Pure CSS keyframes, no library. The
   track holds the same photos twice so translating it -50% loops seamlessly. */
.mq{position:relative;overflow:hidden;background:var(--ink);height:clamp(420px,58vw,660px)}
.mq-stage{
  position:absolute;top:50%;left:50%;
  width:220vw;                     /* overscan so the tilt never exposes a corner */
  display:flex;flex-direction:column;gap:clamp(.75rem,1.4vw,1.25rem);
  transform:translate(-50%,-50%) rotate(-9deg);
}
.mq-row{display:flex;overflow:hidden}
.mq-track{display:flex;flex:none;will-change:transform}
.mq-track.l{animation:mq-l var(--speed,80s) linear infinite}
.mq-track.r{animation:mq-r var(--speed,80s) linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-track figure{
  flex:none;margin:0;padding-right:clamp(.75rem,1.4vw,1.25rem);
  width:clamp(220px,26vw,360px);
}
.mq-track img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius);background:var(--ink-2);
}
@keyframes mq-l{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes mq-r{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}

/* The heading sits over the marquee, so the band behind it is dimmed rather
   than the type being outlined or shadowed. */
.mq-head{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  justify-content:center;pointer-events:none;
  background:linear-gradient(90deg,rgba(14,14,14,.95) 0%,rgba(14,14,14,.72) 42%,rgba(14,14,14,.25) 100%);
}
.mq-head > div{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);width:100%}
.mq-head h2{color:#fff}
.mq-head p{color:#D8D8D8;margin-top:.9rem;max-width:38ch}
@media (prefers-reduced-motion:reduce){
  .mq-track.l,.mq-track.r{animation:none}
}

/* ---------- brand globe --------------------------------------------------- */
.globe{background:var(--ink);color:#fff}
.globe-in{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr 1fr;align-items:center}
.globe-canvas-wrap{position:relative;aspect-ratio:1/1;width:100%;max-width:560px;margin-inline:auto}
.globe-canvas-wrap canvas{width:100%;height:100%;display:block;touch-action:pan-y}
.globe-list{margin:1.75rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.globe-list li{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:1.05rem;letter-spacing:.03em;line-height:1;
  border:1px solid #3A3A3A;border-radius:var(--radius);padding:.55rem .8rem;color:#EDEDED;
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.globe-list li:hover{border-color:var(--red);color:#fff}
.globe-note{color:var(--ash-dark);font-size:.95rem;margin-top:1.5rem}
@media (max-width:860px){
  .globe-in{grid-template-columns:1fr}
  .globe-canvas-wrap{max-width:420px;order:-1}
}

/* The loop is the shop's own branded wheel animation. It sits beside the four
   reasons rather than in the hero: at hero size it competed with the headline,
   and here it gives this section the image it was missing. */
.why-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.75rem,4vw,3rem);align-items:center;margin-top:clamp(2.5rem,5vw,3.5rem)}
.why-video{margin:0;min-width:0}
.why-video video{
  width:100%;height:auto;display:block;
  aspect-ratio:1716/1080;object-fit:cover;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  filter:brightness(1.24) contrast(1.05);
  box-shadow:0 16px 44px rgba(0,0,0,.18);
}
.why-video figcaption{
  margin-top:.7rem;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:.92rem;letter-spacing:.045em;color:var(--ink);
  padding-left:.75rem;border-left:3px solid var(--red);
}
@media (max-width:900px){
  .why-in{grid-template-columns:1fr}
  .why-video{order:-1}          /* the moving thing leads on a phone */
}

/* ---------- find us ------------------------------------------------------ */
.find{background:#F6F6F6}
.find-in{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:.85fr 1.15fr;align-items:start}
.addr{margin:1.75rem 0 0;font-style:normal;font-size:1.1rem;line-height:1.7}
.addr a{color:var(--red-ink);font-weight:600}
.addr .row{display:block;padding:.85rem 0;border-bottom:1px solid var(--line)}
.addr .k{display:block;font-family:var(--font-display);text-transform:uppercase;font-weight:600;font-size:.9rem;letter-spacing:.05em;color:var(--ash);line-height:1.4}
.addr .closed{color:var(--ash);font-size:.98rem}
.map{border:0;width:100%;aspect-ratio:16/11;border-radius:var(--radius);display:block;background:#DDD}
.find-fig{margin:1.25rem 0 0}
.find-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius)}
@media (max-width:860px){.find-in{grid-template-columns:1fr}}

/* ---------- 3D testimonial marquee --------------------------------------- */
/* Four vertical columns scrolling in opposite directions, tilted in 3D. Each
   column holds its cards twice so translateY(-50%) loops seamlessly. */
.tst{overflow:hidden}
.tst-stage{
  position:relative;
  height:clamp(430px,58vw,540px);
  margin-top:clamp(2rem,4vw,3rem);
  display:flex;align-items:center;justify-content:center;
  perspective:900px;
}
.tst-deck{
  display:flex;gap:1rem;
  transform:rotateX(14deg) rotateY(-12deg) rotateZ(9deg) scale(1.06);
  transform-style:preserve-3d;
  /* The fade is a mask on the deck itself, not overlay rectangles on the
     section. A mask is applied in the element's own coordinate space and is
     then transformed with it, so the soft edges stay parallel to the cards
     and run diagonally on screen. Overlays could only ever fade horizontally,
     which cut across the tilted cards at the wrong angle. */
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to right,  transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%),
    linear-gradient(to right,  transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.tst-col{
  position:relative;height:clamp(430px,58vw,540px);width:250px;
  overflow:hidden;flex:none;
}
.tst-track{display:flex;flex-direction:column;gap:1rem;will-change:transform}
.tst-col[data-dir="down"] .tst-track{animation:tst-down var(--dur,52s) linear infinite}
.tst-col[data-dir="up"]   .tst-track{animation:tst-up   var(--dur,52s) linear infinite}
/* Only the column under the pointer stops. Freezing the whole wall made
   it feel broken rather than responsive. */
.tst-col:hover .tst-track{animation-play-state:paused}
@keyframes tst-down{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes tst-up{from{transform:translateY(-50%)}to{transform:translateY(0)}}

.tst-card{
  flex:none;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.15rem;box-shadow:0 8px 26px rgba(0,0,0,.08);
}
.tst-who{display:flex;align-items:center;gap:.65rem}
.tst-card img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;background:#EEE}
.tst-name{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:1rem;line-height:1.1;color:var(--ink)}
.tst-when{font-size:.82rem;color:var(--ash);line-height:1.3}
.tst-card blockquote{margin:.75rem 0 0;font-size:.92rem;line-height:1.5;color:#333}
.tst-stars{color:var(--red-ink);font-size:.82rem;letter-spacing:.12em;margin-top:.6rem;font-weight:700}


@media (max-width:900px){
  /* Less tilt and fewer columns: at this width the rotation throws the outer
     columns off screen. Cards stay near their full width, because narrowing
     them is what makes a short review wrap into five ragged lines. */
  .tst-deck{transform:rotateX(8deg) rotateZ(4deg) scale(1.02);gap:.85rem}
  .tst-col{width:244px}
  .tst-col:nth-child(n+3){display:none}
}
@media (max-width:520px){
  .tst-deck{
    transform:none;gap:.75rem;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 14%,#000 86%,transparent 100%);
  }
  .tst-col{width:min(72vw,260px)}
  .tst-col:nth-child(n+2){display:none}
}
@media (prefers-reduced-motion:reduce){
  .tst-track{animation:none}
}

/* ---------- quote form --------------------------------------------------- */
.quote{background:var(--ink);color:#fff}
.quote-in{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:1fr 1.15fr;align-items:start}
.form{display:grid;gap:1.15rem}
/* Off-screen rather than display:none, because some bots skip hidden inputs. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.f-row{display:grid;gap:1.15rem;grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.field label{font-family:var(--font-display);text-transform:uppercase;font-weight:600;font-size:.95rem;letter-spacing:.045em;color:#EDEDED}
.field .req{color:#FF6B6B}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:1rem;color:#fff;
  background:var(--ink-2);border:1.5px solid #3A3A3A;border-radius:var(--radius);
  padding:.8rem .9rem;min-height:50px;width:100%;
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
.field textarea{min-height:120px;resize:vertical;line-height:1.5}
.field select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23BBBBBB' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px;padding-right:2.6rem;
}
.field input::placeholder,.field textarea::placeholder{color:#909090}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#4E4E4E}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);background:var(--ink-3);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid #fff;outline-offset:2px}
.field [aria-invalid="true"]{border-color:#FF6B6B;background:#251313}
.err{color:#FF8A8A;font-size:.9rem;line-height:1.4}
.err:empty{display:none}

/* Overrides the uppercase display face inherited from .field label. A consent
   sentence has to be read, not scanned, so it stays in the body face. */
.field label.consent{
  display:flex;gap:.75rem;align-items:flex-start;
  font-family:var(--font-body);font-size:.95rem;font-weight:400;
  text-transform:none;letter-spacing:normal;color:#CFCFCF;line-height:1.55;
}
.consent input{width:22px;height:22px;min-height:0;flex:none;margin-top:.15rem;accent-color:var(--red);cursor:pointer}
.consent a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.form-note{font-size:.9rem;color:var(--ash-dark);margin:0}
.form-msg{padding:1rem 1.15rem;border-radius:var(--radius);font-size:1rem;margin:0;line-height:1.5}
.form-msg:empty{display:none}
.form-msg[data-state="ok"]{background:#0F2E16;border:1.5px solid #2E7D43;color:#B6F2C6}
.form-msg[data-state="bad"]{background:#2B1212;border:1.5px solid #AA3333;color:#FFC2C2}

.quote-aside{border-left:3px solid var(--red);padding-left:clamp(1.25rem,2.5vw,2rem)}
.quote-aside h2{font-size:clamp(1.9rem,4vw,3.2rem)}
.quote-aside p{color:var(--ash-dark);margin-top:1rem}
.quote-aside .big{display:block;font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,4vw,2.9rem);color:#fff;text-decoration:none;line-height:1.1;margin-top:1.5rem}
.quote-aside .big:hover{color:#FFD2D2}
/* The truck artwork plus its two overlaid wheels. Percentages measured from
   the artwork itself: the arch centres sit at 37.3% and 71.3% across, 72.7%
   down, and the arch opening is about 9.3% of the width. */
.truck{position:relative;width:100%;max-width:430px;margin-top:2rem;aspect-ratio:1200/355}
.truck-body{position:absolute;inset:0;width:100%;height:100%}
.truck-wheel{
  position:absolute;top:71.8%;width:10.1%;height:auto;aspect-ratio:1;
  transform:translate(-50%,-50%);
  transform-origin:50% 50%;
  animation:wheel-roll 1.5s linear infinite;
}
.truck-wheel.front{left:37.3%}
.truck-wheel.rear{left:71.3%}
/* Negative: the truck's headlights are on the left, so it reads as driving
   left and the wheels must turn anticlockwise. Positive span them backwards. */
@keyframes wheel-roll{to{transform:translate(-50%,-50%) rotate(-360deg)}}

@media (max-width:860px){
  /* Keeps the phone form short: the graphic is decoration, the form is the job. */
  .truck{display:none}
}
@media (prefers-reduced-motion:reduce){
  .truck-wheel{animation:none}
}
@media (max-width:860px){
  .quote-in{grid-template-columns:1fr}
  .quote-aside{order:-1}
  .f-row{grid-template-columns:1fr}
}

/* ---------- footer ------------------------------------------------------- */
.foot{background:#080808;color:#B8B8B8;font-size:.98rem;padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.foot-in{display:grid;gap:clamp(1.75rem,4vw,3rem);grid-template-columns:1.3fr 1fr 1fr}
.foot h4{color:#fff;font-size:1.1rem;letter-spacing:.03em;margin-bottom:.9rem}
.foot img{height:44px;width:auto;margin-bottom:1.1rem}
.foot a{color:#DFDFDF;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
/* Footer links are a stacked list, so each one gets a real touch row rather
   than the 22px an inline link would otherwise occupy. */
.foot ul a{display:inline-block;padding:.45rem 0}
.foot address{font-style:normal;line-height:1.75}
.foot-hours-h{margin-top:1.5rem}
.foot-hours{margin:0;line-height:1.7}
.foot-hours .closed{color:#8C8C8C}
.foot-base{margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid #232323;display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;justify-content:space-between;font-size:.9rem;color:#8C8C8C}
@media (max-width:820px){.foot-in{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-in{grid-template-columns:1fr}}

/* ---------- mobile call bar ---------------------------------------------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:1px;background:#000;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -6px 20px rgba(0,0,0,.28)}
.bar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:60px;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:1.2rem;letter-spacing:.02em;text-decoration:none;
  transition:filter .16s var(--ease),transform .16s var(--ease);
}
.bar a:active{transform:scale(.98)}
.bar .call{background:var(--red);color:#fff}
.bar .quote-b{background:var(--ink);color:#fff}
.bar svg{width:1.1em;height:1.1em}
@media (max-width:980px){
  .bar{display:flex}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
}

/* ---------- cookie banner ------------------------------------------------ */
/* Sits bottom right on desktop so it never lands on the hero call button,
   which is the one control the page exists to deliver. */
.cookie{position:fixed;left:auto;right:1.25rem;bottom:1.25rem;z-index:120;width:min(460px,calc(100vw - 2.5rem));background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius);padding:1.4rem;box-shadow:0 14px 44px rgba(0,0,0,.3)}
.cookie[hidden]{display:none}
.cookie h4{margin-bottom:.5rem}
.cookie p{font-size:.95rem;color:var(--ash);margin-bottom:1.1rem}
.cookie a{color:var(--red-ink);font-weight:600}
.cookie-btns{display:flex;gap:.7rem;flex-wrap:wrap}
.cookie-btns .btn{flex:1;min-width:130px;font-size:1rem;padding:.7rem 1.1rem;min-height:48px}
@media (max-width:980px){.cookie{left:1rem;right:1rem;width:auto;bottom:calc(60px + 1rem + env(safe-area-inset-bottom))}}

/* ---------- legal pages -------------------------------------------------- */
.legal{max-width:76ch;margin-inline:auto;padding-block:clamp(3rem,7vw,5.5rem)}
.legal h1{margin-bottom:.5rem;font-size:clamp(2.25rem,5vw,3.5rem)}
.legal h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-top:2.75rem}
.legal h3{font-size:1.25rem;margin-top:1.75rem}
.legal p,.legal li{color:#333;line-height:1.72}
.legal ul{padding-left:1.15rem}
.legal li{margin-bottom:.5rem}
.legal .updated{color:var(--ash);font-size:.95rem;margin-bottom:2.5rem}
.legal-scroll{overflow-x:auto}
.legal table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:.95rem;min-width:520px}
.legal th,.legal td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
.legal th{font-family:var(--font-display);text-transform:uppercase;font-size:.95rem;letter-spacing:.04em}
.back{display:inline-block;margin-top:3rem;font-weight:600;color:var(--red-ink)}

/* ---------- scroll reveal ------------------------------------------------ */
/* One authored entrance, on section blocks only. It starts from a mostly
   visible state so nothing appears out of nothing, and it never runs twice. */
.rise{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rise.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rise{opacity:1;transform:none}
  .svc-item:hover figure img{transform:none}
}