/* ===========================================================================
   refinements.css - subtle modernisation layer
   ---------------------------------------------------------------------------
   Loaded LAST, after css/main.css. Purely additive: it re-styles existing
   template classes and adds no new markup requirements, so deleting this one
   <link> returns the site exactly to its previous appearance.

   Palette is taken from the existing theme, not invented:
     #fab700  accent (61 uses in main.css)
     #222222  headings   #777777  body copy   #f9f9ff  section tint
   =========================================================================== */

:root {
    --pc-accent:      #fab700;
    --pc-accent-dark: #e0a300;

    /* Sampled from the four interlocking rings in img/PICASSO.jpg. */
    --pc-brand-red:    #da251c;
    --pc-brand-yellow: #fff500;
    --pc-brand-green:  #00923f;
    --pc-brand-blue:   #008cd1;
    /* The logo blue taken down to a usable dark ground for the utility bar. */
    --pc-brand-ink:    #062a45;

    /* Readability tokens. The amber accent is only legible as a large block
       colour, never as small text on white (#fab700 is 1.9:1, #e0a300 2.2:1),
       so accent-coloured text uses a darkened amber instead. */
    --pc-body:        #5f6470;   /* 6.0:1 on white */
    --pc-muted:       #6f7480;   /* 5.0:1 on white, for de-emphasised labels */
    --pc-accent-text: #8a6400;   /* 5.4:1 on white */
    --pc-on-accent:   #062a45;   /* 8.3:1 on the amber accent */
    --pc-footer-dim:  #868d9e;   /* 6.0:1 on the #04091e footer */
    --pc-line:        rgba(34, 34, 34, 0.09);
    --pc-shadow-sm:   0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.06);
    --pc-shadow-md:   0 2px 4px rgba(16, 24, 40, 0.05), 0 14px 30px rgba(16, 24, 40, 0.10);
    /* Squared-off corners: 10px read as consumer SaaS; an architecture practice
       wants crisp edges. One token so the whole site turns together.        */
    --pc-radius:      2px;
    --pc-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);

    /* Fluid type scale (Phase 2). Body stays 15px; display sizes breathe with
       the viewport instead of jumping at breakpoints.                        */
    --pc-text-xs:   12px;
    --pc-text-sm:   13px;
    --pc-display-1: clamp(38px, 3.4vw + 14px, 56px);  /* page hero */
    --pc-display-2: clamp(28px, 2.2vw + 12px, 40px);  /* section heading */
    --pc-display-3: clamp(20px, 1.2vw + 12px, 26px);  /* card / sub heading */

    /* Spacing scale - multiples used for section padding and card innards. */
    --pc-space-1: 8px;
    --pc-space-2: 16px;
    --pc-space-3: 24px;
    --pc-space-4: 40px;
    --pc-space-5: 64px;
    --pc-space-6: 96px;
}

/* --- Typographic rhythm -------------------------------------------------- */
/* The template sets body to Poppins Light (300) at 14px in #777777. That last
   value is 4.48:1 on white - just under the 4.5:1 AA threshold - and Light at
   14px is thin enough to read poorly on ordinary screens. Regular weight at
   15px in a darker grey is the single biggest legibility gain available here.
   Measured: #5f6470 is 6.0:1 on #fff and 5.8:1 on the #f9f9ff section tint.  */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: 15px;
    font-weight: 400;
    color: var(--pc-body);
}

p {
    line-height: 1.8;
    font-weight: 400;
}

/* Small print stays small but must not also be Light. */
.header-top,
.header-top a {
    font-size: 13px;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.015em;
    color: var(--pc-brand-ink);
}

/* --- Editorial type scale --------------------------------------------------
   Page banner titles ("Services", "Contact Us") are the h1; section headings
   were demoted to h2 for hierarchy (Phase 1), so this also restores - and
   raises - their visual size, which main.css's generic h2 { 30px } shrank. */
