/* ============================================================================
   Vimal design system
   See docs/superpowers/specs/2026-09-19-design-system.md

   One system, two densities. Industrial is Direction A (technical), domestic is
   Direction B (editorial). Sections 1-8 are SHARED and identical on both sides.
   Only sections 9 and 10 differ, and only in type scale and grid density.

   No Bootstrap. No jQuery. Colour is declared once in section 1 and nowhere else;
   a hex literal outside that block is a bug.
   ========================================================================= */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  --red:#df130c;            /* CTA, active states. 4.97:1 on white text */
  --red-lite:#f43c35;       /* the logo's own red. LARGE text and decoration only */
  --red-text:var(--red-lite);  /* red that is legible at small sizes in this mode */
  --on-red:#ffffff;         /* text on a --red fill. The only white in the file. */

  --bg:#0d0c0c;
  --surface:#141313;
  --surface-2:#1c1a1a;

  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);

  --fg:#f2efee;
  --fg-dim:rgba(242,239,238,.72);
  --fg-faint:rgba(242,239,238,.45);   /* DECORATIVE ONLY. never carries information */

  /* Brand logos are drawn for light grounds: Legrand's black mark and RR Kabel's black
     lettering vanish on this mode's near-black. Each logo sits on this tile instead. */
  --logo-tile:#f2efee;
  --logo-ink:#141111;
  /* Behind the play mark on an Instagram reel, which sits on a photo of any colour. */
  --photo-shade:rgba(0,0,0,.6);

  --r:2px;
  --tap:44px;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --sans:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

html[data-mode="light"]{
  --bg:#ffffff;
  --logo-tile:var(--bg);
  --logo-ink:var(--fg);
  --surface:#faf9f8;
  --surface-2:#f3f1ef;

  --line:rgba(20,17,17,.12);
  --line-2:rgba(20,17,17,.22);

  --fg:#141111;
  --fg-dim:rgba(20,17,17,.74);
  --fg-faint:rgba(20,17,17,.48);
  /* #f43c35 is only 3.79:1 on white, so small red text uses a darker red here. Not
     --red itself: #df130c is 4.40:1 on --surface-2, which the chooser's home panel
     eyebrow sits on, and that is under AA at 11px. One step darker clears every
     surface in this mode: 5.89:1 on --bg, 5.23:1 on --surface-2. Same hue. */
  --red-text:#c9110b;
}

/* --- 2. Reset and base --------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-weight:300;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
/* text-wrap is a progressive enhancement: balance stops a heading breaking to a
   single orphaned word ("...off the / shelf."), pretty does the same for the last
   line of a paragraph. Browsers without it render exactly as before. */
h1,h2,h3,h4{font-weight:200;line-height:1.1;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
figure{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}

/* 16px minimum stops iOS zooming on focus, which otherwise breaks the layout
   mid-form. Applies to every control, not just the ones we remember. */
input,select,textarea,button{font:inherit;font-size:16px;color:inherit}

:focus-visible{outline:2px solid var(--red-lite);outline-offset:2px}

.vm-skip{position:absolute;left:-9999px}
.vm-skip:focus{left:var(--s4);top:var(--s4);z-index:100;background:var(--red);
  color:var(--on-red);padding:var(--s3) var(--s4);border-radius:var(--r)}

/* Visually hidden, still read out. For the one page whose title is its layout. */
.vm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* --- 3. Layout ----------------------------------------------------------- */
.vm-wrap{max-width:1140px;margin-inline:auto;padding-inline:var(--s4)}
@media (min-width:768px){ .vm-wrap{padding-inline:var(--s5)} }

/* Every block of a page, the hero included, is a .vm-sec wrapping a .vm-wrap: one
   rhythm, and the hairline between blocks runs edge to edge on every page. The
   sections used to sit INSIDE the wrap on the inner pages, so their rules stopped
   at the content edge while the landing pages' ran full-bleed. */
.vm-sec{padding-block:var(--s8)}
.vm-sec + .vm-sec{border-top:1px solid var(--line)}
@media (min-width:768px){ .vm-sec{padding-block:var(--s9)} }
.vm-lede + .vm-lede{margin-top:var(--s4)}

.vm-mono{font-family:var(--mono);font-weight:400}
.vm-dim{color:var(--fg-dim)}

/* --- 4. Section headings ------------------------------------------------- */
/* 500, not 600: the spec's heaviest weight is 500 and there is no bold anywhere. */
.vm-eyebrow{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red-text);margin-bottom:var(--s3);
}
.vm-eyebrow::before{content:"";width:18px;height:1px;background:var(--red);flex:none}

.vm-h2{font-size:clamp(24px,3.4vw,34px);margin-bottom:var(--s3)}
.vm-lede{color:var(--fg-dim);max-width:62ch}

/* --- 5. Buttons ---------------------------------------------------------- */
.vm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tap);padding:0 var(--s5);
  background:var(--red);color:var(--on-red);
  font-size:14px;font-weight:500;text-decoration:none;
  border:1px solid var(--red);border-radius:var(--r);cursor:pointer;
  transition:filter .2s ease;
}
.vm-btn:hover{filter:brightness(1.1)}
.vm-btn--ghost{background:none;color:var(--fg);border-color:var(--line-2)}
.vm-btn--ghost:hover{border-color:var(--fg-dim);filter:none}
.vm-btn--pill{border-radius:999px;padding-inline:var(--s6)}
.vm-btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5)}
/* On a narrow phone the buttons share each row they land on, so a pair that fits
   splits the width and one that wraps goes full width, instead of a ragged stack
   of two different lengths. */
@media (max-width:479px){ .vm-btn-row > .vm-btn{flex:1 1 auto} }

/* --- 6. Segment switcher ------------------------------------------------- */
/* Markup contract is fixed by site/tests/test-switcher.php. Style only. */
.vm-switch{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.vm-switch__pill{
  display:inline-flex;border:1px solid var(--line-2);
  border-radius:999px;overflow:hidden;background:var(--bg);
}
.vm-switch__opt{
  min-height:var(--tap);display:inline-flex;align-items:center;padding:0 var(--s4);
  font-size:12px;font-weight:500;letter-spacing:.04em;
  color:var(--fg-dim);text-decoration:none;
}
.vm-switch__opt:hover{color:var(--fg)}
.vm-switch__opt.is-active{background:var(--red);color:var(--on-red)}
.vm-switch__change{
  display:inline-flex;align-items:center;min-height:var(--tap);
  font-size:12px;color:var(--fg-dim);text-decoration:none;
}
.vm-switch__change span{border-bottom:1px solid var(--line-2);padding-bottom:1px}
.vm-switch__change:hover{color:var(--fg)}

/* --- 7. Header ----------------------------------------------------------- */
.vm-hd{position:relative;border-bottom:1px solid var(--line);background:var(--bg)}
.vm-hd__bar{display:flex;align-items:center;gap:var(--s4);padding-block:var(--s3)}
.vm-hd__logo{flex:none;display:flex;align-items:center;gap:var(--s3);
  min-height:var(--tap);text-decoration:none}
.vm-hd__logo img{height:38px;width:auto}
.vm-hd__name{font-size:13.5px;font-weight:500;line-height:1.2;letter-spacing:-.01em}
/* --fg-dim, not --fg-faint: the branch is information, and faint is decorative only. */
.vm-hd__name small{display:block;font-size:10px;font-weight:400;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-dim);margin-top:2px}
@media (max-width:479px){ .vm-hd__name{font-size:12px} .vm-hd__name small{display:none} }
/* Named for the background they sit ON, not the mode they appear in. The
   on-dark artwork has a pale fan; the on-light one has a charcoal fan. Driven by
   the attribute rather than `display: var(--x)`, which rendered both in testing. */
