/* ==========================================================================
   Envirad Projects Pvt. Ltd. — Stylesheet
   Modern, responsive corporate site
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root {
    --blue-900: #06243d;
    --blue-800: #0a3358;
    --blue-700: #0f4d86;
    --blue-600: #1b6cc4;
    --blue-500: #2b8fd6;
    --teal-500: #11a7bd;
    --teal-400: #2ec6d6;
    --accent: #1f9d57;      /* Envirad eco-green */
    --accent-dark: #15803d;
    --green-soft: #eef8f1;
    --ink: #122231;
    --body: #44566a;
    --muted: #61707e;   /* was #6b7a8d = 4.38:1 on white, under the 4.5 floor */
    --line: #e6ecf3;
    --bg: #ffffff;
    --bg-soft: #f4f8fb;
    --bg-deep: #06243d;

    --radius: 14px;
    --radius-sm: 9px;
    --shadow-sm: 0 2px 10px rgba(13, 59, 102, .06);
    --shadow: 0 12px 34px rgba(13, 59, 102, .10);
    --shadow-lg: 0 24px 60px rgba(13, 59, 102, .16);

    --container: 1180px;
    --font-head: 'Sora', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --t: .3s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    color: var(--body);
    background: var(--bg);
    line-height: 1.65;
    font-size: 16px;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.2; font-weight: 700; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 22px; }

/* ---------- Helpers ---------- */
.text-accent { color: var(--accent); }
.eyebrow {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blue-600);
    margin-bottom: 14px;
    position: relative;
    padding-left: 30px;
}
.eyebrow::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 22px; height: 2px;
    background: var(--accent);
    transform: translateY(-50%);
}

.section { padding: clamp(64px, 9vw, 110px) 0; }
.section--soft { background: var(--bg-soft); }
.section__head { max-width: 860px; margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; }
.section__head .eyebrow { padding-left: 0; }
.section__head .eyebrow::before { display: none; }
.section__title { font-size: clamp(1.75rem, 3.4vw, 2.6rem); margin-bottom: 16px; }
.section__lead { color: var(--muted); font-size: 1.06rem; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .96rem;
    padding: 14px 26px;
    border-radius: 50px;
    transition: var(--t);
    white-space: nowrap;
}
.btn i { transition: transform .3s; }
.btn:hover i { transform: translateX(4px); }
/* fill uses --accent-dark: white on #15803d is 5.01:1 (on --accent it was only 3.49:1) */
.btn--primary { background: var(--accent-dark); color: #fff; box-shadow: 0 10px 24px rgba(31, 157, 87, .30); }
.btn--primary:hover { background: #0f6b33; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(31, 157, 87, .40); }
.btn--ghost { background: rgba(255, 255, 255, .12); color: #fff; border: 1.5px solid rgba(255, 255, 255, .5); backdrop-filter: blur(4px); }
.btn--ghost:hover { background: #fff; color: var(--blue-800); border-color: #fff; }
.btn--light { background: #fff; color: var(--blue-800); }
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn--block { width: 100%; justify-content: center; }

/* ---------- Topbar ---------- */
.topbar {
    background: var(--blue-900);
    color: #c7d6e6;
    font-size: .85rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 42px; flex-wrap: wrap; }
.topbar__contact { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar__contact a, .topbar__meta span { display: inline-flex; align-items: center; gap: 7px; }
.topbar__contact a { transition: color .2s; }
.topbar__contact a:hover { color: #fff; }
.topbar__contact i, .topbar__meta i { color: var(--teal-400); }
.topbar__meta { display: flex; gap: 20px; align-items: center; }
.badge-iso { color: var(--accent); font-weight: 600; }
.badge-iso i { color: var(--accent) !important; }

/* ---------- Header ---------- */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .3s, padding .3s;
}
.header.scrolled { box-shadow: var(--shadow-sm); }
.header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 86px; }

.brand { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.brand__logo {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--blue-600), var(--teal-500));
    color: #fff; font-size: 1.25rem;
    box-shadow: 0 6px 16px rgba(27, 108, 196, .3);
}
.brand__text { display: flex; flex-direction: column; align-items: center; line-height: 1.1; text-align: center; }
.brand__text strong { font-family: var(--font-head); font-size: 1.3rem; letter-spacing: .04em; color: var(--blue-800); }
/* tagline is tracked out to sit just inside the logo's visible pill (the PNG carries
   ~0.6% transparent padding each side); the negative right margin cancels the trailing
   letter-space so it stays optically centred under the mark */
.brand__text small {
    font-size: .85rem; letter-spacing: .265em; margin-right: -.265em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
/* footer lockup deliberately shares the header's sizing so the two match exactly;
   only the colours differ (see .brand--footer rules further down) */
.brand__img { height: 52px; width: auto; display: block; flex-shrink: 0; object-fit: contain; }
/* 881-1200px: the horizontal nav gets tight, so scale the mark down */
@media (max-width: 1200px) {
    .brand__img { height: 42px; }
    .brand__text small { font-size: .69rem; }
}
/* <=880px the nav collapses to a hamburger, so the mark can breathe again */
@media (max-width: 1160px) {
    .brand__img { height: 46px; }
    .brand__text small { font-size: .75rem; }
}
@media (max-width: 600px) {
    .header__inner { min-height: 74px; }
    .brand__img { height: 38px; }
    .brand__text small { font-size: .62rem; }
}

.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__foot { display: none; }   /* drawer-only: shown inside the mobile menu */
.nav__link {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: .94rem;
    color: var(--ink);
    padding: 10px 14px;
    border-radius: 8px;
    transition: var(--t);
    position: relative;
}
.nav__link:hover { color: var(--blue-600); }
.nav__link.active { color: var(--blue-600); }
.nav__link.active::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
    height: 2px; background: var(--accent); border-radius: 2px;
}
.nav__link--cta { background: var(--blue-800); color: #fff !important; padding: 10px 22px; margin-left: 8px; }
.nav__link--cta:hover { background: var(--accent); }
.nav__link--cta::after { display: none; }

.nav-toggle { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; padding: 10px; }
.nav-toggle span { height: 2.5px; width: 100%; background: var(--blue-800); border-radius: 2px; transition: var(--t); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: clamp(560px, 88vh, 820px); display: flex; align-items: center; color: #fff; overflow: hidden; }
.hero__photo {
    position: absolute; inset: 0;
    background: url("../images/photos/hero-water.jpg?v=2026100724") center/cover no-repeat;
    transform: scale(1.06);
    animation: heroZoom 18s ease-in-out infinite alternate;
}
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1.16); } }
.hero__bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 80% 20%, rgba(46, 198, 214, .22), transparent 45%),
        radial-gradient(circle at 10% 90%, rgba(31, 157, 87, .20), transparent 42%),
        linear-gradient(135deg, rgba(6, 36, 61, .92) 0%, rgba(15, 77, 134, .85) 55%, rgba(10, 90, 110, .8) 100%);
}
.hero__bg::after {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
}
.hero__overlay {
    position: absolute; right: -8%; bottom: -12%;
    width: 60vw; height: 60vw; max-width: 780px; max-height: 780px;
    background: radial-gradient(circle, rgba(52, 200, 214, .14), transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; padding-block: 60px; }
.hero__content { max-width: 760px; }
.hero__eyebrow {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 600; font-size: .85rem;
    letter-spacing: .08em;
    padding: 8px 18px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50px;
    background: rgba(255, 255, 255, .08);
    margin-bottom: 26px;
}
.hero__title { font-size: clamp(2.1rem, 4.5vw, 3.6rem); font-weight: 800; color: #fff; letter-spacing: -.02em; margin-bottom: 22px; }
/* keep the accented phrase on one line (e.g. "Water & Wastewater" must not split);
   .nowrap binds the preceding word to it so "for Water & Wastewater" stays together */
.hero__title .text-accent,
.hero__title .nowrap { white-space: nowrap; }
@media (max-width: 560px) {
    .hero__title .text-accent,
    .hero__title .nowrap { white-space: normal; }
}
.hero__text { font-size: clamp(1.02rem, 1.7vw, 1.22rem); color: #d4e2f0; max-width: 620px; margin-bottom: 36px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__scroll {
    position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
    z-index: 2; color: rgba(255, 255, 255, .7);
    width: 42px; height: 42px; display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%;
    animation: bob 2s ease-in-out infinite;
}
.hero__scroll:hover { color: #fff; }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ---------- Stats ---------- */
.stats { margin-top: -56px; position: relative; z-index: 5; }
.stats__grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    background: #fff; border-radius: var(--radius);
    box-shadow: var(--shadow); overflow: hidden;
}
.stat { padding: 36px 24px; text-align: center; border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat__num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 4vw, 2.9rem); color: var(--blue-800); line-height: 1;
             white-space: nowrap; }   /* keep the figure and its +/Cr suffix on one line */
.stat__small { font-size: .55em; color: var(--accent-dark); }
.stat__label { margin-top: 10px; font-size: .92rem; color: var(--muted); font-weight: 500; }

/* ---------- About ---------- */
.about__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(36px, 6vw, 72px); align-items: center; }
.about__imgcard { position: relative; }
.about__img {
    aspect-ratio: 4 / 4.4;
    border-radius: var(--radius);
    background: var(--blue-700) center/cover no-repeat;
    box-shadow: var(--shadow-lg);
    position: relative; overflow: hidden;
}
.about__img::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(160deg, transparent 40%, rgba(10, 37, 64, .35));
}
/* "Who We Are" (index.html + about.html): a conceptual growth graphic — three
   decades of ascent since 1988. Replaces the plant photo at the client's request. */
