:root {
    --navy: #002b4a;
    --deep: #001d33;
    --orange: #ff5e00;
    --ink: #12222d;
    --muted: #64717a;
    --sand: #f2f0ec;
    --paper: #faf9f6;
    --line: rgba(0, 43, 74, .14);
    --container: min(1200px, calc(100% - 48px))
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--paper);
    font-family: Manrope, Arial, sans-serif;
    -webkit-font-smoothing: antialiased
}

body.menu-open {
    overflow: hidden
}

body.is-loading {
    overflow: hidden
}

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--deep);
    transition: opacity .55s ease, visibility .55s ease
}

body.is-ready .page-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none
}

.page-loader:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .08;
    background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
    background-size: 80px 80px
}

.page-loader-inner {
    position: relative;
    width: min(240px, calc(100% - 64px));
    text-align: center
}

.page-loader img {
    width: 180px;
    height: 90px;
    margin: 0 auto 30px;
    object-fit: contain;
    animation: loaderLogo 1.35s ease-in-out infinite
}

.loader-track {
    height: 2px;
    overflow: hidden;
    background: rgba(255,255,255,.18)
}

.loader-track span {
    display: block;
    width: 45%;
    height: 100%;
    background: var(--orange);
    animation: loaderProgress 1.15s cubic-bezier(.65,0,.35,1) infinite
}

.page-loader p {
    margin: 15px 0 0;
    color: rgba(255,255,255,.55);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .24em;
    text-transform: uppercase
}

@keyframes loaderLogo {
    0%, 100% { opacity: .55; transform: translateY(2px) }
    50% { opacity: 1; transform: translateY(-2px) }
}

@keyframes loaderProgress {
    from { transform: translateX(-110%) }
    to { transform: translateX(225%) }
}

a {
    color: inherit;
    text-decoration: none
}

img {
    display: block;
    max-width: 100%
}

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

.skip-link {
    position: fixed;
    top: -100px;
    left: 20px;
    z-index: 999;
    padding: 12px 18px;
    background: var(--orange);
    color: #fff
}

.skip-link:focus {
    top: 20px
}

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    transition: .25s
}

.site-header.scrolled {
    color: var(--navy);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 30px rgba(0, 25, 44, .08);
    backdrop-filter: blur(12px)
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.brand {
    position: relative;
    width: 150px;
    height: 64px;
    padding: 0;
    margin: 8px;
    overflow: hidden
}

.brand .brand-logo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity .38s ease, transform .38s ease
}

.brand-logo-white {
    opacity: 1;
    transform: translateY(0)
}

.brand-logo-dark {
    opacity: 0;
    transform: translateY(7px)
}

.site-header.scrolled .brand-logo-white {
    opacity: 0;
    transform: translateY(-7px)
}

.site-header.scrolled .brand-logo-dark {
    opacity: 1;
    transform: translateY(0)
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 34px;
    font-size: 13px;
    font-weight: 700
}

.site-nav>a:not(.nav-cta) {
    position: relative;
    padding: 12px 0
}

.site-nav>a:not(.nav-cta):after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 4px;
    height: 2px;
    background: var(--orange);
    transition: .2s
}

.site-nav>a:hover:after {
    right: 0
}

.nav-cta {
    padding: 14px 18px;
    background: var(--orange);
    color: #fff
}

.nav-cta span {
    margin-left: 20px
}

.menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 12px;
    border: 0;
    background: var(--orange)
}

.menu-toggle span {
    display: block;
    height: 2px;
    margin: 5px 0;
    background: #fff
}

.hero {
    position: relative;
    height: 100svh;
    max-height: 980px;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background: var(--deep)
}

.hero-media {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, rgba(0, 25, 44, .96), rgba(0, 32, 56, .82) 39%, rgba(0, 24, 42, .2) 73%), linear-gradient(0deg, rgba(0, 24, 42, .72), transparent 48%), url('../images/pdc-drilling-hero.webp');
    background-size: cover;
    background-position: center;
    transform: scale(1.01)
}

.hero-grid {
    position: absolute;
    inset: 0;
    opacity: .09;
    background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(to right, #000, transparent 62%)
}

.hero-content {
    position: relative;
    z-index: 2
}

.eyebrow {
    margin: 0 0 23px;
    color: var(--orange);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .23em;
    text-transform: uppercase
}

.eyebrow:before {
    content: "";
    display: inline-block;
    width: 28px;
    height: 2px;
    margin: 0 12px 3px 0;
    background: currentColor
}

.eyebrow.light {
    color: #ff8a45
}

h1,
h2,
h3,
p {
    margin-top: 0
}

h1,
h2 {
    font-family: "Russo One", Impact, sans-serif;
    text-transform: uppercase
}

h1 {
    max-width: 850px;
    margin-bottom: 25px;
    font-size: clamp(54px, 6.4vw, 92px);
    line-height: 1.02;
    letter-spacing: .015em
}

h1 span {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .8)
}

