:root{--bg:#A8CCE6;--bg2:#BCD8EC;--ink:#0D1E33;--mute:#27415E;--line:#7FA6C6;--acc:#F0661A;--onacc:#0D1E33;--pin:#0D1E33;
  --board:#0D1E33;--onboard:#FFFFFF;--boardmute:#A9C1D8;--hot:#F0661A;--paper:#EEF5FB;--deep:#0D1E33;--ondeep:#EEF5FB;--deepmute:#A9C1D8}
/* Look U "Pit": garages, tyre shops, car detailing (and any business that likes a race team's pit garage). A tinted
   livery page (powder blue, silver, papaya, racing green), never off-white; a livery stripe edged in pinstripes runs
   across the page and the number plate sits on it as the hero's one action; wide italic headlines; photos in slanted
   frames; prices, opening hours and the nav on black pit boards that hang from the top edge; a chequered hem.
   Fonts (OFL, public/fonts, latin + latin-ext, Fontsource 5.3.0): Anybody (variable weight and width, upright and
   italic) for headings and the plate, Epilogue (variable) for text. Every class starts with u-. */
@font-face{font-family:"Anybody U";font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(fonts/anybody-latin-ext-standard-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:"Anybody U";font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(fonts/anybody-latin-standard-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:"Anybody U";font-style:italic;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(fonts/anybody-latin-ext-standard-italic.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:"Anybody U";font-style:italic;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(fonts/anybody-latin-standard-italic.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:"Epilogue U";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/epilogue-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:"Epilogue U";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/epilogue-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}
/* livery: wide italic; sidewall: upright and extra wide, like the lettering on a tyre */
:root{--ud:"Anybody U",system-ui,sans-serif;--ut:"Epilogue U",system-ui,sans-serif}
body{--uds:italic;--udw:800;--udx:125%;--udt:-.01em}
.u-f-sidewall{--uds:normal;--udw:760;--udx:150%;--udt:-.005em}
:root{--m-accent:var(--acc);--m-header-bg:var(--bg);--pad:clamp(16px,4vw,48px);--max:1240px;--r:calc(6px*var(--tune-radius,1));--slant:-8deg;--bw:400px;
  --g-max:calc(var(--max) + 2 * var(--pad));--g-pad:var(--pad);--g-bg:var(--bg);--g-paper:var(--paper);--g-surface:var(--bg2);--g-ink:var(--ink);--g-muted:var(--mute);--g-line:var(--line);--g-accent:var(--acc);--g-radius:var(--r);--g-fd:var(--ud);--g-ft:var(--ut)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 calc(17px*var(--tune-size,1))/1.6 var(--ut);font-kerning:normal;overflow-wrap:break-word}
h1,h2,h3{margin:0;font-family:var(--ud);font-style:var(--uds);font-weight:var(--udw);font-stretch:var(--udx);letter-spacing:var(--udt);line-height:1.08;text-wrap:balance;hyphens:manual}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:.08em}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
img{display:block;max-width:100%}img:not(:where(.g-sec *)){height:auto}
ul,ol,dl,dd,figure,blockquote{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
h1,h2,h3,h4,summary,b,p,li,td,th,dd,dt,figcaption,label{overflow-wrap:anywhere;hyphens:auto}
.wrap,.u-wrap{width:min(100% - 2 * var(--pad),var(--max));margin-inline:auto}
.u-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.u-skip{position:absolute;left:1rem;top:-10rem;z-index:40;background:var(--board);color:var(--onboard);padding:.7rem 1.2rem;font-weight:700}
.u-skip:focus{top:1rem}
.u-sample{color:var(--mute);font-size:.85em;font-weight:400}
.u-arrow{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- the livery stripe: an accent band edged by two pinstripes, with a sliver of page between ---------- */
.u-stripe{position:relative;padding-block:22px;isolation:isolate}
.u-stripe::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--pin) 0 3px,transparent 3px 7px,var(--acc) 7px calc(100% - 7px),transparent calc(100% - 7px) calc(100% - 3px),var(--pin) calc(100% - 3px))}
.u-stripe-thin{padding-block:0;height:30px}
/* the chequered hem */
.u-chk{height:16px;background:repeating-conic-gradient(var(--board) 0 25%,var(--onboard) 0 50%) 0 0/16px 16px}

/* ---------- header: the business name on a hanging badge, the pages on a hanging pit board ---------- */
.u-top{position:absolute;inset:0 0 auto;z-index:20;height:0}
.u-badge,.u-board,.u-menu summary{background:var(--board);color:var(--onboard);border-radius:0 0 var(--r) var(--r);box-shadow:0 10px 24px -14px rgba(0,0,0,.55)}
.u-badge{position:absolute;left:max(var(--pad),calc((100% - var(--max)) / 2));top:0;display:flex;align-items:center;min-height:72px;max-width:min(380px,40vw);padding:14px 22px 10px;text-decoration:none;border-bottom:8px solid var(--acc)}
.u-badge-name{font:var(--uds) var(--udw) calc(21px*var(--tune-size,1))/1.1 var(--ud);font-stretch:var(--udx);letter-spacing:var(--udt)}
.u-badge .brand-logo,.u-badge .brand-logo img{height:34px}
.u-board{position:absolute;right:max(var(--pad),calc((100% - var(--max)) / 2));top:0;width:var(--bw);padding:8px 22px 0;overflow:hidden}
.u-board ul,.u-menu ul{display:grid}
/* the pit board carries the pages in one row, so it hangs short over the photo */
.u-board{display:flex;flex-wrap:wrap;align-items:center;column-gap:30px;width:auto;white-space:nowrap}
.u-board ul{grid-auto-flow:column;column-gap:30px}
.u-board li:nth-child(n+3){border-top:0}
.u-board .langs{border-top:0;padding:0}
.u-board::after{flex:0 0 calc(100% + 44px);margin-top:4px}
.u-board li:nth-child(n+3),.u-menu li+li{border-top:1px solid color-mix(in srgb,var(--onboard) 16%,transparent)}
.u-board a,.u-menu nav a{display:flex;align-items:center;gap:8px;padding:9px 0;text-decoration:none;font:var(--uds) var(--udw) calc(17px*var(--tune-size,1))/1.2 var(--ud);font-stretch:var(--udx);letter-spacing:var(--udt)}
.u-f-sidewall .u-board a,.u-f-sidewall .u-menu nav a{font-stretch:125%}
.u-board a{font-size:calc(16px*var(--tune-size,1))}.u-f-sidewall .u-board a{font-stretch:110%}
.u-board a::before,.u-menu nav a::before{content:"";width:10px;height:16px;flex:none;background:var(--hot);transform:skewX(var(--slant));opacity:0;transition:opacity .2s}
.u-board a[aria-current]::before,.u-menu nav a[aria-current]::before{opacity:1}
@media (hover:hover){.u-board a:hover::before,.u-menu nav a:hover::before{opacity:.6}}
.u-board .langs,.u-menu .langs{display:flex;padding:8px 0 10px;border-top:1px solid color-mix(in srgb,var(--onboard) 16%,transparent);color:var(--boardmute);font-size:calc(14px*var(--tune-size,1))}
.u-board .langs a,.u-menu .langs a{display:inline;padding:2px 0;font:600 calc(14px*var(--tune-size,1))/1.4 var(--ut);font-stretch:100%}
.u-board .langs a::before,.u-menu .langs a::before{content:none}
.u-board::after,.u-menu nav::after{content:"";display:block;height:12px;margin-inline:-22px;background:repeating-conic-gradient(var(--onboard) 0 25%,var(--board) 0 50%) 0 0/12px 12px}
.u-menu{display:none}
/* desktop: one compact opaque bar (name, pages, languages) that stays at the top while scrolling */
@media (min-width:1100px){
  :root{--uh:72px}
  .u-top{position:sticky;top:0;inset:auto;height:var(--uh);display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:max(var(--pad),calc((100% - var(--max)) / 2));background:var(--board);color:var(--onboard);box-shadow:0 8px 22px -16px rgba(0,0,0,.6)}
  .u-top .u-badge,.u-top .u-board{position:static;min-height:0;width:auto;max-width:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
  .u-top .u-board{margin-left:auto}
  .u-top .u-board::after{content:none}
  .u-top .u-board ul{grid-auto-flow:column;column-gap:30px}
  .u-top .u-board a{padding:8px 0}
  .u-top .u-board .langs{padding:0;border:0}
  body .u-bay,body .u-pl{height:max(600px,calc(100svh - var(--uh)))}
  .u-top .u-board li{border-top:0}
  .u-phead{padding-top:calc(64px*var(--tune-space,1))}
}
@media (max-width:1099px){
  .u-top{position:relative;height:auto;display:flex;justify-content:space-between;align-items:stretch;gap:12px;padding-inline:var(--pad)}
  .u-menu{display:flex}.u-menu summary{flex:1}
  .u-badge{position:static;min-height:56px;max-width:none;min-width:0;padding:10px 16px 8px;border-bottom-width:6px}
  .u-badge-name{font-size:calc(16px*var(--tune-size,1))}
  .u-f-sidewall .u-badge-name{font-stretch:115%}
  .u-board{display:none}
  .u-menu{flex:none}
  .u-menu summary{display:flex;align-items:center;min-height:56px;padding:10px 18px 8px;border-bottom:6px solid var(--acc);list-style:none;cursor:pointer;font:var(--uds) var(--udw) calc(16px*var(--tune-size,1))/1 var(--ud);font-stretch:var(--udx)}
  .u-menu summary::-webkit-details-marker{display:none}
  .u-menu .u-menu-c,.u-menu[open] .u-menu-o{display:none}
  .u-menu[open] .u-menu-c{display:inline}
  .u-menu nav{position:absolute;left:var(--pad);right:var(--pad);top:calc(100% + 8px);z-index:30;background:var(--board);color:var(--onboard);padding:8px 22px 0;border-radius:var(--r);overflow:hidden;box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
  .u-menu nav a{font-size:calc(22px*var(--tune-size,1));padding:14px 0}
}

/* ---------- type and section frames ---------- */
.u-h1{font-size:calc(clamp(2.35rem,1.25rem + 4.3vw,5.3rem)*var(--tune-size,1));line-height:1.02;overflow-wrap:break-word;hyphens:auto}
.u-f-sidewall .u-h1{font-size:calc(clamp(2.1rem,1.1rem + 3.7vw,4.6rem)*var(--tune-size,1))}
.u-h1-2{display:block}
.u-kicker{font:600 calc(15px*var(--tune-size,1))/1.4 var(--ut);color:var(--mute);margin-bottom:18px}
.u-lede{font-size:calc(clamp(17px,15px + .45vw,21px)*var(--tune-size,1));line-height:1.5;color:var(--mute);margin-top:20px}
.u-sec{padding-block:calc(clamp(64px,8vw,120px)*var(--tune-space,1))}
.u-sec+.u-sec{padding-top:0}
.u-phead+.u-sec{padding-top:calc(clamp(40px,5vw,72px)*var(--tune-space,1))}
.u-head{display:grid;gap:12px;margin-bottom:calc(clamp(28px,3.5vw,48px)*var(--tune-space,1));max-width:760px}
.u-head::before{content:"";width:76px;height:16px;background:linear-gradient(var(--pin) 0 3px,transparent 3px 5px,var(--acc) 5px 11px,transparent 11px 13px,var(--pin) 13px);transform:skewX(var(--slant));transform-origin:0 100%;margin-bottom:6px}
.u-head h2{font-size:calc(clamp(1.9rem,1.25rem + 2.3vw,3.3rem)*var(--tune-size,1))}
.u-head p{color:var(--mute);font-size:calc(18px*var(--tune-size,1))}
.u-more{margin-top:28px;display:flex;justify-content:flex-end}
.u-more a{display:inline-flex;align-items:center;gap:10px;font:var(--uds) var(--udw) calc(18px*var(--tune-size,1))/1.2 var(--ud);font-stretch:var(--udx);text-decoration:none;border-bottom:3px solid var(--acc);padding-bottom:4px}
@media (hover:hover){.u-more a:hover{border-bottom-color:var(--ink)}}

/* ---------- slanted photo frames ---------- */
.u-slant{position:relative;overflow:hidden;transform:skewX(var(--slant));border-radius:var(--r);background:var(--bg2)}
.u-slant img{width:100%;height:100%;object-fit:cover;transform:skewX(calc(-1 * var(--slant))) scale(1.16)}

/* ---------- hero (shared parts) ---------- */
/* every hero fills the first screen: the photo on top or beside, the livery stripe with the plate along the bottom
   edge of the screen (bay, plate) or right under the headline (stripe) */
.u-hero{position:relative;overflow-x:clip}
.u-hero-text{text-align:center;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center}
.u-hero-text>*{max-width:min(860px,100%)}
.u-hero .u-stripe{padding-block:22px}
.u-orcall{margin-top:18px;color:var(--mute);font-size:calc(17px*var(--tune-size,1))}
.u-orcall a{color:var(--ink);font-weight:700;white-space:nowrap}
/* one grade for every photo of the look: a touch cooler and calmer, so photos from different shoots sit together */
.u-ph,.u-slant img{filter:saturate(.8) contrast(1.05) brightness(var(--ubr,1))}
.u-phead{padding-top:calc(clamp(36px,5vw,64px)*var(--tune-space,1))}
@media (min-width:1100px){.u-phead{padding-top:calc(170px*var(--tune-space,1))}}

/* the number plate: always a white EU plate with black characters, a blue band and the country letters */
.u-plateform{display:flex;justify-content:center;align-items:stretch;gap:14px;width:min(100%,780px);margin-inline:auto}
.u-plate{position:relative;display:flex;align-items:stretch;flex:1 1 auto;min-width:0;height:96px;background:#fff;color:#111;border:3px solid #111;border-radius:calc(10px*var(--tune-radius,1));overflow:hidden;box-shadow:0 0 0 2px #fff,0 14px 28px -16px rgba(0,0,0,.5);container-type:inline-size}
.u-eu{display:flex;flex-direction:column;align-items:center;justify-content:space-between;flex:none;width:52px;padding:12px 0 10px;background:#1E3F9E;color:#fff}
.u-eu svg{width:26px;height:26px;fill:#F7CF2D}
.u-eu b{font:700 calc(21px*var(--tune-size,1))/1 var(--ud);font-stretch:100%;font-style:normal;letter-spacing:.02em}
.u-plate input{flex:1;min-width:0;width:100%;border:0;background:none;color:#111;padding:0 18px;font:660 calc(56px*var(--tune-size,1))/1 var(--ud);font-size:min(56px,(100cqi - 94px) / 5);font-style:normal;font-stretch:88%;letter-spacing:.06em;text-transform:uppercase;text-align:center}
.u-plate input::placeholder{color:#5d636b;opacity:1}
.u-plate input:focus{outline:none}
.u-plate:focus-within{outline:3px solid var(--ink);outline-offset:4px}
.u-go{display:inline-flex;align-items:center;justify-content:center;gap:12px;flex:none;height:96px;padding:0 30px;border:3px solid var(--pin);border-radius:calc(10px*var(--tune-radius,1));background:var(--acc);color:var(--onacc);font:var(--uds) var(--udw) calc(20px*var(--tune-size,1))/1.1 var(--ud);font-stretch:var(--udx);letter-spacing:var(--udt);text-decoration:none;cursor:pointer;box-shadow:0 0 0 2px var(--bg)}
.u-stripe .u-go{background:var(--board);color:var(--onboard);border-color:var(--board);box-shadow:none}
@media (hover:hover){.u-go:hover .u-arrow{transform:translateX(4px)}.u-arrow{transition:transform .2s}}
.u-plateform-on-bg{margin-top:24px}
.u-plateform-link{justify-content:center}
@media (max-width:640px){
  .u-plateform{flex-direction:column;gap:10px}
  .u-plate,.u-go{height:68px}
  .u-plate input{font-size:min(42px,(100cqi - 70px) / 5);padding:0 12px}
  .u-eu{width:40px;padding:8px 0 6px}.u-eu svg{width:20px;height:20px}.u-eu b{font-size:calc(16px*var(--tune-size,1))}
  .u-go{width:100%;font-size:calc(18px*var(--tune-size,1))}
  .u-hero .u-stripe{padding-block:18px}
}

/* five start lights in a pod, shown only by the Advanced hero moment */
.u-lights{position:absolute;left:50%;top:clamp(8px,2vw,40px);z-index:5;display:flex;gap:10px;padding:9px 14px;margin-left:-104px;width:208px;border-radius:999px;background:var(--board);opacity:0;pointer-events:none}
@media (min-width:1100px){.u-lights{top:46px}}
.u-lights i{position:relative;width:28px;height:28px;border-radius:50%;background:#3A0D0D}
.u-lights i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#FF2B1C;box-shadow:0 0 14px 2px rgba(255,43,28,.7);opacity:0}

/* hero "bay" (reference): the workshop photo is the whole first screen, the headline set big at its bottom-left,
   the stripe with the plate along the bottom edge of the screen */
.u-bay,.u-pl{display:grid;grid-template-rows:minmax(0,1fr) auto;height:max(600px,100svh);max-height:1120px;background:var(--board);color:var(--onboard)}
.u-bay-photo,.u-bay-text{grid-area:1/1;min-width:0}
.u-bay-photo{position:relative;overflow:hidden}
.u-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a scrim from the bottom-left keeps the words readable on a light photo too */
.u-bay-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--board) 90%,transparent),color-mix(in srgb,var(--board) 66%,transparent) 30%,color-mix(in srgb,var(--board) 25%,transparent) 56%,transparent 76%),linear-gradient(to right,color-mix(in srgb,var(--board) 55%,transparent),transparent 62%)}
.u-bay-text{position:relative;align-self:end;margin-inline:max(var(--pad),calc((100% - var(--max)) / 2));padding-bottom:calc(clamp(28px,3.6vw,52px)*var(--tune-space,1));max-width:1180px}
.u-bay .u-h1{font-size:calc(clamp(2.85rem,1rem + 7.8vw,8.2rem)*var(--tune-size,1));line-height:.98}
.u-f-sidewall .u-bay .u-h1{font-size:calc(clamp(2.75rem,.9rem + 6.6vw,7rem)*var(--tune-size,1))}
.u-bay .u-kicker,.u-bay .u-lede,.u-bay .u-orcall{color:var(--boardmute)}
.u-bay .u-kicker{margin-bottom:14px;color:var(--onboard)}
.u-bay-text p{text-shadow:0 1px 14px color-mix(in srgb,var(--board) 70%,transparent)}
.u-bay .u-lede{max-width:640px;margin-top:18px}
.u-bay .u-orcall a{color:var(--onboard)}
.u-bay .u-orcall{margin-top:10px}
.u-bay-plate{margin-inline:max(var(--pad),calc((100% - var(--max)) / 2))}
.u-pl-plate{margin-inline:var(--pad)}
.u-bay-plate .u-plateform{margin-inline:0}
@media (max-width:1099px){body:has(.u-bay,.u-pl) .u-top{position:absolute;inset:0 0 auto}}
.u-top:has(+ main .u-bay) .u-menu summary{box-shadow:none}
@media (max-width:640px){.u-bay .u-lede{margin-top:12px;font-size:calc(16px*var(--tune-size,1))}.u-bay .u-kicker{margin-bottom:8px;font-size:calc(14px*var(--tune-size,1))}}

/* hero "plate": a split. The photo fills the right side down to the stripe, its left edge cut at the livery slant,
   the pit board hanging over it; the headline sits on the page beside it; the stripe and the plate run along the
   bottom of the screen */
.u-pl{grid-template-columns:45fr 55fr;background:var(--bg);color:var(--ink)}
.u-pl-photo{grid-area:1/2;position:relative;overflow:hidden;clip-path:polygon(7.2vw 0,100% 0,100% 100%,0 100%);margin-left:calc(-1 * 3.6vw)}
.u-pl-text{grid-area:1/1;align-self:center;padding:calc(110px*var(--tune-space,1)) clamp(28px,3vw,48px) 32px var(--pad);min-width:0}
/* the headline column is narrow and tall: a slightly narrower cut of Anybody keeps two words to a line */
.u-pl .u-h1{--udx:100%;font-size:calc(clamp(2.75rem,6.3vw,7rem)*var(--tune-size,1));line-height:1}
.u-f-sidewall .u-pl .u-h1{--udx:110%}
.u-pl .u-lede{margin-top:22px;max-width:520px}
.u-pl .u-kicker,.u-pl .u-orcall{color:var(--mute)}
.u-pl .u-hero-stripe{grid-column:1/-1;display:grid;grid-template-columns:45fr 55fr}
/* the plate starts where the photo's slanted edge meets the stripe */
.u-pl-plate{grid-column:2;margin:0 var(--pad) 0 -3.6vw}
.u-pl-plate .u-plateform{width:100%;max-width:none}
@media (max-width:899px){
  .u-pl{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;height:auto;max-height:none}
  .u-pl-photo{grid-area:auto;height:clamp(250px,40svh,420px);margin-left:0;clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 6vw))}
  .u-pl-text{grid-area:auto;padding:22px var(--pad) 26px}
  .u-pl .u-lede{margin-top:12px}
  .u-pl .u-kicker{margin-bottom:8px}
  .u-pl .u-orcall{display:none}
  .u-pl .u-hero-stripe{grid-template-columns:minmax(0,1fr)}
  .u-pl-plate{grid-column:1;margin-inline:var(--pad)}
}

/* hero "stripe": a wide slanted photo frame from the top of the page, the headline set big inside the stripe right
   under it, the plate below */
.u-strip{padding-bottom:calc(clamp(40px,6vw,88px)*var(--tune-space,1))}
.u-strip-photo{padding-inline:calc(var(--pad) + 40px)}
.u-strip-photo .u-slant{height:clamp(300px,55svh,500px);border-radius:0 0 var(--r) var(--r)}
.u-strip-band{padding-block:24px 28px;color:var(--onacc);text-align:center}
.u-strip-band .u-kicker{color:inherit;margin-bottom:6px}
.u-strip-band .u-h1{font-size:calc(clamp(2.75rem,1rem + 5.3vw,6.6rem)*var(--tune-size,1))}
.u-strip .u-lede{margin-top:24px}
@media (max-width:760px){.u-strip-photo{padding-inline:28px}.u-strip-photo .u-slant{height:clamp(260px,38svh,380px)}}

/* page heads (services, team) */
.u-phead{padding-bottom:calc(clamp(40px,5vw,72px)*var(--tune-space,1))}
.u-phead .u-h1{font-size:calc(clamp(2.1rem,1.1rem + 3.2vw,4rem)*var(--tune-size,1))}
.u-f-sidewall .u-phead .u-h1{font-size:calc(clamp(1.55rem,.8rem + 3vw,3.5rem)*var(--tune-size,1))}
.u-phead .u-stripe-thin{margin-top:calc(clamp(36px,4vw,56px)*var(--tune-space,1))}

/* ---------- services: board rows ---------- */
.u-rows{display:grid;border-bottom:2px solid var(--line)}
.u-row{display:grid;grid-template-columns:minmax(0,1fr) 9rem 13rem;align-items:center;gap:28px;padding:22px 0;border-top:2px solid var(--line)}
.u-row h3{font-size:calc(clamp(1.3rem,1.1rem + .7vw,1.75rem)*var(--tune-size,1))}
.u-row h3 a,.u-slip h3 a{text-decoration:none}
@media (hover:hover){.u-row h3 a:hover,.u-slip h3 a:hover{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--acc)}}
.u-row-name p{color:var(--mute);margin-top:6px}
.u-row-time{color:var(--mute);font-weight:600;text-align:right;white-space:nowrap}
/* a price on a black pit board */
.u-pb{display:grid;justify-items:center;align-content:center;gap:2px;min-height:86px;padding:10px 14px;background:var(--board);color:var(--onboard);border-radius:var(--r);text-align:center}
.u-pb b{font:var(--uds) 800 calc(clamp(1.45rem,1.2rem + .7vw,1.85rem)*var(--tune-size,1))/1.05 var(--ud);font-stretch:112%;font-variant-numeric:tabular-nums;max-width:100%}
.u-pb-s{font-size:13px;line-height:1.2;color:var(--boardmute);white-space:nowrap}
.u-pb-ask b{font-size:calc(18px*var(--tune-size,1))}
@media (max-width:760px){
  .u-row{grid-template-columns:minmax(0,1fr) auto;gap:10px 18px}
  .u-row-name{grid-column:1/-1}
  .u-row-time{text-align:left}
  .u-row .u-pb{min-width:10rem}
}

/* ---------- services: job slips ---------- */
.u-slips{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.u-slip{flex:0 1 calc((100% - 48px) / 3);min-width:0;display:flex;flex-direction:column;background:var(--paper);clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%);border-radius:var(--r) 0 var(--r) var(--r)}
.u-slip h3{font-size:calc(clamp(1.2rem,1.05rem + .45vw,1.45rem)*var(--tune-size,1));hyphens:auto;padding:24px 54px 20px 24px;border-top:10px solid var(--acc)}
.u-slip-t{padding:0 24px;color:var(--mute)}
.u-slip-foot{display:grid;grid-template-columns:1fr auto;align-items:end;gap:14px;margin-top:auto;padding:24px}
.u-slip-time{color:var(--mute);font-weight:600;padding-bottom:6px}
.u-slip .u-pb{min-width:9.5rem}
@media (max-width:980px){.u-slip{flex-basis:calc((100% - 24px) / 2)}}
@media (max-width:620px){.u-slip{flex-basis:100%}}

/* ---------- the pit wall: three equal slanted photos side by side, edge to edge ---------- */
.u-wall-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-inline:calc(var(--pad) + 30px)}
.u-wall .u-slant{height:clamp(240px,27vw,420px)}
@media (max-width:760px){.u-wall-in{grid-template-columns:1fr 1fr;gap:16px;padding-inline:calc(var(--pad) + 18px)}.u-wall-0{grid-column:1/-1}.u-wall .u-slant{height:180px}.u-wall .u-wall-0{height:230px}}

/* ---------- promise: wide slanted photo and a job card with ticked boxes ---------- */
.u-promise-in{display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,4vw,60px);align-items:center;padding-inline:22px}
.u-promise-photo{aspect-ratio:16/10}
/* the stripe is painted inside the card, so it follows the round corners instead of tapering at them */
.u-job{background:linear-gradient(var(--acc),var(--acc)) top/100% 8px no-repeat,var(--paper);border-radius:var(--r);padding:calc(calc(clamp(24px,3vw,40px) + 8px)*var(--tune-space,1)) clamp(24px,3vw,40px) calc(clamp(24px,3vw,40px)*var(--tune-space,1))}
.u-job h2{font-size:calc(clamp(1.6rem,1.2rem + 1.4vw,2.4rem)*var(--tune-size,1))}
.u-job ul{display:grid;gap:16px;margin-top:24px}
.u-job li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;font-size:calc(18px*var(--tune-size,1));line-height:1.45}
.u-job svg{width:28px;height:28px;margin-top:-1px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u-job svg path{stroke-width:3.2}
@media (max-width:860px){.u-promise-in{grid-template-columns:1fr;padding-inline:14px}}

/* ---------- key figures: one row of instrument bezels on a board-coloured panel ---------- */
.u-sec.u-dash{background:var(--board);color:var(--onboard);padding-block:calc(clamp(40px,5vw,72px)*var(--tune-space,1))}
.u-dash+.u-sec{padding-top:calc(clamp(64px,8vw,120px)*var(--tune-space,1))}
.u-dash-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px 48px;align-items:center}
.u-dash-t{font-size:calc(clamp(1.6rem,1.2rem + 1.4vw,2.6rem)*var(--tune-size,1))}
.u-gauges{display:flex;justify-content:space-between;gap:clamp(16px,3vw,40px)}
.u-dash-in>.u-gauges:only-child{grid-column:1/-1;justify-content:center}
.u-gauge{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;flex:1 1 0;min-width:0}
.u-dial{position:relative;display:grid;place-items:center;width:120px;aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--onboard) 7%,var(--board));color:var(--onboard);box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--onboard) 14%,var(--board))}
.u-dial svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-linecap:round}
.u-dial-arc{stroke:color-mix(in srgb,var(--onboard) 35%,transparent);stroke-width:2}
.u-dial-red{stroke:var(--hot);stroke-width:5}
.u-dial-tick{stroke:var(--onboard);stroke-width:2}
.u-dial b{position:relative;font:var(--uds) 800 calc(34px*var(--tune-size,1))/1 var(--ud);font-stretch:108%;font-variant-numeric:tabular-nums}
.u-gauge p{color:var(--boardmute);font-weight:600;line-height:1.4}
.u-dash .u-sample{color:var(--boardmute)}
@media (max-width:1000px){.u-dash-in{grid-template-columns:1fr}.u-gauge{grid-template-columns:1fr;justify-items:center;text-align:center}}
@media (max-width:600px){.u-gauges{gap:12px}.u-gauge{gap:10px}.u-dial{width:100%;max-width:100px}.u-dial b{font-size:calc(26px*var(--tune-size,1))}.u-gauge p{font-size:calc(14px*var(--tune-size,1));line-height:1.35}}

