/* ==========================================================================
   VERDURA EPICURE — Core Stylesheet
   Every colour on this site comes from logo1.png and nothing else: the
   espresso-brown ground of the roundel, the bevelled gold ramp of its ring,
   letters and leaves, and the ivory paper they are printed on. There is no
   green, no blue, no off-brand red anywhere — see 01. TOKENS.
   --------------------------------------------------------------------------
   01. Tokens
   02. Base & typography
   03. Buttons / eyebrow / helpers
   04. Topbar + header + navigation
   05. Mobile off-canvas (slides left -> right)
   06. Hero
   07. Marquee
   08. Sections & shared blocks
   09. Category & product cards
   10. Stats / process / certifications
   11. Testimonials / logos / CTA
   12. Page banner + breadcrumb
   13. Gallery + lightbox
   14. Contact + forms
   15. Footer
   16. Utilities: reveal animations, scroll-top, preloader
   17. Responsive
   ========================================================================== */

/* ==========================================================================
   01. TOKENS
   ========================================================================== */
:root {
  /* BROWN — the espresso ground of the roundel. 800 and 700 are the two
     pixel values that make up almost the whole disc, so any surface painted
     with them lets the emblem sit seamlessly on top with no visible edge. */
  --vd-brown-900: #1f0b01;
  /* vignette at the rim — deepest pixel in the mark */
  --vd-brown-800: #2a0e01;
  /* logo ground — the single most common pixel in logo1.png */
  --vd-brown-700: #371505;
  /* lit centre of the disc */
  --vd-brown-600: #4a2610;
  /* raised brown, for borders and dividers on dark */

  /* BRONZE — where the gold ramp turns to shadow inside the bevel. */
  --vd-bronze: #8f5500;
  /* deepest bronze of the ring — exact */
  --vd-bronze-300: #d09020;
  /* the lit face of the bevel — exact */
  --vd-bronze-100: #eadcc2;
  /* bronze washed into the ivory, for tints and hairlines */

  /* IVORY — the paper the mark is printed on. */
  --vd-cream: #f8f1e3;
  --vd-cream-50: #fcfaf4;
  --vd-cream-100: #f6efe1;
  --vd-cream-200: #ede0c9;
  --vd-cream-new: #FBF7EE;

  /* GOLD — the bevel ramp of the ring, letters and leaves, walked from its
     shadow to its hottest specular. --vd-amber is the face of the metal.
     --vd-gold-ink is the one step dark enough to carry small text on ivory
     (5.5:1), so it is the only gold allowed for body-size type.
     300/200/100 are the highlight steps: they exist so that a new gradient or
     hover state is mixed from sampled values rather than from a colour picker.
     Reach for one of these before inventing a gold. */
  --vd-amber: #e0a028;
  /* core gold — exact */
  --vd-amber-600: #c08018;
  /* exact */
  --vd-gold-300: #f0b838;
  /* exact */
  --vd-gold-200: #f8d860;
  /* highlight — exact */
  --vd-gold-100: #f8e878;
  /* hottest specular — exact */
  --vd-gold-ink: #8a5e12;

  --vd-ink: #26160c;
  --vd-body: #5a4a3e;
  --vd-muted: #8a7a6c;
  --vd-faint: #b5a797;
  /* placeholder / disabled — brown desaturated into the ivory */
  --vd-line: rgba(74, 46, 22, .15);
  --vd-line-soft: rgba(74, 46, 22, .08);
  --vd-white: #ffffff;

  /* STATE — success and error are separated by lightness and by the icon the
     markup supplies, not by hue, because the palette has no green or red to
     spend. Success is the gold face; error is the bronze shadow, dark and
     heavy enough to read as a stop. */
  --vd-ok-bg: #f6efe1;
  --vd-ok-line: #c08018;
  --vd-ok-ink: #6b4a0e;
  --vd-err-bg: #f0e2d2;
  --vd-err-line: #8f5500;
  --vd-err-ink: #5a2a02;

  /* type */
  --vd-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --vd-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* shape + depth */
  --vd-r-sm: 10px;
  --vd-r: 18px;
  --vd-r-lg: 28px;
  --vd-arch: 50% 50% 14px 14px / 30% 30% 5px 5px;

  --vd-sh-sm: 0 2px 10px rgba(50, 25, 8, .06);
  --vd-sh: 0 14px 40px -18px rgba(50, 25, 8, .28);
  --vd-sh-lg: 0 34px 70px -30px rgba(50, 25, 8, .38);

  --vd-ease: cubic-bezier(.22, .68, .36, 1);
  /* tall enough to give the seal real diameter — see .vd-brand img */
  --vd-header-h: 110px;
}

/* ==========================================================================
   02. BASE & TYPOGRAPHY
   ========================================================================== */
* {
  -webkit-tap-highlight-color: transparent;
}

html {
  /* NOT scroll-behavior: smooth — it fights the scroll-linked pinned
     "How we work" stack (native eased scroll + our per-frame transform
     reads compound into visible jitter). In-page anchors already animate
     themselves via jQuery below, so nothing relies on this. */
  scroll-padding-top: 110px;
}

body {
  font-family: var(--vd-sans);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--vd-body);
  background: var(--vd-cream-new);
  -webkit-font-smoothing: antialiased;
  /* `clip` contains stray overflow WITHOUT creating a scroll container,
     so the sticky header keeps working. `hidden` is the older fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Bootstrap rows carry a negative margin of half the gutter. With the large
   g-4 / g-5 gutters used across this site that margin exceeds the container's
   default 12px padding and pushes past the viewport, so widen the padding to
   match. */
.container,
.container-fluid {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
.vd-display {
  font-family: var(--vd-display);
  color: var(--vd-ink);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.015em;
}

h1,
.h1 {
  font-size: clamp(2.3rem, 5.2vw, 4.15rem);
  font-weight: 600;
}

h2,
.h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

h3,
.h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
}

h4,
.h4 {
  font-size: clamp(1.06rem, 1.4vw, 1.2rem);
}

h5,
.h5 {
  font-size: 1.05rem;
}

p {
  margin-bottom: 1.05rem;
}

p:last-child {
  margin-bottom: 0;
}

/* --vd-brown-700 is now the logo's true ground, which sits too close to
   --vd-ink to mark a link apart from the sentence around it. Links take the
   dark end of the gold ramp instead — 5.5:1 on ivory — and darken to the
   brown on hover, so the state change is still a change in lightness. */
a {
  color: var(--vd-gold-ink);
  text-decoration: none;
  transition: color .28s var(--vd-ease);
}

a:hover {
  color: var(--vd-brown-700);
}

/* Keyboard focus: the UA default ring is the one colour on the page nobody
   picked. Replace it everywhere with the logo gold. */
:focus-visible {
  outline: 2px solid var(--vd-amber);
  outline-offset: 2px;
  border-radius: 2px;
}

img {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--vd-brown-800);
  color: var(--vd-cream);
}

.lead-lg {
  font-size: clamp(.98rem, 1.25vw, 1.08rem);
  line-height: 1.65;
  color: var(--vd-body);
}

/* scrollbar */
::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: var(--vd-cream-100);
}

::-webkit-scrollbar-thumb {
  background: var(--vd-brown-700);
  border-radius: 99px;
  border: 3px solid var(--vd-cream-100);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--vd-brown-900);
}

/* ==========================================================================
   03. BUTTONS / EYEBROW / HELPERS
   ========================================================================== */
.vd-btn {
  --btn-bg: var(--vd-brown-800);
  --btn-fg: var(--vd-cream);
  --btn-bd: var(--vd-brown-800);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .92rem 1.75rem;
  font-family: var(--vd-sans);
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  border-radius: 99px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .38s var(--vd-ease), border-color .38s var(--vd-ease), transform .38s var(--vd-ease), box-shadow .38s var(--vd-ease);
}

.vd-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--vd-amber);
  transform: translateY(101%);
  transition: transform .45s var(--vd-ease);
}

.vd-btn:hover {
  color: var(--vd-brown-900);
  border-color: var(--vd-amber);
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -12px rgba(233, 190, 85, .7);
}

.vd-btn:hover::before {
  transform: translateY(0);
}

.vd-btn i {
  font-size: 1rem;
  transition: transform .38s var(--vd-ease);
}

.vd-btn:hover i {
  transform: translateX(4px);
}

.vd-btn--amber {
  --btn-bg: var(--vd-amber);
  --btn-bd: var(--vd-amber);
  --btn-fg: var(--vd-brown-900);
}

.vd-btn--amber::before {
  background: var(--vd-brown-800);
}

.vd-btn--amber:hover {
  color: var(--vd-amber);
  border-color: var(--vd-brown-800);
  box-shadow: 0 14px 26px -12px rgba(74, 46, 22, .7);
}

.vd-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--vd-brown-800);
  --btn-bd: rgba(74, 38, 16, .35);
}

.vd-btn--light {
  --btn-bg: transparent;
  --btn-fg: var(--vd-cream);
  --btn-bd: rgba(253, 232, 206, .4);
}

.vd-btn--sm {
  padding: .68rem 1.3rem;
  font-size: .75rem;
}

/* text link with animated rule */
.vd-tlink {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--vd-brown-800);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--vd-amber), var(--vd-amber));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .42s var(--vd-ease), color .3s var(--vd-ease);
}

.vd-tlink:hover {
  color: var(--vd-gold-ink);
  background-size: 100% 1.5px;
}

.vd-tlink i {
  transition: transform .35s var(--vd-ease);
}

.vd-tlink:hover i {
  transform: translateX(5px);
}

/* eyebrow */
.vd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--vd-sans);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vd-brown-600);
  margin-bottom: 1.05rem;
}

.vd-eyebrow::before {
  content: '';
  width: 30px;
  height: 1.5px;
  background: var(--vd-amber);
}

.vd-eyebrow--center::after {
  content: '';
  width: 30px;
  height: 1.5px;
  background: var(--vd-amber);
}

.vd-eyebrow--light {
  color: var(--vd-bronze-300);
}

/* section head */
.vd-shead {
  max-width: 660px;
  margin-bottom: 2.2rem;
}

.vd-shead--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.vd-shead p {
  margin-top: .8rem;
  color: var(--vd-muted);
}

/* arch mask — the signature shape of the site */
.vd-arch {
  border-radius: var(--vd-arch);
  overflow: hidden;
}

.vd-arch-sm {
  /* border-radius: 40% 0% 12px 12px / 22% 22% 4px 4px; */
  border-radius: 20px;
  overflow: hidden;
}

/* fills the height of its stretched grid column instead of imposing its own
   aspect ratio — keeps a single tall shot level with a stacked pair beside it */
.vd-arch-sm.vd-fill {
  height: 100%;
}

.vd-arch-sm.vd-fill>img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

.vd-ratio-tall {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
}

