/* Home page sections (loaded after base.css). Block structure: see patterns/home.html. */

/* Hero: copy on the left, dark scene with the two converters on the right. */
#veda-approved .va-hero { display: grid; grid-template-columns: 45.2% 54.8%; min-height: min(70.4cqw, 1014px); }
#veda-approved .va-hero-copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(64px, 7.4cqw, 107px) 45px 50px var(--va-pad); }
#veda-approved .va-hero h1 { color: var(--va-ink); font-size: clamp(50px, 6cqw, 86px); font-weight: 700; line-height: .96; letter-spacing: -.043em; }
#veda-approved .va-hero h1::before { content: ""; display: block; width: 54px; height: 3px; margin-bottom: 28px; background: var(--va-red); }
#veda-approved .va-hero-lead { max-width: 520px; margin-top: 28px; color: var(--va-muted); font-size: clamp(21px, 2.22cqw, 32px); font-weight: 400; line-height: 1.22; letter-spacing: -.018em; }
#veda-approved .va-hero-copy .wp-block-buttons { margin-top: 32px; }
#veda-approved .va-hero-contact { width: clamp(230px, 20.3cqw, 292px); }
#veda-approved .va-hero-contact .wp-block-button__link { min-height: 70px; }
#veda-approved .va-acquisition { display: block; width: clamp(220px, 27cqw, 380px); margin-top: auto; padding-top: 30px; }
#veda-approved .va-acquisition :is(a, img) { display: block; width: 100%; max-width: 100%; height: auto; }

/* Dark scene. The converters stand on a "stage" with the proportions of the hero image at 1920 px (0.78 : 1),
   as large as fits in the scene and centred on the floor, so their spacing never changes. */
#veda-approved .va-hero-scene, #veda-approved .va-rd11-image { position: relative; isolation: isolate; overflow: hidden; background-color: #141c22; background-image: linear-gradient(90deg, transparent 74.8%, #65717a55 75%, transparent 75.2%), linear-gradient(transparent 25.4%, #65717a55 25.6%, transparent 25.8%), linear-gradient(transparent 72.4%, #65717a55 72.6%, transparent 72.8%), radial-gradient(ellipse at 70% 25%, #38444d, transparent 56%), linear-gradient(110deg, #0d1317, #202b32); }
#veda-approved .va-hero-scene { container-type: size; }
#veda-approved .va-hero-scene::after { content: ""; position: absolute; z-index: 3; bottom: 0; left: 0; width: 100%; height: 14%; border-top: 1px solid #5c6368; background: linear-gradient(160deg, #343a3e 0%, #171d21 45%, #0c1115 100%); clip-path: polygon(0 0,100% 24%,100% 100%,0 100%); }
#veda-approved .va-hero-stage { position: absolute; z-index: 1; left: 50%; bottom: 0; width: min(100cqw, 77.9cqh); height: min(100cqh, 128.4cqw); transform: translateX(-50%); }
#veda-approved .va-hero-stage::before { content: ""; position: absolute; z-index: 0; top: calc(100% - 100cqh); left: 86%; width: 16px; height: 76cqh; background: var(--va-red); }
#veda-approved .va-hero-stage .wp-block-image { position: absolute; width: auto; }
#veda-approved .va-hero-stage .wp-block-image img { width: auto; height: 100%; max-width: none; }
#veda-approved .va-hero-rd11 { z-index: 1; height: 76%; top: 13%; right: 9%; }
#veda-approved .va-hero-rd11 img { filter: drop-shadow(-17px 20px 20px #0007); }
#veda-approved .va-hero-rd05 { z-index: 2; height: 43%; bottom: 13%; left: 9%; }
#veda-approved .va-hero-rd05 img { filter: drop-shadow(12px 22px 16px #0008); }

/* Facts: compact four-column band. */
#veda-approved .va-facts { display: grid; grid-template-columns: 1fr 1.15fr 1.36fr .8fr; gap: 0; padding: 35px var(--va-pad) 32px; border-top: 1px solid var(--va-line); }
#veda-approved .va-fact { padding: 13px 34px; border-left: 1px solid var(--va-line); }
#veda-approved .va-fact:first-child { padding-left: 0; border-left: 0; }
#veda-approved .va-fact:last-child { padding-right: 0; }
#veda-approved .va-fact-value { display: block; color: var(--va-ink); font-size: clamp(19px, 2.15cqw, 31px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; white-space: nowrap; }
#veda-approved .va-fact-label { display: block; margin-top: 11px; color: var(--va-muted); font-size: clamp(13px, 1.45cqw, 21px); line-height: 1.28; }

