/* --- masthead ---------------------------------------------------------------

   images/logo.webp is cropped to the wordmark itself. The original file
   carried roughly 40% of its own height as baked-in white margin, so no
   amount of CSS could pull the bar in around it; the padding here only ever
   added to margin that was already in the pixels.

   With the artwork tight, the bar's own padding is the only spacing left, and
   the logo can sit smaller while reading larger than it did before. */

/* The padding lives on .nav-bar, not on <nav>. The mobile panel is a sibling
   of the bar, so anything padding <nav> would wrap the panel too and the bar
   would lose the space under its own logo the moment the menu opened. */
.site-nav {
    padding: 0;
}

/* Wider than the max-w-7xl track the page content runs on, so the bar reads as
   the page's frame rather than as another column of body copy. Below 96rem it
   fills the viewport less its gutter. */
.nav-bar {
    max-width: 96rem;
    padding: 0.875rem 1.25rem;
}

.logo-container {
    padding: 0;
}

.nav-logo {
    display: block;
    height: 3.25rem;
    width: auto;
    object-fit: contain;
}

@media (min-width: 768px) {
    .nav-bar {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    .nav-logo {
        height: 3.75rem;
    }
}

@media (min-width: 1280px) {
    .nav-bar {
        padding-left: 3.5rem;
        padding-right: 3.5rem;
    }
}

/* --- desktop destinations dropdown -------------------------------------------

   Twenty countries in a 13rem column meant a scrolling list inside a hover
   panel: the pointer had to stay inside the panel to scroll it, and half the
   list was out of sight until it did. Three columns fit all twenty at once, so
   there is nothing to scroll.

   Anchored right, because the trigger sits near the end of the bar and a panel
   this wide opening left-to-right would run off the viewport. */

.nav-mega {
    width: max-content;
    max-width: min(44rem, calc(100vw - 4rem));
    padding: 0.875rem;
    border: 1px solid #e7ebf2;
    border-radius: 0.875rem;
    box-shadow: 0 24px 48px -24px rgba(15, 33, 139, 0.35),
                0 2px 6px rgba(15, 33, 139, 0.05);
}

/* Bridges the gap between the trigger and the panel, so crossing it does not
   drop the hover and close the menu under the pointer. */
.nav-mega::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 0.75rem;
}

.nav-mega-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(8.5rem, 1fr));
    gap: 0.125rem 0.75rem;
}

.nav-mega-grid a {
    display: block;
    padding: 0.4375rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: #545e6f;
    white-space: nowrap;
    transition: background-color 160ms ease, color 160ms ease;
}

.nav-mega-grid a:hover {
    background-color: #f3f6fb;
    color: #0F218B;
}

/* --- mobile menu ------------------------------------------------------------

   Opened by animating the panel's single row track between 0fr and 1fr, so it
   runs to whatever the content measures with no hard-coded height and nothing
   to keep in sync when a link is added. The same mechanism nests one level
   down for the three drawers. */

.mobile-menu {
    display: grid;
    grid-template-rows: 0fr;
    border-top: 1px solid transparent;
    transition: grid-template-rows 380ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 380ms linear;
}

.mobile-menu.is-open {
    grid-template-rows: 1fr;
    border-top-color: #e5e7eb;
}

.mobile-menu-inner {
    overflow: hidden;
    min-height: 0;
}

@media (min-width: 768px) {
    .mobile-menu {
        display: none;
    }
}

/* Matches .nav-bar's gutter so the menu lines up under the logo. */
.mobile-menu-inner > * {
    margin-inline: 1.25rem;
}

.mobile-menu-inner > *:first-child {
    margin-top: 0.5rem;
}

.mobile-menu-inner > *:last-child {
    margin-bottom: 1.25rem;
}

.mobile-link,
.mobile-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 0;
    border: 0;
    border-bottom: 1px solid #eef0f4;
    background: none;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #3f4757;
    text-align: left;
    cursor: pointer;
}

.mobile-group-toggle {
    width: 100%;
}

.mobile-link:active,
.mobile-group-toggle:active {
    color: #0F218B;
}

.mobile-group-toggle[aria-expanded="true"] {
    color: #0F218B;
}

.mobile-group-icon {
    flex-shrink: 0;
    margin-left: 1rem;
    font-size: 0.75rem;
    color: #9aa3b2;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
                color 200ms linear;
}

