/* ===== 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-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-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 ===== */
.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)}
.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;align-items:center;gap:.8rem;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}
.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-btn{position:absolute;inset:0;width:100%;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;font:inherit;background:linear-gradient(150deg,#0b7a8f,#06222e)}
.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 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}

/* 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}
.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}}

/* ===== 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 ===== */
/* 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}
}

/* ===== Dark theme: switched on by the header toggle (<html data-theme="dark">) =====
   The rest of this file uses colour tokens, so overriding them here darkens every page. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#071a23;
  --surface:#0e2a37;
  --alt:#0b2230;
  --ink:#e8f3f6;
  --muted:#9fb9c4;
  --line:#1e4150;
  --brand:#12899f;
  --brand-2:#2dc3d6;
  --shadow:0 10px 30px rgba(0,0,0,.45)
}
[data-theme="dark"] .icon-moon{display:none}
[data-theme="dark"] .icon-sun{display:inline}
[data-theme="dark"] .tab:not(.active),[data-theme="dark"] .chip:not(.active),[data-theme="dark"] .area-chip:not(.active){background:var(--surface);color:var(--ink)}
[data-theme="dark"] .menu-link:hover,[data-theme="dark"] .menu>li.active>.menu-link,[data-theme="dark"] .svc-tags li,[data-theme="dark"] .t-tag{color:var(--brand-2)}
[data-theme="dark"] .bw-casing{stroke:var(--accent)}

/* Footer: dark mode refinements (footer is always dark-navy but these keep parity) */
[data-theme="dark"] .site-footer{background:linear-gradient(170deg,#040e14 0%,#02090e 60%,#031018 100%)}
[data-theme="dark"] .footer-contact-item i{background:rgba(18,137,159,.25)}
[data-theme="dark"] .footer-newsletter{background:rgba(18,137,159,.13);border-color:rgba(18,137,159,.28)}
[data-theme="dark"] .footer-newsletter-form input[type="email"]{border-color:rgba(255,255,255,.12)}
[data-theme="dark"] .footer-newsletter-form input[type="email"]:focus{border-color:var(--brand-2)}
[data-theme="dark"] .footer-divider{border-top-color:rgba(255,255,255,.06)}