html[data-mode="dark"]  .vm-logo--on-light{display:none}
html[data-mode="light"] .vm-logo--on-dark{display:none}

.vm-hd__spacer{flex:1}

.vm-hd__nav{display:flex;gap:var(--s5);font-size:14px}
.vm-hd__nav a{color:var(--fg-dim);text-decoration:none}
.vm-hd__nav a:hover{color:var(--fg)}
.vm-hd__nav a[aria-current]{color:var(--fg)}

/* Mode toggle: a link, because the mode is server state. No script. */
.vm-mode{
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:var(--tap);padding:0 var(--s3);
  border:1px solid var(--line-2);border-radius:999px;
  font-size:12px;font-weight:500;color:var(--fg-dim);text-decoration:none;
}
.vm-mode:hover{color:var(--fg)}
.vm-mode__dot{width:9px;height:9px;border-radius:50%;background:var(--fg-dim);flex:none}
html[data-mode="light"] .vm-mode__dot{background:var(--red)}
/* Below 480px the labelled toggle no longer fits in the strip beside the switcher
   and wrapped onto a second row, putting ~220px of chrome above the h1. The same
   link is rendered a second time in the masthead as a 44px round glyph (a half-
   filled circle, the usual contrast symbol), and only one of the two is displayed
   at any width. */
.vm-mode--glyph{display:none;width:var(--tap);height:var(--tap);padding:0;
  justify-content:center;border-radius:50%}
.vm-mode__glyph{width:16px;height:16px;border-radius:50%;border:1px solid currentColor;
  background:linear-gradient(90deg,currentColor 50%,transparent 50%)}
@media (max-width:479px){
  .vm-hd__strip .vm-mode{display:none}
  .vm-mode--glyph{display:inline-flex}
}

/* Mobile nav uses <details>, so it works with scripting off. */
.vm-hd__menu{display:none}
.vm-hd__menu > summary{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);
  border:1px solid var(--line-2);border-radius:var(--r);
}
.vm-hd__menu > summary::-webkit-details-marker{display:none}
.vm-hd__menu > summary span,
.vm-hd__menu > summary span::before,
.vm-hd__menu > summary span::after{
  display:block;width:18px;height:1px;background:var(--fg);position:relative
}
.vm-hd__menu > summary span::before{content:"";position:absolute;top:-6px}
.vm-hd__menu > summary span::after{content:"";position:absolute;top:6px}
/* Anchored to the header rather than sitting in the flex row, so opening it does
   not reflow the masthead. No shadow: the spec has none anywhere, and the hairline
   below is the edge. */
.vm-hd__drawer{
  position:absolute;left:0;right:0;top:100%;z-index:40;
  background:var(--bg);border-bottom:1px solid var(--line);
  padding:var(--s2) var(--s4) var(--s5);
}
.vm-hd__drawer a{
  display:flex;align-items:center;min-height:var(--tap);font-size:16px;
  color:var(--fg-dim);text-decoration:none;border-bottom:1px solid var(--line)
}
.vm-hd__drawer a:last-child{border-bottom:0}

@media (max-width:899px){
  .vm-hd__nav{display:none}
  .vm-hd__menu{display:block}
  .vm-hd__logo img{height:32px}
}

/* The switcher sits in its own strip ABOVE the masthead, at every width. It must
   never live inside the collapsed menu: a visitor in the wrong tree who has to
   find and open a hamburger to get out is most of the way to leaving. */
.vm-hd__strip{border-bottom:1px solid var(--line);background:var(--surface)}
.vm-hd__strip .vm-wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);padding-block:var(--s2);flex-wrap:wrap
}

/* --- 8. Footer ----------------------------------------------------------- */
.vm-ft{border-top:1px solid var(--line);background:var(--surface);
  padding-block:var(--s7);font-size:14px}
.vm-ft__grid{display:grid;gap:var(--s6)}
@media (min-width:768px){ .vm-ft__grid{grid-template-columns:1fr 1fr auto} }
/* h2, not h3: the columns are siblings of the page's sections, not children of
   the last one, and on a page with no h2 (the 404) an h3 here skipped a level. */
.vm-ft h2{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-dim);margin-bottom:var(--s3);line-height:1.65}
.vm-ft address{font-style:normal;color:var(--fg-dim);margin-bottom:var(--s2)}
.vm-ft a{color:var(--fg-dim);text-decoration:none}
.vm-ft a:hover{color:var(--fg);text-decoration:underline}
.vm-ft__base{border-top:1px solid var(--line);margin-top:var(--s6);padding-top:var(--s4);
  display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center;color:var(--fg-dim);font-size:13px}
.vm-ft__spacer{flex:1}

/* A phone number or address you can tap has to look tappable before you hover.
   Contact details in the footer, the branch cards and the chooser's foot carry a
   quiet hairline underline that fills in on hover. Buttons are excluded by scope. */
.vm-ft a[href^="tel:"],.vm-ft a[href^="mailto:"],
.vm-branch a[href^="tel:"],.vm-branch a[href^="mailto:"],
.vm-chooser-foot a{
  color:var(--fg);text-decoration:underline;text-decoration-color:var(--line-2);
  text-underline-offset:3px;text-decoration-thickness:1px;
}
.vm-ft a[href^="tel:"]:hover,.vm-ft a[href^="mailto:"]:hover,
.vm-branch a[href^="tel:"]:hover,.vm-branch a[href^="mailto:"]:hover,
.vm-chooser-foot a:hover{text-decoration-color:currentColor}

/* ============================================================================
   9. DIRECTION A - industrial. Technical: hairline rules, micro-labels,
   monospace specs, two columns, compact.
   ========================================================================= */
/* No padding of its own: the hero sits in a .vm-sec like every other block, so the
   gap and hairline between it and the next section match the rest of the page. */
.A-hero{display:grid;gap:var(--s6)}
@media (min-width:900px){
  .A-hero{grid-template-columns:1.3fr .7fr;gap:0}
  .A-hero__main{padding-right:var(--s7)}
  .A-hero__side{padding-left:var(--s7);border-left:1px solid var(--line)}
}
.A-hero h1{font-size:clamp(30px,4.6vw,50px);margin-bottom:var(--s4)}
.A-hero h1 em{font-style:normal;color:var(--red-lite)}
.A-hero .vm-lede{max-width:46ch;margin-bottom:var(--s5)}

/* Spec grid: two columns of label + value, divided by hairlines. */
.A-spec{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);
  margin-top:var(--s6)}