.hero-lead {
    max-width: 610px;
    margin-bottom: 36px;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .78)
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 34px
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 230px;
    padding: 18px 20px;
    font-size: 13px;
    font-weight: 800
}

.button-primary {
    color: #fff;
    background: var(--orange)
}

.button:hover {
    background: #ff7425
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 7px;
    border-bottom: 1px solid currentColor;
    color: var(--navy);
    font-size: 13px;
    font-weight: 800
}

.light-link {
    color: #fff
}

.hero-footer {
    position: absolute;
    z-index: 2;
    bottom: 32px;
    left: 50%;
    display: flex;
    gap: 56px;
    transform: translateX(-50%);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6)
}

.section {
    padding: 120px 0
}

.split-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 10vw
}

.section-heading h2,
.section-top h2 {
    margin: 0;
    color: var(--navy);
    font-size: clamp(36px, 4.1vw, 58px);
    line-height: 1.1;
    letter-spacing: .01em
}

.large-copy {
    font-size: clamp(21px, 2vw, 28px);
    line-height: 1.55;
    color: var(--navy);
    font-weight: 600
}

.intro-copy>p:not(.large-copy) {
    max-width: 640px;
    margin: 28px 0;
    color: var(--muted);
    line-height: 1.8
}

.focus-strip {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 90px;
    padding: 24px 0;
    border-block: 1px solid var(--line)
}

.focus-strip p {
    margin: 0;
    color: var(--navy);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap
}

.focus-line {
    flex: 1;
    height: 1px;
    background: var(--line)
}

.services {
    color: #fff;
    background: var(--navy)
}

.section-top {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 60px
}

.section-top h2 {
    color: #fff
}

.section-top>p {
    max-width: 440px;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, .6);
    line-height: 1.8
}

.service-list {
    border-top: 1px solid rgba(255, 255, 255, .16)
}

.service-card {
    display: grid;
    grid-template-columns: 70px 110px 1fr;
    gap: 30px;
    align-items: center;
    padding: 42px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    transition: .25s
}

.service-card:hover {
    padding-inline: 24px;
    background: rgba(255, 255, 255, .045)
}

.service-number {
    align-self: start;
    color: var(--orange);
    font-family: "Russo One", sans-serif;
    font-size: 15px
}

.service-icon {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .22)
}

.service-icon svg {
    width: 45px;
    fill: none;
    stroke: var(--orange);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

.service-body {
    display: grid;
    grid-template-columns: .7fr 1.3fr 1fr;
    gap: 50px;
    align-items: center
}

.service-body h3 {
    margin: 0;
    font-family: "Russo One", sans-serif;
    font-size: 29px;
    text-transform: uppercase
}

.service-body p {
    margin: 0;
    color: rgba(255, 255, 255, .62);
    line-height: 1.7
}

.service-body ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, .8);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em
}

.service-body li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .12)
}

.vision {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--orange)
}

.vision:after {
    content: "PDC";
    position: absolute;
    right: -40px;
    bottom: -90px;
    color: rgba(255, 255, 255, .08);
    font-family: "Russo One", sans-serif;
    font-size: 350px;
    font-weight: 600;
    line-height: 1
}

.vision-lines {
    position: absolute;
    inset: 0;
    opacity: .23;
    background: repeating-radial-gradient(ellipse at 0 100%, transparent 0, transparent 32px, rgba(255, 255, 255, .5) 34px, transparent 36px)
}

.vision-content {
    position: relative;
    z-index: 2;
    max-width: 1050px
}

.vision .eyebrow {
    color: #fff
}

.vision blockquote {
    margin: 0;
    font-family: "Russo One", sans-serif;
    font-size: clamp(29px, 3.4vw, 48px);
    line-height: 1.32;
    letter-spacing: .01em;
    text-transform: uppercase
}

.expertise {
    background: var(--sand)
}

.section-top.dark-text h2 {
    color: var(--navy)
}

.section-top.dark-text>p {
    color: var(--muted)
}

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line)
}

.expertise-item {
    min-height: 310px;
    padding: 30px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.expertise-item span {
    color: var(--orange);
    font-family: "Russo One", sans-serif;
    font-size: 13px
}

.expertise-item h3 {
    margin: 90px 0 16px;
    color: var(--navy);
    font-family: "Russo One", sans-serif;
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: .01em;
    text-transform: uppercase
}

.expertise-item p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7
}