.vd-ratio-wide {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

.vd-ratio-sq {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}

/* backgrounds */
.bg-cream {
  background: var(--vd-cream-100);
}

.bg-cream2 {
  background: var(--vd-cream);
}

.bg-forest {
  background: var(--vd-brown-800);
  color: rgba(253, 232, 206, .82);
}

.bg-forest h1,
.bg-forest h2,
.bg-forest h3,
.bg-forest h4,
.bg-forest h5 {
  color: var(--vd-cream);
}

.section {
  padding: clamp(2.8rem, 5vw, 4.6rem) 0;
}

.section-sm {
  padding: clamp(2.1rem, 3.4vw, 3.1rem) 0;
}

/* decorative grain dots */
.vd-grain {
  position: relative;
}

.vd-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: radial-gradient(rgba(74, 38, 16, .1) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* leaf divider */
.vd-leafrule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  color: var(--vd-amber);
}

.vd-leafrule::before,
.vd-leafrule::after {
  content: '';
  height: 1px;
  width: clamp(38px, 9vw, 96px);
  background: linear-gradient(90deg, transparent, var(--vd-line));
}

.vd-leafrule::after {
  background: linear-gradient(270deg, transparent, var(--vd-line));
}

/* ==========================================================================
   04. TOPBAR + HEADER + NAVIGATION
   ========================================================================== */
.vd-topbar {
  background: var(--vd-cream-200);
  color: var(--vd-ink);
  border-bottom: 1px solid var(--vd-line);
  font-size: .81rem;
  letter-spacing: .015em;
  padding: .55rem 0;
  position: relative;
  z-index: 1040;
}

.vd-topbar a {
  color: var(--vd-ink);
}

.vd-topbar a:hover {
  color: var(--vd-gold-ink);
}

.vd-topbar i {
  color: var(--vd-gold-ink);
}

.vd-topbar .vd-tb-item {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.vd-topbar .vd-tb-sep {
  width: 1px;
  height: 14px;
  background: var(--vd-line);
}

.vd-topbar .vd-social a {
  border-color: rgba(74, 46, 22, .25);
}

.vd-topbar .vd-social a:hover {
  background: var(--vd-brown-900);
  border-color: var(--vd-brown-900);
}

.vd-topbar .vd-social a:hover i {
  color: var(--vd-amber);
}

.vd-social a {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(253, 232, 206, .22);
  border-radius: 50%;
  font-size: .8rem;
  transition: all .32s var(--vd-ease);
}

.vd-social a:hover {
  background: var(--vd-amber);
  border-color: var(--vd-amber);
  transform: translateY(-2px);
}

.vd-social a:hover i {
  color: var(--vd-brown-900);
}


/* --- header --- */
.vd-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--vd-brown-900);
  border-bottom: 1px solid rgba(253, 232, 206, .12);
  transition: box-shadow .4s var(--vd-ease), background .4s var(--vd-ease), padding .4s var(--vd-ease);
}

.vd-header.is-stuck {
  box-shadow: 0 10px 30px -18px rgba(30, 20, 10, .55);
  background: var(--vd-brown-900);
  backdrop-filter: blur(10px);
}

/* logo-centred layout: two equal flexible tracks either side of the brand so
   it sits dead-centre regardless of how much the nav/actions weigh on the
   right — see .vd-nav-wrap--end, which carries vd-head-right inside itself
   rather than as a third grid track (a third auto track would pull the
   centre off true). */
.vd-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1.25rem;
  min-height: var(--vd-header-h);
  transition: min-height .4s var(--vd-ease);
}

.vd-nav-wrap {
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 0;
}

.vd-nav-wrap--start {
  justify-content: flex-start;
}

.vd-nav-wrap--end {
  justify-content: flex-end;
  gap: 1.15rem;
}

.vd-brand {
  justify-self: center;
}

.vd-header.is-stuck .vd-header-inner {
  min-height: 80px;
}

/* Brand lockup — logo1.png is a seal and stands on its own.
   Two things were working against it. It is a DARK disc on a near-identical
   dark header, so the disc edge vanished and only the gold ring floated; and
   everything the mark says lives inside that circle, so at 78px the inner
   "VERDURA / EPICURE" fell to a few pixels tall and turned to mush.
   Both are fixed by geometry rather than by adding text beside it: the seal is
   given most of the header's height so its interior survives the downscale,
   and a hairline of its own gold plus a soft drop separates the disc from the
   ground it sits on. */
.vd-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.vd-brand img {
  height: 80px;
  width: auto;
  display: block;
  flex: none;
  /* filter: 
    drop-shadow(0 0 1.5px rgba(232, 176, 56, .85)) drop-shadow(0 6px 16px rgba(0, 0, 0, .5));*/
  transition: height .4s var(--vd-ease);
}

.vd-header.is-stuck .vd-brand img {
  height: 58px;
}

/* optional tagline sitting beside the mark — unused by the templates, kept
   because the footer and off-canvas can opt into it */
.vd-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  padding-left: .85rem;
  border-left: 1px solid rgba(224, 160, 40, .3);
}

.vd-brand-name {
  font-family: var(--vd-display);
  font-size: 1.42rem;
  font-weight: 600;
  color: var(--vd-cream);
  letter-spacing: -.02em;
}

.vd-brand-sub {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--vd-amber);
  margin-top: 5px;
}

/* --- desktop nav --- */
/* the nav column stretches to the full header height so a dropdown anchored at
   `top: 100%` hangs off the header's bottom edge instead of overlapping it */
.vd-header-inner>nav {
  align-self: center;
}

.vd-nav {
  display: flex;
  align-items: center;
  gap: .15rem;
  height: 100%;
}

.vd-nav>li {
  position: relative;
  list-style: none;
  display: flex;
  align-items: center;
}

.vd-nav>li>a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .7rem .95rem;
  font-size: .77rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--vd-cream);
  border-radius: 99px;
  transition: color .3s var(--vd-ease), background .3s var(--vd-ease);
}

.vd-nav>li>a .bi-chevron-down {
  font-size: .62rem;
  transition: transform .32s var(--vd-ease);
}

.vd-nav>li>a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  background: var(--vd-amber);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width .38s var(--vd-ease);
}

.vd-nav>li:hover>a,
.vd-nav>li:focus-within>a,
.vd-nav>li>a.active {
  color: var(--vd-amber);
}

.vd-nav>li:hover>a::after,
.vd-nav>li:focus-within>a::after,
.vd-nav>li>a.active::after {
  width: 22px;
}

.vd-nav>li:hover>a .bi-chevron-down,
.vd-nav>li:focus-within>a .bi-chevron-down {
  transform: rotate(180deg);
}

/* mega dropdown */
.vd-mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  width: min(700px, calc(100vw - 2rem));
  background: var(--vd-white);
  border: 1px solid var(--vd-line);
  border-radius: var(--vd-r);
  box-shadow: var(--vd-sh-lg);
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .34s var(--vd-ease), transform .34s var(--vd-ease), visibility .34s;
  z-index: 60;
}

.vd-nav>li:hover .vd-mega,
.vd-nav>li:focus-within .vd-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* invisible bridge across the 12px gap — without it the pointer leaves the <li>
   on the way down to the panel and the dropdown closes under the cursor */
.vd-mega::after {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.vd-mega::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 13px;
  height: 13px;
  background: var(--vd-white);
  border-left: 1px solid var(--vd-line);
  border-top: 1px solid var(--vd-line);
  transform: translateX(-50%) rotate(45deg);
}

.vd-mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .3rem;
}

.vd-mega-link {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .62rem .75rem;
  border-radius: 12px;
  font-size: .89rem;
  font-weight: 600;
  color: var(--vd-ink);
  transition: background .28s var(--vd-ease), color .28s var(--vd-ease), transform .28s var(--vd-ease);
}

.vd-mega-link img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border-radius: 9px;
  flex-shrink: 0;
}

.vd-mega-link span small {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  color: var(--vd-muted);
  letter-spacing: .01em;
}

.vd-mega-link:hover {
  background: var(--vd-cream-100);
  color: var(--vd-brown-700);
  transform: translateX(4px);
}

.vd-mega-foot {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--vd-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.vd-mega-foot p {
  font-size: .82rem;
  color: var(--vd-muted);
  margin: 0;
}

/* header right */
.vd-head-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

/* burger */
.vd-burger {
  width: 46px;
  height: 46px;
  display: none;
  place-items: center;
  background: var(--vd-amber);
  border: 0;
  border-radius: 12px;
  padding: 0;
  color: var(--vd-brown-900);
  font-size: 1.6rem;
  line-height: 1;
  transition: background .3s var(--vd-ease), color .3s var(--vd-ease);
}

.vd-burger i {
  display: block;
  transition: transform .34s var(--vd-ease);
}

.vd-burger:hover {
  background: var(--vd-cream);
  color: var(--vd-brown-800);
}

.vd-burger:hover i {
  transform: scale(1.12);
}

/* ==========================================================================
   05. MOBILE OFF-CANVAS — slides in from LEFT to RIGHT
   ========================================================================== */
.vd-offcanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: min(340px, 86vw);
  height: 100%;
  height: 100dvh;
  /* dark brown to match the header it opens from */
  background: var(--vd-brown-900);
  color: rgba(253, 232, 206, .78);
  z-index: 1090;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform .55s var(--vd-ease);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* shadow lives only on the open state — as a fixed element it isn't clipped
   by the page's overflow-x, so left on at all times it bled a faint dark
   strip down the left edge of every page even while "closed" off-screen. */
.vd-offcanvas.is-open {
  box-shadow: 22px 0 60px -30px rgba(0, 0, 0, .8);
}

.vd-offcanvas.is-open {
  transform: translateX(0);
}

.vd-oc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(50, 25, 8, .62);
  backdrop-filter: blur(3px);
  z-index: 1080;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--vd-ease), visibility .5s;
}

.vd-oc-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.vd-oc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  border-bottom: 1px solid rgba(253, 232, 206, .12);
}

.vd-oc-head .vd-brand-name {
  color: var(--vd-cream);
  font-size: 1.2rem;
}

.vd-oc-head img {
  height: 64px;
}

.vd-oc-close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(253, 232, 206, .25);
  background: transparent;
  border-radius: 50%;
  color: var(--vd-cream);
  font-size: 1.05rem;
  flex-shrink: 0;
  transition: all .32s var(--vd-ease);
}

.vd-oc-close:hover {
  background: var(--vd-amber);
  border-color: var(--vd-amber);
  color: var(--vd-brown-900);
  transform: rotate(90deg);
}

.vd-oc-body {
  padding: 1.1rem 1.4rem 2rem;
  flex: 1;
}

.vd-oc-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vd-oc-nav>li {
  border-bottom: 1px solid rgba(253, 232, 206, .1);
}

.vd-oc-nav>li>a,
.vd-oc-nav>li>.vd-oc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: .6rem;
  padding: .92rem 0;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vd-cream);
  background: transparent;
  border: 0;
  text-align: left;
  transition: color .3s var(--vd-ease), padding-left .3s var(--vd-ease);
}

.vd-oc-nav>li>a:hover,
.vd-oc-nav>li>.vd-oc-toggle:hover,
.vd-oc-nav>li>a.active,
.vd-oc-nav>li>.vd-oc-toggle.active {
  color: var(--vd-amber);
  padding-left: 6px;
}

.vd-oc-toggle i {
  font-size: .72rem;
  transition: transform .34s var(--vd-ease);
}

.vd-oc-toggle.is-open i {
  transform: rotate(180deg);
}

.vd-oc-sub {
  list-style: none;
  margin: 0;
  padding: 0 0 .7rem;
  display: none;
}

.vd-oc-sub li a {
  display: block;
  padding: .48rem 0 .48rem 1.1rem;
  font-size: .88rem;
  font-weight: 600;
  color: rgba(253, 232, 206, .72);
  border-left: 1.5px solid rgba(253, 232, 206, .16);
  transition: all .3s var(--vd-ease);
}

.vd-oc-sub li a:hover,
.vd-oc-sub li a.active {
  color: var(--vd-amber);
  border-left-color: var(--vd-amber);
  padding-left: 1.4rem;
}

/* staggered entrance for the menu items */
.vd-offcanvas .vd-oc-stag {
  opacity: 0;
  transform: translateX(-22px);
}

.vd-offcanvas.is-open .vd-oc-stag {
  animation: ocIn .5s var(--vd-ease) forwards;
}

@keyframes ocIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.vd-oc-foot {
  padding: 1.4rem;
  border-top: 1px solid rgba(253, 232, 206, .12);
}

