/* ===== Tokens ===== */
:root {
    --bg: #f2f7f8;
    --surface: #ffffff;
    --alt: #e6f0f2;
    --ink: #0a2230;
    --muted: #51697a;
    --line: #d3e1e6;
    --brand: #0b7a8f;
    --brand-2: #14a6bb;
    --deep: #06222e;
    --accent: #f2a93b;
    --accent-ink: #2b1a00;
    --shadow: 0 10px 30px rgba(6, 34, 46, .10);
    --radius: 16px;
    --header-h: 76px;
    --font-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px
}

body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    line-height: 1.65;
    transition: background .3s, color .3s;
    -webkit-font-smoothing: antialiased
}

img,
svg {
    max-width: 100%
}

a {
    color: inherit;
    text-decoration: none
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none
}

h1,
h2,
h3 {
    font-family: var(--font-head);
    line-height: 1.08;
    margin: 0 0 .5em;
    letter-spacing: .01em
}

h1 {
    font-size: clamp(2.8rem, 6vw, 4.9rem);
    font-weight: 700
}

h2 {
    font-size: clamp(2.1rem, 4vw, 3.1rem);
    font-weight: 700
}

h3 {
    font-size: 1.5rem;
    font-weight: 600
}

p {
    margin: 0 0 1em
}

.muted {
    color: var(--muted)
}

.container {
    width: min(1200px, 100% - 2.5rem);
    margin-inline: auto
}

.skip {
    position: absolute;
    inset-inline-start: -999px;
    top: 0;
    background: var(--accent);
    color: var(--accent-ink);
    padding: .6rem 1rem;
    z-index: 200
}

.skip:focus {
    inset-inline-start: 0
}

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.3rem;
    border-radius: 999px;
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    transition: transform .2s, box-shadow .2s, background .2s, color .2s;
    white-space: nowrap
}

.btn:hover {
    transform: translateY(-2px)
}

.btn-lg {
    padding: .95rem 1.7rem;
    font-size: 1.05rem
}

.btn-primary {
    background: var(--brand);
    color: #fff
}

.btn-primary:hover {
    background: var(--deep);
    box-shadow: var(--shadow)
}

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

.btn-accent:hover {
    box-shadow: 0 8px 22px rgba(242, 169, 59, .45)
}

.btn-ghost {
    border-color: rgba(255, 255, 255, .5);
    color: #fff
}

.btn-ghost:hover {
    background: rgba(255, 255, 255, .12)
}

.dir-ico {
    transition: transform .2s
}

a:hover>.dir-ico,
.btn:hover .dir-ico {
    transform: translateX(4px)
}

/* ===== Header ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--surface);
    transition: box-shadow .3s
}

.site-header.scrolled {
    box-shadow: 0 6px 24px rgba(6, 34, 46, .14)
}

.topbar {
    background: var(--deep);
    color: #cfe6ec;
    font-size: .85rem;
    max-height: 44px;
    overflow: hidden;
    transition: max-height .3s, opacity .3s
}

.site-header.scrolled .topbar {
    max-height: 0;
    opacity: 0
}

.topbar-in {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: .5rem
}

.topbar-list {
    display: flex;
    gap: 1.4rem;
    flex-wrap: wrap
}

.topbar-list li {
    display: flex;
    align-items: center;
    gap: .5rem
}

.topbar-list i {
    color: var(--accent)
}

.topbar a:hover {
    color: #fff
}

.nav-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--header-h)
}

.brand {
    display: flex;
    align-items: center;
    gap: .7rem
}

.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 14px 14px 14px 4px;
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.25rem
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1
}

.brand-text strong {
    font-family: var(--font-head);
    font-size: 1.7rem;
    letter-spacing: .02em
}

.brand-text small {
    font-size: .68rem;
    color: var(--muted);
    font-weight: 500
}

.main-nav {
    display: flex;
    align-items: center
}

.menu {
    display: flex;
    align-items: center;
    gap: .25rem
}

.menu-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .9rem;
    border-radius: 10px;
    font-weight: 500;
    position: relative;
    transition: color .2s, background .2s
}

.menu-link::after {
    content: "";
    position: absolute;
    inset-inline: .9rem;
    bottom: .2rem;
    height: 3px;
    border-radius: 3px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform .25s
}

.menu-link:hover {
    color: var(--brand)
}

.menu-link:hover::after,
.menu>li.active>.menu-link::after {
    transform: scaleX(1)
}

.menu>li.active>.menu-link {
    color: var(--brand);
    font-weight: 600
}

.caret {
    font-size: .65rem;
    transition: transform .25s
}

.has-sub {
    position: relative
}

.submenu {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 230px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: .5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .22s
}

.has-sub:hover>.submenu,
.has-sub:focus-within>.submenu,
.has-sub.open>.submenu {
    opacity: 1;
    visibility: visible;
    transform: none
}

.has-sub:hover .caret,
.has-sub.open .caret {
    transform: rotate(180deg)
}

.submenu a {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .8rem;
    border-radius: 10px;
    font-size: .95rem
}

.submenu a i {
    color: var(--brand);
    width: 1.1rem;
    text-align: center
}

.submenu a:hover {
    background: var(--alt);
    color: var(--brand)
}

.submenu a.active {
    background: var(--brand);
    color: #fff
}

.submenu a.active i {
    color: #fff
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: .5rem
}

.nav-cta-mobile {
    display: none
}

.icon-btn {
    height: 42px;
    min-width: 42px;
    padding: 0 .7rem;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    cursor: pointer;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    transition: background .2s, color .2s, transform .2s
}

.icon-btn:hover {
    background: var(--brand);
    color: #fff;
    transform: translateY(-2px)
}

.icon-sun {
    display: none
}

.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 0 .8rem
}

.burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .3s, opacity .3s
}

.burger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
}

.burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0
}

.burger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
}

.scrim {
    position: fixed;
    inset: 0;
    background: rgba(3, 15, 22, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s;
    z-index: 90
}

.scrim.show {
    opacity: 1;
    visibility: visible
}

/* ===== Hero ===== */
.hero {
    background: radial-gradient(1200px 500px at 85% 0, #0e6277 0, transparent 60%), linear-gradient(160deg, #06222e, #0a3a4c);
    color: #fff;
    padding-block: clamp(3rem, 7vw, 6rem);
    overflow: hidden
}

.hero-in {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 3rem;
    align-items: center
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: .85rem;
    margin-bottom: 1.2rem
}

.pill i {
    color: var(--accent)
}

.lead {
    font-size: 1.15rem;
    color: #cfe6ec;
    max-width: 56ch
}

.hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin: 1.6rem 0
}

.hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.5rem;
    color: #cfe6ec;
    font-size: .95rem
}

.hero-points i {
    color: var(--accent);
    margin-inline-end: .4rem
}

.hero-copy>* {
    animation: rise .7s both
}

.hero-copy>*:nth-child(2) {
    animation-delay: .1s
}

.hero-copy>*:nth-child(3) {
    animation-delay: .2s
}

.hero-copy>*:nth-child(4) {
    animation-delay: .3s
}