.partners-content .large-copy {
    margin-bottom: 45px
}

.partner-row {
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 25px;
    padding: 28px 0;
    border-top: 1px solid var(--line)
}

.partner-index {
    color: var(--orange);
    font-family: "Russo One", sans-serif
}

.partner-row h3 {
    margin-bottom: 10px;
    color: var(--navy);
    font-family: "Russo One", sans-serif;
    font-size: 20px;
    letter-spacing: .01em;
    text-transform: uppercase
}

.partner-row p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7
}

.contact {
    color: #fff;
    background: var(--deep)
}

.contact-inner {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 10vw;
    align-items: end
}

.contact h2 {
    margin: 0 0 22px;
    font-size: clamp(46px, 5.7vw, 76px);
    line-height: 1.06;
    letter-spacing: .01em
}

.contact p:not(.eyebrow) {
    max-width: 470px;
    margin: 0;
    color: rgba(255, 255, 255, .6);
    line-height: 1.7
}

.contact-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 30px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    font-size: clamp(16px, 2.3vw, 27px);
    font-weight: 600
}

.contact-link strong {
    display: grid;
    place-items: center;
    flex: 0 0 58px;
    height: 58px;
    background: var(--orange);
    font-size: 25px
}

.site-footer {
    padding: 75px 0 24px;
    color: #fff;
    background: #001726
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr .7fr 1fr;
    gap: 80px;
    padding-bottom: 70px
}

.footer-brand img {
    width: 180px;
    height: 90px;
    padding: 0;
    object-fit: contain;
    object-position: left center
}

.footer-brand p {
    max-width: 360px;
    margin: 25px 0 0;
    color: rgba(255, 255, 255, .5);
    line-height: 1.7
}

.footer-label {
    margin-bottom: 22px;
    color: var(--orange);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase
}

.footer-links {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 12px;
    font-size: 13px
}

.footer-links .footer-label {
    margin-bottom: 10px
}

.footer-contact>p:not(.footer-label),
.footer-contact a {
    color: rgba(255, 255, 255, .65);
    font-size: 13px;
    line-height: 1.8;
    overflow-wrap: anywhere
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .38);
    font-size: 11px
}

.footer-bottom p {
    margin: 0
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .65s, transform .65s
}

.reveal.visible {
    opacity: 1;
    transform: none
}

.service-card:nth-child(2),
.expertise-item:nth-child(2) {
    transition-delay: .08s
}

.service-card:nth-child(3),
.expertise-item:nth-child(3) {
    transition-delay: .16s
}

.expertise-item:nth-child(4) {
    transition-delay: .24s
}

.contact-inner {
    align-items: start
}

.contact-email {
    display: inline-block;
    margin-top: 30px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    font-size: 14px;
    font-weight: 700
}

.contact-form {
    padding: 40px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .13)
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.form-field-wide {
    grid-column: 1/-1
}

.form-field label {
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase
}

.form-field input,
.form-field textarea {
    width: 100%;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .28);
    border-radius: 0;
    padding: 11px 0 14px;
    color: #fff;
    background: transparent;
    font: inherit;
    outline: 0;
    transition: border-color .2s
}

.form-field textarea {
    min-height: 125px;
    resize: vertical
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: rgba(255, 255, 255, .36)
}

.form-field input:focus,
.form-field textarea:focus {
    border-color: var(--orange)
}

.form-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
    padding: 0 0 0 22px;
    border: 0;
    color: #fff;
    background: var(--orange);
    font: 800 13px Manrope, Arial, sans-serif;
    cursor: pointer
}

.form-submit strong {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-left: 1px solid rgba(255, 255, 255, .25);
    font-size: 24px
}

.form-submit:hover {
    background: #ff7425
}

.form-alert {
    margin-bottom: 25px;
    padding: 16px 18px;
    font-size: 13px;
    line-height: 1.6
}

.form-alert.success {
    background: rgba(55, 182, 121, .18);
    border-left: 3px solid #37b679
}

.form-alert.error {
    background: rgba(255, 94, 0, .14);
    border-left: 3px solid var(--orange)
}

.form-alert ul {
    margin: 7px 0 0;
    padding-left: 18px
}

.form-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important
}

@media(max-width:600px) {
    .contact-form {
        padding: 26px 20px
    }

    .form-grid {
        grid-template-columns: 1fr
    }

    .form-field-wide {
        grid-column: auto
    }
}