.vd-oc-foot .it {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: .85rem;
  font-size: .86rem;
}

.vd-oc-foot .it i {
  color: var(--vd-amber);
  margin-top: 4px;
}

.vd-oc-foot strong {
  color: var(--vd-cream);
}

.vd-oc-foot a {
  color: rgba(253, 232, 206, .78);
}

.vd-oc-foot a:hover {
  color: var(--vd-amber);
}

/* ==========================================================================
   06. HERO
   ========================================================================== */
.vd-hero {
  position: relative;
  background: var(--vd-cream-100);
  overflow: hidden;
  padding: clamp(2rem, 4.6vw, 4.2rem) 0 clamp(2.4rem, 4.2vw, 3.6rem);
}

.vd-hero::before {
  content: '';
  position: absolute;
  top: -22%;
  right: -14%;
  width: 58vw;
  height: 58vw;
  max-width: 820px;
  max-height: 820px;
  background: radial-gradient(circle at 40% 40%, rgba(175, 108, 16, .16), transparent 62%);
  border-radius: 50%;
  pointer-events: none;
}

.vd-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: var(--vd-white);
  border: 1px solid var(--vd-line);
  border-radius: 99px;
  padding: .42rem 1rem .42rem .45rem;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--vd-brown-800);
  box-shadow: var(--vd-sh-sm);
  margin-bottom: 1.1rem;
}

.vd-hero-eyebrow em {
  font-style: normal;
  background: var(--vd-brown-800);
  color: var(--vd-cream);
  border-radius: 99px;
  padding: .22rem .68rem;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.vd-hero h1 {
  font-size: clamp(2.05rem, 4.1vw, 3.3rem);
  line-height: 1.12;
  margin-bottom: 1rem;
}

.vd-hero .lead-lg {
  font-size: clamp(.98rem, 1.25vw, 1.06rem);
  line-height: 1.62;
  max-width: 34rem;
}

.vd-hero h1 .accent {
  font-style: italic;
  color: var(--vd-brown-700);
  position: relative;
  white-space: nowrap;
}

.vd-hero h1 .accent svg {
  position: absolute;
  left: 0;
  bottom: -.16em;
  width: 100%;
  height: .34em;
  overflow: visible;
}

.vd-hero h1 .accent svg path {
  stroke: var(--vd-amber);
  stroke-width: 7;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: drawUnderline 1.5s var(--vd-ease) .5s forwards;
}

@keyframes drawUnderline {
  to {
    stroke-dashoffset: 0;
  }
}

.vd-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}

.vd-hero-trust {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-top: 1.7rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--vd-line);
}

.vd-hero-trust .it strong {
  display: block;
  font-family: var(--vd-display);
  font-size: 1.7rem;
  color: var(--vd-brown-800);
  line-height: 1;
}

/* direct child only — the counter <span> lives inside <strong> and would
   otherwise inherit the small uppercase label styling */
.vd-hero-trust .it>span {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vd-muted);
}

/* hero collage */
.vd-hero-visual {
  position: relative;
  max-width: 500px;
  margin-left: auto;
  margin-right: 0;
}

.vd-hero-visual .shot-main {
  border-radius: var(--vd-arch);
  overflow: hidden;
  box-shadow: var(--vd-sh-lg);
  position: relative;
  z-index: 2;
}

.vd-hero-visual .shot-main img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}

.vd-hero-visual .shot-sub {
  position: absolute;
  right: -6%;
  bottom: 8%;
  width: 42%;
  border-radius: var(--vd-r);
  overflow: hidden;
  border: 6px solid var(--vd-cream-50);
  box-shadow: var(--vd-sh);
  z-index: 3;
}

.vd-hero-visual .shot-sub img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.vd-hero-badge {
  position: absolute;
  top: 7%;
  left: -8%;
  z-index: 4;
  background: var(--vd-white);
  border-radius: 14px;
  padding: .75rem .95rem;
  box-shadow: var(--vd-sh);
  display: flex;
  align-items: center;
  gap: .7rem;
  max-width: 220px;
}

.vd-hero-badge .ic {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--vd-cream);
  color: var(--vd-brown-700);
  font-size: 1.15rem;
  flex-shrink: 0;
}

.vd-hero-badge strong {
  display: block;
  font-size: .88rem;
  color: var(--vd-ink);
  line-height: 1.25;
}

.vd-hero-badge span {
  font-size: .73rem;
  color: var(--vd-muted);
}

/* rotating word */
.vd-rotator {
  display: inline-grid;
  vertical-align: bottom;
}

.vd-rotator>span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(.4em);
  transition: opacity .5s var(--vd-ease), transform .5s var(--vd-ease);
  color: var(--vd-amber);
  font-style: italic;
}

.vd-rotator>span.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* floating leaf accents */
.vd-float {
  position: absolute;
  color: var(--vd-bronze);
  opacity: .16;
  pointer-events: none;
  animation: floaty 7s ease-in-out infinite;
}

@keyframes floaty {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-18px) rotate(9deg);
  }
}

/* ==========================================================================
   07. MARQUEE
   ========================================================================== */
.vd-marquee {
  background: var(--vd-brown-900);
  padding: .8rem 0;
  overflow: hidden;
  position: relative;
}

.vd-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}

.vd-marquee:hover .vd-marquee-track {
  animation-play-state: paused;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.vd-marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0 1.6rem;
  font-family: var(--vd-display);
  font-size: clamp(.95rem, 1.3vw, 1.15rem);
  font-style: italic;
  color: var(--vd-cream);
  white-space: nowrap;
}

.vd-marquee-item i {
  color: var(--vd-amber);
  font-size: .68rem;
  font-style: normal;
}

/* ==========================================================================
   08. SECTIONS & SHARED BLOCKS
   ========================================================================== */
/* feature/value card */
.vd-vcard {
  background: var(--vd-white);
  border: 1px solid var(--vd-line-soft);
  border-radius: var(--vd-r);
  padding: 1.7rem 1.45rem;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: var(--vd-sh-sm);
  transition: transform .45s var(--vd-ease), box-shadow .45s var(--vd-ease), border-color .45s var(--vd-ease);
}

.vd-vcard::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--vd-brown-700), var(--vd-amber));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--vd-ease);
}

.vd-vcard:hover {
  transform: translateY(-8px);
  box-shadow: var(--vd-sh);
  border-color: transparent;
}

.vd-vcard:hover::after {
  transform: scaleX(1);
}

.vd-vcard .ic {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--vd-gold-200), var(--vd-amber) 55%, var(--vd-bronze));
  color: var(--vd-brown-900);
  box-shadow: 0 10px 20px -12px rgba(143, 85, 0, .55);
  font-size: 1.25rem;
  margin-bottom: .9rem;
  transition: background .42s var(--vd-ease), color .42s var(--vd-ease), transform .42s var(--vd-ease);
}

.vd-vcard:hover .ic {
  background: linear-gradient(145deg, var(--vd-brown-700), var(--vd-brown-900));
  color: var(--vd-gold-200);
  transform: rotate(-8deg) scale(1.06);
}

.vd-vcard h4 {
  margin-bottom: .45rem;
  padding-right: 2.2rem;
}

.vd-vcard p {
  font-size: .88rem;
  line-height: 1.6;
  color: var(--vd-muted);
  margin: 0;
}

.vd-vcard .num {
  position: absolute;
  right: 1.05rem;
  top: .35rem;
  font-family: var(--vd-display);
  font-size: 2.5rem;
  color: var(--vd-line-soft);
  line-height: 1;
  pointer-events: none;
}

/* checklist */
.vd-check {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vd-check li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: .78rem;
  font-size: .95rem;
}

.vd-check li::before {
  content: '\F26E';
  font-family: 'bootstrap-icons';
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--vd-bronze);
  font-size: 1.05rem;
}

.vd-check--light li {
  color: rgba(253, 232, 206, .8);
}

.vd-check--light li::before {
  color: var(--vd-amber);
}

/* image cluster used on about-style rows */
.vd-cluster {
  position: relative;
  max-width: 580px;
  margin-left: 20px;
  margin-right: 50px;
}

.vd-cluster .a {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--vd-sh);
}

.vd-cluster .a img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  width: 100%;
  height: 590px;
}

.vd-cluster .b {
  position: absolute;
  bottom: -7%;
  right: -7%;
  width: 45%;
  border-radius: var(--vd-r);
  overflow: hidden;
  border: 6px solid var(--vd-cream-50);
  box-shadow: var(--vd-sh);
}

.vd-cluster .b img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}

.vd-cluster .exp {
  position: absolute;
  left: -6%;
  bottom: 12%;
  background: var(--vd-brown-800);
  color: var(--vd-cream);
  border-radius: 16px;
  padding: .9rem 1.1rem;
  text-align: center;
  box-shadow: var(--vd-sh);
  z-index: 3;
}

.vd-cluster .exp strong {
  display: block;
  font-family: var(--vd-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--vd-cream);
}

.vd-cluster .exp span {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .85;
}

/* about split layout — framed photo one side, copy the other. Shared by the
   home page's About section and the about page's opening section, so the
   two read as the same house. The section carries a soft gold bloom in its
   top-left corner so the white ground is not dead flat behind the photo. */
.vdh-about {
  position: relative;
  overflow: hidden;
}

.vdh-about::before {
  content: '';
  position: absolute;
  top: -12%;
  left: -8%;
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  background: radial-gradient(circle, rgba(224, 160, 40, .13), transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.vdh-about .container {
  position: relative;
  z-index: 1;
}

/* framed photo — a 4:5 portrait sitting inside a gold hairline frame offset
   to the top-right, with the years badge pinned to its bottom-left corner */
.vdh-about-media {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  padding: 8px 28px 34px 8px;
}

/* the about page's opening section runs the photo a size up, so it holds
   its own beside the longer copy column */
.vdh-about-media--lg {
  max-width: 540px;
}

/* founding-year chip riding the top-right corner of the photo */
.vdh-about-est {
  position: absolute;
  top: 26px;
  right: 46px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: var(--vd-brown-800);
  color: var(--vd-gold-200);
  font-family: var(--vd-sans);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: var(--vd-sh);
}

.vdh-about-est i {
  color: var(--vd-amber);
  font-size: .8rem;
}

.vdh-about-frame {
  position: absolute;
  top: 0;
  right: 0;
  width: 88%;
  height: 88%;
  border: 2px solid var(--vd-amber);
  border-radius: var(--vd-r-lg);
  z-index: 0;
}

.vdh-about-photo {
  position: relative;
  z-index: 1;
  border-radius: var(--vd-r-lg);
  overflow: hidden;
  box-shadow: var(--vd-sh-lg);
}

.vdh-about-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--vd-ease);
}

.vdh-about-media:hover .vdh-about-photo img {
  transform: scale(1.04);
}

.vdh-about-badge {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .9rem;
  background: var(--vd-white);
  border-radius: var(--vd-r);
  padding: 1rem 1.3rem;
  box-shadow: var(--vd-sh);
}

.vdh-about-badge strong {
  font-family: var(--vd-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--vd-brown-800);
}

.vdh-about-badge strong span {
  color: var(--vd-amber-600);
}

.vdh-about-badge small {
  display: block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vd-muted);
  max-width: 9ch;
  line-height: 1.3;
}

.vdh-about-content .lead-lg {
  margin-top: 1rem;
}

/* three figures on a ruled band between the copy and the checklist */
.vdh-about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.6rem, 4vw, 2.6rem);
  margin: 1.9rem 0 2.1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--vd-line);
  border-bottom: 1px solid var(--vd-line);
}

.vdh-about-stats div {
  display: flex;
  flex-direction: column;
}

