@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. 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,
.our-work-precess-2__item .number,
.work-process__item .number {
    color: var(--am-red);
}

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

/* Dark bands: digits inherit the global navy rule above and vanish.
   Force the odometer and its inner ribbon values to white. */
.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,
.happy-customer .odometer-digit {
    color: #fff;
}

/* 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);
    color: #fff;
}

/*----------------------------------------*/
/*  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,
.header-3 .header__logo .logo img {
    max-height: 44px;
}

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

/* White header-3 bar: template menu links are white, so they vanish.
   Navy at rest, red on hover / the current page. Top-level only. */
.header-3 .main-menu ul:not(.submenu) > li > a,
.header-3 .main-menu ul li.has-dropdown > a::after {
    color: var(--am-ink);
}

.header-3 .main-menu ul:not(.submenu) > li > a {
    font-family: var(--rr-ff-body);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.01em;
    text-transform: none;
    line-height: 1.2;
    padding-top: 30px;
    padding-bottom: 30px;
}

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

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

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

.header-3 .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;
    letter-spacing: 0.01em;
    text-transform: none;
}

/* Fit all seven items — template hid Group and Contact below 1200px */
@media (max-width: 1399px) {
    .header-3 .main-menu ul li {
        margin-inline-end: 22px;
    }
}

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

/* Main menu hover / active state (other layouts) */
.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);
}

/* Sticky header keeps a hairline of brand colour */
.header__area.header-sticky,
.header__area.sticky,
.header-3.rr-sticky {
    background-color: #fff;
    border-bottom: 2px solid var(--am-red);
}

.header-3.rr-sticky .main-menu ul:not(.submenu) > li > a,
.header-3.rr-sticky .main-menu ul li.has-dropdown > a::after {
    color: var(--am-ink);
}

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

/* Hamburger bars */
.header__hamburger .bar-icon span,
.header-1 .header__hamburger .bar-icon span,
.header-3 .header__hamburger .bar-icon span {
    background-color: var(--am-navy);
}

/* Header top strip on the Infra layout */
.header__top,
.header-3 .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;
}

/* Inner-page hero: show the full 1920×470 banner, no crop.
   Header-3 is already in-flow. */
.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;
}

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

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

@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);
    }
}

/*----------------------------------------*/
/*  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;
}

/*----------------------------------------*/
/*  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);
}

/* 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%;
}

/*----------------------------------------*/
/*  Home hero (banner-3)
/*----------------------------------------*/

/* Template hangs a 908px photo at right:-585px behind a 30% overlay, then
   clips it with overflow:hidden. Copy also has 246px top margin meant for
   an overlay header — header-3 is in-flow, so the hero was a tall empty
   navy smear with a grey placeholder. */
.banner-3 {
    height: auto;
    min-height: 0;
    background: var(--am-ink);
    overflow: hidden;
}

.banner-3::before {
    background: transparent;
}

.banner-3__shape-1,
.banner-3__shape-2,
.banner-3__shape-3 {
    display: none;
}

.banner-3__content {
    margin-top: 72px;
    margin-right: 0;
    margin-bottom: 72px;
    max-width: 560px;
}

.banner-3__content .subtitle {
    color: var(--am-red);
    background-color: rgba(255, 255, 255, 0.08);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.banner-3__content h1 {
    font-size: 52px;
    line-height: 1.15;
}

.banner-3__content p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
}

.banner-3__btn-box .rr-btn {
    background-color: var(--am-red);
    border-color: var(--am-red);
}

.banner-3__btn-box .rr-btn:hover,
.banner-3__btn-box .rr-btn:focus {
    background-color: var(--am-red-deep);
    border-color: var(--am-red-deep);
}

.banner-3__btn-box__wrapper a {
    color: #fff;
}

.banner-3__media {
    height: 100%;
    min-height: 480px;
    margin-top: 0;
}

.banner-3__media__shape {
    width: 100%;
    height: 100%;
    min-height: 480px;
    margin-left: 0;
    overflow: hidden;
}