/* ---------- reviews: team radio ---------- */
.u-radio .u-head{margin-bottom:calc(clamp(24px,3vw,40px)*var(--tune-space,1))}
.u-lead{padding-block:calc(clamp(44px,5vw,72px)*var(--tune-space,1));color:var(--onacc)}
.u-lead-in{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:20px 48px;align-items:start}
.u-lead .u-msg-who{color:inherit;padding-top:.5em}
.u-lead .u-msg-who svg{fill:currentColor;width:56px;height:20px}
.u-lead .u-sample{color:inherit}
.u-lead blockquote p{font:var(--uds) var(--udw) calc(clamp(1.6rem,1.05rem + 2vw,2.9rem)*var(--tune-size,1))/1.18 var(--ud);font-stretch:var(--udx);letter-spacing:var(--udt);text-wrap:balance}
@media (max-width:760px){.u-lead-in{grid-template-columns:1fr}.u-lead .u-msg-who{padding-top:0}}
.u-radios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:24px}
.u-radios-1{grid-template-columns:minmax(0,1fr);max-width:760px;margin-inline:auto}
.u-msg{display:flex;flex-direction:column;gap:18px;background:var(--board);color:var(--onboard);border-radius:var(--r);padding:26px 28px 30px;border-left:8px solid var(--hot)}
.u-msg-who{display:flex;align-items:center;gap:14px;font:var(--uds) 700 calc(16px*var(--tune-size,1))/1.3 var(--ud);font-stretch:var(--udx);color:var(--onboard)}
.u-msg-who svg{width:44px;height:16px;flex:none;fill:var(--hot)}
.u-msg .u-sample{color:var(--boardmute)}
.u-msg blockquote p{font-size:calc(19px*var(--tune-size,1));line-height:1.5}
.u-msg em,.u-one em,.u-lead em{font-style:normal;font-weight:700}
@media (max-width:900px){.u-radios{grid-template-columns:1fr}}
.u-one-band{padding-block:calc(clamp(48px,6vw,88px)*var(--tune-space,1));color:var(--onacc);text-align:center}
.u-one figure{display:grid;justify-items:center;gap:22px;max-width:900px;margin-inline:auto}
.u-one blockquote p{font:var(--uds) var(--udw) calc(clamp(1.6rem,1.1rem + 1.8vw,2.6rem)*var(--tune-size,1))/1.2 var(--ud);font-stretch:var(--udx);text-wrap:balance}
.u-one figcaption{font-weight:700}
.u-one .u-sample{color:inherit}