.about__img--main { background-image: url("../images/graphics/leadership-concept.svg?v=2026100724"); }
/* In-house strength section (services.html): surveyor sighting an auto level —
   the engineering/setting-out phase of EPC. Unsplash free licence (Morgan Von Gunten,
   photo G-YbAOA6qqQ), cropped to the card ratio. */
.about__img--workshop { background-image: url("../images/photos/epc-surveyor.jpg?v=2026100724"); }
.about__badge {
    position: absolute; right: -18px; bottom: 32px;
    background: #fff; border-radius: 12px; padding: 16px 22px;
    box-shadow: var(--shadow); text-align: center;
    border-left: 4px solid var(--accent);
}
.about__badge strong { display: block; font-family: var(--font-head); font-size: 1.8rem; color: var(--blue-800); }
.about__badge span { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.about__body p { margin-bottom: 16px; }
.about__points { margin: 22px 0 30px; display: grid; gap: 12px; }
.about__points li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--ink); }
.about__points i { color: var(--teal-500); font-size: 1.15rem; }

/* ---------- Services ---------- */
.services { background: var(--bg-soft); }
.services__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
/* for rows that hold only 3 cards, so they fill the row instead of leaving a gap at the right */
.services__grid--3 { grid-template-columns: repeat(3, 1fr); }
.service-card {
    background: #fff; border-radius: var(--radius); padding: 30px 26px;
    box-shadow: var(--shadow-sm); border: 1px solid var(--line);
    transition: var(--t); position: relative; overflow: hidden;
}
.service-card::before {
    content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%;
    background: linear-gradient(90deg, var(--blue-600), var(--teal-500));
    transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
.service-card:hover { transform: translateY(-7px); box-shadow: var(--shadow); }
.service-card:hover::before { transform: scaleX(1); }
.service-card__icon {
    width: 58px; height: 58px; border-radius: 14px;
    display: grid; place-items: center; font-size: 1.5rem; color: var(--blue-600);
    background: linear-gradient(135deg, rgba(27, 108, 196, .1), rgba(24, 180, 196, .12));
    margin-bottom: 20px; transition: var(--t);
}
.service-card:hover .service-card__icon { background: linear-gradient(135deg, var(--blue-600), var(--teal-500)); color: #fff; }
.service-card h3 { font-size: 1.12rem; margin-bottom: 10px; }
.service-card p { font-size: .94rem; color: var(--muted); }
a.service-card { display: block; color: inherit; text-decoration: none; }
.service-card__link { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--blue-600); transition: gap .25s; }
a.service-card:hover .service-card__link { gap: 12px; }

/* ---------- Projects ---------- */
.projects__filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filter-btn {
    font-family: var(--font-head); font-weight: 500; font-size: .9rem;
    padding: 9px 22px; border-radius: 50px; color: var(--body);
    background: var(--bg-soft); border: 1px solid var(--line); transition: var(--t);
}
.filter-btn:hover { color: var(--blue-600); border-color: var(--blue-500); }
.filter-btn.is-active { background: var(--blue-800); color: #fff; border-color: var(--blue-800); }

.projects__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.project-card {
    background: #fff; border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow-sm); border: 1px solid var(--line);
    transition: var(--t); display: flex; flex-direction: column;
    position: relative;
}
.project-card.hide { display: none; }
.project-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.project-card__media {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden;
    display: grid; place-items: center; font-size: 2rem; color: #fff;
    background: var(--blue-700) center/cover no-repeat;
}
.project-card__media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10, 37, 64, .12) 0%, rgba(10, 37, 64, .05) 45%, rgba(10, 37, 64, .55) 100%);
    transition: background .35s;
}
.project-card:hover .project-card__media { }
.project-card:hover .project-card__media img,
.project-card__media img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease; z-index: 0;
}
.project-card:hover .project-card__media img { transform: scale(1.07); }
.project-card__media::after { z-index: 1; }
.project-card__tag {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    font-family: var(--font-head); font-size: .72rem; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase;
    background: rgba(10, 37, 64, .62); color: #fff;
    padding: 5px 12px; border-radius: 50px; backdrop-filter: blur(4px);
}
.project-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.project-card__body h3 { font-size: 1.15rem; margin-bottom: 10px; }
.project-card__body p { font-size: .92rem; color: var(--muted); margin-bottom: 18px; flex: 1; }
.project-card__meta { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); font-size: .86rem; }
.project-card__meta i { color: var(--teal-500); margin-right: 5px; }
.project-card__cost { font-family: var(--font-head); font-weight: 700; color: var(--accent-dark); }
/* Whole card is clickable via a stretched overlay link */
.project-card__stretch { position: absolute; inset: 0; z-index: 3; text-indent: -9999px; overflow: hidden; }
/* Highlighted "View project" pill (sits above the stretch overlay so its hover shows) */
.project-card__link {
    position: relative; z-index: 4; font-family: var(--font-head); font-weight: 600;
    color: var(--blue-700); display: inline-flex; align-items: center; gap: 7px;
    background: rgba(31, 110, 180, .10); padding: 7px 15px; border-radius: 50px;
    transition: background .2s, color .2s, gap .2s;
}
.project-card__link:hover { background: var(--blue-700); color: #fff; gap: 11px; }
.project-card__link i { font-size: .78rem; }
/* Centered 2-card row (solution-page "Related Projects") */
.projects__grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
.projects__note {
    margin-top: 36px; background: var(--bg-soft); border: 1px solid var(--line);
    border-left: 4px solid var(--teal-500); border-radius: var(--radius-sm);
    padding: 22px 24px; font-size: .92rem; color: var(--body);
}
.projects__note i { color: var(--teal-500); margin-right: 8px; }
.projects__more {
    margin-top: 44px; background: var(--bg-soft); border: 1px solid var(--line);
    border-left: 4px solid var(--teal-500); border-radius: var(--radius-sm);
    padding: 30px 32px;
}
.projects__more .section__title { margin-bottom: 20px; }
.projects__more-list {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 32px;
}
.projects__more-list li {
    display: flex; align-items: flex-start; gap: 12px; color: var(--body); font-weight: 500;
}
.projects__more-list li i { color: var(--teal-500); margin-top: 4px; flex-shrink: 0; }
@media (max-width: 720px) { .projects__more-list { grid-template-columns: 1fr; } }

/* ---------- Band ---------- */
.band { background: var(--bg-deep); color: #fff; padding: clamp(50px, 7vw, 78px) 0; }
.band__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.band__item { text-align: center; padding: 10px; }
.band__item i {
    font-size: 2rem; color: var(--teal-400); margin-bottom: 16px;
    width: 66px; height: 66px; display: inline-grid; place-items: center;
    border-radius: 50%; background: rgba(52, 200, 214, .12);
}
.band__item h3 { color: #fff; font-size: 1.12rem; margin-bottom: 8px; }
.band__item p { color: #b6c6d6; font-size: .92rem; }

/* ---------- Team ---------- */
.team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.team__grid--4 { grid-template-columns: repeat(4, 1fr); }
.team-card {
    background: #fff; border-radius: var(--radius); padding: 32px 28px;
    box-shadow: var(--shadow-sm); border: 1px solid var(--line);
    text-align: center; transition: var(--t);
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.team-card__avatar {
    width: 72px; height: 72px; margin: 0 auto 18px;
    display: grid; place-items: center; border-radius: 50%;
    font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: #fff;
    background: linear-gradient(135deg, var(--blue-700), var(--teal-500));
    box-shadow: 0 8px 20px rgba(27, 108, 196, .28);
}
.team-card h3 { font-size: 1.18rem; margin-bottom: 4px; }
.team-card__role { display: inline-block; font-family: var(--font-head); font-weight: 600; font-size: .82rem; color: var(--accent-dark); margin-bottom: 12px; }
.team-card__edu { font-size: .85rem; color: var(--blue-700); font-weight: 600; margin-bottom: 12px; }
.team-card__bio { font-size: .9rem; color: var(--muted); }
.team-groups { display: grid; gap: 26px; }
.team__grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; width: 100%; }
.team-card--lead { border-color: var(--teal-500); box-shadow: 0 14px 34px rgba(27, 108, 196, .16); position: relative; overflow: hidden; }
.team-card--lead::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--blue-700), var(--teal-500));
}
.team-card--lead .team-card__avatar { width: 84px; height: 84px; font-size: 1.6rem; }

/* ---------- Infrastructure ---------- */
.infra { background: var(--bg-soft); }
.infra__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(36px, 5vw, 60px); align-items: center; }
.infra__body p { margin-bottom: 24px; }
.infra__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.infra__col h4 { font-size: 1.05rem; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; color: var(--blue-800); }
.infra__col h4 i { color: var(--teal-500); }
.infra__col ul { display: grid; gap: 9px; }
.infra__col li { position: relative; padding-left: 20px; font-size: .92rem; color: var(--body); }
.infra__col li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.infra__media { display: grid; gap: 18px; }
.infra__note {
    display: flex; align-items: flex-start; gap: 10px; margin: 0;
    background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--teal-500);
    border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow-sm);
    font-size: .92rem; line-height: 1.5; color: var(--body);
}
.infra__note i { color: var(--teal-500); margin-top: 3px; }
.infra__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.infra-stat {
    background: #fff; border-radius: var(--radius-sm); padding: 26px 18px; text-align: center;
    box-shadow: var(--shadow-sm); border: 1px solid var(--line); border-bottom: 3px solid var(--teal-500);
}
.infra-stat strong { display: block; font-family: var(--font-head); font-size: 2.1rem; color: var(--blue-800); line-height: 1; }
.infra-stat span { font-size: .82rem; color: var(--muted); }

