/* ==========================================================================
   Viloer About — widget styles
   Root class .vab ; all elements prefixed .vab-* to avoid theme/kit collisions.
   Colors are driven by CSS custom properties (overridable by color controls).
   Dimensional / typographic properties carry their DESKTOP value here as a
   fallback and are overridden per-device by Elementor responsive controls.
   Specificity ladder:
     base               .vab .vab-x              (0,2,0)  beats kit body h1 (0,1,2)
     control      {{WRAP}} .vab .vab-x           (0,3,0)  always beats base
   ========================================================================== */

.vab {
  /* ---- color tokens (overridden by color controls) ---- */
  --vab-page-bg:#E1ECDF;
  --vab-card-bg:#ffffff;

  --vab-eyebrow-color:#3C7A4E;
  --vab-h1-color:#14322A;
  --vab-hero-text-color:#3E4A44;

  --vab-btn-bg:#C7E6A6;
  --vab-btn-bg-hover:#C7E6A6;        /* equals base by default → no hover color shift, matches source */
  --vab-btn-text:#14322A;
  --vab-arrow-bg:#14322A;
  --vab-arrow-color:#C7E6A6;

  --vab-story-heading-color:#14322A;
  --vab-story-p-color:#3E4A44;

  --vab-stats-bg:#14322A;
  --vab-num-color:#C7E6A6;
  --vab-lbl-color:#9FB6A0;
  --vab-rule-color:rgba(199,230,166,.2);

  --vab-kicker-color:#3C7A4E;
  --vab-check-bg:#DDEBCF;
  --vab-check-color:#14322A;
  --vab-promise-title-color:#14322A;
  --vab-promise-desc-color:#5C6B63;

  --vab-ph-bg:#D6DEE2;
  --vab-ph-stripe:rgba(255,255,255,.4);
  --vab-ph-label:#48555C;
  --vab-ph-label-bg:rgba(255,255,255,.82);

  --vab-cta-bg:#14322A;
  --vab-cta-heading-color:#ffffff;
  --vab-cta-text-color:#A9C5A0;

  background:var(--vab-page-bg);
  font-family:'Figtree', system-ui, -apple-system, sans-serif;
  color:#1E2B26;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.vab *,
.vab *::before,
.vab *::after { box-sizing:border-box; }

.vab img { display:block; max-width:100%; }
.vab a { -webkit-tap-highlight-color:transparent; }

/* ---- page shell ---- */
.vab .vab-page {
  display:flex;
  flex-direction:column;
  gap:24px;                 /* desktop fallback (page gap control) */
  padding:32px;             /* desktop fallback (page padding control) */
}
.vab .vab-card {
  max-width:1160px;         /* card max-width control */
  width:100%;
  margin:0 auto;
}

/* ==========================  HERO  ========================== */
.vab .vab-hero {
  background:var(--vab-card-bg);
  border-radius:28px;       /* card radius control */
  padding:64px;             /* hero padding control (desktop) */
  display:grid;
  grid-template-columns:1.05fr .95fr;   /* desktop layout */
  gap:56px;                 /* hero gap control (desktop) */
  align-items:center;
}
.vab .vab-eyebrow {
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.18em;
  color:var(--vab-eyebrow-color);
  margin:0 0 14px;
  text-transform:uppercase;
}
.vab .vab-h1 {
  font-size:clamp(28px, 7vw, 52px);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.025em;
  color:var(--vab-h1-color);
  margin:0 0 18px;
  text-wrap:balance;
}
.vab .vab-hero-text {
  font-size:clamp(15px, 4vw, 19px);
  line-height:1.6;
  color:var(--vab-hero-text-color);
  max-width:46ch;
  margin:0 0 28px;
}

/* ---- shared button ---- */
.vab .vab-btn {
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:var(--vab-btn-bg) !important;
  color:var(--vab-btn-text) !important;
  text-decoration:none;
  font-weight:700;
  font-size:16px;
  white-space:nowrap;
  padding:15px 26px !important;
  border-radius:999px !important;
  transition:transform .15s ease, box-shadow .15s ease;
}
.vab .vab-btn:hover {
  background:var(--vab-btn-bg-hover) !important;
  transform:translateY(-2px);
  box-shadow:0 14px 30px -12px rgba(20,50,42,.5);   /* default; overridable by hover shadow control */
}
.vab .vab-btn .vab-arrow {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px !important;
  height:26px !important;
  border-radius:50%;
  background:var(--vab-arrow-bg) !important;
  color:var(--vab-arrow-color) !important;
  font-size:14px !important;
  flex:none;
}

/* ---- image placeholder ---- */
.vab .vab-ph {
  position:relative;
  border-radius:20px;       /* hero/trio image radius controls override per section */
  overflow:hidden;
  background-color:var(--vab-ph-bg);
  background-image:repeating-linear-gradient(135deg, transparent 0 16px, var(--vab-ph-stripe) 16px 17px);
  display:flex;
  align-items:flex-end;
  padding:16px;
}
.vab .vab-ph .vab-ph-label {
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--vab-ph-label);
  background:var(--vab-ph-label-bg);
  padding:6px 12px;
  border-radius:999px;
}
.vab .vab-ph.vab-ph--filled {
  background-image:none;
  background-color:transparent;
  padding:0;
}
.vab .vab-ph img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.vab .vab-hero-ph { aspect-ratio:4 / 5; }   /* hero image ratio control */