.banner-area h1.text-white {
    font-size: var(--pc-display-1);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.header-text h1,
.header-text h2,
h2.mb-10 {
    font-size: var(--pc-display-2);
    font-weight: 600;
    line-height: 1.15 !important;   /* main.css forces 1.2/1.5em on headings */
}

/* index.html's lead heading ("Welcome to our Company") */
.home-about-left h1,
.home-about-left h2 {
    font-size: var(--pc-display-2);
    font-weight: 600;
    margin-bottom: var(--pc-space-3);
}

/* Kicker treatment for the one-line section subtitles under headings. */
.header-text p {
    font-size: var(--pc-text-sm);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pc-muted);
    margin-top: var(--pc-space-1);
}

/* Stat band numerals - let the numbers do the talking. */
.single-faq h5 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

::selection {
    background: rgba(250, 183, 0, 0.28);
}

/* --- Focus visibility ---------------------------------------------------- */
/* main.css sets .primary-btn:focus { outline: none } with no replacement,
   leaving keyboard users no visible focus indicator at all.                 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.primary-btn:focus-visible {
    outline: 2px solid var(--pc-accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- Buttons ------------------------------------------------------------- */
/* .primary-btn:hover previously only set color:#fff, which it already was,
   so the button had no hover feedback whatsoever.                           */
/* White on #fab700 measures 1.77:1 - far below AA, and visibly hard to read.
   Dark ink on amber measures 8.3:1 and is the conventional treatment for a
   yellow-family button.                                                     */
.primary-btn,
.primary-btn span,
.genric-btn.primary,
.btn-successs,
.btn-succescs {
    color: var(--pc-on-accent);
    font-weight: 600;
}

.primary-btn:hover,
.primary-btn:hover span,
.genric-btn.primary:hover,
.btn-successs:hover,
.btn-succescs:hover {
    color: var(--pc-on-accent);
}

/* main.css re-declares color:#fff on .primary-btn from several contexts at
   higher specificity, so those have to be matched selector-for-selector. */
.banner-area .primary-btn,
.home-about-area .home-about-left .primary-btn,
.home-about-area .home-about-left .primary-btn:hover,
.home-about-area .home-about-right .primary-btn,
.contact-page-area .form-area .primary-btn,
.contact-page-area .form-area .primary-btn:hover,
.commentform-area .primary-btn,
.commentform-area .primary-btn:hover {
    color: var(--pc-on-accent);
}

/* Squared, letterspaced editorial buttons - one shape site-wide. main.css
   gives .primary-btn a 25px pill radius and .genric-btn.circle 20px.        */
.primary-btn,
.genric-btn.circle,
.genric-btn.primary,
.btn-successs,
.btn-succescs {
    border-radius: var(--pc-radius);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--pc-text-sm);
}

.primary-btn {
    box-shadow: 0 2px 6px rgba(250, 183, 0, 0.25);
    transition: background-color 0.25s var(--pc-ease),
                box-shadow 0.25s var(--pc-ease),
                transform 0.25s var(--pc-ease);
}

.primary-btn:hover {
    background-color: var(--pc-accent-dark);
    box-shadow: 0 8px 18px rgba(250, 183, 0, 0.32);
    transform: translateY(-2px);
}

.primary-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(250, 183, 0, 0.25);
}

/* --- Header -------------------------------------------------------------- */
/* The scrolled shadow was offset -21px/+21px, throwing it down and to the
   left of the bar. A symmetric ambient shadow reads as a normal sticky bar. */
#header {
    border-bottom: 1px solid var(--pc-line);
}

/* --- Brand bar ----------------------------------------------------------- */
/* Four hard stops in logo order across the very top of the page. This sits on
   #header rather than .header-top because .header-top is display:none below
   768px, and the stripe should survive on mobile.                           */