/* ---------- Clients ---------- */
.clients__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 40px; }
.client-chip {
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    padding: 18px 16px; text-align: center; font-family: var(--font-head);
    font-weight: 500; font-size: .9rem; color: var(--ink);
    box-shadow: var(--shadow-sm); transition: var(--t);
    display: flex; align-items: center; justify-content: center; min-height: 64px;
}
.client-chip:hover { transform: translateY(-4px); border-color: var(--blue-500); color: var(--blue-700); box-shadow: var(--shadow); }
.clients__sectors { text-align: center; padding-top: 12px; }
.clients__sectors p { font-family: var(--font-head); font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.clients__sectors span {
    display: inline-block; margin: 5px; padding: 7px 16px;
    background: rgba(27, 108, 196, .08); color: var(--blue-700);
    border-radius: 50px; font-size: .86rem; font-weight: 500;
}

/* ---------- CTA ---------- */
.cta {
    background:
        radial-gradient(circle at 85% 20%, rgba(52, 200, 214, .22), transparent 45%),
        linear-gradient(120deg, var(--accent), var(--accent-dark));
    color: #fff; padding: clamp(56px, 8vw, 90px) 0;
}
.cta__inner { text-align: center; max-width: 720px; margin: 0 auto; }
.cta__inner h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: 14px; }
.cta__inner p { color: rgba(255, 255, 255, .92); font-size: 1.1rem; margin-bottom: 30px; }

/* ---------- Contact ---------- */
.contact__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 5vw, 60px); align-items: start; }
.contact__lead { margin-bottom: 30px; color: var(--muted); }
.contact__list { display: grid; gap: 22px; }
.contact__list li { display: flex; gap: 18px; align-items: flex-start; }
.contact__ico {
    flex: none; width: 50px; height: 50px; border-radius: 12px;
    display: grid; place-items: center; font-size: 1.15rem; color: #fff;
    background: linear-gradient(135deg, var(--blue-700), var(--teal-500));
}
.contact__list strong { display: block; font-family: var(--font-head); color: var(--ink); margin-bottom: 3px; font-size: 1rem; }
.contact__list a:hover { color: var(--blue-600); }

