/* HOME WELCOME section ([srs_welcome]): heading + text on the left, video or picture on the right, "Read More" button. */
.srs-welcome{ width:calc(100% - 40px) !important; max-width:1200px !important; margin:56px auto !important; padding:56px 0; border-top:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; }
.srs-wel-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:start; }

.srs-wel-text h2{ margin:0 0 26px; font-size:40px; font-weight:400; line-height:1.2; color:#333; }
.srs-wel-text p{ margin:0 0 14px; font-size:18px; line-height:1.9; color:#444; text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
.srs-wel-text strong{ color:#222; }

.srs-wel-pic{ text-align:center; }
.srs-wel-pic img{ max-width:100%; max-height:520px; width:auto; height:auto; border-radius:6px; display:inline-block; }
.srs-wel-video{ position:relative; aspect-ratio:16/9; background:#0f2a52; border-radius:6px; overflow:hidden; }
.srs-wel-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.srs-wel-btnwrap{ text-align:center; margin-top:34px; }
/* outlined blue button: on hover a blue fill sweeps across like a loading bar; on click it shows a spinner while the page opens */
a.srs-wel-btn{
  position:relative; display:inline-block; overflow:hidden; min-width:280px; padding:18px 48px;
  border:2px solid var(--drawer); border-radius:4px; background:#fff; color:var(--drawer) !important;
  font-size:20px; font-weight:500; line-height:1.2; text-align:center; text-decoration:none !important;
  transition:color .35s ease;
}
a.srs-wel-btn::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0; background:var(--drawer);
  transition:width .7s cubic-bezier(.22,.61,.36,1); z-index:0;
}
a.srs-wel-btn span{ position:relative; z-index:1; display:inline-block; transition:transform .3s ease; }
a.srs-wel-btn:hover,
a.srs-wel-btn:focus-visible{ color:#fff !important; }
a.srs-wel-btn:hover::before,
a.srs-wel-btn:focus-visible::before{ width:100%; }
/* right arrow: hidden normally, slides in next to the text on hover */
a.srs-wel-btn span::after{
  content:"\2192"; display:inline-block; width:0; margin-left:0; opacity:0; overflow:hidden; vertical-align:top;
  transition:width .3s ease, margin-left .3s ease, opacity .3s ease;
}
a.srs-wel-btn:hover span::after,
a.srs-wel-btn:focus-visible span::after{ width:1.1em; margin-left:12px; opacity:1; }

@media (max-width:900px){
  /* the page already has a 20px edge, so use the full width (no extra side margin) and keep words whole */
  .srs-welcome{ width:100% !important; margin:30px 0 !important; padding:30px 0; }
  .srs-wel-grid{ grid-template-columns:1fr; gap:24px; }
  .srs-wel-text h2{ font-size:28px; line-height:1.25; margin-bottom:16px; }
  .srs-wel-text p{ font-size:16px; line-height:1.75; text-align:left; hyphens:none; -webkit-hyphens:none; word-break:normal; overflow-wrap:normal; }
  a.srs-wel-btn{ min-width:0; width:100%; padding:15px 20px; font-size:17px; }
}