/* Dr.MVP v2 Home (batch 4) - Views/Home/Index_v2.cshtml only. Every selector starts with .drmvpv2-home.
   Sources:
   A) delivery 01_Home/04_Implementation/home-v2-integration.css (SHA256 eee1c11e...) - new slide, pain points, course teaser cards, journey.
      Differences: :root vars moved to .drmvpv2-home; body font/color moved to the new sections only; preview-only rules
      (preview-state, auth-in/out, carousel-dots, protected-scope, footer-social, gc-*, visual--pending, back-to-top, delta-card,
      old course-card, h1 alignment) not taken; prefers-reduced-motion limited to .drmvpv2-home;
      journey: delivery line 10 ".journey ol{repeat(3,1fr)}" sits after the mobile rule and would make phones 3 columns,
      while 02_Mobile/P01_Home_v2_Section05_Mobile_Delta.png is single column -> the 1-column phone rule is re-applied after it.
   B) Content/drmvp-home.css (legacy home, unchanged) - only the rules the kept sections still use (world map, testimonials,
      videos heading), scoped. Legacy h1.title -> h2.title with Bootstrap's h1 size 2.5rem so the look does not change.
   C) Integration (not in either source, marked below): new slide CTA, slide inside the Bootstrap carousel, indicator/control
      contrast on the light slide, video grid columns. */

.drmvpv2-home{--home-navy:#082a66;--home-blue:#0b55d9;--home-soft:#f3f7fd;--home-border:#c9daf4;
  --drmvp-primary:#0F4C81;--drmvp-primary-light:#2A6B9E;--drmvp-secondary:#FF8F00;--drmvp-text:#333333;--drmvp-bg-light:#F4F7F9;--drmvp-white:#FFFFFF;
  --shadow-soft:0 10px 30px rgba(15,76,129,.08);--shadow-hover:0 15px 40px rgba(15,76,129,.15);--border-radius-lg:16px;--border-radius-md:12px;
  --transition-smooth:all .3s cubic-bezier(.25,.8,.25,1);
  background-color:var(--drmvp-bg-light);color:var(--drmvp-text)}