.mobile-group-toggle[aria-expanded="true"] .mobile-group-icon {
    transform: rotate(180deg);
    color: #006A4E;
}

.mobile-group-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 340ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-group-panel.is-open {
    grid-template-rows: 1fr;
}

.mobile-group-links {
    overflow: hidden;
    min-height: 0;
}

.mobile-group-links a {
    display: block;
    padding: 0.625rem 0 0.625rem 0.875rem;
    font-size: 0.9375rem;
    color: #6b7280;
}

.mobile-group-links > :first-child {
    padding-top: 0.75rem;
}

.mobile-group-links > :last-child {
    padding-bottom: 1rem;
}

/* Twenty destinations in one column would be a 900px scroll. */
.mobile-group-links-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.75rem;
}

.mobile-group-links-split > :nth-child(2) {
    padding-top: 0.75rem;
}

.mobile-group-links-split > :nth-last-child(2) {
    padding-bottom: 1rem;
}

.mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0.875rem 1.25rem;
    border-radius: 9999px;
    background-color: #0F218B;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
}

.mobile-cta:active {
    background-color: #006A4E;
}

/* The burger crosses out when the menu is open. */
.mobile-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: -0.5rem;
    border: 0;
    background: none;
    color: #4b5563;
    font-size: 1.25rem;
    cursor: pointer;
}

/* Drawn in CSS rather than set as a Font Awesome glyph. The icon sheet is
   loaded non-blocking, so an <i class="fa-bars"> renders as nothing at all
   until it arrives -- on a cold load that left the only control for opening
   the menu invisible. Three bars from one element and its two pseudo-elements
   need no font, no request and no JS to paint. */
.burger,
.burger::before,
.burger::after {
    display: block;
    width: 1.375rem;
    height: 2px;
    border-radius: 1px;
    background-color: currentColor;
}

.burger {
    position: relative;
    transition: background-color 200ms ease;
}

.burger::before,
.burger::after {
    content: '';
    position: absolute;
    left: 0;
    transition: transform 200ms ease;
}

.burger::before { top: -0.4375rem; }
.burger::after  { top:  0.4375rem; }

/* Open: the middle bar drops out and the outer two cross. */
.mobile-menu-button[aria-expanded="true"] .burger {
    background-color: transparent;
}

.mobile-menu-button[aria-expanded="true"] .burger::before {
    transform: translateY(0.4375rem) rotate(45deg);
}

.mobile-menu-button[aria-expanded="true"] .burger::after {
    transform: translateY(-0.4375rem) rotate(-45deg);
}

.mobile-menu-button:focus-visible,
.mobile-group-toggle:focus-visible,
.mobile-link:focus-visible,
.mobile-cta:focus-visible {
    outline: 2px solid #0F218B;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-menu,
    .mobile-group-panel,
    .mobile-group-icon,
    .burger,
    .burger::before,
    .burger::after {
        transition: none;
    }
}


/* Custom styles for VisaConsult website */

/* Inter is loaded via <link rel="stylesheet"> in each page's <head>, alongside
   a preconnect. An @import here would serialise the requests: the browser has
   to download and parse styles.css before it even discovers the font CSS. */

body {
    font-family: 'Inter', sans-serif;
}

/* Hero section slider and overlay styles */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    transition: opacity 700ms ease-in-out;
}

.hero-slide.is-active {
    opacity: 1;
}

/* A flat wash would flatten the first banner, which is already deep navy.
   The gradient puts the weight behind the headline and lets the artwork
   breathe at the top and bottom edges. */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.35) 0%,
        rgba(0, 0, 0, 0.55) 45%,
        rgba(0, 0, 0, 0.45) 100%
    );
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
}

/* Both lines occupy the same grid cell, so the heading keeps the height of the
   taller one and nothing below it shifts when the slide turns.

   minmax(0, 1fr) rather than the default auto, so the column is always free to
   shrink below the longest line's max-content width and the text wraps rather
   than pushing the box wider. Pairs with the width below, which pins the
   heading to its max-w-5xl track instead of letting it size to whichever line
   happens to be showing. */
