/* ==========================================================================
   EV Clinic — reset, typography, layout primitives, glass, header, footer.

   Two laws, and they pull against each other, which is the point.

   The first is inherited from the master page:

     No frames. Structure comes from space and from hairlines that stop short
     of enclosing anything. A page built from boxes reads as a form; this is
     meant to read as a document.

   The second is new, and is what makes this the franchise theme rather than
   a white version of the old one:

     Glass is a surface, not a border. A frosted panel separates content by
     being made of a different material to the page, not by drawing a line
     around it. So the panels have almost no visible edge — a 1px white
     border that reads as a highlight rather than an outline, and a shadow
     soft enough to be mistaken for depth rather than for a box.

   Where the two agree: still almost no hard borders, still no heavy
   shadows, still structure from space. What changed is that the ground
   underneath now has a texture for the glass to pick up.
   ========================================================================== */

/* ----------------------------------------------------------------- reset */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* The sticky header would otherwise cover an anchor target. */
  scroll-padding-top:calc(var(--header-h) + 24px);
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

@media (max-width:760px){ body{font-size:16px} }

/* ============================================================== the mosaic

   The cell grid, on the same 19px pitch the video backdrop samples at, so
   the static lattice and the moving one land on the same grid and read as
   one surface instead of two.

   Drawn with gradients rather than an image: it is four declarations, it
   scales to any viewport, it costs no request, and it recolours with the
   token. Two layers — hairlines for the lattice, a dot at each intersection
   for the cell itself.

   Fixed attachment, so the page slides over the grid rather than dragging it
   along. That is what sells the glass above it as a separate pane. It is
   dropped on touch devices, where background-attachment:fixed forces the
   whole page into a repaint on every scroll frame and is the single most
   reliable way to make a phone stutter.
   ========================================================================= */

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-color:var(--paper);
  background-image:
    /* the cell */
    radial-gradient(circle at center, var(--cell-dot) 1.1px, transparent 1.6px),
    /* the lattice */
    linear-gradient(to right, var(--cell-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--cell-ink) 1px, transparent 1px);
  background-size:
    var(--cell) var(--cell),
    var(--cell) var(--cell),
    var(--cell) var(--cell);
}

/* The colour washes. Three radials that give the glass something to pick up
   besides grey, and give the page a temperature without a coloured band
   anywhere in it. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(62% 48% at 12% 8%,  rgba(var(--cold-rgb),.10), transparent 62%),
    radial-gradient(52% 42% at 88% 14%, rgba(var(--mint-rgb),.10), transparent 64%),
    radial-gradient(70% 46% at 62% 96%, rgba(var(--amber-rgb),.07), transparent 66%);
}

@media (hover: none){
  /* Repainting a fixed layer on every scroll frame is what makes phones
     stutter. The grid stays, it just scrolls with the document. */
  body::before,body::after{position:absolute;min-height:100%}
}

/* ================================================================== glass

   One recipe. A panel, the header, a popup and the search results are the
   same material; only the radius and the padding differ.

   NO `isolation: isolate` here, and that is a correction rather than an
   omission. An earlier version set it, reasoning that it would control what
   the filter sampled. It does the opposite: per the Filter Effects spec,
   `isolation` creates a Backdrop Root, and an element that is its OWN
   backdrop root has nothing behind it inside that root for the filter to
   read. The result is a pane that samples an empty or stale backdrop — which
   in Chrome, over a fixed WebGL canvas, smears rather than blurs.

   If a glass surface ever needs to stop a child from blending past it, put
   the isolation on a WRAPPER, never on the filtered element.
   ========================================================================= */

.glass{
  position:relative;
  background:linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border:1px solid var(--glass-edge);
  border-radius:var(--radius);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    var(--glass-shadow);
}

/* A glass surface that spans the viewport: no side borders, because an edge
   that runs off screen is a seam rather than a frame. */
.glass-band{
  background:linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-block:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--glass-sheen);
}

/* The one decorative flourish, and it is one line: a highlight that runs
   along the top edge and fades at both ends, the way light catches the lip
   of a real pane. Used on the big panels only. */