.hero-copy>*:nth-child(5) {
    animation-delay: .4s
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(24px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.hero-visual {
    position: relative;
    max-width: 440px;
    margin-inline: auto;
    width: 100%
}

.strata {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
    display: block
}

.strata .sky {
    fill: #bfe4ee
}

.strata .sun {
    fill: var(--accent)
}

.strata .l1 {
    fill: #7a5a3a
}

.strata .l2 {
    fill: #a07a4f
}

.strata .l3 {
    fill: #5f6670
}

.strata .pipe {
    stroke: #e9f4f7;
    stroke-width: 6;
    stroke-dasharray: 352;
    stroke-dashoffset: 352;
    animation: drill 3.6s .5s ease-in-out forwards
}

.strata .bit {
    transform: translateY(-352px);
    animation: bit 3.6s .5s ease-in-out forwards
}

.strata .wave {
    animation: wave 4s linear infinite
}

.strata .gauge {
    opacity: .9
}

@keyframes drill {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes bit {
    to {
        transform: translateY(0)
    }
}

@keyframes wave {
    to {
        transform: translateX(-70px)
    }
}

.float-card {
    position: absolute;
    inset-inline-start: -14px;
    bottom: 26px;
    background: var(--surface);
    color: var(--ink);
    border-radius: 14px;
    padding: .8rem 1rem;
    display: flex;
    gap: .8rem;
    align-items: center;
    box-shadow: var(--shadow);
    opacity: 0;
    animation: rise .6s 3.9s forwards
}

.float-card i {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: #fff
}

.float-card strong {
    display: block;
    font-family: var(--font-head);
    font-size: 1.2rem;
    line-height: 1.1
}

.float-card span {
    font-size: .8rem;
    color: var(--muted)
}

/* ===== Sections ===== */
.section {
    padding-block: clamp(3.5rem, 7vw, 6rem)
}

.section.alt {
    background: var(--alt)
}

.sec-head {
    max-width: 640px;
    margin-bottom: 2.5rem
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center
}

.grid {
    display: grid;
    gap: 1.4rem
}

.g3 {
    grid-template-columns: repeat(3, 1fr)
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.7rem;
    transition: transform .25s, box-shadow .25s, border-color .25s
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
    border-color: var(--brand-2)
}

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s, transform .7s
}

.reveal.in {
    opacity: 1;
    transform: none
}

/* About */
.about-media {
    position: relative
}

.about-card {
    background: linear-gradient(150deg, var(--brand), var(--deep));
    color: #fff;
    border-radius: 24px;
    padding: 2.5rem;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.big-ico {
    font-size: 3.2rem;
    color: var(--accent);
    margin-bottom: auto
}

.about-card p {
    color: #cfe6ec;
    margin: 0
}

#about>.container .about-card{position:relative;isolation:isolate;overflow:hidden}
#about>.container .about-card::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background-image:linear-gradient(150deg,rgba(6,34,46,.66),rgba(6,34,46,.82)),url("../images/index.jpg");background-position:center;background-size:cover;transition:transform .4s ease}
#about>.container .about-card>*{position:relative;z-index:1}
#about>.container .about-card:hover::before{transform:scale(1.05)}
@media(prefers-reduced-motion:reduce){#about>.container .about-card::before{transition:none}#about>.container .about-card:hover::before{transform:none}}

.about-badge {
    position: absolute;
    inset-inline-end: -12px;
    top: -18px;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 18px;
    padding: .9rem 1.3rem;
    text-align: center;
    box-shadow: var(--shadow)
}

.about-badge strong {
    display: block;
    font-family: var(--font-head);
    font-size: 2.6rem;
    line-height: 1
}

.about-badge span {
    font-size: .8rem;
    font-weight: 600
}

.check-list {
    margin: 1.2rem 0
}

.check-list li {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    margin-bottom: .55rem
}

.check-list i {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .65rem;
    margin-top: .2rem
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.8rem 0;
    padding: 1.2rem 0;
    border-block: 1px solid var(--line)
}

.stats strong {
    display: block;
    font-family: var(--font-head);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--brand)
}

.stats span {
    font-size: .85rem;
    color: var(--muted)
}

/* Services */
.svc .ico {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--alt);
    color: var(--brand);
    font-size: 1.5rem;
    margin-bottom: 1.1rem;
    transition: background .25s, color .25s
}

.svc:hover .ico {
    background: var(--brand);
    color: #fff
}

.svc p {
    color: var(--muted)
}

.more {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    font-weight: 600;
    color: var(--brand)
}

/* Expertise */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.4rem 0
}

.tab {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    padding: .6rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s
}

.tab:hover {
    border-color: var(--brand)
}

.tab.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff
}

.panel {
    display: none
}

.panel.active {
    display: block;
    animation: rise .4s both
}

.spec-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem
}

.spec {
    background: var(--deep);
    color: #fff;
    border-radius: var(--radius);
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .8rem
}

.spec i {
    font-size: 1.6rem;
    color: var(--accent)
}

.spec strong {
    display: block;
    font-family: var(--font-head);
    font-size: 1.5rem;
    line-height: 1.1
}

.spec span {
    color: #a9c8d1;
    font-size: .9rem
}

/* Solutions */
.sol {
    display: flex;
    gap: 1.1rem
}

.sol>i {
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: #fff;
    font-size: 1.2rem
}

.sol h3 {
    font-size: 1.35rem;
    margin-bottom: .3em
}

.sol p {
    margin: 0;
    color: var(--muted);
    font-size: .95rem
}

/* Industries */
.ind {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    position: relative;
    overflow: hidden;
    transition: color .3s, transform .25s
}

.ind::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, var(--brand), var(--deep));
    transform: translateY(101%);
    transition: transform .35s;
    z-index: 0
}

.ind>* {
    position: relative;
    z-index: 1
}

.ind:hover {
    transform: translateY(-4px);
    color: #fff
}

.ind:hover::before {
    transform: none
}

.ind i {
    font-size: 2rem;
    color: var(--brand);
    margin-bottom: .8rem;
    transition: color .3s
}

.ind:hover i {
    color: var(--accent)
}

.ind h3 {
    margin: 0;
    font-size: 1.5rem
}

.ind p {
    margin: 0;
    color: var(--muted);
    transition: color .3s
}

.ind:hover p {
    color: #cfe6ec
}

/* Process */
.steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2rem;
    position: relative
}

.steps li {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem 1.2rem;
    text-align: center;
    position: relative;
    transition: transform .25s, box-shadow .25s
}

.steps li:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow)
}

.step-n {
    position: absolute;
    top: -16px;
    inset-inline-start: 50%;
    margin-inline-start: -16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    display: grid;
    place-items: center
}

.steps li>i {
    font-size: 1.8rem;
    color: var(--brand);
    margin: .6rem 0 .8rem
}

.steps h3 {
    font-size: 1.4rem;
    margin-bottom: .2em
}

.steps p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem
}

@media(min-width:993px) {
    .steps li:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 50%;
        inset-inline-end: -1.2rem;
        width: 1.2rem;
        border-top: 2px dashed var(--brand-2)
    }
}

/* CTA */
.cta {
    background: linear-gradient(160deg, #06222e, #0b5a70);
    color: #fff
}

.cta-in {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center
}

.cta-copy p {
    color: #cfe6ec;
    font-size: 1.1rem
}

.cta-contact {
    display: grid;
    gap: .6rem;
    margin-top: 1.2rem
}

.cta-contact i {
    color: var(--accent);
    margin-inline-end: .6rem;
    width: 1.2rem
}

.visit-form {
    background: var(--surface);
    color: var(--ink);
    border-radius: 22px;
    padding: 1.8rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .3)
}

.visit-form label {
    display: grid;
    gap: .3rem;
    font-size: .85rem;
    font-weight: 600
}

.visit-form label:nth-of-type(3),
.visit-form label:nth-of-type(4),
.visit-form button,
.form-msg {
    grid-column: 1/-1
}

.visit-form input,
.visit-form select {
    font: inherit;
    padding: .75rem .9rem;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    width: 100%;
    transition: border-color .2s, box-shadow .2s
}

.visit-form input:focus,
.visit-form select:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(20, 166, 187, .25)
}

.visit-form input.err {
    border-color: #d64545
}

.visit-form button {
    justify-content: center
}

.form-msg {
    margin: 0;
    min-height: 1.4em;
    font-size: .9rem;
    font-weight: 600;
    color: var(--brand)
}

.form-msg.bad {
    color: #d64545
}

/* Footer + top */
.footer {
    background: #041821;
    color: #a9c8d1;
    font-size: .9rem
}

.foot-in {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .8rem;
    padding-block: 1.4rem
}

.foot-links {
    display: flex;
    gap: 1.2rem
}

.footer a:hover {
    color: #fff
}

.to-top {
    position: fixed;
    inset-inline-end: 1.2rem;
    bottom: 1.2rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    background: var(--accent);
    color: var(--accent-ink);
    cursor: pointer;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all .3s;
    z-index: 80
}

.to-top.show {
    opacity: 1;
    visibility: visible;
    transform: none
}

/* ===== Tablet ===== */
@media(max-width:992px) {
    :root {
        --header-h: 68px
    }

    .burger {
        display: inline-flex
    }

    .nav-cta {
        display: none
    }

    .main-nav {
        position: fixed;
        top: 0;
        inset-inline-end: 0;
        height: 100dvh;
        width: min(340px, 86vw);
        background: var(--surface);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 1rem;
        padding: 5.5rem 1.2rem 1.5rem;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform .35s;
        z-index: 95;
        box-shadow: -10px 0 30px rgba(0, 0, 0, .2)
    }

    .main-nav.open {
        transform: none
    }

    .menu {
        flex-direction: column;
        align-items: stretch;
        gap: .2rem
    }

    .menu-link {
        justify-content: space-between;
        padding: .85rem 1rem;
        border-radius: 12px
    }

    .menu-link::after {
        display: none
    }

    .menu>li.active>.menu-link {
        background: var(--alt)
    }

    .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-inline-start: 2px solid var(--line);
        border-radius: 0;
        margin-inline-start: 1rem;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s
    }

    .has-sub:hover>.submenu {
        opacity: 1;
        visibility: visible
    }

    .has-sub.open>.submenu {
        max-height: 420px;
        padding: .3rem 0
    }

    .nav-cta-mobile {
        display: inline-flex;
        justify-content: center;
        margin-top: .5rem
    }

    .hero-in,
    .split,
    .cta-in {
        grid-template-columns: 1fr
    }

    .hero-in {
        gap: 2.5rem
    }

    .g3 {
        grid-template-columns: repeat(2, 1fr)
    }

    .steps {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 1.8rem
    }

    .steps li:last-child {
        grid-column: 1/-1
    }

    .hide-sm {
        display: none !important
    }
}