/* Intro heading. */
#veda-approved .va-intro { display: grid; grid-template-columns: 64% 36%; align-items: center; min-height: min(22.7cqw, 327px); margin-inline: var(--va-pad); padding: 58px 0 68px; border-top: 1px solid var(--va-line); }
#veda-approved .va-intro h2 { color: var(--va-ink); font-size: clamp(36px, 5.35cqw, 77px); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; }
#veda-approved .va-intro h2::before { content: ""; display: block; width: 54px; height: 3px; margin-bottom: 29px; background: var(--va-red); }
#veda-approved .va-intro p { padding-left: 16px; color: var(--va-muted); font-size: clamp(18px, 1.85cqw, 27px); line-height: 1.24; letter-spacing: -.015em; }

/* Products: RD05 text-left / photo-right; RD11 photo-left / text-right. */
#veda-approved .va-product { display: grid; grid-template-columns: 51% 49%; min-height: min(51.7cqw, 746px); border-top: 1px solid var(--va-line); }
#veda-approved .va-product-copy { padding: 58px var(--va-pad) 60px; }
#veda-approved .va-product h2 { margin-top: 28px; color: var(--va-ink); font-size: clamp(37px, 5cqw, 72px); font-weight: 700; line-height: 1; letter-spacing: -.025em; }
#veda-approved .va-product-subtitle { margin-top: 25px; color: var(--va-muted); font-size: clamp(23px, 2.55cqw, 37px); line-height: 1.15; letter-spacing: -.012em; }
#veda-approved .va-feature-list { margin-top: 28px; padding-top: 17px; border-top: 1px solid var(--va-line); }
#veda-approved .va-feature-list li { position: relative; padding-left: 59px; margin-top: 14px; color: var(--va-ink); font-size: clamp(17px, 1.65cqw, 24px); font-weight: 400; line-height: 1.18; }
#veda-approved .va-feature-list li::before { position: absolute; top: .53em; left: 0; width: 29px; height: 2px; background: var(--va-red); content: ""; }
#veda-approved .va-product-link { margin-top: 40px; font-size: clamp(17px, 1.65cqw, 24px); font-weight: 700; line-height: 1.1; }
#veda-approved .va-product-link a { display: inline-flex; align-items: center; gap: 26px; padding-bottom: 8px; border-bottom: 1px solid #7c8388; color: var(--va-ink); }
#veda-approved .va-product-link a::after { content: ""; flex: 0 0 auto; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--va-i-arrow) center / contain no-repeat; mask: var(--va-i-arrow) center / contain no-repeat; }
#veda-approved .va-product-link a:hover { color: var(--va-red); }
#veda-approved .va-product-image { position: relative; overflow: hidden; min-height: 500px; }
#veda-approved .va-product-image .wp-block-image { position: absolute; z-index: 1; width: auto; height: 122%; top: 7%; }
#veda-approved .va-product-image .wp-block-image img { width: auto; height: 100%; max-width: none; }
#veda-approved .va-rd05-image { background: radial-gradient(ellipse at 65% 32%, #f4f4f4, #dce0e1 80%); }
#veda-approved .va-rd05-image img { filter: drop-shadow(-8px 9px 18px #0002); }
#veda-approved .va-product-rd11 { grid-template-columns: 51% 49%; border-top: 0; background: var(--va-dark); }
#veda-approved .va-product-rd11 .va-product-copy { padding-left: 29px; padding-right: var(--va-pad); }
#veda-approved .va-product-rd11 h2 { color: #fff; }
#veda-approved .va-product-rd11 .va-eyebrow { color: var(--va-on-dark-muted); }
#veda-approved .va-product-rd11 .va-product-subtitle { color: #f1f2f2; font-size: clamp(22px, 2.15cqw, 31px); }
#veda-approved .va-product-rd11 .va-feature-list { border-color: #515a61; }
#veda-approved .va-product-rd11 .va-feature-list li { color: #e4e7e9; font-size: clamp(17px, 1.7cqw, 24px); }
#veda-approved .va-product-rd11 .va-product-link a { color: #fff; border-color: var(--va-on-dark-line); }
#veda-approved .va-product-rd11 .va-product-link a:hover { color: var(--va-red); }
#veda-approved .va-rd11-image { border-right: 1px solid #4c555c; }
#veda-approved .va-rd11-image::before { content: ""; position: absolute; z-index: 0; top: 0; width: 15px; height: 100%; background: var(--va-red); }
#veda-approved .va-rd11-image img { filter: drop-shadow(-12px 12px 20px #0007); }
/* Keep the designed photo position, but never let the converter drift off-centre on wide screens. The photo is
   122% of the box height tall, so its width is 0.7754 (RD05) / 0.7236 (RD11) × the box height, which is the
   section's minimum height. Left = max(designed %, centred). */
