/*
 * Modern theme for Hasty Corp
 *
 * Inspired by research into current web‑design trends and Indian cloud partner sites.
 * Uses a fresh colour palette centred on classic dark blue, turquoise and a warm gold accent,
 * combined with plenty of off‑white space to improve readability and visual hierarchy.
 * Typography has been upgraded to the Inter typeface for a clean, modern appearance.
 */

/* Import the Inter font from Google Fonts for improved readability */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Define CSS variables for the new colour palette */
:root {
    /* Brand palette extracted from the logo (blue-first theme) */
    --color-dark: #0C2F54;        /* deep navy */
    --color-primary: #266093;     /* primary blue */
    --color-accent: #75B0CA;      /* light blue accent */
    --color-light: #F7FAFC;       /* off‑white background */
    --color-neutral: #E6F1F7;     /* light blue/grey section background */
    --color-text-dark: #0C2F54;   /* primary text */
    --color-text-light: #ffffff;  /* text on dark backgrounds */
    --color-border: #D7E6F0;      /* soft border */

    /* Soft gradients/tints for hero + cards (kept subtle, still on-brand) */
    --color-hero-start: #EAF4FB;  /* very light blue */
    --color-hero-end:   #D7EAF6;  /* slightly deeper light blue */

    /* Statistic/feature card backgrounds (on-brand tints) */
    --color-stat1: #EAF4FB;
    --color-stat2: #DDEEF8;
    --color-stat3: #D1E8F4;
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    background-color: var(--color-light);
    color: var(--color-text-dark);
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Top bar */
.top-bar {
    background-color: var(--color-dark);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.top-bar .contact-info {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    align-items: center;
}

.top-bar .contact-item {
    display: flex;
    align-items: center;
}

/* Header */
header {
    background-color: var(--color-dark);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/*
 * Use a three‑column grid for the header so that the navigation sits neatly in
 * the centre of the available space. The logo occupies the first column and
 * the call to action occupies the last column. The middle column takes up
 * the remaining width and allows the navigation to be centred. This
 * arrangement improves perceived balance and alignment across large screens.
 */
header .container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 1rem 0;
}

.logo {
    display: flex;
    align-items: center;
    font-size: 1.8rem;
    font-weight: 600;
}

.logo-image {
    height: 40px;
    width: auto;
    margin-right: 0.5rem;
}

.logo span {
    color: var(--color-text-light);
}

nav ul {
    display: flex;
    list-style: none;
    /* Ensure the nav list spans the full width of the middle column so that
     * justify-content can align the items to the right */
    width: 100%;
    justify-content: flex-end;
}

/* Allow the navigation to take up remaining space in the header so items can be centred */
nav {
    flex: 1;
}

nav ul li {
    margin-left: 1.5rem;
}

nav ul li a {
    text-decoration: none;
    color: rgba(6, 24, 42, 0.95) !important;
    padding: 0.5rem 1rem;
    transition: color 0.3s ease;
    font-weight: 500;
}

nav ul li a:hover {
    color: #2AA9FF !important;
}

/* Header CTA */
.cta {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.cta:hover {
    background-color: var(--color-accent);
}

/* Hero */
.hero {
    background: url("assets/hero-cloud.jpg") no-repeat center center;
    background-size: cover;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 6rem 0;
    color: var(--color-dark);
}


.hero-content {
    max-width: 600px;
    margin-left: auto;
    margin-right: 0.1%;
    text-align: left;
}

.hero h1 {
    font-size: 2.75rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    font-weight: 600;
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: 50px;
    /* Use a slightly muted dark colour for the supporting copy on the light
     * hero background. An 80% opacity helps soften the appearance without
     * sacrificing contrast.
     */
    color: rgba(10,24,40,0.8);
}

/* Primary button used across the site */
.btn {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: 0.8rem 2rem;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: inline-block;
}

/* Include a subtle arrow inside buttons when present */
.btn .arrow {
    margin-left: 0.5rem;
    font-size: 1.2em;
    vertical-align: middle;
}

.btn:hover {
    background-color: var(--color-accent);
    color: var(--color-dark);
}

/* Trust/Stats */
.trust {
    /* Use the off‑white background for the stats section to let the pastel
     * statistic cards stand out on their own. This helps break up the page
     * visually without adding too much colour noise.
     */
    background-color: var(--color-light);
    padding: 4rem 0;
    text-align: center;
}

.trust h2 {
    margin-bottom: 2rem;
    color: var(--color-dark);
    font-weight: 600;
}

.stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.stat {
    /* Style each stat as a card with its own pastel background. A subtle
     * shadow and rounded corners add depth similar to feature cards on
     * Embee’s homepage.  The width is reduced slightly so all three fit
     * comfortably across larger screens and wrap on smaller screens.
     */
    margin: 1rem 1rem;
    text-align: center;
    padding: 1.5rem;
    border-radius: 10px;
    background-color: var(--color-stat1);
    color: var(--color-dark);
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.stat .number {
    font-size: 2.5rem;
    font-weight: 600;
    /* Use dark text for numbers on light pastel backgrounds */
    color: var(--color-dark);
    display: block;
}

.stat .label {
    font-size: 1rem;
    color: var(--color-dark);
}

/* Assign unique pastel backgrounds to each statistic card for variety */
.stats .stat:nth-child(2) {
    background-color: var(--color-stat2);
}

.stats .stat:nth-child(3) {
    background-color: var(--color-stat3);
}

/* Partners */
.partners {
    background-color: var(--color-neutral);
    padding: 3rem 0;
    text-align: center;
}

.partners h2 {
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    color: var(--color-dark);
    font-weight: 600;
}

/* Partners description beneath the heading.  
 * A slightly larger font size and centred max‑width helps communicate the
 * value of our partnerships. We keep the colour dark for contrast on the
 * neutral background. */
.partners-description {
    max-width: 700px;
    margin: 0 auto 2rem auto;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--color-dark);
}

/* Benefits section
 * This section replaces the statistics/trust bar with a more appropriate set of 
 * value propositions for a startup. It highlights expertise, certification and 
 * a startup‑friendly approach, reflecting guidelines that startups should build
 * trust through unique value, team credibility and clear positioning rather
 * than inflated metrics【468513878809325†L224-L280】.
 */
.benefits {
    background-color: var(--color-light);
    padding: 4rem 0;
    text-align: center;
    color: var(--color-dark);
}

.benefits h2 {
    margin-bottom: 2rem;
    font-size: 2rem;
    font-weight: 600;
}
.benefits-subtitle {
    max-width: 640px;
    margin: 0 auto 2rem;
    font-size: 0.98rem;
    color: #55647c;
}


.benefit-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
}

.benefit {
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 2rem;
    width: 30%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: block;
}

.benefit:hover {
    transform: translateY(-8px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}

.benefit-icon {
    height: 55px;
    width: auto;
    margin: 0 auto 1rem;
    display: block;
}

.benefit h3 {
    margin-bottom: 0.75rem;
    color: var(--color-dark);
    font-size: 1.2rem;
    font-weight: 600;
}

.benefit p {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--color-dark);
}

.partner-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.partner-logo {
    height: 70px;
    width: auto;
    opacity: 0.9;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.partner-logo:hover {
    opacity: 1;
    transform: translateY(-4px);
}

/* Partner cards
 * The partner section now uses individual cards to pair each cloud platform’s
 * logo with a descriptive caption. This layout mirrors the benefits and
 * services cards used elsewhere on the site, improving visual interest and
 * providing context for each partnership. Cards have a light background,
 * subtle border and shadow, with consistent spacing and typography.
 */
.partner-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
}

.partner-card {
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 2rem;
    width: 30%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partner-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.partner-card h3 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    color: var(--color-dark);
    font-weight: 600;
}

.partner-card p {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--color-dark);
}

.partner-icon {
    height: 55px;
    width: auto;
    max-width: 90px;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    /* Show partner logos in full colour. Remove grayscale filter so each
     * cloud platform logo retains its brand colours, as requested by
     * the user. */
    filter: none;
}

/* Services Overview */
.services-overview {
    background-color: var(--color-light);
    padding: 4rem 0;
    color: var(--color-dark);
}

.services-overview h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--color-dark);
    font-weight: 600;
}