/* ===== Mobile ===== */
@media(max-width:600px) {
    .container {
        width: min(1200px, 100% - 1.6rem)
    }

    .brand-text small {
        display: none
    }

    .topbar-in {
        justify-content: center
    }

    .topbar-list:last-child {
        display: none
    }

    .g3,
    .spec-board,
    .visit-form {
        grid-template-columns: 1fr
    }

    .steps {
        grid-template-columns: 1fr
    }

    .stats {
        grid-template-columns: 1fr 1fr 1fr;
        gap: .5rem
    }

    .stats strong {
        font-size: 1.9rem
    }

    .hero-btns .btn {
        width: 100%;
        justify-content: center
    }

    .float-card {
        inset-inline-start: 8px
    }

    .about-badge {
        inset-inline-end: 8px
    }

    .icon-btn.dir-btn span {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important
    }

    .strata .pipe {
        stroke-dashoffset: 0
    }

    .strata .bit {
        transform: none
    }

    .reveal,
    .float-card {
        opacity: 1;
        transform: none
    }
}


/* ===== About Us page ===== */
.g2 {
    grid-template-columns: repeat(2, 1fr)
}

.split-top {
    align-items: start
}

/* Page hero */
.page-hero {
    background: radial-gradient(1200px 500px at 85% 0, #0e6277 0, transparent 60%), repeating-radial-gradient(circle at 92% 130%, transparent 0 34px, rgba(255, 255, 255, .05) 35px 36px), linear-gradient(160deg, #06222e, #0a3a4c);
    color: #fff;
    padding-block: clamp(3rem, 7vw, 5.5rem);
    overflow: hidden
}

.page-hero-in {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 3rem;
    align-items: center
}

.page-hero-copy>* {
    animation: rise .7s both
}

.page-hero-copy>*:nth-child(2) {
    animation-delay: .1s
}

.page-hero-copy>*:nth-child(3) {
    animation-delay: .2s
}

.page-hero-copy>*:nth-child(4) {
    animation-delay: .3s
}

.crumbs {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .9rem;
    color: #9fd0db;
    margin-bottom: 1.3rem
}

.crumbs a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: color .2s
}

.crumbs a:hover {
    color: #fff
}

.crumbs span {
    color: #fff;
    font-weight: 600
}

.crumb-sep {
    font-size: .6rem
}

.glance {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 22px;
    padding: 1.6rem;
    backdrop-filter: blur(6px)
}

.glance.glance-about{background-image:linear-gradient(rgba(6,34,46,.72),rgba(6,34,46,.82)),url("../images/about-overview.jpg");background-position:center;background-size:cover}
.glance.glance-contact{background-image:linear-gradient(rgba(6,34,46,.72),rgba(6,34,46,.82)),url("../images/contact-response.jpg");background-position:center;background-size:cover}
.glance.glance-borewell{background-image:linear-gradient(rgba(6,34,46,.72),rgba(6,34,46,.82)),url("../images/borewell-overview.jpg");background-position:center;background-size:cover}
.glance.glance-service-areas{background-image:linear-gradient(rgba(6,34,46,.72),rgba(6,34,46,.82)),url("../images/service-areas-overview.jpg");background-position:center;background-size:cover}
.glance.glance-pump-installation{background-image:linear-gradient(rgba(6,34,46,.72),rgba(6,34,46,.82)),url("../images/pump-installation-overview.jpg");background-position:center;background-size:cover}
.glance.glance-services{background-image:linear-gradient(rgba(6,34,46,.72),rgba(6,34,46,.82)),url("../images/services-overview.jpg");background-position:center;background-size:cover}
.glance.glance-testimonials{background-image:linear-gradient(rgba(6,34,46,.72),rgba(6,34,46,.82)),url("../images/testimonials-overview.jpg");background-position:center;background-size:cover}
.glance.glance-survey{background-image:linear-gradient(rgba(6,34,46,.72),rgba(6,34,46,.82)),url("../images/survey-overview.jpg");background-position:center;background-size:cover}

.glance-title {
    font-size: 1.5rem;
    margin-bottom: 1rem
}

.glance li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 0;
    border-top: 1px solid rgba(255, 255, 255, .14)
}

.glance li:first-child {
    border-top: 0
}

.glance li>i {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 1.15rem
}

.glance strong {
    display: block;
    font-family: var(--font-head);
    font-size: 2rem;
    line-height: 1
}

.glance span {
    font-size: .85rem;
    color: #cfe6ec
}

/* Story timeline */
.timeline {
    position: relative;
    padding-inline-start: 2rem;
    border-inline-start: 2px solid var(--line)
}

.tl-item {
    position: relative;
    padding-bottom: 1.8rem;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s, transform .6s
}

.tl-item:last-child {
    padding-bottom: 0
}

.tl-item.in {
    opacity: 1;
    transform: none
}

.tl-item::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(-2rem - 7px);
    top: .45rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--bg);
    box-shadow: 0 0 0 2px var(--accent)
}

.tl-year {
    display: inline-block;
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: .1rem
}

.tl-item h3 {
    font-size: 1.45rem;
    margin-bottom: .2em
}

.tl-item p {
    margin: 0;
    color: var(--muted)
}

/* Expertise */
.exp {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start
}

.exp .ico {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--alt);
    color: var(--brand);
    font-size: 1.5rem;
    transition: background .25s, color .25s
}

.exp:hover .ico {
    background: var(--brand);
    color: #fff
}

.exp-body {
    flex: 1;
    min-width: 0
}

.exp p {
    color: var(--muted)
}

.meter {
    height: 10px;
    border-radius: 99px;
    background: var(--alt);
    overflow: hidden
}

.meter span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    transition: width 1.4s cubic-bezier(.2, .8, .2, 1) .2s
}

.reveal.in .meter span {
    width: var(--w)
}

.meter-label {
    display: block;
    margin-top: .5rem;
    font-weight: 600;
    color: var(--brand)
}

/* Equipment */
.tech-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    background: var(--deep);
    padding: 1rem;
    border-radius: 24px
}

.tech {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius);
    padding: 1.2rem;
    color: #fff;
    transition: transform .25s, background .25s
}

.tech:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .11)
}

.tech i {
    font-size: 1.5rem;
    color: var(--accent);
    margin-bottom: .7rem;
    display: block
}

.tech h3 {
    font-size: 1.3rem;
    margin-bottom: .25em
}

.tech p {
    margin: 0;
    color: #a9c8d1;
    font-size: .88rem;
    line-height: 1.5
}

/* Why choose us */
.why {
    border-top: 4px solid var(--accent)
}

.why .ico {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 1rem
}

.why p {
    margin: 0;
    color: var(--muted)
}

/* Contact CTA */
.cta-copy .btn {
    margin-top: .6rem
}

.contact-tiles {
    display: grid;
    gap: 1rem
}

.contact-tiles a {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--surface);
    color: var(--ink);
    border-radius: 18px;
    padding: 1.1rem 1.3rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
    transition: transform .25s
}

.contact-tiles a:hover {
    transform: translateX(6px)
}

.contact-tiles i {
    flex: none;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: #fff;
    font-size: 1.25rem
}

.contact-tiles strong {
    display: block;
    font-family: var(--font-head);
    font-size: 1.4rem;
    line-height: 1.1
}

.contact-tiles span {
    font-size: .9rem;
    color: var(--muted)
}

/* About: tablet */
@media(max-width:992px) {
    .page-hero-in {
        grid-template-columns: 1fr;
        gap: 2.2rem
    }

    .glance ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1.5rem
    }

    .glance li:nth-child(2) {
        border-top: 0
    }

    .contact-tiles a:hover {
        transform: translateY(-3px)
    }
}

/* About: mobile */
@media(max-width:600px) {

    .g2,
    .tech-board,
    .glance ul {
        grid-template-columns: 1fr
    }

    .glance li:nth-child(2) {
        border-top: 1px solid rgba(255, 255, 255, .14)
    }

    .exp {
        flex-direction: column;
        gap: .9rem
    }

    .timeline {
        padding-inline-start: 1.5rem
    }

    .tl-item::before {
        inset-inline-start: calc(-1.5rem - 7px)
    }
}

@media(prefers-reduced-motion:reduce) {
    .tl-item {
        opacity: 1;
        transform: none
    }

    .meter span {
        width: var(--w)
    }
}

/* ===== Services page ===== */
.svc-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem
}

.svc-head .ico {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: #fff;
    font-size: 1.5rem
}

.svc-head h2 {
    margin: 0
}

.svc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.2rem 0 0
}

.svc-tags li {
    padding: .3rem .85rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: .85rem;
    font-weight: 600;
    color: var(--brand)
}

.svc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.5rem
}

.btn-outline {
    border-color: var(--brand);
    color: var(--brand)
}

.btn-outline:hover {
    background: var(--brand);
    color: #fff
}

.svc-panel {
    background: linear-gradient(150deg, var(--brand), var(--deep));
    color: #fff;
    border-radius: 24px;
    padding: 2rem;
    box-shadow: var(--shadow)
}

