/* ==========================================================================
   VIZVAKUR BHARATH — Page & section styles
   Depends on: vb-core.css
   --------------------------------------------------------------------------
   01. Home hero
   02. Trust marquee
   03. Duality (travel + products intro)
   04. Destination collection
   05. Feature ladder
   06. Product categories
   07. Executive programme (KYC / commission)
   08. Counters
   09. Testimonials
   10. Stays strip
   11. CTA band
   12. Page hero (inner pages)
   13. About page blocks
   14. Products page blocks
   15. Contact page blocks
   16. Legal page blocks
   17. FAQ accordion
   ========================================================================== */

/* ---------- 01. Home hero — image-only banner slider ----------
   The slide artwork is pre-composed (headline, features and CTA are baked
   into the JPEG), so nothing is overlaid and no scrim is applied. The band
   is full bleed and aspect-locked to the artwork, so it is never cropped. */
.vb-hero{
  /* Native ratio of the banner artwork. Update if the artwork is re-cropped. */
  --vb-hero-ar:1672 / 741;

  position:relative;
  margin-top:var(--vb-header-h);
  width:100%;
  /* Full bleed: the band spans the viewport and its height follows the
     artwork's own proportion, so cover has nothing to trim. No height cap —
     the type in these banners reaches the very edge (Thailand's runs to the
     last pixel row), so even a few percent of vertical crop would clip it. */
  aspect-ratio:var(--vb-hero-ar);
  overflow:hidden;
  background:var(--vb-ink-900);
  isolation:isolate;
}
/* A horizontal track, not a crossfade: dissolving between two banners that
   each carry their own headline shows both sets of type at once. */
.vb-hero__stage{
  position:absolute;inset:0;
  display:flex;
  transition:transform .8s var(--vb-ease-out);
  will-change:transform;
}
.vb-hero__slide{
  position:relative;
  flex:0 0 100%;
  width:100%;height:100%;
  overflow:hidden;
}
.vb-hero__art{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}

/* Narrow screens: a 2.26:1 desktop banner shrinks its baked-in headline to
   nothing. Deepen the band and crop to the left, where both banners put
   their type, so the message stays readable — the scenery on the right goes
   instead. Replace with purpose-cut mobile artwork and this can go. */
@media (max-width:760px){
  .vb-hero{--vb-hero-ar:3 / 2}
  .vb-hero__art{object-position:left center}
}
@media (max-width:520px){
  .vb-hero{--vb-hero-ar:4 / 3}
}

/* Arrows */
.vb-hero__arrow{
  position:absolute;top:50%;translate:0 -50%;z-index:3;
  width:clamp(34px,2.6vw,46px);
  height:clamp(34px,2.6vw,46px);
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(7,10,28,.42);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:#fff;
  opacity:0;
  transition:opacity .35s var(--vb-ease),background-color .3s var(--vb-ease),border-color .3s var(--vb-ease),transform .3s var(--vb-ease-out);
}
.vb-hero__arrow svg{width:45%;height:45%}
.vb-hero__arrow--prev{left:clamp(.6rem,1.4vw,1.5rem)}
.vb-hero__arrow--next{right:clamp(.6rem,1.4vw,1.5rem)}
.vb-hero:hover .vb-hero__arrow,
.vb-hero__arrow:focus-visible{opacity:1}
.vb-hero__arrow:hover{
  background:var(--vb-grad-gold);
  border-color:transparent;
  color:#0A0D1F;
}
.vb-hero__arrow--prev:hover{transform:translate(-2px,-50%)}
.vb-hero__arrow--next:hover{transform:translate(2px,-50%)}
/* Touch devices have no hover — keep the arrows permanently visible. */
@media (hover:none){.vb-hero__arrow{opacity:1}}

/* Dots */
.vb-hero__dots{
  position:absolute;z-index:3;
  left:50%;translate:-50% 0;
  bottom:clamp(.7rem,1.4vw,1.4rem);
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem .75rem;
  border-radius:var(--vb-r-pill);
  background:rgba(7,10,28,.4);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.vb-hero__dots button{
  position:relative;overflow:hidden;
  width:9px;height:9px;
  border-radius:var(--vb-r-pill);
  background:rgba(255,255,255,.45);
  transition:width .5s var(--vb-ease-out),background-color .3s var(--vb-ease);
}
.vb-hero__dots button:hover{background:rgba(255,255,255,.75)}
.vb-hero__dots button[aria-current="true"]{
  width:34px;
  background:rgba(255,255,255,.32);
}
.vb-hero__dots button[aria-current="true"]::after{
  content:"";position:absolute;inset:0;
  border-radius:inherit;
  background:var(--vb-grad-gold);
  transform:scaleX(0);transform-origin:left;
  animation:vb-progress 7s linear forwards;
}
@keyframes vb-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .vb-hero__dots button[aria-current="true"]::after{animation:none;transform:scaleX(1)}
}

/* ---------- Stat band (sits below the slider) ---------- */
.vb-statband{
  border-bottom:1px solid var(--vb-line);
  padding-block:clamp(1.5rem,1rem + 1.6vw,2.4rem);
}
.vb-statband__grid{
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
}
.vb-hero__stat b{
  display:block;
  font-family:var(--vb-font-display);
  font-size:clamp(1.6rem,1.25rem + 1.4vw,2.35rem);
  font-weight:600;line-height:1;
  color:var(--vb-marigold);
}
.vb-hero__stat > span{
  display:block;margin-top:.45rem;
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--vb-text-dim);
}