/* ---------- opening hours as a timing screen, where to find us ---------- */
.u-visit-in{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:stretch}
.u-screen{background:var(--board);color:var(--onboard);border-radius:var(--r);padding:clamp(24px,3vw,36px)}
.u-screen h2,.u-screen h3{font-size:calc(clamp(1.4rem,1.15rem + .8vw,1.9rem)*var(--tune-size,1));margin-bottom:18px}
.u-times th,.u-times td{padding:14px 0;border-top:1px dashed color-mix(in srgb,var(--onboard) 26%,transparent);text-align:left;vertical-align:baseline}
.u-times thead th{border-top:0;padding:0 0 8px;font:600 calc(14px*var(--tune-size,1))/1.3 var(--ut);color:var(--boardmute)}
.u-times tbody th{font:var(--uds) 700 calc(19px*var(--tune-size,1))/1.3 var(--ud);font-stretch:var(--udx);padding-right:16px}
.u-times td{font:600 24px/1.2 var(--ud);font-stretch:100%;font-style:normal;font-variant-numeric:tabular-nums;width:24%;white-space:nowrap}
.u-times td[colspan]{width:auto;font:600 calc(17px*var(--tune-size,1))/1.4 var(--ut)}
.u-times tr.u-today th,.u-times tr.u-today td{color:var(--hot)}
.u-times tr.u-today th::after{content:"";display:inline-block;width:10px;height:10px;margin-left:10px;border-radius:50%;background:var(--hot);vertical-align:.1em}
.u-rates td{width:auto;text-align:right;font-size:calc(clamp(17px,15px + .6vw,22px)*var(--tune-size,1));padding-left:12px}
@media (max-width:560px){.u-rates tr{display:grid;grid-template-columns:1fr}.u-rates th{padding-bottom:2px}.u-rates td{text-align:left;border-top:0;padding:0 0 14px}}
.u-screen .wk ol{display:grid;gap:10px}
.u-screen .wk li{display:grid;grid-template-columns:3.2rem minmax(0,1fr) 7.5rem;gap:14px;align-items:center}
.u-screen .wk-n{font:var(--uds) 700 calc(16px*var(--tune-size,1))/1 var(--ud);font-stretch:var(--udx)}
.u-screen .wk-bar{position:relative;height:16px;background:color-mix(in srgb,var(--onboard) 12%,transparent);border-radius:calc(3px*var(--tune-radius,1));overflow:hidden}
.u-screen .wk-bar i{position:absolute;top:0;bottom:0;background:var(--hot);transform:skewX(var(--slant))}
.u-screen .wk-t{font-variant-numeric:tabular-nums;text-align:right;font-weight:600}
.u-screen .wk .off .wk-t{color:var(--boardmute)}
.u-screen .wk-scale{display:flex;justify-content:space-between;margin:8px 7.5rem 0 4rem;color:var(--boardmute);font-size:calc(13px*var(--tune-size,1))}
.u-where{display:grid;align-content:start;gap:10px;background:var(--paper);border-radius:var(--r);padding:clamp(24px,3vw,36px)}
.u-where h3{font-size:calc(clamp(1.4rem,1.15rem + .8vw,1.9rem)*var(--tune-size,1));margin-bottom:8px}
.u-where-addr{font-size:calc(19px*var(--tune-size,1));line-height:1.45}
.u-where-area{color:var(--mute)}
.u-where-tel{margin-top:10px;font:var(--uds) 800 clamp(1.5rem,1.2rem + 1vw,2.1rem)/1.1 var(--ud);font-stretch:112%;text-decoration:none;white-space:nowrap}
.u-where-mail{font-weight:600;overflow-wrap:anywhere}
@media (max-width:860px){.u-visit-in{grid-template-columns:1fr}}

