/* ==========================================================================
   VLC Trade Group
   Concept Nile, 2026-08-09. Pilot build.
   Type and colour per brand/TYPE + COLOUR SYSTEM (2026-08-09).md
   ========================================================================== */

/* ---------- Inter, self-hosted, split by unicode-range ---------- */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* ---------- tokens ---------- */
:root{
  --vlc-orange:#F08143;
  --vlc-ember:#EC691F;
  --vlc-ember-d:#D2560F;
  --vlc-orange-ink:#B44A12;
  --vlc-orange-wash:#FDF1E9;
  --vlc-char:#2B2A29;
  --vlc-char-d:#1C1B1A;
  --vlc-ink-2:#5A5754;
  --vlc-ink-3:#8A8683;
  --vlc-line:#E4E0DC;
  --vlc-paper:#F7F5F3;
  --vlc-white:#FEFEFE;

  --r:14px; --r-s:8px;
  --max:1180px;
  --pad:24px;
  --shadow:0 14px 40px rgba(43,42,41,.10);
  --shadow-s:0 4px 14px rgba(43,42,41,.07);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:1rem;line-height:1.68;color:var(--vlc-char);background:var(--vlc-white);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'kern' 1,'liga' 1;overflow-x:hidden;
}
img,svg{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}
table{border-collapse:collapse;width:100%}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
section{padding:clamp(56px,7vw,92px) 0}
.sec-paper{background:var(--vlc-paper)}
.sec-dark{background:var(--vlc-char-d);color:var(--vlc-white)}
.sec-wash{background:var(--vlc-orange-wash)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-weight:800;line-height:1.14;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-.03em}
h2{font-size:clamp(1.55rem,3vw,2.3rem)}
h3{font-size:clamp(1.12rem,1.6vw,1.32rem);font-weight:700;letter-spacing:-.015em;line-height:1.25}
h4{font-size:1rem;font-weight:700;letter-spacing:-.01em}
p{max-width:70ch}
.lead{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.62;color:var(--vlc-ink-2)}
.sec-dark .lead{color:rgba(254,254,254,.78)}
.eyebrow{
  font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  line-height:1;color:var(--vlc-orange-ink);margin-bottom:14px;
}
.sec-dark .eyebrow{color:var(--vlc-orange)}
.sec-head{max-width:64ch;margin-bottom:clamp(30px,4vw,46px)}
.sec-head p{margin-top:14px}
.muted{color:var(--vlc-ink-2)}
.sec-dark .muted{color:rgba(254,254,254,.72)}
strong,.fw6{font-weight:600}
.num{font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  background:var(--vlc-ember);color:#fff;font-weight:700;font-size:1rem;
  padding:14px 26px;border-radius:50px;border:2px solid var(--vlc-ember);
  transition:background .18s,border-color .18s,transform .18s;cursor:pointer;
}
.btn:hover{background:var(--vlc-ember-d);border-color:var(--vlc-ember-d);transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--vlc-orange);outline-offset:3px}
.btn-ghost{background:transparent;color:var(--vlc-char);border-color:var(--vlc-line)}
.btn-ghost:hover{background:var(--vlc-char);border-color:var(--vlc-char);color:#fff}
/* every dark band, or the ghost button renders charcoal-on-charcoal */
.sec-dark .btn-ghost,.hero .btn-ghost,.cta-band .btn-ghost,.page-hero .btn-ghost{
  color:#fff;border-color:rgba(254,254,254,.42)
}
.sec-dark .btn-ghost:hover,.hero .btn-ghost:hover,
.cta-band .btn-ghost:hover,.page-hero .btn-ghost:hover{
  background:rgba(254,254,254,.14);border-color:rgba(254,254,254,.7);color:#fff
}
.btn-sm{padding:10px 20px;font-size:.92rem}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:60;background:rgba(254,254,254,.94);
  backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--vlc-line);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
/* width:auto is load-bearing. The <img> carries width/height attributes for CLS,
   and without it the attribute width wins over the CSS height and stretches the mark. */