/* ---------- 02. Trust marquee ---------- */
.vb-marquee{
  position:relative;
  border-block:1px solid var(--vb-line);
  background:var(--vb-ink-850);
  padding-block:1.15rem;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.vb-marquee__track{
  display:flex;width:max-content;
  animation:vb-slide 42s linear infinite;
}
.vb-marquee:hover .vb-marquee__track{animation-play-state:paused}
@keyframes vb-slide{to{transform:translateX(-50%)}}
.vb-marquee__item{
  display:inline-flex;align-items:center;gap:.85rem;
  padding-inline:2rem;
  font-family:var(--vb-font-display);
  font-size:clamp(1rem,.9rem + .5vw,1.4rem);
  font-weight:600;font-style:italic;
  color:rgba(245,241,232,.5);
  white-space:nowrap;
}
.vb-marquee__item i{
  width:6px;height:6px;flex:none;
  background:var(--vb-saffron);
  transform:rotate(45deg);
}

/* ---------- 03. Duality: travel + products ---------- */
.vb-duo{display:grid;gap:clamp(1.25rem,.7rem + 1.6vw,2rem)}
@media (min-width:900px){.vb-duo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vb-duo__panel{
  position:relative;
  min-height:clamp(360px,32vw,500px);
  border-radius:var(--vb-r-xl);
  overflow:hidden;
  display:flex;align-items:flex-end;
  padding:clamp(1.6rem,1rem + 1.8vw,2.6rem);
  isolation:isolate;
}
.vb-duo__panel img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--vb-ease-out),filter .7s var(--vb-ease);
}
.vb-duo__panel::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* Stronger than the shared scrim: these panels carry body copy over
     photography that can be very light (product shots on pale grounds). */
  background:linear-gradient(180deg,
    rgba(7,10,28,.28) 0%,
    rgba(7,10,28,.58) 40%,
    rgba(7,10,28,.88) 72%,
    rgba(7,10,28,.97) 100%);
}
.vb-duo__panel:hover img{transform:scale(1.06)}
.vb-duo__panel h3{margin-top:.85rem}
.vb-duo__panel p{margin-top:.85rem;color:rgba(245,241,232,.76);max-width:44ch}
.vb-duo__panel .vb-link{margin-top:1.4rem}
.vb-duo__num{
  position:absolute;top:clamp(1.4rem,1rem + 1.2vw,2.2rem);right:clamp(1.4rem,1rem + 1.2vw,2.2rem);
  font-family:var(--vb-font-display);
  font-size:clamp(2.6rem,2rem + 2.4vw,4.2rem);
  font-weight:600;font-style:italic;
  color:transparent;
  -webkit-text-stroke:1px rgba(242,200,121,.42);
  line-height:1;
}

/* ---------- 04. Destination collection ---------- */
.vb-dest{
  display:grid;gap:clamp(.85rem,.5rem + 1vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
}
@media (min-width:920px){
  .vb-dest{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(0,auto)}
  .vb-dest__card--tall{grid-row:span 2}
  .vb-dest__card--wide{grid-column:span 2}
}
.vb-dest__card{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:280px;
  padding:1.5rem;
  border-radius:var(--vb-r-lg);
  overflow:hidden;
  isolation:isolate;
  border:1px solid var(--vb-line);
  transition:border-color .45s var(--vb-ease),transform .55s var(--vb-ease-out);
}
.vb-dest__card--tall{min-height:576px}
.vb-dest__card img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--vb-ease-out),filter .6s var(--vb-ease);
  filter:saturate(.92);
}
.vb-dest__card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--vb-grad-scrim-soft);
  transition:opacity .5s var(--vb-ease);
}
.vb-dest__card:hover{border-color:var(--vb-gold-line);transform:translateY(-4px)}
.vb-dest__card:hover img{transform:scale(1.08);filter:saturate(1.06)}
.vb-dest__tag{
  position:absolute;top:1.1rem;left:1.1rem;
  padding:.32rem .7rem;
  border-radius:var(--vb-r-pill);
  background:rgba(7,10,28,.6);
  backdrop-filter:blur(8px);
  border:1px solid var(--vb-line-strong);
  font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--vb-marigold);
}
.vb-dest__card h3{
  font-size:clamp(1.25rem,1.1rem + .6vw,1.7rem);
  color:var(--vb-ivory);
}
.vb-dest__where{
  font-family:var(--vb-font-mono);
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--vb-marigold);
  margin-bottom:.5rem;
}
.vb-dest__foot{
  margin-top:1rem;padding-top:.9rem;
  border-top:1px solid rgba(245,241,232,.16);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-size:.8rem;color:rgba(245,241,232,.72);
}
.vb-dest__foot b{
  font-family:var(--vb-font-display);
  font-size:1.05rem;font-weight:600;
  color:var(--vb-marigold);
}
.vb-dest__reveal{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .6s var(--vb-ease-out),opacity .45s var(--vb-ease),margin-top .6s var(--vb-ease-out);
  font-size:.88rem;line-height:1.65;
  color:rgba(245,241,232,.74);
}
.vb-dest__card:hover .vb-dest__reveal,
.vb-dest__card:focus-within .vb-dest__reveal{max-height:120px;opacity:1;margin-top:.7rem}

/* ---------- 05. Feature ladder ---------- */
.vb-ladder{display:grid;gap:0}
.vb-ladder__row{
  display:grid;gap:1rem 2.5rem;
  grid-template-columns:minmax(0,1fr);
  padding-block:clamp(1.75rem,1.2rem + 1.8vw,2.75rem);
  border-top:1px solid var(--vb-line);
  transition:background-color .45s var(--vb-ease),padding-inline .45s var(--vb-ease-out);
}
.vb-ladder__row:last-child{border-bottom:1px solid var(--vb-line)}
@media (min-width:860px){
  .vb-ladder__row{grid-template-columns:auto minmax(0,.9fr) minmax(0,1.3fr) auto;align-items:start}
  .vb-ladder__row:hover{background:rgba(232,163,61,.045);padding-inline:1.4rem}
}
.vb-ladder__row:hover .vb-ladder__title{color:var(--vb-marigold)}
.vb-ladder__idx{
  font-family:var(--vb-font-mono);
  font-size:.76rem;letter-spacing:.16em;
  color:var(--vb-saffron);
  padding-top:.35rem;
}
.vb-ladder__title{
  font-family:var(--vb-font-display);
  font-size:clamp(1.25rem,1.1rem + .7vw,1.75rem);
  font-weight:600;line-height:1.18;letter-spacing:-.02em;
  transition:color .35s var(--vb-ease);
}
.vb-ladder__body{color:var(--vb-text-muted);font-size:.96rem}
.vb-ladder__arrow{
  width:40px;height:40px;
  display:grid;place-items:center;
  border:1px solid var(--vb-line);
  border-radius:50%;
  color:var(--vb-text-dim);
  transition:all .4s var(--vb-ease);
}
.vb-ladder__arrow svg{width:15px;height:15px}
.vb-ladder__row:hover .vb-ladder__arrow{
  border-color:var(--vb-saffron);
  color:var(--vb-saffron);
  transform:rotate(-45deg);
}
@media (max-width:859px){.vb-ladder__arrow{display:none}}