.A-spec > div{padding-block:var(--s3);border-bottom:1px solid var(--line)}
.A-spec > div:nth-child(odd){padding-right:var(--s4)}
.A-spec > div:nth-child(even){padding-left:var(--s4);border-left:1px solid var(--line)}
.A-spec dt{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-dim);margin-bottom:var(--s1)}
.A-spec dd{font-size:15px;font-weight:400}

/* Brand rail: a plain list of links divided by hairlines. */
.A-rail a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:var(--tap);padding-block:var(--s2);
  border-bottom:1px solid var(--line);
  text-decoration:none;font-size:14px;
}
.A-rail a:first-child{border-top:1px solid var(--line)}
@media (min-width:900px){ .A-rail a:first-child{border-top:0} }
.A-rail a span:last-child{color:var(--red-text)}
.A-rail a:hover{color:var(--red-text)}

/* Stock rows: an indicator dot, the item, and its availability. */
.A-rows{border:1px solid var(--line);margin-top:var(--s5)}
.A-rows a,.A-rows li{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s4);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);
  text-decoration:none;font-size:14px;
}
.A-rows > :last-child{border-bottom:0}
.A-dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
.A-rows small{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--fg-dim)}

/* Cards: hairline grid, no shadows, no rounded corners beyond the 2px token. */
.A-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:var(--s6)}
@media (min-width:700px){ .A-grid{grid-template-columns:repeat(3,1fr)} }
.A-grid article{background:var(--bg);padding:var(--s5)}
.A-grid h3{font-size:16px;font-weight:400;margin-bottom:var(--s2)}
.A-grid p{font-size:13.5px;color:var(--fg-dim)}
.A-grid .n{font-family:var(--mono);font-size:11px;color:var(--red-text);
  margin-bottom:var(--s3);display:block}

/* FAQ: <details>, so it opens with scripting off. */
.A-faq{border-top:1px solid var(--line);margin-top:var(--s6)}
.A-faq details{border-bottom:1px solid var(--line)}
.A-faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  min-height:var(--tap);padding-block:var(--s3);font-size:15px;font-weight:400;
}
.A-faq summary::-webkit-details-marker{display:none}
.A-faq summary::after{content:"+";font-family:var(--mono);color:var(--red-text);flex:none}
.A-faq details[open] summary::after{content:"\2212"}
.A-faq .a{padding-bottom:var(--s5);color:var(--fg-dim);font-size:14px;max-width:70ch}

/* Testimonials: the customers' own words, set quietly. */
.A-quotes{display:grid;gap:var(--s5);margin-top:var(--s6)}
@media (min-width:768px){ .A-quotes{grid-template-columns:repeat(3,1fr)} }
.A-quotes blockquote{margin:0;padding-left:var(--s4);border-left:1px solid var(--red);
  font-size:14px;color:var(--fg-dim)}
.A-quotes cite{display:block;margin-top:var(--s3);font-style:normal;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim)}

/* --- Touch targets on phones --------------------------------------------- */
/* Footer contact details are one link per line. At body line-height they are 17px
   tall, which is not tappable: a phone number you tap to call has to be reachable
   with a thumb. Measured at 390px before fixing. Desktop keeps the tighter rhythm,
   where the pointer is precise and the vertical space is worth more.
   min-width too: "Home" in the footer measured 39px wide, so a short label is held
   open to the same 44px as its height. */
.vm-ft p a,
.vm-ft__base a,
.vm-branch p a,
.vm-chooser-foot a,
.vm-hd__nav a{display:inline-flex;align-items:center;min-height:26px}

@media (max-width:899px){
  .vm-ft p a,
  .vm-ft__base a,
  .vm-branch p a,
  .vm-chooser-foot a{min-height:var(--tap);min-width:var(--tap)}
}

/* ============================================================================
   10. DIRECTION B - domestic. Editorial: large thin display type, single column,
   air, red as one deliberate accent.

   Same tokens, same header, same footer, same buttons as Direction A. What differs
   is type scale and density, and nothing else. See spec section 4.
   ========================================================================= */
/* No padding of its own, for the same reason as .A-hero. */
.B-hero{display:grid;gap:var(--s6);max-width:760px}
@media (min-width:900px){
  /* The blank right half is where the shop photograph goes. Below 900px there is no
     right half, so the photo follows the text instead of squeezing it. */
  .B-hero{grid-template-columns:1.05fr .95fr;gap:var(--s7);align-items:center;max-width:none}
  /* No ch max-width here. A `ch` resolves against the CONTAINER's font size, not the
     80px heading inside it, so 36ch collapsed this column to about 270px and broke the
     headline to two words a line. The grid column is already the constraint.
     The heading is also re-scaled: once it shares the row with a photograph it has half
     the width, so sizing it off the full viewport is too big by roughly a third. */
  .B-hero h1{font-size:clamp(38px,4.4vw,60px)}
}
.B-hero h1{font-size:clamp(38px,7.4vw,80px);line-height:.98;letter-spacing:-.035em}
.B-hero h1 em{font-style:normal;display:block;color:var(--red-text)}
.B-hero .vm-lede{font-size:17px;max-width:44ch;margin-top:var(--s5)}

/* Category chips. These are labels, not links, so they are FILLED and unbordered:
   the bordered pill is reserved for things you can tap (.vm-catchip),
   and a visitor should be able to tell the two apart without trying. 44px tall so
   the row shares the rhythm of the controls around it. */
.B-chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.B-chips li{
  display:inline-flex;align-items:center;min-height:var(--tap);
  padding:0 var(--s4);background:var(--surface-2);border-radius:999px;
  font-size:14px;color:var(--fg-dim);
}

/* Product photos from the catalogues: a cut-out on the light tile the brand logos use, so a
   black chimney or hob stays visible in dark mode. Each opens its catalogue. Two across on a
   phone, three from 600px, six on a wide screen. */
.B-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5)}
@media (min-width:600px){ .B-products{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1100px){ .B-products{grid-template-columns:repeat(6,minmax(0,1fr))} }
.B-products a{display:flex;flex-direction:column;gap:var(--s1);color:var(--fg);text-decoration:none}
.B-products b{font-size:14px;font-weight:500;margin-top:var(--s2)}
.B-products a:hover .vm-photo--tile,.B-products a:focus-visible .vm-photo--tile{border-color:var(--red)}

/* Numbered reasons. Larger and airier than A's equivalent, same hairline grid. */
.B-cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:var(--s6)}
@media (min-width:768px){ .B-cards{grid-template-columns:repeat(3,1fr)} }
.B-cards article{background:var(--bg);padding:var(--s6) var(--s5)}
.B-cards .n{font-family:var(--mono);font-size:12px;color:var(--red-text);
  display:block;margin-bottom:var(--s4)}
.B-cards h3{font-size:19px;font-weight:400;margin-bottom:var(--s2)}
.B-cards p{font-size:14.5px;color:var(--fg-dim)}

/* Showroom. The conversion for this side is getting someone through the door, so
   the card leads with directions and the address is selectable text, not an image. */
