/* Will Smart / Vision 2030
   Editorial lower-page treatment built on the shared TOP-page design system. */

.page-vision-2030{
  --vision-navy:var(--ws-navy,#09283c);
  --vision-blue:var(--ws-blue-dark,#168ec9);
  --vision-cyan:var(--ws-blue,#39aee4);
  --vision-line:var(--ws-line,#dbe8ef);
  --vision-muted:var(--ws-muted,#657784);
  --vision-soft:#f5fafd;
  --vision-gutter:clamp(34px,5.4vw,88px);
  --vision-max:1440px;
  background:#fff;
  color:var(--vision-navy);
}


.page-vision-2030 .vision-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 18px;
  color:var(--vision-blue);
  font-family:var(--ws-font-en,"Lato",Arial,sans-serif);
  font-size:11px;
  font-weight:700;
  letter-spacing:.13em;
  line-height:1.2;
  text-transform:uppercase;
}

.page-vision-2030 .vision-kicker span{
  font-size:22px;
  letter-spacing:.03em;
}

.page-vision-2030 .vision-heading h2{
  max-width:930px;
  margin:0 0 24px;
  color:var(--vision-navy);
  font-size:clamp(40px,4.25vw,58px);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.28;
}

.page-vision-2030 .vision-heading>p:last-child{
  max-width:730px;
  color:#526b79;
  font-size:14px;
  line-height:2;
}


/* 01 / VISION ---------------------------------------------------------- */
.page-vision-2030 .vision-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(390px,40%) minmax(0,60%);
  min-height:clamp(650px,76svh,820px);
  background:#fff;
}


.page-vision-2030 .vision-hero h1{
  margin:0 0 28px;
  color:var(--vision-navy);
  font-size:clamp(44px,4.7vw,68px);
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1.25;
}


.page-vision-2030 .vision-hero-media{
  position:relative;
  min-width:0;
  min-height:100%;
  overflow:hidden;
  background:#eaf3f7;
}

.page-vision-2030 .vision-hero-media::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0 auto 0 0;
  width:18%;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.82) 24%,rgba(255,255,255,0) 100%);
  pointer-events:none;
}

.page-vision-2030 .vision-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}

@media(hover:hover) and (pointer:fine){
  .page-vision-2030 .vision-hero:hover .vision-hero-media img{transform:scale(1.015);}
}

/* Shared section shell -------------------------------------------------- */
.page-vision-2030 .vision-section{
  padding:clamp(96px,9vw,144px) var(--vision-gutter);
}

.page-vision-2030 .vision-section-inner{
  width:100%;
  max-width:var(--vision-max);
  margin:0 auto;
}

/* 02 / MISSION --------------------------------------------------------- */

.page-vision-2030 .mission-stories{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,48px);
}

.page-vision-2030 .mission-story{
  min-width:0;
  padding-top:20px;
  border-top:1px solid var(--vision-line);
}

.page-vision-2030 .story-label{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:18px;
  color:var(--vision-blue);
  font-family:var(--ws-font-en,"Lato",Arial,sans-serif);
}

.page-vision-2030 .story-label strong{
  color:var(--vision-navy);
  font-size:26px;
  line-height:1;
}

.page-vision-2030 .story-label span{
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
}

.page-vision-2030 .mission-story figure{
  aspect-ratio:16/10;
  margin:0 0 24px;
  overflow:hidden;
  background:#eaf2f6;
}

.page-vision-2030 .vision-strengths .mission-story figure{
  padding:22px;
  background:#f4fafc;
}
.page-vision-2030 .vision-strengths .mission-story img{
  object-fit:contain;
}

.page-vision-2030 .mission-story img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}

.page-vision-2030 .mission-story:nth-child(1) img{object-position:center 54%;}
.page-vision-2030 .mission-story:nth-child(2) img{object-position:center 50%;}
.page-vision-2030 .mission-story:nth-child(3) img{object-position:center 52%;}

.page-vision-2030 .mission-story h3{
  margin:0 0 12px;
  color:var(--vision-navy);
  font-size:clamp(19px,1.65vw,25px);
  line-height:1.5;
}

.page-vision-2030 .mission-story>p{
  max-width:34em;
  color:var(--vision-muted);
  font-size:12px;
  line-height:1.9;
}

@media(hover:hover) and (pointer:fine){
  .page-vision-2030 .mission-story:hover img{transform:scale(1.015);}
}

/* 03 / GROWTH STRATEGY ------------------------------------------------ */

/* 04 / PARTNERSHIP ----------------------------------------------------- */
.page-vision-2030 .vision-partnership{
  background:#fff;
}

.page-vision-2030 .vision-partnership .vision-heading{
  margin-bottom:clamp(50px,6vw,82px);
}

.page-vision-2030 .partnership-layout{
  display:grid;
  grid-template-columns:minmax(330px,.72fr) minmax(520px,1.28fr);
  gap:clamp(54px,7vw,110px);
  align-items:center;
}

.page-vision-2030 .partner-network{
  position:relative;
  width:min(100%,450px);
  aspect-ratio:1/1;
  margin:auto;
}

