/*
 * vanlo-ui components + sections. Requires tokens.css.
 * Every section in sections/home.html uses only these classes.
 */

* { box-sizing: border-box; margin: 0; }
body { background: var(--vanlo-white); color: var(--vanlo-ink); font-family: var(--vanlo-font); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* =========================================================
   LAYOUT
   ========================================================= */
.v-section { padding: var(--vanlo-section-y) var(--vanlo-gutter); background: var(--vanlo-white); }
.v-section--paper { background: var(--vanlo-paper); }
.v-section--flush-top { padding-top: 0; }                 /* a section that continues the one above on the same background */
.v-wrap { width: 100%; max-width: var(--vanlo-max); margin: 0 auto; }

/* Section header, split: title block left, intro (+ text link) right, bottom-aligned */
.v-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; margin-bottom: var(--vanlo-head-gap); }
.v-head__title { display: flex; flex-direction: column; gap: 12px; }
.v-head__title h2 { max-width: 480px; }
.v-head__side { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 390px; color: var(--vanlo-body); }
/* Section header, centered */
.v-head--center { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.v-head--center h2 { max-width: 600px; }

/* =========================================================
   ATOMS
   ========================================================= */
/* Eyebrow: "+" then 18px Light label. Dark by default, white on photos. */
.v-eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.v-eyebrow::before {
  content: ""; width: 12px; height: 12px; flex: none;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.3px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.3px 100% no-repeat;
}

/* Primary button: red pill + white arrow */
.v-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--vanlo-red); color: #fff; border-radius: var(--vanlo-pill);
  padding: 10px 20px;
  transition: background-color 150ms var(--vanlo-ease), scale 150ms var(--vanlo-ease);
}
.v-btn--sm { padding: 8px 20px; }
.v-btn img { width: 16px; height: 16px; transition: translate 150ms var(--vanlo-ease); }
.v-btn:hover { background: var(--vanlo-red-hover); }
.v-btn:active { scale: .96; }

/* Text link: ink label + dark arrow, no background ("View All Services →") */
.v-link { display: inline-flex; align-items: center; gap: 12px; color: var(--vanlo-ink); }
.v-link img { width: 16px; height: 16px; transition: translate 150ms var(--vanlo-ease); }

@media (hover: hover) and (pointer: fine) {
  .v-btn:hover img, .v-link:hover img { translate: 3px 0; }
}
.v-btn:focus-visible, .v-link:focus-visible, .v-nav a:focus-visible, .v-faq summary:focus-visible, .v-play:focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px;
}

/* Photo: 12px radius, cover */
.v-photo { border-radius: var(--vanlo-radius); overflow: hidden; background: var(--vanlo-sand); }
.v-photo img { width: 100%; height: 100%; object-fit: cover; }

/* White card on paper background */
.v-card { background: var(--vanlo-white); border-radius: var(--vanlo-radius); }

/* =========================================================
   NAV: white floating pill
   ========================================================= */
.v-nav {
  position: relative; z-index: 2; width: 100%; max-width: var(--vanlo-max); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-radius: var(--vanlo-pill); padding: 8px 8px 8px 20px;
}
.v-nav__left { display: flex; align-items: center; gap: 32px; }
.v-logo { display: flex; align-items: flex-start; gap: 1px; }
.v-logo span { display: block; line-height: 1; padding-top: 6px; }   /* trims Anek's tall line box */
.v-logo img { margin-top: 4px; }
.v-nav__divider { width: 1px; height: 14px; background: var(--vanlo-sand); }
.v-nav__links { display: flex; gap: 32px; list-style: none; padding: 0; }
.v-nav__links a { color: var(--vanlo-body); transition: color 150ms var(--vanlo-ease); }
.v-nav__links a:hover { color: var(--vanlo-ink); }

/* =========================================================
   01 HERO: full-bleed photo/video, content pinned bottom
   ========================================================= */