/* ===== A) delivered sections (font/color of the delivery's body, limited to the new sections) ===== */
.drmvpv2-home .home-hero,.drmvpv2-home .home-section{color:var(--home-navy);font-family:"Microsoft JhengHei","Noto Sans TC",Arial,sans-serif}
.drmvpv2-home .home-hero{position:relative;overflow:hidden;background:#f1f6ff}
.drmvpv2-home .home-hero__slide{min-height:520px;display:grid;grid-template-columns:minmax(0,1fr) minmax(520px,1.05fr);gap:50px;align-items:center;max-width:1440px;margin:auto;padding:42px 58px}
.drmvpv2-home .eyebrow{display:inline-block;margin:0 0 22px;padding:8px 18px;border-radius:999px;background:#e1ecff;color:var(--home-blue);font-weight:900}
.drmvpv2-home .home-hero h2{margin:0;font-size:clamp(34px,3vw,52px);line-height:1.15;letter-spacing:.02em}
.drmvpv2-home .home-hero__description{color:#506b96;font-size:17px;line-height:1.75}
.drmvpv2-home .home-hero__description span{display:inline-block}
.drmvpv2-home .home-hero__features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0 0;padding:0;list-style:none}
.drmvpv2-home .home-hero__features li{display:grid;grid-template-columns:52px 1fr;gap:10px}
.drmvpv2-home .home-hero__features img{width:52px}
.drmvpv2-home .home-hero__features strong,.drmvpv2-home .home-hero__features span{display:block}
.drmvpv2-home .home-hero__features strong{color:var(--home-blue);font-size:17px}
.drmvpv2-home .home-hero__features span{margin-top:5px;color:#344f79;font-size:13px;line-height:1.45}
.drmvpv2-home .home-hero__visual img{display:block;width:100%;height:auto}
.drmvpv2-home .home-section{max-width:1440px;margin:auto;padding:76px 58px}
.drmvpv2-home .section-head{margin-bottom:28px}
.drmvpv2-home .section-head h2{margin:0 0 8px;font-size:32px}
.drmvpv2-home .card-grid{display:grid;gap:20px;margin:0;padding:0;list-style:none}
.drmvpv2-home .card-grid.three{grid-template-columns:repeat(3,1fr)}
.drmvpv2-home .legacy-card{min-height:220px;padding:26px;border:1px solid var(--home-border);border-radius:22px;background:#fff}
.drmvpv2-home .legacy-card span{display:grid;width:48px;height:48px;place-items:center;border-radius:50%;background:#edf2f8;color:#7588a6}
.drmvpv2-home .legacy-card strong{display:block;margin-top:24px;font-size:21px}
.drmvpv2-home .legacy-card small{display:block;margin-top:11px;color:#597099;font-size:15px;line-height:1.65}
.drmvpv2-home .course-section{max-width:none;background:var(--home-soft)}
.drmvpv2-home .course-section>*{max-width:1324px;margin-left:auto;margin-right:auto}
.drmvpv2-home .journey{background:#f5f8fd;max-width:none}
.drmvpv2-home .journey>*{max-width:1324px;margin-left:auto;margin-right:auto}
.drmvpv2-home .journey ol{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:0;list-style:none}
.drmvpv2-home .journey li{position:relative;min-height:210px;padding:28px;text-align:center}
.drmvpv2-home .journey li:after{content:"\2192";position:absolute;right:-19px;top:46%;color:var(--home-blue);font-size:28px}
.drmvpv2-home .journey li:last-child:after{display:none}
.drmvpv2-home .journey li strong{display:block;margin-top:12px;font-size:22px}
.drmvpv2-home .journey li p{color:#597099}

@media(max-width:1199px) and (min-width:768px){
  .drmvpv2-home .home-hero__slide{grid-template-columns:1fr minmax(360px,.85fr);gap:28px;padding:38px 32px}
  .drmvpv2-home .home-hero__features{grid-template-columns:1fr}
  .drmvpv2-home .home-section{padding:60px 32px}
  .drmvpv2-home .journey ol{grid-template-columns:repeat(2,1fr)}
  .drmvpv2-home .journey li:after{display:none}
}

@media(max-width:767px){
  .drmvpv2-home .home-hero__slide{grid-template-columns:1fr;padding:30px 22px 52px}
  .drmvpv2-home .home-hero h2{font-size:30px}
  .drmvpv2-home .home-hero__description{font-size:15px}
  .drmvpv2-home .home-hero__features{grid-template-columns:1fr}
  .drmvpv2-home .home-hero__features li{padding:16px;border:1px solid var(--home-border);border-radius:16px;background:#fff}
  .drmvpv2-home .home-hero__visual{order:2}
  .drmvpv2-home .home-section{padding:50px 22px}
  .drmvpv2-home .section-head h2{font-size:27px}
  .drmvpv2-home .card-grid.three,.drmvpv2-home .journey ol{grid-template-columns:1fr}
  .drmvpv2-home .legacy-card{min-height:0}
  .drmvpv2-home .journey li{min-height:160px;text-align:left;padding-left:88px;border:1px solid var(--home-border);border-radius:18px;background:#fff}
}

@media(prefers-reduced-motion:reduce){
  .drmvpv2-home *,.drmvpv2-home *:before,.drmvpv2-home *:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
}

.drmvpv2-home .pain-points{position:relative;isolation:isolate}
.drmvpv2-home .pain-points:before{content:"";position:absolute;z-index:-1;inset:26px 20px auto auto;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(11,85,217,.1) 1.5px,transparent 1.5px);background-size:14px 14px;opacity:.7}
.drmvpv2-home .pain-points .section-head h2{display:inline-block;position:relative;padding-bottom:14px}
.drmvpv2-home .pain-points .section-head h2:after{content:"";position:absolute;left:0;bottom:0;width:64px;height:5px;border-radius:999px;background:linear-gradient(90deg,#ffc21a,#0b55d9)}
.drmvpv2-home .pain-points .card-grid{position:relative}
.drmvpv2-home .pain-points .legacy-card{--pain-accent:#0b55d9;position:relative;overflow:hidden;min-height:246px;padding:30px;border:1px solid rgba(11,85,217,.16);border-radius:28px;background:linear-gradient(145deg,#fff 0%,#f7faff 70%,#eef5ff 100%);box-shadow:0 18px 42px rgba(8,42,102,.09);transition:transform .25s ease,box-shadow .25s ease}
.drmvpv2-home .pain-points .legacy-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:6px;background:linear-gradient(90deg,var(--pain-accent),#ffc21a)}
.drmvpv2-home .pain-points .legacy-card:after{content:"";position:absolute;right:-46px;bottom:-54px;width:148px;height:148px;border-radius:50%;background:var(--pain-accent);opacity:.055}
.drmvpv2-home .pain-points .legacy-card:hover{transform:translateY(-5px);box-shadow:0 24px 52px rgba(8,42,102,.14)}
.drmvpv2-home .pain-points .legacy-card--speak{--pain-accent:#5249c9}
.drmvpv2-home .pain-points .legacy-card--time{--pain-accent:#0089a8}
.drmvpv2-home .legacy-card__top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.drmvpv2-home .pain-points .legacy-card__icon{display:grid;width:58px;height:58px;place-items:center;border-radius:19px;background:var(--pain-accent);color:#fff;font-size:23px;font-weight:900;box-shadow:0 10px 22px color-mix(in srgb,var(--pain-accent) 26%,transparent)}
.drmvpv2-home .pain-points .legacy-card__category{display:inline-flex;width:auto;height:auto;padding:8px 13px;place-items:center;border:0;border-radius:999px;background:color-mix(in srgb,var(--pain-accent) 10%,#fff);color:var(--pain-accent);font-size:13px;font-weight:900;letter-spacing:.08em}
.drmvpv2-home .pain-points .legacy-card strong{position:relative;z-index:1;margin-top:27px;font-size:23px;line-height:1.35}
.drmvpv2-home .pain-points .legacy-card small{position:relative;z-index:1;margin-top:13px;max-width:34em;color:#506b96;font-size:15px;line-height:1.8}

@media(max-width:767px){
  .drmvpv2-home .pain-points:before{display:none}
  .drmvpv2-home .pain-points .legacy-card{min-height:0;padding:25px;border-radius:22px}
  .drmvpv2-home .pain-points .legacy-card__icon{width:52px;height:52px;border-radius:16px}
  .drmvpv2-home .pain-points .legacy-card strong{margin-top:22px;font-size:21px}
}

.drmvpv2-home .pain-points .legacy-card{--pain-soft:#eaf2ff;--pain-shadow:rgba(11,85,217,.22)}
.drmvpv2-home .pain-points .legacy-card--speak{--pain-soft:#eeecff;--pain-shadow:rgba(82,73,201,.22)}
.drmvpv2-home .pain-points .legacy-card--time{--pain-soft:#e7f8fb;--pain-shadow:rgba(0,137,168,.22)}
.drmvpv2-home .pain-points .legacy-card__icon{box-shadow:0 10px 22px var(--pain-shadow)}
.drmvpv2-home .pain-points .legacy-card__category{background:var(--pain-soft)}

.drmvpv2-home .journey{position:relative;padding-top:64px;padding-bottom:68px;background:linear-gradient(135deg,#f5f8fd 0%,#edf4ff 58%,#f9fbff 100%)}
.drmvpv2-home .journey:before{content:"";position:absolute;right:4%;top:36px;width:190px;height:190px;border-radius:50%;border:42px solid rgba(11,85,217,.045)}
.drmvpv2-home .journey .section-head{position:relative;z-index:1}
.drmvpv2-home .journey .section-head h2{display:inline-block;position:relative;padding-bottom:14px}
.drmvpv2-home .journey .section-head h2:after{content:"";position:absolute;left:0;bottom:0;width:70px;height:5px;border-radius:99px;background:linear-gradient(90deg,#0b55d9,#ffc21a)}
.drmvpv2-home .journey ol{position:relative;z-index:1;grid-template-columns:repeat(3,1fr);gap:34px}
.drmvpv2-home .journey ol:before{content:"";position:absolute;z-index:-1;left:12%;right:12%;top:50%;height:2px;background:linear-gradient(90deg,rgba(11,85,217,.16),rgba(255,194,26,.55),rgba(11,85,217,.16))}
.drmvpv2-home .journey li.journey-step{--journey-accent:#0b55d9;position:relative;min-height:224px;padding:27px 29px 29px;border:1px solid rgba(11,85,217,.14);border-top:5px solid var(--journey-accent);border-radius:26px;background:rgba(255,255,255,.96);box-shadow:0 18px 42px rgba(8,42,102,.1);text-align:left;transition:transform .25s ease,box-shadow .25s ease}
.drmvpv2-home .journey li.journey-step:hover{transform:translateY(-5px);box-shadow:0 24px 52px rgba(8,42,102,.15)}
.drmvpv2-home .journey li.journey-step--plan{--journey-accent:#5548c8}
.drmvpv2-home .journey li.journey-step--start{--journey-accent:#0089a8}
.drmvpv2-home .journey li.journey-step:after{content:"\203A";display:grid;position:absolute;z-index:3;right:-49px;top:calc(50% - 20px);width:38px;height:38px;place-items:center;border:5px solid #edf4ff;border-radius:50%;background:#fff;color:#0b55d9;font-size:30px;font-weight:900;line-height:1;box-shadow:0 8px 20px rgba(8,42,102,.12)}
.drmvpv2-home .journey li.journey-step:last-child:after{display:none}
.drmvpv2-home .journey-step__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.drmvpv2-home .journey .journey-step__number{display:inline-flex;width:auto;height:auto;margin:0;padding:7px 12px;border-radius:999px;background:#eaf2ff;color:var(--journey-accent);font-size:14px;font-weight:900;letter-spacing:.1em}
.drmvpv2-home .journey .journey-step__icon{display:grid;width:54px;height:54px;margin:0;place-items:center;border-radius:17px;background:var(--journey-accent);color:#fff;font-size:21px;font-weight:900;box-shadow:0 10px 24px rgba(8,42,102,.16)}
.drmvpv2-home .journey li.journey-step strong{margin:0;color:#082a66;font-size:24px;line-height:1.35}
.drmvpv2-home .journey li.journey-step p{margin:13px 0 0;color:#58709a;font-size:16px;line-height:1.75}

@media(max-width:767px){
  .drmvpv2-home .journey{padding-top:50px;padding-bottom:52px}
  .drmvpv2-home .journey:before,.drmvpv2-home .journey ol:before{display:none}
  .drmvpv2-home .journey ol{gap:18px}
  .drmvpv2-home .journey li.journey-step{min-height:0;padding:23px 23px 25px;border-radius:22px}
  .drmvpv2-home .journey li.journey-step:after{display:none}
  .drmvpv2-home .journey-step__top{margin-bottom:18px}
  .drmvpv2-home .journey .journey-step__icon{width:48px;height:48px;border-radius:15px}
  .drmvpv2-home .journey li.journey-step strong{font-size:21px}
  .drmvpv2-home .journey li.journey-step p{font-size:15px}
}

.drmvpv2-home .journey ol{grid-template-columns:repeat(3,1fr)}
/* Deviation from delivery (see header): keep phones single column as in the mobile delta. */
@media(max-width:767px){.drmvpv2-home .journey ol{grid-template-columns:1fr}}

.drmvpv2-home .home-hero__visual{display:block;overflow:hidden;aspect-ratio:1.18;border-radius:44px}
.drmvpv2-home .home-hero__visual img{width:142%;max-width:none;height:100%;object-fit:cover;object-position:left center}

@media(max-width:767px){
  .drmvpv2-home .home-hero__visual{aspect-ratio:1.08;border-radius:32px}
  .drmvpv2-home .home-hero__visual img{width:100%;height:100%;object-fit:cover;object-position:center top}
}

.drmvpv2-home .home-hero__visual--formal{aspect-ratio:16/9;border-radius:32px;background:#eef4fb}
.drmvpv2-home .home-hero__visual--formal img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

@media(max-width:767px){
  .drmvpv2-home .home-hero__visual--formal{aspect-ratio:4/5}
  .drmvpv2-home .home-hero__visual--formal img{object-position:64% center}
}

/* Approved Home course teaser cards: reuse Page 02 formal WebP imagery. */
.drmvpv2-home .course-section .section-head{max-width:1324px;margin:0 auto 30px}
.drmvpv2-home .home-course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1324px;margin:0 auto}
.drmvpv2-home .home-course-card{position:relative;min-height:340px;overflow:hidden;border:1px solid rgba(11,85,217,.18);border-radius:28px;background:#071b4d;box-shadow:0 18px 40px rgba(7,27,77,.13);isolation:isolate}
.drmvpv2-home .home-course-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .35s ease}
.drmvpv2-home .home-course-card--small-group>img{object-position:center 35%}
.drmvpv2-home .home-course-card--flexible>img{object-position:center}
.drmvpv2-home .home-course-card--one-on-one>img{object-position:center}
.drmvpv2-home .home-course-card--grand-hall>img{object-position:center 42%}
.drmvpv2-home .home-course-card:after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(4,20,52,.08) 15%,rgba(4,20,52,.28) 43%,rgba(4,20,52,.94) 100%)}
.drmvpv2-home .home-course-card__content{position:relative;z-index:1;display:flex;min-height:340px;flex-direction:column;justify-content:space-between;padding:24px;color:#fff}
.drmvpv2-home .home-course-card__type{align-self:flex-start;display:inline-flex;min-height:34px;align-items:center;padding:5px 13px;border:1px solid rgba(255,255,255,.68);border-radius:999px;background:rgba(255,255,255,.9);color:var(--home-blue);font-size:13px;font-weight:900;letter-spacing:.06em;box-shadow:0 6px 16px rgba(7,27,77,.12)}
.drmvpv2-home .home-course-card__copy h3{margin:0;font-size:31px;line-height:1.25;color:#fff}
.drmvpv2-home .home-course-card__copy p{margin:12px 0 0;color:#f4f7ff;font-size:15px;line-height:1.65}
.drmvpv2-home .home-course-card__copy p span{display:block}
.drmvpv2-home .home-course-card__copy a{display:inline-flex;min-height:46px;align-items:center;gap:10px;margin-top:18px;padding:0 17px;border:1px solid rgba(255,255,255,.74);border-radius:999px;background:rgba(255,255,255,.94);color:var(--home-blue);text-decoration:none;font-size:15px;font-weight:900;box-shadow:0 8px 20px rgba(7,27,77,.15);transition:transform .2s ease,background-color .2s ease}
.drmvpv2-home .home-course-card__copy a span{font-size:19px;transition:transform .2s ease}
.drmvpv2-home .home-course-card:hover>img{transform:scale(1.035)}
.drmvpv2-home .home-course-card:hover .home-course-card__copy a{transform:translateY(-2px);background:#fff}
.drmvpv2-home .home-course-card:hover .home-course-card__copy a span{transform:translateX(3px)}
.drmvpv2-home .home-course-card:focus-within{outline:4px solid rgba(255,194,26,.62);outline-offset:4px}

@media(max-width:1199px) and (min-width:768px){
  .drmvpv2-home .home-course-grid{gap:20px}
  .drmvpv2-home .home-course-card,.drmvpv2-home .home-course-card__content{min-height:320px}
  .drmvpv2-home .home-course-card__copy h3{font-size:28px}
  .drmvpv2-home .home-course-card__copy p{font-size:14px}
}

@media(max-width:767px){
  .drmvpv2-home .course-section .section-head{margin-bottom:22px}
  .drmvpv2-home .home-course-grid{grid-template-columns:1fr;gap:18px}
  .drmvpv2-home .home-course-card,.drmvpv2-home .home-course-card__content{min-height:330px}
  .drmvpv2-home .home-course-card{border-radius:24px}
  .drmvpv2-home .home-course-card__content{padding:21px}
  .drmvpv2-home .home-course-card__copy h3{font-size:27px}
  .drmvpv2-home .home-course-card__copy p{font-size:14px}
}

/* ===== C) integration ===== */
/* The new slide lives inside the existing Bootstrap carousel (".carousel-inner text-center", legacy banners are full-bleed images). */
.drmvpv2-home #demo .home-hero{text-align:left}
/* New slide CTA "查看國際師資" -> /Consultants (HOME_BACKEND_FINAL_DECISION: Hero). The delivery has no button style for it;
   this reuses the delivered pill metrics of the course-card link with the delivered blue. Pending designer confirmation. */
.drmvpv2-home .home-hero__cta{display:inline-flex;min-height:46px;align-items:center;margin-top:26px;padding:0 22px;border-radius:999px;background:var(--home-blue);color:#fff;text-decoration:none;font-size:15px;font-weight:900;box-shadow:0 8px 20px rgba(7,27,77,.15)}
.drmvpv2-home .home-hero__cta:hover,.drmvpv2-home .home-hero__cta:focus{background:#0848ba;color:#fff;text-decoration:none}
.drmvpv2-home .home-hero__cta:focus-visible{outline:3px solid #ffc21a;outline-offset:3px}
/* Bootstrap indicators / arrows are white (made for the dark photo banners); on the light new slide they disappear.
   home.js adds .is-light-slide while that slide is showing. Colours are the delivered blue / yellow of .carousel-dots. */
.drmvpv2-home #demo.is-light-slide .carousel-indicators li{background-color:var(--home-blue)}
.drmvpv2-home #demo.is-light-slide .carousel-indicators .active{background-color:#ffc21a}
.drmvpv2-home #demo.is-light-slide .carousel-control-prev-icon,.drmvpv2-home #demo.is-light-slide .carousel-control-next-icon{filter:invert(1)}
/* Bootstrap arrows are 15%-wide click strips (z-index 1) laid over the slide; on this text slide they would sit on top of the
   copy and the CTA. Narrow them to the delivered side padding of .home-hero__slide (58 / 32 / 22px) while this slide shows. */
.drmvpv2-home #demo.is-light-slide .carousel-control-prev,.drmvpv2-home #demo.is-light-slide .carousel-control-next{width:58px}
@media(max-width:1199px) and (min-width:768px){.drmvpv2-home #demo.is-light-slide .carousel-control-prev,.drmvpv2-home #demo.is-light-slide .carousel-control-next{width:32px}}
@media(max-width:767px){.drmvpv2-home #demo.is-light-slide .carousel-control-prev,.drmvpv2-home #demo.is-light-slide .carousel-control-next{width:22px}}

/* ===== D) beta QA fixes 2026-10-08 (docs/plans/20261008_DrMVP_V2_Home_About_Courses_BetaQA.md F1 / F3 / §2.4) ===== */
/* F1: the carousel took the height of the active slide only (390px: 375 -> 1255; 1024px: 368 -> 593), so the page below jumped
   on every change.
   >=1200px: stack all four slides in one grid cell so the box is always as tall as the tallest slide (at this width the new slide
   and the banners are about the same height, so there is no jump and no empty band). Hidden slides keep visibility:hidden
   (no focus, not read out) instead of display:none; Bootstrap's slide classes/transforms are unchanged.
   <1200px (Ada ruling 2026-10-08, a reversible default until the designer decides): no stacking - each slide keeps its own height,
   no empty band under the banners - and home.js turns auto-advance off, so the height only changes when the user changes the slide.
   Dot/arrow colours follow the slide being shown at every width (.is-light-slide on the new slide, original white on the banners).
   Only #demo inside .drmvpv2-home; Bootstrap files and the legacy home are untouched. */
@media(min-width:1200px){
  .drmvpv2-home #demo .carousel-inner{display:grid}
  .drmvpv2-home #demo .carousel-item{display:block;grid-area:1/1;float:none;margin-right:0;visibility:hidden}
  .drmvpv2-home #demo .carousel-item.active,.drmvpv2-home #demo .carousel-item-next,.drmvpv2-home #demo .carousel-item-prev{visibility:visible}
}
/* F3: the delivered preview renders the new sections inside .gc-root with UA defaults; on the site, Bootstrap/Site.css values leak in.
   Put back the values the preview computes (measured with the QA script qa_cmp_home.js against the local preview):
   colour #071b4d (preview: .gc-root{color:var(--gc-navy)}), line-height normal (Bootstrap body 1.5),
   description p margin 1em (17px / 15px on phones; Bootstrap p margin-top 0), journey ol margin 1em (Site.css ol{margin:0}). */
.drmvpv2-home .home-hero,.drmvpv2-home .home-section{color:#071b4d;line-height:normal}
.drmvpv2-home .home-hero__description{margin:1em 0}
.drmvpv2-home .journey ol{margin:1em 0}
/* Carousel keyboard access (QA §2.4): Bootstrap removes the focus outline of the arrows (outline:0 on :focus) and the dots had none.
   Same visible focus ring as the delivered back-to-top control (3px #ffc21a). */
.drmvpv2-home #demo .carousel-indicators li:focus-visible{outline:3px solid #ffc21a;outline-offset:3px}
.drmvpv2-home #demo .carousel-control-prev:focus-visible,.drmvpv2-home #demo .carousel-control-next:focus-visible{outline:3px solid #ffc21a;outline-offset:-3px;opacity:.9}

/* ===== B) kept sections (legacy drmvp-home.css, scoped) ===== */
.drmvpv2-home .w-80{width:80%}
.drmvpv2-home h2.title{font-size:2.5rem;line-height:1.2;font-weight:700;color:var(--drmvp-primary);position:relative;padding-bottom:15px;margin-bottom:25px}
.drmvpv2-home h2.title::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60px;height:4px;background:linear-gradient(90deg,var(--drmvp-primary) 0%,var(--drmvp-secondary) 100%);border-radius:2px}

.drmvpv2-home .consultants{background-color:var(--drmvp-white);padding:80px 0}
.drmvpv2-home .btn-consultants{background:var(--drmvp-secondary);color:white;border-radius:50px;padding:12px 40px;font-size:1.2rem;font-weight:bold;box-shadow:0 4px 15px rgba(255,143,0,.3);transition:var(--transition-smooth)}
.drmvpv2-home .btn-consultants:hover{background:#E68100;color:white;transform:translateY(-2px) scale(1.05);box-shadow:0 8px 25px rgba(255,143,0,.4)}

.drmvpv2-home .recommendation{background:var(--drmvp-bg-light);padding:60px 0}
.drmvpv2-home .recommendation .card{background:var(--drmvp-white);border:none!important;border-radius:var(--border-radius-lg);box-shadow:var(--shadow-soft);transition:var(--transition-smooth);margin-bottom:20px}
.drmvpv2-home .recommendation .card:hover{box-shadow:var(--shadow-hover);transform:translateY(-5px)}
.drmvpv2-home .recommendation .card-title{color:var(--drmvp-primary);font-weight:700;margin-top:15px}
.drmvpv2-home .card-recommendation{padding:0!important;overflow:hidden}
.drmvpv2-home .card-recommendation .pictureHolder{position:relative}
.drmvpv2-home .card-recommendation img{border-radius:var(--border-radius-lg) var(--border-radius-lg) 0 0;border:none;transition:transform .5s ease}
.drmvpv2-home .card-recommendation:hover img{transform:scale(1.05)}
.drmvpv2-home .userProfessional{position:absolute;bottom:0;left:0;right:0;background:rgba(15,76,129,.85)!important;color:white!important;font-weight:bold;backdrop-filter:blur(4px)}
.drmvpv2-home .btn-recommendation-detail{text-decoration:none;color:inherit}
.drmvpv2-home .card-recommendation .card-body{padding:20px}
.drmvpv2-home .card-recommendation .DisplayName{font-size:1.2rem;font-weight:bold;color:var(--drmvp-primary)}
.drmvpv2-home .card-recommendation .Summary{margin-top:10px;font-style:italic;color:#666}
.drmvpv2-home .card-recommendation .fa-chevron-circle-right{color:var(--drmvp-secondary);font-size:1.5rem;position:absolute;bottom:20px;right:20px;transition:transform .3s ease}
.drmvpv2-home .card-recommendation:hover .fa-chevron-circle-right{transform:translateX(5px)}
.drmvpv2-home .btn-recommendation-more{border:2px solid var(--drmvp-primary);color:var(--drmvp-primary);padding:10px 30px;font-weight:bold;transition:var(--transition-smooth)}
.drmvpv2-home .btn-recommendation-more:hover{background:var(--drmvp-primary);color:white}

.drmvpv2-home .collection{background:var(--drmvp-white);padding:60px 0}
/* Video cards = Views/Video/_VideoCard_drmvpv2.cshtml styled by Content/drmvpv2/videos/videos.css (scoped .drmvpv2-videos).
   The wrapper here only carries that scope: no page background, and 3 cards per row on desktop (the legacy home row; 6 cards). */
.drmvpv2-home .drmvpv2-home-videos{background:transparent}
@media(min-width:1121px){.drmvpv2-home .drmvpv2-home-videos .video-grid{grid-template-columns:repeat(3,1fr)}}

@media(max-width:768px){
  .drmvpv2-home .consultants,.drmvpv2-home .recommendation,.drmvpv2-home .collection{padding:40px 0}
}