.service-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card {
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    padding: 2rem;
    border-radius: 10px;
    width: 30%;
    margin-bottom: 2rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;

    /* Centre align text inside service cards for better balance */
    text-align: center;
}

.card h3 {
    margin-bottom: 1rem;
    color: var(--color-dark);
    font-weight: 600;
}

.card p {
    margin-bottom: 1.5rem;
    color: var(--color-dark);
    line-height: 1.5;
    font-size: 0.95rem;
}

.card a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.card a:hover {
    color: var(--color-accent);
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    border-color: var(--color-primary);
}

/*
 * Fade-in animation for service cards on the home page. Each card
 * enters the viewport from a slight vertical offset with a staggered delay
 * to draw the visitor’s attention without overwhelming them. This
 * complements the hover effect already defined above and gives the
 * section a dynamic feel without requiring a carousel.
 */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.service-cards .card {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

.service-cards .card:nth-child(1) {
    animation-delay: 0s;
}
.service-cards .card:nth-child(2) {
    animation-delay: 0.1s;
}
.service-cards .card:nth-child(3) {
    animation-delay: 0.2s;
}
.service-cards .card:nth-child(4) {
    animation-delay: 0.3s;
}
.service-cards .card:nth-child(5) {
    animation-delay: 0.4s;
}
.service-cards .card:nth-child(6) {
    animation-delay: 0.5s;
}

/* Service icons */
.service-icon {
    height: 60px;
    width: auto;
    margin: 0 auto 1rem auto;
    display: block;
}

/* Inline SVG icons for services (e.g., DevOps, Security, Data & Analytics).  
 * These icons share the same dimensions and margins as image icons, and use the
 * primary colour for their strokes so they match the overall palette.  
 */
.service-icon-svg {
    height: 60px;
    width: 60px;
    margin: 0 auto 1rem auto;
    display: block;
    stroke: var(--color-primary);
}
.service-icon-svg path {
    stroke: var(--color-primary);
}

/* Process */
.process {
    background-color: var(--color-neutral);
    padding: 4rem 0;
    color: var(--color-dark);
}

.process h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--color-dark);
    font-weight: 600;
}




.steps {
    display: none;
}

/* Vertical timeline for Our Process */
.process-intro {
    max-width: 720px;
    margin: 0.5rem auto 2rem;
    text-align: center;
    color: var(--color-muted);
    font-size: 0.95rem;
}

.process-zigzag-list {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.process-zigzag-list::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom,
        rgba(12, 47, 84, 0.20),
        rgba(12, 47, 84, 0.05)
    );
}

.zigzag-row {
  position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    margin-bottom: 2.25rem;
}

.zigzag-row:last-child {
    margin-bottom: 0;
}

.zigzag-col-text {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    padding: 1.4rem 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.zigzag-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(12, 47, 84, 0.25);
    background-color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.process-zigzag h3 {
    font-size: 1.02rem;
    margin-bottom: 0.35rem;
    color: var(--color-dark);
}

.process-zigzag p {
    font-size: 0.94rem;
    color: var(--color-muted);
}

/* Responsive */
@media (max-width: 900px) {
    .process-zigzag-list::before {
        left: 12px;
    }
    .zigzag-row {
  position: relative;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
    .zigzag-col-empty {
        display: none;
    }
}
/* Testimonials */
.testimonials {
    background-color: var(--color-light);
    padding: 4rem 0;
    color: var(--color-dark);
}

.testimonials h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--color-dark);
    font-weight: 600;
}