.B-showroom{border:1px solid var(--line);margin-top:var(--s6);max-width:620px}
.vm-map{height:280px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.vm-map iframe{display:block;width:100%;height:100%;border:0}
/* Google's map is drawn light. In dark mode it is inverted and turned back round the colour
   wheel, which darkens the land and roads while keeping the red pin red, so the map sits in
   the page instead of glaring out of it. */
html:not([data-mode="light"]) .vm-map iframe{filter:invert(.9) hue-rotate(180deg)}
.B-showroom__body{padding:var(--s5)}
.B-showroom__body address{font-style:normal;color:var(--fg-dim);margin-bottom:var(--s3)}
.B-hours{font-size:15px;margin-bottom:var(--s1)}
.B-hours-note{font-size:13.5px;color:var(--fg-dim)}
/* Opening hours on /home/visit/, once the owner has entered them: the hairline spec
   grid at a reading width, and the note that follows it spaced off it. */
/* Showroom hours, day by day. Direction B: large, plain, today picked out. */
.B-week{max-width:520px;margin-top:var(--s5);border-top:1px solid var(--line)}
.B-week > div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding-block:var(--s3);border-bottom:1px solid var(--line);font-size:16px}
.B-week dt{color:var(--fg)}
.B-week dd{color:var(--fg-dim);font-variant-numeric:tabular-nums;text-align:right}
.B-week .is-closed dd{color:var(--fg-dim)}
.B-week .is-today{border-left:2px solid var(--red);padding-left:var(--s3);margin-left:calc(var(--s3) * -1 - 2px)}
.B-week .is-today dt,.B-week .is-today dd{color:var(--fg);font-weight:500}
.B-week__today{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--red-text);
  font-weight:500;margin-left:var(--s2)}
.B-week + .vm-lede{margin-top:var(--s4)}

/* Brand logos on the domestic side: the same tiles, rounded like the rest of this side. */
.B-logos a{border-radius:16px}

/* Instagram. Scroll-snap rather than a carousel library: native, and no script. */
.B-reels{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;
  margin-top:var(--s5);padding-bottom:var(--s3);-webkit-overflow-scrolling:touch;
  /* The browser's own scrollbar is a white bar under the row in dark mode: a thin one in
     the page's hairline colour instead, in both modes. */
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.B-reels > *{scroll-snap-align:start;flex:0 0 clamp(150px,42vw,190px);aspect-ratio:9/16;
  border:1px solid var(--line);background:var(--surface-2);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--fg-dim);text-decoration:none;text-align:center;padding:var(--s4)}

/* The Instagram posts in that row: portrait tiles (Instagram's 4:5), each photo filling its
   tile, a play mark on reels. Photos read the same in both colour modes, so no filter here. */
.B-ig{list-style:none;padding-left:0}
.B-ig > li{aspect-ratio:4/5;padding:0;position:relative;overflow:hidden}
.B-ig a{display:block;width:100%;height:100%}
.B-ig img{display:block;width:100%;height:100%;object-fit:cover}
.B-ig__play{position:absolute;top:var(--s2);right:var(--s2);width:0;height:0;
  border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent var(--on-red);
  filter:drop-shadow(0 0 3px var(--photo-shade))}

/* Sticky action bar. The domestic conversion has to sit in the thumb zone and be
   reachable one-handed at any scroll position. Phones only: on a desktop the same
   actions are already in view and a fixed bar just eats the viewport. */
.B-bar{display:none}
.B-bar-space{display:none}
@media (max-width:899px){
  /* After the footer on pages whose bar comes from components/action-bar.php. */
  .B-bar-space{display:block;height:calc(56px + env(safe-area-inset-bottom))}
  .B-bar{
    display:grid;grid-template-columns:repeat(3,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--bg);border-top:1px solid var(--line-2);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .B-bar a{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-height:56px;font-size:12px;font-weight:500;
    color:var(--fg-dim);text-decoration:none;border-right:1px solid var(--line);
  }
  .B-bar a:last-child{border-right:0}
  .B-bar a.is-primary{background:var(--red);color:var(--on-red)}
  /* Clear the bar so it never covers the last thing on the page. */
  body.has-bar{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}

/* --- Photographs ---------------------------------------------------------- */
/*
 * Placeholders are drawn in CSS, not shipped as stand-in image files: they cost
 * nothing to load, cannot be mistaken for real content, and name the shot that
 * belongs there so whoever takes the photographs knows what is missing.
 */
.vm-photo{
  position:relative;display:block;overflow:hidden;
  /* --surface, not --surface-2: the placeholder's red label is tuned against --bg and
     drops to 4.40:1 on the darker fill, which is under AA at 11px. */
  background:var(--surface);border:1px solid var(--line);
}
.vm-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* The hero shot is portrait only where it shares the row with the headline. In a
   single column (below 900px) 4:5 made a 720x900 block on a tablet, and the brief
   for this slot is a wide shot from the door, which is a landscape frame anyway. */
.vm-photo--hero{aspect-ratio:4/3}
@media (min-width:900px){ .vm-photo--hero{aspect-ratio:4/5} }
.vm-photo--shot{aspect-ratio:4/3}
/* A tall frame of a shopfront, cropped to a landscape box, keeps the shop and loses the
   sky: centred, the crop showed the floors above and cut the signage in half. */
.vm-photo--low img{object-position:50% 80%}
/* A product cut-out on the light tile the logos use (.B-products). After .vm-photo, whose
   dark fill it replaces. */
.vm-photo--tile{aspect-ratio:1/1;background:var(--logo-tile);border-radius:var(--r);transition:border-color .15s ease}
.vm-photo--tile img{object-fit:contain;padding:var(--s3)}

/* Text beside one photograph, at the top of an inner page (About). Stacked on a phone,
   the heading first and the photo under it at 4:3; side by side from 900px, the photo
   portrait like the heroes. */
.vm-intro{display:grid;gap:var(--s6)}
@media (min-width:900px){ .vm-intro{grid-template-columns:1.2fr .8fr;gap:var(--s8);align-items:center} }
.vm-intro--solo{grid-template-columns:1fr}
.vm-photo--intro{aspect-ratio:4/3}
@media (min-width:900px){ .vm-photo--intro{aspect-ratio:4/5} }
.vm-intro__fig figcaption{margin-top:var(--s2);font-size:13px;color:var(--fg-dim)}

.vm-photo__todo{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s2);padding:var(--s4);text-align:center;
  border:1px dashed var(--line-2);margin:var(--s2);
}
.vm-photo__todo b{font-size:14px;font-weight:500;color:var(--fg-dim)}
.vm-photo__todo span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red-text)}

/* Swipeable row. scroll-snap, not a carousel library: native, no script, and it
   cannot fail to initialise the way the Phase 0-1 hero did. */
.B-shots{
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,72vw,340px);
  gap:var(--s3);margin-top:var(--s6);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:var(--s3);-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.B-shots > figure{scroll-snap-align:start}
.B-shots figcaption{margin-top:var(--s2);font-size:13px;color:var(--fg-dim)}
.B-shots-hint{margin-top:var(--s3);font-size:13px;color:var(--fg-dim)}
/* From 900px the row is a wrapping grid, not a scroller. Five 4:3 shots in a row
   were being squeezed to 209px each inside the 1140px wrap while the hint below
   still said "Swipe to see more", and there was nothing to swipe. Three per row,
   and when the last row holds two they widen to fill it, so there is no hole. */