@media(max-width:900px) {
    :root {
        --container: min(100% - 36px, 720px)
    }

    .header-inner {
        height: 78px
    }

    .brand {
        width: 130px;
        height: 55px
    }

    .menu-toggle {
        display: block
    }

    .site-nav {
        position: fixed;
        inset: 78px 0 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 35px 24px;
        color: #fff;
        background: var(--deep);
        transform: translateX(100%);
        transition: transform .3s
    }

    .site-nav.open {
        transform: none
    }

    .site-nav>a {
        padding: 20px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .13);
        font-size: 18px
    }

    .nav-cta {
        margin-top: 25px;
        padding-inline: 20px !important
    }

    .hero {
        min-height: 720px;
        max-height: 900px
    }

    .hero-media {
        background-position: 62% center
    }

    .hero-content {
        padding-top: 20px
    }

    .hero-footer {
        display: none
    }

    .section {
        padding: 85px 0
    }

    .split-layout,
    .contact-inner {
        grid-template-columns: 1fr;
        gap: 45px
    }

    .section-top {
        align-items: start;
        flex-direction: column;
        gap: 28px
    }

    .service-card {
        grid-template-columns: 50px 80px 1fr
    }

    .service-body {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .service-body ul {
        margin-top: 10px
    }

    .expertise-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .focus-strip {
        margin-top: 60px
    }

    .footer-main {
        grid-template-columns: 1.2fr .8fr
    }

    .footer-contact {
        grid-column: 1/-1
    }
}

@media(max-width:600px) {
    :root {
        --container: calc(100% - 32px)
    }

    h1 {
        font-size: 47px;
        line-height: 1.08
    }

    .hero-lead {
        font-size: 16px
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 24px
    }

    .button {
        width: 100%
    }

    .section {
        padding: 72px 0
    }

    .section-heading h2,
    .section-top h2 {
        font-size: 35px
    }

    .focus-strip {
        align-items: start;
        flex-direction: column
    }

    .focus-line {
        width: 100%
    }

    .service-card {
        grid-template-columns: 34px 1fr;
        align-items: start;
        gap: 18px
    }

    .service-icon {
        grid-column: 2;
        width: 68px;
        height: 68px
    }

    .service-body {
        grid-column: 2
    }

    .expertise-grid {
        grid-template-columns: 1fr
    }

    .expertise-item {
        min-height: 250px
    }

    .expertise-item h3 {
        margin-top: 55px
    }

    .partner-row {
        grid-template-columns: 36px 1fr
    }

    .contact-link {
        align-items: start
    }

    .contact-link strong {
        flex-basis: 46px;
        height: 46px
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 48px
    }

    .footer-contact {
        grid-column: auto
    }

    .footer-bottom {
        align-items: start;
        flex-direction: column;
        gap: 12px
    }
}

@keyframes heroMediaIn {
    from { opacity: .35; transform: scale(1.08) }
    to { opacity: 1; transform: scale(1.01) }
}

@keyframes heroGridIn {
    from { opacity: 0 }
    to { opacity: .09 }
}

@keyframes heroContentIn {
    from { opacity: 0; transform: translateY(30px) }
    to { opacity: 1; transform: translateY(0) }
}

@keyframes heroFooterIn {
    from { opacity: 0; transform: translate(-50%, 18px) }
    to { opacity: 1; transform: translate(-50%, 0) }
}

.hero-media {
    animation: none
}

.hero-grid {
    opacity: 0;
    animation: none
}

.hero-content .eyebrow,
.hero-content h1,
.hero-content .hero-lead,
.hero-content .hero-actions {
    opacity: 0;
    animation: none
}

body.is-ready .hero-media { animation: heroMediaIn 1.45s cubic-bezier(.2, .7, .2, 1) both }
body.is-ready .hero-grid { animation: heroGridIn 1.1s ease .35s both }
body.is-ready .hero-content .eyebrow,
body.is-ready .hero-content h1,
body.is-ready .hero-content .hero-lead,
body.is-ready .hero-content .hero-actions { animation: heroContentIn .75s cubic-bezier(.2, .7, .2, 1) both }

.hero-content .eyebrow { animation-delay: .18s }
.hero-content h1 { animation-delay: .32s }
.hero-content .hero-lead { animation-delay: .48s }
.hero-content .hero-actions { animation-delay: .62s }
.hero-footer { opacity: 0 }
body.is-ready .hero-footer { animation: heroFooterIn .75s ease .82s both }

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important
    }

    .reveal {
        opacity: 1;
        transform: none
    }

    .hero-content .eyebrow,
    .hero-content h1,
    .hero-content .hero-lead,
    .hero-content .hero-actions {
        opacity: 1;
        transform: none
    }

    .hero-footer {
        opacity: 1;
        transform: translateX(-50%)
    }
}