/* ---------- gallery ---------- */
.u-gal{padding-bottom:calc(clamp(64px,8vw,120px)*var(--tune-space,1))}
.u-gal .g-title{font-style:var(--uds);font-weight:var(--udw);font-stretch:var(--udx);letter-spacing:var(--udt);font-size:calc(clamp(1.9rem,1.25rem + 2.3vw,3.3rem)*var(--tune-size,1));line-height:1.08}
.u-gal .g-st{--st-ink:var(--ink)}.u-gal .g-st-t,.u-gal .g-st-w{font-style:var(--uds);font-weight:var(--udw);letter-spacing:var(--udt)}.u-gal .g-st-t{font-stretch:var(--udx);font-size:calc(clamp(26px,2.6vw,40px)*var(--tune-size,1))}.u-gal .g-st-badge,.u-gal .g-st-price{background:color-mix(in srgb,var(--bg) 70%,transparent)}.u-gal .g-st-cta{background:var(--acc);color:var(--onacc)}

/* ---------- closing: the finish line ---------- */
.u-close{background:var(--bg2);padding-bottom:calc(clamp(64px,8vw,112px)*var(--tune-space,1))}
.u-close-head{display:grid;justify-items:center;text-align:center;gap:14px;padding-top:calc(clamp(56px,7vw,100px)*var(--tune-space,1))}
.u-close-head h2{font-size:calc(clamp(2rem,1.3rem + 2.6vw,3.6rem)*var(--tune-size,1));max-width:900px}
.u-close-head>p{color:var(--mute);font-size:calc(18px*var(--tune-size,1));max-width:640px}
.u-bigtel{margin-top:18px;font:var(--uds) 800 clamp(2.2rem,1.2rem + 4.2vw,5rem)/1 var(--ud);font-stretch:112%;font-variant-numeric:tabular-nums;text-decoration:none;white-space:nowrap}
.u-bigmail{font-size:calc(clamp(1.4rem,1rem + 2vw,2.6rem)*var(--tune-size,1));white-space:normal;overflow-wrap:anywhere}
@media (hover:hover){.u-bigtel:hover{text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:4px}}
.u-flag .u-more{justify-content:center;margin-top:20px}
.u-close-plate .u-stripe{margin-top:calc(clamp(28px,3.5vw,44px)*var(--tune-space,1))}
.u-close-plate{padding-bottom:0}
body:has(.u-close-plate) .u-foot::before{content:none}
body:has(.u-close-plate) .u-foot{padding-top:calc(clamp(40px,5vw,64px)*var(--tune-space,1))}