.brand img{height:42px;width:auto}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:.94rem;font-weight:600;color:var(--vlc-char);padding:4px 0;border-bottom:2px solid transparent;transition:border-color .15s,color .15s}
.nav-links a:hover{color:var(--vlc-orange-ink);border-bottom-color:var(--vlc-orange)}
.nav-links a[aria-current="page"]{border-bottom-color:var(--vlc-orange);color:var(--vlc-orange-ink)}
.nav-cta{display:flex;align-items:center;gap:12px}
.burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:10px}
.burger span{width:24px;height:2px;background:var(--vlc-char);border-radius:2px;transition:.2s}

/* ---------- hero ---------- */
.hero{background:var(--vlc-char-d);color:var(--vlc-white);position:relative;overflow:hidden}
.hero::after{
  content:'';position:absolute;right:-14%;top:-38%;width:62%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(240,129,67,.20) 0%,rgba(240,129,67,0) 66%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:1;padding:clamp(64px,9vw,116px) 0 clamp(56px,7vw,92px);max-width:66ch}
.hero h1{margin-bottom:22px}
.hero h1 .accent{color:var(--vlc-orange)}
.hero p{color:rgba(254,254,254,.80);font-size:clamp(1.05rem,1.55vw,1.24rem);line-height:1.6;max-width:60ch}
.hero-strip{
  display:flex;flex-wrap:wrap;gap:0;border-top:1px solid rgba(254,254,254,.14);
  position:relative;z-index:1;
}
.hero-strip div{
  flex:1 1 200px;padding:22px 26px 24px;border-right:1px solid rgba(254,254,254,.14);
}
.hero-strip div:last-child{border-right:0}
.hero-strip b{
  display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;color:var(--vlc-orange);margin-bottom:7px;
}
.hero-strip span{font-size:.95rem;color:rgba(254,254,254,.82);line-height:1.5}

/* ---------- proof numbers ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2px;background:rgba(254,254,254,.13);border:1px solid rgba(254,254,254,.13);border-radius:var(--r);overflow:hidden}
.stat{background:var(--vlc-char-d);padding:30px 26px}
.stat .fig{font-size:clamp(2rem,3.4vw,2.9rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--vlc-orange);font-variant-numeric:tabular-nums}
.stat .fig sup{font-size:.42em;font-weight:700;top:-.9em;position:relative;letter-spacing:0}
.stat .lbl{margin-top:11px;font-size:.93rem;color:rgba(254,254,254,.76);line-height:1.45}

/* ---------- chain list ---------- */
.chains{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.chains li{
  list-style:none;font-size:.88rem;font-weight:600;padding:8px 15px;border-radius:50px;
  border:1px solid rgba(254,254,254,.22);color:rgba(254,254,254,.9);
}

/* ---------- grids ---------- */
.grid{display:grid;gap:22px}
.g1{grid-template-columns:1fr}
.g1 .shot.band{aspect-ratio:16/5}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

/* ---------- category tiles ---------- */
.cat{
  display:flex;flex-direction:column;background:var(--vlc-white);border:1px solid var(--vlc-line);
  border-radius:var(--r);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;
}
.cat:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.cat-img{
  aspect-ratio:4/3;background:var(--vlc-char);display:flex;align-items:center;justify-content:center;
  padding:18px;overflow:hidden;
}
.cat-img img{max-height:100%;width:auto;object-fit:contain}
.cat-img.on-light{background:var(--vlc-paper)}
.cat-img.type-tile{
  background:var(--vlc-char);position:relative;
  background-image:radial-gradient(circle at 78% 22%,rgba(240,129,67,.26),transparent 62%);
}
.cat-img.type-tile span{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(254,254,254,.5);text-align:center;line-height:1.7;
}
.cat-body{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.cat-body h3{margin-bottom:7px}
.cat-body p{font-size:.92rem;color:var(--vlc-ink-2);line-height:1.55;flex:1}
.cat-more{
  margin-top:15px;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--vlc-orange-ink);display:inline-flex;align-items:center;gap:7px;
}
.cat:hover .cat-more{gap:11px}
.cat-more::after{content:'→';transition:.2s}
.tag-soon{
  display:inline-block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;
  background:var(--vlc-orange-wash);color:var(--vlc-orange-ink);padding:4px 10px;border-radius:50px;
  margin-left:8px;vertical-align:middle;
}

/* ---------- numbered steps ---------- */
.steps{counter-reset:s;display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.step{position:relative;padding:30px 26px 28px;background:var(--vlc-white);border:1px solid var(--vlc-line);border-radius:var(--r)}
.step::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  display:block;font-size:.82rem;font-weight:800;letter-spacing:.1em;color:var(--vlc-orange);margin-bottom:14px;
}
.step h3{margin-bottom:9px}
.step p{font-size:.94rem;color:var(--vlc-ink-2);line-height:1.6}

/* ---------- worry / answer cards ---------- */
.worry{background:var(--vlc-white);border:1px solid var(--vlc-line);border-radius:var(--r);padding:28px 26px;border-top:3px solid var(--vlc-orange)}
.worry .q{font-size:.98rem;font-weight:700;color:var(--vlc-char);margin-bottom:11px;line-height:1.45}
.worry p{font-size:.94rem;color:var(--vlc-ink-2);line-height:1.62}

/* ---------- brands ---------- */
.brand-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.brand-chip{
  font-size:.9rem;font-weight:600;padding:9px 17px;border-radius:50px;
  border:1px solid var(--vlc-line);background:var(--vlc-white);color:var(--vlc-char);
  transition:border-color .15s,color .15s,background .15s;
}
a.brand-chip:hover{border-color:var(--vlc-orange);color:var(--vlc-orange-ink);background:var(--vlc-orange-wash)}
.origin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:18px;margin-top:8px}
.origin-grid.cols3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.origin-grid.cols3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.origin-grid.cols3{grid-template-columns:1fr}}
.origin{padding:22px;border:1px solid var(--vlc-line);border-radius:var(--r);background:var(--vlc-white)}
.origin b{display:block;font-size:1.02rem;margin-bottom:8px}
.origin span{font-size:.9rem;color:var(--vlc-ink-2);line-height:1.55}