.hero-headline {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;

    /* Type follows the reference landing page: bold and set large, with the
       lines stacked close so the headline reads as one solid block rather
       than three loosely spaced sentences.

       Declared here rather than with Tailwind utilities because every text-*
       class ships its own line-height, so text-5xl and leading-tight fight
       over the same property and the winner depends on the order they happen
       to land in the built stylesheet. styles.css loads last, so this settles
       it. */
    font-size: clamp(1.75rem, 4.25vw, 3.375rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
}

.hero-line {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 700ms ease-in-out;
    text-wrap: balance;
}

.hero-line.is-active {
    opacity: 1;
}

/* Brighter than the brand green (#006A4E), which reads as near-black against
   these two dark photographs. */
.hero-accent {
    color: #2ECC40;
}

/* The slider stops auto-advancing in script.js; this drops the fade so a swipe
   swaps outright rather than dissolving. */
@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .hero-line {
        transition: none;
    }
}

/* Why Choose Us section - Desktop Grid */
.why-choose-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 767px) {
    .why-choose-grid {
        display: none;
    }
}

/* Why Choose Us section - Mobile Swiper */
.swiper-container {
    display: none;
}

@media (max-width: 767px) {
    .swiper-container {
        display: block;
    }
}

/* Enhanced card styling for Why Choose Us section */
.why-choose-card {
    background-color: #fcfcfc; /* bg-gray-25 - almost white */
    border: 1px solid #e5e7eb; /* light gray border */
    border-radius: 1rem; /* rounded corners */
    padding: 2rem; /* generous internal padding */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm - most subtle */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.why-choose-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

/* Mobile slider touch handling */
.swiper-container {
    touch-action: pan-y pinch-zoom;
    overflow: hidden;
    position: relative;
}

/* Pagination dots for Why Choose Us section */
.swiper-container .swiper-pagination {
    position: relative;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-container .swiper-pagination .swiper-pagination-bullet {
    width: 0.75rem;
    height: 0.75rem;
    background-color: #d1d5db;
    opacity: 1;
    margin: 0 0.25rem;
    transition: all 0.3s ease;
    border-radius: 50%;
}

.swiper-container .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #0F218B;
    transform: scale(1.2);
}

.swiper-wrapper {
    touch-action: pan-y pinch-zoom;
}

.swiper-slide {
    touch-action: pan-y pinch-zoom;
    width: 100%;
    height: auto;
}

/* Prevent vertical scrolling when swiping horizontally on mobile */
@media (max-width: 767px) {
    .swiper-container {
        touch-action: pan-x pan-y;
    }
    
    .swiper-wrapper {
        touch-action: pan-x pan-y;
    }
    
    .swiper-slide {
        touch-action: pan-x pan-y;
    }
}

/* Smooth transitions for interactive elements */
.interactive-element {
    transition: all 0.3s ease;
}

.interactive-element:hover {
    transform: scale(1.05);
}

/* Custom button styles */
.btn-primary {
    background-color: #F97316;
    color: white;
    font-weight: bold;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: #ea580c;
    transform: scale(1.05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn-secondary {
    border: 2px solid #006A4E;
    color: #006A4E;
    background-color: transparent;
    font-weight: bold;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: #f0fdf4;
    transform: scale(1.05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

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

   A neutral grey band rather than the blue-tinted one it replaces, so it reads
   as the page's floor instead of as another brand surface.

   The columns are deliberately uneven. Destinations is the longest list the
   firm has and padding the others out to match it would only invent links; the
   grid instead orders them long to short and closes with the social block, so
   the descending edge looks composed. The headings sit on a shared baseline
   because the grid rows align, which is what actually makes uneven columns
   read as intentional.
   --------------------------------------------------------------------------- */

.site-footer {
    background-color: #f1f2f4;
    border-top: 1px solid #e2e4e8;
    padding: 4.5rem 1.5rem 3rem;
}

.footer-inner {
    max-width: 80rem;
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem 2rem;
}

@media (min-width: 640px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3rem;
    }
}

.footer-heading {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: #0F218B;
    margin-bottom: 1.125rem;
}

/* The second heading in the last column, under the two links above it. */
.footer-heading-follow {
    margin-top: 2.25rem;
}

.footer-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-list a {
    display: inline-block;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: #545e6f;
    transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-list a:hover,
.footer-list a:focus-visible {
    color: #006A4E;
}

/* --- follow us ------------------------------------------------------------ */

.footer-social {
    display: flex;
    gap: 0.625rem;
}

/* Filled discs in the brand navy, the way the reference footer sets them:
   the glyph is knocked out of the colour rather than drawn on a white chip. */
.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: #0F218B;
    color: #ffffff;
    font-size: 1.0625rem;
    transition: background-color 240ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Darken rather than switch hue. The brand green is close enough to the navy
   in value that swapping between them read as a muddy shift with the white
   glyph losing contrast; going deeper only ever raises it. */
.footer-social-link:hover {
    background-color: #0A1663;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -8px rgba(10, 22, 99, 0.6);
}

.footer-social-link:focus-visible {
    outline: 2px solid #0F218B;
    outline-offset: 3px;
}

/* --- bottom bar ----------------------------------------------------------- */

/* Centred on the block, with both lines sharing one measure so their left and
   right edges land together instead of the short copyright sitting over a
   disclaimer running twice as wide.

   Both lines take the footer links' size and weight; the copyright used to be
   set bolder and darker, which read as a different typeface sitting under the
   columns rather than as the same one turned down. */
.footer-bottom {
    margin-top: 3.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid #e2e4e8;
    text-align: center;
}

.footer-copyright,
.footer-disclaimer {
    max-width: 46rem;
    margin-inline: auto;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.7;
    color: #7b8494;
    text-wrap: pretty;
}

.footer-disclaimer {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: #8d95a3;
}

/* Floating WhatsApp Button */
.whatsapp-fab {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.whatsapp-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Meet Our Team Section Styles */
.team-swiper-container {
    position: relative;
    padding: 0 60px;
}

.team-swiper {
    overflow: hidden;
    border-radius: 1rem;
}

/* Team Member Card */
.team-member-card {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    padding: 2rem;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.team-member-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Team Member Image */
.team-member-image-container {
    margin-bottom: 1.5rem;
    position: relative;
}

.team-member-image {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #f3f4f6;
    transition: all 0.3s ease;
}

.team-member-card:hover .team-member-image {
    border-color: #0F218B;
    transform: scale(1.05);
}

/* Team Member Info */
.team-member-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.team-member-name {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #0F218B;
    transition: color 0.3s ease;
}

.team-member-card:hover .team-member-name {
    color: #1e40af;
}

.team-member-title {
    font-size: 1rem;
    color: #696969;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

/* Social Media Links */
.team-member-social {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #f3f4f6;
    color: #696969;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

.social-link:hover {
    background-color: #0F218B;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 33, 139, 0.3);
}

/* Swiper Navigation Buttons */
.team-swiper-button-prev,
.team-swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3rem;
    height: 3rem;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    color: #0F218B;
    font-size: 1rem;
}

.team-swiper-button-prev {
    left: 0;
}

.team-swiper-button-next {
    right: 0;
}

.team-swiper-button-prev:hover,
.team-swiper-button-next:hover {
    background-color: #0F218B;
    color: white;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(15, 33, 139, 0.3);
}

.team-swiper-button-prev:active,
.team-swiper-button-next:active {
    transform: translateY(-50%) scale(0.95);
}

/* Swiper Pagination */
.team-swiper-pagination {
    position: relative;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.team-swiper-pagination .swiper-pagination-bullet {
    width: 0.75rem;
    height: 0.75rem;
    background-color: #d1d5db;
    opacity: 1;
    margin: 0 0.25rem;
    transition: all 0.3s ease;
}

.team-swiper-pagination .swiper-pagination-bullet-active {
    background-color: #0F218B;
    transform: scale(1.2);
}

/* Responsive Design for Team Section */
@media (max-width: 1024px) {
    .team-swiper-container {
        padding: 0 50px;
    }
    
    .team-member-card {
        min-height: 380px;
    }
}

@media (max-width: 768px) {
    .team-swiper-container {
        padding: 0 40px;
    }
    
    .team-member-card {
        min-height: 360px;
        padding: 1.5rem;
    }
    
    .team-member-image {
        width: 7rem;
        height: 7rem;
    }
    
    .team-member-name {
        font-size: 1.125rem;
    }
    
    .team-member-title {
        font-size: 0.875rem;
    }
    
    .team-swiper-button-prev,
    .team-swiper-button-next {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 640px) {
    .team-swiper-container {
        padding: 0 30px;
    }
    
    .team-member-card {
        min-height: 340px;
        padding: 1.25rem;
    }
    
    .team-member-image {
        width: 6rem;
        height: 6rem;
    }
    
    .team-member-social {
        gap: 0.75rem;
    }
    
    .social-link {
        width: 2rem;
        height: 2rem;
        font-size: 0.75rem;
    }
}

/* Swiper Slide Responsive Settings */
@media (min-width: 1024px) {
    .team-swiper .swiper-slide {
        width: calc(33.333% - 1rem);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .team-swiper .swiper-slide {
        width: calc(50% - 1rem);
    }
}

@media (max-width: 767px) {
    .team-swiper .swiper-slide {
        width: 100%;
    }
}

/* Accordion Styles for About Page */

.accordion-item {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-item:hover {
    border-color: #006A4E;
    box-shadow: 0 2px 8px rgba(0, 106, 78, 0.1);
}

.accordion-header {
    width: 100%;
    padding: 1.5rem;
    background-color: white;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}

.accordion-header:hover {
    background-color: #f9fafb;
}

.accordion-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    transition: color 0.3s ease;
}

.accordion-header:hover .accordion-title {
    color: #006A4E;
}

.accordion-icon {
    font-size: 0.875rem;
    color: #6b7280;
    transition: all 0.3s ease;
}

.accordion-header:hover .accordion-icon {
    color: #006A4E;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
    color: #006A4E;
}

.accordion-item.active .accordion-title {
    color: #006A4E;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 !important;
    margin: 0;
    transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
    background-color: #f9fafb;
    opacity: 0;
}

.accordion-item.active .accordion-content {
    max-height: 1000px;
    padding: 0 1.5rem 1.5rem 1.5rem !important;
    opacity: 1;
}

/* Experience Badge Animation */
.experience-badge {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/*
.w-16 h-1 rounded-full mx-auto mb-8 {
    display: none;
}
*/


.href-link{
    color:  rgb(88, 177, 255);
}
.ha{
    color:  rgb(88, 177, 255);
}

/* Masthead hover colour. Previously two JS listeners per link writing inline
   styles; CSS does it without touching the main thread.

   Scoped to .site-nav, not to every <nav>: the footer's link columns are a
   <nav> too, and an unscoped rule repainted the white social glyphs navy on
   hover, on a navy disc. */
.site-nav a:hover {
    color: #0F218B;
}

/* Scroll reveal. Only elements JS has opted in (below the first viewport) get
   .reveal, so above-the-fold content is never hidden and paints immediately. */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}

.reveal-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* ---------------------------------------------------------------------------
   How It Works -- the process ledger

   Four columns hanging off one continuous hairline. At lg the grid's column
   gap collapses to 0, so each item's border-t butts against the next and the
   four rules read as a single line across the page.

   Everything here is decoration layered on top of markup that is already
   readable without it: with CSS or JS unavailable the section is a plain
   ordered list of four headed blocks.
   --------------------------------------------------------------------------- */

.process-tick {
    position: absolute;
    top: -1px;            /* sit on the border, not below it */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #0F218B;
    transform: scaleX(0.16);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scale rather than width so the animation stays on the compositor and never
   triggers layout. */
.process-step:hover .process-tick {
    transform: scaleX(1);
}

/* The leading zero is a 30% tint of the brand navy. It is aria-hidden and
   carries no information -- the <ol> conveys the sequence -- so its low
   contrast is decorative, not a readability failure. */
.process-zero {
    color: #B3B9D9;
    transition: color 0.3s ease;
}

.process-step:hover .process-zero {
    color: #0F218B;
}

/* Stagger the columns in as the section reveals. Scoped under .reveal, which
   script.js only adds to sections below the fold -- so if JS is blocked or
   reduced motion is set, these selectors never match and the steps are simply
   visible from the start. */
.reveal .process-step {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-visible .process-step {
    opacity: 1;
    transform: none;
}

.reveal-visible .process-step:nth-child(2) { transition-delay: 80ms; }
.reveal-visible .process-step:nth-child(3) { transition-delay: 160ms; }
.reveal-visible .process-step:nth-child(4) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
    .process-tick {
        transform: scaleX(1);
        transition: none;
    }

    .reveal .process-step,
    .reveal-visible .process-step {
        opacity: 1;
        transform: none;
        transition: none;
        transition-delay: 0ms;
    }
}

/* The stage mark. Large enough to balance the 60px numeral opposite it, tinted
   back so it reads as a quiet counterweight rather than competing with it. */
.process-mark {
    color: #006A4E;
    opacity: 0.28;
    transition: opacity 0.3s ease;
    line-height: 1;
}

.process-step:hover .process-mark {
    opacity: 0.6;
}

/* ---------------------------------------------------------------------------
   Client reviews

   One review leads, set open on the page the way a pull quote runs in print,
   with the Google figures beside it in the only solid block in the section.
   The contrast between the two is the composition: airy type on the left,
   a dense data panel on the right. The rest of the reviews are collapsed
   underneath and opened from that panel.
   --------------------------------------------------------------------------- */

.review-section {
    padding: 6rem 1.5rem;
    background:
        radial-gradient(48rem 26rem at 8% 0%, rgba(15, 33, 139, 0.055) 0%, transparent 60%),
        radial-gradient(42rem 24rem at 96% 100%, rgba(0, 106, 78, 0.07) 0%, transparent 60%),
        linear-gradient(180deg, #f7f9fc 0%, #ffffff 55%, #f5faf8 100%);
}

/* The quote gets the wider track. Below lg the panel drops under it. */
.review-layout {
    display: grid;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .review-layout {
        grid-template-columns: minmax(0, 1.55fr) minmax(20rem, 1fr);
        gap: 4.5rem;
        align-items: start;
    }
}

/* --- the lead review ------------------------------------------------------ */

.review-featured {
    margin: 0;
    max-width: 44rem;
}

/* A real opening quote, sized as a mark rather than as punctuation. Sits on
   its own line above the text so the first word of the quote still starts on
   the left margin. */
.review-mark {
    display: block;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 5rem;
    line-height: 0.55;
    color: #006A4E;
    opacity: 0.28;
}

.review-quote {
    margin: 0;
    font-size: clamp(1.25rem, 2.1vw, 1.75rem);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -0.011em;
    color: #17203c;
    text-wrap: pretty;
}

.review-attrib {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid #e4e9f1;
}

.review-avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #ffffff;
    background: linear-gradient(140deg, #0F218B 0%, #006A4E 100%);
}

.review-who {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
}

.review-name {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0F218B;
    line-height: 1.3;
}

.review-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #8a93a5;
}

/* --- rating panel --------------------------------------------------------- */

.review-rating {
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid #e6ebf3;
    background-color: #ffffff;
    box-shadow:
        0 1px 2px rgba(15, 33, 139, 0.04),
        0 28px 56px -40px rgba(15, 33, 139, 0.5);
}

.review-rating-head {
    padding: 1.75rem 1.5rem 1.5rem;
    text-align: center;
    color: #ffffff;
    background:
        radial-gradient(18rem 11rem at 82% -25%, rgba(255, 255, 255, 0.2) 0%, transparent 70%),
        linear-gradient(140deg, #0F218B 0%, #123199 48%, #006A4E 100%);
}

/* Says where the number comes from, in the panel that shows it. */
.review-source-line {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.25rem 0.75rem;
    margin-bottom: 0.875rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.15);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.review-score {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
}

.review-score span {
    font-size: 1.0625rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.58);
    letter-spacing: 0;
}

.review-stars {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin: 0.75rem 0 0.5rem;
    color: #FBBF24;
    font-size: 0.9375rem;
}

.review-score-meta {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.8);
}

.review-rating-body {
    padding: 1.5rem;
}

.review-topics-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #006A4E;
    margin-bottom: 1.125rem;
}

.review-topics {
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
    margin-bottom: 1.5rem;
}

.review-topic-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
    color: #374151;
}

/* The count Google reports for each topic. */
.review-topic-count {
    flex-shrink: 0;
    min-width: 1.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    background-color: #f3f6fb;
    border: 1px solid #e3e9f2;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0F218B;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Bars are scaled against the most-mentioned topic, not against the review
   count -- Google reports the tags, not what share of reviews they cover. */
.review-bar {
    height: 0.375rem;
    margin-top: 0.5rem;
    border-radius: 9999px;
    background-color: #eef1f7;
    overflow: hidden;
}

.review-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0F218B 0%, #006A4E 100%);
}

.review-topic:nth-child(2) .review-bar-fill {
    background: linear-gradient(90deg, #006A4E 0%, #22C55E 100%);
}

.review-topic:nth-child(3) .review-bar-fill {
    background: linear-gradient(90deg, #D97706 0%, #FBBF24 100%);
}

.review-topic:nth-child(4) .review-bar-fill {
    background: linear-gradient(90deg, #2563EB 0%, #38BDF8 100%);
}

/* The bars draw themselves the first time the chart is scrolled into view.
   JS adds .is-charting; without it they are simply already at width. */
.review-topics.is-charting .review-bar-fill {
    transform: scaleX(0);
    transform-origin: left center;
    animation: review-bar-draw 900ms cubic-bezier(0.22, 0.8, 0.25, 1) forwards;
}

.review-topics.is-charting .review-topic:nth-child(2) .review-bar-fill { animation-delay: 120ms; }
.review-topics.is-charting .review-topic:nth-child(3) .review-bar-fill { animation-delay: 240ms; }
.review-topics.is-charting .review-topic:nth-child(4) .review-bar-fill { animation-delay: 360ms; }

@keyframes review-bar-draw {
    to { transform: scaleX(1); }
}

/* --- the two actions in the panel ----------------------------------------- */

.review-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    padding-top: 1.25rem;
    border-top: 1px solid #eef1f7;
}

.review-expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.8125rem 1rem;
    border: 0;
    border-radius: 9999px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #ffffff;
    background-color: #0F218B;
    cursor: pointer;
    transition: background-color 260ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.review-expand:hover {
    background-color: #006A4E;
    box-shadow: 0 14px 24px -16px rgba(0, 106, 78, 0.95);
}

.review-expand:focus-visible {
    outline: 2px solid #0F218B;
    outline-offset: 3px;
}

.review-expand-icon {
    font-size: 0.75rem;
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.review-expand[aria-expanded="true"] .review-expand-icon {
    transform: rotate(180deg);
}

.review-google-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6b7280;
    transition: color 200ms ease;
}

.review-google-link:hover {
    color: #006A4E;
}

.review-google-link i {
    font-size: 0.6875rem;
}

/* --- the rest of the reviews ---------------------------------------------- */

/* Collapsed by animating the row track rather than a height, so the panel
   opens to whatever the content actually measures. */
.review-all {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 480ms cubic-bezier(0.16, 1, 0.3, 1);
}

.review-all-inner {
    overflow: hidden;
    min-height: 0;
}

.review-all.is-open {
    grid-template-rows: 1fr;
}

.review-all-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 3.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #e4e9f1;
}

.review-all-note {
    font-size: 0.875rem;
    color: #6b7280;
}

/* Columns rather than a card grid: the quotes run to very different lengths
   and a row of equal boxes would have to pad the short ones out to match. */
.review-columns {
    margin-top: 2rem;
    columns: 1;
    column-gap: 3rem;
}

@media (min-width: 768px) {
    .review-columns {
        columns: 2;
    }
}

@media (min-width: 1280px) {
    .review-columns {
        columns: 3;
    }
}

.review-item {
    break-inside: avoid;
    margin: 0 0 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e9edf4;
}

.review-item blockquote {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.75;
    color: #3f4a60;
}

.review-item figcaption {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.review-item-name {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0F218B;
}

/* The route the reviewer named. Reviews that named none carry no tag. */
.review-tag {
    padding: 0.1875rem 0.5625rem;
    border-radius: 9999px;
    background-color: #e8f4ef;
    color: #006A4E;
    font-size: 0.6875rem;
    font-weight: 600;
}

@media (max-width: 640px) {
    .review-section {
        padding: 4rem 1.5rem;
    }

    .review-mark {
        font-size: 3.75rem;
    }

    .review-quote {
        line-height: 1.6;
    }
}

@media (prefers-reduced-motion: reduce) {
    .review-all,
    .review-expand,
    .review-expand-icon {
        transition: none;
    }

    .review-topics.is-charting .review-bar-fill {
        animation: none;
        transform: none;
    }
}