/* ===========================================================
   GLOBAL CLEANUPS & ENHANCEMENTS (append after base site CSS)
   =========================================================== */

/* 1) Single reduced-motion gate */
@media (prefers-reduced-motion: reduce) {
    .hidden, .visible,
    .card, .card-hover-image-container,
    .slides .slide {
        transition: none !important;
        animation: none !important;
    }
}

/* 2) iOS/Safari viewport safety */
@supports (height: 1svh) {
    .contact-header {
        min-height: 24svh;
    }
    /* homepage hero removed */
}

/* 3) Fluid media on tablet & down (+ cover on image tiles) */
@media (max-width: 991px) {
    img.lazyload {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    .grid-cell.image img:not(.card-icon),
    .licenses-card-image img {
        object-fit: cover;
    }
}

/* 4) Typography safety on dense bullets/paragraphs */
@media (max-width: 767px) {
    .about-wrapper p,
    .licenses-text ul li,
    .card_text p,
    .business .card-content ul li {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* 5) Ensure mosaic/grid containers render as grids if base is missing */
@media (max-width: 1199px) {
    .grid-section {
        display: grid;
    }
}

/* 6) Better small-screen CTAs */
@media (max-width: 480px) {
    .c2a {
        min-height: 44px;
        padding: 10px 14px;
        line-height: 1.2;
        touch-action: manipulation;
    }
}

/* 7) Prevent layout shift from big logos on smaller screens */
@media (max-width: 991px) {
    .licenses-card-image img,
    .shareholder img,
    .about-grid-cell img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* 8) Nicer anchor jumps under sticky headers */
@media (max-width: 991px) {
    .business, .licenses, .why-us, .shareholders, .founding-section {
        scroll-margin-top: 80px;
    }
}


/* =========================================
   ABOUT US — RESPONSIVE OVERRIDES (DROP-IN)
   ========================================= */

/* ---------- XL polish (≥1440px) ---------- */
@media (min-width: 1440px) {
    .about-wrapper {
        padding: 0 8vw;
    }

    .values-vision-header,
    .vision,
    .about-message {
        padding: 40px 8vw 70px 8vw;
    }

    .princples-grid-wrapper {
        padding: 0 8vw;
    }
}

/* ---------- Laptop / Large tablet (≤1199px) ---------- */
@media (max-width: 1199px) {
    /* Header */
    .contact-header {
        min-height: 28vh;
    }

        .contact-header h1 {
            right: 48px;
            left: auto;
            font-size: 36px;
        }

    /* “About” top section */
    .about-hero {
        align-items: stretch;
    }

    .about-wrapper {
        padding: 0 40px;
    }

        .about-wrapper h1 {
            font-size: 56px;
            line-height: 1.15;
        }

        .about-wrapper p {
            font-size: 18px;
            line-height: 1.7;
        }

    /* Logo grid — 3 columns */
    .about-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(160px, auto);
        gap: 16px;
        padding: 0 40px;
    }

    .about-grid-img {
        grid-column: 1 / -1;
        grid-row: auto;
        height: 360px;
    }

    .about-grid-cell, .about-empty {
        min-height: 160px;
    }

        .about-grid-cell img {
            padding: 16px;
        }

    /* Values / Vision — 3/3 split */
    .values-vision {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: auto auto auto;
    }

    .values-vision-header {
        grid-column: 1 / 5;
        grid-row: 1 / 3;
    }

    .vision-cell.lightBlue {
        grid-column: 5 / 7;
        grid-row: 1 / 2;
    }

    .vision {
        grid-column: 1 / 4;
        grid-row: 3 / 4;
    }

    .sea-view {
        grid-column: 4 / 7;
        grid-row: 3 / 4;
    }

    .engine-img {
        grid-column: 3 / 4;
        grid-row: 3 / 4;
        margin: 0;
    }

    .about-message {
        grid-column: 1 / 7;
        grid-row: auto;
        background-size: 85%;
        background-position: 160% 100%;
    }

    /* Principles — 3 cols */
    .princples-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto auto auto;
        gap: 16px;
    }

    .princples-img {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .excellence {
        grid-column: 3 / 4;
        grid-row: 1;
        padding: 24px;
    }

    .integrity {
        grid-column: 1 / 2;
        grid-row: 2;
        padding: 24px;
    }

    .princples-center {
        grid-column: 2 / 3;
        grid-row: 2;
    }

    .innovation {
        grid-column: 3 / 4;
        grid-row: 2;
        padding: 24px;
    }

    .commitment {
        grid-column: 1 / 2;
        grid-row: 3;
        padding: 24px;
    }

    .growth {
        grid-column: 2 / 4;
        grid-row: 3;
        padding: 24px;
    }

    /* Board / team rows */
    .team-container {
        gap: 16px;
    }

    .company-box, .company-box-empty {
        width: 220px;
    }

    .members-column {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .member-box img {
        width: 100%;
        height: auto;
        aspect-ratio: 2/3;
        object-fit: cover;
    }
}

/* ---------- Tablet (≤991px) ---------- */
@media (max-width: 991px) {
    /* Header */
    .contact-header {
        min-height: 24vh;
    }

        .contact-header h1 {
            right: 32px;
            font-size: 32px;
        }

    /* About text */
    .about-wrapper {
        padding: 0 24px;
    }

        .about-wrapper h1 {
            font-size: 42px;
        }

        .about-wrapper p {
            font-size: 16px;
            line-height: 1.7;
        }

    /* About grid — 2 cols */
    .about-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(140px, auto);
        gap: 12px;
        padding: 0 24px;
    }

    .about-grid-img {
        height: 300px;
    }

    .about-empty {
        display: none;
    }

    /* Values / Vision — stacked */
    .values-vision {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto auto auto auto;
    }

    .values-vision-header {
        grid-column: 1 / -1;
        padding: 32px 24px 40px;
        min-height: auto;
    }

    .vision-cell.lightBlue {
        display: none;
    }

    .vision {
        grid-column: 1 / -1;
        padding: 24px;
    }

    .sea-view {
        grid-column: 1 / -1;
    }

    .engine-img {
        display: none;
    }

    .about-message {
        grid-column: 1 / -1;
        padding: 24px;
        background-size: 120%;
        background-position: 130% 100%;
    }

    /* Principles — 2 cols */
    .principles-header {
        min-height: 280px;
    }

    .princples-grid-wrapper {
        padding: 0 24px;
        margin-top: -180px;
    }

    .princples-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 12px;
    }

    .princples-img, .princples-center {
        grid-column: 1 / -1;
    }

    .excellence, .integrity, .innovation, .commitment, .growth {
        padding: 20px;
    }

    /* Board / team — 2 cols */
    .team-container {
        flex-direction: column;
        align-items: stretch;
    }

    .company-box, .company-box-empty {
        width: 100%;
        height: auto;
        padding: 16px;
        justify-content: flex-start;
    }

    .members-column {
        grid-template-columns: repeat(2, 1fr);
    }

    .member-box .name, .member-box .description {
        font-size: 16px;
    }
}