.quotes blockquote {
    background-color: #ffffff;
    padding: 2rem;
    border-left: 5px solid var(--color-primary);
    margin-bottom: 1.5rem;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.quotes blockquote p {
    color: var(--color-dark);
    font-size: 1rem;
}

.quotes blockquote cite {
    display: block;
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* Final CTA */
.cta-final {
    /*
     * Give the final call‑to‑action section a lighter backdrop using the primary
     * turquoise. This helps it stand out from the dark footer and feels more
     * inviting. Use dark text to ensure sufficient contrast.
     */
    /*
     * Keep the CTA clearly separated from the footer while staying on-brand.
     * A subtle gradient + divider improves section contrast without changing
     * layout/structure.
     */
    background: linear-gradient(
        180deg,
        rgba(38, 96, 147, 0.96) 0%,
        rgba(12, 47, 84, 0.90) 100%
    );
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    padding: 4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cta-final h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: #ffffff;
    font-weight: 600;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.cta-final .btn {
    /* Invert the button colours in this section so the dark button contrasts
     * against the lighter section. The border matches the dark background
     * colour for a cohesive feel.
     */
    /* Use a light button here so it remains high-contrast on the CTA gradient */
    background-color: #ffffff;
    color: var(--color-dark);
    border: 2px solid rgba(255, 255, 255, 0.85);
    padding: 0.8rem 2rem;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    font-weight: 600;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.cta-final .btn:hover {
    /* When hovered, switch to the accent colour and dark text for visual
     * feedback while maintaining accessible contrast ratios.
     */
    background-color: var(--color-accent);
    color: var(--color-dark);
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

.cta-final .btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.75);
    outline-offset: 3px;
}

/* Footer */
/*
 * Footer styling
 *
 * The footer has been upgraded to a multi‑column layout inspired by the
 * clean footers on professional cloud websites. It contains three
 * columns: a brief company description, a list of quick links, and
 * contact information. A subtle border divides the main section from
 * the copyright bar at the bottom. Colours align with the dark theme
 * used in the header while still allowing primary and accent colours
 * to highlight titles and links.
 */
footer {
    background-color: var(--color-dark);
    color: var(--color-text-light);
}

/* Main footer container */
.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 2rem 0;
}

/* Each column within the footer */
.footer-col {
    flex: 1 1 30%;
    margin: 1rem 0;
}

.footer-col h3 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
    color: var(--color-primary);
    font-weight: 600;
}

.footer-col p,
.footer-col li {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: var(--color-accent);
}

/* Footer bottom strip */
.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Contact form */
.contact-form {
    max-width: 600px;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
}

.contact-form label {
    margin-bottom: 0.3rem;
    color: var(--color-dark);
    font-size: 0.9rem;
    font-weight: 500;
}

.contact-form input,
.contact-form textarea {
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    border: 1px solid var(--color-border);
    background-color: var(--color-light);
    color: var(--color-dark);
    font-size: 1rem;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #94a3b8;
}

.contact-form button {
    align-self: flex-start;
    background-color: var(--color-primary);
    color: var(--color-text-light);
    padding: 0.8rem 1.8rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.contact-form button:hover {
    background-color: var(--color-accent);
    color: var(--color-dark);
}

/* Responsive */
@media (max-width: 900px) {
    .service-cards {
        flex-direction: column;
        align-items: center;
    }
    .card {
        width: 100%;
    }
    .steps {
        flex-direction: column;
        align-items: center;
    }
    .step {
        width: 80%;
    }
    header .container {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Stack partner cards on smaller screens */
    .partner-cards {
        flex-direction: column;
        align-items: center;
    }

    .partner-card {
        width: 100%;
    }
}

/* Generic section styling for pages like About, Services detail and Contact */
.about-intro,
.mission,
.team,
.services-detail,
.contact-section {
    background-color: var(--color-light);
    padding: 4rem 0;
    text-align: center;
}

.about-intro h1,
.services-detail h1,
.contact-section h1 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--color-dark);
    font-weight: 600;
}

.mission h2,
.team h2 {
    font-size: 1.75rem;
    margin-bottom: 1rem;
    color: var(--color-dark);
    font-weight: 600;
}

.about-intro p,
.mission p,
.team p,
.services-detail p,
.contact-section p {
    color: var(--color-dark);
    max-width: 800px;
    margin: 0.5rem auto 0 auto;
    line-height: 1.5;
    font-size: 1rem;
}

/*
 * Service carousel styles
 *
 * To conserve vertical space on the home page and introduce movement, the
 * service offerings are displayed in a horizontally scrolling carousel. The
 * carousel hides overflow while a track containing duplicated cards slides
 * continuously from right to left. Cards use the .service-card class; the
 * original .card class remains in use on the Services page.
 */

.services-carousel {
    /* Hide horizontal overflow and establish a new stacking context for the
     * horizontal marquee. A top margin keeps the carousel spaced from
     * surrounding content. */
    overflow: hidden;
    position: relative;
    margin-top: 2rem;
}

.services-track {
    /* Lay out the cards in a single row. We explicitly prevent wrapping so
     * every service card stays on the same horizontal line, even when the
     * container is narrower than the combined width of all cards. */
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    /* Add consistent horizontal spacing between service cards without
     * introducing extra space at the beginning or end of the track. */
    gap: 2rem;
    white-space: nowrap;
    animation: scroll-left 30s linear infinite;
}

.service-card {
    background-color: #ffffff;
    border: 1px solid var(--color-border);
    /* Provide generous padding and rounded corners for a card-like
     * appearance. */
    padding: 1.5rem;
    border-radius: 10px;
    /* Allocate one third of the carousel width to each card so that three
     * services are visible at once. Remove the minimum width and reduce
     * margin so cards fit on a single line even on smaller screens. */
    /* Ensure each card takes up exactly one third of the carousel width so
     * that three cards are visible at once. The parent track's gap
     * property provides the spacing between cards. */
    flex: 0 0 33.333%;
    max-width: 33.333%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.service-card h3 {
    margin-bottom: 1rem;
    color: var(--color-dark);
    font-weight: 600;
}

.service-card p {
    margin-bottom: 1rem;
    color: var(--color-dark);
    line-height: 1.5;
    font-size: 0.95rem;
}

.service-card a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.service-card a:hover {
    color: var(--color-accent);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
}

.service-card .service-icon {
    height: 50px;
    width: auto;
    margin: 0 auto 1rem;
    display: block;
}

.service-card .service-icon-svg {
    height: 50px;
    width: 50px;
    margin: 0 auto 1rem;
    display: block;
    stroke: var(--color-primary);
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/*
 * Services slider styles
 *
 * To display three service cards at a time without taking up excessive
 * vertical space, we create slides that each contain three cards. The
 * track is three slides wide: slide 1 holds the first three services,
 * slide 2 the next three, and slide 3 duplicates slide 1. A CSS
 * animation moves the track from left to right to cycle through the
 * slides continuously. This design avoids the complexity of
 * continuously scrolling individual cards and ensures a smooth
 * transition between groups of services.
 */
.services-slider {
    /* Hide overflow so only one group of services is visible at a time */
    overflow: hidden;
    position: relative;
    margin-top: 2rem;
}

.services-slider-track {
    display: flex;
    /* The track width grows automatically based on the number of slides. */
    animation: services-slide 45s linear infinite;
}

.services-slide {
    flex: 0 0 100%;
    /* Use a grid layout within each slide so that services align neatly in
     * three equal columns. The gap property defines consistent spacing
     * between cards without creating uneven edges. */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Increase the gap to narrow the cards and ensure consistent spacing. */
    gap: 2.5rem;

    /* Add padding to the right of each slide so that there is a gap
     * between the last card of one slide and the first card of the next
     * slide. Using padding instead of margin ensures the spacing is
     * respected by the flex container and doesn't collapse when the
     * track is translated. The padding value matches the gap inside
     * each slide so cards remain evenly separated. */
    padding-right: 2.5rem;
}

.services-slide .service-card {
    /* When inside a slide, allow the grid to control sizing. */
    flex: none;
    max-width: none;
}

@keyframes services-slide {
    0% {
        transform: translateX(0%);
    }
    50% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(-200%);
    }
}

/*
 * Updated services slider
 *
 * The original slider grouped cards into slides, which created an uneven gap
 * between the last card of one slide and the first card of the next. To
 * present all services evenly and maintain consistent spacing, the slider
 * now arranges each service card in a single row. The track uses the
 * ``flex`` layout with a ``gap`` property, and cards are sized so that
 * exactly three fit within the visible viewport. We duplicate the six
 * service cards once to allow a seamless looping animation. When the
 * visitor hovers over the slider, the animation pauses, letting them
 * interact with any card without it sliding away.
 */

.services-slider-track {
    display: flex;
    /* The track width grows automatically based on the number of slides. */
    animation: services-slide 45s linear infinite;
}

/* Pause the sliding animation when hovering over the slider */
.services-slider:hover .services-slider-track {
    animation-play-state: paused;
}

/* Ensure each service card occupies one third of the available space minus gaps */

@keyframes services-continuous {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move half the width of the track to show the second set of cards */
        transform: translateX(-50%);
    }
}

/*
 * Animated gradient for the hero section.
 * The background-position moves from left to right and back again,
 * revealing different colour stops as it progresses. Adjust the
 * duration to control the speed of the transition.
 */
@keyframes heroGradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/* === FINAL HEADER + LOGO ADJUSTMENTS === */
header, .top-bar, .navbar {
    padding: 8px 24px;
    min-height: 56px;
    display: flex;
    align-items: center;
}

.site-logo {
    height: 60px;
    width: auto;
    object-fit: contain;
}

.logo, .logo a {
    display: flex;
    align-items: center;
}

/* === TOP BAR HEIGHT REDUCED FURTHER === */
header, .top-bar, .navbar {
    padding: 4px 20px;
    min-height: 48px;
}

/* === TOP BAR HEIGHT REDUCED TO ~HALF === */
header, .top-bar, .navbar {
    padding: 2px 16px;
    min-height: 28px;
}

.site-logo {
    height: 44px; /* keep logo visible in shorter bar */
}


/* =========================================================
   FINAL OVERRIDES (Top bar shorter + Bigger logo in header)
   ========================================================= */
.top-bar {
    padding: 0.15rem 0 !important;      /* shorter top strip */
    font-size: 0.8rem !important;
}

/* Main navigation/header bar (the one with menu + CTA) */
header, .navbar {
    height: 52px !important;            /* ~half height */
    min-height: 52px !important;
    padding: 0 24px !important;         /* no vertical padding */
    display: flex !important;
    align-items: center !important;
}

/* Make sure logo sits centered and is larger */
header .logo, header .logo a,
.navbar .logo, .navbar .logo a {
    display: flex !important;
    align-items: center !important;
}

header .logo-image,
.navbar .logo-image,
.site-logo {
    height: 46px !important;            /* bigger logo */
    width: auto !important;
    object-fit: contain !important;
}


/* =========================================================
   FINAL ALIGNMENT: Logo size equals CTA button height
   ========================================================= */

/* CTA button reference size */
.navbar .cta-btn {
    height: 36px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* Logo height matched to CTA */
header .logo-image,
.navbar .logo-image,
.site-logo {
    height: 36px !important;   /* EXACT match with CTA */
    width: auto !important;
    object-fit: contain !important;
}


/* =========================================================
   FINAL FIX: Logo size visually equal to CTA (extreme right)
   ========================================================= */

/* CTA button definitive size */
.navbar .cta-btn {
    height: 40px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 14px !important;
}

/* Logo scaled to SAME visual height as CTA */
header .logo-image,
.navbar .logo-image,
.site-logo {
    height: 40px !important;   /* EXACT match with CTA */
    width: auto !important;
    object-fit: contain !important;
}


/* =========================================================
   FINAL CHANGE: DOUBLE LOGO SIZE (TOP LEFT)
   ========================================================= */

/* Keep CTA unchanged */
.navbar .cta-btn {
    height: 40px !important;
    padding: 0 16px !important;
}

/* Double logo size */
header .logo-image,
.navbar .logo-image,
.site-logo {
    height: 80px !important;   /* DOUBLED from 40px */
    width: auto !important;
    object-fit: contain !important;
}


/* =========================================================
   FINAL CHANGE: Top bar color matched to hero image
   ========================================================= */

/* Dark blue gradient inspired by hero/cloud image */
header, .navbar, .top-bar {
    background: linear-gradient(
        90deg,
        #081a2b 0%,
        #0b2740 50%,
        #0d3555 100%
    ) !important;
}


/* === Hero micro trust line (added) === */
.hero-trust{
    margin-top: 12px;
    font-size: 0.95rem;
    opacity: 0.85;
}


/* === Header final polish === */
header{
  width: 100%;
  background: linear-gradient(90deg, #071a2f 0%, #0b2a45 60%, #0e3a5c 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

header .container{
  max-width: 100%;
  width: 100%;
  padding: 12px 24px;
}

.logo-image{
  height: 44px;
}

/* === Hero content readability === */
.hero-content{
  background: rgba(255,255,255,0.85);
  padding: 28px;
  border-radius: 16px;
  backdrop-filter: blur(6px);
}

/* ===============================
   VERSION_2_PREMIUM OVERRIDES
   Cosmetic theme consistency only
   =============================== */
/* Premium footer top: elevate each column as a soft card (cosmetic only) */
.footer-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 28px; /* MORE SPACE between cards */
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 2.2rem; /* slight vertical breathing room only */
}

.footer-col{
  flex: 1 1 320px;           /* allows wrapping with good spacing */
  margin: 0;                 /* rely on container gap */
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.22);
  padding: 1.4rem 1.4rem; /* internal padding for premium feel */
  box-sizing: border-box;
}

/* Footer headings: strong contrast + subtle accent underline */
.footer-col h3{
  color:#ffffff;
  position: relative;
  margin-bottom: 1.1rem;
  text-shadow: 0 2px 10px rgba(0,0,0,0.18);
}

.footer-col h3::after{
  content:"";
  display:block;
  width: 44px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(117,176,202,0.95);
}

/* Footer links/body: readable and consistent */
.footer-col p,
.footer-col a{
  color: rgba(255,255,255,0.80);
}

.footer-col a:hover{
  color: var(--color-accent);
}


@media (max-width: 900px){
  .footer-container{ gap: 18px; }
  .footer-col{ flex-basis: 100%; }
}

/* === HEADER OPTION START === */
/* Option B: Solid brand header with subtle gradient (enterprise-safe) */
header {
  background: linear-gradient(180deg,
    rgba(12,47,84,1) 0%,
    rgba(9,35,63,1) 100%);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 22px rgba(0,0,0,0.16);
}

header .container {
  padding: 1.05rem 0;
}

nav ul li a {
  position: relative;
  color: rgba(255,255,255,0.92);
}

nav ul li a::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.25rem;
  height: 2px;
  background: rgba(117,176,202,0.85);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
  border-radius: 2px;
}

nav ul li a:hover::after {
  transform: scaleX(1);
}

.cta {
  background: var(--color-primary);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,0.14);
}