.glass-lit::before{
  content:"";
  position:absolute;
  inset:0 12% auto;
  height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(var(--white-rgb),.95) 22%,
    rgba(var(--white-rgb),.95) 78%,
    transparent);
  pointer-events:none;
}

img,video,canvas{max-width:100%;height:auto;display:block}
img{border-style:none}

/* SVG gets max-width but NOT height:auto.
   An inline SVG with a viewBox and no intrinsic size takes its width from its
   container and then computes height from the aspect ratio, so `height:auto`
   turns a 22x22 legend glyph into whatever the column is wide. That is
   exactly what happened to the map's class key: three 180-pixel black stars
   down the side panel. Components that need to fill their box say so. */
svg{max-width:100%}

/* An intrinsic ratio only helps when the element declares one; without this a
   lazy image with width/height attributes still jumps when it decodes. */
img[width][height]{height:auto}

button,input,select,textarea{font:inherit;color:inherit}

hr{border:0;border-top:1px solid var(--line);margin:var(--gut) 0}

::selection{background:rgba(var(--amber-rgb),.28)}

/* ------------------------------------------------------------ typography */

h1,h2,h3,h4,h5,h6{
  font-family:var(--display);
  margin:0 0 .5em;
  letter-spacing:-.02em;
  line-height:1.04;
  text-wrap:balance;
}

h1{font-weight:800;font-size:clamp(40px,6.4vw,84px);line-height:.94;letter-spacing:-.03em}
h2{font-weight:700;font-size:clamp(28px,3.6vw,44px)}
h3{font-weight:600;font-size:clamp(19px,1.6vw,22px);letter-spacing:-.01em}
h4{font-weight:600;font-size:17px;letter-spacing:0}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

strong,b{font-weight:600;color:var(--ink)}
em{font-style:italic}

a{color:var(--cold);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover,a:focus-visible{text-decoration-thickness:2px}

code,kbd,pre,samp{font-family:var(--mono);font-size:.92em}

/* Mono is the micro-label face: eyebrows, buttons, HUD, footers, chips. Used
   at these sizes it is a signal that a string is data rather than prose. */
.eyebrow{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--mute);
  margin:0 0 20px;
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:22px;height:1px;
  background:var(--amber);
  flex:none;
}

.lead{
  font-size:clamp(18px,1.5vw,21px);
  line-height:1.5;
  color:var(--mute);
  max-width:56ch;
}

.mono{font-family:var(--mono);letter-spacing:.06em}

/* -------------------------------------------------------- focus visibility

   One ring, everywhere, in a colour that is legible on paper and on the
   panels. Never removed: the map is fully keyboard operable and the focus
   ring is the only thing that makes that usable. */
:focus-visible{
  outline:2px solid var(--cold);
  outline-offset:2px;
  border-radius:1px;
}
:focus:not(:focus-visible){outline:none}

.skip-link{
  position:absolute;left:8px;top:-60px;z-index:1000;
  background:var(--ink);color:var(--paper);
  padding:10px 16px;border-radius:var(--radius);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;
  transition:top .18s var(--ease-out);
}
.skip-link:focus{top:8px}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------------------------------------------------------------- layout */

.wrap{
  width:100%;
  max-width:var(--wide);
  margin-inline:auto;
  padding-inline:var(--gut);
}
.wrap-narrow{max-width:calc(var(--content) + var(--gut) * 2)}

.section{padding-block:clamp(56px,8vw,96px)}
.section-tight{padding-block:clamp(36px,5vw,56px)}

/* A band that separates by ground rather than by border. */
.band{background:var(--raise)}

/* A rule that fades out at both ends, so it divides without enclosing. */
.rule-top{position:relative}
.rule-top::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
}

.section-head{max-width:64ch;margin-bottom:clamp(28px,4vw,48px)}
.section-head h2{margin-bottom:.35em}