/* ---------- 06. Product categories ---------- */
.vb-prods{
  display:grid;gap:clamp(1rem,.6rem + 1.2vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,258px),1fr));
}
.vb-prod{
  position:relative;
  display:flex;flex-direction:column;
  border-radius:var(--vb-r-lg);
  overflow:hidden;
  border:1px solid var(--vb-line);
  background:var(--vb-surface);
  transition:transform .5s var(--vb-ease-out),border-color .4s var(--vb-ease),box-shadow .5s var(--vb-ease);
}
.vb-prod:hover{transform:translateY(-6px);border-color:var(--vb-gold-line);box-shadow:var(--vb-shadow-lg)}
.vb-prod__media{position:relative;aspect-ratio:4/3;overflow:hidden}
.vb-prod__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.05s var(--vb-ease-out);
}
.vb-prod:hover .vb-prod__media img{transform:scale(1.07)}
.vb-prod__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(7,10,28,.72));
}
.vb-prod__count{
  position:absolute;z-index:1;bottom:.9rem;left:1rem;
  font-family:var(--vb-font-mono);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vb-marigold);
}
.vb-prod__body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.vb-prod__body p{margin-top:.6rem;font-size:.9rem;color:var(--vb-text-muted);flex:1}
.vb-prod__body .vb-link{margin-top:1.25rem;align-self:flex-start}
.vb-section--light .vb-prod{background:#fff;border-color:var(--vb-light-line)}

/* ---------- 07. Executive programme ---------- */
.vb-prog{
  position:relative;
  border-radius:var(--vb-r-xl);
  overflow:hidden;
  isolation:isolate;
  border:1px solid var(--vb-gold-line);
  padding:clamp(1.75rem,1.1rem + 2.4vw,3.5rem);
}
.vb-prog::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 70% 90% at 12% 0%,rgba(232,163,61,.20),transparent 62%),
    radial-gradient(ellipse 60% 80% at 92% 100%,rgba(42,157,143,.18),transparent 62%),
    linear-gradient(160deg,var(--vb-ink-700),var(--vb-ink-900));
}
.vb-prog__head{max-width:660px;margin-bottom:clamp(2rem,1.3rem + 2vw,3rem)}

.vb-steps{
  display:grid;gap:clamp(1rem,.6rem + 1.2vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  counter-reset:vbstep;
}
.vb-step{
  position:relative;
  padding:1.6rem 1.35rem 1.5rem;
  border:1px solid var(--vb-line);
  border-radius:var(--vb-r-md);
  background:rgba(7,10,28,.42);
  backdrop-filter:blur(10px);
  transition:border-color .4s var(--vb-ease),transform .5s var(--vb-ease-out),background-color .4s var(--vb-ease);
}
.vb-step:hover{border-color:var(--vb-gold-line);transform:translateY(-5px);background:rgba(7,10,28,.6)}
.vb-step__n{
  counter-increment:vbstep;
  width:36px;height:36px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid var(--vb-gold-line);
  color:var(--vb-marigold);
  font-family:var(--vb-font-mono);
  font-size:.8rem;font-weight:600;
  margin-bottom:1.05rem;
}
.vb-step__n::before{content:"0" counter(vbstep)}
.vb-step h4{margin-bottom:.55rem}
.vb-step p{font-size:.88rem;color:var(--vb-text-muted)}
/* connector line between steps on wide screens */
@media (min-width:1080px){
  .vb-step:not(:last-child)::after{
    content:"";position:absolute;top:2.85rem;right:-.78rem;
    width:.78rem;height:1px;
    background:var(--vb-gold-line);
  }
}

.vb-prog__notes{
  margin-top:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);
  padding-top:1.75rem;
  border-top:1px solid var(--vb-line);
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
}
.vb-prog__note{display:flex;gap:.9rem}
.vb-prog__note svg{
  width:19px;height:19px;flex:none;margin-top:.24rem;
  stroke:var(--vb-teal-soft);stroke-width:1.7;
}
.vb-prog__note b{display:block;font-size:.94rem;margin-bottom:.2rem}
.vb-prog__note span{font-size:.86rem;color:var(--vb-text-muted);line-height:1.6}