.cta:hover {
  filter: brightness(1.05);
}
/* === HEADER OPTION END === */



/* === NO TOP BAR LOOK (HEADER OVERLAY) === */
/* Goal: header feels like part of the hero (no separate colored strip). */
/* Keeps logo left + nav right; cosmetic only. */

/* === HOMEPAGE ONLY: transparent overlay header (inner pages keep solid header) === */
body.home-page header, body.home-page .top-bar, body.home-page .navbar {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* If any wrapper adds a background, force it off too */
body.home-page header *, body.home-page .top-bar *, body.home-page .navbar * {
  /* don't override normal elements, only background layers */
}

/* Improve readability on image without adding a bar */
body.home-page header a, body.home-page .navbar a, body.home-page .top-bar a,
body.home-page header .nav-link, body.home-page .navbar .nav-link {
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
}

/* Keep logo crisp */
header .logo img, header .logo .logo-image {
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35));
  -webkit-filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35));
}

/* Optional: if header is positioned normally and creates a band, overlay it */
body.home-page header {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}




/* === NAV TEXT VISIBILITY (DEFAULT STATE) === */
/* Changes only the default nav/link color so it stays visible on bright hero.
   Hover/active remains brand-accented. */
header a,
.navbar a,
.top-bar a,
header .nav-link,
.navbar .nav-link {
  color: rgba(9, 31, 54, 0.92) !important; /* deep navy */
  text-shadow: 0 1px 10px rgba(255,255,255,0.25); /* subtle lift on dark areas */
}

header a:hover,
.navbar a:hover,
.top-bar a:hover,
header .nav-link:hover,
.navbar .nav-link:hover,
header a.active,
.navbar a.active,
.top-bar a.active,
header .nav-link.active,
.navbar .nav-link.active {
  color: inherit; /* cyan-blue accent aligned with theme */
}




/* === NAV EMPHASIS + LOGO SIZE INCREASE (FINAL POLISH) === */

/* 1) Make nav items bolder, darker, clearer */
header a,
.navbar a,
.top-bar a,
header .nav-link,
.navbar .nav-link {
  font-weight: 600 !important;          /* semi-bold */
  font-size: 16px !important;           /* slightly larger */
  letter-spacing: 0.2px;
}

/* Hover / active stays brand-aligned */
header a:hover,
.navbar a:hover,
.top-bar a:hover,
header .nav-link:hover,
.navbar .nav-link:hover,
header a.active,
.navbar a.active,
.top-bar a.active,
header .nav-link.active,
.navbar .nav-link.active {
  color: inherit;
}

/* 2) Increase logo size (image only, no layout change) */
header .logo img,
header .logo .logo-image {
  height: 60px !important;   /* increased from earlier */
  width: auto !important;
}




/* === LOGO DOUBLE SIZE (IMAGE ONLY, NO LAYOUT CHANGE) === */
/* Previous logo height ~60px → doubled to ~120px */

header .logo img,
header .logo .logo-image {
  height: 120px !important;
  width: auto !important;
  max-height: none !important;
}




/* === LOGO PLACEMENT FIX + NAV "STROKE" (COSMETIC ONLY) === */

/* 1) Logo: add breathing room so it doesn't touch top edge */
header .logo img,
header .logo .logo-image {
  margin-top: 10px !important;
  display: block;
}

/* If the logo container has no padding, add a little */
header .logo {
  padding-top: 4px !important;
}

/* 2) Nav text: bolder + subtle outline ("stroke") for clarity on bright hero */
header a,
.navbar a,
.top-bar a,
header .nav-link,
.navbar .nav-link {
  font-weight: 700 !important;
  /* faux stroke via multi-directional shadow */
  text-shadow:
    -0.6px 0 rgba(6,24,42,0.55),
     0.6px 0 rgba(6,24,42,0.55),
     0 -0.6px rgba(6,24,42,0.55),
     0  0.6px rgba(6,24,42,0.55),
     0  2px 10px rgba(255,255,255,0.18);
}




/* === REFINED FIX: LOGO CLEARANCE + SOFT NAV STROKE === */

/* 1) Proper vertical centering for oversized logo */
header {
  padding-top: 16px !important;   /* pushes entire header content down */
}

header .logo {
  padding-top: 0 !important;
}

header .logo img,
header .logo .logo-image {
  margin-top: 0 !important;
  display: block;
}

/* 2) Refined nav emphasis (no heavy outline, premium look) */
header a,
.navbar a,
.top-bar a,
header .nav-link,
.navbar .nav-link {
  font-weight: 600 !important;
  text-shadow:
    0 1px 3px rgba(0,0,0,0.25);   /* single soft shadow instead of stroke */
}

/* Hover/active stays crisp */
header a:hover,
.navbar a:hover,
.top-bar a:hover,
header .nav-link:hover,
.navbar .nav-link:hover,
header a.active,
.navbar a.active,
.top-bar a.active,
header .nav-link.active,
.navbar .nav-link.active {
  text-shadow:
    0 1px 6px rgba(42,169,255,0.45);
}




/* === FINAL MICRO-ADJUSTMENT: LOWER LOGO SLIGHTLY === */

/* Move logo down subtly without affecting nav */
header .logo {
  transform: translateY(6px);
}

\n\n
/* === LOGO CLICK FIX (WORKS ON HOME PAGE TOO) === */
header .logo a {
  pointer-events: auto !important;
  display: inline-block;
  position: relative;
  z-index: 10001;
}

header .logo,
header .logo * {
  pointer-events: auto !important;
}
\n


/* === FRONT PAGE CLICK FIX (HEADER/NAV ALWAYS CLICKABLE OVER HERO) === */
/* Ensure hero overlays never block header interactions */

