/* ==========================================================================
   ASAS — Option B  ·  "Bronze & Ivory"
   --------------------------------------------------------------------------
   Built around the ASAS mark itself: the bronze of the logo leads, over warm
   ivory and sand, with espresso for text. Where Option A is dark, dense and
   cinematic, B is light, open and editorial — large imagery, generous space,
   hairline rules, big quiet type. Loaded last so it re-points the template's
   own tokens.
   ========================================================================== */

/* ---------- 1. tokens ---------------------------------------------------- */
:root {
    --thm-font:     'Karla', 'Segoe UI', system-ui, sans-serif;
    --thm-font-2:   'Outfit', 'Helvetica Neue', Arial, sans-serif;
    --thm-font-two: 'Outfit', 'Helvetica Neue', Arial, sans-serif;

    --thm-base:     #A07544;          /* bronze — the template's accent token */
    --thm-base-rgb: 160, 117, 68;
    --thm-accent:   #A07544;
    --thm-black:    #2A211A;
    --thm-black-rgb: 42, 33, 26;
    --thm-primary:  #3B2F25;
    --thm-primary-rgb: 59, 47, 37;
    --thm-gray:     #6E6356;
    --thm-gray-rgb: 110, 99, 86;

    /* option-B palette — every value traceable to the mark */
    --b-bronze:     #A07544;          /* the logo bronze, a shade richer */
    --b-bronze-hi:  #C9A368;          /* highlight, for dark grounds */
    --b-bronze-lo:  #7A5733;          /* deep, for text-weight accents */
    --b-espresso:   #2A211A;          /* warm near-black — kept for TEXT only */
    --b-espresso-2: #3B2F25;
    --b-ink:        #191B1E;          /* neutral charcoal — all dark GROUNDS */
    --b-ink-2:      #22262A;
    --b-ink-3:      #2E3338;
    --b-ivory:      #FBF8F3;          /* page ground */
    --b-sand:       #F2EBE0;          /* alternate band */
    --b-sand-2:     #E6DCCB;
    --b-line:       #DED3C2;
    --b-line-soft:  #EDE5D8;
    --b-paper:      #FFFFFF;
    --b-mono:       'Roboto Mono', ui-monospace, Menlo, monospace;

    --b-radius:     0px;              /* square, always */
}

/* ---------- 2. typography ------------------------------------------------ */
/* Outfit is geometric and open — a different voice from Option A's Archivo.
   Set large and light, with wide tracking on the small type, it reads calm
   and expensive rather than loud. */
body {
    font-family: var(--thm-font);
    font-size: 16px;
    line-height: 1.72;
    color: #4A4038;
    background: var(--b-ivory);
}

h1, h2, h3, h4, h5, h6,
.sec-title__title,
.section-header h2 {
    font-family: var(--thm-font-2);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--b-espresso);
}

.sec-title__title,
.section-header h2 {
    text-transform: none;            /* A shouts in caps; B speaks normally */
    font-weight: 600;
    line-height: 1.08;
}

.sec-title__tagline h6,
.section-tag,
.eyebrow {
    font-family: var(--b-mono) !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    letter-spacing: .24em !important;
    text-transform: uppercase;
    color: var(--b-bronze) !important;
}

.sec-title__tagline .left { display: none !important; }
.sec-title__tagline .right { background: var(--b-bronze) !important; }

/* ---------- 3. buttons: bronze, square, quiet ---------------------------- */
.thm-btn, .btn-one, .main-header__btn, button.thm-btn, a.thm-btn {
    font-family: var(--thm-font) !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    background: var(--b-bronze) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--b-bronze) !important;
    transition: background .25s ease, color .25s ease, border-color .25s ease !important;
}

.thm-btn:hover, .btn-one:hover, .main-header__btn:hover,
button.thm-btn:hover, a.thm-btn:hover {
    background: var(--b-espresso) !important;
    border-color: var(--b-espresso) !important;
    color: #FFFFFF !important;
}

.thm-btn::before, .thm-btn::after,
.btn-one::before, .btn-one::after { display: none !important; }