.vdh-about-stats strong {
  font-family: var(--vd-display);
  font-size: clamp(1.7rem, 2.6vw, 2.1rem);
  color: var(--vd-brown-800);
  line-height: 1;
}

.vdh-about-stats span {
  margin-top: .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--vd-muted);
}

/* four icon points in a 2x2 under the copy — each one a small gold seal
   with a title and a one-line qualifier, sitting on a ruled band so the
   block reads as a unit rather than four loose bullets */
.vdh-about-points {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--vd-line);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem 1.5rem;
}

.vdh-about-points li {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
}

.vdh-about-points .ic {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--vd-brown-800);
  font-size: 1.05rem;
  background: linear-gradient(145deg, var(--vd-gold-200), var(--vd-amber) 55%, var(--vd-bronze));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    0 0 0 3px var(--vd-white),
    0 0 0 4px rgba(224, 160, 40, .35);
  transition: transform .4s var(--vd-ease);
}

.vdh-about-points li:hover .ic {
  transform: rotate(-6deg) scale(1.06);
}

.vdh-about-points strong {
  display: block;
  font-family: var(--vd-display);
  font-size: .98rem;
  font-weight: 600;
  color: var(--vd-ink);
  line-height: 1.25;
}

.vdh-about-points small {
  display: block;
  margin-top: .2rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--vd-muted);
}

/* the about page's copy column is cut to the height of the photo beside it */
.vdh-about-content--fit p:not(.lead-lg) {
  margin-bottom: 0;
}

.vdh-about-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: 1.7rem;
}

/* quiet text link beside the button */
.vdh-about-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--vd-sans);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vd-brown-800);
  text-decoration: none;
  transition: color .3s var(--vd-ease), gap .3s var(--vd-ease);
}

.vdh-about-link i {
  color: var(--vd-amber);
}

.vdh-about-link:hover {
  color: var(--vd-gold-ink);
  gap: .7rem;
}

@media (max-width: 991.98px) {
  .vdh-about-media,
  .vdh-about-media--lg {
    max-width: 420px;
    margin-bottom: 3rem;
  }

  .vdh-about-est {
    top: 22px;
    right: 42px;
  }
}

@media (max-width: 575.98px) {
  .vdh-about-points {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .vdh-about-badge {
    padding: .8rem 1.05rem;
  }

  .vdh-about-badge strong {
    font-size: 1.7rem;
  }
}

/* accordion (Bootstrap override) */
.vd-acc .accordion-item {
  border: 1px solid var(--vd-line);
  border-radius: var(--vd-r-sm) !important;
  margin-bottom: .8rem;
  overflow: hidden;
  background: var(--vd-white);
}

.vd-acc .accordion-button {
  font-family: var(--vd-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--vd-ink);
  background: var(--vd-white);
  padding: 1.15rem 1.3rem;
  box-shadow: none !important;
}

.vd-acc .accordion-button:not(.collapsed) {
  background: var(--vd-cream-100);
  color: var(--vd-brown-800);
}

.vd-acc .accordion-button::after {
  content: '\F64D';
  font-family: 'bootstrap-icons';
  background: none;
  width: auto;
  height: auto;
  font-size: .95rem;
  color: var(--vd-gold-ink);
  transition: transform .34s var(--vd-ease);
}

.vd-acc .accordion-button:not(.collapsed)::after {
  transform: rotate(45deg);
}

.vd-acc .accordion-body {
  padding: 0 1.3rem 1.3rem;
  font-size: .94rem;
  color: var(--vd-muted);
}

/* ==========================================================================
   09. CATEGORY & PRODUCT CARDS
   ========================================================================== */
.vd-cat {
  position: relative;
  display: block;
  border-radius: var(--vd-arch);
  overflow: hidden;
  background: var(--vd-brown-900);
  height: 100%;
  isolation: isolate;
}

.vd-cat img {
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  transition: transform 1.1s var(--vd-ease), filter .6s var(--vd-ease);
}

.vd-cat::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, .93) 4%, rgba(50, 25, 8, .48) 42%, rgba(50, 25, 8, .06) 78%);
  transition: opacity .5s var(--vd-ease);
}

.vd-cat:hover img {
  transform: scale(1.09);
}

.vd-cat-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.3rem 1.25rem 1.2rem;
  color: var(--vd-cream);
}

.vd-cat-body .kicker {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vd-amber);
  display: block;
  margin-bottom: .4rem;
}

.vd-cat-body h3 {
  color: var(--vd-cream);
  font-size: 1.5rem;
  margin-bottom: .3rem;
}

.vd-cat-body p {
  font-size: .85rem;
  color: rgba(253, 232, 206, .74);
  margin: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .55s var(--vd-ease), opacity .45s var(--vd-ease), margin .5s var(--vd-ease);
}

.vd-cat:hover .vd-cat-body p {
  max-height: 90px;
  opacity: 1;
  margin-top: .5rem;
}

.vd-cat-arrow {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(253, 232, 206, .16);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(253, 232, 206, .3);
  color: var(--vd-cream);
  transform: translateY(-10px) scale(.85);
  opacity: 0;
  transition: all .45s var(--vd-ease);
}

.vd-cat:hover .vd-cat-arrow {
  opacity: 1;
  transform: translateY(0) scale(1);
  background: var(--vd-amber);
  border-color: var(--vd-amber);
  color: var(--vd-brown-900);
}

/* product tile (inside category pages) */
.vd-prod {
  background: var(--vd-white);
  border: 1px solid var(--vd-line-soft);
  border-radius: var(--vd-r);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .45s var(--vd-ease), box-shadow .45s var(--vd-ease);
}

.vd-prod:hover {
  transform: translateY(-7px);
  box-shadow: var(--vd-sh);
}

.vd-prod-media {
  position: relative;
  overflow: hidden;
}

.vd-prod-media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .9s var(--vd-ease);
}

.vd-prod:hover .vd-prod-media img {
  transform: scale(1.08);
}

.vd-prod-tag {
  position: absolute;
  top: .85rem;
  left: .85rem;
  background: var(--vd-cream-50);
  color: var(--vd-brown-800);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .32rem .7rem;
  border-radius: 99px;
}

.vd-prod-body {
  padding: 1.25rem 1.3rem 1.4rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.vd-prod-body h4 {
  font-size: 1.1rem;
  margin-bottom: .45rem;
}

.vd-prod-body p {
  font-size: .87rem;
  color: var(--vd-muted);
  margin-bottom: 1rem;
}

.vd-prod-meta {
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px dashed var(--vd-line);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.vd-prod-meta span {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--vd-brown-700);
  background: var(--vd-cream-100);
  border-radius: 99px;
  padding: .24rem .62rem;
}

/* spec table */
.vd-spec {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
}

.vd-spec th,
.vd-spec td {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--vd-line);
  text-align: left;
  vertical-align: top;
}

.vd-spec th {
  width: 38%;
  font-weight: 800;
  color: var(--vd-ink);
  background: var(--vd-cream-100);
}

.vd-spec tr:last-child th,
.vd-spec tr:last-child td {
  border-bottom: 0;
}

.vd-spec-wrap {
  border: 1px solid var(--vd-line);
  border-radius: var(--vd-r);
  overflow: hidden;
  background: var(--vd-white);
}

/* filter pills */
.vd-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: center;
  margin-bottom: 2.8rem;
}

.vd-filter {
  border: 1.5px solid var(--vd-line);
  background: var(--vd-white);
  color: var(--vd-ink);
  border-radius: 99px;
  padding: .58rem 1.25rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  transition: all .34s var(--vd-ease);
}

.vd-filter:hover {
  border-color: var(--vd-brown-700);
  color: var(--vd-brown-700);
}

.vd-filter.is-active {
  background: var(--vd-brown-800);
  border-color: var(--vd-brown-800);
  color: var(--vd-cream);
}

/* ==========================================================================
   10. STATS / PROCESS / CERTIFICATIONS
   ========================================================================== */
.vd-stats {
  position: relative;
}

.vd-stat {
  text-align: center;
  padding: .8rem .5rem;
  position: relative;
}

.vd-stat strong {
  display: block;
  font-family: var(--vd-display);
  font-size: clamp(2.2rem, 3.8vw, 3rem);
  line-height: 1;
  color: var(--vd-cream);
  margin-bottom: .4rem;
}

.vd-stat>span {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(253, 232, 206, .62);
}

.vd-stat .sfx {
  color: var(--vd-amber);
}

/* process timeline */
.vd-process {
  position: relative;
}

.vd-process::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 8%;
  right: 8%;
  height: 2px;
  background-image: linear-gradient(90deg, var(--vd-bronze-300) 55%, transparent 0);
  background-size: 14px 2px;
  background-repeat: repeat-x;
}

.vd-step {
  text-align: center;
  position: relative;
  padding: 0 .6rem;
}

.vd-step .ring {
  width: 64px;
  height: 64px;
  margin: 0 auto .9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--vd-gold-200), var(--vd-amber) 55%, var(--vd-bronze));
  border: 2px dashed transparent;
  color: var(--vd-brown-900);
  box-shadow: 0 12px 22px -14px rgba(143, 85, 0, .55);
  font-size: 1.35rem;
  position: relative;
  z-index: 2;
  transition: all .45s var(--vd-ease);
}

.vd-step:hover .ring {
  background: linear-gradient(145deg, var(--vd-brown-700), var(--vd-brown-900));
  border-color: var(--vd-brown-800);
  border-style: solid;
  color: var(--vd-gold-200);
  transform: translateY(-6px);
}

.vd-step .n {
  position: absolute;
  top: -3px;
  right: calc(50% - 39px);
  z-index: 3;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vd-brown-800);
  border: 2px solid var(--vd-cream-50);
  color: var(--vd-gold-200);
  font-size: .72rem;
  font-weight: 800;
}

.vd-step h4 {
  font-size: 1.02rem;
  margin-bottom: .35rem;
}

.vd-step p {
  font-size: .85rem;
  line-height: 1.58;
  color: var(--vd-muted);
  margin: 0;
}

/* boxed variant of vd-step — same ring/number/heading markup, but reads as
   an independent card instead of a connected timeline */
.vd-step--card {
  background: var(--vd-white);
  border: 1px solid var(--vd-line);
  border-radius: var(--vd-r-sm);
  padding: 2rem 1.4rem 1.7rem;
  box-shadow: var(--vd-sh-sm);
  height: 100%;
  transition: all .4s var(--vd-ease);
}

.vd-step--card:hover {
  border-color: var(--vd-bronze);
  transform: translateY(-4px);
}

/* certification chips */
.vd-cert {
  display: flex;
  align-items: center;
  gap: .95rem;
  background: var(--vd-white);
  border: 1px solid var(--vd-line);
  border-radius: var(--vd-r-sm);
  padding: .8rem .95rem;
  height: 100%;
  box-shadow: var(--vd-sh-sm);
  transition: all .4s var(--vd-ease);
}

.vd-cert:hover {
  border-color: var(--vd-bronze);
  box-shadow: var(--vd-sh-sm);
  transform: translateY(-4px);
}

.vd-cert .ic {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--vd-gold-200), var(--vd-amber) 55%, var(--vd-bronze));
  color: var(--vd-brown-900);
  box-shadow: 0 8px 16px -10px rgba(143, 85, 0, .55);
  font-size: 1.15rem;
  flex-shrink: 0;
  transition: background .4s var(--vd-ease), color .4s var(--vd-ease);
}

.vd-cert:hover .ic {
  background: linear-gradient(145deg, var(--vd-brown-700), var(--vd-brown-900));
  color: var(--vd-gold-200);
}

.vd-cert strong {
  display: block;
  font-size: .93rem;
  color: var(--vd-ink);
  line-height: 1.3;
}