.grid{display:grid;gap:clamp(18px,2.2vw,28px)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.four{grid-template-columns:repeat(4,1fr)}

@media (max-width:1000px){
  .grid.four{grid-template-columns:repeat(2,1fr)}
  .grid.three{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .grid.two,.grid.three,.grid.four{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------- buttons */

.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.06em;
  padding:12px 22px;
  border-radius:var(--radius);
  text-decoration:none;
  border:1px solid transparent;
  transition:background .22s var(--ease-out),border-color .22s var(--ease-out),color .22s var(--ease-out);
  white-space:nowrap;
}
.btn.primary{background:var(--amber);color:#0A0704;border-color:var(--amber)}
.btn.primary:hover,.btn.primary:focus-visible{background:#F0A312;border-color:#F0A312}

.btn.ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--cold);color:var(--cold)}

.btn.quiet{padding-inline:0;border:0;color:var(--cold)}
.btn.quiet:hover,.btn.quiet:focus-visible{text-decoration:underline}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ------------------------------------------------------------------ chips */

.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chip{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  padding:6px 11px;
  border:1px solid var(--line);border-radius:var(--radius);
  color:var(--mute);text-decoration:none;background:var(--panel);
  transition:border-color .2s var(--ease-out),color .2s var(--ease-out);
}
.chip:hover,.chip:focus-visible{border-color:var(--cold);color:var(--cold)}
.chip .n{color:var(--faint);font-size:10px}

/* ISO country marker. Not a flag emoji: Windows ships no glyphs for regional
   indicator pairs, so those render there as two bare letters. */
.iso{
  display:inline-block;font-family:var(--mono);font-size:.72em;font-weight:500;
  letter-spacing:.1em;color:var(--mute);
  border:1px solid var(--line);border-radius:1px;
  padding:.15em .4em;margin-right:.3em;
  vertical-align:.1em;line-height:1;
}

/* ------------------------------------------------------------------ cards */

.card{
  position:relative;
  isolation:isolate;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;

  /*
     A card is glass, but a thinner pane than a panel.
     Cards appear in grids of eight and twelve, and eight full-strength
     backdrop-filters in one viewport is exactly the budget this design has
     to spend everywhere else. So a card gets the material and the sheen but
     not the blur: the gradient alone still lets the mosaic through, and the
     accent edge does the work the border used to.
  */
  background:linear-gradient(180deg,
    rgba(var(--white-rgb),.86),
    rgba(var(--white-rgb),.66));
  border:1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    0 4px 18px rgba(var(--ink-rgb),.05);

  transition:transform .3s var(--ease-out),
             box-shadow .3s var(--ease-out),
             border-color .3s var(--ease-out);
}

/* The accent arrives as a lit top edge rather than as a coloured border, so
   a hovered card reads as catching light rather than as being selected. */
.card::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,
    transparent, var(--amber) 30%, var(--amber) 70%, transparent);
  opacity:0;
  transition:opacity .3s var(--ease-out);
  pointer-events:none;
  z-index:1;
}
.card:hover,.card:focus-within{
  transform:translateY(-3px);
  border-color:rgba(var(--white-rgb),.95);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    0 12px 30px rgba(var(--ink-rgb),.09);
}
.card:hover::before,.card:focus-within::before{opacity:1}

.card-art{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--raise)}
.card-art-none{
  display:grid;place-items:center;
  background:var(--raise);
}
.card-art-none i{
  font-family:var(--display);font-style:normal;font-weight:800;
  font-size:44px;color:var(--line);letter-spacing:-.04em;
}
/* The art is wrapped in its own link so the whole tile is clickable. It is
   aria-hidden and out of the tab order — the title link is the real one — so
   it must carry no text decoration of its own, or the placeholder letter
   underneath picks up an underline. */
.card-link{display:block;text-decoration:none;color:inherit}

.card-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}

.card-title{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.25;margin:0}
/* Ink, not link blue. In a grid of cards the title is the heading; painting
   every one of them blue and underlined turns the page into a list of links
   and drowns out the one accent the design does use. */
.card-title a{
  color:var(--ink);
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .28s var(--ease-out),color .2s var(--ease-out);
}
.card-title a:hover,.card-title a:focus-visible{color:var(--cold);background-size:100% 1px}

.card-excerpt{font-size:14px;color:var(--mute);margin:0}

.post-meta{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--faint);margin:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5em;
}
.post-meta a{color:var(--mute);text-decoration:none}
.post-meta a:hover{color:var(--cold)}
.post-meta .sep{color:var(--line)}