.svc-panel>i {
    display: block;
    font-size: 2.6rem;
    color: var(--accent);
    margin-bottom: 1rem
}

.svc-panel h3 {
    margin-bottom: .8rem
}

.svc-facts div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .75rem 0;
    border-top: 1px solid rgba(255, 255, 255, .18)
}

.svc-facts dt {
    color: #cfe6ec;
    font-size: .9rem
}

.svc-facts dd {
    margin: 0;
    font-family: var(--font-head);
    font-size: 1.35rem;
    font-weight: 600;
    text-align: end
}

.flip .svc-panel {
    order: -1
}

.hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.6rem
}

/* Services: tablet */
@media(max-width:992px) {
    .flip .svc-panel {
        order: 0
    }

    .svc-panel {
        padding: 1.6rem
    }
}

/* Services: mobile */
@media(max-width:600px) {
    .svc-head {
        flex-direction: column;
        align-items: flex-start;
        gap: .7rem
    }

    .svc-actions .btn,
    .hero-links .btn {
        width: 100%;
        justify-content: center
    }

    .svc-facts dd {
        font-size: 1.2rem
    }
}

/* ===== Contact page ===== */
.g4 {
    grid-template-columns: repeat(4, 1fr)
}

.ci-card {
    display: block
}

.ci-card .more {
    font-size: 1.05rem;
    word-break: break-word
}

.ci-card p:last-child,
.ci-card .more {
    margin-bottom: 0
}

.booking .visit-form {
    box-shadow: var(--shadow);
    border: 1px solid var(--line)
}

.booking .visit-form label:nth-of-type(n+5) {
    grid-column: 1/-1
}

.visit-form textarea {
    font: inherit;
    padding: .75rem .9rem;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    width: 100%;
    min-height: 96px;
    resize: vertical;
    transition: border-color .2s, box-shadow .2s
}

.visit-form textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(20, 166, 187, .25)
}

.office li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: .95rem 0;
    border-top: 1px solid var(--line)
}

.office li:first-child {
    border-top: 0
}

.office li>i {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--alt);
    color: var(--brand);
    font-size: 1.1rem
}

.office strong {
    display: block;
    font-family: var(--font-head);
    font-size: 1.3rem;
    line-height: 1.15
}

.office span {
    color: var(--muted);
    font-size: .95rem
}

.map-wrap {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    min-height: 400px;
    background: var(--alt)
}

.map-wrap iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 400px;
    border: 0
}

.faq {
    max-width: 820px;
    margin-inline: auto
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: .8rem;
    transition: border-color .2s, box-shadow .2s
}

.faq-item[open] {
    border-color: var(--brand-2);
    box-shadow: var(--shadow)
}

.faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-head);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.2
}

.faq-item summary::-webkit-details-marker {
    display: none
}

.faq-item summary::after {
    content: "+";
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--alt);
    color: var(--brand);
    font-family: var(--font-body);
    font-size: 1.3rem;
    transition: background .2s, color .2s
}

.faq-item[open] summary::after {
    content: "\2212";
    background: var(--brand);
    color: #fff
}

.faq-item p {
    margin: 0;
    padding: 0 1.4rem 1.2rem;
    color: var(--muted)
}

/* Contact: tablet */
@media(max-width:992px) {
    .g4 {
        grid-template-columns: repeat(2, 1fr)
    }

    .map-wrap,
    .map-wrap iframe {
        min-height: 340px
    }
}

/* Contact: mobile */
@media(max-width:600px) {
    .g4 {
        grid-template-columns: 1fr
    }

    .map-wrap,
    .map-wrap iframe {
        min-height: 280px
    }

    .faq-item summary {
        font-size: 1.15rem;
        padding: 1rem
    }

    .faq-item p {
        padding: 0 1rem 1rem
    }
}

/* ===== 404 page ===== */
#goBack{background:transparent}
.strata .err-num {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 150px;
    letter-spacing: .02em;
    fill: rgba(255, 255, 255, .92)
}

.strata .dry {
    fill: #4a3b2e
}

.path-note {
    display: inline-block;
    max-width: 100%;
    margin: 0 0 1.2rem;
    padding: .35rem .85rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: .9rem;
    color: #cfe6ec;
    word-break: break-all
}

.path-note[hidden] {
    display: none
}

.path-note strong {
    color: #fff
}

@media(max-width:600px) {
    .strata .err-num {
        font-size: 130px
    }

    .hero-links .btn {
        width: 100%;
        justify-content: center
    }
}

/* ===== Coming soon page ===== */
.countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    max-width: 860px;
    margin-inline: auto
}

.cd-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: 1.6rem 1rem;
    text-align: center;
    box-shadow: var(--shadow)
}

.cd-box strong {
    display: block;
    font-family: var(--font-head);
    font-size: clamp(2.6rem, 7vw, 4.4rem);
    line-height: 1;
    color: var(--brand);
    font-variant-numeric: tabular-nums
}

.cd-box span {
    font-size: .9rem;
    font-weight: 600;
    color: var(--muted)
}

.launch-note {
    text-align: center;
    margin: 1.6rem 0 0;
    font-weight: 600;
    color: var(--brand)
}

.news-form {
    grid-template-columns: 1fr
}

.news-note {
    margin: 0;
    font-size: .8rem;
    color: var(--muted);
    font-weight: 400
}

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

.social-row a {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .7rem 1.3rem .7rem .7rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-weight: 600;
    transition: transform .25s, box-shadow .25s, border-color .25s
}

.social-row a:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--brand-2)
}

.social-row a i {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: #fff;
    font-size: 1.05rem
}

/* Coming soon: mobile */
@media(max-width:600px) {
    .countdown {
        gap: .55rem
    }

    .cd-box {
        padding: 1rem .3rem
    }

    .cd-box strong {
        font-size: 2.2rem
    }

    .cd-box span {
        font-size: .72rem
    }

    .social-row {
        gap: .7rem
    }

    .social-row a {
        flex: 1 1 calc(50% - .4rem);
        padding-inline-end: .8rem;
        font-size: .9rem
    }
}

/* ===== Testimonials page ===== */
.stars {
    display: inline-flex;
    gap: .15rem;
    color: var(--accent);
    font-size: .95rem
}

.panel-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.8rem
}

.panel-card h3 {
    margin-bottom: 1rem
}

.rating-big {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.4rem
}

.rating-big strong {
    font-family: var(--font-head);
    font-size: 4.6rem;
    line-height: 1;
    color: var(--brand)
}

.rating-big .stars {
    font-size: 1.15rem;
    margin-bottom: .2rem
}

.rating-big span {
    display: block;
    font-size: .9rem;
    color: var(--muted)
}

.bar-row {
    display: grid;
    grid-template-columns: 3.2rem 1fr 2.8rem;
    gap: .8rem;
    align-items: center;
    margin-bottom: .75rem;
    font-size: .9rem;
    font-weight: 600
}

.bar-row.wide {
    grid-template-columns: 7rem 1fr 2.6rem
}

.bar-row>span:last-child {
    text-align: end;
    color: var(--muted)
}

.tcard {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: 4px solid var(--accent);
    min-width: 0
}

.tcard .qmark {
    font-size: 1.6rem;
    color: var(--brand-2)
}

.tcard blockquote {
    margin: 0;
    flex: 1
}

.t-tag {
    align-self: flex-start;
    padding: .2rem .75rem;
    border-radius: 999px;
    background: var(--alt);
    color: var(--brand);
    font-size: .8rem;
    font-weight: 600
}

.who {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: .8rem;
    min-width: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line)
}

.avatar {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: #fff;
    font-family: var(--font-head);
    font-size: 1.25rem;
    font-weight: 700
}

.testimonial-avatar {
    display: block;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    min-width: 50px;
    max-width: 50px;
    min-height: 50px;
    max-height: 50px;
    object-fit: cover;
    border-radius: 50%
}

.who>div {
    min-width: 0
}

.who strong {
    display: block;
    line-height: 1.2
}

.who small {
    color: var(--muted);
    font-size: .85rem
}

.story {
    display: flex;
    flex-direction: column;
    gap: .3rem
}

.story p {
    color: var(--muted);
    margin: 0 0 .6rem
}

.story p b {
    color: var(--ink)
}

.story-result {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    margin-top: auto;
    padding: .9rem 1.1rem;
    border-radius: 12px;
    background: var(--alt)
}

.story-result strong {
    font-family: var(--font-head);
    font-size: 2.1rem;
    line-height: 1;
    color: var(--brand)
}

.story-result span {
    font-size: .9rem;
    color: var(--muted)
}

.video {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--deep);
    box-shadow: var(--shadow)
}

.video::before {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    transition: transform .4s ease
}

.vcard:nth-child(1) .video::before {
    background-image: url("../images/video-homeowner-well.jpg");
    background-position: center 58%
}

.vcard:nth-child(2) .video::before {
    background-image: url("../images/video-farm-pump.jpg")
}

.vcard:nth-child(3) .video::before {
    background-image: url("../images/video-drilling-crew.jpg")
}