header, .navbar, .top-bar {
  position: absolute !important;
  top: 0; left: 0; right: 0;
  z-index: 10000 !important;
  pointer-events: auto !important;
}

/* If header has any overlay pseudo-elements, they must not intercept clicks */
header::before, header::after,
.navbar::before, .navbar::after,
.top-bar::before, .top-bar::after {
  pointer-events: none !important;
}

/* Make sure nav links always receive clicks */
header nav, .navbar nav, .top-bar nav,
header ul, .navbar ul, .top-bar ul,
header li, .navbar li, .top-bar li,
header a, .navbar a, .top-bar a {
  pointer-events: auto !important;
  position: relative;
  z-index: 10001;
}


/* === INNER PAGES: solid nav (keep homepage overlay unchanged) === */
body.inner-page .top-bar{display:none !important;}
body.inner-page header{position:relative;}
body.inner-page .navbar{
  background: linear-gradient(180deg,
    rgba(10, 52, 86, 0.96) 0%,
    rgba(9, 64, 104, 0.94) 55%,
    rgba(8, 78, 122, 0.92) 100%) !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18) !important;
}
body.inner-page .nav-links a{
  color: rgba(245, 252, 255, 0.95) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;
}
body.inner-page .nav-links a:hover{
  color: #ffffff !important;
}
body.inner-page .logo img{
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}
body.inner-page .get-quote-btn{
  background: linear-gradient(180deg, #1f6b9e 0%, #0f4f7a 100%) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.18) !important;
}

/* ==============================
   INNER PAGES HEADER FINAL POLISH
   Only About / Services / Contact
   ============================== */

/* 1) Nav links must be white on inner pages */
body.inner-page header nav ul li a{
  color: rgba(255,255,255,0.95) !important;
}
body.inner-page header nav ul li a:hover{
  color: #ffffff !important;
}

/* 2) Increase header height on inner pages so the large logo never clips */
body.inner-page header{
  padding-top: 46px !important;
  padding-bottom: 46px !important;
  overflow: visible !important;
}
body.inner-page header .header-container{
  min-height: 144px;
}

/* Ensure Get a Quote button text is white on inner pages */
body.inner-page header .btn-primary{
  color:#ffffff !important;
}


/* === Services Page Mini Hero === */
body.inner-page.services-page .page-hero.services-hero {
    background: linear-gradient(135deg, #0C2F54 0%, #266093 45%, #75B0CA 100%);
    color: var(--color-text-light);
    padding: 72px 0 64px;
    position: relative;
    overflow: hidden;
}

body.inner-page.services-page .page-hero.services-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 10% 0%, rgba(255,255,255,0.15) 0, transparent 55%),
                radial-gradient(circle at 90% 100%, rgba(12,47,84,0.45) 0, transparent 60%);
    pointer-events: none;
}

.page-hero .hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

.page-hero .hero-copy {
    max-width: 560px;
}

.page-hero .hero-kicker {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.8;
    margin-bottom: 12px;
}

.page-hero .hero-title {
    font-size: clamp(2.2rem, 3vw, 2.8rem);
    line-height: 1.1;
    margin-bottom: 16px;
}

.page-hero .hero-subtitle {
    font-size: 1rem;
    max-width: 520px;
    opacity: 0.92;
    margin-bottom: 24px;
}

.page-hero .hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 0.9rem;
    opacity: 0.9;
}

.page-hero .hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.page-hero .hero-meta span::before {
    content: "•";
    font-size: 1.1rem;
}

/* CTA buttons row */
.page-hero .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 8px;
}

.page-hero .btn-primary-hero {
    background: linear-gradient(135deg, #75B0CA, #ffffff);
    color: #0C2F54;
    border-radius: 999px;
    padding: 10px 24px;
    font-weight: 600;
    box-shadow: 0 14px 34px rgba(3, 18, 32, 0.35);
    border: none;
}

.page-hero .btn-outline-hero {
    background: transparent;
    border-radius: 999px;
    padding: 10px 22px;
    border: 1px solid rgba(255,255,255,0.55);
    color: #ffffff;
    font-weight: 500;
}

/* Stack on small screens */
@media (max-width: 768px) {
    .page-hero .hero-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* About page refinements */
.about-list {
    list-style: none;
    margin: 1.5rem auto 0 auto;
    padding: 0;
    max-width: 800px;
    text-align: left;
}
.about-list li {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.98rem;
}
.about-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-primary);
    font-size: 1.2rem;
    line-height: 1;
}

.about-highlights {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}
.about-highlight-card {
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    padding: 1.5rem;
    width: 100%;
    max-width: 320px;
    text-align: left;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.about-highlight-card h3 {
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
    color: var(--color-dark);
}
.about-highlight-card p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-muted);
}

/* Services & getting started strip */
.services-get-started {
    margin-top: 2.5rem;
    text-align: left;
    background-color: var(--color-neutral);
    padding: 2rem;
    border-radius: 12px;
}
.services-get-started h2 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: var(--color-dark);
}
.services-get-started ol {
    margin-left: 1.5rem;
    padding-left: 0.5rem;
}
.services-get-started li {
    margin-bottom: 0.5rem;
    font-size: 0.98rem;
}

/* Contact page layout */
.contact-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
    align-items: flex-start;
    justify-content: center;
}
.contact-card {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    padding: 2rem;
    flex: 1 1 280px;
    max-width: 450px;
    text-align: left;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.contact-card h2 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
    color: var(--color-dark);
}
.contact-info p {
    margin-bottom: 1rem;
}
.contact-points {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}
.contact-points li {
    margin-bottom: 0.5rem;
    font-size: 0.96rem;
}
.contact-meta p {
    font-size: 0.9rem;
    color: var(--color-muted);
}

/* Ensure service icons feel consistent in cards */
.service-cards .card .service-icon,
.service-cards .card .service-icon-svg {
    height: 60px;
    width: auto;
    margin-bottom: 1rem;
}

/* Responsive tweaks for About & Contact layouts */
@media (max-width: 768px) {
    .about-highlights {
        flex-direction: column;
        align-items: stretch;
    }
    .services-get-started {
        padding: 1.5rem;
    }
    .contact-card {
        max-width: 100%;
    }
}


/* About page hero tweaks */
.page-hero.about-hero {
    background: radial-gradient(circle at 0% 0%, rgba(255,255,255,0.08) 0, transparent 55%),
                linear-gradient(135deg, #0C2F54 0%, #1F4F81 45%, #6FAFCD 100%);
    color: var(--color-text-light);
    padding: 72px 0 64px;
    position: relative;
    overflow: hidden;
}
body.inner-page .page-hero.about-hero .hero-title {
    font-size: 2.4rem;
}
.page-hero.about-hero .hero-subtitle {
    max-width: 540px;
}

/* About hero side card */
.hero-aside {
    flex: 0 0 320px;
    max-width: 340px;
}
.stat-card {
    background-color: rgba(6, 24, 48, 0.9);
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}
.stat-card h2 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--color-text-light);
}
.stat-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.stat-card li {
    font-size: 0.95rem;
    margin-bottom: 0.6rem;
    padding-left: 1.1rem;
    position: relative;
    color: rgba(255,255,255,0.9);
}
.stat-card li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--color-accent);
}

/* Slightly tighter layout for about story sections */
.about-intro,
.mission,
.team {
    text-align: left;
}
.about-intro .container,
.mission .container,
.team .container {
    max-width: 960px;
}
.about-intro p,
.mission p,
.team p {
    margin-top: 0.75rem;
}

/* Responsive behaviour for About hero */
@media (max-width: 900px) {
    .page-hero.about-hero {
        padding: 88px 0 56px;
    }
    .page-hero.about-hero .hero-inner {
        flex-direction: column;
        gap: 1.75rem;
    }
    .hero-aside {
        width: 100%;
        max-width: 100%;
    }
    .stat-card {
        max-width: 100%;
    }
    body.inner-page .page-hero.about-hero .hero-title {
        font-size: 2rem;
    }
}


/* Final alignment tweaks for About page */
.page-hero.about-hero .hero-inner {
    align-items: flex-start;
    gap: 2.5rem;
}
.page-hero.about-hero .hero-copy {
    flex: 1 1 0;
    max-width: 580px;
}
.page-hero.about-hero .hero-meta {
    margin-top: 1rem;
}
.mission .container,
.team .container {
    margin-top: 1.5rem;
}