/* ----------------------------------------------------------------- header */

/*
   The header is the one place glass is always on.

   It is a single element, it is always in view, and it is the surface that
   tells the visitor what kind of page this is before they have read a word.
   It also earns its compositing layer honestly: being position:sticky, it is
   promoted to its own layer regardless.

   Over the hero it is almost invisible — no border, barely any tint — and it
   solidifies as the page moves, so it never draws a line across a hero it is
   still sitting on top of.
*/
.site-header{
  position:sticky;top:0;z-index:50;
  /* No isolation — see the note on .glass. A sticky element carrying a
     backdrop-filter is already the hardest case for the compositor; making
     it its own backdrop root on top of that is what produced a blurred band
     far taller than the header. */
  background:linear-gradient(180deg,
    rgba(var(--white-rgb),.58),
    rgba(var(--white-rgb),.34));
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease-out),
             border-color .3s var(--ease-out),
             box-shadow .3s var(--ease-out);
}

.site-header.is-stuck{
  background:linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  border-bottom-color:var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-sheen),
    0 6px 22px rgba(var(--ink-rgb),.06);
}

/* Both fallbacks land on opaque white rather than on the old grey paper. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header,.site-header.is-stuck{background:var(--paper)}
}
@media (max-width:900px){
  .site-header,.site-header.is-stuck{
    background:rgba(var(--white-rgb),.97);
  }
}

.header-inner{
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  /* --header-min, never --header-h. The second is measured FROM this element's
     own header, so reading it here is a circular definition. */
  min-height:var(--header-min);
  padding-block:10px;
}

.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.brand-mark{display:block;line-height:0}
.brand-mark svg{height:34px;width:auto;fill:currentColor;display:block}
.brand-word{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em}
.brand img{max-height:40px;width:auto}
.brand i{
  font-style:normal;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);
  padding-left:10px;border-left:1px solid var(--line);
  white-space:nowrap;
}
@media (max-width:900px){ .brand i{display:none} }

.nav-primary{margin-left:auto;display:flex;align-items:center}
.nav-primary a{
  font-size:14px;color:var(--ink);text-decoration:none;
  padding-block:6px;
  border-bottom:1px solid transparent;
  transition:border-color .2s var(--ease-out),color .2s var(--ease-out);
}

/*
   A menu item is one line or it is not a menu item.

   German is the case that proved it: "Unsere Reparaturen", "Andere
   Standorte" and "Über uns" all broke across two lines, and a header of
   stacked half-words reads as a layout that has come apart rather than as a
   menu. Shorter translations fixed most of it; this makes the rule explicit
   so the next long language does not reintroduce it.

   Only the top level. Inside the panels, wrapping is correct — those items
   are full service names in a column with room for them.
*/
.nav-primary > .nav-list > li > a,
.nav-primary > .nav-list > li > .sub-toggle + a,
.nav-primary > .nav-list > li > span{white-space:nowrap}
.nav-primary a:hover,.nav-primary a:focus-visible{border-bottom-color:var(--amber)}
.nav-primary .current-menu-item > a{color:var(--cold);border-bottom-color:var(--cold)}

.header-cta{flex:none}


/* ------------------------------------------------------- dropdown menus --

   Two of them: the services tree, two levels deep, and the network grouped
   by country.

   The panels open on :hover AND on :focus-within, and that pairing is the
   whole accessibility story on a desktop. focus-within means the entire menu
   is reachable by keyboard from a static document — no JavaScript, no
   roving tabindex, no script to go wrong. evc-nav.js adds only what CSS
   cannot express: Escape, click-outside, and the accordion below 900px.

   The panels are not in the flow (position:absolute) so opening one never
   moves the page. They are also not `display:none` until opened but
   visibility:hidden with opacity — display:none cannot transition, and a
   panel that snaps is the difference between a menu that feels built and one
   that feels bolted on. */

.nav-list{display:flex;align-items:center;gap:clamp(14px,2vw,26px);list-style:none;margin:0;padding:0}
.nav-primary > .nav-list + .nav-list{margin-left:clamp(14px,2vw,26px)}

.has-sub{position:relative;display:flex;align-items:center;gap:2px}