.video:hover::before {
    transform: scale(1.06)
}

.video .video-btn {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: #fff;
    font: inherit;
    background: linear-gradient(150deg, rgba(6, 34, 46, .36), rgba(6, 34, 46, .58))
}

.play {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: 1.4rem;
    transition: transform .2s
}

.video-btn:hover .play {
    transform: scale(1.1)
}

.video-credit {
    position: absolute;
    inset-inline-start: .5rem;
    bottom: .45rem;
    z-index: 2;
    padding: .15rem .4rem;
    border-radius: 4px;
    background: rgba(6, 34, 46, .72);
    color: #fff;
    font-size: .65rem;
    line-height: 1.4
}

.video-credit a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px
}

.video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.video-cap {
    padding: 1rem .2rem 0
}

.video-cap h3 {
    font-size: 1.35rem;
    margin-bottom: .2em
}

.video-cap p {
    margin: 0;
    color: var(--muted);
    font-size: .92rem
}

.vnote {
    color: var(--brand);
    font-weight: 600;
    margin-top: .4rem !important
}

@media(prefers-reduced-motion:reduce) {
    .video::before {
        transition: none
    }

    .video:hover::before {
        transform: none
    }
}

/* Testimonials: mobile */
@media(max-width:600px) {
    .rating-big strong {
        font-size: 3.6rem
    }

    .bar-row.wide {
        grid-template-columns: 5.6rem 1fr 2.4rem
    }

    .panel-card {
        padding: 1.3rem
    }
}

/* ===== Home 2 page ===== */
/* Image placeholders: drop an <img> inside any .media and it covers the gradient */
.media {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(150deg, var(--brand), var(--deep));
    color: #fff
}

.media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-radial-gradient(circle at 90% 120%, transparent 0 34px, rgba(255, 255, 255, .06) 35px 36px);
    pointer-events: none
}

.media>i {
    font-size: clamp(3rem, 8vw, 5rem);
    color: var(--accent)
}

.media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1
}

.media.photo{background-image:linear-gradient(rgba(6,34,46,.24),rgba(6,34,46,.42)),var(--media-image);background-position:center;background-size:cover}
.h2-intro-rig{--media-image:url("../images/ig 1.jpg")}
.h2-intro-water{--media-image:url("../images/ig 2.jpg")}
.h2-service-drilling{--media-image:url("../images/ig 3.jpg")}
.h2-service-survey{--media-image:url("../images/Alignment.jpg")}
.h2-service-pump{--media-image:url("../images/ig 4.jpg")}
.h2-service-flushing{--media-image:url("../images/h2-flushing-site.jpg")}
.h2-service-rainwater{--media-image:url("../images/ig 6.jpg")}
.h2-machine-dth{--media-image:url("../images/Drilling rig.jpg")}
.h2-machine-rotary{--media-image:url("../images/ig 7.jpg")}
.h2-machine-compressor{--media-image:url("../images/h2-compressor-equipment.jpg")}
.h2-machine-support{--media-image:url("../images/ig 8.jpg")}
.h2-project-residential{--media-image:url("../images/ig 9.jpg")}
.h2-project-farm{--media-image:url("../images/h2-farm-project.jpg")}
.h2-project-factory{--media-image:url("../images/h2-industrial-project.jpg")}
.h2-project-apartment{--media-image:url("../images/h2-apartment-project.jpg")}
.h2-project-plantation{--media-image:url("../images/h2-plantation-project.jpg")}
.h2-project-storage{--media-image:url("../images/h2-warehouse-project.jpg")}
.mcard .media.photo{transition:transform .45s}
.mcard:hover .media.photo{transform:scale(1.04)}

.m2 {
    background: linear-gradient(150deg, #a07a4f, #5a4129)
}

.m3 {
    background: linear-gradient(150deg, #14a6bb, #06222e)
}

.m4 {
    background: linear-gradient(150deg, #5f6670, #1c2a33)
}

.m5 {
    background: linear-gradient(150deg, #0e6277, #0a3a4c)
}

.m6 {
    background: linear-gradient(150deg, #f2a93b, #a86a10)
}

.m6>i {
    color: #fff
}

/* Hero: full-width scene */
.hero2 {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(560px, 82vh, 780px);
    color: #fff;
    overflow: hidden;
    background: #06222e
}

.hero2-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none
}

.hero2::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(6, 34, 46, .9) 0, rgba(6, 34, 46, .6) 50%, rgba(6, 34, 46, .1) 100%)
}

.hero2-in {
    position: relative;
    z-index: 1;
    padding-block: clamp(3rem, 7vw, 5.5rem) 2rem;
    width: min(1200px, 100% - 2.5rem);
    margin-inline: auto
}

.hero2-copy {
    max-width: 640px
}

.hero2-copy>* {
    animation: rise .7s both
}

.hero2-copy>*:nth-child(2) {
    animation-delay: .1s
}

.hero2-copy>*:nth-child(3) {
    animation-delay: .2s
}

.hero2-copy>*:nth-child(4) {
    animation-delay: .3s
}

.hero2-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: 2.6rem;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(6px)
}

.hero2-stats div {
    background: rgba(6, 34, 46, .6);
    padding: 1rem 1.2rem
}

.hero2-stats strong {
    display: block;
    font-family: var(--font-head);
    font-size: 2.1rem;
    line-height: 1
}

.hero2-stats span {
    font-size: .85rem;
    color: #cfe6ec
}

/* Intro */
.media-stack {
    padding-bottom: 3rem;
    padding-inline-end: 3rem
}

.media-stack .big {
    aspect-ratio: 4/3
}

.media-stack .small {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    width: 46%;
    aspect-ratio: 1;
    border: 6px solid var(--bg)
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem
}

/* Services image grid */
.tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 240px;
    gap: 1.2rem
}

.tile {
    position: relative;
    display: flex;
    align-items: flex-end;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius);
    color: #fff
}

.tile.big {
    grid-row: span 2
}

.tile .media {
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: 0;
    transition: transform .5s
}

.tile .media>i {
    position: absolute;
    top: 1.2rem;
    inset-inline-end: 1.2rem;
    font-size: 2.6rem
}

.tile:hover .media {
    transform: scale(1.06)
}

.tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent 30%, rgba(3, 15, 22, .88))
}

.tile-body {
    padding: 1.3rem
}

.tile h3 {
    margin: 0 0 .2em;
    color: #fff
}

.tile p {
    margin: 0 0 .5rem;
    font-size: .92rem;
    color: #cfe6ec
}

.tile .more {
    color: var(--accent)
}

/* Machinery */
.mach {
    background: linear-gradient(160deg, #06222e, #0a3a4c);
    color: #fff
}

.mach .muted {
    color: #a9c8d1
}

.mcard {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .25s, background .25s
}

.mcard:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, .1)
}

.mcard .media {
    aspect-ratio: 4/3;
    border-radius: 0
}

.mcard-body {
    padding: 1.2rem
}

.mcard h3 {
    font-size: 1.35rem;
    margin-bottom: .6rem
}

.mspecs li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .88rem
}

.mspecs span {
    color: #a9c8d1
}

.mspecs strong {
    font-weight: 600;
    text-align: end
}

/* Horizontal timeline */
.htl {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: relative
}

.htl::before,
.htl::after {
    content: "";
    position: absolute;
    top: 32px;
    inset-inline-start: 10%;
    width: 80%;
    height: 3px;
    border-radius: 3px;
    background: var(--line)
}

.htl::after {
    background: linear-gradient(90deg, var(--brand), var(--accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.8s ease .3s
}

.htl.in::after {
    transform: scaleX(1)
}

.htl li {
    position: relative;
    z-index: 1;
    padding-inline: .6rem;
    text-align: center
}

.htl-dot {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--surface);
    border: 3px solid var(--accent);
    color: var(--brand);
    font-size: 1.4rem
}

.htl h3 {
    font-size: 1.35rem;
    margin-bottom: .2em
}

.htl p {
    margin: 0;
    color: var(--muted);
    font-size: .9rem
}

/* Project gallery */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.6rem
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s
}

.chip:hover {
    border-color: var(--brand)
}

.chip.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff
}

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem
}

.proj {
    position: relative;
    aspect-ratio: 4/3;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--radius);
    color: #fff
}

.proj .media {
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: 0;
    transition: transform .5s
}

.proj:hover .media {
    transform: scale(1.06)
}

.proj::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent 40%, rgba(3, 15, 22, .88))
}

.proj-tag {
    position: absolute;
    top: 1rem;
    inset-inline-start: 1rem;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: .78rem;
    font-weight: 700
}

.proj-cap {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 1.1rem 1.2rem
}

.proj-cap h3 {
    margin: 0;
    font-size: 1.4rem;
    color: #fff
}

.proj-cap span {
    font-size: .88rem;
    color: #cfe6ec
}

/* Home 2: tablet */
@media(max-width:992px) {
    .tiles {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px
    }

    .tile.big {
        grid-column: span 2;
        grid-row: span 1
    }

    .gallery {
        grid-template-columns: repeat(2, 1fr)
    }

    .media-stack {
        max-width: 560px
    }
}