/* Improved mission + team layout on About page */
.about-mission-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
    gap: 2.5rem;
    align-items: flex-start;
    margin-top: 1.75rem;
}
.mission-copy p:first-of-type {
    margin-top: 0.25rem;
}
.mission-copy p {
    margin-bottom: 0.85rem;
}
.mission-points-card {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.mission-points-card .about-list {
    margin: 0;
}

/* Make highlight cards align in a neat grid instead of staggered rows */
.about-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    align-items: stretch;
}
.about-highlight-card {
    height: 100%;
}

/* Center section headings but keep body text nicely contained */
.mission .container,
.team .container {
    max-width: 980px;
}
.mission h2,
.team h2 {
    text-align: center;
}
.mission .about-mission-layout,
.team .about-highlights {
    margin-top: 1.75rem;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .about-mission-layout {
        grid-template-columns: 1fr;
    }
    .mission-points-card {
        margin-top: 0.5rem;
    }
}


/* Spacing tweak: reduce gap between Mission and Team sections */
.mission {
    padding-bottom: 2.25rem;
}
.team {
    padding-top: 1.5rem;
}
@media (max-width: 900px) {
    .mission {
        padding-bottom: 1.75rem;
    }
    .team {
        padding-top: 1.25rem;
    }
}


/* Secondary button style for hero */
.btn.btn-secondary {
    background-color: transparent;
    color: var(--color-dark);
    border: 1px solid rgba(12, 47, 84, 0.25);
    padding: 0.75rem 1.8rem;
}
.btn.btn-secondary:hover {
    background-color: #ffffff;
    color: var(--color-primary);
}

/* Engagement process strip on home page */
.engagement-process {
    background-color: var(--color-neutral);
    padding: 3.5rem 0 3.75rem;
}
.engagement-process .container {
    max-width: 1040px;
}
.engagement-process h2 {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--color-dark);
    font-size: 1.8rem;
}
.engagement-intro {
    max-width: 720px;
    margin: 0 auto 2rem auto;
    text-align: center;
    color: var(--color-muted);
}
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
}
.process-step {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    padding: 1.75rem 1.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}
.process-step h3 {
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
    color: var(--color-dark);
}
.process-step p {
    font-size: 0.95rem;
    color: var(--color-muted);
}
.step-number {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background-color: var(--color-primary);
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Evidence / outcome section on Services */
.evidence {
    background-color: var(--color-light);
    padding: 3.5rem 0 4rem;
}
.evidence .container {
    max-width: 1040px;
}
.evidence h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--color-dark);
    font-size: 1.8rem;
}
.evidence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}
.evidence-card {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    padding: 1.75rem 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.evidence-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
    color: var(--color-dark);
}
.evidence-problem {
    font-size: 0.9rem;
    color: var(--color-dark);
    margin-bottom: 0.4rem;
}
.evidence-solution {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-bottom: 0.4rem;
}
.evidence-outcome {
    font-size: 0.9rem;
    color: var(--color-muted);
}

/* Hero tweaks for new copy */
.hero-content p {
    margin: 0.75rem 0 1rem;
}
.hero-actions {
    margin-top: 0.5rem;
}
.hero-trust {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--color-muted);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .engagement-process {
        padding: 3rem 0;
    }
    .evidence {
        padding: 3rem 0;
    }
}


/* Refined engagement process timeline */
.engagement-process {
    background-color: var(--color-neutral);
    padding: 3.25rem 0 3.5rem;
}
.engagement-process .container {
    max-width: 1040px;
}
.engagement-process h2 {
    text-align: center;
    margin-bottom: 0.75rem;
    color: var(--color-dark);
    font-size: 1.8rem;
}
.engagement-intro {
    max-width: 720px;
    margin: 0 auto 2rem auto;
    text-align: center;
    color: var(--color-muted);
}
.process-steps.process-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}
.process-steps.process-timeline::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 22px;
    height: 2px;
    background: linear-gradient(90deg, rgba(12,47,84,0.16), rgba(12,47,84,0.08));
    z-index: 0;
}
.process-step {
    background-color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    padding: 1.6rem 1.4rem 1.5rem 1.4rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    position: relative;
    z-index: 1;
}
.step-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.step-number {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background-color: var(--color-primary);
    color: var(--color-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(12,47,84,0.16);
}
.process-step h3 {
    margin: 0;
    font-size: 1.02rem;
    color: var(--color-dark);
}
.process-step p {
    font-size: 0.94rem;
    margin-top: 0.5rem;
    color: var(--color-muted);
}

/* Stack timeline nicely on small screens */
@media (max-width: 768px) {
    .process-steps.process-timeline::before {
        display: none;
    }
    .engagement-process {
        padding: 3rem 0;
    }
}


/* Softer step badges instead of bold numbered circles */
.step-badge {
    display: inline-block;
    padding: 4px 10px 5px 10px;
    border-radius: 999px;
    background-color: rgba(12,47,84,0.06);
    border: 1px solid rgba(12,47,84,0.18);
    color: var(--color-dark);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.step-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.process-steps.process-timeline::before {
    /* Make connector line subtler so badge doesn't look disconnected */
    top: 30px;
    height: 1px;
    background: linear-gradient(90deg, rgba(12,47,84,0.12), rgba(12,47,84,0.06));
}


/* Equal-height cards and subtle icons for engagement steps */
.process-steps.process-timeline {
    align-items: stretch;
}
.process-step {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.process-step p {
    margin-top: 0.6rem;
    flex-grow: 1;
}
.step-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.step-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.step-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgba(12,47,84,0.16);
    background: radial-gradient(circle at 30% 30%, rgba(117,176,202,0.8), rgba(12,47,84,0.1));
}

/* Slightly tighter spacing before partners section */
.partners {
    padding-top: 2.3rem;
}


/* Minimalist engagement steps: no connector line or icon circles */
.process-steps.process-timeline::before {
    display: none;
}
.step-icon {
    display: none;
}
.step-header {
    gap: 0.75rem;
}


/* Enhanced zig-zag styling */
.zigzag-label {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5b6f85;
  margin-bottom: 0.15rem;
}

.process-zigzag-list::before {
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(12, 47, 84, 0.18),
    rgba(12, 47, 84, 0.04)
  );
}

.zigzag-row::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: #ffffff;
  border: 2px solid rgba(12, 47, 84, 0.35);
  transform: translateX(-50%);
}

/* Slight alternate background on even rows for rhythm */
.zigzag-row:nth-child(even) .zigzag-col-text {
  background-color: rgba(12, 47, 84, 0.02);
}










/* Case studies – visual gallery layout */
.case-hero .hero-title {
    max-width: 780px;
}
.case-hero .hero-subtitle {
    max-width: 760px;
}

/* Split hero with small visual card */
.hero-inner-split {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 2.2rem;
    align-items: center;
}
.hero-visual-card {
    background: radial-gradient(circle at 0 0, rgba(255,255,255,0.9) 0, rgba(255,255,255,0.75) 40%, rgba(12,47,84,0.12) 100%);
    border-radius: 18px;
    padding: 1.3rem 1.4rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(255,255,255,0.6);
}
.hero-visual-badge {
    display: inline-block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    background-color: rgba(12,47,84,0.08);
    color: var(--color-dark);
    margin-bottom: 0.6rem;
}
.hero-visual-metric-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}
.hero-visual-metric-row .metric-label {
    color: var(--color-muted);
}
.hero-visual-metric-row .metric-value {
    font-weight: 600;
    color: var(--color-dark);
}
.hero-visual-note {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-top: 0.8rem;
}

/* Case cards */
.case-gallery {
    padding: 2.5rem 0 3rem 0;
}

.case-card {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr);
  gap: 1.7rem;
  margin-bottom: 1.8rem;
  padding: 1.4rem 1.5rem;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid #d9e2f0;
  box-shadow: 0 14px 40px rgba(1, 22, 53, 0.08);
  align-items: stretch;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.case-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 52px rgba(1, 22, 53, 0.12);
}

