:root {
     --page: #0A2A3C;
     /* darkest page bg */
     --card: #0E3A58;
     /* main card bg */
     --tab-bg: #0D3450;
     /* tab column bg */
     --tab-line: #1C4A68;
     /* separators */
     --tab-active: #0C385F;
     /* active tab */
     --ink: #E8F3FF;
     /* headings */
     --muted: #B6CDDD;
     /* paragraph */
     --focus: #63C2FF;
     /* focus ring */
     --accent: #63C2FF;
     /* accent line */
     --radius: 14px;
     --shadow: 0 18px 48px rgba(2, 15, 26, .45);
 }

 /* Page */
 * {
     box-sizing: border-box
 }

 body {
     margin: 0;
     /* font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; */
     background: var(--page);
     color: var(--ink);
 }

 .about_intro_section {
     /* padding: clamp(18px, 4vw, 34px) 16px; */
 }

 .about_intro_container {
     max-width: var(--container);
     margin-inline: auto;

 }

 /* Header: title + paragraph */
 .about_intro_header {
     display: grid;
     grid-template-columns: 1.2fr .8fr;
     gap: clamp(16px, 4vw, 40px);
     align-items: center;
     margin-bottom: clamp(14px, 3.2vw, 20px);
 }

 .about_tabs_container {
     margin: 28px auto;

 }

 /* Card + grid layout */
 .about_card {
     /* background: var(--card); */
     border-radius: var(--radius);
     overflow: hidden;
 }

 .about_layout {
     display: grid;
     grid-template-columns: 40% 1fr;
     min-height: 290px;
 }

 /* Tab column */
 .about_tablist {
     /* background: var(--tab-bg); */
     /* padding: 8px 0; */
     border-right: 1px solid rgba(255, 255, 255, .06);
     position: relative;
 }

 .about_tab {
     font-weight: 600;
     font-size: 28px;
     line-height: 100%;
     letter-spacing: 2%;
     text-transform: uppercase;

     width: 100%;
     display: grid;
     grid-template-columns: 46px 1fr;
     align-items: center;
     gap: 8px;
     padding: 33px 28px;
     border: 0;
     background: transparent;
     color: var(--ink);
     text-align: left;
     cursor: pointer;
     transition: background .15s ease, color .15s ease;
 }

 .about_tab+.about_tab {
     border-top: 1px solid var(--tab-line);
 }

 .about_tab:hover {
     background: rgba(255, 255, 255, .06);
 }

 .about_tab:focus-visible {
     outline: 3px solid var(--focus);
     outline-offset: -3px;
 }

 .about_tab_icon {
     width: 30px;
     height: 30px;
     opacity: .95;
 }

 .about_tab.is-active {
     background: var(--tab-active);
     position: relative;
 }

 .about_tab.is-active::after {
     /* content: "";
     position: absolute;
     right: -1px;
     top: 0;
     bottom: 0;
     width: 4px;
     background: linear-gradient(180deg, var(--accent), #3AA9FF);
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px; */
 }

 /* Panel area */
 .about_panel {
     padding: 20px 70px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     background-color: var(--tab-active);
 }

 .about_panel_title {
     font-weight: 700;
     font-size: 36px;
     line-height: 150%;
     letter-spacing: 0;
     color: #FFFFFF;
 }

 .about_panel_text {
     font-weight: 400;
     font-size: 16px;
     line-height: 26px;
     letter-spacing: 0;
     color: #FFFFFF;
 }

 .about_intro_title {
     font-weight: 500;
     font-size: 64px;
     line-height: 110.00000000000001%;
     letter-spacing: -0.56px;
     /* display: flex;
     gap: 10px; */
     vertical-align: middle;
     text-transform: capitalize;
     color: #212121;
     margin: 0;
 }

 .about_intro_brand {
     /* display: block; */
     /* puts InnCrew on a new line */
     color: #0173B5;
 }

 .about_intro_desc {
     font-weight: 400;
     font-size: 18px;
     line-height: 150%;
     letter-spacing: 1%;

     color: #212121;
     margin: .6rem 0 0;
     max-width: 54ch;
 }

 /* Hero image with rounded corners + overlay words */
 .about_intro_hero {
     position: relative;
     border-radius: var(--radius);
     overflow: hidden;
     background: #e7edf6;
 }

 .about_intro_hero img {
     display: block;
     width: 100%;
     height: auto;
     object-fit: cover;
 }

 .about_intro_overlay {
     position: absolute;
     inset: auto auto 28% auto;
     left: clamp(18px, 3vw, 34px);
     color: #fff;
     font-weight: 900;
     text-transform: uppercase;
     line-height: 1.05;
     letter-spacing: .02em;
     font-size: clamp(26px, 7vw, 76px);
     text-shadow: 0 6px 18px rgba(0, 0, 0, .35);
     pointer-events: none;
     /* overlay is decorative */
 }

 /* Make the image area a nice ratio if image is missing/slow */
 .about_intro_hero::before {
     content: "";
     display: block;
     padding-top: 46%;
     /* ~21:10 ratio */
 }

 .about_intro_hero>img {
     position: absolute;
     inset: 0;
     height: 100%;
     width: 100%;
 }

 .about_promise_section {
     padding: clamp(18px, 4vw, 34px) 16px;
 }

 .promise_container {
     max-width: var(--container);
     margin-inline: auto;
 }

 /* Two-column layout */
 .promise_grid {
     display: grid;
     grid-template-columns: 1.08fr 1fr;
     gap: clamp(18px, 4vw, 44px);
     align-items: center;
 }


 .promise_media {
     position: relative;
     border-radius: var(--radius);
     overflow: hidden;
     /* box-shadow: var(--shadow); */
     background: #e7edf6;
 }

 .promise_media::before {
     content: "";
     display: block;
     padding-top: 70%;
 }

 /* aspect ratio fallback */
 .promise_media>img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 /* Right: text */
 .promise_content {
     /* max-width: 56ch; */
 }

 .promise_title {
     font-weight: 600;
     font-size: 44px;
     line-height: 54px;
     letter-spacing: 0;
    color: #201C44;
 }
.promise_text {
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0;
    color: #212121;
    margin: 0 0 14px;
}


 /* ===== Responsive ===== */
 @media (max-width: 767px) {
     .promise_grid {
         grid-template-columns: 1fr;
     }

     .about_intro_overlay {
         left: 16px;
     }

     .about_intro_header {
         grid-template-columns: 1fr;
     }

     .about_layout {
         grid-template-columns: 1fr;
     }

     .about_tablist {
         display: flex;
         overflow: auto;
         gap: 8px;
         padding: 10px;
         border-right: 0;
         border-bottom: 1px solid rgba(255, 255, 255, .08);
     }

     .about_tab {
         grid-template-columns: 22px auto;
         padding: 12px 16px;
         border-radius: 10px;
         min-width: 180px;
     }

     .about_tab+.about_tab {
         border-top: 0;
     }

     .about_tab.is-active::after {
         display: none;
     }

     .about_panel {
         padding: 22px 18px 26px;
     }
 }