.sub-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;
  padding:0;margin:0;
  background:transparent;border:0;border-radius:3px;
  color:var(--mute);cursor:pointer;
  transition:color .2s var(--ease-out),transform .2s var(--ease-out);
}
.sub-toggle:hover,.sub-toggle:focus-visible{color:var(--cold)}
.has-sub:hover > .sub-toggle,
.has-sub:focus-within > .sub-toggle,
.sub-toggle[aria-expanded="true"]{transform:rotate(180deg)}

.sub{
  position:absolute;
  top:100%;left:-14px;
  z-index:60;
  min-width:248px;
  margin:0;padding:8px;
  list-style:none;
  border-radius:var(--radius);
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:0 14px 40px rgba(var(--ink-rgb),.10);

  /* Closed. visibility rather than display, so it can transition, and so a
     screen reader does not announce a hidden menu as available. */
  visibility:hidden;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .16s var(--ease-out),transform .16s var(--ease-out),visibility 0s .16s;
}

.has-sub:hover > .sub,
.has-sub:focus-within > .sub,
.sub-toggle[aria-expanded="true"] + .sub,
.sub.is-open{
  visibility:visible;
  opacity:1;
  transform:none;
  transition-delay:0s;
}

/* A gap between the trigger and the panel is a trap: the pointer crosses it,
   :hover ends, the panel closes. The panel's own top padding bridges it. */
.sub::before{content:"";position:absolute;inset:-10px 0 auto;height:10px}

.sub li{display:flex;align-items:center;gap:2px;position:relative}
.sub a,
.sub .sub-label{
  flex:1 1 auto;
  display:block;
  padding:9px 12px;
  border-radius:3px;
  font-size:14px;line-height:1.35;
  color:var(--ink);text-decoration:none;
}
.sub .sub-label{color:var(--mute)}
.sub a:hover,
.sub a:focus-visible{background:var(--sink);color:var(--cold)}

/* The second level flies out sideways, which is what the screenshot from
   Paris does and what a two-level tree needs: stacking it underneath would
   push the first level's remaining items out of reach. */
.sub-2{top:-8px;left:100%;margin-left:4px}
.sub .sub-toggle{transform:rotate(-90deg)}
.sub .has-sub:hover > .sub-toggle,
.sub .has-sub:focus-within > .sub-toggle,
.sub .sub-toggle[aria-expanded="true"]{transform:rotate(-90deg)}
.sub-2::before{inset:0 auto 0 -8px;width:8px;height:auto}

/* Near the right edge there is no room to fly out to the right. */
.has-sub.flip-left > .sub{left:auto;right:-14px}
.sub .has-sub.flip-left > .sub-2{left:auto;right:100%;margin:0 4px 0 0}

/* ------------------------------------------------------ the network panel -- */

.sub-network{min-width:280px;max-height:min(70vh,520px);overflow-y:auto}
.net-group{display:block;padding:2px 0}
.net-country{
  display:block;
  padding:8px 12px 3px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);
}
.net-group ul{list-style:none;margin:0;padding:0}
.net-all{border-top:1px solid var(--line-soft);margin-top:6px;padding-top:6px}
.net-all a{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--cold)}

/* --------------------------------------------------- small screens: accordion -- */