/* ---------- services page ---------- */
.u-svc{display:grid;grid-template-columns:4fr 6fr 13rem;gap:clamp(20px,3vw,44px);align-items:start;padding:calc(clamp(28px,3.5vw,44px)*var(--tune-space,1)) 0;border-top:2px solid var(--line);scroll-margin-top:24px}
.u-svc h2{font-size:calc(clamp(1.5rem,1.2rem + 1vw,2.2rem)*var(--tune-size,1))}
.u-f-sidewall .u-svc h2{--udx:118%}
.u-svc-for{margin-top:12px;color:var(--mute)}
.u-svc-for span,.u-svc-time span{font-weight:700;color:var(--ink)}
.u-svc-text p+p{margin-top:12px}
.u-svc-time{color:var(--mute)}
.u-svcs .u-wrap:last-child .u-svc:last-child{border-bottom:2px solid var(--line)}
.u-svc-band{padding:calc(clamp(24px,3vw,40px)*var(--tune-space,1)) 26px}
.u-svc-band .u-slant{aspect-ratio:21/7}
@media (max-width:860px){.u-svc{grid-template-columns:minmax(0,1fr) auto}.u-svc-name,.u-svc-text{grid-column:1/-1}.u-svc .u-pb{grid-column:2;min-width:10rem}.u-svc-band{padding-inline:14px}.u-svc-band .u-slant{aspect-ratio:16/9}}
.u-extra-in{max-width:880px}
.u-rates th{font:var(--uds) 700 calc(18px*var(--tune-size,1))/1.35 var(--ud)}
/* FAQ */
.u-faq-list{display:grid;border-bottom:2px solid var(--line);max-width:900px}
.u-q{border-top:2px solid var(--line)}
.u-q summary{display:grid;grid-template-columns:1fr 32px;gap:20px;align-items:center;padding:20px 0;cursor:pointer;list-style:none;font:var(--uds) 700 calc(clamp(1.1rem,1rem + .4vw,1.35rem)*var(--tune-size,1))/1.3 var(--ud);font-stretch:var(--udx)}
.u-q summary::-webkit-details-marker{display:none}
.u-q summary::after{content:"+";display:grid;place-items:center;width:32px;height:32px;border-radius:calc(4px*var(--tune-radius,1));background:var(--board);color:var(--onboard);font:700 calc(22px*var(--tune-size,1))/1 var(--ut)}
.u-q[open] summary::after{content:"\2212"}
.u-q p{padding:0 52px 22px 0;color:var(--mute);font-size:calc(18px*var(--tune-size,1))}
.u-faq-open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px}
.u-faq-open div{border-top:2px solid var(--line);padding-top:18px}
.u-faq-open dt{font:var(--uds) 700 calc(1.2rem*var(--tune-size,1))/1.3 var(--ud);font-stretch:var(--udx)}
.u-faq-open dd{margin-top:10px;color:var(--mute)}
@media (max-width:760px){.u-faq-open{grid-template-columns:1fr}}