.vd-cert span {
  font-size: .76rem;
  color: var(--vd-muted);
}

/* team roster — flex instead of a bootstrap row, so an odd headcount centers
   its last, incomplete row instead of stretching one card full-width */
.vdh-team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
}

.vdh-team-grid .vd-person {
  flex: 1 1 190px;
  max-width: 224px;
  width: 100%;
}

.vd-person {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.05rem;
  /* the wash gives the card a top light and keeps it from reading as a plain
     white rectangle on the cream band */
  background: linear-gradient(180deg, var(--vd-white) 55%, var(--vd-cream-50));
  border: 1px solid var(--vd-line-soft);
  border-radius: var(--vd-r);
  padding: 2.35rem 1rem 1.7rem;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--vd-sh-sm);
  transition: transform .45s var(--vd-ease), box-shadow .45s var(--vd-ease), border-color .45s var(--vd-ease);
}

/* faint numeral kicker, top-left — echoes the "01 — Whole & Ground" labels
   on the category cards so the roster reads as part of the same system */
.vd-person-num {
  position: absolute;
  top: 1.15rem;
  left: 1.25rem;
  font-family: var(--vd-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--vd-faint);
  transition: color .4s var(--vd-ease);
}

.vd-person:hover .vd-person-num {
  color: var(--vd-gold-ink);
}

/* gold halo the seal is struck onto */
.vd-person::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -70px;
  z-index: -1;
  width: 200px;
  height: 200px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 160, 40, .17), rgba(224, 160, 40, 0) 66%);
  transition: opacity .45s var(--vd-ease);
  opacity: .75;
}

.vd-person::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--vd-amber), var(--vd-gold-200));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--vd-ease);
}

.vd-person:hover {
  transform: translateY(-8px);
  box-shadow: var(--vd-sh);
  border-color: transparent;
}

.vd-person:hover::before {
  opacity: 1;
}

.vd-person:hover::after {
  transform: scaleX(1);
}

/* The person glyph struck into the gold bevel — the ramp is the one already
   used on the ring. The stacked rings are what turn a flat disc into a struck
   seal: white keyline, then a gold hairline standing off it. The initials ride
   on a chip at the rim, so the five faces still read apart at a glance. */
.vd-person .mono {
  position: relative;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--vd-brown-800);
  background: linear-gradient(145deg, var(--vd-gold-200), var(--vd-amber) 55%, var(--vd-bronze));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 0 0 3px rgba(255, 255, 255, .3),
    0 0 0 5px var(--vd-white),
    0 0 0 6px rgba(224, 160, 40, .4),
    0 12px 22px -12px rgba(143, 85, 0, .95);
  transition: transform .42s var(--vd-ease), box-shadow .42s var(--vd-ease);
}

.vd-person .mono i {
  /* optical centring: the glyph's shoulders sit high in its own box */
  transform: translateY(1px);
}

/* slow orbit ring around the seal — idle motion that reads as a coin edge,
   not a spinner. Speeds up on hover instead of just stopping/starting so the
   card feels responsive rather than merely decorated. */
.vd-person .mono::before {
  content: '';
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  border: 1px dashed rgba(224, 160, 40, .4);
  animation: vdSealOrbit 26s linear infinite;
}

.vd-person:hover .mono::before {
  border-color: rgba(143, 85, 0, .55);
  animation-duration: 7s;
}

@keyframes vdSealOrbit {
  to { transform: rotate(360deg); }
}

.new-color {
  background-color: #f6efe1;
}

.vd-person .mono em {
  display: none;
  position: absolute;
  right: -7px;
  bottom: -3px;
  padding: .16rem .38rem;
  border-radius: 999px;
  border: 2px solid var(--vd-white);
  background: var(--vd-brown-800);
  color: var(--vd-gold-200);
  font-family: var(--vd-sans);
  font-size: .56rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.25;
}

.vd-person:hover .mono {
  transform: rotate(-6deg) scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 0 0 3px rgba(255, 255, 255, .3),
    0 0 0 5px var(--vd-white),
    0 0 0 7px var(--vd-amber),
    0 16px 26px -12px rgba(143, 85, 0, 1);
}

.vd-person strong {
  font-family: var(--vd-display);
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--vd-ink);
  line-height: 1.3;
}

/* short rule under the name — gives the card a base and something to animate */
.vd-person strong::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  margin: .75rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--vd-amber), var(--vd-gold-200));
  opacity: .5;
  transition: width .45s var(--vd-ease), opacity .45s var(--vd-ease);
}

.vd-person:hover strong::after {
  width: 44px;
  opacity: 1;
}

/* lead row — the two people whose line a buyer actually dials. Sits above
   the roster as its own band: wider cards, a real photograph struck into the
   same white keyline and gold hairline as the seal, and the number printed
   under the name so it can be tapped straight from a phone. */
.vdh-team-lead {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem;
  margin-bottom: 1.4rem;
}

.vdh-team-lead .vd-person {
  flex: 1 1 380px;
  max-width: 480px;
  width: 100%;
}

/* team page — all five cards in one grid so every row is cut to the same
   height (equal 1fr row tracks) and the same width. Rows of two (2-2-1):
   four columns with each card spanning two, and the odd fifth card pushed
   to the middle two tracks so it sits centred beneath the pair above it. */
.vdh-team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 1.4rem;
}

.vdh-team .vd-person {
  grid-column: span 2;
}

.vdh-team .vd-person:nth-child(5) {
  grid-column: 2 / span 2;
}

@media (max-width: 991.98px) {
  .vdh-team {
    grid-template-columns: repeat(2, 1fr);
  }

  .vdh-team .vd-person,
  .vdh-team .vd-person:nth-child(5) {
    grid-column: auto;
  }
}

@media (max-width: 575.98px) {
  .vdh-team {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* business-card layout: photograph on the left, the details stacked beside
   it. The gold rule along the top is always struck on these two, so the row
   reads as the senior desk even before the cursor gets there. */
.vd-person--lead {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 1.5rem;
  padding: 2rem 1.9rem 2rem 1.75rem;
  background: linear-gradient(160deg, var(--vd-white) 60%, var(--vd-cream-50));
}

.vd-person--lead::after {
  transform: scaleX(1);
}

.vd-person--lead::before {
  left: 88px;
  top: -60px;
}

.vd-person--lead .vd-person-num {
  top: 1rem;
  left: 1.15rem;
}

/* "direct line" tag, top-right — the card's reason for sitting above the roster */
.vd-person-tag {
  position: absolute;
  top: .95rem;
  right: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(224, 160, 40, .12);
  color: var(--vd-gold-ink);
  font-family: var(--vd-sans);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
}

.vd-person-tag i {
  font-size: .7rem;
  color: var(--vd-amber);
}

.vd-person--lead .body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  flex: 1 1 auto;
}

.vd-person--lead strong {
  font-size: 1.28rem;
  letter-spacing: -.01em;
}

.vd-person--lead strong::after {
  margin-left: 0;
  margin-top: .55rem;
}

.vd-person--lead:hover strong::after {
  width: 44px;
}

/* the desk they answer from */
.vd-person-desk {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .7rem;
  font-family: var(--vd-sans);
  font-size: .8rem;
  font-weight: 500;
  color: var(--vd-muted);
}

.vd-person-desk i {
  color: var(--vd-amber);
  font-size: .85em;
}

.vd-person-lines {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.05rem;
}

.vd-person--lead .photo {
  position: relative;
  flex: 0 0 auto;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--vd-gold-200), var(--vd-amber) 55%, var(--vd-bronze));
  box-shadow:
    0 0 0 5px var(--vd-white),
    0 0 0 6px rgba(224, 160, 40, .4),
    0 12px 22px -12px rgba(143, 85, 0, .95);
  transition: transform .42s var(--vd-ease), box-shadow .42s var(--vd-ease);
}

.vd-person--lead .photo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  /* faces sit in the upper third of a head-and-shoulders portrait */
  object-position: 50% 22%;
}

/* same slow coin-edge orbit the seal carries */
.vd-person--lead .photo::before {
  content: '';
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  border: 1px dashed rgba(224, 160, 40, .4);
  animation: vdSealOrbit 26s linear infinite;
}

.vd-person--lead:hover .photo::before {
  border-color: rgba(143, 85, 0, .55);
  animation-duration: 7s;
}

.vd-person--lead:hover .photo {
  transform: scale(1.05);
  box-shadow:
    0 0 0 5px var(--vd-white),
    0 0 0 7px var(--vd-amber),
    0 16px 26px -12px rgba(143, 85, 0, 1);
}

/* a lead card without a photograph carries the initials seal in the same
   slot, struck at the same diameter so the row stays level */
.vd-person--lead .mono {
  flex: 0 0 auto;
  width: 138px;
  height: 138px;
  font-size: 3.4rem;
}

.vd-person--lead .mono::before {
  inset: -11px;
}

/* roster row — the same business-card grammar at a smaller cut: initials
   struck into the seal instead of a stock glyph, name and desk beside it.
   Three across at this width lines up under the two lead cards. */
.vdh-team-grid .vd-person--compact {
  flex: 1 1 250px;
  max-width: 316px;
}

.vd-person--compact {
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 1.05rem;
  padding: 1.35rem 1.3rem 1.35rem 1.25rem;
  background: linear-gradient(160deg, var(--vd-white) 60%, var(--vd-cream-50));
}

.vd-person--compact::before {
  left: 56px;
  top: -96px;
  width: 180px;
  height: 180px;
}

.vd-person--compact .vd-person-num {
  top: .85rem;
  left: auto;
  right: 1.05rem;
}

.vd-person--compact .mono {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
}

.vd-person--compact .mono::before {
  inset: -8px;
}

.vd-person--compact .mono {
  font-size: 1.55rem;
}

/* a compact card can carry a real photo in the same slot the initials seal
   uses — same size, gold ring and orbit as the lead cards, scaled down */
.vd-person--compact .photo {
  position: relative;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--vd-gold-200), var(--vd-amber) 55%, var(--vd-bronze));
  box-shadow:
    0 0 0 3px var(--vd-white),
    0 0 0 4px rgba(224, 160, 40, .4),
    0 10px 18px -10px rgba(143, 85, 0, .95);
  transition: transform .42s var(--vd-ease), box-shadow .42s var(--vd-ease);
}

.vd-person--compact .photo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 22%;
}

.vd-person--compact .photo::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px dashed rgba(224, 160, 40, .4);
  animation: vdSealOrbit 26s linear infinite;
}

.vd-person--compact:hover .photo::before {
  border-color: rgba(143, 85, 0, .55);
  animation-duration: 7s;
}

.vd-person--compact:hover .photo {
  transform: scale(1.05);
}

.vd-person--compact .body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.vd-person--compact strong {
  font-size: 1.05rem;
}

.vd-person--compact strong::after {
  margin-left: 0;
  margin-top: .45rem;
  width: 20px;
}

.vd-person--compact:hover strong::after {
  width: 36px;
}

.vd-person--compact .vd-person-desk {
  margin-top: .55rem;
  font-size: .76rem;
}

/* the number itself is the call button — struck in the gold the seal uses,
   so it is the brightest thing on the card after the face */
.vd-person-tel {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--vd-gold-200), var(--vd-amber) 60%, #c98a1a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 18px -10px rgba(143, 85, 0, .9);
  font-family: var(--vd-sans);
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--vd-brown-800);
  text-decoration: none;
  transition: transform .35s var(--vd-ease), box-shadow .35s var(--vd-ease), background .35s var(--vd-ease), color .35s var(--vd-ease);
}

.vd-person-tel i {
  font-size: .85em;
}

