/* :root {
     --brand: #4f46e5;
     --brand2: #0ea5e9;
     --accent: #10b981;
     --soft: #eef2ff;
 } */

 :root{
  --navy:#1A3557; --teal:#0E6B74; --green:#1A5C38; --amber:#9A5F0A;
  --pale:#C8D9EF; --ink:#1C1C1C; --blue-bg:#EEF3FA; --yellow-bg:#FEF3CD;
  --border:#D8DCE4; --accent:var(--navy);
  --purble: #782b90; --echo: #22bdb6;
}

 * {
     box-sizing: border-box;
 }

 body {
     margin: 0;
     background: #eef0f4;
     font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
     font-size: 10pt;
     color: #1C1C1C;
 }

 .back {
     display: block;
     max-width: 613px;
     margin: 18px auto 10px;
     padding: 0 4px;
     font-size: 10pt;
     color: #1A3557;
     text-decoration: none;
     font-weight: 700;
 }

 .back:hover {
     text-decoration: underline;
 }

 /* top brand banner */
 .brand {
     background: var(--purble);
     text-align: center;
     padding: 10px;
 }

 .brand h1 {
     margin: 0;
     font-size: 16pt;
     font-weight: 700;
     color: #fff
 }

 .brand p {
     margin: 0;
     font-size: 9.5pt;
     font-style: italic;
     color: var(--pale)
 }

 .bar {
     background: var(--echo);
     height: 13px
 }

 .gap {
     height: 8px
 }

 /* role header */
 .tag {
     background: var(--purble);
     color: #fff;
     text-align: center;
     font-size: 9pt;
     font-weight: 700;
     white-space: pre;
     padding: 3px;
 }

 /* Hero */
 .hero-section {
     background: linear-gradient(135deg, var(--brand), var(--brand2));
     color: #fff;
     padding: 116px 20px 110px;
     text-align: center
 }

 .hero-section .brand {
     font-weight: 800;
     letter-spacing: .18em;
     font-size: 1.55rem;
     opacity: .95
 }

 .hero-section h1 {
     font-size: clamp(1.8rem, 4.5vw, 3rem);
     margin: 12px 0 8px;
     line-height: 1.15
 }

 .hero-section p {
     max-width: 620px;
     margin: 0 auto;
     opacity: .92;
     font-style: italic
 }

 .pill {
     display: inline-block;
     margin-top: 18px;
     padding: 6px 16px;
     border: 1px solid rgba(255, 255, 255, .55);
     border-radius: 999px;
     font-size: 1.08rem;
     letter-spacing: .14em;
     font-weight: 700
 }

 .wrap {
     max-width: 1000px;
     margin: auto;
     padding: 0 16px
 }

 /* A4 content width from the Word file: 9200 twips = 613px */
 .jd {
     --navy: #1A3557;
     --gold: #9A5F0A;
     --teal: #0E6B74;
     --accent: #1A3557;
     margin: 25px auto 40px;
     background: #fff;
     padding: 0 0 14px;
     box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
 }

 /* Brand band */
 .band {
     background: var(--navy);
     text-align: center;
 }

 .band .brand {
     margin: 0;
     padding: 4px 0 0;
     font-size: 16pt;
     font-weight: 700;
     color: #fff;
 }

 .band .tagline {
     margin: 0;
     padding-bottom: 4px;
     font-size: 9.5pt;
     font-style: italic;
     color: #C8D9EF;
 }

 .strip {
     height: 11.5pt;
     background: var(--echo);
 }

 /* Badge + title */
 .badge {
     margin: 8px 0 0;
     padding: 2px 0;
     background: var(--accent);
     text-align: center;
     font-size: 9pt;
     font-weight: 700;
     color: #fff;
     white-space: pre;
 }

 .title {
     margin: 6px 0 1px;
     text-align: center;
     font-size: 18pt;
     font-weight: 700;
     color: var(--navy);
     padding: 7px;
 }

 .company {
     margin: 0 0 4px;
     text-align: center;
     font-size: 10pt;
     font-weight: 700;
     color: var(--navy);
 }

 /* Info table */
 .info {
     width: calc(100% - 0px);
     margin: 8px 0 0;
     border-collapse: collapse;
     table-layout: fixed;
 }

 .info td {
     border: .5pt solid #D8DCE4;
     vertical-align: top;
     padding: 4pt 4pt 4pt 6pt;
 }

 .info td:nth-child(odd) {
     background: #EEF3FA;
 }

 .info td:nth-child(even) {
     background: #FEF3CD;
 }

 .info .label {
     margin: 3pt 0 0;
     font-size: 9pt;
     font-weight: 700;
     color: var(--navy);
     padding: initial;
 }

 .info .value {
     margin: 1pt 0 3pt;
     font-size: 9.5pt;
     color: #1C1C1C;
 }

 /* Section bars */
 .section-bar {
     margin: 10pt 0 5pt;
     padding: 1px 0 1px 6px;
     font-size: 10pt;
     font-weight: 700;
     color: #fff;
     background: var(--purble);
     text-transform: uppercase;
 }

 .section-bar.accent {
     background: var(--purble);
 }

 /* .section-bar.teal {
     background: var(--teal);
 } */

 .glance {
     margin: 4pt 0;
     padding: 0 2px;
     line-height: 1.15;
     color: #1C1C1C;
     padding: 0 10px;
 }

 /* Bullets */
 .bullets {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .bullets li {
     display: flex;
     gap: 0;
     margin: 2.75pt 0 1.9pt;
     padding-left: 10pt;
     color: #1C1C1C;
 }

 .bullets li::before {
     content: "▸\00a0\00a0";
     flex: none;
     color: var(--gold);
     white-space: pre;
 }

 .bullets.dark li {
     color: #000;
 }

 /* Closing banner */
 .closing {
     margin-top: 6pt;
     background: var(--purble);
     text-align: center;
 }

 .closing .cta {
     margin: 0;
     padding: 3px 0 0;
     font-size: 11pt;
     font-weight: 700;
     color: #fff;
     white-space: pre;
 }

 .closing .line {
     margin: 0;
     padding-bottom: 4px;
     font-size: 9.5pt;
     font-style: italic;
     color: #C8D9EF;
 }


 /* QR apply card */
 .qr-card {
     background: linear-gradient(160deg, #7a2590, #5b1a70);
     color: #fff;
     border: none;
     text-align: center;
     padding: 36px 20px;
     width: 58%;
     margin: 0 auto 40px;
     box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
 }

 .qr-card .small {
     letter-spacing: .2em;
     font-size: .95rem;
     opacity: .9
 }

 .qr-card .big {
     font-size: clamp(1.8rem, 5vw, 2.6rem);
     font-weight: 800;
     letter-spacing: .04em;
     margin: 4px 0 22px
 }

 .qr-box {
     display: inline-block;
     background: #fff;
     padding: 12px;
     border-radius: 12px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
     transition: .2s
 }

 .qr-box:hover {
     transform: scale(1.03)
 }

 .qr-box svg {
     display: block;
     width: 230px;
     height: 230px;
     image-rendering: pixelated
 }

 .qr-card .brand-mark {
     margin-top: 24px;
     font-size: 2rem;
     font-weight: 300;
     letter-spacing: .04em
 }

 .qr-card .brand-mark small {
     display: block;
     font-size: .75rem;
     font-style: italic;
     opacity: .85;
     letter-spacing: .06em
 }

 .qr-card .alt {
     display: inline-block;
     margin-top: 14px;
     color: #fff;
     opacity: .9;
     font-size: .85rem
 }

 .video-banner {
     position: relative;
     width: 100%;
     height: 400px;
     /* Change this as needed */
     overflow: hidden;
 }

 .banner-video {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
 }



 @media (max-width: 560px) {
     .info, .info tbody, .info tr, .info td {
         display: block;
         width: 100%;
     }

     .info td {
         margin-top: -1px;
     }
 }