@media (min-width:900px){
  .B-shots{grid-auto-flow:row;grid-template-columns:repeat(6,1fr);gap:var(--s5);
    overflow:visible;scroll-snap-type:none;padding-bottom:0}
  .B-shots > figure{grid-column:span 2}
  .B-shots > figure:nth-last-child(2):nth-child(3n+1),
  .B-shots > figure:nth-last-child(1):nth-child(3n+2){grid-column:span 3}
  .B-shots-hint{display:none}
}

/* --- 11. The chooser at / -------------------------------------------------- */
/* Ported from theme.css when the root converted. Two stacked full-height cards on a
   phone, side by side above 768px. 100svh rather than 100vh, because browser chrome
   otherwise pushes the second panel below the fold and hides half the choice. */
.vm-chooser-body{margin:0}
.vm-split{display:grid;grid-template-rows:1fr 1fr;min-height:100svh}
@media (min-width:768px){ .vm-split{grid-template-rows:none;grid-template-columns:1fr 1fr} }

.vm-split__panel{
  display:flex;align-items:center;justify-content:center;
  padding:var(--s7) var(--s4);text-decoration:none;text-align:center;
  transition:filter .3s ease;
}
/* Two steps apart, not one. --surface against --surface-2 was #141313 against
   #1c1a1a, near enough identical at a glance, and a 50/50 split needs the division
   to be obvious before the labels are read. Still one palette: the sides differ in
   depth, not in hue. */
.vm-split__panel--industrial{background:var(--bg);color:var(--fg)}
.vm-split__panel--home{background:var(--surface-2);color:var(--fg)}
.vm-split__panel--home{border-left:1px solid var(--line)}
@media (max-width:767px){ .vm-split__panel--home{border-left:0;border-top:1px solid var(--line)} }
.vm-split__panel:hover{filter:brightness(1.25)}
html[data-mode="light"] .vm-split__panel:hover{filter:brightness(.97)}
.vm-split__panel:focus-visible{outline:3px solid var(--red-lite);outline-offset:-6px}

.vm-split__inner{display:flex;flex-direction:column;align-items:center;gap:var(--s2);max-width:26rem}
.vm-split__logo{margin-bottom:var(--s2);width:auto;height:56px}
.vm-split__eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;
  font-weight:500;color:var(--red-text)}
.vm-split__title{font-size:clamp(32px,7vw,52px);font-weight:200;line-height:1.05;
  letter-spacing:-.02em;text-wrap:balance}
/* Two lines reserved. Side by side, the home panel's description wraps and the
   industrial one does not, which put the two titles and buttons at different
   heights across the split. Stacked on a phone the reserve is invisible. */
.vm-split__list{font-size:14px;color:var(--fg-dim);min-height:calc(2 * 1.65em);text-wrap:balance}
.vm-split__cta{
  margin-top:var(--s4);display:inline-flex;align-items:center;min-height:var(--tap);
  padding:0 var(--s6);border-radius:999px;background:var(--red);color:var(--on-red);
  font-size:14px;font-weight:500;
}
.vm-chooser-mode{background:var(--bg);border-bottom:1px solid var(--line);
  text-align:center;padding:var(--s5) var(--s4)}
.vm-chooser-proof{background:var(--bg);text-align:center;padding:var(--s7) var(--s4);font-size:14px}
.vm-chooser-proof p{margin:0 auto var(--s2);max-width:46rem;color:var(--fg-dim)}
.vm-chooser-foot{background:var(--bg);border-top:1px solid var(--line);
  text-align:center;padding:var(--s5) var(--s4);font-size:13px;color:var(--fg-dim)}

/* --- 12. Page furniture --------------------------------------------------- */
/* Counters. Static numbers: the old page animated them with CounterUp, which needed
   jQuery and Waypoints for an effect nobody asked for. */
.vm-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:var(--s6)}
@media (min-width:768px){ .vm-stats{grid-template-columns:repeat(4,1fr)} }
.vm-stats div{background:var(--bg);padding:var(--s5);text-align:center}
.vm-stats b{display:block;font-family:var(--mono);font-size:26px;font-weight:500;color:var(--red-text)}
.vm-stats span{font-size:13px;color:var(--fg-dim)}

/* The journey. A dated list against a single hairline, not a card grid. */
.vm-timeline{margin-top:var(--s6);border-left:1px solid var(--line);padding-left:var(--s5)}
.vm-timeline li{position:relative;padding-bottom:var(--s6)}
.vm-timeline li:last-child{padding-bottom:0}
.vm-timeline li::before{content:"";position:absolute;left:calc(var(--s5) * -1 - 4px);top:9px;
  width:7px;height:7px;border-radius:50%;background:var(--red)}
.vm-timeline time{font-family:var(--mono);font-size:12px;color:var(--red-text)}
.vm-timeline h3{font-size:17px;font-weight:400;margin:var(--s1) 0 var(--s2)}
.vm-timeline p{font-size:14px;color:var(--fg-dim);max-width:62ch}

/* Branches on the contact page. */
.vm-branches{display:grid;gap:var(--s6);margin-top:var(--s6)}
@media (min-width:768px){ .vm-branches{grid-template-columns:1fr 1fr} }
.vm-branch{border:1px solid var(--line);padding:var(--s5)}
.vm-branch h2{font-size:20px;font-weight:400;margin-bottom:var(--s3)}
.vm-branch__what{font-size:14px;color:var(--fg-dim);margin-bottom:var(--s4)}
.vm-branch address{font-style:normal;color:var(--fg-dim);margin-bottom:var(--s3)}
.vm-branch p{margin-bottom:var(--s1)}
/* Opening hours on a branch card: days left, times right, hairline between rows. */
/* An article's cover: the branded card, full column width, above the short answer. */
.vm-article__cover{margin:var(--s5) 0;border:1px solid var(--line)}
.vm-article__cover img{display:block;width:100%;height:auto}
.vm-hours{list-style:none;padding:0;margin:var(--s3) 0 var(--s4);font-size:14px;max-width:360px}
.vm-hours li{display:flex;justify-content:space-between;gap:var(--s4);padding-block:var(--s2);border-bottom:1px solid var(--line)}
.vm-hours li span:last-child{color:var(--fg-dim)}
/* The Silvassa counter on the industrial home: map beside the details on a desktop. */
.A-branch{display:grid;border:1px solid var(--line);margin-top:var(--s6)}
.A-branch__body{padding:var(--s5)}
.A-branch__body address{font-style:normal;color:var(--fg-dim);margin-bottom:var(--s2)}
.A-branch__now{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--red-text);margin-bottom:var(--s3)}
@media (min-width:900px){
  .A-branch{grid-template-columns:1fr 1fr}
  .A-branch .vm-map{order:2;height:auto;min-height:320px;border-bottom:0;border-left:1px solid var(--line)}
}

/* 404. */
.vm-gone{text-align:center;padding-block:var(--s9)}
.vm-gone h1{font-size:clamp(32px,6vw,56px);margin-bottom:var(--s4)}
.vm-gone .vm-lede{margin-inline:auto}
.vm-gone .vm-btn-row{justify-content:center}