/* ---------- 08. Counters ---------- */
.vb-counts{
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  background:var(--vb-line);
  border:1px solid var(--vb-line);
  border-radius:var(--vb-r-lg);
  overflow:hidden;
}
.vb-count{
  background:var(--vb-ink-900);
  padding:clamp(1.6rem,1.1rem + 1.4vw,2.5rem) 1.5rem;
  text-align:center;
  transition:background-color .45s var(--vb-ease);
}
.vb-count:hover{background:var(--vb-ink-700)}
.vb-count b{
  display:block;
  font-family:var(--vb-font-display);
  font-size:clamp(2.1rem,1.6rem + 2.2vw,3.4rem);
  font-weight:600;line-height:1;
  letter-spacing:-.03em;
}
.vb-count > span{
  display:block;margin-top:.7rem;
  font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--vb-text-dim);
}
.vb-section--light .vb-count{background:#fff}
.vb-section--light .vb-count:hover{background:var(--vb-light-bg)}

/* ---------- 09. Testimonials ---------- */
.vb-quotes{position:relative}
.vb-quotes__viewport{overflow:hidden;margin-inline:-.5rem;padding:.5rem}
.vb-quotes__track{
  display:flex;
  gap:clamp(1rem,.6rem + 1.1vw,1.5rem);
  transition:transform .75s var(--vb-ease-out);
  will-change:transform;
}
.vb-quote{
  flex:0 0 100%;
  display:flex;flex-direction:column;
  padding:clamp(1.6rem,1.1rem + 1.4vw,2.35rem);
  border:1px solid var(--vb-line);
  border-radius:var(--vb-r-lg);
  background:var(--vb-surface);
  backdrop-filter:blur(12px);
}
@media (min-width:760px){.vb-quote{flex-basis:calc((100% - clamp(1rem,.6rem + 1.1vw,1.5rem)) / 2)}}
@media (min-width:1120px){.vb-quote{flex-basis:calc((100% - 2 * clamp(1rem,.6rem + 1.1vw,1.5rem)) / 3)}}
.vb-quote__mark{
  font-family:var(--vb-font-display);
  font-size:3.4rem;line-height:.5;
  color:var(--vb-gold-line);
  margin-bottom:1.1rem;
}
.vb-quote blockquote{
  font-size:1rem;line-height:1.75;
  color:var(--vb-text);
  flex:1;
}
.vb-quote__by{
  margin-top:1.6rem;padding-top:1.3rem;
  border-top:1px solid var(--vb-line);
  display:flex;align-items:center;gap:.9rem;
}
.vb-quote__by img{
  width:46px;height:46px;flex:none;
  border-radius:50%;object-fit:cover;
  border:1px solid var(--vb-gold-line);
}
.vb-quote__by b{display:block;font-size:.94rem;font-weight:700}
.vb-quote__by span{font-size:.8rem;color:var(--vb-text-dim)}
.vb-stars{display:flex;gap:.15rem;margin-bottom:.9rem;color:var(--vb-saffron)}
.vb-stars svg{width:14px;height:14px;fill:currentColor;stroke:none}

.vb-quotes__nav{
  display:flex;gap:.6rem;justify-content:center;
  margin-top:2rem;
}
.vb-quotes__nav button{
  width:44px;height:44px;
  display:grid;place-items:center;
  border:1px solid var(--vb-line-strong);
  border-radius:50%;
  color:var(--vb-text-muted);
  transition:all .35s var(--vb-ease);
}
.vb-quotes__nav svg{width:16px;height:16px}
.vb-quotes__nav button:hover:not(:disabled){
  background:var(--vb-grad-gold);color:#0A0D1F;border-color:transparent;
}
.vb-quotes__nav button:disabled{opacity:.35;cursor:not-allowed}

/* ---------- 10. Stays strip ---------- */
.vb-stays{
  display:grid;gap:.85rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
}
.vb-stay{
  position:relative;
  aspect-ratio:3/4;
  border-radius:var(--vb-r-md);
  overflow:hidden;
  isolation:isolate;
  display:flex;align-items:flex-end;
  padding:1.15rem;
}
.vb-stay img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--vb-ease-out);
}
.vb-stay::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent 40%,rgba(7,10,28,.88));
}
.vb-stay:hover img{transform:scale(1.07)}
.vb-stay b{
  font-family:var(--vb-font-display);
  font-size:1.05rem;font-weight:600;
  color:var(--vb-ivory);
  display:block;
}
.vb-stay span{
  display:block;margin-top:.2rem;
  font-family:var(--vb-font-mono);
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--vb-marigold);
}

/* ---------- 11. CTA band ---------- */
.vb-cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding-block:clamp(4rem,2.5rem + 5vw,7rem);
  text-align:center;
}
.vb-cta img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
}
/* Opaque at both edges so the band meets the sections above and below with
   no seam, and lighter through the middle so the photograph still reads
   behind the centred copy. */
.vb-cta::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(7,10,28,1) 0%,
      rgba(4,6,19,.70) 26%,
      rgba(4,6,19,.70) 70%,
      rgba(7,10,28,1) 100%),
    radial-gradient(ellipse 60% 80% at 50% 50%,rgba(232,163,61,.18),transparent 70%);
}
.vb-cta h2{max-width:20ch;margin-inline:auto;text-wrap:balance}
.vb-cta p{max-width:56ch;margin:1.2rem auto 0}
.vb-cta .vb-lead{color:rgba(245,241,232,.88)}
.vb-cta h2,.vb-cta p,.vb-cta .vb-eyebrow{text-shadow:0 2px 20px rgba(4,6,19,.6)}
.vb-cta .vb-flex{margin-top:2.25rem}

/* ---------- 12. Page hero (inner pages) ---------- */
.vb-phero{
  position:relative;
  padding-top:calc(var(--vb-header-h) + clamp(3.5rem,2rem + 5vw,6.5rem));
  padding-bottom:clamp(3rem,2rem + 3.5vw,5rem);
  overflow:hidden;
  isolation:isolate;
}
.vb-phero img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.85);
}
/* Two stacked scrims. The first darkens the left, where the copy sits; the
   second lays a band across the top so the transparent header's nav stays
   legible over bright skies, and sinks the bottom edge into the page. */
.vb-phero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,
      rgba(4,6,19,.74) 0%,
      rgba(4,6,19,.54) 42%,
      rgba(4,6,19,.22) 72%,
      rgba(4,6,19,.10) 100%),
    linear-gradient(180deg,
      rgba(4,6,19,.60) 0%,
      rgba(4,6,19,.14) 28%,
      rgba(4,6,19,.14) 58%,
      rgba(7,10,28,.94) 94%,
      /* Opaque at the very bottom so the band meets the page with no seam. */
      rgba(7,10,28,1) 100%);
}
.vb-phero h1{max-width:16ch;text-wrap:balance}
.vb-phero p{margin-top:1.35rem;max-width:58ch}
/* Photography is busier than a flat panel — lift the secondary text off the
   muted greys and give everything a soft shadow to sit on. */
