@charset "UTF-8";
/*-----------------------------------------------------------------------------------

    Amarendra — brand overrides for the Artima template

    Loaded AFTER assets/css/main.css. Everything that repaints the theme from
    the template's bronze (#906E50) to the Amarendra navy/red lives here, so
    main.css stays close to the vendor original and stays upgradeable.

    Palette sampled directly from the logo artwork in /Docs:
        navy   #001D55
        red    #D80B12

    01. Palette tokens
    02. Accent colour (red) placements
    03. Buttons
    04. Header & navigation
    05. Dark sections & footer
    06. Forms
    07. Utilities & misc
    08. Horizontal overflow containment
    09. Home banner / slider
    10. Offcanvas menu
    11. Project pictures (display size)

-----------------------------------------------------------------------------------*/

/*----------------------------------------*/
/*  01. Palette tokens
/*----------------------------------------*/
:root {
    /* Brand */
    --am-navy:        #001D55;
    --am-navy-deep:   #001440;
    --am-navy-soft:   #0A2B6B;
    --am-red:         #D80B12;
    --am-red-deep:    #B00910;
    --am-ink:         #071A3D;
    --am-tint:        #F4F6FA;
    --am-line:        rgba(0, 29, 85, 0.12);

    /* Repoint the template's own tokens at the brand */
    --rr-theme-primary:   var(--am-navy);
    --rr-theme-secondary: var(--am-red);
    --rr-heading-primary: var(--am-ink);
    --rr-menu-primary:    var(--am-ink);
    --rr-common-selection: var(--am-navy);
}

::selection {
    background: var(--am-navy);
    color: #fff;
}

/*----------------------------------------*/
/*  02. Accent colour (red) placements
/*----------------------------------------*/

/* Section eyebrow labels read as the red accent, not navy-on-navy */
.section__subtitle,
.section-2__subtitle,
.banner-3__content .subtitle {
    color: var(--am-red);
}

/* Highlighted words inside display headings */
.banner__item-title span,
.banner-4__content-title span,
.section__title span,
.section-2__title span {
    color: var(--am-red);
}

/* Numbered step / counter chips */
.working-process__item-number,
.working-process__icon .number,
.our-work-precess-2__item .number,
.work-process__item .number {
    color: var(--am-red);
}

.working-process__icon svg,
.working-process__icon img {
    width: 52px;
    height: 52px;
    display: block;
}

.working-process__icon:hover svg [fill="#080A0B"] {
    fill: var(--am-red);
}

/* Odometer counters */
.odometer,
.happy-customer__item-number,
.experience__counter-item .number {
    color: var(--am-navy);
}

.experience .odometer,
.experience__item-content-text h2,
.experience__item-content-text h2 .odometer,
.experience__item-content-text h2 .odometer-value,
.happy-customer .odometer,
.happy-customer h2,
.happy-customer h2 .odometer,
.happy-customer h2 .odometer-value,
.happy-customer .odometer-value {
    color: #fff;
}

/* About-us years chip — keep 10+ and Experience on their own lines, no wrap */
.about-us__box {
    width: auto;
    min-width: 260px;
    height: auto;
    min-height: 100px;
    padding: 18px 24px;
    gap: 16px;
}

.about-us__box h4 {
    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
    gap: 0;
    margin: 0;
    color: var(--am-navy);
    font-size: 36px;
    line-height: 1;
    white-space: nowrap;
}

.about-us__box h4 span {
    letter-spacing: 0;
}

.about-us__box .odometer {
    display: inline-block;
    vertical-align: top;
    padding-right: 0;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1;
}

.about-us__box .odometer-formatting-mark {
    display: none;
}

.about-us__box .odometer-digit {
    padding: 0 1px;
}

.about-us__plus {
    display: inline-block;
    margin-left: 4px;
    color: var(--am-navy);
    line-height: 1;
}

.about-us__box h6 {
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 575px) {
    .about-us__box {
        min-width: 230px;
        width: auto;
        height: auto;
        padding: 14px 18px;
    }

    .about-us__box h4 {
        font-size: 30px;
    }
}

/* About-us page — single photo, not the template's two-thumb collage.
   Thumb-1 was position:absolute (404×420, top:105px) waiting for a second
   image this page does not have, so the left block collapsed and the photo
   sat off the column. */
.about-company__media {
    position: relative;
    height: 100%;
    margin-top: 0;
}

.about-company__thumb-1 {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
    min-height: 480px;
    aspect-ratio: 4 / 5;
    margin-bottom: 0;
    overflow: hidden;
    background-color: var(--am-tint);
    border: 1px dashed rgba(0, 29, 85, 0.18);
}

.about-company__thumb-1 img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.about-company__shape-left {
    top: 18px;
    left: 18px;
    z-index: 2;
    pointer-events: none;
}

.about-company__shape-top {
    display: none;
}

.about-company__content {
    padding-left: 48px;
    margin-top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 1199px) {
    .about-company__content {
        padding-left: 28px;
    }
}

@media (min-width: 992px) {
    .about-company__thumb-1 {
        aspect-ratio: auto;
        height: 100%;
        min-height: 480px;
    }
}

@media (max-width: 991px) {
    .about-company__media,
    .about-company__thumb-1 {
        min-height: 0;
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
    }

    .about-company__media {
        margin-bottom: 36px;
    }

    .about-company__content {
        padding-left: 0;
        margin-top: 0;
    }

    .about-company__shape-left {
        display: none;
    }
}