#header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1;
    background: linear-gradient(
        to right,
        var(--pc-brand-red)    0%,   var(--pc-brand-red)    25%,
        var(--pc-brand-yellow) 25%,  var(--pc-brand-yellow) 50%,
        var(--pc-brand-green)  50%,  var(--pc-brand-green)  75%,
        var(--pc-brand-blue)   75%,  var(--pc-brand-blue)   100%
    );
}

/* The blue utility bar made the fixed header ~120px tall. Its contents now
   live in the footer (phone/email in .footer-contact, socials were already
   there), so the bar is retired. Markup kept in the pages - delete this rule
   to bring it back.                                                          */
.header-top {
    display: none;
}

/* With the bar gone, tighten the remaining row: was 20px top + 20px bottom. */
.main-menu {
    padding-top: 12px;
}

#header {
    padding-bottom: 12px;
}

.header-top a {
    transition: color 0.25s var(--pc-ease), opacity 0.25s var(--pc-ease);
}

.header-top .header-top-right a:hover {
    color: var(--pc-brand-yellow);
}

.header-top .header-top-left ul li {
    margin-right: 18px;
}

.header-top .header-top-left ul li a i {
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.25s var(--pc-ease), transform 0.25s var(--pc-ease);
    display: inline-block;
}

/* One ring colour per social icon, in the same order as the logo. */
.header-top .header-top-left ul li:nth-child(1) a:hover i {
    color: var(--pc-brand-red);
}

.header-top .header-top-left ul li:nth-child(2) a:hover i {
    color: var(--pc-brand-yellow);
}

.header-top .header-top-left ul li:nth-child(3) a:hover i {
    color: var(--pc-brand-green);
}

.header-top .header-top-left ul li:nth-child(4) a:hover i {
    color: var(--pc-brand-blue);
}

.header-top .header-top-left ul li a:hover i {
    transform: translateY(-2px);
}

#header.header-scrolled {
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: saturate(150%) blur(8px);
    backdrop-filter: saturate(150%) blur(8px);
    box-shadow: 0 1px 0 var(--pc-line), 0 8px 24px rgba(16, 24, 40, 0.08);
    border-bottom-color: transparent;
}

/* --- Primary navigation -------------------------------------------------- */
/* Top-level items only. main.js strips the .nav-menu class from the cloned
   mobile drawer, so the mobile nav is unaffected by these rules.            */
.nav-menu > li > a {
    position: relative;
    padding-bottom: 6px;
    letter-spacing: 0.1em;
    font-size: 13px;      /* main.css: 12px - a notch more presence */
    font-weight: 500;
    color: var(--pc-brand-ink);
    transition: color 0.25s var(--pc-ease);
}

.nav-menu > li > a::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 2px;
    background: var(--pc-accent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s var(--pc-ease);
}

.nav-menu > li > a:hover::after,
.nav-menu > li.menu-active > a::after {
    transform: scaleX(1);
}

/* The current page used to be marked with <font color="#FFCD00;"> in the
   markup while .menu-active sat on Home on every page. Both the colour and
   the underline now come from .menu-active alone.                          */
.nav-menu > li.menu-active > a,
.nav-menu > li > a:hover {
    color: var(--pc-accent-text);
}

/* --- Service cards ------------------------------------------------------- */
/* Previously a bare image with text running flush to the column edge.       */
.single-service {
    background: #fff;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius);
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: var(--pc-shadow-sm);
    transition: transform 0.3s var(--pc-ease), box-shadow 0.3s var(--pc-ease);
}

.single-service:hover {
    transform: translateY(-4px);
    box-shadow: var(--pc-shadow-md);
}

.single-service h4 {
    padding: 22px 22px 0;
    font-size: 18px;
}

.single-service p {
    padding: 10px 22px 24px;
    margin-bottom: 0;
}

/* The template rotated the thumbnail -2deg on hover, which exposed the bare
   card corner behind it once the card gained a border. Scale only.          */
.single-service:hover .thumb img {
    transform: scale(1.06);
}