/* ---------- Phones (≤767px) ---------- */
@media (max-width: 767px) {
    /* Header */
    .contact-header {
        min-height: 20vh;
    }

        .contact-header h1 {
            position: static;
            margin: 16px;
            text-align: left;
        }

    /* About copy */
    .about-wrapper {
        padding: 0 16px;
    }

        .about-wrapper h1 {
            font-size: 32px;
        }

        .about-wrapper p {
            font-size: 15px;
            line-height: 1.65;
        }

    .c2a {
        width: 160px;
        min-height: 44px;
        font-size: 14px;
    }

    /* Grid → 1 col */
    .about-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(120px, auto);
        gap: 10px;
        padding: 0 16px;
    }

    .about-grid-img {
        height: 220px;
    }

    .about-grid-cell, .about-empty {
        min-height: 120px;
    }

        .about-grid-cell img {
            padding: 12px;
            max-height: 100px;
            object-fit: contain;
        }

    /* Values / Vision — single column */
    .values-vision {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .values-vision-header {
        padding: 20px 16px 28px;
    }

        .values-vision-header p {
            font-size: 16px;
            line-height: 1.7;
        }

    .vision {
        padding: 16px;
    }

        .vision h1 {
            font-size: 32px;
            margin-bottom: 8px;
        }

        .vision p {
            font-size: 18px;
        }

    .sea-view img {
        height: 220px;
        object-fit: cover;
    }

    .about-message {
        padding: 16px;
        background-size: 200%;
        background-position: 120% 110%;
    }

        .about-message h1 {
            font-size: 32px;
        }

        .about-message p {
            font-size: 18px;
        }

    /* Principles */
    .principles-header {
        min-height: 180px;
    }

    .princples-grid-wrapper {
        padding: 0 16px;
        margin-top: -120px;
    }

    .princples-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .excellence h1, .integrity h1, .innovation h1, .commitment h1, .growth h1 {
        font-size: 24px;
    }

    .excellence p, .integrity p, .innovation p, .commitment p, .growth p {
        font-size: 16px;
    }

    /* About art */
    .about-art {
        justify-content: center;
    }

        .about-art img {
            width: 260px;
            height: auto;
            margin: 16px auto 0;
        }

    /* Team / Board */
    .team-section {
        padding: 16px;
    }

    .team-container {
        gap: 12px;
    }

    .company-box, .company-box-empty {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 8px;
    }

        .company-box img {
            max-width: 200px;
            height: auto;
        }

    .members-column {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .member-box {
        padding-bottom: 8px;
        border-bottom: 1px solid #eee;
    }

        .member-box img {
            width: 100%;
            height: auto;
            aspect-ratio: 3/4;
        }

        .member-box .name {
            font-size: 18px;
        }

        .member-box .description {
            font-size: 14px;
            color: #555;
        }
}

/* ---------- Small phones (≤480px) ---------- */
@media (max-width: 480px) {
    /* hero-text removed from this list */
    .shareholders h1,
    .business h1,
    .licenses h1,
    .why-us h1 {
        font-size: 24px;
    }

    .c2a {
        width: 138px;
        min-height: 40px;
        font-size: 13px;
    }

    .shareholder {
        grid-template-columns: 64px 1fr;
    }

        .shareholder img {
            width: 64px;
        }

    .grid-cell {
        min-height: 170px;
    }
}


/* =========================================
   WHAT WE DO — RESPONSIVE OVERRIDES (DROP-IN)
   ========================================= */

/* ---------- XL polish (≥1440px) ---------- */
@media (min-width: 1440px) {
    .contact-header {
        min-height: 28vh;
    }

    .grid-section, .business, .licenses, .why-us {
        padding-left: 62px;
        padding-right: 62px;
    }

    .grid-section {
        gap: 12px;
    }
}

/* ---------- Laptop / Large tablet (≤1199px) ---------- */
@media (max-width: 1199px) {
    /* Header band */
    .contact-header h1 {
        font-size: 48px;
    }

    .contact-header {
        min-height: 24vh;
    }

    /* Mosaic grid — keep 4 cols, tighten */
    .grid-section {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        padding: 0 40px;
    }

    .grid-cell {
        min-height: 320px;
    }

    .grid-col-span-2 {
        grid-column: span 2;
    }

    .grid-cell.image .card-icon {
        width: 72px;
        height: 72px;
    }

    /* Business strip */
    .business {
        margin: 24px 40px;
    }

        .business h1 {
            font-size: 44px;
        }

    .business-content {
        gap: 18px;
    }

    .card-title-wrapper {
        padding: 22px;
    }

    .card-icon-wrapper {
        padding: 22px;
    }

        .card-icon-wrapper img {
            width: 72px;
            height: 72px;
        }

    .card-content {
        padding: 20px;
    }

    /* Licenses rows */
    .licenses {
        padding: 24px 40px;
        gap: 22px;
    }

        .licenses h1 {
            font-size: 44px;
        }

    .licenses-card {
        align-items: center;
        gap: 18px;
    }

    .licenses-card-image {
        margin: 36px;
        min-width: 200px;
    }

    .licenses-text {
        padding: 22px 28px;
    }

    /* Products & Services */
    .why-us {
        margin: 24px 40px;
    }

        .why-us h1 {
            font-size: 44px;
        }

    .cards-wrapper {
        gap: 16px;
    }

    .card {
        padding: 24px;
        min-height: 520px;
    }

    .card-hover-image-container {
        max-height: 58%;
    }
}

/* ---------- Tablet (≤991px) ---------- */
@media (max-width: 991px) {
    /* Header */
    .contact-header {
        min-height: 22vh;
    }

        .contact-header h1 {
            font-size: 40px;
            right: 24px;
            left: auto;
        }

    /* Mosaic grid → 2 cols */
    .grid-section {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 24px;
    }

    .grid-cell {
        min-height: 260px;
    }

        .grid-cell.white h2, .grid-cell .title {
            font-size: 26px;
        }

        .grid-cell.image .card-icon {
            width: 60px;
            height: 60px;
        }

        .grid-cell.yellow img {
            width: 62%;
            max-height: 52%;
        }

    /* Business → vertical cards */
    .business {
        margin: 24px;
    }

        .business h1 {
            font-size: 36px;
            margin-bottom: 18px;
        }

    .business-content {
        flex-direction: column;
        gap: 16px;
    }

    .card-title-wrapper {
        padding: 18px;
    }

    .card-icon-wrapper {
        padding: 18px;
    }

        .card-icon-wrapper img {
            width: 64px;
            height: 64px;
        }

    .card-content ul li {
        line-height: 1.65;
    }

    /* Licenses → image above text */
    .licenses {
        padding: 20px 24px;
        gap: 20px;
    }

        .licenses h1 {
            font-size: 36px;
        }

    .licenses-card {
        flex-direction: column;
        align-items: stretch;
    }

    .licenses-card-image {
        width: 100%;
        margin: 0;
        padding: 16px;
        min-width: 0;
    }

        .licenses-card-image img {
            max-width: 260px;
            margin: 0 auto;
            display: block;
        }

    .licenses-text {
        padding: 20px;
    }

        .licenses-text h2 {
            font-size: 20px;
        }

        .licenses-text ul li {
            line-height: 1.6;
        }

    /* Products & Services → 2-up */
    .cards-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        padding: 0;
    }

    .card-wrapper {
        width: 100%;
    }

    .card {
        min-height: auto;
    }

    .card-hover-image-container {
        position: static;
        transform: none !important;
        max-height: none;
        margin-top: 12px;
    }

        .card-hover-image-container img {
            width: 100%;
            height: auto;
            object-fit: contain;
        }

    /* Fluid lazy images */
    img.lazyload {
        width: 100%;
        height: auto;
        max-width: 100%;
    }
}