@media (max-width: 575px) {
    .about-company__thumb-1 {
        aspect-ratio: 4 / 3;
    }
}

/* FAQ accordion — h2.accordion-header inherits the page h2 (48px / 64px
   line-height), so questions render as tiny type in a tall empty row. */
.rr__faq .accordion-item {
    border: 1px solid var(--am-line);
    border-radius: 0;
    background: #fff;
}

.rr__faq .accordion-item + .accordion-item {
    border-top: 0;
}

.rr__faq .accordion-header {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.rr__faq .accordion-button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 18px 52px 18px 22px;
    font-family: var(--rr-ff-heading);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--am-ink);
    background-color: #fff;
    box-shadow: none;
}

.rr__faq .accordion-button:not(.collapsed) {
    color: var(--am-navy);
    background-color: var(--am-tint);
    box-shadow: none;
}

.rr__faq .accordion-button:focus {
    box-shadow: none;
    border-color: var(--am-line);
}

.rr__faq .accordion-button::after {
    width: 18px;
    height: 18px;
    margin-left: 0;
    background-size: 18px;
}

.rr__faq .accordion-body {
    padding: 4px 22px 20px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--rr-text-body);
}

@media (max-width: 575px) {
    .rr__faq .accordion-header,
    .rr__faq .accordion-button {
        font-size: 16px;
    }

    .rr__faq .accordion-button {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}

/* Small icon accents that sit on light backgrounds */
.footer__support .icon svg [stroke="#001D55"],
.footer-3__support .icon svg [stroke="#001D55"],
.banner-3__btn-box__wrapper .icon svg [stroke="#001D55"] {
    stroke: var(--am-red);
}

/*----------------------------------------*/
/*  03. Buttons
/*----------------------------------------*/

/* Solid buttons: navy at rest, red on hover */
.rr-btn,
.rr-btn__header,
button.rr-btn {
    background-color: var(--am-navy);
    transition: background-color 0.35s ease;
}

.rr-btn:hover,
.rr-btn:focus,
.rr-btn__header:hover,
.rr-btn__header:focus,
button.rr-btn:hover,
button.rr-btn:focus {
    background-color: var(--am-red);
}

/* Outline / white variants keep their own ground but pick up brand text */
.rr-btn__transparent,
.rr-btn__white-transparent {
    background-color: transparent;
}

.rr-btn__transparent:hover,
.rr-btn__white-transparent:hover {
    background-color: var(--am-red);
    border-color: var(--am-red);
}

.rr-btn__transparent:hover .btn-wrap .text-one,
.rr-btn__transparent:hover .btn-wrap .text-two {
    color: #fff;
}

.rr-btn__white,
.rr-btn-white {
    background-color: #fff;
}

.rr-btn__white:hover,
.rr-btn-white:hover {
    background-color: var(--am-red);
}

.rr-btn__white:hover .btn-wrap .text-one,
.rr-btn__white:hover .btn-wrap .text-two,
.rr-btn-white:hover .btn-wrap .text-one,
.rr-btn-white:hover .btn-wrap .text-two {
    color: #fff;
}

/* Footer CTA sits on navy — a navy fill is invisible until hover */
.footer__top .rr-btn {
    background-color: var(--am-red);
}

.footer__top .rr-btn:hover,
.footer__top .rr-btn:focus {
    background-color: var(--am-red-deep);
}

/*----------------------------------------*/
/*  04. Header & navigation
/*----------------------------------------*/

/* Logo sizing — the Amarendra marks are wider than the stock logo */
.header__logo .logo img,
.header__logo img {
    max-height: 56px;
    width: auto;
}

.header-1 .header__logo .logo img {
    max-height: 58px;
}

.header-1 .header__logo {
    padding-left: 28px;
}

@media (max-width: 575px) {
    .header-1 .header__logo {
        padding-left: 16px;
    }
}

.offcanvas__logo img,
.footer__logo img,
.footer-3__logo img,
.footer-5__logo img {
    max-height: 58px;
    width: auto;
}

/* White main bar so the actual colour logo (navy + red) stays readable
   over the dark hero / breadcrumb. The top contact strip stays navy. */
.header-1 {
    background: #fff;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    border-bottom: 1px solid var(--am-line);
}

/* Inner pages: sit the bar in the document so it does not cover the
   1920×470 banner. Home (.body-1) keeps the overlay header. */
body:not(.body-1) .header-1 {
    position: relative;
    left: auto;
    right: auto;
}

.header-1 .header__main .main-menu {
    border-right-color: var(--am-line);
}

.header-1 .main-menu ul li > a,
.header-1 .main-menu ul li.has-dropdown > a::after {
    color: var(--am-ink);
}

.header-1 .main-menu ul li > a:hover,
.header-1 .main-menu ul li.active > a,
.header-1 .main-menu ul li:hover > a {
    color: var(--am-red);
}

/* Inner-page hero: show the full 1920×470 banner, no crop.
   Header is in-flow on these pages, so no extra overlay padding. */
.breadcrumb__area {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1920 / 470;
    height: auto;
}

.breadcrumb__area .container {
    position: relative;
    z-index: 6;
    width: 100%;
}

.breadcrumb-space {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
}

.breadcrumb__background {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 767px) {
    .breadcrumb__area {
        aspect-ratio: auto;
        min-height: 220px;
    }

    .breadcrumb-space {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .breadcrumb__background {
        background-size: contain;
        background-color: var(--am-ink);
    }
}

.breadcrumb__bg-left,
.breadcrumb__bg-right {
    display: none;
}

.breadcrumb__title {
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.15;
}

.breadcrumb__menu ul {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.breadcrumb__menu ul li:after {
    transform: translateY(-50%);
    top: 50%;
    margin-left: 14px;
}

/* Main menu type — CamelCase in DM Sans, not Outfit all-caps */
.main-menu ul li > a,
.main-menu ul li .submenu li a,
.mean-container .mean-nav ul li a,
.mean-container .mean-nav ul li span {
    font-family: var(--rr-ff-body);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.01em;
    text-transform: none;
}

.main-menu ul li > a {
    line-height: 1.2;
}

/* Main menu hover / active state */
.main-menu ul li > a:hover,
.main-menu ul li.active > a {
    color: var(--am-red);
}

.main-menu ul li .submenu li a:hover {
    color: var(--am-red);
}

.header-1 .main-menu ul li .submenu {
    background: var(--am-navy-deep);
    border-color: var(--am-red);
}

/* Active / hover underline — top-level items only (not the dropdown) */
.header-1 .main-menu ul:not(.submenu) > li > a {
    position: relative;
    padding-top: 36px;
    padding-bottom: 36px;
}

.header-1 .main-menu ul:not(.submenu) > li > a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 26px;
    width: 0;
    height: 2px;
    background: var(--am-red);
    transition: width 0.3s ease;
}

.header-1 .main-menu ul:not(.submenu) > li > a:hover::before,
.header-1 .main-menu ul:not(.submenu) > li.active > a::before {
    width: 100%;
}

.header-1.rr-sticky .main-menu ul:not(.submenu) > li > a::before {
    bottom: 26px;
}

/* Fit all seven nav items on laptop widths — hide only Contact (the CTA
   already covers it). The template hid everything after item 5. */
@media (max-width: 1399px) {
    .header-1 .header__main .main-menu {
        padding-right: 24px;
        margin-right: 24px;
    }

    .header-1 .main-menu ul li {
        margin-inline-end: 22px;
    }
}

@media (max-width: 1199px) {
    .header-1 .header__main .main-menu ul li:nth-child(6) {
        display: inline-block;
    }
}

/* Sticky header: stay white so the colour logo does not invert */
.header__area.header-sticky,
.header__area.sticky,
.header-1.rr-sticky {
    background-color: #fff;
    background: #fff;
    border-bottom: 2px solid var(--am-red);
    box-shadow: 0 10px 30px rgba(0, 20, 64, 0.12);
}

.header-1.rr-sticky .am-header__top {
    display: none !important;
}

.header-1.rr-sticky .main-menu ul:not(.submenu) > li > a {
    padding-top: 36px;
    padding-bottom: 36px;
}

/* Dropdown links must not inherit the tall sticky padding */
.header-1 .main-menu ul li .submenu {
    padding: 14px 0 10px;
}

.header-1 .main-menu ul li .submenu li a,
.header-1.rr-sticky .main-menu ul li .submenu li a {
    padding-top: 7px;
    padding-bottom: 7px;
    line-height: 1.4;
}

.header-1 .main-menu ul li .submenu li a::before,
.header-1.rr-sticky .main-menu ul li .submenu li a::before {
    left: 25px;
    top: 50%;
    bottom: auto;
    width: 0;
    height: 1px;
}

.header-1.rr-sticky .am-header__call {
    color: var(--am-ink);
}

/* CTA on the white header is the red accent */
.header-1 .rr-btn__header {
    background-color: var(--am-red);
}

.header-1 .rr-btn__header:hover,
.header-1 .rr-btn__header:focus {
    background-color: var(--am-red-deep);
}

/* Hamburger — navy bars on the white bar */
.header__hamburger .bar-icon span {
    background-color: var(--am-navy);
}

.header-1 .header__hamburger .bar-icon {
    width: 26px;
    height: 16px;
}

.header-1 .header__hamburger .bar-icon span {
    background-color: var(--am-navy);
    height: 2px;
}

.header-1 .header__hamburger .bar-icon span:nth-child(2) {
    width: 70%;
    margin-left: auto;
}

/* Top contact strip */
.am-header__top {
    background: var(--am-navy);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.am-header__top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
}

.am-header__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.am-header__meta li {
    position: relative;
    padding-right: 22px;
    margin-right: 22px;
}

.am-header__meta li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-50%);
}