.vd-person-tel:hover,
.vd-person-tel:focus-visible {
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 22px -10px rgba(143, 85, 0, 1);
  color: var(--vd-brown-800);
}

/* whatsapp sits beside the number as the quieter of the two — outlined,
   with the channel's own green so it reads at a glance */
.vd-person-tel--wa {
  background: var(--vd-white);
  border-color: rgba(37, 211, 102, .55);
  box-shadow: none;
  color: #128c4b;
}

.vd-person-tel--wa i {
  font-size: 1em;
  color: #25d366;
}

.vd-person-tel--wa:hover,
.vd-person-tel--wa:focus-visible {
  background: #25d366;
  border-color: #25d366;
  box-shadow: 0 12px 22px -10px rgba(18, 140, 75, .8);
  color: var(--vd-white);
}

.vd-person-tel--wa:hover i,
.vd-person-tel--wa:focus-visible i {
  color: var(--vd-white);
}

/* sister-company panel — the CTA band's treatment: espresso ground with the
   gold bloom thrown in from the top right, plus the gold rule down the leading
   edge that marks it as the sister house rather than a call to action. */
.vd-sister {
  position: relative;
  background:
    radial-gradient(circle at 88% -34%, rgba(175, 108, 16, .36), transparent 62%),
    var(--vd-brown-800);
  border: 1px solid rgba(253, 232, 206, .1);
  border-radius: var(--vd-r-lg);
  padding: clamp(1.7rem, 3vw, 2.6rem);
  overflow: hidden;
  color: rgba(253, 232, 206, .8);
}

.vd-sister::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--vd-gold-200), var(--vd-amber) 45%, var(--vd-bronze));
}

.vd-sister h2 {
  margin-bottom: 0;
  color: var(--vd-cream);
}

/* the fact chips have to invert with the panel — .vd-cert is built for ivory */
.vd-sister .vd-cert {
  background: rgba(253, 232, 206, .06);
  border-color: rgba(253, 232, 206, .16);
}

.vd-sister .vd-cert:hover {
  border-color: var(--vd-amber);
  box-shadow: none;
}

.vd-sister .vd-cert .ic {
  background: rgba(253, 232, 206, .1);
  color: var(--vd-amber);
}

.vd-sister .vd-cert strong {
  color: var(--vd-cream);
}

.vd-sister .vd-cert span {
  color: rgba(253, 232, 206, .58);
}

/* approval seal — carries the official FSSAI mark when assets/img/fssai-logo.png
   is present. company-profile.php falls back to the struck badge below when it
   is not, so the panel never renders a broken image while the file is pending. */
.vd-seal {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.15rem;
  background: var(--vd-white);
  border: 1px solid var(--vd-line);
  border-radius: var(--vd-r-lg);
  padding: clamp(1.9rem, 3vw, 2.6rem) clamp(1.3rem, 2.4vw, 2rem);
  box-shadow: var(--vd-sh);
  overflow: hidden;
}

.vd-seal::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -46%;
  width: 340px;
  height: 340px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 160, 40, .18), transparent 68%);
  pointer-events: none;
}

/* The FSSAI wordmark is a landscape mark (roughly 2:1), so the plate is a
   rounded card rather than a roundel — a circle would waste most of its area
   and shrink the mark. White ground, because the mark is only ever reproduced
   on white and its artwork is transparent. */
.vd-seal__mark {
  position: relative;
  width: 100%;
  max-width: 268px;
  display: grid;
  place-items: center;
  padding: 1.5rem 1.6rem;
  border-radius: var(--vd-r);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--vd-line), 0 14px 30px -20px rgba(50, 25, 8, .55);
}

.vd-seal__mark img {
  width: 100%;
  height: auto;
  max-width: 200px;
  object-fit: contain;
}

/* the stand-in badge keeps its roundel when no file is present */
.vd-seal__mark:has(.vd-seal__badge) {
  width: 156px;
  height: 156px;
  max-width: none;
  padding: 1.1rem;
  border-radius: 50%;
  background: var(--vd-cream-50);
}

/* stand-in mark: struck in the brown-and-gold of the roundel so it reads as a
   seal rather than as a missing asset. Replaced the moment the real file lands. */
.vd-seal__badge {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .2rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--vd-brown-700), var(--vd-brown-900));
  box-shadow: inset 0 0 0 3px var(--vd-amber), inset 0 0 0 7px var(--vd-brown-800);
}

.vd-seal__badge b {
  font-family: var(--vd-display);
  font-size: 1.55rem;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1;
  color: var(--vd-gold-200);
}

.vd-seal__badge i {
  font-style: normal;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(253, 232, 206, .72);
}

.vd-seal h3 {
  position: relative;
  margin-bottom: 0;
}

.vd-seal p {
  position: relative;
  font-size: .9rem;
  color: var(--vd-muted);
  margin: 0;
}

.vd-seal__tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  background: var(--vd-ok-bg);
  border: 1px solid var(--vd-ok-line);
  color: var(--vd-ok-ink);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ==========================================================================
   11. TESTIMONIALS / CTA
   ========================================================================== */
.vd-quote {
  background: var(--vd-white);
  border: 1px solid var(--vd-line-soft);
  border-radius: var(--vd-r);
  padding: 2.2rem 1.9rem 1.9rem;
  height: 100%;
  position: relative;
  transition: transform .45s var(--vd-ease), box-shadow .45s var(--vd-ease);
}

.vd-quote:hover {
  transform: translateY(-6px);
  box-shadow: var(--vd-sh);
}

.vd-quote .mark {
  font-family: var(--vd-display);
  font-size: 4.2rem;
  line-height: .6;
  color: var(--vd-bronze-100);
  display: block;
  margin-bottom: .6rem;
}

.vd-quote p {
  font-size: .96rem;
  color: var(--vd-body);
  font-style: italic;
  margin-bottom: 1.5rem;
}

.vd-quote-by {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--vd-line);
}

.vd-quote-by .av {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--vd-brown-800);
  color: var(--vd-cream);
  display: grid;
  place-items: center;
  font-family: var(--vd-display);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.vd-quote-by strong {
  display: block;
  font-size: .92rem;
  color: var(--vd-ink);
}

.vd-quote-by span {
  font-size: .78rem;
  color: var(--vd-muted);
}

.vd-stars {
  color: var(--vd-amber-600);
  font-size: .84rem;
  letter-spacing: .1em;
  margin-bottom: .9rem;
}

/* CTA band */
.vd-cta {
  position: relative;
  background: var(--vd-brown-800);
  border-radius: var(--vd-r-lg);
  padding: clamp(1.9rem, 3.4vw, 2.8rem);
  overflow: hidden;
  color: rgba(253, 232, 206, .8);
}

.vd-cta::before {
  content: '';
  position: absolute;
  right: -6%;
  top: -60%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(175, 108, 16, .34), transparent 66%);
}

.vd-cta h2 {
  color: var(--vd-cream);
}

/* region list */
.vd-region {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .95rem 0;
  border-bottom: 1px dashed rgba(253, 232, 206, .16);
  transition: padding-left .35s var(--vd-ease);
}

.vd-region:hover {
  padding-left: 8px;
}

.vd-region i {
  color: var(--vd-amber);
}

.vd-region strong {
  color: var(--vd-cream);
  font-size: .96rem;
  font-weight: 700;
}

.vd-region span {
  font-size: .82rem;
  color: rgba(253, 232, 206, .58);
  margin-left: auto;
  text-align: right;
}

/* ==========================================================================
   12. PAGE BANNER + BREADCRUMB
   ========================================================================== */
.vd-pagehead {
  position: relative;
  background: var(--vd-brown-800);
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
  text-align: center;
}

.vd-pagehead .bgimg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: .2;
  filter: saturate(.8);
}

.vd-pagehead::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(50, 25, 8, .82), rgba(50, 25, 8, .94));
}

.vd-pagehead .inner {
  position: relative;
  z-index: 3;
}

.vd-pagehead h1 {
  color: var(--vd-cream);
  margin-bottom: .9rem;
}

.vd-pagehead p {
  color: rgba(253, 232, 206, .72);
  max-width: 640px;
  margin: 0 auto;
}

.vd-crumb {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .55rem;
  margin-top: 1.5rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: rgba(253, 232, 206, .09);
  border: 1px solid rgba(253, 232, 206, .18);
  border-radius: 99px;
  padding: .5rem 1.2rem;
}

.vd-crumb a {
  color: rgba(253, 232, 206, .72);
}

.vd-crumb a:hover {
  color: var(--vd-amber);
}

.vd-crumb .sep {
  color: rgba(253, 232, 206, .4);
  font-size: .7rem;
}

.vd-crumb .cur {
  color: var(--vd-amber);
}

/* ==========================================================================
   13. GALLERY + LIGHTBOX
   ========================================================================== */
.vd-gal {
  position: relative;
  display: block;
  border-radius: var(--vd-r);
  overflow: hidden;
  background: var(--vd-brown-900);
  cursor: pointer;
}

.vd-gal img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .95s var(--vd-ease), opacity .5s var(--vd-ease);
}

.vd-gal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(50, 25, 8, .88), rgba(50, 25, 8, .05) 62%);
  opacity: 0;
  transition: opacity .45s var(--vd-ease);
}

.vd-gal:hover img {
  transform: scale(1.08);
}

.vd-gal:hover::after {
  opacity: 1;
}

.vd-gal-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.4rem 1.3rem;
  color: var(--vd-cream);
  transform: translateY(14px);
  opacity: 0;
  transition: all .45s var(--vd-ease);
}

.vd-gal:hover .vd-gal-cap {
  transform: translateY(0);
  opacity: 1;
}

.vd-gal-cap strong {
  display: block;
  font-family: var(--vd-display);
  font-size: 1.1rem;
}

.vd-gal-cap span {
  font-size: .78rem;
  color: rgba(253, 232, 206, .68);
}

.vd-gal-zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--vd-amber);
  color: var(--vd-brown-900);
  font-size: 1.2rem;
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0;
  transition: all .45s var(--vd-ease);
}

.vd-gal:hover .vd-gal-zoom {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* lightbox */
.vd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(30, 14, 4, .95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--vd-ease), visibility .4s;
}

.vd-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.vd-lightbox img {
  max-width: min(1100px, 94vw);
  max-height: 82vh;
  border-radius: var(--vd-r);
  box-shadow: var(--vd-sh-lg);
  transform: scale(.94);
  transition: transform .45s var(--vd-ease);
}

.vd-lightbox.is-open img {
  transform: scale(1);
}

.vd-lb-cap {
  position: absolute;
  bottom: 1.4rem;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(253, 232, 206, .82);
  font-size: .9rem;
}

.vd-lb-btn {
  position: absolute;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(253, 232, 206, .12);
  border: 1px solid rgba(253, 232, 206, .26);
  color: var(--vd-cream);
  font-size: 1.2rem;
  transition: all .3s var(--vd-ease);
}

.vd-lb-btn:hover {
  background: var(--vd-amber);
  border-color: var(--vd-amber);
  color: var(--vd-brown-900);
}

.vd-lb-close {
  top: 1.4rem;
  right: 1.4rem;
}

.vd-lb-prev {
  left: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
}

.vd-lb-next {
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
}

/* ==========================================================================
   14. CONTACT + FORMS
   ========================================================================== */
.vd-field {
  margin-bottom: 1.1rem;
}

.vd-label {
  display: block;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--vd-brown-800);
  margin-bottom: .5rem;
}

.vd-input,
.vd-select,
.vd-textarea {
  width: 100%;
  background: var(--vd-white);
  border: 1.5px solid var(--vd-line);
  border-radius: var(--vd-r-sm);
  padding: .88rem 1.05rem;
  font-family: var(--vd-sans);
  font-size: .94rem;
  color: var(--vd-ink);
  transition: border-color .3s var(--vd-ease), box-shadow .3s var(--vd-ease);
}

