/* ARVENSIS — VR TRAINING PAGE
   Page-specific CSS. Keep css/style.css unchanged. */

:root{--vr-navy:#0b3557;--vr-blue:#299fd5;--vr-soft:#eef7fb;--vr-line:rgba(11,53,87,.14);--vr-text:#294b68}
.vr-hero{padding:128px 0 64px;background:radial-gradient(circle at 80% 18%,rgba(41,159,213,.12),transparent 32%),linear-gradient(180deg,#f5fbfe 0%,#fff 100%);overflow:hidden}
.vr-hero__inner{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:58px;align-items:center}
.vr-eyebrow,.eyebrow{display:inline-block;margin-bottom:20px;color:var(--vr-blue);font-family:var(--font-display);font-size:.75rem;font-weight:700;letter-spacing:.24em;line-height:1.4}
.vr-hero h1{max-width:650px;margin:0;color:var(--vr-navy);font-family:var(--font-display);font-size:clamp(2.75rem,4.65vw,4.75rem);font-weight:500;line-height:.98;letter-spacing:-.055em}
.vr-hero h1 em,.vr-section-head em,.vr-intro__content em,.vr-why h2 em,.vr-cta h2 em{color:var(--vr-blue);font-style:normal}
.vr-hero__lead{max-width:590px;margin:28px 0 0;color:var(--vr-text);font-family:var(--font-body);font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.75}
.vr-hero__actions{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:30px}
.vr-text-link{color:var(--vr-navy);font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.vr-image-frame{position:relative;min-height:0;aspect-ratio:16/9;overflow:hidden;border-radius:24px;background:#dcecf4;box-shadow:0 24px 65px rgba(11,53,87,.13)}
.vr-image-frame img{width:100%;height:100%;display:block;object-fit:cover}
.vr-image-placeholder{display:grid;place-items:center;background:radial-gradient(circle at 72% 28%,rgba(41,159,213,.28),transparent 30%),radial-gradient(circle at 25% 75%,rgba(11,53,87,.08),transparent 32%),linear-gradient(135deg,#dcecf4,#f8fcfe)}
.vr-image-placeholder__content{display:grid;gap:8px;text-align:center;color:var(--vr-navy);padding:28px}
.vr-image-placeholder__content span{font-size:.72rem;font-weight:700;letter-spacing:.2em;color:var(--vr-blue)}
.vr-image-placeholder__content strong{font-family:var(--font-display);font-size:clamp(1.3rem,2vw,1.7rem);font-weight:500}
.vr-image-placeholder__content small{color:#55738b}
.vr-hero__statement{display:flex;gap:34px;margin-top:52px;padding-top:24px;border-top:1px solid var(--vr-line);color:var(--vr-navy);font-family:var(--font-display);font-size:clamp(1rem,1.6vw,1.35rem);font-weight:600}
.section{padding:120px 0}
.vr-section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.55fr);gap:60px;align-items:end;margin-bottom:55px}
.section-title{max-width:900px;margin:0;color:var(--vr-navy);font-family:var(--font-display);font-size:clamp(2rem,4vw,4rem);font-weight:500;line-height:1.04;letter-spacing:-.045em}
.vr-section-head>p{margin:0;color:var(--vr-text);font-size:1rem;line-height:1.8}
.vr-video__wrapper{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:24px;background:#092f4e;box-shadow:0 25px 70px rgba(11,53,87,.15)}
.vr-video__placeholder{height:100%;display:grid;place-content:center;gap:10px;text-align:center;color:#fff;padding:30px;background:radial-gradient(circle at 75% 20%,rgba(57,169,216,.3),transparent 28%),linear-gradient(135deg,#0b3557,#092d49)}
.vr-video__placeholder span{font-size:.7rem;font-weight:700;letter-spacing:.25em;color:#7fd1f0}
.vr-video__placeholder strong{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.8rem)}
.vr-video__placeholder small{color:rgba(255,255,255,.72)}
.vr-intro{background:var(--vr-soft)}
.vr-intro__inner,.vr-why__inner{display:grid;grid-template-columns:.45fr 1fr;gap:80px}
.vr-intro__content h2,.vr-why h2{max-width:850px;margin:0 0 30px;color:var(--vr-navy);font-family:var(--font-display);font-size:clamp(2rem,4.2vw,4.5rem);font-weight:500;line-height:1.02;letter-spacing:-.05em}
.vr-intro__content p{max-width:850px;margin:0 0 22px;color:var(--vr-text);font-size:1.05rem;line-height:1.85}
.vr-professional-grid,.vr-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--vr-line);border:1px solid var(--vr-line)}
.vr-professional-card,.vr-feature{background:#fff;padding:42px}
.vr-card-index,.vr-feature__number{display:block;margin-bottom:40px;color:var(--vr-blue);font-family:var(--font-display);font-size:.75rem;font-weight:700;letter-spacing:.18em}
.vr-professional-card h3,.vr-feature h3,.vr-process__item h3,.vr-hospital-row h3,.vr-why__content h3{margin:0 0 16px;color:var(--vr-navy);font-family:var(--font-display);font-size:clamp(1.35rem,2vw,2rem);line-height:1.15}
.vr-professional-card ul{display:grid;gap:10px;margin:0;padding-left:18px;color:var(--vr-text);line-height:1.6}
.vr-scenarios{background:#f7fbfd}
.vr-scenario-list{border-top:1px solid var(--vr-line)}
.vr-scenario{display:grid;grid-template-columns:80px 1fr 40px;gap:28px;align-items:center;padding:28px 0;border-bottom:1px solid var(--vr-line);transition:padding .25s ease,background .25s ease}
.vr-scenario:hover{padding-left:16px;padding-right:16px;background:rgba(255,255,255,.75)}
.vr-scenario__number{color:var(--vr-blue);font-size:.75rem;font-weight:700;letter-spacing:.16em}
.vr-scenario h3{margin:0 0 8px;color:var(--vr-navy);font-family:var(--font-display);font-size:clamp(1.35rem,2.4vw,2.1rem)}
.vr-scenario p{margin:0;max-width:720px;color:var(--vr-text);line-height:1.7}
.vr-scenario__arrow{color:var(--vr-blue);font-size:1.5rem;text-align:right}
.vr-feature{min-height:280px}
.vr-feature p,.vr-process__item p,.vr-hospital-row p,.vr-why__content p{margin:0;color:var(--vr-text);line-height:1.75}
.vr-how{background:var(--vr-navy)}
.vr-how .eyebrow,.vr-how .section-title{color:#fff}
.vr-how .section-title em{color:#66c8eb}
.vr-process{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.18)}
.vr-process__item{min-height:270px;padding:36px;background:var(--vr-navy)}
.vr-process__number{display:block;margin-bottom:55px;color:#6bc9eb;font-weight:700;letter-spacing:.16em;font-size:.75rem}
.vr-process__item h3{color:#fff}
.vr-process__item p{color:rgba(255,255,255,.72)}
.vr-hospitals{background:#f7fbfd}
.vr-hospital-list{border-top:1px solid var(--vr-line)}
.vr-hospital-row{display:grid;grid-template-columns:80px 1fr;gap:28px;padding:38px 0;border-bottom:1px solid var(--vr-line)}
.vr-hospital-row>span{color:var(--vr-blue);font-weight:700;letter-spacing:.16em}
.vr-hospital-row h3{font-size:clamp(1.45rem,2.2vw,2.25rem)}
.vr-why__content{display:grid;grid-template-columns:repeat(2,1fr);gap:55px 45px}
.vr-why__content article{padding-top:25px;border-top:1px solid var(--vr-line)}
.vr-why__content h3{font-size:1.35rem}
.vr-cta{padding-bottom:140px;background:var(--vr-soft)}
.vr-cta__inner{max-width:1050px;margin:0 auto;padding:75px;text-align:center;border-radius:28px;background:linear-gradient(135deg,#0b3557,#0c456e);box-shadow:0 30px 80px rgba(11,53,87,.18)}
.vr-cta .eyebrow{color:#72cfee}
.vr-cta h2{margin:0 auto 25px;max-width:900px;color:#fff;font-family:var(--font-display);font-size:clamp(2.2rem,4.5vw,4.8rem);font-weight:500;line-height:1;letter-spacing:-.05em}
.vr-cta p{max-width:760px;margin:0 auto 32px;color:rgba(255,255,255,.78);line-height:1.8}

@media (max-width:900px){
  .vr-hero__inner,.vr-section-head,.vr-intro__inner,.vr-why__inner{grid-template-columns:1fr}
  .vr-hero{padding-top:118px}
  .vr-image-frame{min-height:0}
  .vr-process{grid-template-columns:repeat(2,1fr)}
  .vr-why__content{grid-template-columns:1fr}
}
@media (max-width:700px){
  .section{padding:78px 0}
  .vr-hero{padding:110px 0 55px}
  .vr-hero__inner{gap:40px}
  .vr-hero h1{font-size:clamp(2.45rem,12vw,4rem)}
  .vr-hero__lead{font-size:17px;line-height:1.65}
  .vr-hero__statement{gap:16px;flex-wrap:wrap;margin-top:45px}
  .vr-section-head{gap:25px;margin-bottom:35px}
  .section-title{font-size:clamp(2rem,9vw,3rem)}
  .vr-professional-grid,.vr-feature-grid,.vr-process{grid-template-columns:1fr}
  .vr-professional-card,.vr-feature{padding:30px}
  .vr-card-index,.vr-feature__number{margin-bottom:25px}
  .vr-scenario{grid-template-columns:45px 1fr 25px;gap:12px;padding:24px 0}
  .vr-scenario:hover{padding-left:8px;padding-right:8px}
  .vr-scenario h3{font-size:1.35rem}
  .vr-scenario p{font-size:.92rem}
  .vr-hospital-row{grid-template-columns:45px 1fr;gap:12px}
  .vr-cta{padding-bottom:80px}
  .vr-cta__inner{padding:48px 24px;border-radius:20px}
}

/* ---------- VR HERO REFINEMENT ---------- */
.vr-hero__content{min-width:0}
.vr-hero__visual{min-width:0}
.vr-image-frame{width:100%}

@media (min-width:901px){
  .vr-hero__content{padding-bottom:8px}
  .vr-hero__visual{transform:translateY(4px)}
}

@media (max-width:700px){
  .vr-hero{padding:104px 0 48px}
  .vr-hero__inner{gap:34px}
  .vr-hero h1{max-width:100%;font-size:clamp(2.5rem,11.5vw,3.7rem);line-height:1}
  .vr-hero__lead{max-width:100%;margin-top:22px;font-size:16px;line-height:1.7}
  .vr-hero__actions{margin-top:26px;gap:14px}
  .vr-image-frame{border-radius:18px}
  .vr-hero__statement{margin-top:40px;padding-top:20px;gap:14px;font-size:1rem}
}


/* ---------- VR YOUTUBE VIDEO ---------- */
.vr-video__wrapper iframe{
  width:100%;
  height:100%;
  display:block;
  border:0;
}


/* ---------- VR TRAINING NAVBAR ---------- */
/* Solid light navbar for the light VR Training hero. */
.vr-nav{
  background:#fff;
  border-bottom:1px solid rgba(11,53,87,.08);
  box-shadow:0 4px 20px rgba(11,53,87,.035);
  z-index:1000;
}

.vr-nav .nav__link{
  color:var(--vr-navy);
}

.vr-nav .nav__link:hover{
  color:var(--vr-blue);
}

.vr-nav .nav__link[aria-current="page"],
.vr-nav .nav__link.is-active{
  color:var(--vr-blue);
}

.vr-nav .nav__dd-caret{
  color:currentColor;
}

.vr-nav .brand__logo{
  opacity:1;
  filter:none;
}

.vr-nav .nav__toggle span{
  background:var(--vr-navy);
}

/* Protect readability if the global JS adds a scrolled class. */
.vr-nav.nav--scrolled,
.vr-nav.scrolled{
  background:#fff;
  box-shadow:0 8px 28px rgba(11,53,87,.07);
}

@media (max-width:900px){
  .vr-nav{
    background:#fff;
  }
  .vr-nav .nav__link{
    color:var(--vr-navy);
  }
}

/* ---------- VR TRAINING CHALLENGE — 4:5 VISUAL ---------- */
.vr-intro__visual{min-width:0}
.vr-intro__visual .eyebrow{margin-bottom:20px}

.vr-intro__image-frame{
  position:relative;
  width:100%;
  max-width:430px;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:24px;
  background:#dcecf4;
  box-shadow:0 24px 65px rgba(11,53,87,.12);
}

.vr-intro__image-frame img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.vr-intro__image-placeholder{
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 72% 28%,rgba(41,159,213,.28),transparent 30%),
    radial-gradient(circle at 25% 75%,rgba(11,53,87,.08),transparent 32%),
    linear-gradient(135deg,#dcecf4,#f8fcfe);
}

.vr-intro__image-placeholder-content{
  display:grid;
  gap:8px;
  text-align:center;
  color:var(--vr-navy);
  padding:28px;
}

.vr-intro__image-placeholder-content span{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.2em;
  color:var(--vr-blue);
}

.vr-intro__image-placeholder-content strong{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,2vw,1.7rem);
  font-weight:500;
}

.vr-intro__image-placeholder-content small{color:#55738b}

@media (min-width:901px){
  .vr-intro__inner{
    grid-template-columns:minmax(280px,.45fr) minmax(0,1fr);
    gap:80px;
    align-items:center;
  }
  .vr-intro__visual{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .vr-intro__image-frame{width:min(100%,430px)}
}

@media (max-width:900px){
  .vr-intro__visual{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .vr-intro__image-frame{width:min(100%,430px)}
}

@media (max-width:700px){
  .vr-intro__image-frame{
    max-width:100%;
    border-radius:18px;
  }
  .vr-intro__visual .eyebrow{margin-bottom:16px}
}