/* Timeline turns vertical on small tablets and phones */
@media(max-width:768px) {
    .htl {
        grid-template-columns: 1fr;
        row-gap: 1.6rem
    }

    .htl::before,
    .htl::after {
        top: 32px;
        bottom: 32px;
        width: 3px;
        height: auto;
        inset-inline-start: 31px
    }

    .htl::after {
        background: linear-gradient(180deg, var(--brand), var(--accent));
        transform: scaleY(0);
        transform-origin: top
    }

    .htl.in::after {
        transform: scaleY(1)
    }

    .htl li {
        display: grid;
        grid-template-columns: 64px 1fr;
        column-gap: 1rem;
        text-align: start;
        padding-inline: 0;
        align-items: center
    }

    .htl-dot {
        margin: 0;
        grid-row: span 2
    }

    .htl h3 {
        align-self: end;
        margin: 0
    }

    .htl p {
        align-self: start
    }
}

/* Home 2: mobile */
@media(max-width:600px) {
    .hero2 {
        min-height: 620px
    }

    .hero2::after {
        background: linear-gradient(180deg, rgba(6, 34, 46, .45), rgba(6, 34, 46, .92))
    }

    .hero2-stats {
        grid-template-columns: 1fr 1fr
    }

    .hero2-stats strong {
        font-size: 1.8rem
    }

    .tiles,
    .gallery {
        grid-template-columns: 1fr
    }

    .tiles {
        grid-auto-rows: 210px
    }

    .tile.big {
        grid-column: auto
    }

    .media-stack {
        padding-inline-end: 1.5rem;
        padding-bottom: 2rem
    }

    .btn-row .btn {
        width: 100%;
        justify-content: center
    }
}

/* ===== Borewell Drilling page ===== */
.type-card {
    display: flex;
    flex-direction: column
}

.type-card .check-list {
    margin: .8rem 0 1.2rem
}

.type-card .t-tag {
    margin-top: auto
}

.cost-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    padding: 1.3rem 1.6rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px dashed var(--brand-2)
}

.cost-note p {
    margin: 0;
    flex: 1 1 320px
}

@media(max-width:600px) {
    .cost-note .btn {
        width: 100%;
        justify-content: center
    }
}

/* Borewell page: shared parts reused from other pages are page-hero, glance, crumbs, htl, exp, svc-head, svc-panel, type-card, cost-note */
/* Section 2: what is borewell drilling (cross-section) */
.bw-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 1.2rem;
    box-shadow: var(--shadow)
}

.bw-scene {
    display: block;
    width: 100%;
    height: auto
}

.bw-sky {
    fill: var(--alt)
}

.bw-tag {
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 700;
    fill: #fff
}

.bw-tag.dark {
    fill: var(--ink);
    font-size: 15px
}

.bw-line {
    stroke: #06222e;
    stroke-opacity: .35;
    stroke-width: 2
}

.bw-wt {
    stroke: #fff;
    stroke-width: 2;
    stroke-dasharray: 7 6;
    opacity: .85
}

.bw-bore {
    fill: #06222e
}

.bw-casing {
    fill: none;
    stroke: var(--accent);
    stroke-width: 3
}

.bw-pipe {
    fill: none;
    stroke: #0b7a8f;
    stroke-width: 5;
    stroke-linejoin: round
}

.bw-flow {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 2 12;
    animation: pi-flow 1s linear infinite
}

.bw-tank {
    fill: var(--surface);
    stroke: var(--brand);
    stroke-width: 3
}

.bw-caption {
    margin: .8rem .4rem .2rem;
    font-size: .85rem;
    color: var(--muted);
    text-align: center
}

#what .svc-tags {
    margin-bottom: 1.6rem
}

/* Section 3: process */
#process .cost-note {
    margin-top: 3rem
}

/* Section 4: types */
#types .type-card>p {
    color: var(--muted)
}

/* Section 5: cost factors + indicator */
.cf-list {
    display: grid;
    gap: 1.8rem
}

.cf-panel .cf-label {
    display: block;
    margin: 1.1rem 0 .5rem;
    font-size: .9rem;
    font-weight: 600;
    color: #cfe6ec
}

.cf-opts {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.cf-opt {
    padding: .5rem .95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s
}

.cf-opt:hover {
    background: rgba(255, 255, 255, .18)
}

.cf-opt[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink)
}

.cf-result {
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, .18)
}

.cf-level-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem
}

.cf-level-row span {
    font-size: .9rem;
    color: #cfe6ec
}

.cf-level-row strong {
    font-family: var(--font-head);
    font-size: 2.2rem;
    line-height: 1
}

.cf-gauge {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .4rem;
    margin: .7rem 0 .9rem
}

.cf-gauge span {
    height: 10px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .2);
    transition: background .3s
}

.cf-gauge[data-level="1"] span:nth-child(-n+1),
.cf-gauge[data-level="2"] span:nth-child(-n+2),
.cf-gauge[data-level="3"] span {
    background: var(--accent)
}

.cf-note {
    margin: 0 0 .7rem;
    color: #cfe6ec;
    font-size: .95rem
}

.cf-fine {
    margin: 0;
    font-size: .8rem;
    color: #a9c8d1
}

/* Borewell: tablet */
@media(max-width:992px) {

    #what .bw-card,
    .cf-panel {
        max-width: 600px;
        width: 100%;
        margin-inline: auto
    }

    #types .grid.g3 {
        grid-template-columns: repeat(2, 1fr)
    }

    #types .type-card:last-child {
        grid-column: 1/-1
    }
}

/* Borewell: mobile */
@media(max-width:600px) {
    .bw-card {
        padding: .8rem;
        border-radius: 18px
    }

    .bw-tag {
        font-size: 19px
    }

    #types .grid.g3 {
        grid-template-columns: 1fr
    }

    #types .type-card:last-child {
        grid-column: auto
    }

    #process .cost-note {
        margin-top: 2.2rem
    }

    .cf-opt {
        flex: 1 1 auto;
        text-align: center
    }
}

@media(prefers-reduced-motion:reduce) {
    .bw-flow {
        animation: none
    }
}

/* ===== Water Survey page ===== */
.page-hero-copy>*:nth-child(5) {
    animation-delay: .4s
}

.crumbs {
    flex-wrap: wrap
}

/* Section 2: ground cross-section */
.ws-scan .ping {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    opacity: 0;
    transform-box: view-box;
    transform-origin: 110px 112px;
    animation: ws-ping 3.6s ease-out infinite
}

.ws-scan .ping.p2 {
    animation-delay: 1.2s
}

.ws-scan .ping.p3 {
    animation-delay: 2.4s
}

.ws-scan .ws-drop {
    stroke: var(--accent);
    stroke-width: 3;
    stroke-dasharray: 8 7;
    animation: ws-dash 1.2s linear infinite
}

.ws-scan .ws-tag {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    fill: var(--ink)
}

@keyframes ws-ping {
    0% {
        transform: scale(.05);
        opacity: .9
    }

    100% {
        transform: scale(1);
        opacity: 0
    }
}

@keyframes ws-dash {
    to {
        stroke-dashoffset: -15
    }
}

/* Section 3: included (tabs reuse .tab, .panel, .svc-panel) */
.tab-panels .split {
    gap: 2.5rem
}

#included .svc-actions {
    margin-top: 2rem
}

/* Section 4: interactive plot + benefits */
.plot-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 1.2rem;
    box-shadow: var(--shadow)
}

.plot-map {
    display: block;
    width: 100%;
    height: auto
}

.plot-bg {
    fill: var(--alt)
}

.plot-grid {
    fill: none;
    stroke: var(--line);
    stroke-width: 1
}

.plot-line {
    fill: none;
    stroke: var(--brand-2);
    stroke-width: 2;
    stroke-dasharray: 7 6
}

.plot-house {
    fill: var(--surface);
    stroke: var(--line);
    stroke-width: 2
}

.plot-septic {
    fill: rgba(214, 69, 69, .14);
    stroke: #d64545;
    stroke-width: 2;
    stroke-dasharray: 5 4
}

.plot-fracture {
    fill: none;
    stroke: var(--brand-2);
    stroke-width: 9;
    stroke-linecap: round;
    opacity: .3
}

.plot-label {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    fill: var(--muted)
}

.plot-label.fr {
    fill: var(--brand)
}

.pt {
    --c: var(--brand);
    cursor: pointer;
    outline: none
}

.pt.mid {
    --c: var(--accent)
}

.pt.low {
    --c: #d64545
}

.pt .halo {
    fill: var(--c);
    opacity: .18;
    transition: opacity .2s
}

.pt .dot {
    fill: var(--c);
    stroke: #fff;
    stroke-width: 3
}

.pt text {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    fill: #fff;
    pointer-events: none
}

.pt.mid text {
    fill: var(--accent-ink)
}

.pt:hover .halo,
.pt.active .halo {
    opacity: .4
}