.v-hero {
  position: relative; min-height: max(640px, 100svh); overflow: hidden; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px var(--vanlo-gutter) 128px;
}
.v-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-hero__scrim { position: absolute; inset: auto 0 0 0; height: 83%; background: var(--vanlo-scrim); }
.v-hero__content {
  position: relative; z-index: 1; width: 100%; max-width: var(--vanlo-max); margin: 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 48px;
}
.v-hero__title { display: flex; flex-direction: column; gap: 12px; max-width: 575px; }
.v-hero__side { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 451px; }

/* =========================================================
   02 BRANDS: label + infinite logo ticker with faded edges
   ========================================================= */
.v-brands { padding: 96px var(--vanlo-gutter); background: var(--vanlo-paper); }
.v-brands .v-wrap { display: flex; align-items: center; gap: 96px; }
.v-brands__label { width: 274px; flex: none; }
.v-ticker {
  flex: 1; min-width: 0; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 147px, #000 calc(100% - 147px), transparent 100%);
}
.v-ticker__track { display: flex; width: max-content; animation: v-ticker 40s linear infinite; }
.v-ticker__set { display: flex; align-items: center; gap: 116px; padding-right: 116px; }
.v-ticker__set > * { flex: none; font-size: 20px; line-height: 1; font-weight: 600; letter-spacing: -1.2px; color: var(--vanlo-ink); white-space: nowrap; }
.v-ticker:hover .v-ticker__track { animation-play-state: paused; }
@keyframes v-ticker { to { transform: translateX(-50%); } }

/* =========================================================
   03 STATS: four white cards on paper
   ========================================================= */
.v-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--vanlo-card-gap); }
.v-stat { display: flex; flex-direction: column; gap: 12px; padding: 40px; }
.v-stat p { color: var(--vanlo-body); }

/* =========================================================
   04 ABOUT: centered manifesto, vertical rule, 3 red icon tiles
   ========================================================= */
.v-about { display: flex; flex-direction: column; align-items: center; gap: 52px; text-align: center; }
.v-about__text { max-width: 1066px; }
.v-about__rule { width: 1px; height: 57px; background: var(--vanlo-sand); }
.v-about__pillars { display: flex; justify-content: center; gap: 76px; flex-wrap: wrap; }
.v-pillar { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.v-icon-tile { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--vanlo-radius); background: var(--vanlo-red); color: #fff; }
.v-icon-tile svg { width: 28px; height: 28px; }

/* =========================================================
   05 SERVICES: 3 tall photo cards + title/description
   ========================================================= */
.v-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vanlo-card-gap); }
.v-service { display: flex; flex-direction: column; gap: 24px; }
.v-service .v-photo { aspect-ratio: 491 / 495; }
.v-service .v-photo img { transition: scale 600ms var(--vanlo-ease); }
.v-service:hover .v-photo img { scale: 1.03; }
.v-service__text { display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.v-service__text p { color: var(--vanlo-body); }

/* =========================================================
   06 NETWORK: centered header, dotted world map, centered CTA
   ========================================================= */
.v-network { display: flex; flex-direction: column; align-items: center; }
.v-network__map { width: 100%; margin-bottom: calc(-123 / 1504 * 100%); }   /* map overhangs its 630px box in Figma */
.v-network__cta { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; margin-top: var(--vanlo-head-gap); }
.v-network__cta p { max-width: 458px; color: var(--vanlo-body); }

/* =========================================================
   07 HOW IT WORKS: big video + 3 step cards
   ========================================================= */
.v-video { position: relative; aspect-ratio: 1504 / 786; margin-bottom: var(--vanlo-card-gap); }
.v-play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 68px; height: 68px; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 50%;
  transition: scale 150ms var(--vanlo-ease);
}
.v-play:hover { scale: 1.06; }
.v-play:active { scale: .96; }
.v-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vanlo-card-gap); }
.v-step { display: flex; flex-direction: column; gap: 112px; padding: 32px 80px 32px 32px; }
.v-step__text { display: flex; flex-direction: column; gap: 10px; }
.v-step__text p { color: var(--vanlo-body); }

/* =========================================================
   08 WHY US: text column + 2 features left, big photo right
   ========================================================= */