.vd-input:focus,
.vd-select:focus,
.vd-textarea:focus {
  outline: 0;
  border-color: var(--vd-bronze);
  box-shadow: 0 0 0 4px rgba(175, 108, 16, .13);
}

.vd-textarea {
  min-height: 140px;
  resize: vertical;
}

.vd-input::placeholder,
.vd-textarea::placeholder {
  color: var(--vd-faint);
}

.vd-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238a5e12'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 14px;
  padding-right: 2.6rem;
}

.vd-form-note {
  font-size: .8rem;
  color: var(--vd-muted);
}

.vd-formmsg {
  display: none;
  border-radius: var(--vd-r-sm);
  padding: .9rem 1.1rem;
  font-size: .9rem;
  margin-bottom: 1.1rem;
  border: 1px solid;
}

/* Success and error cannot be told apart by hue here — the logo has no green
   and no red — so they are separated three other ways: lightness (gold wash
   vs. the deeper bronze wash), border weight, and a leading glyph. The glyph
   is the part that survives for anyone who cannot distinguish the two washes,
   so it is generated here rather than left to the markup. */
.vd-formmsg.ok,
.vd-formmsg.err {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}

.vd-formmsg.ok::before,
.vd-formmsg.err::before {
  font-family: 'bootstrap-icons';
  font-size: 1rem;
  line-height: 1.45;
  flex: none;
}

.vd-formmsg.ok {
  background: var(--vd-ok-bg);
  border-color: var(--vd-ok-line);
  color: var(--vd-ok-ink);
}

.vd-formmsg.ok::before {
  content: '\F26A';
  /* check-circle-fill */
}

.vd-formmsg.err {
  background: var(--vd-err-bg);
  border-width: 2px;
  border-color: var(--vd-err-line);
  color: var(--vd-err-ink);
  font-weight: 600;
}

.vd-formmsg.err::before {
  content: '\F33A';
  /* exclamation-triangle-fill */
}

.is-invalid {
  border-color: var(--vd-err-line) !important;
  border-width: 2px !important;
}

.vd-cinfo {
  display: flex;
  gap: 1.1rem;
  padding: 1.4rem 0;
  border-bottom: 1px dashed var(--vd-line);
}

.vd-cinfo:last-child {
  border-bottom: 0;
}

.vd-cinfo .ic {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--vd-cream);
  color: var(--vd-brown-700);
  font-size: 1.35rem;
  flex-shrink: 0;
  transition: all .4s var(--vd-ease);
}

.vd-cinfo:hover .ic {
  background: var(--vd-brown-800);
  color: var(--vd-cream);
}

.vd-cinfo h5 {
  font-family: var(--vd-sans);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--vd-muted);
  margin-bottom: .3rem;
}

.vd-cinfo p,
.vd-cinfo a {
  font-size: .97rem;
  color: var(--vd-ink);
  margin: 0;
  font-weight: 600;
}

.vd-cinfo a:hover {
  color: var(--vd-amber);
}

.vd-map {
  border-radius: var(--vd-r);
  overflow: hidden;
  border: 1px solid var(--vd-line);
  filter: saturate(.85);
  line-height: 0;
}

.vd-map iframe {
  width: 100%;
  height: 440px;
  border: 0;
}

/* split contact card — coloured aside + form panel */
.vd-ccard {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--vd-white);
  border: 1px solid var(--vd-line);
  border-radius: var(--vd-r-lg);
  box-shadow: var(--vd-sh-lg);
  overflow: hidden;
  /* lift the card above the section's .vd-grain dot overlay */
  position: relative;
  z-index: 1;
}

.vd-ccard__aside {
  position: relative;
  overflow: hidden;
  padding: 3.4rem 2.8rem;
  background: linear-gradient(150deg, var(--vd-brown-700) 0%, var(--vd-brown-900) 100%);
  color: var(--vd-cream);
}

.vd-ccard__aside::before,
.vd-ccard__aside::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  pointer-events: none;
}

.vd-ccard__aside::before {
  width: 260px;
  height: 260px;
  top: -110px;
  right: -70px;
}

.vd-ccard__aside::after {
  width: 200px;
  height: 200px;
  bottom: -80px;
  right: -40px;
}

.vd-ccard__aside>* {
  position: relative;
  z-index: 1;
}

.vd-ccard__aside h3 {
  color: var(--vd-cream);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  margin-bottom: .8rem;
}

.vd-ccard__aside .lede {
  color: var(--vd-bronze-100);
  font-size: .95rem;
  margin-bottom: 2.4rem;
  max-width: 26rem;
}

.vd-ccard .vd-cinfo {
  align-items: flex-start;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 0;
}

.vd-ccard .vd-cinfo .ic {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.15rem;
  background: rgba(255, 255, 255, .12);
  color: var(--vd-cream);
}

.vd-ccard .vd-cinfo:hover .ic {
  background: var(--vd-amber);
  color: var(--vd-brown-900);
}

.vd-ccard .vd-cinfo h5 {
  color: var(--vd-bronze-300);
}

.vd-ccard .vd-cinfo p,
.vd-ccard .vd-cinfo a {
  color: var(--vd-white);
  line-height: 1.55;
}

.vd-ccard .vd-cinfo a:hover {
  color: var(--vd-amber);
}

.vd-ccard__form {
  padding: 3.4rem 2.8rem;
}

.vd-ccard__form h3 {
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
  margin-bottom: .5rem;
}

.vd-ccard__form .lede {
  color: var(--vd-muted);
  font-size: .92rem;
  margin-bottom: 2rem;
}

.vd-ccard__form .vd-label {
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: none;
  font-weight: 700;
  color: var(--vd-brown-700);
}

.vd-ccard__form .vd-input,
.vd-ccard__form .vd-textarea {
  background: var(--vd-cream-50);
}

.vd-ccard__form .vd-textarea {
  min-height: 148px;
}

@media (max-width: 1199.98px) {

  .vd-ccard__aside,
  .vd-ccard__form {
    padding: 2.8rem 2.2rem;
  }
}

@media (max-width: 991.98px) {
  .vd-ccard {
    grid-template-columns: 1fr;
  }

  .vd-ccard__aside,
  .vd-ccard__form {
    padding: 2.6rem 2rem;
  }

  .vd-ccard__aside .lede {
    margin-bottom: 1.6rem;
  }
}

@media (max-width: 575.98px) {

  .vd-ccard__aside,
  .vd-ccard__form {
    padding: 2rem 1.35rem;
  }
}

/* ==========================================================================
   15. FOOTER
   ========================================================================== */
.vd-footer {
  background: var(--vd-brown-900);
  color: rgba(253, 232, 206, .78);
  padding-top: clamp(2.4rem, 4vw, 3.4rem);
  position: relative;
  overflow: hidden;
}

.vd-footer::before {
  content: '';
  position: absolute;
  left: -8%;
  bottom: -30%;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 160, 40, .22), transparent 66%);
}

.vd-footer .inner {
  position: relative;
  z-index: 2;
}

.vd-footer h5 {
  font-family: var(--vd-sans);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vd-cream);
  margin-bottom: 1.1rem;
  position: relative;
  padding-bottom: .8rem;
}

.vd-footer h5::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  background: var(--vd-amber);
}

.vd-footer a {
  color: rgba(253, 232, 206, .78);
}

.vd-footer a:hover {
  color: var(--vd-amber);
}

.vd-footer .vd-social a {
  border-color: rgba(253, 232, 206, .22);
}

.vd-footer .vd-social a:hover {
  border-color: var(--vd-amber);
}

.vd-fnav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vd-fnav li {
  margin-bottom: .48rem;
}

.vd-fnav a {
  font-size: .91rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: all .3s var(--vd-ease);
}

.vd-fnav a::before {
  content: '\F285';
  font-family: 'bootstrap-icons';
  font-size: .68rem;
  color: var(--vd-amber);
  opacity: 0;
  margin-left: -14px;
  transition: all .3s var(--vd-ease);
}

.vd-fnav a:hover::before {
  opacity: 1;
  margin-left: 0;
}
.about-ro{
  margin-top: 35px;
}
.about-pad{
  padding-top: 72px ;
  padding-bottom:100px;
}

.vd-fbrand a {
  display: inline-block;
}

.vd-fbrand img {
  height: 80px;
  width: auto;
  display: block;
  margin-bottom: 1.1rem;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .4));
  /* filter:
    drop-shadow(0 0 1.5px rgba(232, 176, 56, .85)) drop-shadow(0 6px 16px rgba(0, 0, 0, .5)); */
}

.vd-fbrand .vd-brand-name {
  color: var(--vd-cream);
  font-size: 1.5rem;
}

.vd-fbrand .vd-brand-sub {
  color: var(--vd-amber);
}

.vd-fcontact li {
  display: flex;
  gap: .75rem;
  margin-bottom: .75rem;
  font-size: .91rem;
  line-height: 1.6;
}

.vd-fcontact i {
  color: var(--vd-amber);
  margin-top: 4px;
  flex-shrink: 0;
}

.vd-news {
  position: relative;
  margin-top: 1.2rem;
}

.vd-news input {
  width: 100%;
  background: rgba(253, 232, 206, .08);
  border: 1px solid rgba(253, 232, 206, .2);
  border-radius: 99px;
  padding: .82rem 3.4rem .82rem 1.2rem;
  color: var(--vd-cream);
  font-size: .9rem;
  font-family: var(--vd-sans);
}

.vd-news input::placeholder {
  color: rgba(253, 232, 206, .45);
}

.vd-news input:focus {
  outline: 0;
  border-color: var(--vd-amber);
}

.vd-news button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: var(--vd-amber);
  color: var(--vd-brown-900);
  display: grid;
  place-items: center;
  transition: all .3s var(--vd-ease);
}

.vd-news button:hover {
  background: var(--vd-cream);
  color: var(--vd-brown-800);
}

.vd-fbottom {
  margin-top: 2.1rem;
  border-top: 1px solid rgba(253, 232, 206, .14);
  padding: 1.1rem 0;
  font-size: .85rem;
  color: rgba(253, 232, 206, .55);
}

.vd-fbottom a {
  text-decoration: none;
}

/* ==========================================================================
   16. UTILITIES
   ========================================================================== */
/* Scroll reveal.
   Everything here is scoped to the `js` class that main.js stamps on <html>,
   so if scripting is blocked or fails the content is simply visible rather
   than stuck at opacity 0. Same reason the preloader is hidden without JS. */
html:not(.js) .vd-preload {
  display: none;
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .85s var(--vd-ease), transform .85s var(--vd-ease);
  will-change: opacity, transform;
}

.js [data-reveal="left"] {
  transform: translateX(-42px);
}

.js [data-reveal="right"] {
  transform: translateX(42px);
}

.js [data-reveal="zoom"] {
  transform: scale(.9);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* on narrow screens the horizontal variants would sit outside the viewport
   while they wait to be revealed - slide them vertically instead */
@media (max-width: 991.98px) {

  .js [data-reveal="left"],
  .js [data-reveal="right"] {
    transform: translateY(30px);
  }
}

/* scroll to top */
.vd-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1050;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--vd-brown-800);
  color: var(--vd-cream);
  font-size: 1.1rem;
  box-shadow: var(--vd-sh);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: all .42s var(--vd-ease);
}