/* A hairline of one ring colour along the top of each card, rotating in logo
   order. Reads as a set rather than four unrelated accents.                 */
.single-service {
    border-top: 3px solid var(--pc-brand-red);
}

.service-area .row > [class*="col-"]:nth-child(4n+2) .single-service {
    border-top-color: var(--pc-brand-yellow);
}

.service-area .row > [class*="col-"]:nth-child(4n+3) .single-service {
    border-top-color: var(--pc-brand-green);
}

.service-area .row > [class*="col-"]:nth-child(4n+4) .single-service {
    border-top-color: var(--pc-brand-blue);
}

/* Equal heights per row. Bootstrap already stretches the columns; the card
   inside them did not fill that height, which was invisible until the cards
   gained a border and every ragged bottom edge started showing.             */
/* :not(.header-text) matters - the section heading sits in a col-md-12 in the
   same .row, and making that flex puts its <h1> and <p> side by side.       */
.service-area .row > [class*="col-"]:not(.header-text) {
    display: flex;
}

.single-service {
    width: 100%;
}

/* --- Project cards ------------------------------------------------------- */
.product-card {
    background: #fff;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius);
    overflow: hidden;
    box-shadow: var(--pc-shadow-sm);
    transition: transform 0.3s var(--pc-ease), box-shadow 0.3s var(--pc-ease);
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--pc-shadow-md);
}

/* Same equal-height treatment as the service cards above. */
.Card-bottom {
    display: flex;
}

.Card-bottom > .product-card {
    width: 100%;
}

/* Was flat red - the only red on an otherwise amber-and-charcoal site. */
.product-card .badge {
    background: var(--pc-accent);
    border-radius: 0 6px 6px 0;
    letter-spacing: 0.06em;
    padding: 4px 12px;
}

/* These were #999999 on white - 2.85:1. They are the "Duration:" and partner
   lines, so they should stay de-emphasised, just not illegibly so.          */
.product-card .product-details h4 a,
.product-card .product-details p {
    color: var(--pc-muted);
    font-size: 13px;
}

.product-card .product-details h4 a:hover {
    color: var(--pc-accent-text);
}

/* --- Section headings ---------------------------------------------------- */
.header-text h1,
.header-text h2 {
    position: relative;
    padding-bottom: 18px;
}

/* The rule under each section heading carries the four ring colours, so the
   brand reads on every page rather than only at the top and bottom.        */
.header-text.text-center h2::after,
.header-text.text-center h1::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 72px;
    height: 3px;
    border-radius: 2px;
    transform: translateX(-50%);
    background: linear-gradient(
        to right,
        var(--pc-brand-red)    0%,   var(--pc-brand-red)    25%,
        var(--pc-brand-yellow) 25%,  var(--pc-brand-yellow) 50%,
        var(--pc-brand-green)  50%,  var(--pc-brand-green)  75%,
        var(--pc-brand-blue)   75%,  var(--pc-brand-blue)   100%
    );
}

/* --- Stat band ----------------------------------------------------------- */
/* Four stats, four rings - one colour each, in logo order. Scoped to
   .faq-area so the standalone "years experience" circle on index/about keeps
   the amber accent.                                                         */
.faq-area [class*="col-lg-3"]:nth-child(1) .circle { border-color: var(--pc-brand-red); }
.faq-area [class*="col-lg-3"]:nth-child(1) .inner  { background-color: var(--pc-brand-red); }

.faq-area [class*="col-lg-3"]:nth-child(2) .circle { border-color: var(--pc-brand-yellow); }
.faq-area [class*="col-lg-3"]:nth-child(2) .inner  { background-color: var(--pc-brand-yellow); }

.faq-area [class*="col-lg-3"]:nth-child(3) .circle { border-color: var(--pc-brand-green); }
.faq-area [class*="col-lg-3"]:nth-child(3) .inner  { background-color: var(--pc-brand-green); }