.am-header__meta a,
.am-header__meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    line-height: 20px;
}

.am-header__meta a:hover {
    color: #fff;
}

.am-header__meta i {
    color: var(--am-red);
    font-size: 13px;
}

.am-header__social {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.am-header__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: #fff;
    font-size: 13px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.am-header__social a:hover {
    background-color: var(--am-red);
    border-color: var(--am-red);
    color: #fff;
}

/* Phone block beside the CTA */
.am-header__call {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-right: 22px;
    color: var(--am-ink);
    line-height: 1.15;
}

.am-header__call-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--am-line);
    color: var(--am-red);
    font-size: 16px;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.am-header__call:hover .am-header__call-icon {
    background-color: var(--am-red);
    border-color: var(--am-red);
    color: #fff;
}

.am-header__call-text {
    display: flex;
    flex-direction: column;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.am-header__call-text small {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(7, 26, 61, 0.55);
    margin-bottom: 2px;
}

/* Header top strip on the Infra layout */
.header__top {
    background-color: var(--am-navy);
}

.header__top a,
.header__top li,
.header__top span {
    color: rgba(255, 255, 255, 0.86);
}

.header__top a:hover {
    color: #fff;
}

/*----------------------------------------*/
/*  05. Dark sections & footer
/*----------------------------------------*/

.theme-bg-heading-primary {
    background-color: var(--am-ink);
}

.footer__area-common,
.footer-3__area-common,
.footer-5__area-common {
    background-color: var(--am-ink);
}

/* Footer link hover */
.footer__link ul li a:hover,
.footer-3__link ul li a:hover,
.footer-5__link ul li a:hover,
.footer__contact ul li .text a:hover,
.footer-3__contact ul li .text a:hover,
.footer-5__contact ul li .text a:hover,
.am-footer__contact-text a:hover,
.am-footer__legal a:hover {
    color: var(--am-red);
}

.footer__link ul li a i,
.footer-3__link ul li a i,
.footer-5__link ul li a i {
    color: var(--am-red);
}

/* Bottom bar sits a shade darker than the body of the footer */
.footer__bottom,
.footer-3__bottom,
.footer-5__bottom {
    background-color: var(--am-navy-deep);
}

.footer__copyright p a,
.footer-3__copyright p a,
.footer-5__copyright p a,
.am-footer__legal a {
    color: #fff;
}

/* Social chips */
.footer__widget-social ul li a,
.footer-5__widget-social ul li a,
.header-top-socail-menu li a,
.am-footer__social a {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.footer__widget-social ul li a:hover,
.footer-5__widget-social ul li a:hover,
.header-top-socail-menu li a:hover,
.am-footer__social a:hover {
    background-color: var(--am-red);
    border-color: var(--am-red);
    color: #fff;
}

/*----------------------------------------*/
/*  Footer layout
/*----------------------------------------*/

/* Kill the template's per-column padding/negative margins that
   shove Company / Contact out of line on this 4-column grid. */
.am-footer .footer__widget,
.am-footer .footer__widget.footer__widget-item-2,
.am-footer .footer__widget.footer__widget-item-3,
.am-footer .footer__widget.footer__widget-item-4 {
    padding-left: 0;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

.am-footer .footer__main-wrapper {
    padding-top: 64px;
    padding-bottom: 56px;
}

.am-footer .footer__widget-title h6 {
    margin-bottom: 18px;
}

/* CTA band: title + button on one baseline */
.am-footer__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
}

.am-footer__cta-title {
    margin: 0;
    max-width: none;
    color: #fff;
    font-size: 36px;
    line-height: 1.25;
    font-weight: 600;
}

.am-footer__cta .rr-btn {
    flex-shrink: 0;
}

.am-footer .footer__logo {
    margin-bottom: 18px;
}

.am-footer .footer__logo img {
    max-height: 52px;
}

/* "Since YYYY" line above the footer blurb — the year comes from
   config/site.php -> 'founded', so it never needs editing. */
.am-footer__since {
    margin: 0 0 8px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.am-footer__blurb {
    margin: 0 0 22px;
    max-width: 360px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.7;
}

.am-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.am-footer__social a {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
}

.am-footer .footer__link ul li,
.am-footer .footer__link ul li a {
    font-size: 16px;
    line-height: 1.4;
}

.am-footer .footer__link ul li {
    margin-bottom: 10px;
}

.am-footer .footer__link ul li a i {
    width: 14px;
    margin-right: 8px;
    padding-right: 0;
}

.am-footer__contact {
    list-style: none;
    margin: 0;
    padding: 0;
}

.am-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.am-footer__contact li:last-child {
    margin-bottom: 0;
}

.am-footer__contact-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
}

.am-footer__contact-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-top: 1px;
}

.am-footer__contact-text span {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 2px;
}

.am-footer__contact-text a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
}