/* ---------- tables ---------- */
.spec{border:1px solid var(--vlc-line);border-radius:var(--r);overflow:hidden;background:var(--vlc-white)}
.spec-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.spec table{min-width:640px;font-variant-numeric:tabular-nums}
.spec th,.spec td{text-align:left;padding:15px 18px;font-size:.92rem;border-bottom:1px solid var(--vlc-line);vertical-align:top}
.spec thead th{
  background:var(--vlc-paper);font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;color:var(--vlc-ink-2);white-space:nowrap;
}
.spec tbody tr:last-child td{border-bottom:0}
.spec tbody tr:hover{background:var(--vlc-orange-wash)}
.spec td b{font-weight:700}
.on-request{color:var(--vlc-ink-3);font-style:normal}

/* ---------- product showcase ---------- */
.shot{border-radius:var(--r);overflow:hidden;background:var(--vlc-char);display:flex;align-items:center;justify-content:center;padding:26px}
.shot.wide{aspect-ratio:16/6}
.shot.sq{aspect-ratio:4/3}
/* for landscape packshot banners, so they fill the tile instead of stranding
   themselves in the middle of a 4:3 box */
.shot.band{aspect-ratio:16/7;padding:12px}
.shot.band img{width:100%;height:100%;object-fit:contain}
/* photos that already have a white studio background sit on paper, not charcoal */
.shot.light{background:var(--vlc-paper);border:1px solid var(--vlc-line)}
.shot img{max-height:100%;width:auto;object-fit:contain}
/* honeypot: a human never sees or tabs to this; bots fill every input they find.
   Deliberately NOT display:none, because the better bots skip hidden fields. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.shot-cap{font-size:.84rem;color:var(--vlc-ink-3);margin-top:10px;line-height:1.5}
/* ---------- real photography ----------
   A packshot is CONTAINED on charcoal with padding. A photograph is not: it fills
   its tile and crops, or it strands itself in the middle of a box with bars.
   object-position sits above centre because these are photos of people and a
   centred crop of a portrait shot takes the tops of their heads off. */
.shot.photo{padding:0;background:var(--vlc-char-d)}
.shot.photo img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center 35%}
.shot.photo.sq1{aspect-ratio:1/1}
.shot.photo.wide16{aspect-ratio:16/9}
@media (max-width:640px){.shot.photo.wide16{aspect-ratio:4/3}}
figure.photo-fig{margin:0}