/* ---------- 4. square surfaces ------------------------------------------- */
.pcard__thumb, .project-card, .service-card, .unit-card, .company-card,
.brand-card, .blog-one__single, .blog-one__single-img, .blog-one__single-img .inner,
.about-three__img, .mv-card, .env-obj-card, .env-app-card, .env-tl-card,
.gallery-item, .node-card, .message-image {
    border-radius: 0 !important;
}

/* The template wraps its feature images in `.inner` and gives them an organic
   `0 200px` corner. B is square throughout, so those go too — circles keep
   their own `50%` rules, which this does not touch. */
.inner,
.about-one__img-box,
.about-one__img-box-bg,
.overview-image img,
.about-three__img img {
    border-radius: 0 !important;
}

/* ---------- 5. home hero: full-bleed still, no video --------------------- */
/* A still of an ASAS oil and gas field, full width, under a warm espresso
   scrim that clears the left third for the statement. */
.video-hero {
    position: relative;
    min-height: clamp(460px, 62vh, 680px) !important;
    height: auto !important;
    background: var(--b-espresso);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.video-hero__media,
.video-hero video,
.video-hero__fallback,
.video-hero .video-background { display: none !important; }

/* the full-bleed dark scrim belongs to a film hero, not a split plate */
.video-hero::before,
.video-hero::after { display: none !important; content: none !important; }

.video-hero__plate {
    position: absolute;
    inset: 0;
    background-image: url('../images/update1.0/hero-rig.jpg');
    background-size: cover;
    background-position: center 48%;
    z-index: 0;
}

/* denser screens get the 2560 version */
@media (min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5) {
    .video-hero__plate { background-image: url('../images/update1.0/hero-rig@2x.jpg'); }
}

/* warm scrim: heavy at the left so the statement sits clean, opening up to
   the right so the field itself stays visible */
/* No side shading — an even, gentle wash top to bottom so the photograph
   stays open and the centred type still holds its contrast. */
.video-hero__plate::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(42, 33, 26, .52) 0%,
        rgba(42, 33, 26, .44) 42%,
        rgba(42, 33, 26, .60) 100%);
}

/* a bronze rule along the foot of the band */
.video-hero::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: var(--b-bronze);
    z-index: 2;
}

.video-hero .container { position: relative; z-index: 2; width: 100%; }

.video-hero-content {
    position: static !important;
    transform: none !important;
    padding: clamp(36px, 5vw, 64px) 0 !important;
    max-width: 880px !important;
    margin-inline: auto !important;
    text-align: center !important;
}

.video-hero-content h3 { justify-content: center; }
.video-hero-content h2::after { margin-inline: auto; }
.video-hero-content p { margin-inline: auto; }
.video-hero-content .btn-box { justify-content: center; }

/* The eyebrow sat over the rig's bright steelwork and never read cleanly.
   The headline carries the line anyway, so it is hidden rather than fought. */
.video-hero-content h3 { display: none !important; }

.video-hero-content h2 {
    font-family: var(--thm-font-2) !important;
    font-weight: 600 !important;
    font-size: clamp(34px, 4.6vw, 64px) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.028em !important;
    color: #FBF8F3 !important;
    text-transform: none;
    text-shadow: 0 2px 28px rgba(42, 33, 26, .45) !important;
    opacity: 1 !important;
    animation: none !important;
    margin-bottom: 0 !important;
}

.video-hero-content h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 2px;
    background: var(--b-bronze-hi);
    margin: 28px auto 24px;
}

.video-hero-content p {
    color: #EDE5D8 !important;
    text-shadow: 0 1px 16px rgba(42, 33, 26, .55);
    font-size: 16.5px;
    max-width: 44ch;
    opacity: 1 !important;
    animation: none !important;
}

.video-hero-content .btn-box {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    opacity: 1 !important;
    animation: none !important;
}

.video-hero__btn-ghost {
    border-radius: 0 !important;
    border: 1px solid rgba(251, 248, 243, .55) !important;
    background: transparent !important;
    color: #FBF8F3 !important;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 12.5px;
}

.video-hero__btn-ghost:hover {
    background: #FBF8F3 !important;
    color: var(--b-espresso) !important;
    border-color: #FBF8F3 !important;
}

.video-hero__scroll { display: none !important; }