/* --- 13. Brands and catalogues -------------------------------------------- */
.vm-brandgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:var(--s6)}
@media (min-width:600px){ .vm-brandgrid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .vm-brandgrid{grid-template-columns:repeat(3,1fr)} }
.vm-brandgrid a{background:var(--bg);padding:var(--s5);text-decoration:none;display:block}
.vm-brandgrid a:hover{background:var(--surface)}
.vm-brandgrid h2{font-size:18px;font-weight:400;margin-bottom:var(--s2)}
.vm-brandgrid p{font-size:13.5px;color:var(--fg-dim)}

/* Catalogue rows. A file size next to every download, because a 40 MB PDF on mobile
   data is a decision the visitor should get to make before tapping. */
.vm-files{border:1px solid var(--line);margin-top:var(--s4)}
.vm-files a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s4);
  min-height:var(--tap);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line);text-decoration:none;font-size:14.5px;
}
.vm-files a:last-child{border-bottom:0}
.vm-files a:hover{background:var(--surface)}
.vm-files .ext{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--red-text);border:1px solid var(--line-2);padding:2px 6px;border-radius:var(--r)}
.vm-files .size{font-family:var(--mono);font-size:11.5px;color:var(--fg-dim);white-space:nowrap}
.vm-files__group{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-dim);margin-top:var(--s6)}

.vm-filter{
  width:100%;max-width:420px;margin-top:var(--s5);
  min-height:var(--tap);padding:0 var(--s4);
  background:var(--surface);color:var(--fg);
  border:1px solid var(--line-2);border-radius:var(--r);
}
.vm-filter::placeholder{color:var(--fg-dim)}

/* Subcategory tiles on a brand page. */
.vm-subcats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:var(--s6)}
@media (min-width:600px){ .vm-subcats{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .vm-subcats{grid-template-columns:repeat(4,1fr)} }
.vm-subcats article{background:var(--bg);padding:var(--s4)}
/* The light tile the logos use: a catalogue cut-out of a black chimney vanished on --surface-2. */
.vm-subcats img{width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--logo-tile);
  padding:var(--s2);margin-bottom:var(--s3)}
.vm-subcats h3{font-size:15px;font-weight:400}
.vm-subcats p{font-size:13px;color:var(--fg-dim);margin-top:var(--s1)}

.vm-prose{max-width:70ch;color:var(--fg-dim);margin-top:var(--s4)}
.vm-prose p{margin-bottom:var(--s3)}

/* --- 14. Blog index -------------------------------------------------------- */
/* Link chips, bordered pills: the pill is kept for things you can tap. The article count inherits the
   chip's colour: it used to sit at 75% opacity, which on the active red chip was
   white at 3.22:1, under AA. */
.vm-catchips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.vm-catchip{
  display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--tap);
  padding:0 var(--s4);border:1px solid var(--line-2);border-radius:999px;
  font-size:14px;color:var(--fg);text-decoration:none;
}
.vm-catchip:hover{border-color:var(--red);color:var(--red-text)}
.vm-catchip.is-active{background:var(--red);color:var(--on-red);border-color:var(--red)}
.vm-catchip .vm-mono{font-size:11px}

.vm-posts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:var(--s7)}
@media (min-width:700px){ .vm-posts{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .vm-posts{grid-template-columns:repeat(3,1fr)} }
.vm-post{background:var(--bg)}
.vm-post > a{display:flex;flex-direction:column;gap:var(--s2);height:100%;
  padding:var(--s5);text-decoration:none}
.vm-post > a:hover{background:var(--surface)}
.vm-post__cat{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red-text)}
.vm-post h2{font-size:18px;font-weight:400;line-height:1.25}
.vm-post p{font-size:14px;color:var(--fg-dim);margin-bottom:auto}
.vm-post__meta{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;
  margin-top:var(--s4);font-size:12px;color:var(--fg-dim)}
/* A label, so filled like .B-chips, not bordered like a link chip. */
.vm-post__for{background:var(--surface-2);border-radius:999px;padding:2px 8px;font-size:11px}

.vm-pager{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s6)}

/* --- 15. Article ----------------------------------------------------------- */
/* 680px and 16px body, not 760px and 15px: measured at 1280 the old column ran
   78 to 86 characters a line, past the 75 where a long read gets tiring. This
   lands at about 70. Top padding follows the section rhythm like every page. */
.vm-article{max-width:680px;padding-block:var(--s8) var(--s9)}
@media (min-width:768px){ .vm-article{padding-top:var(--s9)} }
.vm-crumbs{display:flex;gap:var(--s2);font-size:13px;color:var(--fg-dim);margin-bottom:var(--s5)}
.vm-crumbs a{display:inline-flex;align-items:center;min-height:26px;color:inherit;text-decoration:none}
/* Breadcrumbs are navigation, so on a phone they need a thumb-sized target like any
   other link. 26px clears the pointer minimum and not the touch one. min-width as
   well: "Notes" measured 36px wide. */
@media (max-width:899px){ .vm-crumbs a{min-height:var(--tap);min-width:var(--tap)} }
.vm-crumbs a:hover{color:var(--fg)}

.vm-article__head h1{font-size:clamp(28px,5vw,44px);margin-bottom:var(--s4)}
.vm-article__by{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;
  font-size:13px;color:var(--fg-dim)}

/* The answer up front, before anything is asked of the reader. */
.vm-answer{border-left:2px solid var(--red);padding:var(--s4) 0 var(--s4) var(--s5);
  margin-top:var(--s6)}
.vm-answer p{font-size:17px;line-height:1.6}

.vm-article__body{max-width:none;margin-top:var(--s6);color:var(--fg);
  font-size:16px;line-height:1.7}
.vm-article__body h2{font-size:24px;margin:var(--s7) 0 var(--s3)}
.vm-article__body h3{font-size:19px;font-weight:400;margin:var(--s6) 0 var(--s2)}
.vm-article__body p{margin-bottom:var(--s4);color:var(--fg-dim)}
.vm-article__body ul,.vm-article__body ol{margin:0 0 var(--s4) var(--s5);color:var(--fg-dim)}
.vm-article__body li{list-style:disc;margin-bottom:var(--s2)}
.vm-article__body ol li{list-style:decimal}
.vm-article__body a{color:var(--red-text)}
.vm-article__body table{width:100%;border-collapse:collapse;margin-bottom:var(--s5);font-size:14px}
.vm-article__body th,.vm-article__body td{border:1px solid var(--line);padding:var(--s2) var(--s3);
  text-align:left}
.vm-article__body th{font-weight:500;background:var(--surface)}
.vm-article__body blockquote{border-left:2px solid var(--line-2);padding-left:var(--s4);
  margin:0 0 var(--s4);color:var(--fg-dim)}
.vm-article__body img{margin-bottom:var(--s4);border:1px solid var(--line)}

.vm-standards{border:1px solid var(--line);padding:var(--s5);margin-top:var(--s7)}
.vm-standards ul{margin:var(--s2) 0 var(--s3)}
.vm-standards li{font-size:14px;margin-bottom:var(--s1)}
.vm-standards p{font-size:13px}