.vb-phero .vb-crumbs{color:rgba(245,241,232,.74)}
.vb-phero .vb-lead{color:rgba(245,241,232,.88)}
.vb-phero h1,
.vb-phero p,
.vb-phero .vb-crumbs,
.vb-phero .vb-eyebrow{text-shadow:0 2px 20px rgba(4,6,19,.6)}
.vb-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;
  margin-bottom:1.3rem;
  font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vb-text-dim);
}
.vb-crumbs a{transition:color .3s var(--vb-ease)}
.vb-crumbs a:hover{color:var(--vb-marigold)}
.vb-crumbs span[aria-current]{color:var(--vb-marigold)}
.vb-crumbs i{width:4px;height:4px;border-radius:50%;background:var(--vb-line-strong)}

/* ---------- 13. About page ---------- */
.vb-story{
  display:grid;gap:clamp(1.75rem,1.2rem + 2.4vw,3.5rem);
  align-items:center;
}
@media (min-width:940px){
  .vb-story{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .vb-story--flip .vb-story__media{order:2}
}
.vb-story__media{
  position:relative;
  border-radius:var(--vb-r-xl);
  overflow:hidden;
  aspect-ratio:4/3.2;
}
.vb-story__media img{width:100%;height:100%;object-fit:cover}
.vb-story__media::after{
  content:"";position:absolute;inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--vb-gold-line);
  pointer-events:none;
}
.vb-story__badge{
  position:absolute;z-index:2;
  right:clamp(-1rem,-2vw,0rem);bottom:1.4rem;
  padding:1rem 1.35rem;
  border-radius:var(--vb-r-md);
  background:rgba(7,10,28,.86);
  backdrop-filter:blur(14px);
  border:1px solid var(--vb-gold-line);
  box-shadow:var(--vb-shadow-lg);
  min-width:170px;
}
.vb-story__badge b{
  display:block;
  font-family:var(--vb-font-display);
  font-size:1.75rem;font-weight:600;line-height:1;
  color:var(--vb-marigold);
}
.vb-story__badge > span{
  display:block;margin-top:.35rem;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(245,241,232,.66);
}
.vb-story__body p + p{margin-top:1.1rem}
.vb-story__list{margin-top:1.75rem;display:grid;gap:.85rem}
.vb-story__list li{display:flex;gap:.8rem;font-size:.94rem;color:var(--vb-text-muted)}
.vb-story__list svg{
  width:18px;height:18px;flex:none;margin-top:.28rem;
  stroke:var(--vb-saffron);stroke-width:2;
}

/* Mission / vision / values */
.vb-pillar{padding:clamp(1.5rem,1.1rem + 1.2vw,2.1rem)}
.vb-pillar h3{margin:1.2rem 0 .7rem;font-size:1.35rem}
.vb-pillar p{font-size:.94rem;color:var(--vb-text-muted)}

/* Timeline */
.vb-time{position:relative;padding-left:2.1rem}
.vb-time::before{
  content:"";position:absolute;left:6px;top:.6rem;bottom:.6rem;
  width:1px;
  background:linear-gradient(180deg,var(--vb-saffron),var(--vb-gold-line),transparent);
}
.vb-time__item{position:relative;padding-bottom:2.25rem}
.vb-time__item:last-child{padding-bottom:0}
.vb-time__item::before{
  content:"";position:absolute;left:-2.1rem;top:.55rem;
  width:13px;height:13px;
  border-radius:50%;
  background:var(--vb-ink-900);
  border:2px solid var(--vb-saffron);
}
.vb-time__year{
  font-family:var(--vb-font-mono);
  font-size:.74rem;letter-spacing:.18em;
  color:var(--vb-marigold);
  margin-bottom:.4rem;
}
.vb-time__item h4{margin-bottom:.45rem}
.vb-time__item p{font-size:.92rem;color:var(--vb-text-muted)}