@media (max-width: 900px) {
    .video-hero { min-height: clamp(380px, 56vh, 520px) !important; }
    .video-hero__plate::after {
        background: linear-gradient(180deg,
            rgba(42, 33, 26, .62) 0%, rgba(42, 33, 26, .86) 100%);
    }
    .video-hero-content { max-width: none !important; }
}

/* ---------- 6. page header: ivory plate over a held image ---------------- */
.page-header {
    background: var(--b-sand);
    padding: 0;
    overflow: hidden;
}

.page-header__bg { left: 34%; }

.page-header__bg::before {
    background: linear-gradient(90deg,
                var(--b-sand) 0%,
                rgba(242, 235, 224, .92) 30%,
                rgba(242, 235, 224, .35) 62%,
                rgba(242, 235, 224, 0) 100%) !important;
}

.page-header .container { position: relative; z-index: 3; }

.page-header__wrapper {
    min-height: clamp(210px, 25vw, 320px);
    display: flex;
    align-items: center;
}

.page-header__content h2 {
    font-family: var(--thm-font-2);
    font-size: clamp(32px, 4.6vw, 58px) !important;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.026em;
    line-height: 1.04;
    color: var(--b-espresso) !important;
    margin-bottom: 14px;
}

.page-header__content h2::before {
    content: "";
    display: block;
    width: 52px;
    height: 2px;
    background: var(--b-bronze);
    margin-bottom: 20px;
}

.page-header__menu ul,
.page-header__menu li {
    font-family: var(--b-mono);
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--b-bronze-lo);
}

.page-header__menu li a,
.page-header__menu li a i { color: var(--b-bronze-lo) !important; }
.page-header__menu li a:hover { color: var(--b-espresso) !important; }

@media (max-width: 767px) {
    .page-header__bg { left: 0; }
    .page-header__bg::before {
        background: linear-gradient(90deg,
                    rgba(242,235,224,.95) 0%, rgba(242,235,224,.82) 100%) !important;
    }
}

/* ---------- 7. header / nav ---------------------------------------------- */
.main-header { background: var(--b-ivory); border-bottom: 1px solid var(--b-line); }

.main-menu__list > li > a,
.main-menu .main-menu__list > li > a {
    font-family: var(--thm-font);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--b-espresso);
}

.main-menu__list > li > a:hover,
.main-menu__list > li.current > a { color: var(--b-bronze); }

/* ---------- 8. the in-page rail ------------------------------------------ */
.anchor-menu {
    background: rgba(251, 248, 243, .97);
    border-bottom: 1px solid var(--b-line);
    box-shadow: none;
}

.anchor-menu__list a {
    font-family: var(--thm-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--b-espresso);
    border-bottom: 2px solid transparent;
    padding-block: 17px;
}

.anchor-menu__list li.is-active a,
.anchor-menu__list a:hover {
    color: var(--b-bronze);
    border-bottom-color: var(--b-bronze);
    background: transparent;
}

/* ---------- 9. footer: espresso, not black ------------------------------- */
.footer-one-sec, .footer-one {
    background: var(--b-ink) !important;
    color: #A2A8AE;
}

.footer-one-sec::before, .footer-one-sec::after { display: none !important; }