.am-footer__legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

.am-footer__legal p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.5;
}

.am-footer__legal ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.am-footer__legal li {
    position: relative;
    padding: 0 14px;
}

.am-footer__legal li:first-child {
    padding-left: 0;
}

.am-footer__legal li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-50%);
}

.am-footer__legal li a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    line-height: 1.5;
}

@media (max-width: 991px) {
    .am-footer__cta {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .am-footer__cta-title {
        font-size: 28px;
    }

    .am-footer .footer__main-wrapper {
        padding-top: 48px;
        padding-bottom: 40px;
    }
}

@media (max-width: 575px) {
    .am-footer__cta {
        align-items: stretch;
    }

    .am-footer__cta .rr-btn {
        width: 100%;
        justify-content: center;
    }

    .am-footer__cta-title {
        font-size: 24px;
    }

    .am-footer__blurb {
        max-width: none;
    }

    .am-footer__legal {
        flex-direction: column;
        text-align: center;
    }

    .am-footer__legal ul {
        justify-content: center;
    }

    .am-footer__legal li:first-child {
        padding-left: 14px;
    }
}

/*----------------------------------------*/
/*  06. Forms
/*----------------------------------------*/

.contact-us__form input,
.contact-us__form textarea,
.contact-us__form select,
.am-form input,
.am-form textarea,
.am-form select {
    border: 1px solid var(--am-line);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Native <select> styled to sit level with the template's text inputs,
   which niceSelect does not touch inside .contact__form-input */
.am-form .contact__form-input select {
    width: 100%;
    height: 50px;
    font-size: 14px;
    line-height: 24px;
    padding: 0 40px 0 20px;
    color: var(--rr-text-body);
    background-color: #F8F8F8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23767676' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

.contact-us__form input:focus,
.contact-us__form textarea:focus,
.contact-us__form select:focus,
.am-form input:focus,
.am-form textarea:focus,
.am-form select:focus {
    border-color: var(--am-navy);
    box-shadow: 0 0 0 3px rgba(0, 29, 85, 0.08);
    outline: none;
}

/* Validation feedback rendered by the Contact controller */
.am-alert {
    padding: 16px 20px;
    margin-bottom: 26px;
    border-left: 4px solid;
    font-size: 15px;
    line-height: 24px;
}

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

.am-alert--ok {
    background: rgba(0, 29, 85, 0.06);
    border-color: var(--am-navy);
    color: var(--am-ink);
}

.am-alert--error {
    background: rgba(216, 11, 18, 0.07);
    border-color: var(--am-red);
    color: var(--am-red-deep);
}

.am-required {
    color: var(--am-red);
}

/*----------------------------------------*/
/*  07. Utilities & misc
/*----------------------------------------*/

/* Back-to-top progress ring */
#scroll-percentage {
    border-color: var(--am-navy);
    color: var(--am-navy);
}

/* Preloader bounce dots alternate navy / red */
.sk-three-bounce .sk-child {
    background-color: var(--am-navy);
}

.sk-three-bounce .sk-bounce2 {
    background-color: var(--am-red);
}

/* Magic cursor */
.cursor-follower {
    border-color: var(--am-navy) !important;
}

.cursor {
    background-color: var(--am-red) !important;
}

/* Swiper pagination + nav */
.swiper-pagination-bullet-active {
    background: var(--am-red) !important;
}

/* Isotope / portfolio filter buttons */
.projects__filter-button button.active,
.projects__filter-button button:hover,
.filter__area button.active,
.filter__area button:hover {
    color: var(--am-red);
}

/* Projects page — every tile is 595×470, regardless of source image */
.protfolio__item {
    overflow: hidden;
}

.protfolio__item-media {
    width: 100%;
    height: auto;
    aspect-ratio: 595 / 470;
    overflow: hidden;
    background: var(--am-tint);
}

.protfolio__item-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Text-selection highlight blocks used as section dividers */
.brand__area,
.section-bg-1 {
    background: var(--am-tint);
}

/* Group-companies cards (Amarendra Group site) */
.am-group-card {
    display: block;
    height: 100%;
    padding: 40px 34px;
    background: #fff;
    border: 1px solid var(--am-line);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.am-group-card:hover {
    transform: translateY(-8px);
    border-color: var(--am-navy);
    box-shadow: 0 30px 60px rgba(0, 29, 85, 0.12);
}

.am-group-card__name {
    color: var(--am-ink);
    margin-bottom: 12px;
}

.am-group-card:hover .am-group-card__name {
    color: var(--am-navy);
}

.am-group-card__blurb {
    color: #767676;
    margin-bottom: 22px;
}

.am-group-card__link {
    color: var(--am-red);
    font-weight: 600;
}

/* Simple bullet list used across service / project detail pages */
.am-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.am-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 14px;
    color: #767676;
    line-height: 26px;
}

.am-list li:before {
    content: "\f00c";
    font-family: var(--rr-ff-fontawesome);
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 13px;
    color: var(--am-red);
}

.am-list--tight li {
    margin-bottom: 8px;
}

/* Map embed */
.am-map iframe {
    display: block;
    width: 100%;
    height: 460px;
    border: 0;
    filter: grayscale(0.35);
}

/*----------------------------------------*/
/*  08. Horizontal overflow containment
/*----------------------------------------*/
/*
    The Artima template ships with horizontal page scroll on two of the three
    layouts we use — verified against the untouched vendor files:
        Html/index-3.html  overflows +238px at 1440px wide
        Html/index.html    overflows  +53px at 1440px, +11px at 1024/768px
        Html/index-4.html  is clean

    Four separate causes, each fixed at source below rather than papered over.
    `overflow-x: clip` is used in preference to `hidden` because it does NOT
    create a scroll container, so `position: sticky`/`fixed` descendants (the
    sticky header, the service-details sidebar) keep working exactly as before.
*/

/*  a) Sections whose decorative art is positioned to bleed past the
       container on purpose, but which the template never clips.
       .our-special-skills__media sits at right:-290px
       .about-us-2__shape         sits at left:-90px                        */
.our-special-skills,
.about-us-2,
.banner-3,
.projects,
.services,
.about-us-4,
.our-featured-service,
.our-team,
.our-work-precess-2,
.latest-project,
.latest-project-3,
.why-choose-us,
.work-process,
.experience {
    overflow-x: clip;
}

/*  b) .what-we-do__wrapper is a full-bleed grey band built from
       margin: 0 -120px. The template only resets that below 1200px, so it
       hangs off the viewport on wide screens. Clip at the section edge —
       which is the full-bleed look that was intended anyway.               */
.what-we-do {
    overflow-x: clip;
}

/*  c) .gx-100 sets a 100px bootstrap gutter (±50px row margins) but only
       shrinks it below 768px. Between 768px and 1199px the negative row
       margin is wider than the container padding and pushes the page out.  */
@media only screen and (max-width: 1199px) {
    .g-100,
    .gx-100 {
        --bs-gutter-x: 30px;
    }
}

/*  d) Backstop. Anything we have not anticipated — a long unbroken string,
       an embed, a future section — gets clipped at the viewport instead of
       producing a horizontal scrollbar. `clip` (not `hidden`) keeps sticky
       positioning intact; it must be set on both html and body to survive
       viewport-propagation.                                                */
html,
body {
    overflow-x: clip;
    max-width: 100%;
}

/*  Wide content that genuinely needs to scroll must do so inside its own
    box rather than pushing the page — tables and code blocks in particular. */
.table-responsive,
.am-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/*  Media should never exceed its column. */
img,
video,
iframe {
    max-width: 100%;
}

/*----------------------------------------*/
/*  09. Home banner / slider
/*----------------------------------------*/

.am-banner {
    position: relative;
}

/* Inner-page breadcrumb used the same bronze overlays as the home slider */
.breadcrumb__area.overly:after {
    background: linear-gradient(100deg, rgba(0, 20, 64, 0.72) 8%, rgba(0, 29, 85, 0.28) 62%, rgba(8, 10, 11, 0.45) 100%);
    mix-blend-mode: normal;
}

.breadcrumb__area.overly:before {
    background: linear-gradient(115deg, rgba(216, 11, 18, 0.22) 0%, rgba(0, 29, 85, 0.08) 48%, transparent 78%);
    mix-blend-mode: normal;
}

/* Rebrand the template's bronze wash to navy + red, and drop mix-blend
   modes that were turning photography orange. */
.banner__item:after {
    background: linear-gradient(100deg, rgba(0, 20, 64, 0.72) 8%, rgba(0, 29, 85, 0.28) 62%, rgba(8, 10, 11, 0.45) 100%);
    mix-blend-mode: normal;
}

.banner__item::before {
    background: linear-gradient(115deg, rgba(216, 11, 18, 0.22) 0%, rgba(0, 29, 85, 0.08) 48%, transparent 78%);
    mix-blend-mode: normal;
}

.banner__item__left-bg {
    background: rgba(0, 29, 85, 0.42);
    mix-blend-mode: multiply;
}

.banner__item__right-bg {
    background: rgba(216, 11, 18, 0.28);
    mix-blend-mode: multiply;
}

.am-banner .banner__space {
    padding-top: 200px;
    padding-bottom: 90px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px),
       only screen and (min-width: 768px) and (max-width: 991px) {
    .am-banner .banner__space {
        padding-top: 160px;
        padding-bottom: 70px;
    }
}

@media (max-width: 767px) {
    .am-banner .banner__space {
        padding-top: 130px;
        padding-bottom: 60px;
    }
}

/* Autoplay progress — sits on the top edge of the bottom dock */
.am-banner__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 12;
    height: 3px;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
}

.am-banner__progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--am-red);
    transform: scaleX(0);
    transform-origin: left center;
    animation: am-banner-progress 5.5s linear forwards;
}