/* ---------- doc list ---------- */
.docs{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));list-style:none}
/* these cards are white on every background, so they set their own text colour
   rather than inheriting white from .sec-dark and going invisible */
.docs li{
  background:var(--vlc-white);border:1px solid var(--vlc-line);border-radius:var(--r);
  padding:22px 24px;color:var(--vlc-char);
}
.docs b{display:block;font-size:.98rem;margin-bottom:7px;color:var(--vlc-char)}
.docs span{font-size:.91rem;color:var(--vlc-ink-2);line-height:1.6}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--vlc-line)}
.faq details{border-bottom:1px solid var(--vlc-line)}
.faq summary{
  padding:22px 40px 22px 0;font-weight:700;font-size:1.02rem;cursor:pointer;position:relative;
  list-style:none;line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:400;color:var(--vlc-orange);line-height:1;
}
.faq details[open] summary::after{content:'\2212'}
.faq details p{padding:0 0 24px;color:var(--vlc-ink-2);font-size:.97rem}
.faq summary:hover{color:var(--vlc-orange-ink)}

/* ---------- breadcrumb ---------- */
.crumb{padding:18px 0 0;font-size:.85rem;color:var(--vlc-ink-3)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.crumb li:not(:last-child)::after{content:'/';margin-left:8px;color:var(--vlc-line)}
.crumb a:hover{color:var(--vlc-orange-ink)}
.crumb [aria-current]{color:var(--vlc-ink-2)}

/* ---------- page hero (interior) ---------- */
.page-hero{background:var(--vlc-char-d);color:var(--vlc-white);padding:clamp(38px,5vw,58px) 0 clamp(48px,6vw,74px)}
.page-hero .crumb{color:rgba(254,254,254,.55);padding-bottom:26px}
.page-hero .crumb a{color:rgba(254,254,254,.75)}
.page-hero .crumb a:hover{color:var(--vlc-orange)}
.page-hero .crumb [aria-current]{color:rgba(254,254,254,.55)}
.page-hero .crumb li:not(:last-child)::after{color:rgba(254,254,254,.3)}
.page-hero h1{margin-bottom:20px;max-width:19ch}
.page-hero p{color:rgba(254,254,254,.80);max-width:62ch;font-size:clamp(1.02rem,1.4vw,1.15rem)}
.page-hero-grid{display:grid;gap:40px;grid-template-columns:1.15fr .85fr;align-items:center}
.page-hero .shot{background:rgba(254,254,254,.05);border:1px solid rgba(254,254,254,.12)}

/* ---------- callout ---------- */
.callout{
  background:var(--vlc-orange-wash);border-left:3px solid var(--vlc-orange);
  border-radius:0 var(--r) var(--r) 0;padding:26px 28px;
}
.callout b{display:block;margin-bottom:8px;font-size:1.02rem}
.callout p{font-size:.95rem;color:var(--vlc-ink-2)}

/* ---------- final CTA ---------- */
.cta-band{background:var(--vlc-char-d);color:#fff;text-align:center}
.cta-band h2{margin-bottom:16px}
.cta-band p{margin:0 auto;color:rgba(254,254,254,.78);max-width:56ch}
.cta-band .cta-row{justify-content:center}

/* ---------- footer ---------- */
.site-foot{background:var(--vlc-char-d);color:rgba(254,254,254,.72);padding:64px 0 0;font-size:.92rem}
.foot-grid{display:grid;gap:40px;grid-template-columns:1.4fr 1fr 1fr 1fr;padding-bottom:48px}
.foot-brand img{height:74px;width:auto;margin-bottom:20px}
.foot-brand p{font-size:.92rem;line-height:1.65;max-width:34ch;color:rgba(254,254,254,.66)}
.site-foot h4{
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:var(--vlc-orange);margin-bottom:16px;
}
.site-foot ul{list-style:none;display:grid;gap:10px}
.site-foot a:hover{color:var(--vlc-orange)}
.site-foot address{font-style:normal;line-height:1.7}
/* three regional numbers: the label has to read as a label, not as another line
   of address text, or the block turns into a wall of digits */
.foot-tel{display:block;margin-top:12px}
.foot-tel span{
  display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  color:rgba(254,254,254,.42);margin-bottom:2px;
}
.foot-bar{
  border-top:1px solid rgba(254,254,254,.13);padding:22px 0;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:.85rem;color:rgba(254,254,254,.5);
}
.foot-bar a:hover{color:var(--vlc-orange)}

/* ---------- staging banner ---------- */
.staging{
  background:var(--vlc-ember);color:#fff;text-align:center;padding:9px 16px;
  font-size:.8rem;font-weight:700;letter-spacing:.05em;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .page-hero-grid{grid-template-columns:1fr;gap:30px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:34px}
}
@media (max-width:780px){
  .nav-links{
    display:none;position:absolute;top:76px;left:0;right:0;background:var(--vlc-white);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 0 14px;
    border-bottom:1px solid var(--vlc-line);box-shadow:var(--shadow);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:14px var(--pad);border-bottom:0;border-left:3px solid transparent}
  .nav-links a:hover,.nav-links a[aria-current="page"]{border-left-color:var(--vlc-orange);background:var(--vlc-paper)}
  .burger{display:flex}
  .nav-cta .btn{display:none}
  .site-head{position:relative}
  .hero-strip div{flex:1 1 100%;border-right:0;border-bottom:1px solid rgba(254,254,254,.14)}
  .hero-strip div:last-child{border-bottom:0}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .cta-row .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   Added with the generated build, 2026-08-09
   ========================================================================== */

/* skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--vlc-char);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-s) 0;font-weight:700}
.skip:focus{left:0}

/* visually hidden, for table captions */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* prose column: left-aligned inside .wrap so it shares the page's left margin */
.prose{max-width:70ch}
.prose h2{margin-top:46px}
.prose h2:first-child{margin-top:0}
.prose p{margin-top:16px}
.prose p:first-child{margin-top:0}
.prose .lead{margin-top:16px}
.prose .callout{margin-top:28px}
.prose ul.tick{margin-top:18px}

/* ticked lists */
ul.tick{list-style:none;display:grid;gap:11px;margin-top:16px}
ul.tick li{position:relative;padding-left:28px;color:var(--vlc-ink-2);line-height:1.6}
ul.tick li::before{
  content:'';position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;
  background:var(--vlc-orange);
}

/* worry cards that are links */
a.worry-link{display:block;transition:transform .2s,box-shadow .2s}
a.worry-link:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
a.worry-link .cat-more{margin-top:14px}

/* brand cards on the hub have no image */
.cat-brand .cat-body{padding-top:26px}
.cat-brand .eyebrow{margin-bottom:9px}

/* callout on a dark band */
.callout-dark{
  background:rgba(240,129,67,.10);border-left-color:var(--vlc-orange);
}
.callout-dark b{color:#fff}
.callout-dark p{color:rgba(254,254,254,.78)}

/* enquiry form */
.enq{display:grid;gap:18px;margin-top:26px;max-width:34rem}
.enq label{display:grid;gap:7px;font-weight:600;font-size:.93rem;color:var(--vlc-char)}
.enq .req{font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--vlc-orange-ink)}
.enq input,.enq select,.enq textarea{
  font:inherit;font-weight:400;padding:12px 14px;border:1px solid var(--vlc-line);
  border-radius:var(--r-s);background:var(--vlc-white);color:var(--vlc-char);width:100%;
}
.enq textarea{resize:vertical;min-height:120px;line-height:1.6}
.enq input:focus,.enq select:focus,.enq textarea:focus{
  outline:none;border-color:var(--vlc-orange);box-shadow:0 0 0 3px rgba(240,129,67,.18);
}
.enq .btn{justify-self:start}
.form-note{font-size:.86rem;color:var(--vlc-ink-3);line-height:1.55;max-width:34rem}

/* the contact page's detail table has no header row */
.spec table.plain{min-width:0}
.spec table.plain td:first-child{white-space:nowrap;width:1%}
.spec table.plain tbody tr:first-child td{border-top:0}

/* direct contact routes in the callout */
.contact-direct{margin-top:6px;line-height:2}
.contact-direct a{font-weight:700;color:var(--vlc-orange-ink);border-bottom:2px solid rgba(240,129,67,.4)}
.contact-direct a:hover{border-bottom-color:var(--vlc-orange-ink)}