.faq-area [class*="col-lg-3"]:nth-child(4) .circle { border-color: var(--pc-brand-blue); }
.faq-area [class*="col-lg-3"]:nth-child(4) .inner  { background-color: var(--pc-brand-blue); }

/* .single-faq h5 is white and sits on top of .inner via a -90px margin, which
   is unreadable on the yellow ring. Only that one flips to dark.            */
.faq-area [class*="col-lg-3"]:nth-child(2) .single-faq h5,
.faq-area [class*="col-lg-3"]:nth-child(2) .single-faq h5 .counter {
    color: var(--pc-brand-ink);
}

/* --- Client logo strip --------------------------------------------------- */
/* The logos carry hard width="170" height="150" attributes, so each one was
   stretched into the same box regardless of its real aspect ratio.          */
.constant-simple-slider img {
    width: auto;
    height: auto;
    max-width: 170px;
    max-height: 90px;
    object-fit: contain;
    margin: 0 auto;
    opacity: 0.72;
    transition: opacity 0.3s var(--pc-ease);
}

.constant-simple-slider img:hover {
    opacity: 1;
}

/* --- Secondary buttons --------------------------------------------------- */
/* .btn-successs (amber) and .btn-succescs (a lone #FF5733 red-orange) are the
   "See More"/"Next Page" buttons on the project cards - about 20 across the
   site. They had no hover feedback and did not agree on a colour.           */
.btn-successs,
.btn-succescs {
    background-color: var(--pc-accent);
    padding: 7px 20px;
    font-size: 13px;
    line-height: 1.6;
    box-shadow: 0 2px 6px rgba(250, 183, 0, 0.25);
    transition: background-color 0.25s var(--pc-ease),
                box-shadow 0.25s var(--pc-ease),
                transform 0.25s var(--pc-ease);
}

.btn-successs:hover,
.btn-succescs:hover {
    background-color: var(--pc-accent-dark);
    color: var(--pc-on-accent);
    box-shadow: 0 6px 14px rgba(250, 183, 0, 0.3);
    transform: translateY(-2px);
}

.btn-successs:active,
.btn-succescs:active {
    transform: translateY(0);
}

/* --- Contact page map ---------------------------------------------------- */
/* contact.html already implements the padding-bottom aspect-ratio trick in its
   inline <style>; do NOT set an explicit height here, it fights that math.
   Cosmetics and a less letterboxed ratio only - 56.25% (16:9) makes a location
   map over 600px tall on desktop.                                           */
.responsive-map-container {
    max-width: 1140px;
    margin: 0 auto 80px;
    padding-bottom: 34%;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius);
    box-shadow: var(--pc-shadow-sm);
}

.responsive-map-container iframe {
    border: 0;
    display: block;
}

@media (max-width: 1200px) {
    .responsive-map-container {
        max-width: calc(100% - 30px);
    }
}

@media (max-width: 767px) {
    .responsive-map-container {
        padding-bottom: 60%;
        margin-bottom: 50px;
    }
}

/* --- Gallery grid -------------------------------------------------------- */
/* .boxInner is absolutely positioned with left/right/top but no bottom, so
   each tile took the natural height of its photo and the grid came out
   ragged. Pinning the bottom edge plus object-fit gives a uniform grid.     */
.gallery .boxInner,
.boxInner {
    bottom: 10px;
    border-radius: var(--pc-radius);
    box-shadow: var(--pc-shadow-sm);
}

.boxInner .img-gal {
    display: block;
    width: 100%;
    height: 100%;
}

.boxInner img.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Empty states -------------------------------------------------------- */
/* career.html's "no vacancies" notice was bare highlighted text floating in
   an otherwise empty section.                                               */
.no-vacancy-msg {
    display: block;
    max-width: 560px;
    margin: 0 auto;
    padding: 28px 32px;
    text-align: center;
    background: #f9f9ff;
    border: 1px solid var(--pc-line);
    border-radius: var(--pc-radius);
    color: #555;
}