.footer-widget-title {
    font-family: var(--b-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: .2em !important;
    text-transform: uppercase;
    color: var(--b-bronze-hi) !important;
}

.footer-brand-name {
    color: #F2F4F6 !important;
    font-family: var(--thm-font-2);
    font-weight: 600;
    text-transform: none !important;
}
.footer-brand-name::after { background: var(--b-bronze) !important; }

.footer-brand-desc,
.footer-widget__links li a,
.footer-one-sec a,
.contact-info p { color: #C2C8CE !important; }

.footer-widget__links li a:hover,
.footer-one-sec a:hover { color: var(--b-bronze-hi) !important; }

.contact-label { color: var(--b-bronze-hi) !important; font-family: var(--b-mono) !important; }
.contact-icon { color: var(--b-bronze-hi) !important; }
.footer-copyright, .footer-one__bottom { color: #7D848B !important; }

/* ---------- 10. blog cards ----------------------------------------------- */
.blog-one__single {
    background: var(--b-paper);
    box-shadow: 0 0 0 1px var(--b-line);
    overflow: hidden;
    height: 100%;
    transition: box-shadow .22s ease;
}

.blog-one__single:hover { box-shadow: 0 0 0 1px var(--b-bronze); transform: none; }

.blog-one__single-img .inner img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.blog-one__single:hover .blog-one__single-img .inner img { transform: scale(1.04); }

.blog-one__single-content {
    position: static !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
}

.blog-one__single-content .inner-content { padding: 20px 22px 24px; }

.blog-one__single .meta-info {
    display: flex; flex-wrap: wrap; gap: 5px 16px;
    margin: 0 0 11px; padding: 0; list-style: none;
}

.blog-one__single .meta-info li,
.blog-one__single .meta-info li a {
    font-family: var(--b-mono);
    font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
    color: var(--b-bronze);
}

.blog-one__single-content h2,
.blog-one__single-content h3 {
    font-family: var(--thm-font-2);
    font-size: 19px !important;
    font-weight: 600;
    line-height: 1.22;
    text-transform: none;
    margin: 0 0 12px;
}

.blog-one__single-content h2 a { color: var(--b-espresso); }
.blog-one__single:hover .blog-one__single-content h2 a { color: var(--b-bronze); }

.blog-one__single .btn-box .thm-btn {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 2px solid var(--b-bronze) !important;
    color: var(--b-espresso) !important;
    padding: 0 0 5px !important;
    height: auto !important;
    font-size: 11.5px !important;
}
.blog-one__single .btn-box .thm-btn:hover {
    background: transparent !important; color: var(--b-bronze) !important;
}

/* ---------- 11. utility --------------------------------------------------- */
::selection { background: var(--b-bronze); color: #fff; }
html { scrollbar-color: var(--b-bronze) var(--b-sand-2); }

@media (prefers-reduced-motion: reduce) {
    .thm-btn, .blog-one__single, .blog-one__single-img .inner img { transition: none !important; }
}

/* ---------- 12. services marquee ----------------------------------------
   Every service on one continuously moving rail. The track holds the list
   twice and shifts by exactly half its width, so the loop closes without a
   visible seam. Linear timing throughout — any easing would make the motion
   pulse rather than glide. It pauses on hover and on keyboard focus, and
   stops altogether for anyone who asks for reduced motion. */
.svc-marquee {
    background: var(--b-ivory);
    padding-block: clamp(52px, 6.5vw, 86px);
    border-top: 1px solid var(--b-line-soft);
    border-bottom: 1px solid var(--b-line-soft);
    overflow: hidden;
}

.svc-marquee .sec-title { margin-bottom: clamp(28px, 3.4vw, 44px); }

.svc-marquee .sec-title__title {
    font-family: var(--thm-font-2);
    font-size: clamp(27px, 3.4vw, 44px) !important;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.026em;
    color: var(--b-espresso);
}

.svc-marquee__viewport {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.svc-marquee__track {
    display: flex;
    gap: 18px;
    width: max-content;
    will-change: transform;
    animation: svcScroll 46s linear infinite;
}

@keyframes svcScroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.svc-marquee__viewport:hover .svc-marquee__track,
.svc-marquee__track:focus-within { animation-play-state: paused; }

.svc-card {
    flex: 0 0 auto;
    width: clamp(234px, 22vw, 290px);
    min-height: 132px;
    background: var(--b-paper);
    border: 1px solid var(--b-line);
    border-top: 2px solid var(--b-bronze);
    padding: 26px 24px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}

.svc-card:hover {
    background: var(--b-sand);
    border-color: var(--b-bronze);
    transform: translateY(-4px);
}



.svc-card__name {
    font-family: var(--thm-font-2);
    text-align: center;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.018em;
    color: var(--b-espresso);
}



.svc-card:hover 

@media (prefers-reduced-motion: reduce) {
    .svc-marquee__track { animation: none; }
    .svc-marquee__viewport { overflow-x: auto; }
    .svc-card, 
}

/* ---------- 13. footer: no block colour, a GCC map instead ---------------
   The flat dark panel is gone. The ground is the same ivory as the page and
   the region ASAS works in is drawn behind the columns — every GCC state as a
   field of bronze dots inside its real border, taken from Natural Earth
   boundary data and inlined as SVG, so nothing is fetched at runtime. */
.footer-one-sec, .footer-one {
    background: var(--b-ivory) !important;
    color: #6E6356;
    position: relative;
    border-top: 2px solid var(--b-bronze);
    overflow: hidden;
}

.footer-one-sec::before {
    content: "";
    position: absolute;
    right: -4%;
    top: 50%;
    transform: translateY(-50%);
    width: min(760px, 62%);
    aspect-ratio: 1000 / 685;
    background: url('../images/resources/gcc-map.svg') no-repeat center / contain;
    opacity: .13;
    pointer-events: none;
    display: block !important;
    z-index: 0;
}

.footer-one-sec > *,
.footer-one-sec .container { position: relative; z-index: 1; }

.footer-widget-title { color: var(--b-bronze-lo) !important; }

.footer-brand-name { color: var(--b-espresso) !important; }
.footer-brand-name::after { background: var(--b-bronze) !important; }

.footer-brand-desc,
.footer-widget__links li a,
.footer-one-sec a,
.contact-info p { color: #6E6356 !important; }

.footer-widget__links li a:hover,
.footer-one-sec a:hover { color: var(--b-bronze) !important; }

.contact-label { color: var(--b-bronze-lo) !important; }
.contact-icon  { color: var(--b-bronze) !important; }

.contact-item,
.footer-one__bottom { border-color: var(--b-line) !important; }

.footer-copyright,
.footer-one__bottom { color: #8A8075 !important; border-top-color: var(--b-line) !important; }
.footer-copyright a { color: var(--b-bronze-lo) !important; }

.footer-social-links .social-link {
    background: transparent !important;
    border: 1px solid var(--b-line) !important;
    color: var(--b-espresso) !important;
}
.footer-social-links .social-link:hover {
    background: var(--b-bronze) !important;
    border-color: var(--b-bronze) !important;
    color: #fff !important;
}

@media (max-width: 991px) {
    .footer-one-sec::before { width: 90%; right: -18%; opacity: .09; }
}

/* ---------- 14. square corners, everywhere -------------------------------
   Option B is a square design, so nothing carries a radius — cards, images,
   inputs, buttons, avatars, icon chips and the template's own decorations
   alike. One rule rather than chasing them component by component. */
*,
*::before,
*::after { border-radius: 0 !important; }

/* ---------- 15. group of companies — a continuous logo rail -------------- */
.brand-one-sec { background: var(--b-sand); position: relative; overflow: hidden; }
.brand-one-sec .brand-one__bg { opacity: .05; }

.brand-marquee {
    position: relative;
    margin-top: clamp(26px, 3.2vw, 42px);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.brand-marquee__track {
    display: flex;
    align-items: stretch;
    gap: 18px;
    width: max-content;
    will-change: transform;
    animation: brandScroll 58s linear infinite;
}

@keyframes brandScroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

.brand-marquee:hover .brand-marquee__track { animation-play-state: paused; }

.brand-marquee__item {
    flex: 0 0 auto;
    width: clamp(188px, 17vw, 228px);
    background: var(--b-paper);
    border: 1px solid var(--b-line);
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 124px;
    transition: border-color .25s ease;
}

.brand-marquee__item:hover { border-color: var(--b-bronze); }

.brand-marquee__item img {
    max-width: 100%;
    max-height: 78px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: none;
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .brand-marquee__track { animation: none; }
    .brand-marquee { overflow-x: auto; }
    .brand-marquee__item, .brand-marquee__item img { transition: none; }
}

/* ---------- 16. home · About — text centred against its image ------------ */
.about-three .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;          /* the copy was sitting high beside the photograph */
}

.about-three .about-three__content,
.about-three .about-three__content-inner { height: auto; }

.about-three__img .inner img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- contact map: responsive -------------------------------------- */
/* The embed ships with width="1200" height="600" hard-coded, so on a phone
   only the left third of the map was visible. */
.contact-page-google-map iframe {
    width: 100%;
    max-width: 100%;
    display: block;
    border: 0;
}

@media (max-width: 767px) {
    .contact-page-google-map iframe { height: 360px; }
}