.vm-cta{border:1px solid var(--line);background:var(--surface);padding:var(--s6) var(--s5);
  margin-top:var(--s7)}
.vm-cta__h{font-size:22px;margin-bottom:var(--s3)}
.vm-cta p{color:var(--fg-dim);font-size:14.5px}
.vm-cta__split{display:grid;gap:var(--s5);margin-top:var(--s4)}
@media (min-width:640px){ .vm-cta__split{grid-template-columns:1fr 1fr;gap:var(--s6)} }
.vm-cta__split h3{font-size:16px;font-weight:500;margin-bottom:var(--s2)}
.vm-cta__split p{margin-bottom:var(--s4)}

/* The safety box is deliberately quieter than the CTA. It has to be read, not sold. */
.vm-safety{border:1px solid var(--line-2);border-left:3px solid var(--red);
  padding:var(--s5);margin-top:var(--s6)}
.vm-safety p{font-size:14px;color:var(--fg-dim);margin-bottom:var(--s3)}
.vm-safety p:last-child{margin-bottom:0}

.vm-faq{margin-top:var(--s7)}

/* Related notes. Not a .vm-sec: inside the article that added 64px of its own
   padding on top of the article's 96px, leaving 160px of nothing before the
   footer. It spaces like every other block in the article. */
.vm-related{margin-top:var(--s7)}
.vm-related .vm-posts{margin-top:0}

/* An empty listing's message, spaced off the controls above it. */
.vm-empty{margin-top:var(--s7)}

/* --- 16. Forms --------------------------------------------------------------- */
/* Form controls are a shared component (spec 2.5). These rules were born in a
   separate forms.css loaded per page; they live here now so there is one system
   file and one place a control's colour, size and focus ring are decided.

   Every input is 16px, which stops iOS zooming in on focus and breaking the layout
   mid-form, and every control is 44px tall on a phone. */
.vm-form{display:grid;gap:var(--s5);margin-top:var(--s6)}
.vm-form__row{display:grid;gap:var(--s5)}
@media (min-width:640px){ .vm-form__row--2{grid-template-columns:1fr 1fr} }

.vm-field{display:grid;gap:var(--s2)}
.vm-field > label{font-size:14px;font-weight:500}
.vm-field__opt{font-weight:300;color:var(--fg-dim);font-size:13px}
.vm-field__help{font-size:13px;color:var(--fg-dim)}
.vm-field__err{font-size:13px;color:var(--red-text)}

.vm-input,.vm-textarea{
  width:100%;min-height:var(--tap);
  padding:var(--s3) var(--s4);
  background:var(--surface);color:var(--fg);
  border:1px solid var(--line-2);border-radius:var(--r);
  font-family:var(--sans);font-size:16px;font-weight:300;line-height:1.5;
}
/* Placeholders carry a worked example ("Legrand DPX3 250 A MCCB"), so they are
   read, and they get the full dim token rather than 80% of it: at 80% the light
   mode figure was 4.6:1, too close to the line to leave. */
.vm-input::placeholder,.vm-textarea::placeholder{color:var(--fg-dim)}
.vm-input:focus,.vm-textarea:focus{outline:2px solid var(--red-lite);outline-offset:0;border-color:transparent}
.vm-textarea{min-height:140px;resize:vertical}
/* The enquiry form's file picker, in the same box as the other fields. The button inside is the
   browser's own; it is only given the site's surface, line and type. */
.vm-input--file{padding:var(--s2) var(--s3);font-size:14px}
.vm-input--file::file-selector-button{margin-right:var(--s3);padding:var(--s2) var(--s4);min-height:36px;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface-2);color:var(--fg);font:inherit;cursor:pointer}
.vm-field.has-error .vm-input,
.vm-field.has-error .vm-textarea{border-color:var(--red)}

/* A brand's authorisation, on its page: a check mark, the line, and the link to the letter. */
.vm-auth{display:flex;gap:var(--s3);align-items:flex-start;margin-top:var(--s4);padding:var(--s3) var(--s4);
  border:1px solid var(--line-2);border-radius:var(--r);font-size:14px;max-width:62ch}
.vm-auth__mark{flex:none;width:18px;height:10px;margin-top:5px;border-left:2px solid var(--red-text);border-bottom:2px solid var(--red-text);transform:rotate(-45deg)}
.vm-auth a{color:var(--fg);text-underline-offset:3px}

/* Customer reviews the owner chose to show (components/reviews.php). */
.vm-reviews{display:grid;gap:var(--s4);margin-top:var(--s5)}
@media (min-width:768px){ .vm-reviews{grid-template-columns:repeat(3,1fr)} }
.vm-reviews blockquote{margin:0;display:grid;gap:var(--s3);align-content:start;padding:var(--s5);border:1px solid var(--line);background:var(--surface)}
.vm-reviews p{font-size:15px}
.vm-reviews footer{font-size:13px;color:var(--fg-dim)}
.vm-reviews footer a{color:var(--fg-dim);text-underline-offset:3px}

/* --- Service and warranty (/service-and-warranty/) ------------------------------------
   One card per brand: what it covers, the complaint button, then the contacts in rows. */
.vm-service{display:grid;gap:var(--s4);margin-top:var(--s5)}
@media (min-width:768px){ .vm-service{grid-template-columns:repeat(2,1fr)} }
.vm-service__card{display:grid;gap:var(--s3);align-content:start;padding:var(--s5);border:1px solid var(--line);background:var(--surface)}
.vm-service__card h3{font-size:20px;font-weight:400}
.vm-service__for{font-size:14px;color:var(--fg-dim)}
.vm-service__rows{display:grid;border-top:1px solid var(--line)}
.vm-service__rows > div{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:14px}
.vm-service__rows dt{color:var(--fg-dim)}
.vm-service__rows dd{text-align:right}
.vm-service__rows a,.vm-service__near a,.vm-service__steps a{color:var(--fg);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:var(--tap)}
.vm-service__near{font-size:14px}
.vm-service__near b{display:block;font-weight:500}
.vm-service__src{font-size:12px;color:var(--fg-dim)}
.vm-service__steps{margin-top:var(--s5)}
.B-cards__more{margin-top:var(--s3)}
.B-cards__more a{color:var(--fg);text-underline-offset:3px;display:inline-flex;align-items:center;min-height:var(--tap)}

/* --- Calculators (/industrial/tools/) -------------------------------------------------
   The form and its answer side by side on a wide screen, the answer under the form on a
   phone. The answer is a card with one big figure, the working in rows, and the warnings
   that go with it. */
.vm-calc{display:grid;gap:var(--s7)}
@media (min-width:900px){ .vm-calc{grid-template-columns:1.1fr .9fr;align-items:start} }
.vm-calc .vm-eyebrow a{color:inherit;text-decoration:none}
.vm-calc__side{position:relative}
@media (min-width:900px){ .vm-calc__side{position:sticky;top:var(--s6);margin-top:var(--s9)} }
.vm-calc__result{padding:var(--s5);background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--red);
  display:grid;gap:var(--s3)}