/* Photo container with “monitor” frame */
.case-visual {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #050b18;
  min-height: 220px;
}

.case-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 0.18s ease, filter 0.18s ease;
  filter: saturate(1.05);
}

.case-card:hover .case-visual img {
  transform: scale(1.07);
  filter: saturate(1.1);
}

/* Dark overlay for depth */
.case-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(5,11,24,0.55), rgba(5,11,24,0.20));
}

/* Small “monitor stand” at bottom */
.case-visual::after {
  content: "";
  position: absolute;
  left: 40%;
  right: 40%;
  bottom: -8px;
  height: 16px;
  border-radius: 20px;
  background: #dde4f1;
}

/* Tag chip */
.case-visual-tag {
  position: absolute;
  top: 0.9rem;
  left: 1rem;
  padding: 0.22rem 0.8rem;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #ffffff;
  color: #07152c;
  z-index: 2;
}

/* remove old per-type backgrounds */
.case-visual-migration,
.case-visual-dr,
.case-visual-ops,
.case-visual-accent {
  background: none;
}

/* Content side tweaks */
.case-content .case-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7b879b;
  margin-bottom: 0.25rem;
}

.case-title {
  font-size: 1.15rem;
  color: #0c1e3a;
  margin-bottom: 0.3rem;
}

.case-meta {
  font-size: 0.85rem;
  color: #7b879b;
  margin-bottom: 0.75rem;
}

.case-summary-text {
  font-size: 0.9rem;
  color: #4f607a;
  margin-bottom: 0.95rem;
}

.case-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.case-detail-block h3 {
  font-size: 0.94rem;
  color: #0c1e3a;
  margin-bottom: 0.25rem;
}

.case-detail-block p {
  font-size: 0.88rem;
  color: #56657c;
}

@media (max-width: 960px) {
  .case-card {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .case-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Content side */
.case-content .case-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    margin-bottom: 0.2rem;
}
.case-title {
    font-size: 1.15rem;
    color: var(--color-dark);
    margin-bottom: 0.25rem;
}
.case-meta {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-bottom: 0.65rem;
}
.case-summary-text {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-bottom: 0.9rem;
}
.case-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1.1rem;
}
.case-detail-block h3 {
    font-size: 0.94rem;
    color: var(--color-dark);
    margin-bottom: 0.25rem;
}
.case-detail-block p {
    font-size: 0.88rem;
    color: var(--color-muted);
}

/* Responsive behaviour */
@media (max-width: 960px) {
    .hero-inner-split {
        grid-template-columns: minmax(0,1fr);
    }
    .case-card {
        grid-template-columns: minmax(0,1fr);
    }
}
@media (max-width: 720px) {
    .case-detail-grid {
        grid-template-columns: minmax(0,1fr);
    }
}


/* Nodes */
.vis-node {
    border-radius: 10px;
    background-color: rgba(255,255,255,0.9);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.vis-node-main {
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
}
.vis-node-secondary {
    width: 100%;
    height: 100%;
}
.vis-node-a {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
}
.vis-node-b {
    grid-column: 4 / span 1;
    grid-row: 4 / span 1;
}

/* Connections */
.vis-connection {
    position: absolute;
    background: linear-gradient(to right, rgba(255,255,255,0.7), rgba(255,255,255,0.1));
}
.vis-conn-1 {
    top: 42%;
    left: 12%;
    width: 60%;
    height: 2px;
}
.vis-conn-2 {
    left: 42%;
    top: 18%;
    width: 2px;
    height: 55%;
}


/* Image-based visuals for case studies */
.case-visual {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    min-height: 210px;
    background-color: #0b2342;
}
.case-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.03);
    filter: saturate(1.05);
}
.case-card:hover .case-visual img {
    transform: scale(1.06);
}
.case-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(6,18,38,0.65), rgba(6,18,38,0.15));
    mix-blend-mode: multiply;
}
.case-visual-tag {
    position: absolute;
    top: 0.85rem;
    left: 0.9rem;
    padding: 0.22rem 0.7rem;
    font-size: 0.78rem;
    border-radius: 999px;
    background-color: rgba(255,255,255,0.94);
    color: var(--color-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    z-index: 2;
}


/* === Value Journey: Before → After section === */
.value-journey {
    padding: 4rem 0;
    background: #f5f7fb;
}

.value-journey .container {
    max-width: 1080px;
    margin: 0 auto;
}

.vj-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #0b1b3b;
}

.vj-subtitle {
    text-align: center;
    font-size: 0.98rem;
    color: #50627a;
    max-width: 620px;
    margin: 0 auto 2.5rem;
}

.vj-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem;
}

.vj-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 1.5rem 1.6rem;
    box-shadow: 0 18px 45px rgba(6, 30, 66, 0.06);
}

.vj-card-title {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.05rem;
    margin-bottom: 0.9rem;
    color: #142543;
}

.vj-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(13, 95, 255, 0.08);
    color: #0d5fff;
    font-size: 0.8rem;
    font-weight: 600;
}