#veda-approved .va-product-image { --va-box-h: max(500px, min(51.7cqw, 746px)); }
#veda-approved .va-rd05-image .wp-block-image { left: max(13%, 50% - .3877 * var(--va-box-h)); }
#veda-approved .va-rd11-image .wp-block-image { left: max(24%, 50% - .3618 * var(--va-box-h)); }
#veda-approved .va-rd11-image::before { left: calc(max(24%, 50% - .3618 * var(--va-box-h)) - 10%); }

/* Four illustrated application panels; a two-by-two grid on phones. */
#veda-approved .va-applications { padding: 46px var(--va-pad) 44px; }
#veda-approved .va-applications h2 { margin-top: 24px; font-size: clamp(30px, 3.9cqw, 56px); color: var(--va-ink); line-height: 1.08; letter-spacing: -.025em; }
#veda-approved .va-applications-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; margin-top: 38px; }
#veda-approved .va-application { min-width: 0; padding: 0; border: 1px solid #d4dadd; background: #f8f9f7; }
#veda-approved .va-application-art { display: flex; align-items: center; justify-content: center; height: clamp(140px, 14cqw, 190px); padding: 12px; border-bottom: 1px solid #d4dadd; background: radial-gradient(ellipse at 50% 48%, #ffffff, #e9eef0); }
#veda-approved .va-application-art img { width: 100%; max-width: 260px; height: auto; object-fit: contain; }
#veda-approved .va-application h3 { padding: 20px 18px; font-size: clamp(21px, 2.1cqw, 31px); color: var(--va-ink); line-height: 1.1; letter-spacing: -.02em; }
#veda-approved .va-application p { margin-top: 14px; padding: 0 18px 18px; color: var(--va-muted); font-size: clamp(17px, 1.7cqw, 24px); line-height: 1.25; }

