/* VRPA / shared image-led native service-page layout.
   Scope: .vrpe-page on ERPNext and Custom Back Office pages only.
   Uses semantic tokens from vrpa-brand-tokens.css and existing concept photos.
   The PageBuilder article width override applies only to this editorial layout.
   Other site pages retain their default styles. */
html body #brx-content:has(> .vrpe-page){width:100%!important;max-width:none!important;padding:0!important;display:block!important}
html body #brx-content .vrpe-page img[src*="/wp-content/uploads/2026/11/vrpa-"]{filter:none!important}
.vrpe-page{
  --vrpe-max:var(--vrpa-content-width);
  width:100%;margin:0;background:var(--vrpa-surface);
  color:var(--vrpa-text);font-family:var(--vrpa-font-family);
  font-size:16px;line-height:1.7;overflow:clip
}
.vrpe-page *{box-sizing:border-box}
.vrpe-page h1,.vrpe-page h2,.vrpe-page h3,.vrpe-page p,.vrpe-page figure{margin:0}
.vrpe-page img{display:block;width:100%;height:100%;object-fit:cover}
.vrpe-page a{text-decoration:none}
.vrpe-page a:focus-visible,.vrpe-page summary:focus-visible{outline:3px solid var(--vrpa-primary);outline-offset:5px}
.vrpe-container{width:min(calc(100% - 64px),var(--vrpe-max));margin-inline:auto}
.vrpe-eyebrow,.vrpe-kicker{font-size:12px;font-weight:700;letter-spacing:.16em;line-height:1.45;text-transform:uppercase}
.vrpe-eyebrow{color:var(--vrpa-text-muted)}
.vrpe-page h2{font-size:clamp(30px,3.4vw,46px);font-weight:700;letter-spacing:-.035em;line-height:1.23;text-wrap:balance}
.vrpe-page h3{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.35}
.vrpe-page p{max-width:72ch}
.vrpe-hero{display:grid;grid-template-columns:minmax(0,48fr) minmax(0,52fr);background:var(--vrpa-navy);color:var(--vrpa-white);min-height:610px;isolation:isolate}
.vrpe-hero-copy{padding:clamp(48px,6vw,88px) clamp(28px,5vw,92px);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0}
.vrpe-kicker{color:var(--vrpa-primary);margin-bottom:22px!important}
.vrpe-hero h1{font-size:clamp(36px,4.4vw,66px);font-weight:700;line-height:1.14;letter-spacing:-.045em;text-wrap:balance;max-width:740px}
.vrpe-hero h1 span{display:block;color:var(--vrpa-primary);margin-top:8px}
.vrpe-lead{font-size:clamp(16px,1.5vw,19px);line-height:1.8;color:var(--vrpa-gray-300);margin-top:24px!important;max-width:60ch}
.vrpe-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.vrpe-btn-primary,.vrpe-btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:50px;padding:12px 22px;font-weight:700;font-size:15px;border-radius:var(--vrpa-radius-sm);transition:transform var(--vrpa-motion-fast),background var(--vrpa-motion-fast)}
.vrpe-btn-primary{background:var(--vrpa-primary);color:var(--vrpa-on-primary)!important;border:1px solid var(--vrpa-primary)}
.vrpe-btn-outline{color:var(--vrpa-white)!important;border:1px solid var(--vrpa-navy-edge);background:var(--vrpa-navy-raised)}
.vrpe-btn-primary:hover,.vrpe-btn-outline:hover{transform:translateY(-2px)}
.vrpe-hero-meta{font-size:12px;color:var(--vrpa-gray-300);margin-top:28px!important;letter-spacing:.015em}
.vrpe-hero-media{position:relative;min-height:500px;overflow:hidden}
.vrpe-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-position:57% center}
.vrpe-hero-media figcaption{position:absolute;bottom:18px;right:20px;padding:6px 10px;font-size:11px;font-weight:600;color:var(--vrpa-white);background:var(--vrpa-navy);border-radius:var(--vrpa-radius-sm)}
.vrpe-local-nav{display:flex;justify-content:center;gap:clamp(16px,4vw,68px);flex-wrap:wrap;padding:20px 28px;background:var(--vrpa-gray-50);border-bottom:1px solid var(--vrpa-border)}
.vrpe-local-nav a{font-size:14px;font-weight:700;color:var(--vrpa-text);padding:8px 2px;border-bottom:2px solid var(--vrpa-border)}
.vrpe-local-nav a:hover{border-color:var(--vrpa-primary)}
#vrpe-approach,#vrpe-scope,#vrpe-delivery,#vrpe-faq{scroll-margin-top:100px}
.vrpe-intro{display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr);gap:clamp(30px,6vw,96px);padding-block:clamp(78px,8vw,126px)}
.vrpe-intro-heading h2{margin-top:18px}
.vrpe-intro-body>p{font-size:18px;line-height:1.9;color:var(--vrpa-text-muted)}
.vrpe-principles{display:grid;gap:19px;margin-top:34px}
.vrpe-principles>div{display:grid;grid-template-columns:10px minmax(0,1fr);gap:6px 16px;padding-bottom:20px;border-bottom:1px solid var(--vrpa-border)}
.vrpe-principles>div::before{content:"";grid-column:1;grid-row:1/span 2;width:6px;height:6px;margin-top:10px;background:var(--vrpa-primary);border-radius:50%}
.vrpe-principles strong{font-size:16px;line-height:1.55}
.vrpe-principles span{grid-column:2;font-size:14px;line-height:1.7;color:var(--vrpa-text-muted)}
.vrpe-scope{padding-block:clamp(76px,8vw,116px);background:var(--vrpa-gray-100)}
.vrpe-heading-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(250px,.6fr);gap:40px;align-items:end;margin-bottom:40px}
.vrpe-heading-row h2{margin-top:14px;max-width:750px}
.vrpe-heading-row>p{color:var(--vrpa-text-muted);font-size:16px;line-height:1.8;max-width:40ch}
.vrpe-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.vrpe-gallery-card{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);min-height:295px;overflow:hidden;background:var(--vrpa-surface);border:1px solid var(--vrpa-border);border-radius:var(--vrpa-radius-lg);transition:transform var(--vrpa-motion-fast),box-shadow var(--vrpa-motion-fast)}
.vrpe-gallery-card:hover{transform:translateY(-3px)}
.vrpe-gallery-card figure{min-height:290px;overflow:hidden}
.vrpe-gallery-card img{transition:transform .35s ease}
.vrpe-gallery-card:hover img{transform:scale(1.035)}
.vrpe-gallery-copy{padding:clamp(20px,2.5vw,30px);display:flex;flex-direction:column;min-width:0}
.vrpe-gallery-label{font-size:11px;letter-spacing:.09em;font-weight:700;color:var(--vrpa-text-muted);margin-bottom:14px}
.vrpe-gallery-copy h3{font-size:clamp(20px,1.7vw,23px);color:var(--vrpa-text);text-wrap:balance}
.vrpe-gallery-copy p{margin-top:13px;color:var(--vrpa-text-muted);font-size:14px;line-height:1.72}
.vrpe-gallery-more{margin-top:auto;padding-top:20px;font-size:13px;font-weight:700;color:var(--vrpa-text);display:flex;justify-content:space-between;gap:12px}
.vrpe-gallery-more>span{color:var(--vrpa-text)}
.vrpe-asset-disclosure{padding-top:22px;font-size:12px;color:var(--vrpa-text-muted)}
.vrpe-delivery{display:grid;grid-template-columns:minmax(0,47fr) minmax(0,53fr);gap:clamp(30px,7vw,96px);align-items:center;padding-block:clamp(78px,10vw,150px)}
.vrpe-delivery-media{position:relative;align-self:stretch;min-height:600px}
.vrpe-delivery-media figure{height:100%;width:100%;border-radius:var(--vrpa-radius-lg);overflow:hidden}
.vrpe-delivery-media img{object-position:50% center}
.vrpe-media-caption{position:absolute;bottom:18px;left:20px;background:var(--vrpa-surface);color:var(--vrpa-text);padding:10px 12px;border-radius:var(--vrpa-radius-sm);font-size:11px;font-weight:700;letter-spacing:.12em}
.vrpe-delivery-copy h2{margin-top:14px}
.vrpe-timeline{padding:0;margin:35px 0 27px;list-style:none;display:grid;gap:0}
.vrpe-timeline li{display:grid;grid-template-columns:44px 1fr;column-gap:18px;align-items:start;padding:0 0 26px;position:relative}
.vrpe-timeline li:not(:last-child)::before{content:"";position:absolute;left:22px;top:43px;bottom:0;border-left:1px solid var(--vrpa-border)}
.vrpe-step-number{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--vrpa-gray-100);color:var(--vrpa-text);border:1px solid var(--vrpa-border);font-size:12px;font-weight:700;z-index:1}
.vrpe-timeline h3{font-size:18px;line-height:1.45}
.vrpe-timeline p{font-size:14px;line-height:1.75;color:var(--vrpa-text-muted);margin-top:5px}
.vrpe-inline-link{display:inline-flex;align-items:center;gap:15px;font-weight:700;font-size:15px;color:var(--vrpa-text)!important;border-bottom:2px solid var(--vrpa-primary);padding-bottom:7px}
.vrpe-inline-link:hover{border-color:var(--vrpa-text)}
.vrpe-people{background:var(--vrpa-navy);color:var(--vrpa-white)}
.vrpe-people-grid{display:grid;grid-template-columns:minmax(0,48fr) minmax(0,52fr);gap:clamp(32px,6vw,90px);align-items:center;padding-block:80px}
.vrpe-people-copy .vrpe-eyebrow{color:var(--vrpa-primary)}
.vrpe-people-copy h2{margin-top:20px}
.vrpe-people-copy>p:not(.vrpe-eyebrow){margin:25px 0 30px;color:var(--vrpa-gray-300);font-size:17px;line-height:1.9}
.vrpe-people .vrpe-inline-link{color:var(--vrpa-white)!important}
.vrpe-people figure{height:370px;border-radius:var(--vrpa-radius-lg);overflow:hidden}
.vrpe-faq{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:clamp(32px,6vw,100px);padding-block:clamp(80px,9vw,126px)}
.vrpe-faq h2{margin-top:18px}
.vrpe-faq>div>p:not(.vrpe-eyebrow){margin-top:20px;color:var(--vrpa-text-muted)}
.vrpe-faq-list{border-top:1px solid var(--vrpa-border)}
.vrpe-faq details{border-bottom:1px solid var(--vrpa-border);padding:23px 4px}
.vrpe-faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;font-size:17px;line-height:1.5;font-weight:700;list-style:none;color:var(--vrpa-text)}
.vrpe-faq summary::-webkit-details-marker{display:none}
.vrpe-faq summary::after{content:"+";font-size:24px;font-weight:400;flex:0 0 auto}
.vrpe-faq details[open] summary::after{content:"−"}
.vrpe-faq details p{font-size:15px;line-height:1.8;margin-top:15px;color:var(--vrpa-text-muted)}
.vrpe-last{padding-block:74px;background:var(--vrpa-navy-raised);color:var(--vrpa-white)}
.vrpe-last-grid{display:flex;align-items:center;justify-content:space-between;gap:35px}
.vrpe-last .vrpe-eyebrow{color:var(--vrpa-primary)}
.vrpe-last h2{max-width:760px;margin-top:16px}
.vrpe-last p:not(.vrpe-eyebrow){margin-top:15px;color:var(--vrpa-gray-300)}
.vrpe-last .vrpe-btn-primary{flex:0 0 auto}
@media(max-width:1120px){
  .vrpe-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:535px}
  .vrpe-hero-copy{padding:56px 35px}
  .vrpe-gallery-card{grid-template-columns:1fr}
  .vrpe-gallery-card figure{height:230px;min-height:0}
  .vrpe-gallery-copy{min-height:245px}
  .vrpe-delivery-media{min-height:520px}
}
@media(max-width:760px){
  .vrpe-container{width:min(calc(100% - 36px),var(--vrpe-max))}
  .vrpe-hero{grid-template-columns:1fr}
  .vrpe-hero-copy{padding:56px 22px 50px}
  .vrpe-hero h1{font-size:clamp(37px,9vw,52px)}
  .vrpe-hero-media{min-height:320px;height:48vw;max-height:440px}
  .vrpe-hero-media img{position:relative}
  .vrpe-local-nav{justify-content:flex-start;gap:10px 22px;padding:15px 18px}
  .vrpe-local-nav a{font-size:12px}
  .vrpe-intro,.vrpe-delivery,.vrpe-people-grid,.vrpe-faq{grid-template-columns:1fr}
  .vrpe-intro{padding-block:72px}
  .vrpe-heading-row{grid-template-columns:1fr;gap:18px}
  .vrpe-gallery{grid-template-columns:1fr}
  .vrpe-gallery-card{grid-template-columns:38% 1fr;min-height:245px}
  .vrpe-gallery-card figure{height:100%;min-height:245px}
  .vrpe-gallery-copy{min-height:0}
  .vrpe-delivery{padding-block:80px}
  .vrpe-delivery-media{min-height:350px;height:60vw}
  .vrpe-people-grid{padding-block:70px}
  .vrpe-people figure{height:320px}
  .vrpe-faq{padding-block:75px}
  .vrpe-last-grid{align-items:flex-start;flex-direction:column}
}
@media(max-width:520px){
  .vrpe-actions{flex-direction:column;align-items:stretch;width:100%}
  .vrpe-btn-primary,.vrpe-btn-outline{justify-content:center}
  .vrpe-hero-media{min-height:270px}
  .vrpe-gallery-card{grid-template-columns:1fr}
  .vrpe-gallery-card figure{height:210px;min-height:0}
  .vrpe-gallery-copy{padding:22px;min-height:0}
  .vrpe-gallery-more{padding-top:20px}
  .vrpe-delivery-media{height:360px}
  .vrpe-people figure{height:260px}
}
@media(prefers-reduced-motion:reduce){
  .vrpe-page *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}