.vj-card-muted {
    background: #ffffff;
    background: linear-gradient(135deg, #ffffff 0%, #f0f3fb 100%);
}

.vj-footer-note {
    margin-top: 2.4rem;
    text-align: center;
    font-size: 0.95rem;
    color: #4a5a73;
}

.vj-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.vj-column {
    font-size: 0.9rem;
    line-height: 1.5;
}

.vj-before {
    border-right: 1px solid rgba(16, 35, 71, 0.06);
    padding-right: 0.8rem;
}

.vj-after {
    padding-left: 0.8rem;
}

.vj-label {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.vj-before .vj-label {
    background: rgba(214, 73, 50, 0.08);
    color: #b03b26;
}

.vj-after .vj-label {
    background: rgba(24, 163, 90, 0.12);
    color: #1a864c;
}

.vj-column ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.vj-column li {
    position: relative;
    padding-left: 1.1rem;
    margin-bottom: 0.4rem;
    color: #42536a;
}

.vj-column li::before {
    content: "•";
    position: absolute;
    left: 0;
    top: 0;
    color: #0d5fff;
}

/* Mobile layout */
@media (max-width: 900px) {
    .vj-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .vj-columns {
        grid-template-columns: 1fr;
    }
    .vj-before {
        border-right: none;
        border-bottom: 1px solid rgba(16, 35, 71, 0.06);
        padding-right: 0;
        padding-bottom: 0.8rem;
        margin-bottom: 0.8rem;
    }
    .vj-after {
        padding-left: 0;
    }
}



.service-kicker {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #7a879b;
    margin-bottom: 0.35rem;
}



/* === Case Studies Polish === */

.case-polished {
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 14px 34px rgba(0,0,0,0.06);
  padding: 1.75rem;
}

.case-polished .label-pill {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 99px;
  background: linear-gradient(180deg,#e8f4ff,#f6fbff);
  border: 1px solid rgba(30,136,229,.25);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2px;
  color: #1b4c7c;
  margin-bottom: .4rem;
}

.case-polished h3 {
  margin-top: .4rem;
  line-height: 1.25;
}

.case-polished .case-meta {
  font-size: .85rem;
  color: #4a5a73;
  margin-bottom: .6rem;
}

.case-polished .outcome-badge {
  display: inline-block;
  padding: 6px 8px;
  font-size: .75rem;
  font-weight: 700;
  color: #0b5f2a;
  background: #e8f7ef;
  border-radius: 6px;
}

.case-polished .case-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
  margin-top: .75rem;
}

.case-polished .case-col h4 {
  font-size: .85rem;
  letter-spacing: .3px;
  color: #1b3350;
  margin-bottom: .2rem;
}

.case-polished .case-col p {
  font-size: .92rem;
  line-height: 1.55;
}

/* Mobile layout */
@media(max-width: 900px){
  .case-polished .case-columns {
    grid-template-columns: 1fr;
  }
  .case-polished {
    padding: 1.25rem;
  }
}



/* === Services Narrative & Positioning Enhancements === */

.services-positioning {
  padding: 3.5rem 0 2.75rem 0;
  background: linear-gradient(180deg,#f7fbff,#ffffff);
}

.services-positioning .container.narrow {
  max-width: 980px;
}

.svc-intro-block h2 {
  text-align: center;
  margin-bottom: .6rem;
}

.svc-sub {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 1.8rem auto;
  color: #465a73;
  line-height: 1.55;
}

.svc-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
}

.svc-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 28px rgba(0,0,0,.05);
  padding: 1.4rem 1.4rem 1.2rem 1.4rem;
}

.svc-card h4 {
  margin: 0 0 .55rem 0;
  letter-spacing: .2px;
  font-size: .95rem;
  color: #18314b;
}

.svc-card ul {
  margin: 0;
  padding-left: 1.1rem;
}

.svc-card li {
  margin-bottom: .35rem;
  line-height: 1.45;
  color: #2d4058;
  font-size: .92rem;
}

/* Mobile */
@media(max-width: 960px){
  .svc-grid-3 {
    grid-template-columns: 1fr;
  }
  .services-positioning {
    padding: 2.6rem 0 2.4rem 0;
  }
}




/* === Services Hero Spacing Refinement === */
.services-hero,
.services-hero header + section,
.services-hero-section,
.page-hero.services,
.services-landing-hero {
  padding-top: 2.6rem !important;
}

.services-hero h1,
.services-landing-hero h1 {
  margin-top: 0.2rem !important;
}

/* fallback for legacy hero block */
section:first-of-type {
  scroll-margin-top: 72px;
}

@media(max-width: 960px){
  .services-hero,
  .services-landing-hero {
    padding-top: 1.6rem !important;
  }
}



/* === Hybrid Engagement Framework === */

.engage-framework {
  padding: 3.2rem 0 3.2rem;
  background: linear-gradient(180deg,#f7fbff,#ffffff);
}

.framework-sub {
  max-width: 860px;
  margin: 0 auto 2.0rem auto;
  text-align:center;
  color:#465a73;
  line-height:1.55;
}

.framework-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.4rem;
}

.fw-phase {
  background:#ffffff;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 26px rgba(0,0,0,.05);
  padding:1.4rem 1.4rem 1.2rem;
}

.fw-phase-tag {
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:.7rem;
  font-weight:700;
  background:#e8f3ff;
  color:#194b7a;
  margin-bottom:.35rem;
}

.fw-objective {
  font-size:.92rem;
  color:#2b3f58;
  margin:.3rem 0 .5rem 0;
}

.fw-list {
  margin:0 0 .6rem 0;
  padding-left:1.1rem;
}

.fw-list li {
  margin-bottom:.3rem;
  font-size:.9rem;
  line-height:1.45;
}

.fw-outcome {
  font-size:.85rem;
  padding:.45rem .6rem;
  border-radius:8px;
  background:#f3faf3;
  color:#134b2e;
  border:1px solid rgba(19,75,46,.18);
}

/* Mobile */
@media(max-width: 960px){
  .framework-grid {
    grid-template-columns:1fr;
  }
}



/* === Engagement heading alignment fix === */
.engage-framework h2,
.engage-framework .center {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}


/* === Step 7 — CTA & Contact Advisory Upgrade === */

header .cta,
.navbar .cta,
.top-bar .cta {
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 600;
}

.contact-intro-advisory {
  max-width: 760px;
  margin: 0.6rem auto 1.6rem auto;
  color: #3d4f64;
  text-align: center;
  line-height: 1.55;
  font-size: .95rem;
}

.contact form textarea {
  min-height: 140px;
}



/* Replaced image icons for services */
.service-img-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}



/* === Center service card icons (added) === */
.services-grid img,
.service-card img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4px;
}



/* === service-card-flex-center (added) === */
.service-card, .services-grid .card, .services-grid .service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.service-card img,
.services-grid .card img,
.services-grid .service-card img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4px;
  margin-bottom: 8px;
  max-width: 96px;
  height: auto;
}


/* Force-hide kicker labels in home page services slider to avoid duplicate titles */
.services-slider .service-kicker {
  display: none !important;
}


/* === Responsive navigation (desktop + mobile) === */

/* Toggle button is hidden on desktop */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 1rem;
}

.nav-toggle-line {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--color-text-light);
    margin: 4px 0;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Mobile layout */
@media (max-width: 768px) {
    header .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* Hide desktop CTA on small screens */
    header .cta {
        display: none;
    }

    /* Nav becomes a slide-down panel */
    header .main-nav {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background-color: var(--color-dark);
        padding: 1rem 1.5rem 1.25rem;
        display: none;
        box-shadow: 0 12px 24px rgba(0,0,0,0.25);
        z-index: 20;
    }

    header .main-nav ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    header .main-nav ul li {
        margin: 0 0 0.75rem 0;
    }

    header .main-nav ul li a {
        display: block;
        width: 100%;
        padding: 0.35rem 0;
    }

    /* When nav is open */
    header.nav-open .main-nav {
        display: block;
    }

    header.nav-open .nav-toggle-line:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    header.nav-open .nav-toggle-line:nth-child(2) {
        opacity: 0;
    }
    header.nav-open .nav-toggle-line:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }
}



/* --- Mobile hamburger alignment fix (Step 3) --- */
@media (max-width: 768px) {
  header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .mobile-menu-toggle,
  .menu-toggle,
  .hamburger,
  .nav-toggle {
    position: absolute;
    right: 16px;
    top: 18px;
    margin: 0;
  }
  header .logo,
  .logo {
    margin-left: 0;
  }
}



/* ---- Mobile logo left‑align hard override (v3) ---- */
@media (max-width: 768px) {
  header .container {
    display: flex;
    justify-content: space-between !important;
    align-items: center !important;
  }

  header .logo,
  .logo {
    margin: 0 !important;
    margin-left: 0 !important;
  }

  .logo-image {
    display: block;
    margin: 0 !important;
    max-width: 160px;
    height: auto;
  }
}



/* --- Mobile header full-width tweak (logo closer to edge) --- */
@media (max-width: 768px) {
  header {
    padding: 0;
  }
  header .container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.5rem 0.75rem;
    box-sizing: border-box;
  }
}

/* === FINAL mobile header alignment — force logo left & menu right === */
@media (max-width: 768px) {

  header {
    padding: 0 !important;
  }

  header .container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0.5rem 0.5rem !important;
    box-sizing: border-box !important;
  }

  .logo {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .logo-image {
    display: block !important;
    margin: 0 !important;
    transform: none !important;
  }

  .mobile-nav-toggle {
    margin-left: auto !important;
  }
}


/* Mobile layout for "Why Choose HastyCorp" cards */
@media (max-width: 768px) {
  .benefit-cards {
    flex-direction: column;
    align-items: stretch;
  }
  .benefit {
    width: 100%;
    text-align: left;
  }
  .benefit h3 {
    text-align: left;
  }
}



/* Mobile layout for Our Services slider: stack cards vertically */
@media (max-width: 768px) {
  .services-slider {
    overflow: visible;
  }
  .services-slider-track {
    animation: none;
    display: block;
  }
  .services-slide {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-right: 0;
  }
  .services-slide .service-card {
    max-width: 100%;
  }
}



/* Mobile — keep logo fully left, hamburger fully right (final tweak) */
@media (max-width: 768px) {

  header .container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  header .logo {
    margin: 0;
    padding: 0;
  }

  header .logo img,
  .logo-image {
    margin-left: 0 !important;
  }

  .mobile-menu-toggle {
    margin-left: auto;
  }
}


/* Mobile header logo — final extreme-left alignment tweak */
@media (max-width: 768px) {
  header .logo {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}


/* Static grid layout for Our Services (replaces auto slider) */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    margin-top: 2rem;
}

.services-grid .service-card {
    max-width: 100%;
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile: 1 column */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}


/* Subtle hover effect for service cards (home + services) */
.service-card,
.service-cards .card {
  cursor: pointer;
}

.service-card:hover,
.service-cards .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 112, 243, 0.35);
}


/* Contact form status messages */
.form-status {
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
}

.form-status--success {
  background-color: #e6f9f0;
  color: #056644;
  border: 1px solid #9bd7b3;
}

.form-status--error {
  background-color: #fde8e8;
  color: #a12a2a;
  border: 1px solid #f5b5b5;
}