@media (min-width: 1600px) {
  #veda-approved .va-hero { min-height: 1126px; }
}
@media (max-width: 1199px) and (min-width: 761px) {
  #veda-approved .va-hero-copy { padding-right: 25px; padding-bottom: 27px; padding-top: 7.4cqw; }
  #veda-approved .va-hero h1 { font-size: 6cqw; }
  #veda-approved .va-hero h1::before { margin-bottom: 20px; }
  #veda-approved .va-hero-lead { margin-top: 28px; font-size: 2.35cqw; }
  #veda-approved .va-hero-copy .wp-block-buttons { margin-top: 28px; }
  #veda-approved .va-hero-contact { width: 20.3cqw; }
  #veda-approved .va-hero-contact .wp-block-button__link { min-height: 48px; padding: 16px 22px; font-size: 12px; }
  #veda-approved .va-acquisition { width: 25cqw; padding-top: 20px; }
  #veda-approved .va-facts { padding-block: 25px; }
  #veda-approved .va-fact { padding-inline: 22px; }
  #veda-approved .va-fact-value { font-size: 2.1cqw; }
  #veda-approved .va-fact-label { font-size: 1.45cqw; }
  #veda-approved .va-intro { padding-block: 38px; }
  #veda-approved .va-intro h2 { font-size: 5.35cqw; }
  #veda-approved .va-intro h2::before { margin-bottom: 23px; }
  #veda-approved .va-product-copy { padding-block: 36px; }
  #veda-approved .va-product h2 { font-size: 5cqw; margin-top: 22px; }
  #veda-approved .va-product-subtitle { font-size: 2.55cqw; margin-top: 20px; }
  #veda-approved .va-product-image { min-height: 51.7cqw; }
  #veda-approved .va-feature-list { margin-top: 20px; padding-top: 10px; }
  #veda-approved .va-feature-list li { font-size: 1.65cqw; padding-left: 40px; margin-top: 10px; }
  #veda-approved .va-feature-list li::before { width: 21px; }
  #veda-approved .va-product-link { font-size: 1.65cqw; margin-top: 26px; }
  #veda-approved .va-product-rd11 .va-product-subtitle { font-size: 2.15cqw; }
  #veda-approved .va-product-rd11 .va-feature-list li { font-size: 1.7cqw; }
  #veda-approved .va-applications { padding-block: 32px; }
  #veda-approved .va-application h3 { font-size: 2.1cqw; }
  #veda-approved .va-application p { font-size: 1.7cqw; }
}
@media (max-width: 760px) {
  #veda-approved .va-hero { grid-template-columns: 1fr; }
  #veda-approved .va-hero-copy { padding: 52px var(--va-pad) 36px; }
  #veda-approved .va-hero h1 { font-size: clamp(41px, 8cqw, 60px); line-height: 1; }
  #veda-approved .va-hero h1::before { margin-bottom: 24px; }
  #veda-approved .va-hero-lead { max-width: 470px; font-size: 23px; line-height: 1.25; margin-top: 29px; }
  #veda-approved .va-hero-copy .wp-block-buttons { margin-top: 28px; }
  #veda-approved .va-hero-contact { width: 230px; }
  #veda-approved .va-hero-contact .wp-block-button__link { min-height: 54px; font-size: 14px; }
  #veda-approved .va-acquisition { display: none; }
  #veda-approved .va-hero-scene { min-height: 580px; }
  #veda-approved .va-hero-stage { left: 0; width: 100%; height: 100%; transform: none; }
  #veda-approved .va-hero-stage::before { top: 0; height: 76%; }
  #veda-approved .va-hero-rd11 { right: 9%; }
  #veda-approved .va-facts { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 20px var(--va-pad); }
  #veda-approved .va-fact { padding: 20px 15px; }
  #veda-approved .va-fact:nth-child(odd) { border-left: 0; padding-left: 0; }
  #veda-approved .va-fact-value { white-space: normal; font-size: 21px; line-height: 1.15; }
  #veda-approved .va-fact-label { font-size: 15px; }
  #veda-approved .va-intro { grid-template-columns: 1fr; padding: 46px 0; gap: 24px; }
  #veda-approved .va-intro h2 { font-size: clamp(30px, 5.9cqw, 42px); line-height: 1.05; }
  #veda-approved .va-intro p { padding-left: 0; font-size: 19px; max-width: 550px; }
  #veda-approved .va-product, #veda-approved .va-product-rd11 { grid-template-columns: 1fr; }
  #veda-approved .va-product-copy, #veda-approved .va-product-rd11 .va-product-copy { padding: 42px var(--va-pad) 46px; }
  #veda-approved .va-product h2 { font-size: clamp(35px, 7cqw, 48px); }
  #veda-approved .va-product-subtitle { font-size: 27px; }
  #veda-approved .va-feature-list li { padding-left: 42px; font-size: 18px; }
  #veda-approved .va-product-link { font-size: 18px; }
  #veda-approved .va-product-image { min-height: 590px; }
  #veda-approved .va-rd05-image .wp-block-image { top: 5%; left: 22%; height: 122%; }
  #veda-approved .va-rd11-image { order: 2; border: 0; }
  #veda-approved .va-rd11-image .wp-block-image { left: 24%; }
  #veda-approved .va-rd11-image::before { left: 14%; }
  #veda-approved .va-product-rd11 .va-product-subtitle { font-size: 25px; }
  #veda-approved .va-product-rd11 .va-feature-list li { font-size: 18px; }
  #veda-approved .va-applications { padding: 42px var(--va-pad); }
  #veda-approved .va-applications h2 { font-size: 34px; }
  #veda-approved .va-applications-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  #veda-approved .va-application-art { height: clamp(110px, 28cqw, 170px); padding: 9px; }
  #veda-approved .va-application h3 { padding: 15px 12px; font-size: clamp(16px, 4.4cqw, 22px); line-height: 1.1; }
  #veda-approved .va-application p { font-size: 17px; }
}
@media (max-width: 400px) {
  #veda-approved .va-hero h1 { font-size: 39px; }
  #veda-approved .va-hero-scene { min-height: 450px; }
  #veda-approved .va-product-image { min-height: 475px; }
  #veda-approved .va-fact-value { font-size: 19px; }
}