:root {
    --about-navy: #092a58;
    --about-blue: #1469d8;
    --about-gold: #d8a331;
    --about-ink: #173a6a;
    --about-line: #c9dcef;
    --about-muted: #57749b;
}

.jmt-about-page { min-height: 100vh; background: #eef6fb; color: var(--about-ink); }
.jmt-about-page__main { min-height: 45vh; }
.jmt-about { padding: 0; background: #eef6fb url('../img/home-why-marine-mist.png') center top / cover no-repeat; }
.jmt-about *, .jmt-about *::before, .jmt-about *::after { box-sizing: border-box; }
.jmt-about__shell { width: 100%; margin: 0; overflow: hidden; background: rgba(255, 255, 255, .93); }

/* Desktop proportions match the approved reference: 590px copy / 897px image at 1487px. */
.jmt-about__hero { position: relative; display: grid; grid-template-columns: 39.68% 60.32%; height: clamp(300px, 23vw, 342px); overflow: hidden; border-bottom: 1px solid var(--about-line); }
.jmt-about__hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: 20px clamp(34px, 4.7vw, 72px); background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .96) 64%, rgba(255, 255, 255, .91) 77%, rgba(255, 255, 255, .55) 90%, rgba(255, 255, 255, 0) 100%); }
.jmt-about h1, .jmt-about h2, .jmt-about h3, .jmt-about p { margin-top: 0; }
.jmt-about h1 { max-width: 440px; margin-bottom: 8px; color: var(--about-navy); font: 700 clamp(49.75px, 4.618vw, 67.05px)/.98 Georgia, 'Times New Roman', serif; letter-spacing: .012em; }
.jmt-about h1::after { display: block; width: 40px; height: 3px; margin-top: 12px; content: ''; background: var(--about-gold); }
.jmt-about__lead { max-width: 470px; margin-bottom: 7px; color: var(--about-ink); font: 700 clamp(14.6px, 1.082vw, 15.68px)/1.4 Arial, sans-serif; }
.jmt-about__intro { max-width: 490px; margin-bottom: 11px; color: #34567f; font: 400 clamp(13.52px, 1.017vw, 14.6px)/1.42 Arial, sans-serif; }
.jmt-about__promise-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.jmt-about__promise-list li { display: flex; align-items: center; gap: 8px; color: var(--about-navy); font: 700 13.52px/1.25 Arial, sans-serif; }
.jmt-about__promise-list i { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid var(--about-gold); border-radius: 50%; color: var(--about-gold); font-size: 10px; }
.jmt-about__hero-media { position: relative; z-index: 1; width: calc(100% + 10vw); min-width: 0; margin-left: -10vw; overflow: hidden; background: #e4edf5; }
.jmt-about__hero-media::before { position: absolute; z-index: 1; inset: 0 auto 0 0; width: 37%; content: ''; background: linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .64) 46%, rgba(255, 255, 255, 0) 100%); pointer-events: none; }
.jmt-about__hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.jmt-about__content-grid { display: grid; grid-template-columns: 29.5% 70.5%; align-items: stretch; border-bottom: 1px solid var(--about-line); }
.jmt-about__sidebar { padding: clamp(27px, 2.8vw, 43px) clamp(27px, 3vw, 45px); border-right: 1px solid var(--about-line); background: rgba(246, 251, 255, .76); }
.jmt-about__side-section + .jmt-about__side-section { margin-top: 22px; padding-top: 21px; border-top: 1px solid var(--about-line); }
.jmt-about__side-section h2 { display: flex; align-items: center; gap: 11px; margin: 0 0 13px; color: var(--about-navy); font: 700 15.62px/1.2 Arial, sans-serif; letter-spacing: .01em; text-transform: uppercase; }
.jmt-about__side-section h2 > i { width: 20px; color: var(--about-blue); font-size: 19px; text-align: center; }
.jmt-about__details-list, .jmt-about__plain-list { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.jmt-about__details-list li { display: flex; align-items: flex-start; gap: 11px; }
.jmt-about__details-list > li > i { width: 17px; padding-top: 2px; color: var(--about-blue); font-size: 16px; text-align: center; }
.jmt-about__details-list span, .jmt-about__obligation-list span { display: grid; gap: 2px; }
.jmt-about__details-list b { color: var(--about-ink); font: 700 14.47px/1.26 Arial, sans-serif; }
.jmt-about__details-list small { color: var(--about-muted); font: 400 13.31px/1.32 Arial, sans-serif; }
.jmt-about__plain-list li { position: relative; padding-left: 15px; color: #426286; font: 400 14.47px/1.38 Arial, sans-serif; }
.jmt-about__plain-list li::before { position: absolute; left: 0; color: var(--about-gold); content: '•'; font-weight: 700; }
.jmt-about__side-section--two-cols { display: grid; grid-template-columns: 1fr; gap: 20px; }

.jmt-about__workflow { padding: clamp(28px, 3vw, 45px) clamp(33px, 4.3vw, 67px) clamp(29px, 3.3vw, 47px); }
.jmt-about__workflow > h2, .jmt-about__obligations > h2 { margin-bottom: 17px; color: var(--about-navy); font: 700 clamp(19.09px, 1.805vw, 25.46px)/1.18 Arial, sans-serif; letter-spacing: .015em; text-transform: uppercase; }
.jmt-about__workflow > h2::after, .jmt-about__obligations > h2::after { display: block; width: 32px; height: 2px; margin-top: 10px; content: ''; background: var(--about-gold); }
.jmt-about__steps { display: grid; }
.jmt-about__step { display: grid; grid-template-columns: 50px 50px minmax(160px, .86fr) minmax(250px, 1.5fr); align-items: center; gap: 14px; min-height: 68px; padding: 9px 0; border-bottom: 1px dashed #b9cee5; }
.jmt-about__step:last-child { border-bottom: 0; }
.jmt-about__step-number { color: #b38321; font: 700 28.93px/1 Georgia, 'Times New Roman', serif; }
.jmt-about__step-icon { display: grid; width: 45px; height: 45px; place-items: center; border: 1px solid #a9c5e5; border-radius: 50%; color: var(--about-blue); font-size: 19px; }
.jmt-about__step h3 { margin-bottom: 0; color: var(--about-navy); font: 700 15.62px/1.28 Arial, sans-serif; }
.jmt-about__step p { margin-bottom: 0; color: #47688e; font: 400 14.47px/1.36 Arial, sans-serif; }

/* This stays inside the right column, as in the approved reference. */
.jmt-about__obligations { margin-top: 25px; padding: 19px 22px 20px; border: 1px solid #bfd3e8; border-radius: 10px; background: rgba(249, 252, 255, .84); }
.jmt-about__obligations > h2 { margin-bottom: 16px; font-size: 17.94px; }
.jmt-about__obligation-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.jmt-about__obligation-list article { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 6px 12px; border-right: 1px solid #bfd3e8; }
.jmt-about__obligation-list article:first-child { padding-left: 0; }
.jmt-about__obligation-list article:last-child { padding-right: 0; border-right: 0; }
.jmt-about__obligation-list article > i { color: var(--about-blue); font-size: 25px; }
.jmt-about__obligation-list b { color: var(--about-ink); font: 700 13.31px/1.24 Arial, sans-serif; }
.jmt-about__obligation-list small { color: #5b789d; font: 400 12.16px/1.22 Arial, sans-serif; }

@media (max-width: 1100px) {
    .jmt-about__hero { grid-template-columns: 40% 60%; }
    .jmt-about__content-grid { grid-template-columns: 31% 69%; }
    .jmt-about__step { grid-template-columns: 41px 43px minmax(148px, .84fr) minmax(198px, 1.36fr); gap: 11px; }
    .jmt-about__step-number { font-size: 24.3px; }
    .jmt-about__obligation-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .jmt-about__obligation-list article:first-child { padding-left: 11px; }
    .jmt-about__obligation-list article:nth-child(3) { border-right: 0; }
    .jmt-about__obligation-list article:nth-child(-n + 3) { border-bottom: 1px solid #bfd3e8; }
}

@media (max-width: 820px) {
    .jmt-about__hero { grid-template-columns: 1fr; height: auto; }
    .jmt-about__hero-copy { min-height: 330px; padding: 38px 28px; }
    .jmt-about__hero-media { width: auto; height: 290px; margin-left: 0; }
    .jmt-about__content-grid { grid-template-columns: 1fr; }
    .jmt-about__sidebar { border-right: 0; border-bottom: 1px solid var(--about-line); }
    .jmt-about__side-section--two-cols { grid-template-columns: 1fr 1fr; }
    .jmt-about__workflow { padding: 34px 30px; }
}

@media (max-width: 600px) {
    .jmt-about__hero-copy, .jmt-about__sidebar, .jmt-about__workflow { padding-inline: 20px; }
    .jmt-about h1 { font-size: clamp(45.42px, 15.141vw, 62.73px); }
    .jmt-about__hero-media { height: 220px; }
    .jmt-about__side-section--two-cols { grid-template-columns: 1fr; }
    .jmt-about__step { grid-template-columns: 39px 42px 1fr; align-items: start; padding-block: 15px; }
    .jmt-about__step p { grid-column: 3; }
    .jmt-about__step-icon { width: 40px; height: 40px; font-size: 17px; }
    .jmt-about__step-number { padding-top: 7px; font-size: 21.99px; }
    .jmt-about__obligations { margin-top: 18px; padding: 17px 15px; }
    .jmt-about__obligation-list { grid-template-columns: 1fr; }
    .jmt-about__obligation-list article, .jmt-about__obligation-list article:first-child, .jmt-about__obligation-list article:nth-child(3) { padding: 10px 0; border-right: 0; border-bottom: 1px solid #bfd3e8; }
    .jmt-about__obligation-list article:last-child { border-bottom: 0; }
}