@keyframes am-banner-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* Eyebrow + index above the headline */
.am-banner__eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 0.7s ease-in-out 0.05s;
}

.banner__slider .swiper-slide-active .am-banner__eyebrow {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.am-banner__index {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: #fff;
}

.am-banner__eyebrow-text {
    position: relative;
    padding-left: 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.am-banner__eyebrow-text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 10px;
    height: 2px;
    background: var(--am-red);
    transform: translateY(-50%);
}

/* Dual CTAs */
.am-banner__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transition: clip-path 0.7s ease-in-out 0.2s;
}

.banner__slider .swiper-slide-active .am-banner__actions {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.am-banner .banner__item .rr-btn {
    text-transform: uppercase;
}

.am-banner .banner__item .rr-btn:hover .btn-wrap span,
.am-banner .banner__item .rr-btn:focus .btn-wrap span {
    color: #fff;
}

.am-banner .banner__item .rr-btn__white-transparent {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.7);
    padding: 12.5px 28px;
}

.am-banner .banner__item .rr-btn__white-transparent .btn-wrap span {
    color: #fff;
}

.am-banner .banner__item .rr-btn__white-transparent:hover,
.am-banner .banner__item .rr-btn__white-transparent:focus {
    background-color: var(--am-red);
    border-color: var(--am-red);
}