.pt.active .halo {
    animation: ws-halo 1.6s ease-in-out infinite
}

.pt:focus-visible .halo {
    opacity: .45;
    stroke: var(--accent);
    stroke-width: 3
}

@keyframes ws-halo {
    50% {
        opacity: .12
    }
}

.plot-read {
    --c: var(--brand);
    margin-top: 1rem;
    padding: 1.1rem 1.3rem;
    border-radius: var(--radius);
    background: var(--alt);
    border-inline-start: 5px solid var(--c)
}

.plot-read.mid {
    --c: var(--accent)
}

.plot-read.low {
    --c: #d64545
}

.plot-verdict {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .2rem .8rem;
    border-radius: 999px;
    background: var(--c);
    color: #fff;
    font-size: .8rem;
    font-weight: 700
}

.plot-read.mid .plot-verdict {
    color: var(--accent-ink)
}

.plot-read h3 {
    margin: .55rem 0 .4rem
}

.plot-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1.3rem;
    margin-bottom: .6rem;
    font-weight: 600
}

.plot-facts i {
    color: var(--brand);
    margin-inline-end: .45rem
}

.plot-read p {
    margin: 0;
    color: var(--muted);
    font-size: .95rem
}

.benefit-list {
    display: grid;
    gap: 1rem
}

.benefit-list .card {
    padding: 1.2rem 1.4rem;
    align-items: center
}

/* Section 5: booking */
.cta-copy .contact-tiles {
    margin-top: 1.6rem
}

.contact-tiles a>div {
    min-width: 0
}

.contact-tiles span {
    overflow-wrap: anywhere
}

.survey-form label.full {
    grid-column: 1/-1
}

.survey-form textarea {
    min-height: 88px
}

/* Water Survey: tablet */
@media(max-width:992px) {

    #what .about-media,
    .plot-card {
        max-width: 600px;
        width: 100%;
        margin-inline: auto
    }

    .tab-panels .split {
        gap: 1.8rem
    }
}

@media(min-width:601px) and (max-width:992px) {
    .benefit-list {
        grid-template-columns: 1fr 1fr
    }

    .benefit-list li:last-child {
        grid-column: 1/-1
    }

    .benefit-list .card {
        height: 100%
    }
}

/* Water Survey: mobile */
@media(max-width:600px) {
    #included .tabs .tab {
        flex: 1 1 100%;
        justify-content: center
    }

    .plot-card {
        padding: .8rem;
        border-radius: 18px
    }

    .plot-read {
        padding: 1rem
    }

    .benefit-list .card {
        padding: 1.1rem
    }
}

@media(prefers-reduced-motion:reduce) {

    .ws-scan .ping,
    .ws-scan .ws-drop,
    .pt.active .halo {
        animation: none
    }
}


/* ===== Pump Installation page ===== */
/* Section 2: borewell + pump cross-section */
.pi-scene .pi-pipe {
    fill: none;
    stroke: #06222e;
    stroke-width: 8;
    stroke-linejoin: round;
    stroke-linecap: round
}

.pi-scene .pi-flow {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 2 12;
    animation: pi-flow 1s linear infinite
}

.pi-scene .pi-tag {
    font-family: var(--font-head);
    font-size: 16px;
    font-weight: 700;
    fill: var(--ink)
}

@keyframes pi-flow {
    to {
        stroke-dashoffset: -14
    }
}

/* Section 3: pump types + picker */
.type-card .svc-head {
    margin-bottom: .8rem
}

.type-card .svc-head h3 {
    margin: 0
}

.pump-pick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    margin-top: 1.6rem;
    padding: 2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow)
}

.pump-opts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .7rem;
    margin-top: 1.2rem
}

.pump-opt {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s
}

.pump-opt i {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--alt);
    color: var(--brand);
    transition: background .2s, color .2s
}

.pump-opt:hover {
    border-color: var(--brand)
}

.pump-opt.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff
}

.pump-opt.active i {
    background: rgba(255, 255, 255, .18);
    color: #fff
}

.pump-result {
    box-shadow: none
}

.pump-result h3 {
    margin-bottom: .5rem
}

.pump-result p {
    color: #cfe6ec
}

.pump-result.swap {
    animation: rise .35s both
}

/* Section 4: four-step timeline + test board */
.htl-step {
    display: block;
    margin-bottom: .15rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--brand)
}

.test-split {
    margin-top: 3.5rem
}

.test-title {
    margin-bottom: .4em
}

@media(min-width:769px) {
    .htl.h4 {
        grid-template-columns: repeat(4, 1fr)
    }

    .htl.h4::before,
    .htl.h4::after {
        inset-inline-start: 12.5%;
        width: 75%
    }
}

@media(max-width:768px) {
    .htl-step {
        display: none
    }

    .test-split {
        margin-top: 2.5rem
    }
}

/* Pump Installation: tablet */
@media(max-width:992px) {
    .pump-pick {
        grid-template-columns: 1fr;
        gap: 1.6rem;
        padding: 1.5rem
    }
}

/* Pump Installation: mobile */
@media(max-width:600px) {
    .pump-pick {
        padding: 1.1rem;
        border-radius: 18px
    }

    .pump-opts {
        gap: .5rem
    }

    .pump-opt {
        padding: .7rem;
        font-size: .9rem;
        gap: .5rem
    }

    .pump-opt i {
        width: 30px;
        height: 30px
    }
}

@media(max-width:380px) {
    .pump-opts {
        grid-template-columns: 1fr
    }
}

@media(prefers-reduced-motion:reduce) {

    .pi-scene .pi-flow,
    .pump-result.swap {
        animation: none
    }
}

/* ===== Service Areas page ===== */
#coverage .about-card {
    position: relative;
    isolation: isolate;
    overflow: hidden
}

#coverage .about-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background-image: linear-gradient(150deg, rgba(6, 34, 46, .66), rgba(6, 34, 46, .82)), url("../images/rig-service.jpg");
    background-position: center;
    background-size: cover;
    transition: transform .4s ease
}

#coverage .about-card>* {
    position: relative;
    z-index: 1
}

#coverage .about-card:hover::before {
    transform: scale(1.05)
}

@media(prefers-reduced-motion:reduce) {
    #coverage .about-card::before {
        transition: none
    }

    #coverage .about-card:hover::before {
        transform: none
    }
}

/* Section 3: cities & towns */
.area-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.6rem
}

.area-chip {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s
}

.area-chip:hover {
    border-color: var(--brand)
}

.area-chip.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff
}

.area-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem
}

.area {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem
}

.area[hidden] {
    display: none
}

.area>i {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--brand);
    color: #fff;
    font-size: 1.1rem
}

.area h3 {
    font-size: 1.35rem;
    margin: 0 0 .2em
}

.area p {
    margin: .35rem 0 0;
    font-size: .85rem;
    color: var(--muted)
}

.area-tag {
    display: inline-block;
    padding: .1rem .65rem;
    border-radius: 999px;
    background: var(--alt);
    color: var(--brand);
    font-size: .75rem;
    font-weight: 600
}

.area-note {
    margin: 1.6rem 0 0;
    text-align: center
}

/* Section 4: property types */
#property .type-card .svc-tags {
    margin-top: auto;
    padding-top: .6rem
}

#property .type-card .check-list {
    margin-bottom: 1.2rem
}

/* Section 5: services by location */
.loc-label {
    margin: 1.2rem 0 .5rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--muted)
}

.loc-tags {
    margin-top: 0
}

/* Section 6: coverage map */
.map-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.6rem;
    align-items: stretch
}

.cov-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 1rem;
    box-shadow: var(--shadow)
}

.cov-svg {
    display: block;
    width: 100%;
    height: auto
}

.cov-bg {
    fill: var(--alt)
}

.cov-area {
    fill: rgba(20, 166, 187, .1);
    stroke: var(--brand-2);
    stroke-width: 2;
    stroke-dasharray: 8 6
}

.cov-div {
    fill: none;
    stroke: var(--line);
    stroke-width: 1.5;
    stroke-dasharray: 4 5
}

.cov-river {
    fill: none;
    stroke: var(--brand-2);
    stroke-width: 9;
    stroke-linecap: round;
    opacity: .28
}

.cov-road {
    fill: none;
    stroke: var(--line);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round
}

.cov-zone {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    fill: var(--muted)
}

.mp {
    --c: var(--brand);
    cursor: pointer;
    outline: none
}

.mp.city {
    --c: var(--accent)
}

.mp .halo {
    fill: var(--c);
    opacity: .2;
    transition: opacity .2s
}

.mp .dot {
    fill: var(--c);
    stroke: #fff;
    stroke-width: 3
}

.mp .lbl {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    fill: var(--ink);
    stroke: var(--alt);
    stroke-width: 4;
    paint-order: stroke;
    pointer-events: none
}

.mp:hover .halo,
.mp.active .halo {
    opacity: .45
}

.mp.active .halo {
    animation: ws-halo 1.6s ease-in-out infinite
}