/* ERPNext depth: module reference, industry scenarios, integration and handover.
   This layer is deliberately scoped to .vrpe-page and uses shared VRPA tokens only. */
#vrpe-modules,#vrpe-usecases,#vrpe-handoff{scroll-margin-top:100px}
.vrpe-modules{padding-block:clamp(78px,8vw,124px)}
.vrpe-modules-heading,.vrpe-handoff-heading{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(240px,.55fr);gap:clamp(24px,5vw,75px);align-items:end;margin-bottom:36px}
.vrpe-modules-heading h2,.vrpe-handoff-heading h2{margin-top:15px}
.vrpe-modules-heading>p,.vrpe-handoff-heading>p{font-size:16px;line-height:1.85;color:var(--vrpa-text-muted);max-width:43ch}
.vrpe-modules-index{border-top:1px solid var(--vrpa-border)}
.vrpe-module-row{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.02fr);column-gap:clamp(20px,3vw,48px);align-items:start;padding:26px 0;border-bottom:1px solid var(--vrpa-border)}
.vrpe-module-number{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--vrpa-gray-500);padding-top:5px;line-height:1.55}
.vrpe-module-name h3{font-size:clamp(19px,1.7vw,23px)}
.vrpe-module-name p{margin-top:7px;font-size:15px;line-height:1.8;color:var(--vrpa-text-muted)}
.vrpe-module-documents{border-left:2px solid var(--vrpa-primary);padding-left:22px}
.vrpe-module-documents>span{display:block;margin:0 0 7px;color:var(--vrpa-text-muted);font-size:11px;font-weight:700;letter-spacing:.10em}
.vrpe-module-documents p{font-size:15px;line-height:1.75;color:var(--vrpa-text)}
.vrpe-module-foot{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;padding-top:28px}
.vrpe-module-foot p{color:var(--vrpa-text-muted);font-size:14px;max-width:64ch}
.vrpe-module-foot .vrpe-inline-link{flex:0 0 auto}
.vrpe-usecases{background:var(--vrpa-gray-50);border-top:1px solid var(--vrpa-border);border-bottom:1px solid var(--vrpa-border)}
.vrpe-usecases-grid{display:grid;grid-template-columns:minmax(0,43fr) minmax(0,57fr);gap:clamp(32px,6vw,86px);align-items:stretch;padding-block:clamp(72px,8vw,112px)}
.vrpe-usecases-photo{height:100%;min-height:650px;position:relative;border-radius:var(--vrpa-radius-lg);overflow:hidden}
.vrpe-usecases-photo img{object-position:center center}
.vrpe-usecases-photo figcaption{position:absolute;bottom:14px;left:14px;padding:8px 10px;border-radius:var(--vrpa-radius-sm);background:var(--vrpa-navy);color:var(--vrpa-white);font-size:11px;line-height:1.5;font-weight:600;max-width:calc(100% - 28px)}
.vrpe-usecases-content{align-self:center;min-width:0}
.vrpe-usecases-content h2{margin-top:14px}
.vrpe-usecases-lead{margin-top:18px!important;color:var(--vrpa-text-muted);font-size:16px;line-height:1.85}
.vrpe-scenario-list{margin-top:28px;margin-bottom:27px;border-top:1px solid var(--vrpa-border)}
.vrpe-scenario{display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;padding:22px 0 21px;border-bottom:1px solid var(--vrpa-border)}
.vrpe-scenario-number{font-size:12px;font-weight:700;color:var(--vrpa-text-muted);padding-top:4px}
.vrpe-scenario h3{font-size:20px;line-height:1.4}
.vrpe-scenario strong{display:block;margin-top:6px;font-size:15px;line-height:1.7;color:var(--vrpa-text)}
.vrpe-scenario p{font-size:14px;line-height:1.8;color:var(--vrpa-text-muted);margin-top:6px}
.vrpe-handoff{background:var(--vrpa-gray-100);padding-block:clamp(76px,8vw,120px)}
.vrpe-handoff-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1px solid var(--vrpa-border);border-radius:var(--vrpa-radius-lg);overflow:hidden;background:var(--vrpa-surface)}
.vrpe-handoff-column{padding:clamp(24px,3.7vw,48px)}
.vrpe-handoff-column+.vrpe-handoff-column{border-left:1px solid var(--vrpa-border)}
.vrpe-handoff-subheading{padding-bottom:24px;min-height:200px}
.vrpe-handoff-index{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--vrpa-radius-sm);font-weight:700;background:var(--vrpa-primary);color:var(--vrpa-on-primary);margin-bottom:16px}
.vrpe-handoff-subheading h3{font-size:24px}
.vrpe-handoff-subheading>p{font-size:15px;line-height:1.78;color:var(--vrpa-text-muted);margin-top:9px}
.vrpe-handoff-items{margin:0;padding:0;list-style:none;border-top:1px solid var(--vrpa-border)}
.vrpe-handoff-items>article,.vrpe-handoff-items>li{padding:19px 0;border-bottom:1px solid var(--vrpa-border)}
.vrpe-handoff-items h4{font-size:17px;line-height:1.45;font-weight:700;margin:0}
.vrpe-handoff-items p{font-size:14px;line-height:1.75;color:var(--vrpa-text-muted);margin-top:5px}
.vrpe-handoff-column>.vrpe-inline-link{margin-top:25px}
@media(max-width:960px){
 .vrpe-modules-heading,.vrpe-handoff-heading{grid-template-columns:minmax(0,1fr) minmax(220px,.7fr);gap:30px}
 .vrpe-module-row{grid-template-columns:38px minmax(0,1.1fr) minmax(0,.95fr);gap:15px}
 .vrpe-module-documents{padding-left:16px}
 .vrpe-usecases-grid{grid-template-columns:minmax(0,39fr) minmax(0,61fr);gap:34px}
 .vrpe-usecases-photo{min-height:720px}
 .vrpe-handoff-column{padding:25px}
}
@media(max-width:760px){
 .vrpe-modules-heading,.vrpe-handoff-heading{grid-template-columns:1fr;gap:15px}
 .vrpe-modules-heading>p,.vrpe-handoff-heading>p{max-width:70ch}
 .vrpe-module-row{grid-template-columns:35px minmax(0,1fr);gap:10px 13px;padding:22px 0}
 .vrpe-module-documents{grid-column:2;padding-left:12px;border-left:2px solid var(--vrpa-primary);margin-top:4px}
 .vrpe-module-documents>span{margin-bottom:5px}
 .vrpe-module-foot{align-items:flex-start;flex-direction:column}
 .vrpe-usecases-grid{grid-template-columns:1fr;gap:30px}
 .vrpe-usecases-photo{height:330px;min-height:0}
 .vrpe-handoff-columns{grid-template-columns:1fr}
 .vrpe-handoff-column+.vrpe-handoff-column{border-left:0;border-top:1px solid var(--vrpa-border)}
 .vrpe-handoff-subheading{min-height:0}
}
@media(max-width:520px){
 .vrpe-usecases-photo{height:260px}
 .vrpe-module-documents p{font-size:14px}
 .vrpe-handoff-column{padding:22px}
}