.v-why { display: flex; justify-content: space-between; align-items: stretch; gap: 48px; }
.v-why__text { display: flex; flex-direction: column; justify-content: space-between; gap: 64px; width: 493px; flex: none; }
.v-why__intro { display: flex; flex-direction: column; gap: 16px; }
.v-why__intro > p { max-width: 260px; color: var(--vanlo-body); }
.v-why__features { display: flex; gap: 52px; }
.v-feature { display: flex; flex-direction: column; gap: 24px; }
.v-feature svg, .v-feature img { width: 28px; height: 28px; color: var(--vanlo-ink); }
.v-feature__text { display: flex; flex-direction: column; gap: 6px; }
.v-feature__text p { color: var(--vanlo-body); max-width: 238px; }
.v-why .v-photo { flex: 0 1 871px; aspect-ratio: 871 / 617; }

/* =========================================================
   09 TESTIMONIALS: photo + 2 quote cards, equal height
   ========================================================= */
.v-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vanlo-card-gap); }
.v-reviews > * { min-height: 544px; }
.v-review { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 32px; }
.v-person { display: flex; align-items: center; gap: 16px; }
.v-person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.v-person span { display: block; color: var(--vanlo-body); }

/* =========================================================
   10 FAQ: header left, accordion of paper rows right
   ========================================================= */
.v-faq-wrap { display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; }
.v-faq-wrap .v-head__title h2 { max-width: 376px; }
.v-faq-wrap .v-head__title + p { max-width: 281px; color: var(--vanlo-body); margin-top: 16px; }
.v-faq-list { display: flex; flex-direction: column; gap: 8px; width: 804px; flex: 0 1 804px; }
.v-faq { background: var(--vanlo-paper); border-radius: var(--vanlo-radius); padding: 26px 30px; }
.v-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; }
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary img { width: 14px; height: 14px; flex: none; transition: rotate 200ms var(--vanlo-ease); }
.v-faq[open] summary img { rotate: 45deg; }
.v-faq__answer { padding-top: 12px; color: var(--vanlo-body); max-width: 640px; }

/* =========================================================
   11 BLOG: split header, 2 large post cards
   ========================================================= */
.v-posts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vanlo-card-gap); }
.v-post { display: flex; flex-direction: column; gap: 40px; }
.v-post .v-photo { aspect-ratio: 744 / 445; }
.v-post .v-photo img { transition: scale 600ms var(--vanlo-ease); }
.v-post:hover .v-photo img { scale: 1.03; }
.v-post__text { display: flex; flex-direction: column; gap: 16px; }
.v-post__meta { display: flex; align-items: center; gap: 12px; color: var(--vanlo-body); }
.v-post__meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--vanlo-body); }

/* =========================================================
   12 CTA + FOOTER: one dark block over a faded photo
   ========================================================= */