.mp:focus-visible .halo {
    opacity: .5;
    stroke: var(--accent);
    stroke-width: 3
}

.map-side {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.map-read {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.map-read h3 {
    margin-bottom: .5rem
}

.map-read p {
    color: #cfe6ec
}

.map-read .svc-facts {
    width: 100%;
    margin: .4rem 0 1.3rem
}

.map-type {
    display: inline-block;
    margin-bottom: .7rem;
    padding: .15rem .8rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
    font-size: .78rem;
    font-weight: 700
}

.map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.4rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    font-size: .9rem;
    font-weight: 600
}

.map-legend li {
    display: flex;
    align-items: center;
    gap: .5rem
}

.sw {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%
}

.sw-city {
    background: var(--accent)
}

.sw-town {
    background: var(--brand)
}

.sw-area {
    width: 20px;
    height: 12px;
    border-radius: 4px;
    border: 2px dashed var(--brand-2)
}

/* Section 7: availability check */
.how-list {
    margin-top: 1.6rem
}

.how-list li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.3rem
}

.how-n {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700
}

.how-list strong {
    display: block;
    font-family: var(--font-head);
    font-size: 1.4rem;
    line-height: 1.15
}

.how-list div span {
    color: var(--muted);
    font-size: .95rem
}

.area-result {
    --c: var(--brand);
    grid-column: 1/-1;
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    background: var(--alt);
    border-inline-start: 5px solid var(--c)
}

.area-result:empty {
    display: none
}

.area-result.mid {
    --c: var(--accent)
}

.area-result.bad {
    --c: #d64545
}

.area-result>i {
    flex: none;
    margin-top: .15rem;
    font-size: 1.4rem;
    color: var(--c)
}

.area-result strong {
    display: block;
    font-family: var(--font-head);
    font-size: 1.4rem;
    line-height: 1.15;
    font-weight: 600
}

.area-result p {
    margin: .25rem 0 .7rem;
    font-size: .92rem;
    font-weight: 400;
    color: var(--muted)
}

.res-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem
}

.res-actions .btn {
    padding: .5rem 1rem;
    font-size: .9rem
}

/* Service Areas: tablet */
@media(max-width:992px) {
    .area-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .map-grid {
        grid-template-columns: 1fr
    }

    .mp .lbl {
        font-size: 15px
    }
}

/* Service Areas: mobile */
@media(max-width:600px) {
    .area-grid {
        grid-template-columns: 1fr
    }

    .area-chip {
        padding: .5rem .9rem;
        font-size: .9rem
    }

    #bylocation .tabs .tab {
        flex: 1 1 100%;
        justify-content: center
    }

    .cov-card {
        padding: .6rem;
        border-radius: 18px
    }

    .mp .lbl {
        font-size: 20px
    }

    .cov-zone {
        font-size: 20px
    }

    .res-actions .btn {
        width: 100%;
        justify-content: center
    }

    .map-read .btn {
        width: 100%;
        justify-content: center
    }
}

@media(prefers-reduced-motion:reduce) {
    .mp.active .halo {
        animation: none
    }
}

/* ===== Site Footer ===== */
.site-footer {
    background: linear-gradient(170deg, #071e2b 0%, #04131d 60%, #061c28 100%);
    color: #cfe6ec;
    padding-top: 4.5rem;
    overflow: hidden;
    position: relative
}

.site-footer::before {
    content: "";
    position: absolute;
    inset-inline-start: -120px;
    top: -120px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11,122,143,.18) 0%, transparent 70%);
    pointer-events: none
}

.site-footer::after {
    content: "";
    position: absolute;
    inset-inline-end: -80px;
    bottom: 80px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242,169,59,.07) 0%, transparent 70%);
    pointer-events: none
}

/* Footer grid */
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2.8rem 2rem;
    padding-bottom: 3rem
}

/* Brand column */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none
}

.footer-logo-mark {
    width: 46px;
    height: 46px;
    border-radius: 14px 14px 14px 4px;
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    flex-shrink: 0
}

.footer-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1
}

.footer-logo-text strong {
    font-family: var(--font-head);
    font-size: 1.7rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: .02em
}

.footer-logo-text small {
    font-size: .68rem;
    color: #87b5c3;
    font-weight: 500
}

.footer-brand-desc {
    font-size: .92rem;
    line-height: 1.7;
    color: #87b5c3;
    margin: 0
}

/* Social icons */
.footer-social {
    display: flex;
    gap: .6rem;
    margin-top: .4rem;
    flex-wrap: wrap
}

.footer-social a {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    color: #cfe6ec;
    display: grid;
    place-items: center;
    font-size: 1rem;
    transition: background .25s, color .25s, transform .25s, border-color .25s
}

.footer-social a:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    transform: translateY(-3px)
}

/* Footer columns */
.footer-col h4 {
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 1.2rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    position: relative;
    padding-bottom: .75rem
}

.footer-col h4::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 32px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent)
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: .55rem
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .92rem;
    color: #87b5c3;
    transition: color .2s, padding-inline-start .2s
}

.footer-links a::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-2);
    flex-shrink: 0;
    opacity: .7;
    transition: background .2s, opacity .2s, transform .2s
}

.footer-links a:hover {
    color: #fff;
    padding-inline-start: 4px
}

.footer-links a:hover::before {
    background: var(--accent);
    opacity: 1;
    transform: scale(1.4)
}

/* Contact info */
.footer-contact {
    display: flex;
    flex-direction: column;
    gap: .9rem
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: .9rem;
    line-height: 1.55
}

.footer-contact-item i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(11,122,143,.22);
    color: var(--brand-2);
    display: grid;
    place-items: center;
    font-size: .92rem;
    flex-shrink: 0;
    margin-top: .05rem
}

.footer-contact-item span {
    color: #87b5c3
}

.footer-contact-item a {
    color: #cfe6ec;
    transition: color .2s
}

.footer-contact-item a:hover {
    color: var(--accent)
}

.footer-contact-label {
    display: block;
    font-size: .75rem;
    color: #5e8ba0;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
    margin-bottom: .1rem
}

/* Newsletter section */
.footer-newsletter {
    background: rgba(11,122,143,.1);
    border: 1px solid rgba(11,122,143,.22);
    border-radius: 18px;
    padding: 2rem 2.2rem;
    margin-bottom: 0
}

.footer-newsletter h4 {
    font-family: var(--font-head);
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 .4rem;
    letter-spacing: .02em
}

.footer-newsletter p {
    font-size: .88rem;
    color: #87b5c3;
    margin: 0 0 1.1rem;
    line-height: 1.6
}

.footer-newsletter-form {
    display: flex;
    gap: .55rem;
    flex-wrap: wrap
}

.footer-newsletter-form input[type="email"] {
    flex: 1 1 180px;
    padding: .65rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.07);
    color: #fff;
    font: inherit;
    font-size: .92rem;
    outline: none;
    transition: border-color .2s, background .2s
}

.footer-newsletter-form input[type="email"]::placeholder {
    color: #5e8ba0
}

.footer-newsletter-form input[type="email"]:focus {
    border-color: var(--brand-2);
    background: rgba(255,255,255,.1)
}

.footer-newsletter-form input[type="email"].err {
    border-color: #d64545
}

.footer-newsletter-form .btn-subscribe {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.25rem;
    border-radius: 10px;
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background .2s, transform .2s, box-shadow .2s;
    white-space: nowrap
}

.footer-newsletter-form .btn-subscribe:hover {
    background: #f5b84c;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(242,169,59,.4)
}

.footer-nl-msg {
    margin: .6rem 0 0;
    font-size: .85rem;
    color: var(--brand-2);
    min-height: 1.2em
}

.footer-nl-msg.bad {
    color: #e07070
}

/* Divider */
.footer-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,.08);
    margin: 0
}

/* Bottom bar */
.footer-bottom {
    padding: 1.1rem 0;
    position: relative;
    z-index: 1
}

.footer-bottom-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .7rem 1.5rem
}

.footer-copy {
    font-size: .84rem;
    color: #5e8ba0
}

.footer-copy span {
    color: #87b5c3
}

.footer-legal {
    display: flex;
    align-items: center;
    gap: .2rem 1.2rem;
    flex-wrap: wrap
}

.footer-legal a {
    font-size: .84rem;
    color: #5e8ba0;
    transition: color .2s
}

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

.footer-legal-sep {
    color: rgba(255,255,255,.18);
    font-size: .75rem
}

/* Full-width newsletter row */
.footer-nl-row {
    grid-column: 1 / -1
}

/* Footer responsive: tablet */
@media(max-width:1100px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.2rem 2rem
    }
}

@media(max-width:768px) {
    .site-footer {
        padding-top: 3rem
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.8rem 1.5rem
    }

    .footer-newsletter {
        padding: 1.5rem 1.4rem
    }
}

@media(max-width:600px) {
    .footer-grid {
        grid-template-columns: 1fr
    }

    .footer-bottom-in {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem
    }

    .footer-legal {
        gap: .4rem 1rem
    }
}