.site-nav>a.active:after {
    right: 0
}

.partner-logo {
    width: 180px;
    height: 74px;
    margin-bottom: 22px;
    object-fit: contain;
    object-position: left center
}

@media(max-width:600px) {
    .partner-logo {
        width: 150px;
        height: 62px
    }
}

/* Image-led section redesign */
.about-visual {
    position: relative;
    width: min(100%, 470px);
    height: 275px;
    margin: 38px 0 0;
    overflow: hidden;
    background: var(--navy)
}

.about-visual:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0, 29, 51, .78))
}

.about-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.2, .7, .2, 1)
}

.about-visual:hover img { transform: scale(1.035) }

.intro .section-heading h2 {
    font-size: clamp(30px, 3.2vw, 45px);
    line-height: 1.12
}

.about-visual figcaption {
    position: absolute;
    z-index: 2;
    left: 42px;
    right: 42px;
    bottom: 34px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    color: #fff
}

.about-visual figcaption span {
    color: #ff9a60;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase
}

.about-visual figcaption strong {
    max-width: 520px;
    font: 400 clamp(22px, 2.6vw, 36px)/1.2 "Russo One", sans-serif;
    text-align: right;
    text-transform: uppercase
}

.vision {
    background-color: var(--orange);
    background-image: linear-gradient(rgba(226, 72, 0, .86), rgba(255, 94, 0, .9)), url('../images/vision-landscape.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed
}

.vision-lines { opacity: .13 }
.expertise-heading h2 { font-size: clamp(32px, 3.3vw, 48px) }

.expertise-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    border: 0
}

.expertise-item {
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #fff;
    box-shadow: 0 18px 50px rgba(0, 43, 74, .08);
    transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease
}

.expertise-item:hover {
    transform: translateY(-9px);
    box-shadow: 0 28px 65px rgba(0, 43, 74, .16)
}

.expertise-image {
    position: relative;
    height: 280px;
    overflow: hidden;
    background: var(--navy)
}

.expertise-image:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(0, 29, 51, .58))
}

.expertise-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .75s cubic-bezier(.2, .7, .2, 1)
}

.expertise-item:hover .expertise-image img { transform: scale(1.065) }

.expertise-image span {
    position: absolute;
    z-index: 2;
    right: 22px;
    bottom: 18px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: #fff;
    background: var(--orange);
    font-family: "Russo One", sans-serif;
    font-size: 13px
}

.expertise-copy { padding: 30px 32px 34px }
.expertise-item h3 { margin: 0 0 15px; font-size: 19px }
.expertise-item p { margin: 0 }

.partners { background: #fff }
.partners .split-layout { grid-template-columns: 1fr; gap: 42px }
.partners-content .large-copy { margin-bottom: 32px }

.partners-intro {
    max-width: 720px;
    margin: 25px 0 0;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.75
}

.partners-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px
}

.partner-row {
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 34px;
    margin-top: 16px;
    padding: 30px;
    border: 1px solid var(--line);
    background: var(--paper);
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease
}

.partner-row:hover {
    transform: translateX(7px);
    border-color: rgba(255, 94, 0, .45);
    box-shadow: 0 16px 38px rgba(0, 43, 74, .08)
}

.partner-row .partner-logo {
    width: 160px;
    height: 78px;
    margin: 0;
    object-position: center
}

.site-footer {
    position: relative;
    background-color: #001726;
    background-image: linear-gradient(rgba(0, 23, 38, .94), rgba(0, 23, 38, .96)), url('../images/expertise-saudi.webp');
    background-size: cover;
    background-position: center 62%
}

.site-footer .container { position: relative; z-index: 1 }

@media(max-width:900px) {
    .vision { background-attachment: scroll }
    .expertise-grid { grid-template-columns: 1fr }
    .expertise-image { height: 340px }
    .partners .split-layout { grid-template-columns: 1fr }
    .partners-content { grid-template-columns: 1fr }
}

@media(max-width:600px) {
    .about-visual { height: 245px; margin-top: 30px }
    .about-visual figcaption { left: 22px; right: 22px; bottom: 22px; align-items: start; flex-direction: column }
    .about-visual figcaption strong { text-align: left }
    .expertise-image { height: 235px }
    .expertise-copy { padding: 25px 24px 28px }
    .partner-row { grid-template-columns: 1fr; gap: 18px; padding: 25px }
    .partner-row .partner-logo { width: 145px; height: 66px; object-position: left center }
}