.v-cta-footer { position: relative; overflow: hidden; color: #fff; background: var(--vanlo-ink); padding: 152px var(--vanlo-gutter) 112px; }
.v-cta-footer__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-cta-footer__scrim { position: absolute; inset: 0; background: var(--vanlo-scrim-footer); }
.v-cta-footer .v-wrap { position: relative; display: flex; flex-direction: column; gap: 128px; }
.v-cta { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.v-cta__title { display: flex; flex-direction: column; gap: 12px; }
.v-cta__title h2 { max-width: 470px; }
.v-cta__side { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 308px; }
.v-rule-light { height: 1px; background: rgba(255,255,255,.24); }
.v-footer { display: flex; flex-direction: column; gap: 104px; }
.v-footer__top { display: flex; justify-content: space-between; gap: 48px; }
.v-footer__brand { display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.v-footer__brand .v-logo span { font-size: 67px; color: #fff; padding-top: 12px; }
.v-footer__brand .v-logo img { width: 21px; height: 21px; margin-top: 8px; }
.v-footer__brand p, .v-footer__legal { color: var(--vanlo-sand); opacity: .7; max-width: 440px; }
.v-footer__cols { display: flex; justify-content: space-between; width: 432px; padding-right: 32px; }
.v-footer__col { display: flex; flex-direction: column; gap: 28px; }
.v-footer__col h3 { font: inherit; opacity: .6; }
.v-footer__col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v-footer__col a { transition: opacity 150ms var(--vanlo-ease); }
.v-footer__col a:hover { opacity: .7; }
.v-footer__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.v-footer__legal { max-width: 1052px; }
.v-socials { display: flex; gap: 16px; }
.v-socials img { width: 20px; height: 20px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .v-stats { grid-template-columns: repeat(2, 1fr); }
  .v-services, .v-steps, .v-reviews { grid-template-columns: 1fr 1fr; }
  .v-reviews > :first-child { grid-column: 1 / -1; min-height: 420px; }
  .v-step { padding-right: 32px; gap: 72px; }
  .v-why { flex-direction: column; }
  .v-why__text { width: auto; }
  .v-why .v-photo { flex: none; }
  .v-faq-wrap { flex-direction: column; }
  .v-faq-list { width: 100%; flex: none; }
  .v-footer__top { flex-direction: column; }
}
@media (max-width: 860px) {
  .v-nav__links, .v-nav__divider { display: none; }
  .v-hero { padding-bottom: 48px; }
  .v-hero__content, .v-head, .v-cta, .v-footer__bottom { flex-direction: column; align-items: flex-start; }
  .v-head--center { align-items: center; }
  .v-brands .v-wrap { flex-direction: column; align-items: flex-start; gap: 40px; }
  .v-ticker { width: 100%; mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%); }
  .v-ticker__set { gap: 56px; padding-right: 56px; }
  .v-services, .v-steps, .v-reviews, .v-posts { grid-template-columns: 1fr; }
  .v-reviews > * { min-height: 0; }
  .v-reviews > :first-child { min-height: 320px; }
  .v-about__pillars { gap: 40px; }
  .v-cta-footer { padding-top: 120px; padding-bottom: 64px; }
  .v-cta-footer .v-wrap { gap: 72px; }
  .v-footer { gap: 56px; }
}
@media (max-width: 640px) {
  .v-stats { grid-template-columns: 1fr; }
  .v-stat { padding: 28px; }
  .v-why__features { flex-direction: column; gap: 32px; }
  .v-faq { padding: 20px; }
  .v-footer__cols { width: 100%; padding-right: 0; }
  .v-footer__brand .v-logo span { font-size: 48px; }
}

/* =========================================================
   Variants page
   sections/variants.html: alternative section layouts built only
   from Vanlo DNA. Every class here starts with v- and uses tokens
   only (no hex). Names avoid the home page's classes.
   ========================================================= */

/* ---- page chrome: intro, index, group heads, variant labels ---- */
.v-vintro { background: var(--vanlo-paper); padding: 20px var(--vanlo-gutter) 96px; }
.v-vintro__head { max-width: var(--vanlo-max); margin: 72px auto 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.v-vintro__head > div { display: flex; flex-direction: column; gap: 12px; }
.v-vintro__head p:last-child { max-width: 451px; color: var(--vanlo-body); }
.v-vindex { max-width: var(--vanlo-max); margin: 48px auto 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v-vindex a { background: var(--vanlo-white); border-radius: var(--vanlo-pill); padding: 8px 16px; color: var(--vanlo-body); transition: color 150ms var(--vanlo-ease); }
.v-vindex a:hover { color: var(--vanlo-ink); }
.v-vindex b { font-weight: 500; color: var(--vanlo-ink); }
.v-vgroup { padding: 112px var(--vanlo-gutter) 0; background: var(--vanlo-white); }
.v-vgroup__row { max-width: var(--vanlo-max); margin: 0 auto; padding-top: 24px; border-top: 1px solid var(--vanlo-sand); display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.v-vgroup__row h2 span { color: var(--vanlo-body); }
.v-vgroup__row p { max-width: 451px; color: var(--vanlo-body); }
.v-vlabel { padding: 48px var(--vanlo-gutter) 16px; background: var(--vanlo-white); scroll-margin-top: 16px; }
.v-vlabel > div { max-width: var(--vanlo-max); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; border: 1px dashed var(--vanlo-sand); border-radius: var(--vanlo-radius); }
.v-vlabel code { font: 500 14px/1.56 var(--vanlo-font); letter-spacing: 0; background: var(--vanlo-ink); color: var(--vanlo-white); border-radius: var(--vanlo-pill); padding: 3px 14px; }
.v-vlabel p { flex: 1 1 320px; min-width: 0; color: var(--vanlo-body); }
.v-vlabel b { font-weight: 500; color: var(--vanlo-ink); }

/* ---- shared helpers ---- */
.v-nav--paper { background: var(--vanlo-paper); }          /* nav pill on a white section */
.v-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.v-muted { color: var(--vanlo-body); }
.v-faces { display: flex; align-items: center; gap: 16px; color: var(--vanlo-body); }
.v-faces span { display: flex; }
.v-faces img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--vanlo-white); margin-left: -12px; }
.v-faces img:first-child { margin-left: 0; }
.v-icon-line { width: 28px; height: 28px; color: var(--vanlo-ink); flex: none; }

/* ---- hero-split: copy left, tall photo right with a floating white card ---- */
.v-hsplit { background: var(--vanlo-white); padding: 20px var(--vanlo-gutter) var(--vanlo-section-y); }
.v-hsplit__grid { max-width: var(--vanlo-max); margin: 72px auto 0; display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: stretch; }
.v-hsplit__copy { display: flex; flex-direction: column; justify-content: space-between; gap: 56px; padding: 24px 0; }
.v-hsplit__main { display: flex; flex-direction: column; gap: 24px; }
.v-hsplit__copy h1 { max-width: 620px; }
.v-hsplit__copy p.vanlo-body-lg { max-width: 451px; color: var(--vanlo-body); }
.v-hsplit__media { position: relative; min-height: 640px; }
.v-hsplit__media .v-photo { position: absolute; inset: 0; }
.v-hsplit__float { position: absolute; left: 24px; bottom: 24px; width: min(320px, calc(100% - 48px)); padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.v-hsplit__float p { color: var(--vanlo-body); }

/* ---- hero-statement: centred headline, then a 3-photo strip of mixed widths ---- */
.v-hstate { background: var(--vanlo-paper); padding: 20px var(--vanlo-gutter) var(--vanlo-section-y); }
.v-hstate__copy { max-width: 980px; margin: 112px auto var(--vanlo-head-gap); display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.v-hstate__copy p.vanlo-body-lg { max-width: 520px; color: var(--vanlo-body); }
.v-hstate__strip { max-width: var(--vanlo-max); margin: 0 auto; display: grid; grid-template-columns: 3fr 5fr 3fr; gap: var(--vanlo-card-gap); align-items: end; }
.v-hstate__strip .v-photo:nth-child(1) { aspect-ratio: 4 / 5; }
.v-hstate__strip .v-photo:nth-child(2) { aspect-ratio: 5 / 4; }
.v-hstate__strip .v-photo:nth-child(3) { aspect-ratio: 4 / 5; }

/* ---- hero-editorial: inset framed photo, headline top-left, white index card bottom-right ---- */
.v-hedit { background: var(--vanlo-white); padding: 20px var(--vanlo-gutter) var(--vanlo-card-gap); }
.v-hedit__frame { position: relative; max-width: var(--vanlo-max); margin: var(--vanlo-card-gap) auto 0; min-height: max(720px, 88svh); border-radius: var(--vanlo-radius); overflow: hidden; color: var(--vanlo-white); display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: 48px; }
.v-hedit__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-hedit__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,14,.62) 0%, rgba(14,14,14,.18) 46%, rgba(14,14,14,.48) 100%); }
.v-hedit__title { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.v-hedit__card { position: relative; align-self: flex-end; width: min(440px, 100%); padding: 32px; color: var(--vanlo-ink); display: flex; flex-direction: column; gap: 24px; }
.v-hedit__card > p { color: var(--vanlo-body); }
.v-hedit__list { list-style: none; padding: 0; display: flex; flex-direction: column; }
.v-hedit__list li { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 1px solid var(--vanlo-sand); }
.v-hedit__list li span { width: 28px; flex: none; color: var(--vanlo-body); }

/* ---- hero-metric: proof-led; headline + 4 big numbers on hairlines + photo band ---- */
.v-hmetric { background: var(--vanlo-paper); padding: 20px var(--vanlo-gutter) var(--vanlo-section-y); }
.v-hmetric__top { max-width: var(--vanlo-max); margin: 96px auto 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.v-hmetric__top > div:first-child { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.v-hmetric__side { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 400px; }
.v-hmetric__side p { color: var(--vanlo-body); }
.v-hmetric__nums { max-width: var(--vanlo-max); margin: 72px auto var(--vanlo-card-gap); display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--vanlo-sand); }
.v-hmetric__nums > div { padding: 32px 32px 0 0; display: flex; flex-direction: column; gap: 8px; }
.v-hmetric__nums > div + div { padding-left: 32px; border-left: 1px solid var(--vanlo-sand); }
.v-hmetric__nums p { color: var(--vanlo-body); }
.v-hmetric__band { max-width: var(--vanlo-max); margin: 0 auto; aspect-ratio: 1504 / 520; }

/* ---- features-index: numbered rows with hairlines, thumb + arrow ---- */
.v-findex { list-style: none; padding: 0; border-bottom: 1px solid var(--vanlo-sand); }
.v-findex li { border-top: 1px solid var(--vanlo-sand); }
.v-findex a { display: grid; grid-template-columns: 80px 1.2fr 1.4fr 176px 24px; align-items: center; gap: 32px; padding: 28px 0; }
.v-findex__num { color: var(--vanlo-body); }
.v-findex a > p { color: var(--vanlo-body); max-width: 460px; }
.v-findex .v-photo { aspect-ratio: 16 / 10; }
.v-findex .v-photo img { transition: scale 600ms var(--vanlo-ease); }
.v-findex a:hover .v-photo img { scale: 1.03; }
.v-findex a > img { width: 16px; height: 16px; transition: translate 150ms var(--vanlo-ease); }
@media (hover: hover) and (pointer: fine) { .v-findex a:hover > img { translate: 3px 0; } }

/* ---- features-bento: mixed tiles on paper ---- */
.v-fbento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 280px; gap: var(--vanlo-card-gap); }
.v-fbento > * { min-width: 0; }
.v-fbento__tile { padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.v-fbento__tile p { color: var(--vanlo-body); }
.v-fbento__tile > div { display: flex; flex-direction: column; gap: 8px; }
.v-fbento__big { grid-column: span 2; grid-row: span 2; position: relative; color: var(--vanlo-white); }
.v-fbento__big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-fbento__big .v-hero__scrim { height: 70%; }
.v-fbento__copy { position: absolute; left: 32px; right: 32px; bottom: 32px; display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.v-fbento__wide { grid-column: span 2; }
.v-fbento__photo { grid-column: span 2; }

/* ---- features-sticky: sticky head left, 2x2 white cards right ---- */
.v-fsticky { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.v-fsticky__head { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 24px; }
.v-fsticky__head > p { max-width: 390px; color: var(--vanlo-body); }
.v-fsticky__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vanlo-card-gap); }
.v-fsticky__card { padding: 32px; min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.v-fsticky__card > div { display: flex; flex-direction: column; gap: 8px; }
.v-fsticky__card p { color: var(--vanlo-body); }

/* ---- proof-quote: one big centred quote, person, static logo row ---- */
.v-pquote { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.v-pquote blockquote { color: var(--vanlo-ink); }
.v-pquote .v-person { text-align: left; }
.v-pquote__logos { margin-top: 48px; padding-top: 40px; border-top: 1px solid var(--vanlo-sand); width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px 56px; }
.v-pquote__logos span { font-size: 20px; line-height: 1; font-weight: 600; letter-spacing: -1.2px; color: var(--vanlo-ink); }

/* ---- proof-cases: 3 result cards (photo, big number, client) ---- */
.v-pcases { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vanlo-card-gap); }
.v-pcase { display: flex; flex-direction: column; }
.v-pcase .v-photo { aspect-ratio: 4 / 3; border-radius: var(--vanlo-radius) var(--vanlo-radius) 0 0; }
.v-pcase__body { padding: 32px; display: flex; flex-direction: column; gap: 32px; flex: 1; justify-content: space-between; }
.v-pcase__result { display: flex; flex-direction: column; gap: 8px; }
.v-pcase__body p { color: var(--vanlo-body); }
.v-pcase__client { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; border-top: 1px solid var(--vanlo-sand); }

/* ---- pricing-plans: 3 flat white plans, the featured one carries the accent button ---- */
.v-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vanlo-card-gap); align-items: stretch; }
.v-plan { padding: 40px; display: flex; flex-direction: column; gap: 32px; }
.v-plan__top { display: flex; flex-direction: column; gap: 8px; }
.v-plan__top p { color: var(--vanlo-body); }
.v-plan__price { display: flex; align-items: baseline; gap: 8px; }
.v-plan__price span { color: var(--vanlo-body); }
.v-plan ul { list-style: none; padding: 20px 0 0; border-top: 1px solid var(--vanlo-sand); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.v-plan li { display: flex; gap: 12px; color: var(--vanlo-body); }
.v-plan li::before { content: ""; width: 12px; height: 12px; margin-top: 7px; flex: none;
  background: linear-gradient(var(--vanlo-ink), var(--vanlo-ink)) center / 100% 1.3px no-repeat, linear-gradient(var(--vanlo-ink), var(--vanlo-ink)) center / 1.3px 100% no-repeat; }
.v-plan { position: relative; }
.v-plan__tag { position: absolute; top: 40px; right: 40px; background: var(--vanlo-paper); border-radius: var(--vanlo-pill); padding: 2px 12px; }   /* featured plan: tag + the only accent button, no border */

/* ---- steps-timeline: horizontal line with dots, text under ---- */
.v-timeline { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.v-timeline li { position: relative; padding-top: 48px; display: flex; flex-direction: column; gap: 10px; }
.v-timeline li::before { content: ""; position: absolute; top: 7px; left: 0; right: -32px; height: 1px; background: var(--vanlo-sand); }
.v-timeline li:last-child::before { right: 0; }
.v-timeline li::after { content: ""; position: absolute; top: 0; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--vanlo-white); border: 1px solid var(--vanlo-ink); }
.v-timeline li:first-child::after { background: var(--vanlo-ink); }
.v-timeline__when { color: var(--vanlo-body); }
.v-timeline li p:last-child { color: var(--vanlo-body); max-width: 300px; }

/* ---- locations: photo cards with address, hours and a text link ---- */
.v-locs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vanlo-card-gap); }
.v-loc { display: flex; flex-direction: column; }
.v-loc .v-photo { aspect-ratio: 3 / 2; border-radius: var(--vanlo-radius) var(--vanlo-radius) 0 0; }
.v-loc__body { padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.v-loc dl { display: grid; grid-template-columns: 88px 1fr; gap: 8px 16px; padding-top: 20px; border-top: 1px solid var(--vanlo-sand); }
.v-loc dt { color: var(--vanlo-body); }

/* ---- faq-columns: centred head, two columns of rows ---- */
.v-faq2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px var(--vanlo-card-gap); align-items: start; }
.v-faq2 .v-faq { background: var(--vanlo-white); }

/* ---- cta-photo: inset rounded photo band, centred copy ---- */
.v-ctaband { position: relative; max-width: var(--vanlo-max); margin: 0 auto; border-radius: var(--vanlo-radius); overflow: hidden; color: var(--vanlo-white); padding: 144px 48px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.v-ctaband > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-ctaband__shade { position: absolute; inset: 0; background: rgba(14,14,14,.6); }
.v-ctaband > :not(img):not(.v-ctaband__shade) { position: relative; }
.v-ctaband h2 { max-width: 640px; }
.v-ctaband p.vanlo-body-lg { max-width: 460px; }

/* ---- cta-form: split; head left, white form card right ---- */
.v-ctaform { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; }
.v-ctaform__head { display: flex; flex-direction: column; gap: 24px; }
.v-ctaform__head > p { max-width: 390px; color: var(--vanlo-body); }
.v-ctaform__contact { display: flex; flex-direction: column; gap: 4px; padding-top: 24px; border-top: 1px solid var(--vanlo-sand); }
.v-form { padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px var(--vanlo-card-gap); }
.v-form label { display: flex; flex-direction: column; gap: 8px; color: var(--vanlo-body); }
.v-form label.v-form__full { grid-column: 1 / -1; }
.v-form input, .v-form select, .v-form textarea { font: 300 16px/1.56 var(--vanlo-font); letter-spacing: -0.5px; color: var(--vanlo-ink); background: var(--vanlo-paper); border: 1px solid transparent; border-radius: var(--vanlo-radius); padding: 14px 18px; width: 100%; transition: border-color 150ms var(--vanlo-ease); }
.v-form textarea { min-height: 128px; resize: vertical; }
.v-form input:focus, .v-form select:focus, .v-form textarea:focus { outline: none; border-color: var(--vanlo-ink); }
.v-form__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.v-form__foot p { color: var(--vanlo-body); max-width: 360px; }
.v-form .v-btn { border: 0; cursor: pointer; }

/* Variants page — responsive */
@media (max-width: 1100px) {
  .v-hsplit__grid, .v-fsticky, .v-ctaform { grid-template-columns: 1fr; gap: 48px; }
  .v-hsplit__media { min-height: 520px; }
  .v-fsticky__head { position: static; }
  .v-hmetric__nums { grid-template-columns: 1fr 1fr; }
  .v-hmetric__nums > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .v-hmetric__nums > div:nth-child(n+3) { padding-top: 32px; }
  .v-findex a { grid-template-columns: 56px 1fr 1fr 24px; }
  .v-findex .v-photo { display: none; }
  .v-fbento { grid-template-columns: 1fr 1fr; }
  .v-pcases, .v-plans, .v-locs { grid-template-columns: 1fr 1fr; }
  .v-timeline { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .v-timeline li:nth-child(2)::before { right: 0; }
}
@media (max-width: 860px) {
  .v-vintro__head, .v-hmetric__top { flex-direction: column; align-items: flex-start; }
  .v-hstate__copy { margin-top: 72px; }
  .v-hstate__strip { grid-template-columns: 1fr 1fr; }
  .v-hstate__strip .v-photo:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .v-hedit__frame { padding: 24px; min-height: 0; gap: 160px; }
  .v-hedit__card { align-self: stretch; width: auto; padding: 24px; }
  .v-findex a { grid-template-columns: 40px 1fr 24px; gap: 8px 16px; }
  .v-findex a > p { grid-column: 2; grid-row: 2; }
  .v-findex a > img { grid-column: 3; grid-row: 1; }
  .v-faq2, .v-pcases, .v-plans, .v-locs { grid-template-columns: 1fr; }
  .v-ctaband { padding: 96px 24px; }
}
@media (max-width: 640px) {
  .v-hsplit__media { min-height: 420px; }
  .v-hmetric__nums { grid-template-columns: 1fr; }
  .v-hmetric__nums > div, .v-hmetric__nums > div + div { padding: 24px 0 0; border-left: 0; }
  .v-hmetric__band { aspect-ratio: 4 / 3; }
  .v-fbento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .v-fbento__big, .v-fbento__wide, .v-fbento__photo { grid-column: auto; grid-row: auto; }
  .v-fbento__big { min-height: 420px; }
  .v-fbento__photo { aspect-ratio: 4 / 3; }
  .v-fsticky__grid { grid-template-columns: 1fr; }
  .v-fsticky__card { min-height: 0; }
  .v-timeline { grid-template-columns: 1fr; }
  .v-timeline li::before { right: 0; }
  .v-plan, .v-form, .v-loc__body, .v-pcase__body { padding: 28px; }
  .v-plan__tag { top: 28px; right: 28px; }
  .v-form { grid-template-columns: 1fr; }
}

/* Balanced headline breaks (Farhan 2026-10-10): every heading that wraps splits into even lines, never a long line
   over a short one. Never remove. */
h1, h2, h3, h4, h5, h6, [class*="t-h"], .h1, .h2, .h3, blockquote, blockquote p, .statement, [class*="quote"] p { text-wrap: balance; }