/* Years badge — occupies the old video-play slot on the right */
.am-banner__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 18px 40px rgba(0, 20, 64, 0.22);
    text-align: center;
    color: var(--am-navy);
}

.am-banner__badge strong {
    display: block;
    font-size: 32px;
    line-height: 1;
    font-weight: 700;
    color: var(--am-red);
    margin-bottom: 4px;
}

.am-banner__badge span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--am-navy);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .am-banner__badge {
        width: 100px;
        height: 100px;
    }

    .am-banner__badge strong {
        font-size: 26px;
    }
}

@media only screen and (max-width: 767px) {
    .am-banner .banner__item-content-link {
        display: none;
    }
}

/* Side arrows — overlay, not a bottom dock */
.am-banner__nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 12;
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
    pointer-events: none;
    transform: translateY(-50%);
}

.am-banner .banner__slider__arrow-prev,
.am-banner .banner__slider__arrow-next {
    pointer-events: auto;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(0, 20, 64, 0.35);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.am-banner .banner__slider__arrow-prev:hover,
.am-banner .banner__slider__arrow-next:hover {
    background-color: var(--am-red);
    border-color: var(--am-red);
}

@media (max-width: 575px) {
    .am-banner__nav {
        padding: 0 12px;
    }

    .am-banner .banner__slider__arrow-prev,
    .am-banner .banner__slider__arrow-next {
        width: 38px;
        height: 38px;
    }
}

/*----------------------------------------*/
/*  10. Offcanvas menu
/*----------------------------------------*/

.am-offcanvas {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(216, 11, 18, 0.22) 0%, transparent 42%),
        var(--am-navy-deep);
    border-left: 3px solid var(--am-red);
    overflow: hidden;
}