/* ---------- team page ---------- */
.u-crew-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:44px 32px}
.u-crew-grid li{display:grid;justify-items:center;align-content:start;gap:8px;text-align:center;flex:0 1 calc((100% - 64px) / 3);max-width:340px}
.u-crew-4 li{flex-basis:calc((100% - 96px) / 4)}
.u-roundel{display:grid;place-items:center;width:150px;aspect-ratio:1;border-radius:50%;background:#fff;color:#111;box-shadow:0 0 0 8px var(--board),0 0 0 14px var(--acc);margin:14px 0 18px}
.u-roundel span{font:italic 800 calc(54px*var(--tune-size,1))/1 var(--ud);font-stretch:118%;letter-spacing:-.02em;transform:translateX(-2px)}
.u-crew-grid h3{font-size:calc(1.45rem*var(--tune-size,1))}
.u-role{color:var(--mute);font-weight:700}
.u-crew-grid li>p:last-child{color:var(--mute);margin-top:6px}
@media (max-width:860px){.u-crew-grid li,.u-crew-4 li{flex-basis:calc((100% - 32px) / 2)}}
@media (max-width:560px){.u-crew-grid li,.u-crew-4 li{flex-basis:100%}}
.u-crew-rows{display:grid;border-bottom:2px solid var(--line)}
.u-crew-rows li{display:grid;grid-template-columns:76px minmax(0,4fr) minmax(0,7fr);gap:24px;align-items:center;padding:20px 0;border-top:2px solid var(--line)}
.u-roundel-sm{width:64px;margin:6px;box-shadow:0 0 0 4px var(--board),0 0 0 7px var(--acc)}
.u-roundel-sm span{font-size:calc(24px*var(--tune-size,1));transform:translateX(-1px)}
.u-crew-rows h3{font-size:calc(1.3rem*var(--tune-size,1))}
.u-crew-rows li>p{color:var(--mute)}
@media (max-width:760px){.u-crew-rows li{grid-template-columns:76px 1fr}.u-crew-rows li>p{grid-column:1/-1}}
/* booking */
.u-book-in{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:start}
.u-book-side{display:grid;gap:24px}
.u-form{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;background:var(--paper);border-radius:var(--r);padding:clamp(22px,3vw,36px);border-top:10px solid var(--acc)}
.u-form label{display:grid;gap:8px;font-weight:700;font-size:calc(16px*var(--tune-size,1))}
.u-form-wide,.u-form-plate{grid-column:1/-1}
.u-form-plate .u-plate{height:72px;max-width:440px}
.u-form-plate .u-plate input{font-size:calc(36px*var(--tune-size,1))}
.u-form-plate small{font-weight:400;color:var(--mute);font-size:calc(15px*var(--tune-size,1))}
.u-form input:not(.u-plate input),.u-form textarea,.u-form select{width:100%;min-height:52px;padding:12px 14px;border:2px solid var(--line);border-radius:var(--r);background:#fff;color:#111;font:400 calc(17px*var(--tune-size,1))/1.4 var(--ut)}
.u-form textarea{resize:vertical}
.u-form-send{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.u-form-send .u-go{height:64px}
.u-form-send p{color:var(--mute);font-size:calc(15px*var(--tune-size,1))}
.u-where-board{background:var(--board);color:var(--onboard)}
.u-where-board .u-where-tel{margin-top:0}
.u-reach{display:grid;gap:18px}
.u-reach a{display:grid;gap:6px;background:var(--board);color:var(--onboard);border-radius:var(--r);padding:clamp(22px,3vw,36px);text-decoration:none;border-left:10px solid var(--hot)}
.u-reach span{color:var(--boardmute);font-weight:600}
.u-reach b{font:var(--uds) 800 calc(clamp(1.6rem,1.1rem + 2vw,2.8rem)*var(--tune-size,1))/1.1 var(--ud);font-stretch:112%;overflow-wrap:anywhere}
.u-reach-mail b{font-size:calc(clamp(1.2rem,1rem + 1vw,1.8rem)*var(--tune-size,1))}
@media (max-width:900px){.u-book-in{grid-template-columns:1fr}}
@media (max-width:560px){.u-form{grid-template-columns:1fr}.u-form-send{grid-template-columns:1fr}.u-form-send .u-go{width:100%}}
.u-legal{padding-bottom:calc(40px*var(--tune-space,1));color:var(--mute);font-size:calc(14px*var(--tune-size,1))}

/* ---------- footer ---------- */
.u-foot{background:var(--deep);color:var(--ondeep)}
.u-foot::before{content:"";display:block;height:36px;margin-bottom:calc(clamp(40px,5vw,64px)*var(--tune-space,1));background:linear-gradient(var(--pin) 0 5px,var(--bg2) 5px 10px,var(--acc) 10px 26px,var(--bg2) 26px 31px,var(--pin) 31px)}
.u-foot-in{display:grid;grid-template-columns:5fr 4fr 4fr;gap:clamp(24px,4vw,56px);padding-bottom:calc(40px*var(--tune-space,1))}
.u-foot-name{font:var(--uds) var(--udw) calc(clamp(1.5rem,1.2rem + 1vw,2.2rem)*var(--tune-size,1))/1.1 var(--ud);font-stretch:var(--udx);margin-bottom:12px}
.u-foot p,.u-foot li{color:var(--deepmute)}
.u-foot .u-foot-name{color:var(--ondeep)}
.u-foot-call{display:grid;align-content:start;gap:8px}
.u-foot-tel{font:var(--uds) 800 24px/1.2 var(--ud);font-stretch:112%;text-decoration:none;white-space:nowrap}
.u-foot-hours{display:grid;margin-top:8px}
.u-foot-nav>ul:not(.langs){display:grid;gap:6px}
.u-foot-nav a{text-decoration:none;color:var(--ondeep)}
.u-foot-nav a:hover,.u-foot-nav a[aria-current]{text-decoration:underline}
.u-foot-legal{font-size:calc(15px*var(--tune-size,1))}
.u-foot-legal:first-of-type{margin-top:10px}
.u-foot .langs{margin-top:16px;color:var(--ondeep)}
.u-foot-fic{padding-bottom:28px;font-size:calc(14px*var(--tune-size,1));color:var(--deepmute)}
@media (max-width:860px){.u-foot-in{grid-template-columns:1fr}}

/* legal pages and 404 (shared components) */
main>.wrap{padding-top:calc(clamp(36px,5vw,72px)*var(--tune-space,1));padding-bottom:calc(clamp(56px,7vw,96px)*var(--tune-space,1))}
@media (min-width:1100px){main>.wrap{padding-top:calc(170px*var(--tune-space,1))}}
main>.wrap h1{font-size:calc(clamp(2rem,1.3rem + 2.6vw,3.4rem)*var(--tune-size,1));margin-bottom:24px}
main>.wrap h2{font-size:calc(1.5rem*var(--tune-size,1));margin:36px 0 12px}

/* ---------- Advanced hero moment: "lights out" ----------
   Five red start lights come on one by one in a pod above the headline and go out together; the hero launches:
   the headline, held back and leaning, jumps forward and settles, the stripe streaks across from the left, the plate
   drops onto it and the photos pass in from the right. The plate leans toward the pointer afterwards (data-tilt),
   the photos drift with it (data-depth). Transform and opacity only, the headline and photos are on the page from
   the first frame, fill mode backwards on everything the pointer moves. */
@media (prefers-reduced-motion:no-preference){
  .m-js .u-hero .u-lights{animation:u-pod 1.08s linear backwards}
  .m-js .u-hero .u-lights i::after{animation:u-lamp calc(.86s - var(--k) * .15s) step-start calc(.1s + var(--k) * .15s) backwards}
  .m-js .u-hero .u-h1{animation:u-launch 1.55s cubic-bezier(.2,.8,.2,1) backwards}
  .m-js .u-hero .u-stripe::before{animation:u-sweep .55s cubic-bezier(.25,.8,.1,1) .95s backwards;transform-origin:0 50%}
  .m-js .u-strip .u-strip-band::before{animation-delay:0s}
  .m-js .u-hero .u-plate{animation:u-drop .6s cubic-bezier(.3,1,.55,1) 1.12s backwards}
  .m-js .u-hero .u-go{animation:u-drop .6s cubic-bezier(.3,1,.55,1) 1.2s backwards}
  .m-js .u-hero .u-slant{animation:u-pass .85s cubic-bezier(.2,.8,.2,1) 1.05s backwards}
  .m-js .u-hero .u-hero-img{animation:u-zoom 1.9s cubic-bezier(.2,.7,.2,1) backwards}
  @keyframes u-pod{0%,90%{opacity:1}100%{opacity:0}}
  @keyframes u-lamp{0%,100%{opacity:1}}
  @keyframes u-launch{0%,60%{transform:translateX(-2.6vw) skewX(-11deg)}80%{transform:translateX(.5vw) skewX(2deg)}100%{transform:none}}
  @keyframes u-sweep{from{transform:scaleX(0)}}
  @keyframes u-drop{from{translate:0 -26px;opacity:0}}
  @keyframes u-pass{from{translate:9vw 0;opacity:0}}
  @keyframes u-zoom{from{transform:scale(1.08)}}
  /* scroll: the red line of each instrument bezel lights up, the job card's boxes tick one after another */
  .m-js .u-gauges.m-in .u-dial-red,.m-js .u-gauges .m-in .u-dial-red{animation:u-red .5s ease-out .35s backwards}
  @keyframes u-red{from{opacity:0}}
  .m-js .u-job.m-in li svg path{animation:u-tick .3s ease-out backwards}
  .m-js .u-job.m-in li:nth-child(2) svg path{animation-delay:.2s}.m-js .u-job.m-in li:nth-child(3) svg path{animation-delay:.4s}.m-js .u-job.m-in li:nth-child(4) svg path{animation-delay:.6s}
  @keyframes u-tick{from{opacity:0}}
}

/* ── serious (the default tone): upright headings, calmer stripe; tone.ts already calmed shadows and colours */
[data-tone=serious] body{--uds:normal;--udw:700;--udx:112%}
/* sidewall keeps its extra width in serious: the wide upright letters are its whole idea */
[data-tone=serious] .u-f-sidewall{--udx:138%}

/* sales step 4 (photo-slice): on phones the first photo keeps more of the picture; the main button and the phone bar stay on the first screen */
@media (max-width:760px){.u-bay,.u-pl{height:max(560px,72svh)}}