@media (max-width:900px){
  /*
     No flyouts on a phone. The nav panel is already a full-width sheet, so
     the sub-menus become what they should be at this size: nested lists that
     push the ones below them down.

     :hover is dropped deliberately. On a touch screen the first tap on a link
     registers as a hover, opens the panel, and the second tap follows the
     link — which reads as a menu that needs two taps and sometimes navigates
     when you did not mean it to. Here only the button opens anything.
  */
  .nav-list{display:block}
  .nav-primary > .nav-list + .nav-list{margin-left:0}

  .has-sub{display:flex;flex-wrap:wrap;align-items:center}
  .has-sub > a{flex:1 1 auto}

  .sub-toggle{
    width:44px;height:44px;                /* the same thumb target as the header */
    margin-left:auto;
    color:var(--ink);
  }

  .sub,.sub-2{
    position:static;
    flex:1 1 100%;
    min-width:0;
    margin:0 0 6px;
    padding:0 0 0 14px;
    border:0;border-left:1px solid var(--line-soft);
    border-radius:0;
    background:transparent;
    box-shadow:none;
    transform:none;
    /* Closed until the button says otherwise. display:none here because
       nothing is transitioning at this size and a collapsed panel must take
       no room at all. */
    display:none;
    visibility:visible;
    opacity:1;
  }
  .sub::before,.sub-2::before{content:none}

  /* Hover no longer opens anything; the button does. */
  .has-sub:hover > .sub,
  .has-sub:focus-within > .sub{display:none}
  .sub-toggle[aria-expanded="true"] + .sub,
  .sub.is-open{display:block}

  .sub .sub-toggle,
  .sub .has-sub:hover > .sub-toggle,
  .sub .has-sub:focus-within > .sub-toggle{transform:none}
  .sub .sub-toggle[aria-expanded="true"]{transform:rotate(180deg)}

  .sub-network{max-height:none;overflow:visible}
}

/* Someone who asked for less movement gets the panels, without the slide. */
@media (prefers-reduced-motion:reduce){
  .sub,.sub-toggle{transition:none}
}

.nav-toggle{
  display:none;
  margin-left:auto;
  background:transparent;border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 12px;cursor:pointer;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);
}

/*
   The navigation collapses at 1000px, not at 900.

   Everything else in this file that changes at 900 was measured there —
   glass goes flat, the front sections go to paper, the canvas is capped. The
   menu is a different question: it collapses when its words stop fitting,
   and its words depend on the language. German needs about 970px for five
   items plus the two buttons, so at 900 there was a 70px band where the
   header overflowed its own box.

   1000 with the shortened labels leaves room for the next long language
   instead of fitting exactly the one that complained.
*/
@media (max-width:1000px){
  .nav-toggle{display:inline-block}
  .nav-primary{
    position:fixed;inset:var(--header-h) 0 auto;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    margin:0;
    padding:8px var(--gut) 24px;
    display:none;
  }
  .nav-primary.is-open{display:block}

  /*
     Scoped to the top level, not to every ul and li inside the panel.
     It used to be `.nav-primary ul` and `.nav-primary li`, which was correct
     while the menu was flat — and became wrong the moment it had submenus,
     because it put a full-width divider and 14px of padding on every nested
     item too, turning a two-level tree into forty identical rows.
  */
  .nav-primary > .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-primary > .nav-list > li{border-bottom:1px solid var(--line-soft)}
  .nav-primary > .nav-list > li > a{display:block;padding:14px 0;font-size:16px;border:0}

  /* Nested rows: smaller, no dividers, and the indent does the grouping. */
  .nav-primary .sub a,
  .nav-primary .sub .sub-label{padding:11px 0;font-size:15px}
  .nav-primary .sub-2 a{font-size:14px;color:var(--mute)}

  .header-cta{display:none}
}


/* ------------------------------------------------------- call and route --

   Two controls that share one rule: they are never decoration. If there is no
   number, inc/contact.php prints no button — so nothing here ever has to
   style a disabled state, and nobody taps a dead call link while standing
   next to a car that will not start.
*/

.ico{flex:none;display:block}

.header-call,
.header-nav-btn{
  display:inline-flex;align-items:center;gap:8px;
  flex:none;
  margin-left:12px;
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  color:var(--ink);text-decoration:none;
  white-space:nowrap;
  transition:border-color .22s var(--ease-out),color .22s var(--ease-out);
}
.header-call:hover,
.header-call:focus-visible,
.header-nav-btn:hover,
.header-nav-btn:focus-visible{border-color:var(--cold);color:var(--cold)}
.header-call .ico,
.header-nav-btn .ico{color:var(--cold)}

/*
   The number is not printed at any width.

   It used to show on a desktop, where it looked like free information. It was
   not: a full international number is about 140px, and with a services
   dropdown and a network dropdown now in the menu that was the width that
   pushed the whole navigation onto a second line. A wrapped menu costs more
   than a visible number.

   The number stays in aria-label, so a screen reader announces it in full,
   and in title, so a pointer gets it on hover. Nothing is lost except the
   space.
*/
.header-call .call-num{display:none}
.header-call{width:38px;height:38px;padding:9px;justify-content:center}