/* ==========================  STORY + STATS  ========================== */
.vab .vab-row2 {
  display:grid;
  grid-template-columns:1.4fr 1fr;   /* tablet + desktop layout */
  gap:16px;                          /* row2 gap control */
}
.vab .vab-story {
  background:var(--vab-card-bg);
  border-radius:28px;
  padding:48px;             /* story padding (desktop) */
}
.vab .vab-story-h2 {
  font-size:clamp(20px, 5.5vw, 26px);
  font-weight:800;
  color:var(--vab-story-heading-color);
  margin:0 0 16px;
  letter-spacing:-.01em;
}
.vab .vab-story-p {
  font-size:clamp(15px, 4vw, 17px);
  line-height:1.7;
  color:var(--vab-story-p-color);
  margin:0 0 16px;
}
.vab .vab-story-p:last-child { margin-bottom:0; }

.vab .vab-stats {
  background:var(--vab-stats-bg);
  border-radius:28px;
  padding:48px;             /* stats padding (desktop) */
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:24px;                 /* stats gap control */
}
.vab .vab-num {
  font-size:clamp(34px, 9vw, 46px);
  font-weight:800;
  color:var(--vab-num-color);
  line-height:1;
}
.vab .vab-lbl {
  font-size:15px;
  color:var(--vab-lbl-color);
  margin-top:6px;
}
.vab .vab-rule { height:1px; background:var(--vab-rule-color); }

/* ==========================  PROMISES  ========================== */
.vab .vab-promises {
  background:var(--vab-card-bg);
  border-radius:28px;
  padding:56px;             /* promises padding (desktop) */
}
.vab .vab-kicker {
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  letter-spacing:.16em;
  color:var(--vab-kicker-color);
  text-transform:uppercase;
  margin:0 0 28px;
}
.vab .vab-promise-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);   /* desktop layout */
  row-gap:28px;             /* promise row-gap control */
  column-gap:36px;          /* promise col-gap control */
}
.vab .vab-promise {
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.vab .vab-check {
  width:50px;               /* check size control */
  height:50px;
  border-radius:50%;
  background:var(--vab-check-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  color:var(--vab-check-color);
  font-size:23px;           /* check glyph size control */
  font-weight:800;
}
.vab .vab-pt {
  font-weight:700;
  font-size:17px;
  color:var(--vab-promise-title-color);
  margin-bottom:5px;
}
.vab .vab-pd {
  font-size:14px;
  line-height:1.5;
  color:var(--vab-promise-desc-color);
}

/* ==========================  IMAGE TRIO  ========================== */
.vab .vab-trio {
  display:grid;
  grid-template-columns:repeat(3, 1fr);   /* tablet + desktop layout */
  gap:20px;                 /* trio gap control (desktop) */
}
.vab .vab-trio-ph {
  aspect-ratio:1 / 1;       /* trio image ratio control (desktop) */
  border-radius:24px;
}

/* ==========================  CTA  ========================== */
.vab .vab-cta {
  background:var(--vab-cta-bg);
  border-radius:28px;
  padding:72px 22px;        /* cta padding (desktop) */
  text-align:center;
}
.vab .vab-cta-h2 {
  font-size:clamp(26px, 7vw, 42px);
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--vab-cta-heading-color);
  margin:0 0 12px;
  line-height:1.1;
  text-wrap:balance;
}
.vab .vab-cta-text {
  font-size:16px;
  color:var(--vab-cta-text-color);
  margin:0 0 28px;
}
.vab .vab-cta .vab-btn { /* CTA button centered within block */ }

/* ==========================================================================
   RESPONSIVE — structural grid only (mirrors source min-width 640/960 as
   max-width). Exposed paddings/gaps/sizes/ratios are handled by the
   per-device Elementor controls, NOT here.
   ========================================================================== */

/* below 960: hero collapses to single column; promises drops to 2-up.
   row2 (1.4fr 1fr) and trio (3-up) persist for the 640–959 tablet band. */
@media (max-width:959px) {
  .vab .vab-hero { grid-template-columns:1fr; }
  .vab .vab-promise-grid { grid-template-columns:1fr 1fr; }
}

/* below 640: everything single column. */
@media (max-width:639px) {
  .vab .vab-row2 { grid-template-columns:1fr; }
  .vab .vab-promise-grid { grid-template-columns:1fr; }
  .vab .vab-trio { grid-template-columns:1fr; }
}