.vm-calc__result--idle{border-left-color:var(--line-2)}
.vm-calc__label{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--red-text)}
.vm-calc__big{font-family:var(--mono);font-size:clamp(32px,5vw,44px);font-weight:500;line-height:1.1}
.vm-calc__rows{display:grid;border-top:1px solid var(--line)}
.vm-calc__rows > div{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s2) 0;border-bottom:1px solid var(--line);font-size:14px}
.vm-calc__rows dt{color:var(--fg-dim)}
.vm-calc__rows dd{font-family:var(--mono);text-align:right}
.vm-calc__warn{font-size:13.5px;color:var(--fg-dim);padding-left:var(--s3);border-left:2px solid var(--line-2)}
.vm-calc__note{font-size:12.5px;color:var(--fg-dim)}
.vm-calc__result .vm-btn-row{margin-top:var(--s2)}
.vm-calc__result p a{color:var(--fg);text-underline-offset:3px}
.vm-calc-list{display:grid;gap:var(--s3);margin-top:var(--s6)}
@media (min-width:768px){ .vm-calc-list{grid-template-columns:repeat(3,1fr)} }
.vm-calc-list a{display:grid;gap:var(--s2);height:100%;padding:var(--s5);border:1px solid var(--line-2);border-radius:var(--r);
  color:var(--fg);text-decoration:none;transition:border-color .15s ease}
.vm-calc-list a:hover,.vm-calc-list a:focus-visible{border-color:var(--red)}
.vm-calc-list b{font-size:17px;font-weight:500}
.vm-calc-list span{font-size:14px;color:var(--fg-dim)}

/* The honeypot. Off-screen rather than display:none, because some bots skip fields
   that are display:none. It is also aria-hidden and out of the tab order, so no
   person using a screen reader or a keyboard can land in it. */
.vm-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

.vm-form__alert{padding:var(--s4);border:1px solid var(--line-2);border-left:3px solid var(--red);
  background:var(--surface);font-size:14.5px}

.vm-form__foot{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.vm-form__note{font-size:13px;color:var(--fg-dim);max-width:52ch}
.vm-form__note--after{margin-top:var(--s6)}
/* A link in a note ("Prefer to call? +91...", "Back to the industrial range") is
   tapped, so it gets the contact-link underline and the touch height like the ones
   in the footer. Measured 16px tall before this. */
.vm-form__note a{
  display:inline-flex;align-items:center;min-height:26px;
  color:var(--fg);text-decoration:underline;text-decoration-color:var(--line-2);
  text-underline-offset:3px;text-decoration-thickness:1px;
}
.vm-form__note a:hover{text-decoration-color:currentColor}
@media (max-width:899px){ .vm-form__note a{min-height:var(--tap);min-width:var(--tap)} }

/* Two-column page: the form, and what happens next. The section supplies the
   vertical padding, like every other page. */
.vm-enq{display:grid;gap:var(--s7)}
@media (min-width:960px){ .vm-enq{grid-template-columns:1.25fr .75fr;gap:var(--s8)} }
.vm-enq__side{border-top:1px solid var(--line);padding-top:var(--s5)}
@media (min-width:960px){ .vm-enq__side{border-top:0;border-left:1px solid var(--line);padding:0 0 0 var(--s6)} }
.vm-steps{counter-reset:step;display:grid;gap:var(--s5);margin-top:var(--s4)}
.vm-steps li{counter-increment:step;display:grid;grid-template-columns:auto 1fr;gap:var(--s3);
  font-size:14.5px;color:var(--fg-dim)}
.vm-steps li::before{content:counter(step,decimal-leading-zero);font-family:var(--mono);
  font-size:12px;color:var(--red-text);padding-top:3px}
.vm-steps b{display:block;color:var(--fg);font-weight:500;margin-bottom:2px}

/* Confirmation */
.vm-sent{max-width:640px}
.vm-sent__ref{font-family:var(--mono);font-size:13px;color:var(--fg-dim)}
.vm-sent__wa{margin-top:var(--s6);padding:var(--s5);border:1px solid var(--line);background:var(--surface)}
.vm-sent__note{margin-bottom:var(--s4);color:var(--fg-dim);font-size:14.5px}
.vm-sent__wa .vm-btn-row{margin-top:0}

/* --- 17. Stock checker ----------------------------------------------------- */
/* /stock/ and the ask box under "What we stock" on both landings. Both are a plain
   GET form, so they need no script and an answer is a link someone can forward. */
.vm-stock{max-width:720px}
.vm-ask{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
/* Field and button stay on one row at every width: wrapped, the button sat alone
   under a full-width field and read as a separate control. So the placeholders are
   kept short enough to show whole at 375px. */
.vm-ask .vm-input{flex:1 1 0;min-width:0}
.vm-ask .vm-btn{flex:none}
/* On a landing it closes the section at reading width. No hairline: the list above
   is already a bordered block, and a second, shorter rule under it read as a stray. */
.vm-ask--sec{max-width:640px}
.vm-ask__label{flex-basis:100%;font-size:14px;font-weight:500}

.vm-stock__answer{display:grid;gap:var(--s4);margin-top:var(--s6)}
.vm-stock__hit{border:1px solid var(--line);border-left:3px solid var(--red);background:var(--surface);padding:var(--s5)}
.vm-stock__hit--miss{border-left-color:var(--line-2)}
.vm-stock__hit h2{font-size:20px;font-weight:400;margin-bottom:var(--s2)}
.vm-stock__hit p{color:var(--fg-dim);font-size:14.5px}
.vm-stock__hit p + p{margin-top:var(--s2)}
.vm-stock__note{margin-top:var(--s6)}

/* Admin preview banner on an article. Only ever rendered for a signed-in admin. */
.vm-preview{position:sticky;top:0;z-index:70;margin:0;padding:var(--s3) var(--s4);
  background:var(--red);color:var(--on-red);font-size:14px;text-align:center}
.vm-preview a{color:inherit;text-decoration:underline;margin-left:var(--s2);
  display:inline-flex;align-items:center;min-height:var(--tap)}

/* --- Brand logos ----------------------------------------------------------------
   One tile per brand, linking to its page. The tile is light in both modes (see
   --logo-tile), so every logo keeps its own colours. Tiles are a fixed shape and the
   logo is contained inside, so a wide logo (Fuji Electric) and a compact one (V-Guard)
   read at a similar weight. Two across on a phone, up to six on a wide screen. */
.vm-logos{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s5)}
@media (min-width:600px){ .vm-logos{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1100px){ .vm-logos{grid-template-columns:repeat(6,1fr)} }
.vm-logos--3{grid-template-columns:repeat(2,1fr)}
@media (min-width:600px){ .vm-logos--3{grid-template-columns:repeat(3,1fr);max-width:720px} }
.vm-logos a{
  display:flex;align-items:center;justify-content:center;aspect-ratio:5/2;min-height:var(--tap);
  padding:var(--s4) var(--s5);background:var(--logo-tile);color:var(--logo-ink);
  border:1px solid var(--line);border-radius:var(--r);text-decoration:none;
  transition:border-color .15s ease;
}
.vm-logos a:hover,.vm-logos a:focus-visible{border-color:var(--red)}
.vm-logos img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.vm-logos span{font-size:15px;font-weight:500;text-align:center}