/* The route button carries no text at any width — see the note in
   evc_navigate_link(). So it is square rather than a pill, and it sits tight
   against the call button it belongs with, reading as one pair of controls
   rather than as two unrelated buttons. */
.header-nav-btn{
  margin-left:6px;
  padding:9px;
  width:38px;height:38px;
  justify-content:center;
}

/*
   Same 1000px as the menu collapse above, and it has to be.

   This block hides the Book button and puts the call button before MENU.
   Left at 900 while the menu collapsed at 1000, the band between them had a
   header carrying the hamburger AND the Book button AND the call AND the
   route — everything at once, in the wrong order, on the narrowest desktop
   there is.
*/
@media (max-width:1000px){
  /*
     On a phone this is the whole header.

     .header-cta is hidden at this width, so the call button is the only
     action left — which is the right one to keep. It sits before MENU
     because a thumb travelling up the right edge reaches the last item
     first, and the last thing anyone wants under that thumb is a menu they
     did not mean to open.

     The number itself goes: a full international number will not share a
     line with a logo and a menu button on any phone made. It stays in the
     aria-label, so a screen reader still announces "Call +43 7472 123456"
     rather than "link, phone".
  */
  .header-call{order:2;margin-left:auto;margin-right:0}
  .header-nav-btn{order:3;margin-left:6px;margin-right:8px}
  .nav-toggle{order:4;margin-left:0}

  /* 44px, because these are the two controls on the page that get used at
     arm's length, in a car park, one-handed. Call first, then the route, then
     the menu: the two that matter are the two nearest the thumb. */
  .header-call,
  .header-nav-btn{
    min-width:44px;min-height:44px;
    width:44px;height:44px;
    justify-content:center;
    padding:10px;
  }

  /* Three controls and a logo on a 390px line. The header's own gap is up to
     40px, which is right when there is a menu between them and wrong here. */
  .header-inner{gap:10px}
}

/* ------------------------------------------------------- footer address -- */

.foot-where{margin-top:22px}
.foot-where h2{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin:0 0 10px;font-weight:500;
}
.foot-address{
  font-style:normal;
  font-size:14px;line-height:1.6;
  color:var(--ink);
  margin:0 0 14px;
  max-width:32ch;
}
/* The branch name sits above the street, and has to read as the heading of
   the two rather than as the first line of the address. */
.foot-org{
  font-weight:600;
  letter-spacing:-.005em;
}
.foot-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}

/* Smaller than a page button: the footer is where someone looks the address
   up, not where the page asks them to do something. */
.foot-actions .btn-nav{padding:9px 16px;font-size:12px}
.foot-call{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;
}

@media (max-width:560px){
  /* One column at this width, so the two actions get a full-width row each
     rather than wrapping into a ragged pair. */
  .foot-actions{gap:12px}
  .foot-actions .btn-nav{flex:1 1 100%;justify-content:center}
}

/* ----------------------------------------------------------------- footer */

.site-footer{
  margin-top:clamp(56px,8vw,110px);
  border-top:1px solid var(--line);
  background:var(--raise);
  padding-block:clamp(40px,6vw,72px) 0;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:clamp(24px,3vw,44px);
  align-items:start;
}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr} }

.foot-brand .brand-mark svg{height:40px}
.foot-about{font-size:14px;color:var(--mute);max-width:36ch;margin-top:14px}

.foot-col h2,.foot-widget-title{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin:0 0 14px;font-weight:500;
}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot-col a{font-size:14px;color:var(--ink);text-decoration:none}
.foot-col a:hover,.foot-col a:focus-visible{color:var(--cold);text-decoration:underline}

/* ---------------------------------------------------- visitor notice --

   Off on most sites. Shown once per visitor, per notice, a moment after the
   page has settled. See assets/js/evc-notice.js. */

.notice-veil{
  position:fixed;inset:0;z-index:120;
  display:grid;place-items:center;
  padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));
  background:rgba(14,22,32,.58);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:notice-in .24s var(--ease-out) both;
}

/* The page behind it should not scroll under the dialog. */
.notice-open,.notice-open body{overflow:hidden}