.page-vision-2030 .partner-network::before,
.page-vision-2030 .partner-network::after{
  content:"";
  position:absolute;
  inset:17%;
  border:1px solid rgba(22,142,201,.36);
  border-radius:50%;
}

.page-vision-2030 .partner-network::after{
  inset:35%;
  border-color:rgba(22,142,201,.2);
}

.page-vision-2030 .partner-network i{
  position:absolute;
  z-index:0;
  inset:50% 6% auto;
  height:1px;
  background:rgba(22,142,201,.22);
  transform:rotate(-24deg);
}

.page-vision-2030 .partner-network i::before,
.page-vision-2030 .partner-network i::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:rgba(22,142,201,.22);
}

.page-vision-2030 .partner-network i::before{transform:rotate(48deg);}
.page-vision-2030 .partner-network i::after{transform:rotate(88deg);}

.page-vision-2030 .partner-network strong{
  position:absolute;
  z-index:2;
  inset:50% auto auto 50%;
  min-width:138px;
  padding:22px 18px;
  border:1px solid var(--vision-blue);
  background:#fff;
  color:var(--vision-navy);
  font-family:var(--ws-font-en,"Lato",Arial,sans-serif);
  font-size:20px;
  line-height:1.2;
  text-align:center;
  transform:translate(-50%,-50%);
}

.page-vision-2030 .partner-network strong small{
  display:block;
  margin-top:6px;
  color:var(--vision-blue);
  font-size:8px;
  letter-spacing:.13em;
}

.page-vision-2030 .partner-network>span{
  position:absolute;
  z-index:1;
  padding:4px 8px;
  background:#fff;
  color:#526d7c;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
}


.page-vision-2030 .partner-list{
  border-top:1px solid #b9cad4;
}

/* 05 / 2030 TARGET ----------------------------------------------------- */

/* Motion --------------------------------------------------------------- */
.page-vision-2030 .mission-story:nth-child(2){transition-delay:.12s;}
.page-vision-2030 .mission-story:nth-child(3){transition-delay:.24s;}


@keyframes visionDiagramIn{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:none;}
}

/* Tablet --------------------------------------------------------------- */
@media(max-width:1180px){
  .page-vision-2030 .vision-hero{
    grid-template-columns:minmax(360px,45%) minmax(0,55%);
    min-height:650px;
  }
  .page-vision-2030 .vision-hero h1{font-size:clamp(42px,4.8vw,58px);}
  .page-vision-2030 .growth-layout,
  .page-vision-2030 .partnership-layout{
    grid-template-columns:1fr;
  }
      .page-vision-2030 .partnership-layout{gap:46px;}
  .page-vision-2030 .partner-network{width:min(100%,390px);}
        }