.am-offcanvas .offcanvas__wrapper {
    height: 100%;
    padding: 22px 26px 24px;
}

.am-offcanvas .offcanvas__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 0;
}

.am-offcanvas__top {
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.am-offcanvas__logo {
    background: #fff;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.am-offcanvas__logo a,
.am-offcanvas__logo img,
.am-offcanvas .offcanvas__logo a img {
    width: auto;
    max-width: 148px;
    max-height: 44px;
    height: auto;
}

.am-offcanvas .offcanvas-close-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.am-offcanvas .offcanvas-close-icon:hover {
    background-color: var(--am-red);
    border-color: var(--am-red);
}

.am-offcanvas .offcanvas-close-icon:hover .offcanvas-m-line {
    background: #fff;
}

.am-offcanvas .mobile-menu {
    margin-bottom: 16px;
}

.am-offcanvas .mean-container .mean-nav ul li a,
.am-offcanvas .mean-container .mean-nav ul li span {
    font-family: var(--rr-ff-body);
    font-size: 15px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: #fff;
    padding: 7px 0;
    border-top-color: rgba(255, 255, 255, 0.08);
}

.am-offcanvas .mean-container .mean-nav ul li a:hover,
.am-offcanvas .mean-container .mean-nav ul li.active > a {
    color: var(--am-red);
}

.am-offcanvas .mean-container .mean-nav ul li li a {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 14px;
}

.am-offcanvas__label {
    display: block;
    margin-bottom: 10px;
    color: var(--am-red);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.am-offcanvas__group {
    margin-bottom: 16px;
}

.am-offcanvas__card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    margin-bottom: 8px;
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 3px solid var(--am-red);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.am-offcanvas__card:last-child {
    margin-bottom: 0;
}

.am-offcanvas__card:hover {
    background: rgba(216, 11, 18, 0.12);
    border-color: rgba(216, 11, 18, 0.45);
    color: #fff;
}

.am-offcanvas__card-logo {
    flex-shrink: 0;
    width: 118px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    background: #fff;
}

.am-offcanvas__card-logo img {
    display: block;
    max-width: 100%;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.am-offcanvas__card-text {
    flex: 1;
    min-width: 0;
}

.am-offcanvas__card-text strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.am-offcanvas__card-text small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.58);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.am-offcanvas__card i {
    flex-shrink: 0;
    color: var(--am-red);
    font-size: 12px;
}

.am-offcanvas__contact {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.am-offcanvas__contact a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.am-offcanvas__contact a i {
    width: 16px;
    color: var(--am-red);
    text-align: center;
}

.am-offcanvas__contact a:hover {
    color: var(--am-red);
}

.am-offcanvas__foot {
    margin-top: auto;
}

.am-offcanvas__btn .rr-btn__header {
    background-color: var(--am-red);
    justify-content: center;
}

.am-offcanvas__btn .rr-btn__header:hover,
.am-offcanvas__btn .rr-btn__header:focus {
    background-color: var(--am-red-deep);
}

.am-offcanvas__social {
    margin: 14px 0 0;
}

.am-offcanvas__social ul {
    gap: 8px;
}

.am-offcanvas__social ul li a {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    border-radius: 0;
}

.am-offcanvas__social ul li a:hover {
    background-color: var(--am-red);
    border-color: var(--am-red);
    color: #fff;
    transform: none;
}

@media (max-width: 575px) {
    .am-offcanvas .offcanvas__wrapper {
        padding: 18px 20px;
    }

    .am-offcanvas__card {
        gap: 10px;
        padding: 8px 10px;
    }

    .am-offcanvas__card-logo {
        width: 96px;
        height: 46px;
        padding: 5px 6px;
    }

    .am-offcanvas__card-logo img {
        max-height: 34px;
    }
}


/*----------------------------------------*/
/*  11. Contact cards
/*----------------------------------------*/

/* The three cards hold very different amounts of text — a full postal address
   next to a single e-mail line — so left to themselves they end up ragged.
   Stretch them to the tallest in the row and centre the contents. */
.contact-us .row > [class*="col-"] { display: flex; }

.contact-us__info-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.contact-us__text { width: 100%; }


/*----------------------------------------*/
/*  12. Team cards
/*----------------------------------------*/

/*
 * Built from the mark: a navy chevron with a red diagonal driven through it.
 * So the card is navy, the plinth carrying the name is cut on that same
 * diagonal, and the index tab is the red stroke reduced to a corner.
 *
 * The portrait stays in full colour at rest. The template greyscaled faces
 * until hover, which is no way to introduce four directors.
 *
 * One card, used by the Team page, the About page and the home slider.
 */
.am-team {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--am-navy);
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1),
                box-shadow 0.45s ease;
}

.am-team:hover {
    transform: translateY(-10px);
    box-shadow: 0 34px 68px rgba(0, 29, 85, 0.3);
}

/*  Photo  */

/* Fixed ratio — matches the 410x470 the photos are stored at, and keeps the
   row straight if someone later uploads a different shape. */
.am-team__media {
    flex: 0 0 auto;
    position: relative;
    aspect-ratio: 41 / 47;
    overflow: hidden;
    background: var(--am-tint);
}

.am-team__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Faces sit in the upper half of a portrait crop. */
    object-position: center top;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.am-team:hover .am-team__media img {
    transform: scale(1.07);
}

/* Navy settling into the foot of the picture, so the plinth grows out of the
   photograph rather than being pasted under it. Lifts on hover. */
.am-team__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 29, 85, 0) 45%, rgba(0, 29, 85, 0.6) 100%);
    transition: opacity 0.45s ease;
}