.notice-card{
  position:relative;
  width:min(520px,100%);max-height:86vh;overflow-y:auto;
  background:var(--paper);
  border:1px solid var(--line);border-radius:4px;
  padding:clamp(22px,4vw,34px);
  box-shadow:0 18px 60px rgba(14,22,32,.28);
  animation:notice-rise .28s var(--ease-out) both;
}

.notice-card h2{
  margin:0 0 14px;padding-right:28px;
  font-size:clamp(19px,2.6vw,25px);line-height:1.2;
}
.notice-card p{margin:0 0 12px;font-size:15px;line-height:1.55;color:var(--ink)}
.notice-card p:last-child{margin-bottom:0}

/* Comfortably past the 44px touch target, and clear of the heading. */
.notice-close{
  position:absolute;top:8px;right:8px;
  width:44px;height:44px;
  display:grid;place-items:center;
  background:none;border:0;border-radius:50%;
  font-size:26px;line-height:1;color:var(--mute);
  cursor:pointer;
}
.notice-close:hover,.notice-close:focus-visible{background:var(--sink);color:var(--ink)}

@keyframes notice-in{from{opacity:0}to{opacity:1}}
@keyframes notice-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* A dialog that slides is a dialog that moves the room. This one is not
   decorative enough to be worth it. */
@media (prefers-reduced-motion:reduce){
  .notice-veil,.notice-card{animation:none}
}

@media (prefers-reduced-transparency:reduce){
  .notice-veil{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(14,22,32,.72)}
}

/* ------------------------------------------------------- headquarters --

   The last band before the legal line, and the only one on a franchise
   footer that is not about this workshop. It carries the amber CTA because
   it is an ask, and it sits on a tinted panel because a visitor scanning for
   a phone number needs to be able to skip it in one glance. */

.foot-hq{
  margin-top:clamp(32px,5vw,56px);
  border-top:1px solid var(--line);
  padding-top:clamp(24px,4vw,36px);
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(18px,3vw,44px);align-items:start;
}
.foot-hq .eyebrow{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin:0 0 10px;
}
.foot-hq h2{margin:0 0 10px;font-size:clamp(19px,2.2vw,25px);line-height:1.22}
.foot-hq p{font-size:14px;color:var(--mute);margin:0;max-width:62ch}

.foot-hq-do{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.foot-hq-do .btn{white-space:nowrap}

/* The address in full under the button. A mailto whose text is the word
   "write" gives somebody on a work machine with no mail client nothing to
   copy. */
.foot-hq-mail{
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;
  color:var(--ink);text-decoration:none;word-break:break-all;
}
.foot-hq-mail:hover,.foot-hq-mail:focus-visible{color:var(--cold);text-decoration:underline}
.foot-hq-site{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  color:var(--mute);text-decoration:none;
}
.foot-hq-site:hover,.foot-hq-site:focus-visible{color:var(--cold)}

/* Below the width where two columns leave the paragraph a usable measure. */
@media (max-width:760px){
  .foot-hq{grid-template-columns:1fr}
}

/* Where a link leaves this site. Quiet on purpose: it is a fact about the
   link, not a warning about it. */
.foot-src{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--faint);margin-left:6px;white-space:nowrap;
}

.foot-legal{
  margin-top:clamp(32px,5vw,56px);
  border-top:1px solid var(--line);
  padding-block:20px 26px;
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--faint);
}
.foot-legal ul{display:flex;flex-wrap:wrap;gap:12px 20px;list-style:none;margin:0;padding:0}
.foot-legal a{color:var(--mute);text-decoration:none}
.foot-legal a:hover{color:var(--cold)}
.foot-legal .spacer{margin-left:auto}

/* ------------------------------------------------------------ reveal-on-scroll

   Declared here rather than in front.css because archives use it too. The
   default is the revealed state, and JS adds .reveal to opt an element in —
   so a browser with JS disabled or a crawler sees finished content instead of
   a page of invisible elements. */
.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* ------------------------------------------------------------------ print */

@media print{
  .site-header,.site-footer,.nav-toggle,#stage,#backdrop,.hud,.marquee{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}