/* Team */
.vb-team{
  display:grid;gap:clamp(1rem,.6rem + 1.2vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
}
.vb-member{
  position:relative;
  border-radius:var(--vb-r-lg);
  overflow:hidden;
  border:1px solid var(--vb-line);
  transition:border-color .4s var(--vb-ease),transform .5s var(--vb-ease-out);
}
.vb-member:hover{border-color:var(--vb-gold-line);transform:translateY(-5px)}
.vb-member__media{aspect-ratio:1/1;overflow:hidden;position:relative}
.vb-member__media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.9);
  transition:transform 1s var(--vb-ease-out),filter .5s var(--vb-ease);
}
.vb-member:hover .vb-member__media img{transform:scale(1.06);filter:saturate(1.05)}
.vb-member__body{padding:1.2rem 1.35rem 1.45rem;background:var(--vb-surface)}
.vb-member__body b{display:block;font-size:1rem;font-weight:700}
.vb-member__body span{
  display:block;margin-top:.25rem;
  font-family:var(--vb-font-mono);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vb-marigold);
}
.vb-section--light .vb-member__body{background:#fff}

/* ---------- 14. Products page ---------- */
.vb-filters{
  display:flex;flex-wrap:wrap;gap:.55rem;
  margin-bottom:clamp(1.75rem,1.2rem + 1.6vw,2.75rem);
}
.vb-filter{
  padding:.6rem 1.15rem;
  border:1px solid var(--vb-line-strong);
  border-radius:var(--vb-r-pill);
  font-size:.82rem;font-weight:600;
  letter-spacing:.04em;
  color:var(--vb-text-muted);
  transition:all .35s var(--vb-ease);
}
.vb-filter:hover{color:var(--vb-ivory);border-color:var(--vb-gold-line)}
.vb-filter[aria-pressed="true"]{
  background:var(--vb-grad-gold);
  color:#0A0D1F;
  border-color:transparent;
  box-shadow:var(--vb-shadow-gold);
}
.vb-filter b{
  font-family:var(--vb-font-mono);
  font-size:.68rem;opacity:.7;margin-left:.4rem;font-weight:500;
}

.vb-cat{
  display:grid;gap:clamp(1rem,.6rem + 1.2vw,1.6rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));
}
.vb-cat > [hidden]{display:none}
.vb-item{
  display:flex;flex-direction:column;
  border:1px solid var(--vb-line);
  border-radius:var(--vb-r-lg);
  overflow:hidden;
  background:var(--vb-surface);
  transition:transform .5s var(--vb-ease-out),border-color .4s var(--vb-ease),box-shadow .5s var(--vb-ease),opacity .4s var(--vb-ease);
}
.vb-item:hover{transform:translateY(-6px);border-color:var(--vb-gold-line);box-shadow:var(--vb-shadow-lg)}
.vb-item__media{position:relative;aspect-ratio:16/11;overflow:hidden}
.vb-item__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.05s var(--vb-ease-out);
}
.vb-item:hover .vb-item__media img{transform:scale(1.06)}
.vb-item__badge{
  position:absolute;top:.9rem;left:.9rem;
  padding:.3rem .7rem;
  border-radius:var(--vb-r-pill);
  background:rgba(7,10,28,.68);
  backdrop-filter:blur(8px);
  border:1px solid var(--vb-line-strong);
  font-size:.64rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--vb-marigold);
}
.vb-item__body{padding:1.35rem 1.45rem 1.55rem;display:flex;flex-direction:column;flex:1}
.vb-item__body h3{font-size:1.22rem;margin-bottom:.55rem}
.vb-item__body > p{font-size:.9rem;color:var(--vb-text-muted);flex:1}
.vb-item__specs{
  display:flex;flex-wrap:wrap;gap:.4rem;
  margin-top:1rem;
}
.vb-item__foot{
  margin-top:1.25rem;padding-top:1.05rem;
  border-top:1px solid var(--vb-line);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.vb-item__price small{
  display:block;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vb-text-dim);
}
.vb-item__price b{
  font-family:var(--vb-font-display);
  font-size:1.3rem;font-weight:600;
  color:var(--vb-marigold);
}
.vb-section--light .vb-item{background:#fff;border-color:var(--vb-light-line)}

.vb-empty{
  padding:3rem 1rem;text-align:center;
  color:var(--vb-text-dim);
  border:1px dashed var(--vb-line-strong);
  border-radius:var(--vb-r-lg);
  grid-column:1/-1;
}

/* Commission table */
.vb-tablewrap{
  overflow-x:auto;
  border:1px solid var(--vb-line);
  border-radius:var(--vb-r-lg);
  background:var(--vb-surface);
}
.vb-table{min-width:600px;font-size:.92rem}
.vb-table th,.vb-table td{
  padding:1rem 1.25rem;
  text-align:left;
  border-bottom:1px solid var(--vb-line);
}
.vb-table thead th{
  font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--vb-marigold);
  background:rgba(232,163,61,.06);
  white-space:nowrap;
}
.vb-table tbody tr:last-child td{border-bottom:0}
.vb-table tbody tr{transition:background-color .3s var(--vb-ease)}
.vb-table tbody tr:hover{background:rgba(232,163,61,.045)}
.vb-table td b{color:var(--vb-marigold);font-family:var(--vb-font-display);font-size:1.05rem;font-weight:600}
.vb-section--light .vb-tablewrap{background:#fff}

/* ---------- 15. Contact page ---------- */
.vb-contact{
  display:grid;gap:clamp(1.5rem,1rem + 2vw,2.75rem);
  align-items:start;
}
@media (min-width:980px){
  .vb-contact{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}
.vb-contact__cards{display:grid;gap:1rem}
.vb-ccard{
  display:flex;gap:1.1rem;
  padding:1.4rem 1.45rem;
  border:1px solid var(--vb-line);
  border-radius:var(--vb-r-md);
  background:var(--vb-surface);
  transition:border-color .4s var(--vb-ease),transform .45s var(--vb-ease-out);
}
.vb-ccard:hover{border-color:var(--vb-gold-line);transform:translateX(4px)}
.vb-ccard h4{margin-bottom:.4rem}
.vb-ccard p,.vb-ccard a{font-size:.92rem;color:var(--vb-text-muted);line-height:1.65}
.vb-ccard a{transition:color .3s var(--vb-ease);display:block}
.vb-ccard a:hover{color:var(--vb-marigold)}
.vb-section--light .vb-ccard{background:#fff}

.vb-formcard{
  padding:clamp(1.5rem,1rem + 1.8vw,2.6rem);
  border:1px solid var(--vb-line);
  border-radius:var(--vb-r-xl);
  background:var(--vb-surface);
  backdrop-filter:blur(14px);
}
.vb-section--light .vb-formcard{background:#fff;box-shadow:var(--vb-shadow-md)}
.vb-formgrid{display:grid;gap:0 1.15rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:620px){.vb-formgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vb-formgrid .vb-field--full{grid-column:1/-1}}

.vb-map{
  border-radius:var(--vb-r-lg);
  overflow:hidden;
  border:1px solid var(--vb-line);
  aspect-ratio:21/9;
  min-height:280px;
  filter:grayscale(.35) contrast(1.05);
}
.vb-map iframe{width:100%;height:100%;border:0;display:block}

/* ---------- 16. Legal page ---------- */
.vb-legal{
  display:grid;gap:clamp(1.75rem,1.2rem + 2vw,3rem);
  align-items:start;
}
@media (min-width:940px){
  .vb-legal{grid-template-columns:250px minmax(0,1fr)}
}
.vb-legal__nav{
  position:sticky;top:calc(var(--vb-header-h) + 1.5rem);
  border:1px solid var(--vb-line);
  border-radius:var(--vb-r-md);
  background:var(--vb-surface);
  padding:1.25rem;
}
@media (max-width:939px){.vb-legal__nav{position:static}}
.vb-legal__nav h4{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--vb-marigold);margin-bottom:1rem;
}
.vb-legal__nav a{
  display:block;
  padding:.5rem .7rem;
  border-radius:var(--vb-r-xs);
  font-size:.86rem;
  color:var(--vb-text-muted);
  transition:all .3s var(--vb-ease);
  border-left:2px solid transparent;
}
.vb-legal__nav a:hover,.vb-legal__nav a.is-active{
  color:var(--vb-marigold);
  background:rgba(232,163,61,.07);
  border-left-color:var(--vb-saffron);
}
.vb-doc > section{
  padding-bottom:clamp(2rem,1.4rem + 1.6vw,3rem);
  margin-bottom:clamp(2rem,1.4rem + 1.6vw,3rem);
  border-bottom:1px solid var(--vb-line);
}
.vb-doc > section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.vb-doc h2{font-size:clamp(1.45rem,1.2rem + 1vw,2rem);margin-bottom:1.1rem}
.vb-doc h3{font-size:1.15rem;margin:1.85rem 0 .7rem;color:var(--vb-marigold)}
.vb-doc p{color:var(--vb-text-muted);margin-bottom:1rem;font-size:.96rem}
.vb-doc ul{margin:0 0 1.15rem;display:grid;gap:.6rem}
.vb-doc ul li{
  position:relative;padding-left:1.4rem;
  font-size:.94rem;color:var(--vb-text-muted);
}
.vb-doc ul li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;
  background:var(--vb-saffron);
  transform:rotate(45deg);
}
.vb-doc__meta{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-bottom:2rem;
  font-family:var(--vb-font-mono);
  font-size:.74rem;letter-spacing:.1em;
  color:var(--vb-text-dim);
}

/* ---------- 17. FAQ accordion ---------- */
.vb-faq{border-top:1px solid var(--vb-line)}
.vb-faq__item{border-bottom:1px solid var(--vb-line)}
.vb-faq__q{
  width:100%;
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;
  padding:1.4rem 0;
  text-align:left;
  font-family:var(--vb-font-display);
  font-size:clamp(1.02rem,.95rem + .35vw,1.22rem);
  font-weight:600;letter-spacing:-.012em;line-height:1.35;
  color:var(--vb-text);
  transition:color .3s var(--vb-ease);
}
.vb-faq__q:hover{color:var(--vb-marigold)}
.vb-faq__q i{
  position:relative;
  width:26px;height:26px;flex:none;margin-top:.15rem;
  border:1px solid var(--vb-line-strong);
  border-radius:50%;
  transition:all .4s var(--vb-ease);
}
.vb-faq__q i::before,.vb-faq__q i::after{
  content:"";position:absolute;left:50%;top:50%;
  translate:-50% -50%;
  background:currentColor;border-radius:2px;
}
.vb-faq__q i::before{width:11px;height:1.5px}
.vb-faq__q i::after{width:1.5px;height:11px;transition:transform .4s var(--vb-ease-out)}
.vb-faq__q[aria-expanded="true"] i{border-color:var(--vb-saffron);color:var(--vb-saffron)}
.vb-faq__q[aria-expanded="true"] i::after{transform:scaleY(0)}
.vb-faq__a{
  overflow:hidden;
  max-height:0;
  transition:max-height .55s var(--vb-ease-out),opacity .4s var(--vb-ease);
  opacity:0;
}
.vb-faq__a.is-open{opacity:1}
.vb-faq__a p{
  padding-bottom:1.5rem;
  font-size:.95rem;line-height:1.75;
  color:var(--vb-text-muted);
  max-width:75ch;
}

/* ==========================================================================
   18. Light & sand surface corrections
   Components that hard-code a dark value and therefore need an explicit
   counterpart when they sit on .vb-section--light / .vb-section--sand.
   ========================================================================== */
.vb-section--sand .vb-prod,
.vb-section--sand .vb-item,
.vb-section--sand .vb-ccard,
.vb-section--sand .vb-formcard,
.vb-section--sand .vb-tablewrap,
.vb-section--sand .vb-member__body{background:#fff;border-color:var(--vb-light-line)}
.vb-section--sand .vb-count{background:#fff}
.vb-section--sand .vb-count:hover{background:var(--vb-sand-bg)}
.vb-section--light .vb-count:hover{background:var(--vb-light-bg)}

/* Counter and stat figures: marigold is too pale on a light ground. */
.vb-section--light .vb-count b,
.vb-section--sand .vb-count b,
.vb-section--light .vb-hero__stat b,
.vb-section--sand .vb-hero__stat b{color:var(--vb-saffron-600)}

/* Testimonials */
.vb-section--light .vb-quote,
.vb-section--sand .vb-quote{
  background:#fff;
  border-color:var(--vb-light-line);
  box-shadow:0 2px 16px -8px rgba(20,24,52,.22);
}
.vb-section--light .vb-quote__mark,
.vb-section--sand .vb-quote__mark{color:rgba(196,131,42,.42)}
.vb-section--light .vb-quotes__nav button:hover:not(:disabled),
.vb-section--sand .vb-quotes__nav button:hover:not(:disabled){color:#0A0D1F}

/* Timeline: the node core has to match whatever it sits on. */
.vb-section--light .vb-time__item::before{background:var(--vb-light-bg)}
.vb-section--sand .vb-time__item::before{background:var(--vb-sand-bg)}
.vb-section--light .vb-time__year,
.vb-section--sand .vb-time__year{color:var(--vb-saffron-600)}

/* Feature ladder hover wash */
.vb-section--light .vb-ladder__row:hover,
.vb-section--sand .vb-ladder__row:hover{background:rgba(196,131,42,.07)}
.vb-section--light .vb-ladder__row:hover .vb-ladder__title,
.vb-section--sand .vb-ladder__row:hover .vb-ladder__title{color:var(--vb-saffron-600)}
.vb-section--light .vb-ladder__idx,
.vb-section--sand .vb-ladder__idx{color:var(--vb-saffron-600)}

/* Products catalogue chrome */
.vb-section--light .vb-filter[aria-pressed="true"],
.vb-section--sand .vb-filter[aria-pressed="true"]{color:#0A0D1F}
.vb-section--light .vb-item__price b,
.vb-section--sand .vb-item__price b{color:var(--vb-saffron-600)}
.vb-section--light .vb-table td b,
.vb-section--sand .vb-table td b{color:var(--vb-saffron-600)}
.vb-section--light .vb-table thead th,
.vb-section--sand .vb-table thead th{
  color:var(--vb-saffron-600);
  background:rgba(196,131,42,.09);
}
.vb-section--light .vb-table tbody tr:hover,
.vb-section--sand .vb-table tbody tr:hover{background:rgba(196,131,42,.06)}

/* Legal document */
.vb-section--light .vb-legal__nav,
.vb-section--sand .vb-legal__nav{background:#fff;box-shadow:0 2px 14px -8px rgba(20,24,52,.2)}
.vb-section--light .vb-legal__nav h4,
.vb-section--sand .vb-legal__nav h4,
.vb-section--light .vb-doc h3,
.vb-section--sand .vb-doc h3{color:var(--vb-saffron-600)}
.vb-section--light .vb-legal__nav a:hover,
.vb-section--light .vb-legal__nav a.is-active,
.vb-section--sand .vb-legal__nav a:hover,
.vb-section--sand .vb-legal__nav a.is-active{
  color:var(--vb-saffron-600);
  background:rgba(196,131,42,.09);
  border-left-color:var(--vb-saffron-600);
}
.vb-section--light .vb-doc ul li::before,
.vb-section--sand .vb-doc ul li::before{background:var(--vb-saffron-600)}
.vb-section--light .vb-doc a[style],
.vb-section--sand .vb-doc a[style]{color:var(--vb-saffron-600) !important}

/* FAQ */
.vb-section--light .vb-faq__q:hover,
.vb-section--sand .vb-faq__q:hover{color:var(--vb-saffron-600)}
.vb-section--light .vb-faq__q[aria-expanded="true"] i,
.vb-section--sand .vb-faq__q[aria-expanded="true"] i{border-color:var(--vb-saffron-600);color:var(--vb-saffron-600)}

/* Contact map reads better without the dark-ground grading */
.vb-section--light .vb-map,
.vb-section--sand .vb-map{filter:none}

/* ==========================================================================
   19. Statutory documents (legal page)
   A4-portrait scans shown side by side. The card is locked to the A4 ratio
   and the scan is contained inside it, so a re-scan at a slightly different
   size still sits correctly rather than being cropped.
   ========================================================================== */
.vb-docs{
  display:grid;
  gap:clamp(1rem,.6rem + 1.4vw,1.9rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
}
.vb-doccard{
  display:flex;flex-direction:column;
  border:1px solid var(--vb-line);
  border-radius:var(--vb-r-lg);
  background:var(--vb-surface);
  overflow:hidden;
  transition:transform .5s var(--vb-ease-out),border-color .4s var(--vb-ease),box-shadow .5s var(--vb-ease);
}
.vb-doccard:hover{
  transform:translateY(-6px);
  border-color:var(--vb-gold-line);
  box-shadow:var(--vb-shadow-lg);
}
.vb-doccard__media{
  position:relative;display:block;
  aspect-ratio:1 / 1.414;
  background:#fff;
  overflow:hidden;
  border-bottom:1px solid var(--vb-line);
}
.vb-doccard__media img{
  width:100%;height:100%;
  object-fit:contain;object-position:center top;
  transition:transform .8s var(--vb-ease-out);
}
.vb-doccard:hover .vb-doccard__media img{transform:scale(1.02)}
/* Affordance that the scan opens full size */
.vb-doccard__zoom{
  position:absolute;inset:auto 0 0 0;
  display:flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.7rem 1rem;
  background:linear-gradient(180deg,rgba(7,10,28,0),rgba(7,10,28,.88));
  color:var(--vb-marigold);
  font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateY(6px);
  transition:opacity .35s var(--vb-ease),transform .35s var(--vb-ease-out);
}
.vb-doccard__zoom svg{width:13px;height:13px}
.vb-doccard:hover .vb-doccard__zoom,
.vb-doccard__media:focus-visible .vb-doccard__zoom{opacity:1;transform:none}

.vb-doccard__body{
  padding:1.25rem 1.35rem 1.5rem;
  display:flex;flex-direction:column;flex:1;
}
.vb-doccard__body h3{font-size:1.08rem;line-height:1.3}
.vb-doccard__id{
  display:inline-flex;align-items:baseline;gap:.55rem;
  margin-top:.85rem;
  padding:.42rem .8rem;
  border:1px solid var(--vb-gold-line);
  border-radius:var(--vb-r-xs);
  background:rgba(232,163,61,.07);
  align-self:flex-start;
  max-width:100%;
}
.vb-doccard__id dt{
  font-size:.62rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--vb-text-dim);
  flex:none;
}
.vb-doccard__id dd{
  margin:0;
  font-family:var(--vb-font-mono);
  font-size:.82rem;font-weight:500;
  color:var(--vb-marigold);
  word-break:break-all;
}
.vb-doccard__body p{
  margin-top:.9rem;
  font-size:.85rem;line-height:1.6;
  color:var(--vb-text-muted);
}
.vb-doccard__issued{
  margin-top:auto;padding-top:1rem;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--vb-text-dim);
}
.vb-section--light .vb-doccard,
.vb-section--sand .vb-doccard{background:#fff;border-color:var(--vb-light-line)}
.vb-section--light .vb-doccard__id dd,
.vb-section--sand .vb-doccard__id dd{color:var(--vb-saffron-600)}

/* Registered-particulars strip under the documents */
.vb-particulars{
  margin-top:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);
  padding-top:1.75rem;
  border-top:1px solid var(--vb-line);
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
}
.vb-particulars dt{
  font-size:.68rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--vb-text-dim);
  margin-bottom:.4rem;
}
.vb-particulars dd{
  margin:0;
  font-size:.92rem;line-height:1.6;
  color:var(--vb-text);
}
.vb-particulars dd.vb-mono{font-family:var(--vb-font-mono);font-size:.86rem;color:var(--vb-marigold)}
.vb-section--light .vb-particulars dd.vb-mono,
.vb-section--sand .vb-particulars dd.vb-mono{color:var(--vb-saffron-600)}