.contact__form-wrap { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(26px, 4vw, 40px); border: 1px solid var(--line); }
.contact__form h3 { font-size: 1.35rem; margin-bottom: 22px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; font-family: var(--font-head); }
.form-group input, .form-group textarea {
    width: 100%; padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 10px;
    font-family: inherit; font-size: .95rem; color: var(--ink); background: var(--bg-soft); transition: var(--t);
}
.form-group input:focus, .form-group textarea:focus {
    outline: none; border-color: var(--blue-500); background: #fff;
    box-shadow: 0 0 0 4px rgba(27, 108, 196, .1);
}
.form-group input.invalid, .form-group textarea.invalid { border-color: #e0484b; background: #fef5f5; }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-note { margin-top: 14px; font-size: .9rem; font-weight: 500; min-height: 20px; }
.form-note.ok { color: #15a06a; }
.form-note.err { color: #e0484b; }

/* ---------- Map ---------- */
.map-wrap { line-height: 0; border-top: 1px solid var(--line); }
.map-wrap iframe { display: block; filter: grayscale(.15); }

/* ---------- Footer ---------- */
.footer { background: var(--blue-900); color: #aebfd0; padding-top: clamp(50px, 7vw, 78px); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.5fr; gap: 36px; padding-bottom: 50px; }
.brand--footer .brand__text strong { color: #fff; }
.brand--footer .brand__text small { color: var(--teal-400); }
.footer__about p { margin-top: 18px; font-size: .92rem; max-width: 320px; }
.footer__col h4 { color: #fff; font-size: 1.05rem; margin-bottom: 18px; }
.footer__col ul { display: grid; gap: 11px; }
.footer__col a { font-size: .92rem; transition: color .2s; }
/* scope to the link LISTS only — `.footer__col a` also matches the footer brand link
   and turning that inline-block killed its flex `gap`, collapsing the logo/tagline spacing */
.footer__col ul a { display: inline-block; }
.footer__col a:hover { color: var(--teal-400); }
.footer__contact li { display: flex; gap: 11px; font-size: .9rem; align-items: flex-start; margin-bottom: 11px; }
.footer__contact i { color: var(--teal-400); margin-top: 4px; }
.footer__bar { border-top: 1px solid rgba(255, 255, 255, .1); padding: 22px 0; }
.footer__bar-inner { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .85rem; }
.footer__bar p:last-child { color: var(--teal-400); font-family: var(--font-head); }

/* ---------- Back to top ---------- */
.to-top {
    position: fixed; right: 24px; bottom: 24px; z-index: 90;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--blue-800); color: #fff; font-size: 1rem;
    display: grid; place-items: center; box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(14px); transition: var(--t);
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--accent); transform: translateY(-3px); }

/* ---------- Page banner (inner pages) ---------- */
.page-banner { position: relative; color: #fff; overflow: hidden; padding: clamp(32px, 5vw, 56px) 0 clamp(26px, 4vw, 42px); }
.page-banner__bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 82% 18%, rgba(46, 198, 214, .26), transparent 46%),
        radial-gradient(circle at 8% 92%, rgba(31, 157, 87, .22), transparent 44%),
        linear-gradient(125deg, var(--blue-900) 0%, var(--blue-700) 60%, #0c5a6e 100%);
}
.page-banner__bg::after {
    content: ""; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(circle at 60% 30%, #000 0%, transparent 80%);
}
.page-banner__inner { position: relative; z-index: 2; }
.page-banner h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px; }
.page-banner p { color: #d4e2f0; font-size: clamp(1rem, 1.6vw, 1.18rem); max-width: none; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: .86rem; color: #9fc0dc; margin-bottom: 20px; font-family: var(--font-head); }
.breadcrumb a { transition: color .2s; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb i { font-size: .65rem; opacity: .7; }
.breadcrumb span { color: var(--teal-400); }

/* ---------- Section CTA row (home previews) ---------- */
.section__cta { text-align: center; margin-top: clamp(34px, 5vw, 50px); }

/* ---------- Figure (image card) ---------- */
.figure { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); line-height: 0; }
.figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.figure:hover img { transform: scale(1.05); }
.figure--wide { aspect-ratio: 16 / 7; }
.figure--tall { aspect-ratio: 4 / 3; }
.figure__cap {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 16px 18px; color: #fff; font-family: var(--font-head);
    font-size: .9rem; font-weight: 600; line-height: 1.3;
    background: linear-gradient(transparent, rgba(10, 37, 64, .78));
}

/* ---------- Process steps ---------- */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.process__step {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 32px 26px; box-shadow: var(--shadow-sm); position: relative; transition: var(--t);
}
.process__step:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.process__num {
    font-family: var(--font-head); font-weight: 800; font-size: 2.4rem;
    line-height: 1; color: transparent;
    -webkit-text-stroke: 1.5px var(--blue-500); display: block; margin-bottom: 16px;
}
.process__step h3 { font-size: 1.12rem; margin-bottom: 10px; }
.process__step p { font-size: .92rem; color: var(--muted); }
@media (max-width: 1024px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .process { grid-template-columns: 1fr; } }

/* ---------- Reveal animation ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
[data-reveal].in { opacity: 1; transform: none; }

/* ==========================================================================
   NEW COMPONENTS (reference-inspired upgrade)
   ========================================================================== */

/* ---------- Mega-menu / dropdowns ---------- */
.nav__list { position: relative; }
.has-dropdown { position: relative; }
.nav__caret { font-size: .6rem; margin-left: 5px; opacity: .65; transition: transform .3s; }
.has-dropdown:hover .nav__caret { transform: rotate(180deg); }

.dropdown, .megamenu {
    position: absolute; top: calc(100% + 8px); left: 0;
    background: #fff; border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--shadow-lg); padding: 14px;
    opacity: 0; visibility: hidden; transform: translateY(12px);
    transition: opacity .25s, transform .25s, visibility .25s; z-index: 130;
}
.dropdown { display: grid; gap: 2px; min-width: 240px; }
.has-dropdown:hover > .dropdown,
.has-dropdown:hover > .megamenu { opacity: 1; visibility: visible; transform: none; }

.dropdown a, .megamenu a {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 11px 14px; border-radius: 10px;
    font-family: var(--font-head); font-weight: 500; font-size: .92rem; line-height: 1.45;
    color: var(--ink); transition: var(--t);
}
.dropdown a i, .megamenu a i { color: var(--teal-500); width: 18px; text-align: center; font-size: .95rem; line-height: inherit; }
.dropdown a:hover, .megamenu a:hover { background: var(--bg-soft); color: var(--blue-700); }
.dropdown a:hover i, .megamenu a:hover i { color: var(--accent); }

.megamenu { width: 680px; max-width: calc(100vw - 44px); padding: 22px; left: 0; }
.has-dropdown:hover > .megamenu { transform: none; }
.megamenu__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 22px; }
.megamenu__col h5 {
    font-family: var(--font-head); font-size: .7rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted); margin: 6px 0 6px 14px;
}
.megamenu__foot {
    grid-column: 1 / -1; margin-top: 14px; padding-top: 16px;
    border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.megamenu__foot span { font-size: .9rem; color: var(--muted); padding-left: 14px; }

/* ---------- Hero carousel ---------- */
.hero--carousel .hero__photo { display: none; }
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
    position: absolute; inset: 0; background: center/cover no-repeat;
    opacity: 0; transform: scale(1.1); transition: opacity 1.1s ease;
}
.hero__slide.is-active { opacity: 1; animation: heroZoom 9s ease-out forwards; }
.hero__track { display: grid; }
.hero__panel {
    grid-area: 1 / 1; max-width: 760px;
    opacity: 0; visibility: hidden; transform: translateY(22px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
    pointer-events: none;
}
.hero__panel.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.hero__dots { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 4; display: flex; gap: 2px; }
/* the dot stays 11px visually, but ::before gives it a 28px touch target (WCAG 2.5.8) */
.hero__dot { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.4); transition: var(--t); position: relative; }
.hero__dot::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; }
/* pause/play control — WCAG 2.2.2 requires a way to stop auto-advancing content */
.hero__pause {
    width: 28px; height: 28px; margin-left: 8px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .5);
    font-size: .62rem; transition: var(--t);
}
.hero__pause:hover { background: rgba(255, 255, 255, .34); }
.hero__dot.is-active { background: var(--accent); transform: scale(1.25); }
.hero__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 50px; height: 50px; border-radius: 50%; color: #fff;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.32);
    backdrop-filter: blur(6px); display: grid; place-items: center; font-size: 1rem; transition: var(--t);
}
.hero__arrow:hover { background: var(--accent); border-color: var(--accent); }
.hero__arrow--prev { left: 22px; }
.hero__arrow--next { right: 22px; }

