:root {
    --ay-primary:#087b94;
    --ay-dark:#10262d;
    --ay-soft:#eefcff;
    --ay-orange:#ffb23d;
    --ay-cream:#fff7eb;
    --ay-line:#e7f0f2;
    --ay-text:#4b5b62
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    font-family:'Open Sans',Arial,sans-serif;
    color:var(--ay-text);
    background:#fff;
    line-height:1.7
}

h1,h2,h3,h4,h5 {
    font-family:'Jost',Arial,sans-serif;
    color:var(--ay-dark);
    line-height:1.15;
    margin-top:0
}

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

img {
    max-width:100%;
    display:block
}

.container {
    width:min(1160px,92%);
    margin:auto
}

.topbar {
    background:linear-gradient(90deg,#10262d,#0b7188);
    color:#eefcff;
    font-size:15px
}

.topbar .container {
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:9px 0
}

.navbar {
    position:sticky;
    top:0;
    z-index:90;
    background:#fff;
    box-shadow:0 13px 34px rgba(16,38,45,.10)
}

.nav-inner {
    height:86px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}

.brand img {
    height:62px;
    max-width:260px;
    object-fit:contain
}

.nav-menu {
    display:flex;
    align-items:center;
    gap:2px
}

.nav-menu a,.dropbtn {
    font-weight:800;
    color:#24363d;
    padding:29px 13px;
    font-size:16px;
    display:inline-flex;
    align-items:center;
    gap:7px
}

.nav-menu a:hover,.drop:hover .dropbtn,.nav-menu a.active {
    color:var(--ay-primary)
}

.drop {
    position:relative
}

.drop-menu {
    position:absolute;
    top:100%;
    left:0;
    min-width:292px;
    background:#fff;
    border-radius:0 0 18px 18px;
    box-shadow:0 22px 50px rgba(16,38,45,.17);
    padding:12px 0;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:.18s;
    max-height:78vh;
    overflow:auto
}

.drop:hover .drop-menu {
    opacity:1;
    visibility:visible;
    transform:translateY(0)
}

.drop-menu a {
    display:block;
    padding:10px 18px;
    font-size:15px;
    color:#263941
}

.drop-menu a:hover {
    background:var(--ay-soft);
    color:var(--ay-primary)
}

.nav-cta {
    background:linear-gradient(135deg,var(--ay-primary),#0f5969);
    color:#fff!important;
    border-radius:999px;
    padding:13px 18px!important;
    margin-left:8px
}

.menu-toggle {
    display:none
}

.hamb {
    display:none;
    border:0;
    background:linear-gradient(135deg,#10262d,#087b94);
    color:#fff;
    border-radius:16px;
    width:58px;
    height:52px;
    font-size:26px;
    align-items:center;
    justify-content:center
}

.hero {
    position:relative;
    background:linear-gradient(125deg,rgba(11,32,39,.76),rgba(8,123,148,.38)),var(--hero-img);
    background-size:cover;
    background-position:center;
    min-height:650px;
    display:flex;
    align-items:center;
    text-align:center;
    color:#fff
}

.hero h1 {
    font-size:68px;
    color:#fff;
    margin-bottom:18px;
    text-shadow:0 10px 32px rgba(0,0,0,.25)
}

.hero p {
    font-size:20px;
    color:#effbff;
    max-width:840px;
    margin:0 auto 26px
}

.hero-kicker,.badge {
    display:inline-flex;
    align-items:center;
    gap:8px;
    border-radius:999px;
    font-weight:900
}

.hero-kicker {
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.25);
    padding:9px 18px;
    margin-bottom:18px;
    color:#fff
}

.badge {
    background:var(--ay-soft);
    color:var(--ay-primary);
    padding:8px 17px;
    margin-bottom:14px
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:999px;
    font-weight:900;
    padding:13px 20px;
    border:0
}

.btn-primary {
    background:linear-gradient(135deg,var(--ay-primary),#0f5969);
    color:#fff;
    box-shadow:0 16px 34px rgba(8,123,148,.25)
}

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

.btn-outline {
    border:2px solid var(--ay-primary);
    color:var(--ay-primary);
    background:#fff
}

.hero-actions {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px
}

.quick {
    margin-top:-54px;
    position:relative;
    z-index:2
}

.quick-grid,.service-grid,.area-grid,.gallery-grid,.process-grid {
    display:grid;
    gap:22px
}

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

.card {
    background:#fff;
    border:1px solid var(--ay-line);
    border-radius:22px;
    box-shadow:0 18px 44px rgba(16,38,45,.09);
    overflow:hidden
}

.quick-card {
    padding:25px;
    display:flex;
    gap:16px;
    align-items:flex-start
}

.icon {
    width:54px;
    height:54px;
    border-radius:18px;
    background:var(--ay-soft);
    color:var(--ay-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:25px;
    flex:0 0 auto
}

.section {
    padding:70px 0
}

.section.soft {
    background:#f6fbfc
}

.split {
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:48px;
    align-items:center
}

.photo-stack {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
}

.photo-stack img,.section-photo {
    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:22px;
    box-shadow:0 18px 42px rgba(16,38,45,.12)
}

.section-photo.tall {
    height:560px
}

.lead {
    font-size:18px
}

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

.service-card img {
    height:225px;
    width:100%;
    object-fit:cover
}

.service-content {
    padding:24px
}

.service-content h3 {
    font-size:23px;
    margin-bottom:10px
}

.cta-band {
    background:linear-gradient(125deg,#087b94,#10262d);
    border-radius:28px;
    padding:42px;
    color:#fff;
    position:relative;
    overflow:hidden
}

.cta-band:before {
    content:"";
    position:absolute;
    right:-80px;
    top:-90px;
    width:270px;
    height:270px;
    border-radius:50%;
    background:rgba(255,255,255,.10)
}

.cta-band h2,.cta-band h3 {
    color:#fff
}

.cta-flex {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    position:relative
}

.article {
    max-width:900px
}

.article p {
    font-size:17px;
    line-height:1.9;
    margin:0 0 18px
}

.article h2 {
    font-size:36px;
    margin-bottom:18px
}

.article h3 {
    font-size:25px;
    margin:28px 0 12px
}

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

.gallery-grid img {
    height:230px;
    width:100%;
    object-fit:cover;
    border-radius:22px;
    box-shadow:0 15px 34px rgba(16,38,45,.10)
}

.process-grid {
    grid-template-columns:repeat(4,1fr)
}

.process {
    padding:25px
}

.num {
    width:42px;
    height:42px;
    border-radius:50%;
    background:var(--ay-primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    margin-bottom:14px
}

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

.area {
    padding:24px;
    background:linear-gradient(180deg,#fff,#f9fdfe)
}

.area h3 {
    font-size:22px;
    margin-bottom:10px
}

.faq details {
    background:#fff;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(16,38,45,.08);
    margin-bottom:14px;
    border:1px solid var(--ay-line);
    overflow:hidden
}

.faq summary {
    cursor:pointer;
    font-weight:900;
    color:var(--ay-dark);
    padding:20px 22px
}

.faq details[open] summary {
    background:var(--ay-soft);
    color:var(--ay-primary)
}

.faq details p {
    padding:0 22px 20px;
    margin:0
}

.contact-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px
}

.contact-box {
    padding:28px
}

.footer {
    background:#10262d;
    color:#cfe4e9;
    padding:60px 0 20px
}

.footer h3,.footer h4 {
    color:#fff
}

.footer-grid {
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr 1fr;
    gap:28px
}

.footer a {
    display:block;
    color:#cfe4e9;
    margin-bottom:9px
}

.footer a:hover {
    color:#fff
}

.copy {
    border-top:1px solid rgba(255,255,255,.12);
    margin-top:35px;
    padding-top:18px;
    font-size:14px
}

.sticky-call {
    position:fixed;
    left:18px;
    bottom:18px;
    z-index:100;
    display:flex;
    gap:10px
}

.sticky-call a {
    box-shadow:0 12px 30px rgba(0,0,0,.22)
}

.small-note {
    font-size:14px;
    color:#74868d
}

.legal-list li {
    margin-bottom:10px
}

.map-box {
    height:330px;
    border-radius:22px;
    background:linear-gradient(135deg,#eefcff,#fff7eb);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:30px;
    border:1px dashed #b5dce5;
    color:#385057
}

@media(max-width:991px) {
    .topbar {
        display:none
    }

    .nav-inner {
        height:76px
    }

    .brand img {
        height:54px
    }

    .hamb {
        display:flex
    }

    .nav-menu {
        position:fixed;
        top:0;
        right:0;
        width:86vw;
        max-width:390px;
        height:100vh;
        background:linear-gradient(180deg,#10262d,#0d4451 65%,#087b94 150%);
        box-shadow:-28px 0 60px rgba(0,0,0,.35);
        display:block;
        padding:86px 18px 24px;
        transform:translateX(105%);
        transition:.3s;
        overflow:auto
    }

    .menu-toggle:checked~.nav-menu {
        transform:translateX(0)
    }

    .nav-menu a,.dropbtn {
        color:#fff!important;
        display:flex;
        padding:14px 15px;
        margin:0 0 10px;
        border:1px solid rgba(255,255,255,.12);
        background:rgba(255,255,255,.07);
        border-radius:16px
    }

    .nav-cta {
        margin-left:0;
        justify-content:center;
        background:#fff!important;
        color:var(--ay-primary)!important
    }

    .drop-menu {
        position:static;
        opacity:1;
        visibility:visible;
        transform:none;
        max-height:none;
        background:#fff;
        border-radius:18px;
        margin:-4px 0 12px;
        display:none
    }

    .drop:hover .drop-menu {
        display:block
    }

    .drop-menu a {
        color:#24363d!important;
        background:#fff;
        border:0;
        margin:0;
        padding:10px 13px
    }

    .hero {
        min-height:570px
    }

    .hero h1 {
        font-size:42px
    }

    .hero p {
        font-size:17px
    }

    .quick {
        margin-top:0
    }

    .quick-grid,.service-grid,.area-grid,.process-grid,.contact-grid {
        grid-template-columns:1fr
    }

    .split {
        grid-template-columns:1fr;
        gap:28px
    }

    .section {
        padding:48px 0
    }

    .section-photo.tall {
        height:320px
    }

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

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

    .cta-flex {
        display:block
    }

    .cta-flex .btn {
        margin-top:16px
    }

    .sticky-call {
        left:10px;
        right:10px;
        bottom:10px
    }

    .sticky-call a {
        flex:1;
        padding:12px 8px;
        font-size:14px
    }
}

@media(max-width:575px) {
    .hero h1 {
        font-size:34px
    }

    .hero {
        min-height:540px
    }

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

    .quick-card {
        padding:20px
    }

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

    .photo-stack {
        grid-template-columns:1fr
    }

    .photo-stack img {
        height:220px
    }

    .service-card img,.gallery-grid img {
        height:210px
    }

    .nav-inner {
        width:94%
    }

    .brand img {
        max-width:230px
    }

    .cta-band {
        padding:28px
    }

    .section h2 {
        font-size:30px
    }
}

.dropbtn {
    cursor:pointer
}

.drop.open .drop-menu {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    display:block
}

@media(max-width:991px) {
    .drop.open .drop-menu {
        display:block!important
    }
}