/* --- Forms --------------------------------------------------------------- */
.common-input,
.common-textarea,
.form-area .form-control {
    border-radius: var(--pc-radius);
    border: 1px solid var(--pc-line);
    transition: border-color 0.2s var(--pc-ease), box-shadow 0.2s var(--pc-ease);
}

.common-input:focus,
.common-textarea:focus,
.form-area .form-control:focus {
    border-color: var(--pc-accent);
    box-shadow: 0 0 0 3px rgba(250, 183, 0, 0.15);
    outline: none;
}

.alert-msg:not(:empty) {
    padding: 12px 16px;
    border-radius: var(--pc-radius);
    background: #f9f9ff;
    border: 1px solid var(--pc-line);
}

/* --- Footer -------------------------------------------------------------- */
/* Mirrors the stripe at the top of #header so the page is bookended. */
.footer-area {
    position: relative;
}

.footer-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        to right,
        var(--pc-brand-red)    0%,   var(--pc-brand-red)    25%,
        var(--pc-brand-yellow) 25%,  var(--pc-brand-yellow) 50%,
        var(--pc-brand-green)  50%,  var(--pc-brand-green)  75%,
        var(--pc-brand-blue)   75%,  var(--pc-brand-blue)   100%
    );
}

/* Phone/email, relocated here from the retired blue header bar. */
.footer-contact {
    margin-bottom: var(--pc-space-2);
    line-height: 2;
}

.footer-contact a {
    color: #b7bcc9;
    font-size: 14px;
    transition: color 0.25s var(--pc-ease);
}

.footer-contact a:hover {
    color: var(--pc-brand-yellow);
}

.footer-contact i {
    width: 18px;
    color: var(--pc-accent);
}

/* Same one-ring-per-icon mapping as the header bar. */
.footer-social a i {
    transition: color 0.25s var(--pc-ease), transform 0.25s var(--pc-ease);
    display: inline-block;
}

.footer-social a:nth-child(1):hover i {
    color: var(--pc-brand-red);
}

.footer-social a:nth-child(2):hover i {
    color: var(--pc-brand-yellow);
}

.footer-social a:nth-child(3):hover i {
    color: var(--pc-brand-green);
}

.footer-social a:nth-child(4):hover i {
    color: var(--pc-brand-blue);
}

.footer-social a:hover i {
    transform: translateY(-2px);
}

/* .check is #777777 against the #04091e footer - about 3:1 contrast, and
   genuinely hard to read. Lifted to a legible tone.                         */
.footer-area .check,
.footer-area .colorlib-footer-links a,
.footer-area li a {
    color: #b7bcc9;
    transition: color 0.25s var(--pc-ease);
}

.footer-area .check:hover,
.footer-area .colorlib-footer-links a:hover,
.footer-area li a:hover {
    color: var(--pc-accent);
}

.footer-area .colorlib-footer-links li {
    margin-bottom: 14px;
    line-height: 1.7;
}

/* Was #6f7585 on the #04091e footer - 4.29:1, marginally under AA. */
.footer-area .colorlib-footer-links span {
    color: var(--pc-footer-dim);
    font-size: 12px;
}

.footer-area p {
    color: #9aa0ae;
}

/* --- Modal --------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--pc-radius);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

/* --- Homepage banner carousel (index.html) -------------------------------- */
/* Slides are injected by an inline script in index.html from img/carousel/.
   main.css keeps headerr.jpg as the .banner-areaa background — that stays as
   the no-JS fallback underneath the slides. */
.banner-areaa {
    position: relative;
    overflow: hidden;
}

.banner-areaa .pc-banner-slide {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    z-index: 0;
}

.banner-areaa .pc-banner-slide.pc-active {
    opacity: 1;
}

.banner-areaa > .container {
    position: relative;
    z-index: 1;
}

/* --- Motion preference --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}