/* Extra concept photography for ERPNext module and integration sections.
   Generated images are illustrative; keep all styling local to .vrpe-page. */
.vrpe-modules-photo,.vrpe-handoff-photo{
  position:relative;overflow:hidden;border-radius:var(--vrpa-radius-lg);
  background:var(--vrpa-gray-100);
}
.vrpe-modules-photo{height:clamp(250px,28vw,370px);margin-bottom:32px}
.vrpe-handoff-photo{height:clamp(250px,25vw,350px);margin-bottom:24px}
.vrpe-modules-photo img,.vrpe-handoff-photo img{width:100%;height:100%;object-fit:cover}
.vrpe-modules-photo img{object-position:50% 45%}
.vrpe-handoff-photo img{object-position:50% 48%}
.vrpe-modules-photo figcaption,.vrpe-handoff-photo figcaption{
  position:absolute;bottom:15px;left:18px;max-width:calc(100% - 36px);
  padding:8px 12px;border-radius:var(--vrpa-radius-sm);
  background:var(--vrpa-navy);color:var(--vrpa-white);
  font-size:12px;font-weight:700;line-height:1.55
}
@media(max-width:760px){
  .vrpe-modules-photo{height:250px;margin-bottom:24px}
  .vrpe-handoff-photo{height:250px;margin-bottom:22px}
}
@media(max-width:520px){
  .vrpe-modules-photo,.vrpe-handoff-photo{height:215px}
  .vrpe-modules-photo figcaption,.vrpe-handoff-photo figcaption{left:12px;bottom:12px;max-width:calc(100% - 24px);font-size:11px}
}

/* PageBuilder's native Image element adds its own wrapper. Keep editorial photos filling their existing sections. */
html body #brx-content .vrpe-page .brxe-image{width:100%;height:100%;min-width:0;min-height:0}
html body #brx-content .vrpe-page .brxe-image img{display:block;width:100%;height:100%;object-fit:cover}