@media(max-width:900px){
  .page-vision-2030 .vision-hero{
    grid-template-columns:1fr;
    min-height:0;
  }
    .page-vision-2030 .vision-hero-media{
    min-height:52vw;
    max-height:600px;
  }
  .page-vision-2030 .vision-hero-media::before{
    inset:0 0 auto;
    width:auto;
    height:16%;
    background:linear-gradient(180deg,#fff,rgba(255,255,255,0));
  }
      .page-vision-2030 .mission-stories{gap:22px;}
    }

/* Mobile --------------------------------------------------------------- */
@media(max-width:680px){
  .page-vision-2030{--vision-gutter:20px;}
  .page-vision-2030 .vision-kicker{margin-bottom:13px;font-size:10px;}
  .page-vision-2030 .vision-kicker span{font-size:19px;}
    .page-vision-2030 .vision-hero h1{
    margin-bottom:22px;
    font-size:clamp(36px,10.7vw,48px);
    line-height:1.28;
  }
    .page-vision-2030 .vision-hero-media{min-height:76vw;}
  .page-vision-2030 .vision-section{padding-top:78px;padding-bottom:82px;}
  .page-vision-2030 .vision-heading h2{font-size:34px;line-height:1.35;}
  .page-vision-2030 .vision-heading h2 br{display:none;}
  .page-vision-2030 .vision-heading>p:last-child{font-size:13px;}
  .page-vision-2030 .mission-stories{grid-template-columns:1fr;gap:50px;}
  .page-vision-2030 .mission-story{padding-top:17px;}
  .page-vision-2030 .mission-story figure{margin-bottom:20px;}
  .page-vision-2030 .mission-story h3{font-size:21px;}
                        .page-vision-2030 .partner-network{width:min(100%,330px);}
  .page-vision-2030 .partner-network>span{font-size:10px;}
                      }

@media(max-width:420px){
  .page-vision-2030 .vision-hero h1{font-size:35px;}
  .page-vision-2030 .partner-network{width:290px;}
  .page-vision-2030 .partner-network>span{font-size:9px;}
    }

/* Reference-match layer v2: reproduces the supplied composition in code. */
@media(min-width:901px){
  .page-vision-2030{--vision-gutter:clamp(42px,4.2vw,68px);--vision-max:1280px;}
  .page-vision-2030 .vision-kicker{gap:0;margin-bottom:17px;font-size:10px;letter-spacing:.13em;}
  .page-vision-2030 .vision-kicker span{display:none;}
  .page-vision-2030 .vision-hero{grid-template-columns:minmax(360px,39%) minmax(0,61%);min-height:clamp(520px,39vw,610px);max-height:650px;}
    .page-vision-2030 .vision-hero h1{margin-bottom:25px;font-size:clamp(39px,3.35vw,50px);line-height:1.28;letter-spacing:-.035em;}
    .page-vision-2030 .vision-hero-media::before{width:23%;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.9) 22%,rgba(255,255,255,.42) 55%,rgba(255,255,255,0) 100%);}
  .page-vision-2030 .vision-hero-media img{object-position:54% center;}
  .page-vision-2030 .vision-heading h2{margin-bottom:14px;font-size:clamp(29px,2.65vw,40px);line-height:1.34;letter-spacing:-.025em;}
  .page-vision-2030 .vision-heading>p:last-child{font-size:11px;line-height:1.9;}

        .page-vision-2030 .mission-stories{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
  .page-vision-2030 .mission-story{display:flex;flex-direction:column;min-height:345px;padding:0 14px 18px;overflow:hidden;border:1px solid #d8e5ec;border-radius:8px;background:#fff;}
  .page-vision-2030 .mission-story figure{order:1;width:calc(100% + 28px);aspect-ratio:1.72/1;margin:0 -14px 14px;}
  .page-vision-2030 .mission-story .story-label{order:2;display:block;margin:0 0 8px;}
  .page-vision-2030 .story-label strong{display:block;margin-bottom:2px;font-size:22px;}
  .page-vision-2030 .story-label span{display:block;font-size:8px;}
  .page-vision-2030 .mission-story h3{order:3;margin-bottom:8px;font-size:16px;line-height:1.5;}
  .page-vision-2030 .mission-story>p{order:4;margin-top:auto;font-size:10px;line-height:1.75;}
}

@media(min-width:901px){
  .page-vision-2030 .vision-partnership{padding:30px var(--vision-gutter) 54px;}
  .page-vision-2030 .vision-partnership .vision-heading{margin-bottom:25px;}
  .page-vision-2030 .vision-partnership .vision-heading h2{max-width:none;font-size:30px;}
  .page-vision-2030 .partnership-layout{display:block;}
  .page-vision-2030 .partner-network{display:none;}
  .page-vision-2030 .partner-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;border:1px solid #d8e5ec;border-radius:8px;background:#fff;}
          }

@media(min-width:901px) and (max-width:1180px){
  .page-vision-2030 .vision-hero{grid-template-columns:44% 56%;}
  .page-vision-2030 .vision-hero h1{font-size:38px;}
                }

@media(max-width:900px){
  .page-vision-2030 .vision-hero{min-height:0;max-height:none;}
    .page-vision-2030 .vision-hero h1{font-size:43px;}
  .page-vision-2030 .vision-section{padding-left:32px;padding-right:32px;}
  .page-vision-2030 .mission-stories{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-vision-2030 .mission-story{display:flex;flex-direction:column;padding:0 16px 20px;border:1px solid #d8e5ec;border-radius:8px;overflow:hidden;}
  .page-vision-2030 .mission-story figure{order:1;width:calc(100% + 32px);margin:0 -16px 16px;}
  .page-vision-2030 .mission-story .story-label{order:2;display:block;}.page-vision-2030 .mission-story h3{order:3;}.page-vision-2030 .mission-story>p{order:4;}
      .page-vision-2030 .partnership-layout{display:block;}.page-vision-2030 .partner-network{display:none;}
  .page-vision-2030 .partner-list{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid #d8e5ec;border-radius:8px;overflow:hidden;}
      }

@media(max-width:680px){
  .page-vision-2030 .vision-section{padding-left:20px;padding-right:20px;}
  .page-vision-2030 .mission-stories{grid-template-columns:1fr;}
      .page-vision-2030 .partner-list{grid-template-columns:1fr;}
    }

@media(min-width:901px){
  .page-vision-2030 .vision-mission .vision-section-inner,.page-vision-2030 .vision-partnership .vision-section-inner{position:relative;}
  .page-vision-2030 .vision-mission .vision-section-inner::after,.page-vision-2030 .vision-partnership .vision-section-inner::after{content:'→';position:absolute;right:-30px;top:60%;display:grid;place-items:center;width:34px;height:34px;border:1px solid #afd4e7;border-radius:50%;background:#fff;color:var(--vision-blue);font-size:16px;}
}

/* Hero height correction from the actual browser capture. */
@media(min-width:901px){
  .page-vision-2030 .vision-hero{min-height:clamp(360px,27vw,420px);max-height:420px;grid-template-columns:minmax(390px,40%) minmax(0,60%);}
    .page-vision-2030 .vision-hero h1{margin-bottom:20px;font-size:clamp(32px,2.7vw,42px);line-height:1.25;}
  }

/* Keep the mission illustration behind and completely outside the copy. */
/* Final mission artwork: a real mobility line drawing, never an overlay. */
/* Mission artwork is isolated from copy so no decorative layer can wash out text. */