/* ==========================================================================
   Metasoft IT Solutions site enhancements
   Loaded after assets/sass/style.css on every page. Keeps the template
   untouched and holds the shared custom styles.

   Breakpoints used by the components below:
     mobile  ≤ 767px   ·   tablet 768–1023px   ·   desktop ≥ 1024px

   Contents
     1. Tokens & base          6. Home: projects grid      11. Contact page
     2. Typography              7. Process timeline         12. Forms
     3. Header                  8. Home: clients            13. Footer
     4. Buttons                 9. Services page            14. Misc & motion
     5. Shared cards           10. Projects page
   ========================================================================== */

/* ---------- 1. Tokens & base ---------- */
:root {
    --ayra-primary: #233FD6;
    --ayra-primary-dark: #1a30a8;
    --ayra-primary-soft: rgba(35, 63, 214, .08);
    --ayra-navy: #000B47;
    --ayra-accent: #FBB132;
    --ayra-text: #4f5b76;
    --ayra-border: #e4eaf1;
    --ayra-surface: #f8fafc;
    --ayra-radius: 14px;
    --ayra-radius-lg: 18px;
    --ayra-shadow-sm: 0 4px 14px rgba(0, 11, 71, .05);
    --ayra-shadow: 0 10px 30px rgba(0, 11, 71, .08);
    --ayra-shadow-hover: 0 18px 40px rgba(0, 11, 71, .14);
    --ayra-ease: cubic-bezier(.2, .7, .2, 1);
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
p { color: var(--ayra-text); }   /* slightly darker than template #687693 for better contrast */
img { max-width: 100%; height: auto; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: #fff; color: #000; padding: 10px 16px; border-radius: 6px; }
.skip-link:focus { left: 10px; top: 10px; }
.visually-hidden-label, .cta-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* Visible keyboard focus everywhere (template removed outlines in several places) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .nice-select:focus-visible, .accordion-button:focus-visible {
    outline: 3px solid var(--ayra-accent) !important;
    outline-offset: 2px !important;
    box-shadow: none;
}

/* ---------- 2. Typography (fluid, replaces the template's stepped sizes) ---------- */
.section-title h2 { font-size: clamp(28px, 1.1rem + 2.4vw, 50px); line-height: 1.25; }
.ayra-eyebrow, .ayra-kicker {
    display: inline-block; color: var(--ayra-primary); font-size: 13px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; line-height: 1.4;
}
.ayra-kicker { font-size: 15px; margin-bottom: 10px; }

/* Hero h1 and page-title h1 keep the template's h2 look */
.static-hero .sub-title h1 { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; }
.wpo-page-title .wpo-breadcumb-wrap h1 { font-size: clamp(32px, 1.2rem + 3.6vw, 60px); color: #fff; line-height: 1.1; margin-bottom: 20px; font-weight: 600; }
.wpo-page-title .wpo-breadcumb-wrap h1 span { color: var(--ayra-accent); }
@media (max-width: 767px) { .wpo-page-title .wpo-breadcumb-wrap h1 { margin-bottom: 10px; } }

/* ---------- 3. Header ---------- */
.sticky-header { backdrop-filter: saturate(160%) blur(8px); }
.wpo-site-header .navigation-holder .navbar-nav > li > a { letter-spacing: .02em; }
.header-right .call-number:hover .number { color: var(--ayra-primary); }

/* Logo: wide wordmark (the old square logo was capped at 170px).
   Inner pages (.s3) put the header over a dark photo, so they show the light version
   there and the colour version in the white sticky copy of the header. */
.wpo-site-header .navbar-header .navbar-brand { display: inline-block; padding: 0; }
.wpo-site-header .navbar-header .navbar-brand img { display: block; width: 100%; max-width: 210px; height: auto; }
.wpo-site-header .navbar-brand .logo-light { display: none; }
.wpo-site-header.s3 .navbar-brand .logo-color { display: none; }
.wpo-site-header.s3 .navbar-brand .logo-light { display: block; }
.wpo-site-header.s3 .sticky-header .navbar-brand .logo-color { display: block; }
.wpo-site-header.s3 .sticky-header .navbar-brand .logo-light { display: none; }
@media (max-width: 991px) { .wpo-site-header .navbar-header .navbar-brand img { max-width: 180px; } }
@media (max-width: 370px) { .wpo-site-header .navbar-header .navbar-brand img { max-width: 145px; } }

/* Desktop menu: always one line. The template's padding/font sizes overflowed the
   menu column at common laptop widths (1024, 1280, 1536px) and wrapped to two rows. */
@media (min-width: 992px) {
    .wpo-site-header #navbar > ul { flex-wrap: nowrap; }
    .wpo-site-header #navbar > ul > li > a { white-space: nowrap; }
}
@media (min-width: 1600px) and (max-width: 1870px) {
    .wpo-site-header #navbar > ul > li > a { padding-left: 14px; padding-right: 14px; }
}
@media (min-width: 1400px) and (max-width: 1599px) {
    .wpo-site-header #navbar > ul > li > a { padding-left: 11px; padding-right: 11px; font-size: 16px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
    .wpo-site-header #navbar > ul > li > a { padding-left: 9px; padding-right: 9px; font-size: 15px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .wpo-site-header #navbar > ul > li > a { padding-left: 6px; padding-right: 6px; font-size: 13px; }
}

/* Mobile/tablet: the transparent header overlapped the page title on inner pages */
@media (max-width: 991px) { .wpo-page-title { padding-top: 130px; min-height: 340px; } }

/* ---------- 4. Buttons ---------- */
.theme-btn { box-shadow: 0 8px 20px rgba(35, 63, 214, .25); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.theme-btn:hover, .theme-btn:focus { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(35, 63, 214, .32); }

.ayra-btn-outline {
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 26px; border-radius: 10px;
    border: 2px solid var(--ayra-primary); color: var(--ayra-primary); font-weight: 600; transition: all .2s ease;
}
.ayra-btn-outline:hover, .ayra-btn-outline:focus { background: var(--ayra-primary); color: #fff; }

/* ---------- 5. Shared cards: consistent radius, equal height, gentle hover ---------- */
.services-section .services-card,
.blog-card {
    border-radius: var(--ayra-radius);
    transition: transform .25s ease, box-shadow .25s ease;
}
.services-section .services-card:hover { transform: translateY(-4px); box-shadow: var(--ayra-shadow-hover); }
.blog-card .image { border-radius: var(--ayra-radius) var(--ayra-radius) 0 0; overflow: hidden; }
.blog-card .image img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; transition: transform .5s ease; }
.blog-card:hover .image img { transform: scale(1.04); }

/* Equal-height cards in a row, "Learn more" pinned to the bottom */
.services-wrap .row > [class*="col"] { display: flex; }
.services-wrap .row > [class*="col"] > .services-card { display: flex; flex-direction: column; width: 100%; }
.services-wrap .services-card > h3:last-child { margin-top: auto; padding-top: 18px; }
.services-wrap .services-card > h3, .services-wrap .services-card > h4 { margin-top: 14px; }
.blog-section > .container > .row > [class*="col"] { display: flex; }
.blog-section .blog-card { display: flex; flex-direction: column; width: 100%; }
.blog-section .blog-card .content { flex: 1; display: flex; flex-direction: column; }
.blog-section .blog-card .content .link { margin-top: auto; }

/* Whole-card click target: the link's ::after covers its positioned card */
.ayra-stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* Home hero: move the photo down so it no longer touches the header phone number */
@media (min-width: 1200px) { .static-hero .image { top: 170px; } }
.static-hero .content .title { margin-bottom: 32px; }

/* About images had a fixed inline 600px height; keep the look on desktop, scale on small screens */
.about-left-content .image img { width: 100%; height: 600px; object-fit: cover; }
@media (max-width: 1023px) { .about-left-content .image img { height: auto; aspect-ratio: 2 / 3; max-height: 560px; } }

/* ---------- 6. Home: projects & technologies grid (replaces the uneven slider) ---------- */
.ayra-projects .section-title { margin-bottom: 50px; }
.ayra-project-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
    margin: 0; padding: 0; list-style: none;
}
.ayra-project-card {
    position: relative; display: flex; flex-direction: column; height: 100%;
    background: #fff; border: 1px solid var(--ayra-border); border-radius: var(--ayra-radius-lg);
    overflow: hidden; box-shadow: var(--ayra-shadow-sm);
    transition: transform .3s var(--ayra-ease), box-shadow .3s var(--ayra-ease), border-color .3s ease;
}
.ayra-project-media { aspect-ratio: 16 / 11; overflow: hidden; background: var(--ayra-surface); }
.ayra-project-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ayra-ease); }
.ayra-project-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.ayra-project-body h3 { font-size: 20px; line-height: 1.35; font-weight: 700; margin: 8px 0 18px; }
.ayra-project-body h3 a { color: var(--ayra-navy); }
.ayra-card-link {
    margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
    color: var(--ayra-primary); font-size: 15px; font-weight: 600;
}
.ayra-card-link i { font-size: 13px; transition: transform .25s ease; }
.ayra-project-card:hover, .ayra-project-card:focus-within {
    transform: translateY(-6px); box-shadow: var(--ayra-shadow-hover); border-color: #d5dcfb;
}
.ayra-project-card:hover .ayra-project-media img { transform: scale(1.06); }
.ayra-project-card:hover .ayra-card-link i { transform: translateX(4px); }
.ayra-project-card:hover h3 a { color: var(--ayra-primary); }

@media (max-width: 1023px) { .ayra-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px)  { .ayra-project-grid { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- 7. Process timeline (home "How We Work", projects "Working Process") ---------- */
.ayra-process { position: relative; background: linear-gradient(180deg, #f3f5ff 0%, #fff 100%); }
.ayra-process .section-title { margin-bottom: 56px; }
.ayra-process .section-title p { max-width: 640px; margin: 14px auto 0; }
.ayra-process-list {
    position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
    margin: 0; padding: 0; list-style: none;
}
/* connector running through the markers */
.ayra-process-list::before {
    content: ""; position: absolute; top: 37px; left: 12.5%; right: 12.5%; height: 2px;
    background: linear-gradient(90deg, var(--ayra-primary), var(--ayra-accent));
    opacity: .35;
}
.ayra-process-step {
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
    margin-top: 38px; padding: 0 24px 30px;
    background: #fff; border: 1px solid var(--ayra-border); border-radius: var(--ayra-radius-lg);
    box-shadow: var(--ayra-shadow-sm);
    transition: transform .3s var(--ayra-ease), box-shadow .3s var(--ayra-ease), border-color .3s ease;
}
.ayra-process-marker {
    position: relative; flex: none; width: 76px; height: 76px; margin-top: -38px; margin-bottom: 20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 6px solid #fff; color: #fff; font-size: 26px;
    background: linear-gradient(135deg, var(--ayra-primary), var(--ayra-navy));
    box-shadow: 0 10px 24px rgba(35, 63, 214, .28);
    transition: transform .3s var(--ayra-ease);
}
.ayra-process-num {
    position: absolute; top: -8px; right: -12px; min-width: 32px; height: 26px; padding: 0 6px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--ayra-accent); color: var(--ayra-navy);
    font-family: "Inter", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.ayra-process-body h3 { font-size: 20px; line-height: 1.35; font-weight: 700; color: var(--ayra-navy); margin: 6px 0 10px; }
.ayra-process-body p { font-size: 16px; line-height: 1.65; margin: 0; }
.ayra-process-step:hover {
    transform: translateY(-6px); box-shadow: var(--ayra-shadow-hover); border-color: #d5dcfb;
}
.ayra-process-step:hover .ayra-process-marker { transform: scale(1.06); }
.ayra-process-cta { text-align: center; margin-top: 50px; }

/* tablet: 2 × 2 grid, no horizontal connector */
@media (max-width: 1023px) {
    .ayra-process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
    .ayra-process-list::before { display: none; }
}
/* mobile: vertical timeline with the marker on the left */
@media (max-width: 767px) {
    .ayra-process .section-title { margin-bottom: 36px; }
    .ayra-process-list { grid-template-columns: 1fr; gap: 18px; }
    .ayra-process-list::before {
        display: block; top: 40px; bottom: 40px; left: 49px; right: auto; width: 2px; height: auto;
        background: linear-gradient(180deg, var(--ayra-primary), var(--ayra-accent));
    }
    .ayra-process-step {
        flex-direction: row; align-items: flex-start; gap: 18px; text-align: left;
        margin-top: 0; padding: 20px;
    }
    .ayra-process-marker { width: 56px; height: 56px; margin: 0; border-width: 4px; font-size: 20px; }
    .ayra-process-num { top: -6px; right: -10px; min-width: 28px; height: 22px; font-size: 11px; }
    .ayra-process-body h3 { font-size: 18px; margin-top: 2px; }
    .ayra-process-body p { font-size: 15px; }
    .ayra-process-cta { margin-top: 36px; }
}

/* About page "Our Approach" slider: keep cards a similar height */
.testimonial-section .testimonial-slider .item p { min-height: 5.4em; }

/* ---------- 8. Home: clients ---------- */
.ayra-clients { background: var(--ayra-surface); }
/* centered flex rows (4 per row, 2 on mobile) so an odd last row never sits off to one side */
.ayra-client-grid {
    --cols: 4; --gap: 20px;
    display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap);
    margin: 44px 0 0; padding: 0; list-style: none;
}
.ayra-client-grid li {
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0;
    height: 128px; padding: 18px 20px; display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--ayra-border); border-radius: var(--ayra-radius);
    transition: transform .3s var(--ayra-ease), box-shadow .3s var(--ayra-ease), border-color .3s ease;
}
/* --logo-w is set per logo in the markup so wide wordmarks and square marks look the same size */
.ayra-client-grid img {
    width: min(var(--logo-w, 140px), 100%); max-height: 76px; height: auto; object-fit: contain;
    transition: transform .3s var(--ayra-ease);
}
.ayra-client-grid li:hover { transform: translateY(-4px); box-shadow: var(--ayra-shadow); border-color: #d5dcfb; }
.ayra-client-grid li:hover img { transform: scale(1.05); }

@media (max-width: 1023px) {
    .ayra-client-grid { --gap: 14px; }
    .ayra-client-grid li { height: 104px; padding: 14px; }
    /* scale every logo by the same factor so the optical balance survives narrow cells */
    .ayra-client-grid img { width: min(calc(var(--logo-w, 140px) * .66), 100%); max-height: 56px; }
}
@media (max-width: 767px) {
    .ayra-client-grid { --cols: 2; margin-top: 32px; }
}

/* ---------- Generic CTA band (inner pages) ---------- */
.ayra-cta-band {
    margin: 40px 0 80px; padding: 48px 32px; border-radius: 20px; text-align: center;
    background: linear-gradient(120deg, var(--ayra-navy), var(--ayra-primary));
    box-shadow: var(--ayra-shadow);
}
.ayra-cta-band h2 { color: #fff; font-size: clamp(26px, 1rem + 1.6vw, 34px); margin-bottom: 10px; }
.ayra-cta-band p { color: rgba(255, 255, 255, .85); margin-bottom: 26px; }
.ayra-cta-band .ayra-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ayra-cta-band .theme-btn { background: #fff; color: var(--ayra-primary); box-shadow: none; }
.ayra-cta-band .theme-btn:after { background: var(--ayra-accent); }
.ayra-cta-band .theme-btn:hover { color: var(--ayra-navy); }
.ayra-cta-band .ayra-btn-outline { border-color: rgba(255, 255, 255, .7); color: #fff; }
.ayra-cta-band .ayra-btn-outline:hover { background: #fff; color: var(--ayra-primary); }
@media (max-width: 575px) { .ayra-cta-band { padding: 36px 20px; } }

/* ---------- 9. Services page ---------- */
.ayra-svc-intro h2 {
    font-size: clamp(28px, 1rem + 2vw, 42px); line-height: 1.2; font-weight: 700;
    color: var(--ayra-navy); margin: 0 0 18px;
}
.ayra-svc-intro p { font-size: 17px; line-height: 1.75; margin: 0; }
.ayra-svc-intro-media { border-radius: 22px; overflow: hidden; box-shadow: var(--ayra-shadow); }
.ayra-svc-intro-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.ayra-svc-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.ayra-svc-jump a {
    display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px;
    border: 1px solid var(--ayra-border); border-radius: 999px; background: #fff;
    color: var(--ayra-navy); font-size: 15px; font-weight: 600; line-height: 1.2;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ayra-svc-jump a i { color: var(--ayra-primary); transition: color .2s ease; }
.ayra-svc-jump a:hover { background: var(--ayra-primary); border-color: var(--ayra-primary); color: #fff; }
.ayra-svc-jump a:hover i { color: #fff; }

.ayra-svc-catalog { background: var(--ayra-surface); }
.ayra-svc-catalog .section-title { margin-bottom: 56px; }
.ayra-svc-group { scroll-margin-top: 110px; }
.ayra-svc-group + .ayra-svc-group { margin-top: 64px; }
.ayra-svc-group-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.ayra-svc-group-num {
    flex: none; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    border-radius: 14px; background: var(--ayra-navy); color: var(--ayra-accent);
    font-family: "Inter", sans-serif; font-size: 18px; font-weight: 700;
}
.ayra-svc-group-head h3 { font-size: clamp(21px, 1rem + .6vw, 26px); font-weight: 700; color: var(--ayra-navy); margin: 0; }
.ayra-svc-group-head p { margin: 4px 0 0; font-size: 16px; }

.ayra-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.ayra-svc-card {
    position: relative; display: flex; flex-direction: column; height: 100%; padding: 30px 28px;
    background: #fff; border: 1px solid var(--ayra-border); border-radius: var(--ayra-radius-lg);
    box-shadow: var(--ayra-shadow-sm); overflow: hidden; scroll-margin-top: 110px;
    transition: transform .3s var(--ayra-ease), box-shadow .3s var(--ayra-ease), border-color .3s ease;
}
.ayra-svc-card::before {   /* accent bar that grows in on hover */
    content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--ayra-primary), var(--ayra-accent));
    transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ayra-ease);
}
.ayra-svc-icon {
    width: 56px; height: 56px; margin-bottom: 22px; display: flex; align-items: center; justify-content: center;
    border-radius: 14px; background: var(--ayra-primary-soft); color: var(--ayra-primary); font-size: 23px;
    transition: background .3s ease, color .3s ease;
}
.ayra-svc-card h4 { font-size: 20px; line-height: 1.35; font-weight: 700; color: var(--ayra-navy); margin: 0 0 12px; }
.ayra-svc-card p { font-size: 15.5px; line-height: 1.75; margin: 0; }
.ayra-svc-card p a { color: var(--ayra-primary); font-weight: 600; position: relative; z-index: 2; }
.ayra-svc-card:hover { transform: translateY(-6px); box-shadow: var(--ayra-shadow-hover); border-color: #d5dcfb; }
.ayra-svc-card:hover::before, .ayra-svc-card:target::before { transform: scaleX(1); }
.ayra-svc-card:hover .ayra-svc-icon { background: var(--ayra-primary); color: #fff; }
.ayra-svc-card:target { border-color: var(--ayra-primary); box-shadow: 0 0 0 4px rgba(35, 63, 214, .12); }

.ayra-svc-tech h2 { font-size: clamp(26px, 1rem + 1.6vw, 38px); font-weight: 700; color: var(--ayra-navy); margin: 0 0 26px; }
.service-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.service-capabilities li {
    display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 10px;
    border: 1px solid var(--ayra-border); background: var(--ayra-surface);
    color: #1f2937; font-size: 15px; font-weight: 600; line-height: 1.35;
}
.service-capabilities li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ayra-accent); }

.ayra-accordion .accordion-item { border: 1px solid var(--ayra-border); border-radius: var(--ayra-radius) !important; overflow: hidden; }
.ayra-accordion .accordion-item + .accordion-item { margin-top: 14px; }
.ayra-accordion .accordion-header { margin: 0; }
.ayra-accordion .accordion-button {
    padding: 20px 24px; font-family: "Inter", sans-serif; font-size: 17px; font-weight: 600;
    color: var(--ayra-navy); background: #fff; box-shadow: none;
}
.ayra-accordion .accordion-button:not(.collapsed) { color: var(--ayra-primary); background: var(--ayra-primary-soft); }
.ayra-accordion .accordion-body { padding: 4px 24px 22px; background: var(--ayra-primary-soft); }
.ayra-accordion .accordion-body p { margin: 0; line-height: 1.7; }

@media (max-width: 1023px) {
    .ayra-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ayra-svc-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .ayra-svc-intro-media img { aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
    .ayra-svc-grid { grid-template-columns: 1fr; gap: 18px; }
    .ayra-svc-group + .ayra-svc-group { margin-top: 48px; }
    .ayra-svc-group-head { align-items: flex-start; }
    .ayra-svc-group-num { width: 44px; height: 44px; font-size: 16px; border-radius: 12px; }
    .ayra-svc-card { padding: 24px 22px; }
    .ayra-svc-jump a { flex: 1 1 100%; justify-content: flex-start; }
}
@media (max-width: 400px) { .service-capabilities { grid-template-columns: 1fr; } }

/* ---------- 10. Projects page ---------- */
.services-section.ayra-tech-intro { padding: 70px 0 10px; }
@media (max-width: 767px) { .services-section.ayra-tech-intro { padding-top: 50px; } }
.ayra-tech-intro .services-card { margin-bottom: 0; }
.ayra-tech-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 24px 0 0; }
.ayra-tech-list li {
    padding: 8px 16px; border: 1px solid #f3c56d; border-radius: 999px; background: #fffaf0;
    color: #7a4b00; font-size: 15px; font-weight: 600; line-height: 1.3;
}

/* ---------- 11. Contact page ---------- */
.ayra-contact-cards {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
    margin: 0 0 90px; padding: 0; list-style: none;
}
.ayra-contact-card {
    display: flex; flex-direction: column; align-items: center; height: 100%; padding: 38px 28px 32px;
    text-align: center; background: #fff; border: 1px solid var(--ayra-border);
    border-radius: 20px; box-shadow: var(--ayra-shadow);
    transition: transform .3s var(--ayra-ease), box-shadow .3s var(--ayra-ease), border-color .3s ease;
}
.ayra-contact-icon {
    flex: none; width: 70px; height: 70px; margin-bottom: 22px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: #fff; font-size: 26px;
    background: linear-gradient(135deg, var(--ayra-primary), var(--ayra-navy));
    box-shadow: 0 0 0 8px var(--ayra-primary-soft);
}
.ayra-contact-card h2 { font-size: 22px; font-weight: 700; color: var(--ayra-navy); margin: 0 0 10px; }
.ayra-contact-card p,
.ayra-contact-card address { font-size: 16px; line-height: 1.65; color: var(--ayra-text); font-style: normal; margin: 0 0 18px; }
.ayra-contact-action {
    margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
    color: var(--ayra-primary); font-size: 16px; font-weight: 600;
}
.ayra-contact-action i { font-size: 13px; transition: transform .25s ease; }
.ayra-contact-action:hover { color: var(--ayra-primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.ayra-contact-action:hover i { transform: translateX(4px); }
.ayra-contact-value { font-size: 17px; overflow-wrap: anywhere; }
.ayra-contact-card:hover { transform: translateY(-6px); box-shadow: var(--ayra-shadow-hover); border-color: #d5dcfb; }

.wpo-contact-pg-section .wpo-contact-form-area { border-radius: 20px; max-width: 960px; margin-left: auto; margin-right: auto; }
.wpo-contact-map iframe { border: 0; }
/* template made the textarea 5px wider than the inputs above it */
.wpo-contact-pg-section form .fullwidth { width: calc(100% - 30px); }
@media (max-width: 600px) { .wpo-contact-pg-section form > div { width: calc(100% - 30px); } }

@media (min-width: 1024px) and (max-width: 1199px) {
    .ayra-contact-card { padding: 34px 20px 28px; }
    .ayra-contact-value { font-size: 16px; }
}
/* tablet & mobile: stacked horizontal cards (icon left) so long values never squeeze */
@media (max-width: 1023px) {
    .ayra-contact-cards { grid-template-columns: 1fr; gap: 16px; max-width: 640px; margin: 0 auto 70px; }
    .ayra-contact-card {
        display: grid; grid-template-columns: 64px 1fr; column-gap: 20px; align-items: start;
        text-align: left; padding: 24px;
    }
    .ayra-contact-icon { grid-row: 1 / span 3; width: 64px; height: 64px; margin: 0; font-size: 24px; box-shadow: 0 0 0 6px var(--ayra-primary-soft); }
    .ayra-contact-card h2 { font-size: 20px; margin: 2px 0 6px; }
    .ayra-contact-card p, .ayra-contact-card address { margin-bottom: 10px; }
    .ayra-contact-action { margin-top: 0; justify-self: start; }
}
@media (max-width: 400px) {
    .ayra-contact-card { grid-template-columns: 52px 1fr; column-gap: 14px; padding: 20px 18px; }
    .ayra-contact-icon { width: 52px; height: 52px; font-size: 20px; }
}

/* ---------- 12. Forms ---------- */
.cta-wrap .cta-form .input-filled input:focus-visible { outline: 3px solid var(--ayra-accent) !important; outline-offset: 2px !important; }
.ayra-form-status { margin-top: 14px; padding: 12px 16px; border-radius: 10px; font-weight: 600; display: none; }
.ayra-form-status.is-visible { display: block; }
.ayra-form-status.is-success { background: #e8f7ee; color: #0f5132; }
.ayra-form-status.is-info { background: #fff7e6; color: #5c3b00; }
.ayra-form-status.is-info a { color: inherit; text-decoration: underline; }
.cta-section .ayra-form-status { flex-basis: 100%; text-align: center; }
.wpo-contact-pg-section form label.error { color: #b42318; font-size: 14px; margin-top: 6px; display: block; }
.ayra-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* nice-select dropdowns in narrow CTA forms were wider than the screen at 320px */
.nice-select .list { max-width: 100%; }
.cta-form .nice-select .list { left: 0; right: 0; min-width: 0; }
.nice-select .option { white-space: normal; line-height: 1.4; padding-top: 10px; padding-bottom: 10px; min-height: 0; }

/* ---------- 13. Footer ---------- */
.wpo-site-footer .about-widget .logo { max-width: 230px; }
.wpo-site-footer .about-widget .logo img { display: block; width: 100%; height: auto; }
.wpo-site-footer .contact-widget ul li a,
.wpo-site-footer .contact-widget ul li address { color: inherit; }
.wpo-site-footer .contact-widget ul li address { display: inline; font-style: normal; margin: 0; }
.wpo-site-footer .contact-widget ul li a { overflow-wrap: anywhere; }
.wpo-site-footer .contact-widget ul li a:hover,
.wpo-site-footer .link-widget ul li a:hover { color: var(--ayra-accent); }

/* ---------- 14. Misc & motion ---------- */
/* Custom cursor: hidden until the mouse actually moves, never on touch devices */
.cursor, .cursor2 { opacity: 0; transition: opacity .3s; }
body.ayra-mouse .cursor, body.ayra-mouse .cursor2 { opacity: 1; }
body.ayra-mouse .cursor2 { opacity: .3; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor2 { display: none !important; } }

/* Preloader safety net: never cover the page for more than ~1.5s, even on slow
   connections where the deferred JavaScript takes a while to arrive. */
.preloader { animation: ayra-preloader-out .3s ease 1.2s forwards; }
@keyframes ayra-preloader-out { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .cursor, .cursor2 { display: none !important; }
}