.banner-3__media__shape .img img {
    position: absolute;
    inset: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.banner-3__media__shape .img-2 {
    display: none;
}

@media (max-width: 1199px) {
    .banner-3__content {
        margin-top: 48px;
        margin-bottom: 36px;
        max-width: none;
    }

    .banner-3__content h1 {
        font-size: 40px;
    }

    .banner-3__media,
    .banner-3__media__shape {
        min-height: 0;
    }

    .banner-3__media__shape .img img {
        position: relative;
        inset: auto;
        width: 100%;
        height: 420px;
    }
}

@media (max-width: 575px) {
    .banner-3__content h1 {
        font-size: 32px;
    }

    .banner-3__media__shape .img img {
        height: 280px;
    }
}

/*----------------------------------------*/
/*  Home — How We Work
/*----------------------------------------*/

/* Template wraps each card in a Bootstrap tab-pane. Inactive panes are
   display:none, so only Step 01 showed. Cards are now always in the grid;
   the step pills only highlight the matching card.                        */
.our-work-precess-2 .tab-pane,
.our-work-precess-2 .fade:not(.show) {
    display: block !important;
    opacity: 1 !important;
}

.our-work-precess-2__nav-tabs .nav {
    gap: 12px;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.our-work-precess-2__nav-tabs .nav-link {
    flex: 1 1 0;
    text-align: center;
    text-transform: none;
    font-family: "DM Sans", sans-serif;
    color: var(--am-ink);
    cursor: pointer;
}

.our-work-precess-2__nav-tabs .nav-link.active {
    color: #fff;
    background-color: var(--am-red);
    border-color: var(--am-red);
}

.our-work-precess-2__content .row {
    align-items: stretch;
}

.our-work-precess-2__item {
    height: calc(100% - 30px);
    padding: 36px 22px 32px;
    cursor: pointer;
    background: #fff;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.our-work-precess-2__item.is-active {
    background-color: var(--am-navy) !important;
    border-color: var(--am-navy);
}

.our-work-precess-2__item.is-active .our-work-precess-2__icon {
    background-color: #fff !important;
    border-color: transparent;
}

.our-work-precess-2__item.is-active .our-work-precess-2__text h6,
.our-work-precess-2__item.is-active .our-work-precess-2__text p {
    color: #fff !important;
}

.our-work-precess-2__icon {
    margin-bottom: 28px;
}

.our-work-precess-2__icon svg,
.our-work-precess-2__icon img {
    width: 48px;
    height: 48px;
    display: block;
}

.our-work-precess-2__icon svg [fill="#080A0B"] {
    fill: var(--am-navy);
    transition: fill 0.25s ease;
}

.our-work-precess-2__item:hover .our-work-precess-2__icon svg [fill="#080A0B"],
.our-work-precess-2__item.is-active:hover .our-work-precess-2__icon svg [fill="#080A0B"] {
    fill: var(--am-red);
}

.our-work-precess-2__text h6 {
    overflow: visible;
    line-height: 1.35;
    color: var(--am-ink);
}

@media (max-width: 991px) {
    .our-work-precess-2__nav-tabs .nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    .our-work-precess-2__nav-tabs .nav-link {
        flex: 0 1 auto;
    }
}

/*----------------------------------------*/
/*  Home — Projects
/*----------------------------------------*/

/* Template layout is a 3-tile flex row with tab-content position:absolute
   and items max-width:410px. Six mixed-ratio photos overflow and get
   clipped, so the filters and tiles never share a common edge.           */
.projects__space {
    padding-top: 100px;
    padding-bottom: 100px;
    margin-top: 0;
}

.projects > .container > .row {
    align-items: stretch;
}

.projects .tab-content {
    position: relative;
    width: 100%;
}

.projects__nav-tabs {
    margin-top: 0;
    height: 100%;
}

.projects__nav-tabs::before {
    top: 0;
    height: 100%;
}

.projects__nav-tabs .nav-link {
    text-align: left;
    white-space: normal;
    line-height: 1.35;
    text-transform: none;
    font-family: "DM Sans", sans-serif;
}

.projects__wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 0;
    align-items: stretch;
}

.projects__item {
    max-width: none;
    width: 100%;
    height: 100%;
}

.projects__media {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

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

.projects__text-top,
.projects__text-bottom {
    left: 24px;
    right: 24px;
}

.projects__text-top {
    top: 24px;
}

.projects__text-bottom {
    bottom: 24px;
}

.projects__arrow {
    left: 24px;
    bottom: 24px;
}

@media (max-width: 1199px) {
    .projects__space {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .projects__nav-tabs {
        margin-bottom: 36px;
        height: auto;
    }

    .projects__nav-tabs::before {
        display: none;
    }

    .projects__nav-tabs .nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px 28px;
    }

    .projects__wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 0;
    }
}

@media (max-width: 575px) {
    .projects__space {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .projects__wrapper {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*----------------------------------------*/
/*  Home — Why Choose Us
/*----------------------------------------*/

.am-why .section__title {
    max-width: 16ch;
}

.am-why__lead {
    color: rgba(255, 255, 255, 0.8);
    font-size: 17px;
    line-height: 1.7;
}

.am-why__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 36px 28px 32px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.am-why__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--am-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.am-why__card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(216, 11, 18, 0.45);
    transform: translateY(-6px);
}

.am-why__card:hover::before {
    transform: scaleX(1);
}

.am-why__no {
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    color: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.am-why__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.am-why__icon svg {
    width: 26px;
    height: 26px;
    display: block;
}

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

.am-why__title {
    color: #fff;
    margin-bottom: 12px;
    font-size: 20px;
    line-height: 1.35;
}

.am-why__text {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

@media (max-width: 991px) {
    .am-why .section__title {
        max-width: none;
        margin-bottom: 16px;
    }
}

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

.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;
}

.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;
    }
}

/*----------------------------------------*/
/*  About-us — About company photo
/*----------------------------------------*/

/* Template collage: thumb-1 is position:absolute (404×420, top:105px)
   waiting for a second image this page does not have. The column then
   has no in-flow height and the photo sits off the copy. */
.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 (service details)
/*----------------------------------------*/

/* 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;
    }
}

/*----------------------------------------*/
/*  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.72);
    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;
    }
}

/*----------------------------------------------------------------------------
    09. 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;
}

/*----------------------------------------------------------------------------
    10. 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;
}