/* ---------- Phones (≤767px) ---------- */
@media (max-width: 767px) {
    /* Header */
    .contact-header {
        min-height: 18vh;
    }

        .contact-header h1 {
            font-size: 28px;
            right: 16px;
        }

    /* Mosaic grid → 1 col; drop empties */
    .grid-section {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 16px;
        margin-top: 16px;
    }

    .grid-cell {
        min-height: 200px;
    }

        .grid-cell.empty {
            display: none;
        }

        .grid-cell.image .overlay {
            display: block;
            background: rgba(19,45,73,0.45);
        }

        .grid-cell.image .card-icon {
            width: 48px;
            height: 48px;
            margin: 12px;
        }

        .grid-cell.white h2, .grid-cell .title {
            font-size: 22px;
        }

    /* Business */
    .business {
        margin: 20px 16px;
    }

        .business h1 {
            font-size: 28px;
            margin-bottom: 12px;
        }

    .card-title h2 {
        font-size: 18px;
    }

    .card-content {
        padding: 16px;
    }

        .card-content ul li {
            font-size: 14px;
        }

    /* Licenses */
    .licenses {
        padding: 20px 16px;
    }

        .licenses h1 {
            font-size: 28px;
        }

    .licenses-card-image img {
        max-width: 200px;
    }

    .licenses-text h2 {
        font-size: 18px;
    }

    .licenses-text ul li {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Products & Services — single column; disable hover-only affordances */
    .why-us {
        margin: 20px 16px;
    }

        .why-us h1 {
            font-size: 28px;
        }

    .cards-wrapper {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .card {
        padding: 18px;
    }

    .card_text h3 {
        font-size: 18px;
    }

    .card_text p {
        font-size: 14px;
    }

    .cards-wrapper .card-wrapper:hover .card a,
    .cards-wrapper .card-wrapper:hover .card-hover-image-container-m {
        transform: none;
        opacity: 1;
    }

    .card-hover-image-container {
        max-height: none;
    }
}

/* ---------- Small phones (≤480px) ---------- */
@media (max-width: 480px) {
    .contact-header h1,
    .business h1,
    .licenses h1,
    .why-us h1 {
        font-size: 24px;
    }

    .grid-cell {
        min-height: 170px;
    }
}

/* ---------- Media/ratio safety (tablet & down) ---------- */
@media (max-width: 991px) {
    .grid-cell.image img:not(.card-icon) {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .licenses-card-image img {
        aspect-ratio: auto;
        height: auto;
    }
}
/* ===== ABOUT US — FINAL PATCHES (drop AFTER your media.css) ===== */

/* 1) Desktop tidy: make the two columns explicit so gaps look consistent */
.about-hero {
    display: grid;
    grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
    align-items: start;
    gap: 32px;
}

.about-wrapper, .about-grid {
    min-width: 0;
}
/* prevents overflow in grid children */

/* 2) Prevent any logo/image tile from floating over the text column */
.about-wrapper {
    position: relative;
    z-index: 2;
}

.about-grid {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
    /* hide stray shadows/transforms */

    /* 3) Make all images inside the mosaic safe */
    .about-grid img {
        display: block;
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

.about-grid-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* big ship photo */

/* 4) Tablet: **stack** hero (text first, mosaic below) and give full width */
@media (max-width: 991px) {
    .about-hero {
        display: block !important;
    }
    /* override any base flex/grid */
    .about-wrapper, .about-grid {
        width: 100%;
    }

    .about-grid {
        margin-top: 16px;
        padding: 0 24px;
    }
}

/* 5) Phone: single-column mosaic + tighter paddings */
@media (max-width: 767px) {
    .about-grid {
        display: grid !important; /* if your base CSS missed it */
        grid-template-columns: 1fr !important; /* force 1-up tiles */
        grid-auto-rows: minmax(120px,auto);
        gap: 10px;
        padding: 0 16px;
    }

    .about-grid-img {
        height: 220px;
    }

    .about-grid-cell, .about-empty {
        min-height: 120px;
    }

        .about-grid-cell img {
            max-height: 100px;
            object-fit: contain;
            padding: 12px;
        }
}

/* 6) Kill decorative empties on tablet/phone (prevents awkward gaps) */
@media (max-width: 991px) {
    .about-empty {
        display: none !important;
    }
}

/* 7) Make sure the “Shareholders” ribbon starts beneath the hero section */
.values-vision, .princples-grid-wrapper, .team-section {
    clear: both;
}
/* just in case */

/* 8) Extra guardrails for overlapping/zoomed tiles coming from base styles */
.about-grid .about-grid-cell,
.about-grid .about-empty {
    transform: none !important; /* cancel hover/scroll transforms on touch */
    will-change: auto !important;
}

/* =========================================
   QUICK FIX PACK — put AFTER your media.css
   ========================================= */

/* 1) HOMEPAGE hero-related overrides removed */

/* 2) ABOUT — force a clean 2-column layout on desktop, stack below that */
@media (min-width: 1200px) {
    .about-hero {
        display: grid;
        grid-template-columns: minmax(420px, 1.05fr) 1fr; /* text | mosaic */
        gap: 40px;
        align-items: start;
        padding: 0 5vw;
    }

    .about-wrapper {
        padding: 0 !important;
    }
    /* moved to grid gutter */
    .about-grid {
        padding: 0 !important;
        align-self: start;
    }
}

/* ensure it stacks cleanly when dropping below desktop */
@media (max-width: 1199px) {
    .about-hero {
        display: block;
    }
}

/* image containment so logos/photos don’t overflow the tiles */
.about-grid-cell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Small polish already safe from your global block */
@supports (height: 1svh) {
    /* hero-section rule removed */
}

/* =============== QUICK PATCHES =============== */

/* 1) HOME — hero-specific wide-screen rules removed */

/* 2) ABOUT — keep logos near the heading on tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .about-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-auto-rows: minmax(120px,auto);
        gap: 16px;
        padding: 0 24px;
    }

    .about-grid-img {
        grid-column: 1 / -1;
        height: 300px;
    }

    .about-grid .aramco {
        grid-column: 1;
    }

    .about-grid .HHI {
        grid-column: 2;
    }

    .about-grid .dussur {
        grid-column: 3;
    }

    .about-empty {
        display: none !important;
    }

    .about-grid-cell img {
        width: auto;
        max-width: 100%;
        max-height: 60px;
        object-fit: contain;
    }
}

/* 3) ABOUT — phones: convert mosaic to a simple logo row + hero image under */
@media (max-width: 767px) {
    .about-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        padding: 0 16px;
    }

    .about-empty {
        display: none !important;
    }
    /* drop decor blocks */
    .about-grid-cell {
        order: 1;
        flex: 1 1 calc(33.333% - 8px);
        min-height: 96px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 6px rgba(0,0,0,.06);
    }

        .about-grid-cell.aramco {
            order: 1;
        }

        .about-grid-cell.HHI {
            order: 2;
        }

        .about-grid-cell.dussur {
            order: 3;
        }

        .about-grid-cell img {
            max-height: 44px;
            width: auto;
            opacity: 1;
            filter: none;
            display: block;
        }

    .about-grid-img {
        order: 4;
        width: 100%;
        height: 220px;
    }
    /* ship photo below logos */
}

/* 4) Safety: never let logo images be cropped/hidden anywhere */
.about-grid-cell img,
.shareholder img,
.licenses-card-image img {
    object-fit: contain !important;
}

/* 5) Desktop text width rule that referenced hero-text removed */

/* Phones only (≤767px): hide logo tiles in the right mosaic */
@media (max-width: 767px) {
    .about-grid .about-grid-cell.aramco,
    .about-grid .about-grid-cell.HHI,
    .about-grid .about-grid-cell.dussur {
        display: none !important;
    }
}

/* Phones: collapse the right mosaic so no blank area */
@media (max-width: 767px) {
    .about-grid {
        display: block !important; /* turn off the grid so it can shrink */
        height: auto !important;
        min-height: 0 !important;
        padding: 0 16px;
    }

        /* Show only the hero image; hide everything else inside the mosaic */
        .about-grid > :not(.about-grid-img) {
            display: none !important; /* hides logos + decorative squares */
        }

    .about-grid-img { /* size of the ship image */
        height: 220px;
    }

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

/* === CORE VALUES (phones ≤767px): image row then text row === */
@media (max-width: 767px) {
    /* Use a vertical flex stack instead of grid */
    .princples-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    /* Order: image → text → image → text → ... */
    .princples-img {
        order: 1;
    }

    .excellence {
        order: 2;
    }

    .princples-center {
        order: 3;
    }

    .integrity {
        order: 4;
    }

    .innovation {
        order: 5;
    }

    .commitment {
        order: 6;
    }

    .growth {
        order: 7;
    }

    /* Make the photos actually show at full width */
    .princples-img img,
    .princples-center img {
        width: 100% !important;
        height: auto !important;
        display: block;
        object-fit: cover;
        object-position: center;
    }

    /* Keep text cards compact on mobile */
    .excellence, .integrity, .innovation, .commitment, .growth {
        min-height: auto !important;
        padding: 16px !important;
    }

    /* Remove any offsets that may leave blank gaps */
    .princples-grid-wrapper {
        margin-top: 0 !important;
    }
}

/* (Optional) Hide the three logo tiles on small screens */
@media (max-width: 767px) {
    .about-grid .about-grid-cell.aramco,
    .about-grid .about-grid-cell.HHI,
    .about-grid .about-grid-cell.dussur {
        display: none !important;
    }
}

/* ===== Removed blocks =====
   - All rules for .hero-section
   - All rules for .hero-content-wrapper
   - All rules for .hero-text and .hero-text h1/p
   - All rules for .hero-image and hero-specific .image-container sizing
   - “HERO DESKTOP RESTORE”, “FINAL NUDGE”, and “SAFE RESET” sections
*/