/* First two How WISE Works sections only. Independent assets are configured
   in content/how-wise-scenes.json. All headings and descriptions remain text. */
.wp-how-wise-works { --hw-body-size:20px; --hw-bright-orange:#ec7631; }
.wp-how-wise-works .hw-hero-section { position:relative; isolation:isolate; padding-bottom:138px; background:radial-gradient(ellipse at 72% 32%,#d8e8f9 0,transparent 58%),linear-gradient(135deg,#fff 22%,#f1f6fc 67%,#e1eaf5); }
.wp-how-wise-works .hw-hero-section .wp-breadcrumb { position:relative; z-index:3; }
.hw-hero-layout { display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; min-height:535px; gap:12px; position:relative; }
.hw-hero-copy { position:relative; z-index:2; padding:8px 0 22px; }
.wp-how-wise-works .hw-hero-copy .wp-eyebrow { max-width:480px; font-size:13px; letter-spacing:.095em; margin-bottom:24px; }
.wp-how-wise-works .hw-hero-copy h1 { font-size:clamp(70px,7.4vw,110px); line-height:.94; letter-spacing:-.035em; max-width:none; text-wrap:initial; margin-bottom:25px; }
.hw-hero-copy h1 span { display:block; color:var(--wp-red); }
.wp-how-wise-works .hw-hero-copy>p:not(.wp-eyebrow),
.wp-how-wise-works .hw-earn-copy>p { font-size:var(--hw-body-size); line-height:1.57; }
.wp-how-wise-works .hw-hero-copy>p:not(.wp-eyebrow) { max-width:48ch; color:var(--wp-blue); }
.wp-how-wise-works .hw-hero-copy .wp-actions { margin-top:27px; }
.wp-how-wise-works .hw-button-blue { background:linear-gradient(145deg,#405a9c,var(--wp-blue) 66%,#18265d); color:#fff; border-color:#455e9e; box-shadow:inset 0 2px 1px #ffffff50,inset 0 -2px 3px #14204d70,0 5px 0 #19275b,0 15px 25px #233b6740; font-size:18px; }
.wp-how-wise-works .hw-button-blue:hover { box-shadow:inset 0 2px 1px #ffffff60,0 6px 0 #19275b,0 21px 30px #233b6750; }
.hw-hero-visual { position:relative; z-index:1; width:128%; margin:0 0 0 -8%; pointer-events:none; }
.wp-how-wise-works .hw-hero-image { width:100%; height:auto; -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 96%,transparent),linear-gradient(0deg,transparent,#000 8%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 15%,#000 96%,transparent),linear-gradient(0deg,transparent,#000 8%,#000 93%,transparent); -webkit-mask-composite:source-in; mask-composite:intersect; }
.wp-how-wise-works .hw-earn-section { position:relative; isolation:isolate; padding:42px 0 76px; background:linear-gradient(#27387e,#142657 60%,#213e7a); color:#fff; }
.hw-section-divider { display:block; width:100%; height:154px; position:absolute; bottom:calc(100% - 2px); left:0; z-index:2; pointer-events:none; }
.hw-earn-environment { position:absolute; inset:0; z-index:-3; pointer-events:none; overflow:hidden; }
.wp-how-wise-works .hw-lower-scene { width:100%; height:100%; object-fit:cover; object-position:66% center; opacity:.52; -webkit-mask-image:linear-gradient(transparent,#000 24%); mask-image:linear-gradient(transparent,#000 24%); }
.hw-earn-environment::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#14265765,#14265755 65%,transparent); -webkit-mask-image:linear-gradient(transparent,#000 24%); mask-image:linear-gradient(transparent,#000 24%); }
.hw-earn-swoosh { position:absolute; top:150px; left:calc((100vw - 100%)/-2); width:100vw; height:680px; z-index:-1; pointer-events:none; filter:drop-shadow(0 -3px 4px #ef7e3040); }
.hw-earn-section>.wp-shell { position:relative; }
.hw-earn-intro-stage { position:relative; }
.hw-earn-intro { display:grid; grid-template-columns:.9fr 1.1fr; gap:58px; position:relative; z-index:2; }
.hw-earn-heading { padding-top:28px; }
.wp-how-wise-works .hw-earn-heading .wp-eyebrow { color:white; }
.hw-earn-heading .wp-eyebrow::before { background:var(--hw-bright-orange); }
.wp-how-wise-works .hw-earn-heading h2 { color:white; font-size:clamp(43px,3.7vw,58px); line-height:1.04; text-wrap:initial; }
.hw-earn-heading h2 span { display:block; color:var(--hw-bright-orange); margin-top:5px; }
.hw-earn-copy { padding-right:140px; }
.wp-how-wise-works .hw-earn-copy p { color:#fff; margin-bottom:18px; }
.hw-earn-copy p:last-child { margin-bottom:0; }
.hw-staircase { position:absolute; z-index:1; top:-27px; right:-196px; width:330px; margin:0; pointer-events:none; }
.wp-how-wise-works .hw-staircase-image { width:100%; height:auto; filter:drop-shadow(0 20px 25px #05123165); -webkit-mask-image:linear-gradient(#000 80%,transparent); mask-image:linear-gradient(#000 80%,transparent); }
.hw-framework { position:relative; z-index:3; margin-top:40px; padding:30px 32px 25px; border:1px solid #fff; border-radius:26px; color:var(--wp-blue); background:linear-gradient(145deg,#fff,#f4f8ff); box-shadow:inset 0 2px 2px #fff,0 5px 0 #b4c5e133,0 15px 26px -10px #061b4b70,0 40px 70px -35px #020b2390; }
.wp-how-wise-works .hw-framework>.wp-framework-heading { font-size:34px; line-height:1.12; margin-bottom:22px; }
.hw-journey-wrap { position:relative; }
.hw-journey-line { position:absolute; top:2px; left:0; width:100%; height:120px; pointer-events:none; }
.hw-journey { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; margin:0; padding:0; list-style:none; position:relative; }
.wp-how-wise-works .hw-journey-step { display:block; min-width:0; padding:0; position:relative; }
.wp-how-wise-works .hw-journey-step h4 { margin:0 0 12px; }
.wp-how-wise-works .hw-journey .hw-journey-trigger { display:flex; flex-direction:column; width:100%; text-align:left; gap:23px; align-items:stretch; min-height:0!important; padding:0; border:0; color:var(--wp-blue); background:none; cursor:pointer; font:inherit; }
.hw-icon-medallion { display:grid; place-items:center; position:relative; align-self:center; width:110px; height:110px; border-radius:50%; border:1px solid #d8e1ef; background:linear-gradient(140deg,#fff,#e5edf7); box-shadow:inset 0 2px 2px #fff,inset 0 -3px 3px #a3b6d449,0 5px 0 #c2cede,0 10px 14px #19386728,0 22px 24px -15px #1a316a50; transition:transform 250ms ease,box-shadow 250ms ease; }
.wp-how-wise-works .hw-icon-medallion img { width:88px; height:88px; object-fit:contain; filter:drop-shadow(0 3px 2px #1b315c27); }
.hw-step-number { position:absolute; bottom:-13px; left:calc(50% - 17px); display:grid; place-items:center; width:34px; height:34px; border:3px solid white; border-radius:50%; background:linear-gradient(#4e6fbb,var(--wp-blue)); color:#fff; font:600 18px/1 Phudu,sans-serif; box-shadow:0 3px 4px #1e325e35; }
.hw-step-title { font:600 23px/1.12 Phudu,sans-serif; letter-spacing:-.025em; text-transform:uppercase; }
.wp-how-wise-works .hw-journey-step p { font-size:16px; line-height:1.58; color:var(--wp-blue); margin:0; }
.wp-how-wise-works .hw-framework>.wp-note { border-top:1px solid #bccce4; font-size:17px; line-height:1.5; margin-top:28px; padding-top:20px; color:var(--wp-blue); }
.hw-journey-step.is-active .hw-icon-medallion { transform:translateY(-5px); box-shadow:inset 0 2px 2px #fff,0 0 0 3px var(--wp-orange),0 5px 0 #c2cede,0 15px 20px #19386730; }
.hw-journey-step.is-active .hw-step-title { color:var(--wp-orange); }
@media (hover:hover) and (pointer:fine) {
  .hw-journey-trigger:hover .hw-icon-medallion { transform:translateY(-6px) rotate(-3deg); }
}
@media (min-width:1550px) {
  .hw-hero-layout { min-height:575px; }
  .hw-earn-copy { padding-right:160px; }
  .hw-staircase { width:360px; right:-220px; }
}
@media (max-width:1200px) {
  .hw-hero-layout { grid-template-columns:1fr 1fr; min-height:495px; }
  .wp-how-wise-works .hw-hero-copy h1 { font-size:82px; }
  .hw-hero-visual { width:137%; margin-left:-11%; }
  .hw-earn-intro { gap:34px; }
  .hw-earn-copy { padding-right:0; }
  .hw-staircase { position:relative; top:auto; right:auto; width:310px; margin:12px -40px -100px auto; }
  .hw-framework { padding-inline:25px; }
  .hw-journey { gap:18px; }
  .hw-step-title { font-size:21px; min-height:2.24em; }
}
@media (max-width:1000px) {
  .wp-how-wise-works .hw-hero-section { padding-bottom:112px; }
  .hw-hero-layout { grid-template-columns:1fr; gap:10px; }
  .hw-hero-copy { max-width:680px; }
  .wp-how-wise-works .hw-hero-copy h1 { font-size:clamp(70px,10vw,98px); }
  .hw-hero-visual { width:min(105%,850px); margin:0 -2% -10px auto; }
  .hw-section-divider { height:116px; }
  .hw-earn-intro { grid-template-columns:1fr 1.1fr; gap:34px; }
  .hw-earn-copy { padding-right:0; }
  .hw-staircase { width:280px; margin:12px -30px -85px auto; }
  .hw-earn-swoosh { top:245px; height:620px; }
  .wp-how-wise-works .hw-earn-heading h2 { font-size:44px; }
  .hw-framework { margin-top:38px; padding:30px; }
  .hw-journey-line { display:none; }
  .hw-journey { grid-template-columns:1fr; gap:30px; }
  .wp-how-wise-works .hw-journey .hw-journey-trigger { display:grid; grid-template-columns:110px 1fr; align-items:center; gap:26px; }
  .hw-icon-medallion { grid-column:1; grid-row:1; }
  .hw-step-title { font-size:29px; min-height:0; }
  .wp-how-wise-works .hw-journey-step h4 { margin-bottom:0; }
  .wp-how-wise-works .hw-journey-step p { padding-left:136px; font-size:18px; margin-top:0; min-height:86px; }
  .hw-journey-step:not(:last-child)::after { content:''; position:absolute; left:35px; top:125px; bottom:-31px; width:40px; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 150' preserveAspectRatio='none'%3E%3Cpath d='M20 0C-5 40 45 105 20 150' fill='none' stroke='%236c87ca' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
}
@media (max-width:700px) {
  .wp-how-wise-works { --hw-body-size:18px; }
  .hw-earn-intro { grid-template-columns:1fr; gap:14px; }
  .hw-earn-heading { padding-top:0; }
  .wp-how-wise-works .hw-earn-heading h2 { max-width:18ch; font-size:43px; }
  .hw-staircase { position:relative; opacity:1; top:auto; bottom:auto; right:auto; width:280px; margin:-4px -60px -70px auto; }
  .hw-earn-swoosh { top:auto; bottom:-320px; width:180%; height:520px; left:-15%; }
  .wp-how-wise-works .hw-earn-section { padding-top:30px; padding-bottom:52px; }
  .hw-framework { padding:27px 23px; }
  .wp-how-wise-works .hw-framework>.wp-framework-heading { font-size:30px; }
  .wp-how-wise-works .hw-journey .hw-journey-trigger { grid-template-columns:90px 1fr; gap:17px; }
  .hw-icon-medallion { width:90px; height:90px; }
  .wp-how-wise-works .hw-icon-medallion img { width:72px; height:72px; }
  .hw-step-number { width:30px; height:30px; left:calc(50% - 15px); bottom:-11px; font-size:16px; }
  .hw-step-title { font-size:26px; }
  .wp-how-wise-works .hw-journey-step p { padding-left:107px; font-size:17px; margin-top:0; }
  .hw-journey-step:not(:last-child)::after { left:26px; top:103px; }
}
@media (max-width:500px) {
  .wp-how-wise-works .hw-hero-section { padding-bottom:92px; }
  .wp-how-wise-works .hw-hero-copy h1 { font-size:66px; }
  .wp-how-wise-works .hw-hero-copy .wp-eyebrow { font-size:12px; line-height:1.5; }
  .hw-hero-copy { padding-bottom:0; }
  .wp-how-wise-works .hw-button-blue { width:100%; max-width:350px; text-align:left; font-size:17px; gap:12px; }
  .hw-hero-visual { width:120%; margin:5px -10% -5px; }
  .hw-section-divider { height:85px; }
  .wp-how-wise-works .hw-earn-heading h2 { font-size:40px; }
  .hw-staircase { width:265px; margin-top:2px; margin-bottom:-52px; }
  .hw-framework { border-radius:23px; padding:25px 21px; }
  .wp-how-wise-works .hw-framework>.wp-framework-heading { font-size:29px; margin-bottom:28px; }
  .hw-journey { gap:28px; }
  .wp-how-wise-works .hw-journey .hw-journey-trigger { grid-template-columns:82px 1fr; gap:15px; }
  .hw-icon-medallion { width:82px; height:82px; }
  .wp-how-wise-works .hw-icon-medallion img { width:66px; height:66px; }
  .hw-step-title { font-size:25px; }
  .wp-how-wise-works .hw-journey-step p { padding-left:97px; font-size:16px; line-height:1.55; margin-top:4px; }
  .hw-journey-step:not(:last-child)::after { left:22px; top:96px; bottom:-29px; }
  .wp-how-wise-works .hw-framework>.wp-note { font-size:16px; margin-top:25px; }
}
@media (max-width:370px) {
  .wp-how-wise-works .hw-hero-copy h1 { font-size:58px; }
  .hw-framework { padding-inline:17px; }
  .wp-how-wise-works .hw-journey .hw-journey-trigger { grid-template-columns:70px 1fr; gap:12px; }
  .hw-icon-medallion { width:70px; height:70px; }
  .wp-how-wise-works .hw-icon-medallion img { width:57px; height:57px; }
  .hw-step-title { font-size:23px; }
  .wp-how-wise-works .hw-journey-step p { padding-left:82px; }
  .hw-journey-step:not(:last-child)::after { left:16px; top:84px; }
}
@media (prefers-reduced-motion:reduce) {
  .hw-icon-medallion { transition:none; }
  .hw-journey-trigger:hover .hw-icon-medallion,.hw-journey-step.is-active .hw-icon-medallion { transform:none; }
}