.vd-top.is-vis {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.vd-top:hover {
  background: var(--vd-amber);
  color: var(--vd-brown-900);
  transform: translateY(-4px);
}

.vd-top svg {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  transform: rotate(-90deg);
}

.vd-top svg circle {
  fill: none;
  stroke: var(--vd-amber);
  stroke-width: 2.4;
}

/* floating whatsapp */
.vd-wa {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1050;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  /* WhatsApp brand green, so the channel reads instantly. */
  background: linear-gradient(145deg, #25d366, #1ebe5b 55%, #128c7e);
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 12px 26px -10px rgba(18, 140, 126, .8);
  transition: transform .35s var(--vd-ease), background .35s var(--vd-ease), box-shadow .35s var(--vd-ease);
}

.vd-wa:hover,
.vd-wa:focus-visible {
  background: linear-gradient(145deg, #2ee574, #25d366 55%, #17a589);
  color: #fff;
  box-shadow: 0 16px 30px -10px rgba(18, 140, 126, .9);
  transform: scale(1.1) rotate(6deg);
}

.vd-wa::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: waPulse 2.4s ease-out infinite;
}

@keyframes waPulse {
  0% {
    transform: scale(1);
    opacity: .85;
  }

  100% {
    transform: scale(1.7);
    opacity: 0;
  }
}

/* preloader */
.vd-preload {
  position: fixed;
  inset: 0;
  z-index: 1200;
  /* same brown as the header and hero, so the gold mark reads clearly and the
     loader fades straight into the page with no light flash */
  background: var(--vd-cream-200);
  display: grid;
  place-items: center;
  transition: opacity .6s var(--vd-ease), visibility .6s;
}

.vd-preload.is-done {
  opacity: 0;
  visibility: hidden;
}

.vd-preload .mark {
  font-family: var(--vd-display);
  font-size: 1.6rem;
  color: var(--vd-brown-800);
  letter-spacing: .04em;
  text-align: center;
  background-color: var(--vd-brown-800) !important;
  padding: 20px;
  border-radius: 10px;
}

.vd-preload .mark img {
  height: 70px;
  width: auto;
  display: block;
  margin: 0 auto;
  animation: vdPreloadPulse 1.8s ease-in-out infinite;
}

/* a slow breathe so the mark feels alive while the page loads */
@keyframes vdPreloadPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .82;
    transform: scale(.97);
  }
}

.vd-preload .bar {
  width: 168px;
  height: 3px;
  background: rgba(253, 232, 206, .14);
  border-radius: 99px;
  overflow: hidden;
  margin: 1rem auto 0;
}

.vd-preload .bar i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 99px;
  background: var(--vd-amber);
  animation: loadBar 1.05s var(--vd-ease) infinite;
}

@keyframes loadBar {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(320%);
  }
}

body.is-locked {
  overflow: hidden;
}

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */
@media (max-width: 1199.98px) {
  .vd-nav>li>a {
    padding: .7rem .68rem;
    font-size: .78rem;
  }

  .vd-hero-badge {
    left: -2%;
  }
}

@media (max-width: 991.98px) {
  :root {
    --vd-header-h: 86px;
  }

  /* below the breakpoint the split nav collapses into the burger, so drop
     back to a plain two-up bar: brand left, actions right */
  .vd-header-inner {
    display: flex;
    justify-content: space-between;
  }

  .vd-nav-wrap--start {
    display: none;
  }

  .vd-nav-wrap--end {
    justify-content: flex-end;
  }

  .vd-nav,
  .vd-desk-only {
    display: none !important;
  }

  /* header drops to 86px here, so the seal comes down with it — but it stays
     the tallest thing in the bar, since it is now the only thing naming the
     brand once the nav collapses into the burger */
  .vd-brand img,
  .vd-header.is-stuck .vd-brand img {
    height: 50px;
  }

  .vd-burger {
    display: grid;
  }

  .vd-hero-visual {
    margin-top: 2.4rem;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }

  .vd-hero-badge {
    left: 0;
    top: 4%;
  }

  .vd-cluster {
    max-width: 420px;
    margin: 0 auto 2rem;
  }

  .vd-process::before {
    display: none;
  }

  .vd-step {
    margin-bottom: 1.6rem;
  }

  .vd-shead {
    margin-bottom: 1.8rem;
  }

  .vd-map iframe {
    height: 320px;
  }

  /* touch devices never fire :hover, so the category blurb and the corner
     arrow would stay permanently hidden — reveal them by default instead */
  .vd-cat-body p {
    max-height: none;
    opacity: 1;
    margin-top: .45rem;
  }

  .vd-cat-arrow {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 767.98px) {
  html {
    scroll-padding-top: 90px;
  }

  body {
    font-size: .96rem;
  }

  .vd-topbar {
    font-size: .76rem;
  }

  .vd-brand img {
    height: 66px;
  }

  .vd-brand-name {
    font-size: 1.16rem;
  }

  .vd-brand-sub {
    font-size: .53rem;
    letter-spacing: .3em;
  }

  .vd-hero-visual .shot-sub {
    width: 46%;
    right: -2%;
    bottom: -5%;
  }

  .vd-hero-trust {
    gap: 1.1rem 1.6rem;
  }

  .vd-cta {
    border-radius: var(--vd-r);
  }

  .vd-quote {
    padding: 1.8rem 1.4rem 1.5rem;
  }

  .vd-spec th,
  .vd-spec td {
    padding: .7rem .8rem;
    font-size: .87rem;
  }

  .vd-lb-prev {
    left: .6rem;
  }

  .vd-lb-next {
    right: .6rem;
  }

  .vd-lb-close {
    top: .8rem;
    right: .8rem;
  }
}

@media (max-width: 575.98px) {
  :root {
    --vd-r-lg: 20px;
  }

  .vd-brand-text {
    display: none;
  }

  .vd-brand img {
    height: 62px;
  }

  .vd-fbrand img {
    height: 96px;
  }

  .vd-hero-eyebrow {
    font-size: .7rem;
    padding: .35rem .8rem .35rem .38rem;
  }

  .vd-hero-eyebrow em {
    font-size: .62rem;
    padding: .2rem .55rem;
    white-space: nowrap;
  }

  /* keep the three figures on one row instead of wrapping 2 + 1 */
  .vd-hero-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
  }

  .vd-hero-trust .it strong {
    font-size: 1.4rem;
  }

  .vd-hero-trust .it > span {
    font-size: .62rem;
    letter-spacing: .08em;
  }

  .vd-hero-actions .vd-btn {
    width: 100%;
    justify-content: center;
  }

  .vd-hero-badge {
    position: static;
    margin-bottom: 1.2rem;
    max-width: 100%;
  }

  .vd-hero-visual .shot-sub {
    position: static;
    width: 100%;
    margin-top: 1rem;
    border-width: 0;
  }

  .vd-hero-visual {
    margin-top: 1.8rem;
  }

  .vd-hero-visual .shot-main img {
    aspect-ratio: 1 / 1;
  }

  .vd-hero-visual .shot-sub img {
    aspect-ratio: 16 / 10;
  }

  .vd-cluster .exp {
    left: 0;
    bottom: -6%;
    padding: .85rem 1rem;
  }

  .vd-cluster .exp strong {
    font-size: 1.9rem;
  }

  .vd-cluster .b {
    width: 46%;
    bottom: -6%;
    right: -2%;
    border-width: 5px;
  }

  .vd-filters {
    gap: .4rem;
  }

  .vd-filter {
    padding: .48rem .95rem;
    font-size: .74rem;
  }

  .vd-marquee-item {
    font-size: .95rem;
    gap: 1rem;
    padding: 0 1rem;
  }

  .vd-wa {
    width: 46px;
    height: 46px;
    font-size: 1.3rem;
    left: 14px;
    bottom: 14px;
  }

  .vd-top {
    width: 42px;
    height: 42px;
    right: 14px;
    bottom: 14px;
  }

  .vd-vcard {
    padding: 1.7rem 1.35rem;
  }

  .vd-person {
    padding: 1.85rem .75rem 1.3rem;
    gap: .85rem;
  }

  .vd-person::before {
    top: -80px;
    width: 170px;
    height: 170px;
  }

  .vd-person-num {
    top: .85rem;
    left: .95rem;
    font-size: .64rem;
  }

  .vd-person .mono::before {
    inset: -8px;
  }

  .vd-person .mono {
    width: 58px;
    height: 58px;
    font-size: 1.4rem;
  }

  .vd-person .mono em {
    font-size: .5rem;
    right: -5px;
  }

  /* business card folds back to a centred column on a phone */
  .vd-person--lead {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.1rem;
    padding: 2.5rem 1rem 1.6rem;
  }

  .vd-person--lead::before {
    left: 50%;
    top: -80px;
  }

  .vd-person--lead .body {
    align-items: center;
  }

  .vd-person--lead strong {
    font-size: 1.1rem;
  }

  .vd-person--lead strong::after {
    margin-left: auto;
  }

  .vd-person-lines {
    justify-content: center;
  }

  .vd-person--lead .photo,
  .vd-person--lead .mono {
    width: 112px;
    height: 112px;
  }

  .vd-person--lead .mono {
    font-size: 2.8rem;
  }

  .vd-person--lead .photo::before,
  .vd-person--lead .mono::before {
    inset: -8px;
  }

  .vd-person-tel {
    font-size: .8rem;
    padding: .42rem .85rem;
  }

  .vd-person-tag {
    top: .8rem;
    right: .85rem;
    font-size: .52rem;
  }

  /* roster cards keep the row layout on a phone — they stack as a list */
  .vd-person--compact {
    padding: 1.1rem 1.1rem 1.1rem 1rem;
    gap: .9rem;
  }

  .vd-person--compact::before {
    left: 46px;
    top: -100px;
  }

  .vd-person--compact .mono {
    width: 54px;
    height: 54px;
    font-size: 1.35rem;
  }

  .vd-person--compact strong {
    font-size: .98rem;
  }

  .vd-person strong::after {
    margin-top: .6rem;
  }

  .vd-person strong {
    font-size: .94rem;
  }

  .vd-seal__mark {
    width: 128px;
    height: 128px;
    padding: .9rem;
  }

  .vd-seal__badge b {
    font-size: 1.25rem;
  }

  /* nine full-width portrait tiles make for a very long scroll — go landscape */
  .vd-cat img {
    aspect-ratio: 5 / 4;
    height: 366px;
  }
.vd-hero-eyebrow{
  display: none;
}
.shot-sub{
  display: none;
}
.vd-cluster .a img{
  height: 400px;
}
.new-rev{
  flex-direction: column-reverse;
}
  /* stops "YEARS IN THE TRADE" breaking onto a second line */
  .vd-stat > span {
    font-size: .66rem;
    letter-spacing: .09em;
  }

  .vd-map iframe {
    height: 300px;
  }

}

@media (max-width: 399.98px) {
  .vd-brand img {
    height: 56px;
  }

  /* keeps "EXPORT MARKETS" on a single line in the 3-up figure row */
  .vd-hero-trust {
    gap: .6rem;
  }
  .vd-hero{
      padding-bottom: 44px;;
      padding-top:44px;
  }

  .vd-hero-trust .it > span {
    font-size: .58rem;
    letter-spacing: .04em;
  }

  .vd-burger {
    width: 42px;
    height: 42px;
    font-size: 1.45rem;
  }

  .vd-offcanvas {
    width: 90vw;
  }

  .vd-cat-body {
    padding: 1.3rem 1.1rem 1.2rem;
  }

  .vd-cat-body h3 {
    font-size: 1.14rem;
  }

  .vd-stat strong {
    font-size: 2.2rem;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* print */
@media print {

  .vd-topbar,
  .vd-header,
  .vd-footer,
  .vd-top,
  .vd-wa,
  .vd-offcanvas,
  .vd-oc-backdrop,
  .vd-preload {
    display: none !important;
  }

  body {
    background: #fff;
  }
}