.am-team:hover .am-team__media::after {
    opacity: 0.55;
}
/*  Corner flash — the red stroke from the logo, cut on the plinth's diagonal  */
.am-team__flag {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 66px;
    height: 32px;
    background: var(--am-red);
    clip-path: polygon(0 0, 100% 0, 100% 42%, 0 100%);
    transition: width 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.am-team:hover .am-team__flag {
    width: 100px;
}

/*  Name plinth, cut on the chevron's angle  */
.am-team__body {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    /* Roles run from one line to three. Sitting the text on the floor of the
       plinth keeps all four names on a common baseline, so a short title does
       not leave a slab of empty navy under it. */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Pulled up over the photo so the cut edge reads as one shape. */
    margin-top: -38px;
    padding: 34px 24px 30px;
    background: linear-gradient(158deg, var(--am-navy-soft) 0%, var(--am-navy-deep) 100%);
    clip-path: polygon(0 38px, 100% 0, 100% 100%, 0 100%);
}

.am-team__name {
    position: relative;
    margin: 0 0 14px;
    padding-bottom: 14px;
    font-size: 19px;
    line-height: 1.3;
    color: var(--rr-common-white);
}

.am-team__name a {
    color: inherit;
}

.am-team__name a:hover {
    color: var(--rr-common-white);
}

/* Short red rule that runs out from under the name on hover. */
.am-team__name::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    background: var(--am-red);
    transition: width 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.am-team:hover .am-team__name::after {
    width: 76px;
}

/* Roles run long here — "Director – Business Development, Finance &
   Administration" — so this wraps instead of being clipped to the photo. */
.am-team__role {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.65;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

/* Optional — site_team.bio is empty today, but the field is there. */
.am-team__bio {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    line-height: 1.7;
}

/* Nobody needs the card leaping about if they have asked the system to stop
   moving things. */
@media (prefers-reduced-motion: reduce) {
    .am-team,
    .am-team__media img,
    .am-team__flag,
    .am-team__name::after {
        transition: none;
    }

    .am-team:hover {
        transform: none;
    }

    .am-team:hover .am-team__media img {
        transform: none;
    }
}

@media (max-width: 575px) {
    .am-team__body {
        padding: 32px 20px 26px;
    }

    .am-team__name {
        font-size: 18px;
    }
}

/*----------------------------------------------------------------------------
    11. Project pictures - display size

    Uploaded project pictures are stored at twice the size they appear (see
    content_kinds in Admin/application/libraries/Sitefiles.php), so a
    high-density screen has real pixels to draw with instead of enlarging a
    web-sized file.

    The template leaves these images unsized, so the browser lays them out at
    whatever the file happens to be - which, now that the file is double,
    would double the picture on the page. These pin the display size back to
    the one the design was built around and leave the spare pixels doing the
    only job they are there for.
----------------------------------------------------------------------------*/

.protfolio-details__media img,
.protfolio-details__media-group img {
    width: 100%;
    max-width: 595px;
    height: auto;
}

/*----------------------------------------------------------------------------
    12. Project lightbox links

    A project card carries one visible "+" link plus one hidden link per
    remaining picture, which is how the lightbox knows what to step through
    without showing a row of thumbnails on the card. Hidden from sight and
    from assistive technology alike — the "+" already opens the same set.
----------------------------------------------------------------------------*/

.am-shot--extra {
    display: none !important;
}

/* On a project page the pictures themselves are the links, so the link has to
   take the size the picture used to. */
.protfolio-details__media > a.am-shot,
.protfolio-details__media-group > a.am-shot {
    display: block;
    width: 100%;
    max-width: 595px;
}

.protfolio-details__media > a.am-shot > img,
.protfolio-details__media-group > a.am-shot > img {
    width: 100%;
    max-width: none;
    height: auto;
    display: block;
}

.protfolio-details__media-group > a.am-shot {
    cursor: zoom-in;
}

/* The row stretches its items to the tallest by default, which on a mixed set
   of pictures leaves a link taller than the picture inside it — dead space
   that still opens the lightbox. Line them up at the top instead. */
.protfolio-details__media-group {
    align-items: flex-start;
}