/* ---------- Full-spectrum wheel ---------- */
.wheel-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.wheel { position: relative; width: min(540px, 92vw); aspect-ratio: 1; margin: 0 auto; }
.wheel__ring { position: absolute; inset: 12%; border: 2px dashed rgba(27,108,196,.28); border-radius: 50%; }
.wheel__hub {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 42%; aspect-ratio: 1; border-radius: 50%; padding: 16px; text-align: center;
    background: linear-gradient(140deg, var(--blue-700), var(--teal-500));
    color: #fff; display: grid; place-items: center; box-shadow: 0 16px 40px rgba(15,77,134,.35); z-index: 2;
}
.wheel__hub strong { font-family: var(--font-head); font-size: clamp(.95rem, 1.8vw, 1.2rem); line-height: 1.2; display: block; }
.wheel__hub span { font-size: .72rem; opacity: .85; margin-top: 6px; display: block; }
.wheel__node {
    position: absolute; transform: translate(-50%, -50%);
    width: clamp(86px, 17vw, 116px); text-align: center;
}
.wheel__node .ico {
    width: 50px; height: 50px; margin: 0 auto 6px; border-radius: 14px;
    display: grid; place-items: center; font-size: 1.25rem; color: #fff;
    background: linear-gradient(135deg, var(--blue-600), var(--teal-500));
    box-shadow: var(--shadow-sm); transition: var(--t);
}
.wheel__node:hover .ico { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); transform: translateY(-3px); }
.wheel__node small { font-family: var(--font-head); font-weight: 600; font-size: .76rem; color: var(--ink); line-height: 1.2; display: block; }
.wheel__node.n1 { top: 0; left: 50%; }
.wheel__node.n2 { top: 25%; left: 93%; }
.wheel__node.n3 { top: 75%; left: 93%; }
.wheel__node.n4 { top: 100%; left: 50%; }
.wheel__node.n5 { top: 75%; left: 7%; }
.wheel__node.n6 { top: 25%; left: 7%; }
.wheel-grid { display: none; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.wheel-grid .wheel__node { position: static; transform: none; width: auto; display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.wheel-grid .wheel__node .ico { margin: 0; width: 40px; height: 40px; font-size: 1.05rem; }

/* ---------- Sectors ---------- */
.sectors__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* homepage sectors preview holds only 3 cards — widen them to fill the row instead of
   leaving a gap (the media queries below still take over at tablet/mobile widths) */
.sectors__grid--3 { grid-template-columns: repeat(3, 1fr); }
.sector-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 22px; box-shadow: var(--shadow-sm); transition: var(--t);
    position: relative; overflow: hidden;
    /* column layout so the tag row can be pushed to the foot of the card — without
       this, cards with shorter copy float their tags up and the row looks ragged */
    display: flex; flex-direction: column;
}
.sector-card::before {
    content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%;
    background: linear-gradient(90deg, var(--accent), var(--teal-500));
    transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
.sector-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.sector-card:hover::before { transform: scaleX(1); }
.sector-card__icon {
    width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center;
    font-size: 1.35rem; color: var(--blue-600); margin-bottom: 16px; transition: var(--t);
    background: linear-gradient(135deg, rgba(27,108,196,.1), rgba(17,167,189,.12));
}
.sector-card:hover .sector-card__icon { background: linear-gradient(135deg, var(--blue-600), var(--teal-500)); color: #fff; }
.sector-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.sector-card p { font-size: .9rem; color: var(--muted); }
.sector-card__tags { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.sector-card__tags span { font-size: .72rem; background: var(--bg-soft); border: 1px solid var(--line); color: var(--blue-700); padding: 3px 9px; border-radius: 50px; }

/* ---------- Presence / Where We Work ---------- */
.presence { background: var(--bg-soft); }
.presence__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(34px, 5vw, 60px); align-items: center; }
.presence__states { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.presence__states span {
    background: #fff; border: 1px solid var(--line); border-radius: 50px;
    padding: 8px 16px; font-size: .88rem; font-weight: 500; color: var(--blue-800);
    font-family: var(--font-head); box-shadow: var(--shadow-sm);
}
.presence__map {
    position: relative; aspect-ratio: 0.92 / 1; border-radius: var(--radius);
    background:
        radial-gradient(circle at 38% 28%, rgba(46,198,214,.18), transparent 58%),
        linear-gradient(160deg, #082c4a, #0f4d86);
    box-shadow: var(--shadow-lg); overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
}
.presence__map::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 40px 40px; mask-image: radial-gradient(circle at 50% 45%, #000, transparent 80%);
}
.presence__map .india-svg { position: relative; z-index: 1; width: 100%; height: 100%; display: block; padding: 4px; }
.map-dot { position: absolute; z-index: 2; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 0 rgba(31,157,87,.6); animation: ping 2.4s ease-out infinite; }
.map-dot::after { content: attr(data-city); position: absolute; left: 17px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: .74rem; font-weight: 600; color: #eaf3fb; font-family: var(--font-head); text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.map-dot--hq { width: 16px; height: 16px; background: var(--teal-400); box-shadow: 0 0 0 0 rgba(46,198,214,.6); animation: ping 2.4s ease-out infinite; }
.map-dot--hq::after { content: attr(data-city); font-weight: 700; color: #fff; }
.map-dot.teal { background: var(--teal-400); box-shadow: 0 0 0 0 rgba(46,198,214,.6); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(31,157,87,.55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(31,157,87,0); } }

/* ---------- Ops band (24x7 O&M) ---------- */
.opsband { background: linear-gradient(120deg, var(--blue-900), var(--blue-700)); color: #fff; padding: clamp(50px, 7vw, 84px) 0; position: relative; overflow: hidden; }
.opsband::after { content: ""; position: absolute; right: -8%; top: -30%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(46,198,214,.16), transparent 65%); }
.opsband__grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(30px, 5vw, 56px); align-items: center; position: relative; z-index: 1; }
.opsband__big { font-family: var(--font-head); font-weight: 800; font-size: clamp(3rem, 8vw, 5.2rem); line-height: 1; color: #fff; }
.opsband__big span { color: var(--teal-400); }
.opsband__lead { color: #c7d6e6; margin-top: 12px; }
.opsband__feats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.opsband__feat i { color: var(--teal-400); font-size: 1.5rem; margin-bottom: 10px; }
.opsband__feat h4 { color: #fff; font-size: 1.04rem; margin-bottom: 6px; }
.opsband__feat p { color: #aebfd0; font-size: .9rem; }

/* ---------- Insights / news ---------- */
.insights__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.news-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--t); display: flex; flex-direction: column; }
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.news-card__media { aspect-ratio: 16/9; background: var(--blue-700) center/cover no-repeat; position: relative; }
.news-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(6,36,61,.4)); }
.news-card__date { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(6,36,61,.66); color: #fff; font-family: var(--font-head); font-size: .72rem; padding: 5px 11px; border-radius: 50px; backdrop-filter: blur(4px); }
.news-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.news-card__tag { font-family: var(--font-head); font-weight: 600; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 8px; }
.news-card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.news-card p { font-size: .9rem; color: var(--muted); margin-bottom: 16px; flex: 1; }
.news-card__link { font-family: var(--font-head); font-weight: 600; font-size: .88rem; color: var(--blue-700); display: inline-flex; gap: 8px; align-items: center; }
.news-card__link i { transition: transform .3s; }
.news-card:hover .news-card__link i { transform: translateX(4px); }

/* ---------- Careers form ---------- */
.contact__form-wrap--wide { max-width: 840px; margin: 0 auto; }
.form-group select {
    width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px;
    font: inherit; font-size: 1rem; color: var(--ink); background: #fff; transition: var(--t);
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%2362768c' d='M1.4 0 7 5.6 12.6 0 14 1.4 7 8.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px;
}
.form-group select:focus { border-color: var(--blue-500); outline: none; box-shadow: 0 0 0 3px rgba(31,110,180,.12); }
.form-group input[type="file"] {
    width: 100%; padding: 11px 14px; border: 1px dashed var(--line); border-radius: 10px;
    background: var(--soft); font: inherit; font-size: .92rem; cursor: pointer;
}
.form-group input[type="file"]:focus { border-color: var(--blue-500); outline: none; }
.form-group input[type="file"]::file-selector-button {
    font: inherit; font-weight: 600; margin-right: 12px; padding: 8px 14px; cursor: pointer;
    border: 0; border-radius: 7px; background: var(--blue-700); color: #fff;
}
.field-hint { display: block; margin-top: 7px; font-size: .8rem; color: var(--muted); }
.req { color: #d4494c; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-alert { display: none; margin-bottom: 22px; padding: 14px 18px; border-radius: 10px; font-size: .92rem; font-weight: 500; }
.form-alert.show { display: block; }
.form-alert.ok { background: #e8f6ee; color: #1d6b43; border: 1px solid #b7e2c8; }
.form-alert.err { background: #fdeced; color: #9c2b2e; border: 1px solid #f3c3c5; }

/* ---------- Resources / downloads ---------- */
.downloads__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.resource-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); transition: var(--t); display: flex; flex-direction: column; gap: 14px; }
.resource-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.resource-card__icon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; color: var(--accent); background: var(--green-soft); }
.resource-card h3 { font-size: 1.1rem; }
.resource-card p { font-size: .9rem; color: var(--muted); flex: 1; }
.resource-card__meta { font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.resource-card .btn { align-self: flex-start; }

/* ---------- Generic split + checklist + specs (solution pages) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.split--media-first .split__media { order: -1; }
.checklist { display: grid; gap: 13px; margin: 4px 0 8px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--body); }
.checklist i { color: var(--accent); margin-top: 4px; font-size: 1.05rem; flex: none; }
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.solution-figure { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4/3; }
.solution-figure img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Milestones timeline ---------- */
.timeline { position: relative; max-width: 840px; margin: 0 auto; }
.timeline::before { content: ""; position: absolute; left: 19px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline__item { position: relative; padding: 0 0 30px 58px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before { content: ""; position: absolute; left: 12px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px var(--green-soft); }
.timeline__year { font-family: var(--font-head); font-weight: 700; color: var(--blue-700); font-size: 1.08rem; }
.timeline__item p { font-size: .94rem; color: var(--body); margin-top: 4px; }

/* ---------- Certifications ---------- */
.certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cert { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 22px; text-align: center; box-shadow: var(--shadow-sm); transition: var(--t); }
.cert:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.cert i { font-size: 2rem; color: var(--accent); margin-bottom: 14px; }
.cert h4 { font-size: 1rem; margin-bottom: 6px; }
.cert p { font-size: .85rem; color: var(--muted); }

/* ---------- Footer mega ---------- */
.footer__grid--mega { grid-template-columns: 1.7fr 1fr 1fr 1fr 1.4fr; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
    .services__grid { grid-template-columns: repeat(2, 1fr); }
    .projects__grid { grid-template-columns: repeat(2, 1fr); }
    .team__grid, .team__grid--4 { grid-template-columns: repeat(2, 1fr); }
    .clients__grid { grid-template-columns: repeat(3, 1fr); }
    .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1160px) {
    .nav {
        position: fixed; inset: 0 0 0 auto; width: min(320px, 84vw);
        background: #fff; box-shadow: -10px 0 40px rgba(10, 37, 64, .16);
        transform: translateX(100%); transition: transform .35s ease, visibility .35s; z-index: 120;
        padding: 90px 26px 40px; overflow-y: auto;
        /* visibility:hidden takes the closed drawer OUT of the tab order — without it the
           off-screen links stay keyboard-focusable and focus vanishes off the right edge */
        visibility: hidden;
    }
    .nav.open { transform: translateX(0); visibility: visible; }
    .nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
    .nav__link { padding: 14px 16px; border-radius: 10px; font-size: 1rem; }
    .nav__link.active::after { display: none; }
    .nav__link.active { background: var(--bg-soft); }
    .nav__link--cta { margin-left: 0; margin-top: 10px; text-align: center; }
    .nav-toggle { display: flex; z-index: 130; }
    .nav-backdrop { position: fixed; inset: 0; background: rgba(10, 37, 64, .5); opacity: 0; visibility: hidden; transition: var(--t); z-index: 110; }
    .nav-backdrop.show { opacity: 1; visibility: visible; }

}

@media (max-width: 620px) {
    .topbar__meta { display: none; }
    .topbar__inner { justify-content: center; }
    .stats { margin-top: -40px; }
    .stats__grid { grid-template-columns: 1fr 1fr; }
    .stat { border-right: none; border-bottom: 1px solid var(--line); }
    .stat:nth-child(odd) { border-right: 1px solid var(--line); }
    .stat:nth-last-child(-n+2) { border-bottom: none; }
    .services__grid { grid-template-columns: 1fr; }
    .projects__grid { grid-template-columns: 1fr; }
    .team__grid { grid-template-columns: 1fr; }
    .infra__cols { grid-template-columns: 1fr; }
    .infra__stats { grid-template-columns: 1fr 1fr; }
    .clients__grid { grid-template-columns: 1fr 1fr; }
    .band__grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr; }
    .about__badge { right: 12px; }
    .hero__actions .btn { flex: 1; justify-content: center; }
}

/* ---- New components: responsive ---- */
@media (max-width: 1024px) {
    .sectors__grid, .insights__grid, .downloads__grid, .certs { grid-template-columns: repeat(2, 1fr); }
    .wheel-wrap, .presence__grid, .opsband__grid, .split { grid-template-columns: 1fr; }
    .footer__grid--mega { grid-template-columns: 1fr 1fr 1fr; }
    .split--media-first .split__media { order: 0; }
}

@media (max-width: 1160px) {
    /* Mega-menu becomes accordion inside the mobile drawer */
    .has-dropdown { display: block; }
    .nav__caret { float: right; padding: 4px; }
    .dropdown, .megamenu {
        position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: none; border-radius: 0; padding: 0 0 4px 14px;
        min-width: 0; max-height: 0; overflow: hidden; transition: max-height .35s ease;
    }
    .has-dropdown.open > .dropdown, .has-dropdown.open > .megamenu { max-height: 720px; }
    .has-dropdown.open .nav__caret { transform: rotate(180deg); }
    .megamenu__grid { grid-template-columns: 1fr; gap: 0; }
    .megamenu__foot { flex-direction: column; align-items: flex-start; gap: 10px; }
    .megamenu__foot span { padding-left: 14px; }
    .dropdown a, .megamenu a { padding: 10px 12px; }

    /* Wheel collapses to a grid list */
    .wheel { display: none; }
    .wheel-grid { display: grid; }

    .hero__dots { bottom: 50px; }
}

@media (max-width: 620px) {
    .sectors__grid, .insights__grid, .downloads__grid, .certs, .specs { grid-template-columns: 1fr; }
    .opsband__feats { grid-template-columns: 1fr; }
    .footer__grid--mega { grid-template-columns: 1fr; }
    .wheel-grid { grid-template-columns: 1fr; }
    .hero__arrow { display: none; }
    .presence__map { aspect-ratio: 4 / 4.2; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    [data-reveal] { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
    .hero__slide { opacity: 1; }
}

/* ==========================================================================
   Polish pass
   ========================================================================== */
/* Cross-page hash links shouldn't hide under the sticky header */
section[id], .service-card[id], [id].section { scroll-margin-top: 100px; }

/* Hero legibility over photography */
.hero { min-height: clamp(580px, 90vh, 860px); }
.hero__title { text-shadow: 0 2px 26px rgba(2, 18, 32, .35); }
.hero__text { text-shadow: 0 1px 14px rgba(2, 18, 32, .35); }
.hero__eyebrow { background: rgba(6, 36, 61, .35); border-color: rgba(255, 255, 255, .35); }

/* Solution figure zoom */
.solution-figure { position: relative; }
.solution-figure img { transition: transform .6s ease; }
.solution-figure:hover img { transform: scale(1.05); }

/* Slightly richer cards */
.service-card, .sector-card, .news-card, .resource-card, .project-card, .team-card, .cert, .infra-stat { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; }

/* Section eyebrow chips a touch more refined.
   --accent-dark (not --accent) so small green text clears 4.5:1 on white and on --bg-soft */
.eyebrow { color: var(--accent-dark); }
.section__head .eyebrow { color: var(--blue-600); }

/* About image taller crop reads better with real photos */
.about__img { aspect-ratio: 4 / 4.6; }

/* Project/news media: subtle zoom already; ensure photos aren't over-darkened */
.project-card__media::after { background: linear-gradient(180deg, rgba(6,36,61,.05) 0%, rgba(6,36,61,.04) 45%, rgba(6,36,61,.5) 100%); }

/* ---- Gallery strip ---- */
/* flex (not grid) so an incomplete last row CENTRES instead of leaving a trailing gap
   at tablet/desktop widths; basis math keeps 4 columns edge-to-edge (gap 14px) */
.gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.gallery__item { position: relative; flex: 0 1 calc(33.333% - 13.34px); aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6,36,61,.5)); opacity: 0; transition: opacity .3s; }
.gallery__item:hover::after { opacity: .55; }
.gallery__item.hide { display: none; }
.filter-btn span { opacity: .55; font-weight: 600; margin-left: 5px; }
.gallery__item--wide { grid-column: span 2; }
.gallery__item--tall { grid-row: span 2; }
@media (max-width: 1024px) { .gallery__item { flex-basis: calc(50% - 10px); } }
@media (max-width: 620px) { .gallery__item { flex-basis: 100%; } }

/* ==========================================================================
   Mobile touch targets — MUST stay last in the file. Placed earlier, a later
   same-specificity rule wins and these silently do nothing.
   ========================================================================== */
@media (max-width: 1160px) {
    /* footer nav links were 18px tall. 5px padding gives a ~28px target — tighter than
       the earlier 42px but still clear of the WCAG 2.5.8 24px minimum. */
    .footer__col ul a { padding: 5px 0; line-height: 1.35; }
    .footer__col ul { gap: 0; }
    .footer__col h4 { margin-bottom: 10px; }
    .footer__contact li { margin-bottom: 7px; line-height: 1.45; }
    /* tap-to-call / tap-to-email are primary mobile actions — were 20-22px */
    .topbar__contact a { padding: 5px 0; }
    .contact__list a, .footer__contact a { display: inline-block; padding: 5px 0; }
    .breadcrumb a { display: inline-block; padding: 4px 0; }

    /* The megamenu keeps `width:680px; max-width:calc(100vw - 44px)` from the desktop
       rule — that's sized to the VIEWPORT (331px), not the drawer's content box, so it
       overflowed and gave the open menu a horizontal scrollbar. Let it size to the drawer. */
    .dropdown, .megamenu { width: auto; max-width: none; }
    .megamenu__foot .btn { max-width: 100%; white-space: normal; }

    /* submenu labels were wrapping to two lines ("Sewerage & Sewage Treatment" needed
       231px in 197px) — reclaim width from the indent/padding/gap and trim the type
       slightly so every label sits on one line */
    .nav { width: min(340px, 90vw); }
    .dropdown, .megamenu { padding-left: 8px; }
    .dropdown a, .megamenu a { padding: 10px 9px; gap: 9px; font-size: .875rem; }

    /* `.megamenu a` (0,1,1) outranks `.btn--primary` (0,1,0), so the CTA inherited the
       dark link colour instead of white — dark navy on green. Restore the button colour. */
    .dropdown .btn--primary, .megamenu .btn--primary { color: #fff; }
    /* the submenu icon colour was also tinting the CTA's arrow teal */
    .dropdown .btn--primary i, .megamenu .btn--primary i { color: inherit; }

    /* drawer was mostly empty below 8 links — anchor contact details to the bottom
       so the space reads as intentional (and gives tap-to-call on mobile) */
    .nav { display: flex; flex-direction: column; padding-top: 76px; overflow-x: hidden; }
    .nav__foot {
        display: grid; gap: 4px; margin-top: auto; padding-top: 20px;
        border-top: 1px solid var(--line); font-size: .88rem; color: var(--body);
    }
    .nav__foot a, .nav__foot span { display: flex; align-items: center; gap: 11px; padding: 7px 0; }
    .nav__foot i { color: var(--teal-500); width: 15px; text-align: center; flex-shrink: 0; }
    .nav__foot-iso { color: var(--accent-dark); font-weight: 600; }

    /* CRITICAL: backdrop-filter on .header makes it the containing block for
       position:fixed children, so the nav drawer sized to the HEADER (130px)
       instead of the viewport and every link below "Home" was clipped.
       Dropping the filter on mobile restores the viewport as the containing block. */
    .header { backdrop-filter: none; background: #fff; }
    /* .header (sticky, z-index:100) makes a stacking context, so the drawer's own
       z-index:120 was trapped at 100 and the z-index:110 backdrop painted OVER it —
       dimming the menu AND stealing its taps. Lift the header above the backdrop. */
    .header { z-index: 130; }

    /* hero reads better centred on a narrow screen */
    .hero__panel { text-align: center; }
    .hero__actions { justify-content: center; }
    .hero__text { margin-left: auto; margin-right: auto; }
}

@media (max-width: 620px) {
    /* footer link columns 2-up instead of one long stack; the logo/blurb block
       keeps the full width so the tagline doesn't squeeze into half a column */
    /* minmax(0,1fr), not 1fr — long unbreakable content (the email address) was
       stretching one track to 171px against the other's 142px */
    .footer__grid, .footer__grid--mega { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; padding-bottom: 32px; }
    .footer__about { grid-column: 1 / -1; }
    /* keep Contact in the 2-up grid (full width pushed the footer 170px taller), and
       instead win back the ~15px the email needed: tighter icon, gap and type.
       epplindia@gmail.com = 133.8px in 138px of text space, so it stays on one line. */
    /* font-size must go on the LI — `.footer__contact li` declares its own .9rem, so a
       rule on the parent UL was simply inherited over and the text never shrank.
       min-width:0 lets the flex row shrink below its min-content width. */
    .footer__contact li { font-size: .825rem; gap: 7px; min-width: 0; }
    .footer__contact i { width: 12px; }
    /* grid items default to min-width:auto, so the address/phone pushed past the
       column even though the TRACK was capped — let them shrink and wrap */
    .footer__col { min-width: 0; }

    /* gallery: one photo per row on a phone */
    .gallery__item { flex-basis: 100%; }

    /* keep phone + email together on ONE line, and bring back the ISO / location
       strip that was previously display:none on phones (now a second line) */
    .topbar__meta { display: flex; }
    .topbar__inner { justify-content: center; gap: 2px 14px; }
    .topbar__contact { flex-wrap: nowrap; gap: 14px; }
    .topbar__contact, .topbar__meta { font-size: .72rem; }
    .topbar__meta { gap: 14px; }
    .topbar__contact a, .topbar__meta span { gap: 5px; }
}

/* ==========================================================================
   Lightbox — project gallery viewer
   ========================================================================== */
.lightbox { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; padding: 44px 16px; background: rgba(6, 36, 61, .93); backdrop-filter: blur(6px); }
.lightbox.open { display: flex; }
.lightbox__img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: var(--radius-sm); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lightbox__cap { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center; color: #eaf3fb; font-family: var(--font-head); font-weight: 600; font-size: 1rem; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); padding: 0 60px; }
.lightbox__count { position: absolute; top: 22px; left: 24px; color: rgba(255, 255, 255, .75); font-family: var(--font-head); font-size: .85rem; }
.lightbox__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .4); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; transition: var(--t); }
.lightbox__btn:hover { background: rgba(255, 255, 255, .28); }
.lightbox__close { top: 16px; right: 18px; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
body.lb-open { overflow: hidden; }
@media (max-width: 600px) {
    .lightbox__btn { width: 42px; height: 42px; }
    .lightbox__prev { left: 8px; }
    .lightbox__next { right: 8px; }
    .lightbox__cap { padding: 0 52px; font-size: .9rem; }
}

/* Section layouts stack at 880px (kept from the original breakpoint — the nav
   drawer moved up to 1160px: with Careers in the bar the desktop nav needs
   ~1066px, and below 1160px there is no room for it. Was
   causing horizontal scroll between 881-1060px). */
@media (max-width: 880px) {
    .about__grid { grid-template-columns: 1fr; }
    /* width:100% is required — with only `margin:0 auto` the grid item shrinks to
       content width, and .about__img is an empty aspect-ratio div, so it collapsed to 0 */
    .about__media { max-width: 380px; margin: 0 auto; width: 100%; }
    .infra__grid { grid-template-columns: 1fr; }
    .contact__grid { grid-template-columns: 1fr; }
    .band__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Tablet: centre a lone card in the last row of a 2-column grid ----------
   Between 621-1024px these grids drop to 2 columns. With an odd number of cards the
   last one sat hard left with an empty slot beside it (Sectors/Projects/Team/Insights
   /Services all had this). Span the row and centre it instead. Bounded below 621px
   because the grids become single-column there and every last child is "odd". */
@media (min-width: 621px) and (max-width: 1024px) {
    .projects__grid > *:last-child:nth-child(odd),
    .team__grid > *:last-child:nth-child(odd),
    .insights__grid > *:last-child:nth-child(odd),
    .downloads__grid > *:last-child:nth-child(odd),
    .certs > *:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        max-width: calc(50% - 13px);
        margin-left: auto;
        margin-right: auto;
    }
}


/* ---------- Uniform card grids centre their last row ----------
   The client's removals left odd counts (services 7, sectors 15, clients 29), which
   in a fixed 4-column grid leaves a hole at the end of the last row. Flex-wrap with
   justify-content:center centres whatever is left over instead. Column counts are
   preserved via flex-basis: (100/n)% minus the shared gap. */
.services__grid, .sectors__grid, .clients__grid { display: flex; flex-wrap: wrap; justify-content: center; }
.services__grid > * { flex: 0 1 calc(25% - 16.5px); }
.services__grid--3 > * { flex-basis: calc(33.333% - 14.67px); }
.sectors__grid  > * { flex: 0 1 calc(25% - 13.5px); }
.sectors__grid--3 > * { flex-basis: calc(33.333% - 12px); }
.clients__grid  > * { flex: 0 1 calc(25% - 10.5px); }
@media (max-width: 1024px) {
    .services__grid > *, .services__grid--3 > * { flex-basis: calc(50% - 11px); }
    .sectors__grid  > *, .sectors__grid--3  > * { flex-basis: calc(50% - 9px); }
    .clients__grid  > * { flex-basis: calc(33.333% - 9.34px); }
}
@media (max-width: 620px) {
    .services__grid > *, .services__grid--3 > * { flex-basis: 100%; }
    .sectors__grid  > *, .sectors__grid--3  > * { flex-basis: 100%; }
    .clients__grid  > * { flex-basis: calc(50% - 7px); }
}

/* ---------- Form fields: larger, bolder, and iOS-zoom-proof ----------
   Inputs below 16px make iOS Safari auto-zoom the page on focus. 1rem stops that and
   reads noticeably bigger; weight 500 makes typed values clearly bolder. */
.form-group input, .form-group textarea {
    font-size: 1rem;
    font-weight: 500;
    padding: 15px 16px;
}
.form-group label { font-size: .9rem; }
/* digits are easier to scan with a little tracking and even-width figures */
.form-group input[type="tel"] {
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
}

/* Superscript ordinals (1st, 2nd ...) - default <sup> inflates line-height, so set
   a relative size and zero line-height to keep the timeline rows evenly spaced. */
sup {
    font-size: .62em;
    line-height: 0;
    vertical-align: super;
    font-weight: inherit;
}

/* ---------- Megamenu / dropdown CTA button ----------
   `.megamenu a` (0,1,1) outranks `.btn--primary` (0,1,0), so the "All Solutions"
   CTA inherited the dark submenu link colour — dark navy on green, ~1.9:1 contrast.
   The same fix existed only inside the <=1080px drawer block, so desktop never got
   it. Applied at all widths here. */
.dropdown .btn--primary,
.megamenu .btn--primary { color: #fff; }
.dropdown .btn--primary i,
.megamenu .btn--primary i { color: inherit; }


/* ---------- Service cards: level bottoms ----------
   Cards in a row stretch to equal height, but the "Learn more" CTA sat straight after
   the copy, so it landed at a different height in each card (71px apart on
   services.html). Push it to the foot. The min-height on the heading levels the
   paragraph tops where one title wraps to two lines and its neighbour doesn't. */
/* a.service-card { display:block } (0,1,1) outranks .service-card (0,1,0), so the
   anchor cards stayed block and margin-top:auto computed to 0. Match it. */
.service-card, a.service-card { display: flex; flex-direction: column; }
.service-card .news-card__link,
.service-card .service-card__link { margin-top: auto; padding-top: 14px; }
@media (min-width: 621px) {
    .service-card h3 { min-height: 2.6em; }
}