:root {
    --blue: #1094cc;
    --blue-dark: #0e7baa;
    --header: #e2f4ff;
    --orange: #f45c20;
    --footer: #163f58;
    --ink: #212934;
    --muted: #3f3f3f;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background: #fff;
}

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

a { color: var(--blue); }

h1, h2, h3, h4 {
    font-family: Mulish, Arial, Helvetica, sans-serif;
    line-height: 1.25;
    color: var(--muted);
}

.skip {
    position: absolute;
    left: -999px;
    top: 0;
}

.skip:focus { left: 8px; background: #fff; z-index: 20; padding: 8px; }

.wrap {
    width: min(1260px, calc(100% - 60px));
    margin-inline: auto;
}

.site-header {
    background: var(--header);
    position: sticky;
    top: 0;
    z-index: 30;
}

.header-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 94px;
    padding: 10px 30px 15px;
}

.logo img { width: 310px; height: auto; }

.main-nav { margin-left: auto; margin-right: 42px; }

.main-nav > ul {
    display: flex;
    align-items: center;
    gap: 58px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav a {
    color: var(--blue);
    text-decoration: none;
    font-size: 16px;
}

.main-nav a.current,
.main-nav a:hover { color: var(--blue-dark); }

.has-sub { position: relative; display: flex; align-items: center; }

.sub-toggle {
    border: 0;
    background: transparent;
    color: var(--blue);
    cursor: pointer;
    padding: 8px;
}

.submenu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 280px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    padding: 8px 0;
    z-index: 40;
}

.submenu a {
    display: block;
    padding: 10px 16px;
    color: var(--ink);
    font-size: 13px;
}

.submenu a:hover,
.submenu a.current { background: rgba(16, 148, 204, 0.08); color: var(--blue); }

.has-sub:hover .submenu,
.has-sub:focus-within .submenu,
.has-sub.open .submenu { display: flex; }

.menu-toggle {
    display: none;
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--blue);
    font-size: 22px;
    cursor: pointer;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 13px;
    padding: 14px 22px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
}

.btn-soft {
    color: var(--blue);
    background: rgba(16, 147, 203, 0.05);
    border-color: var(--blue);
}

.header-bar .btn-soft { padding: 20px 29px; }

.btn-ghost {
    color: var(--blue);
    background: rgba(244, 91, 31, 0.05);
    border-color: var(--orange);
}

.btn-solid {
    color: #fff;
    background: var(--orange);
    border-color: var(--orange);
}

.btn:hover { filter: brightness(0.96); }

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #fff;
}

.hero video,
.hero-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-shade { background: linear-gradient(90deg, rgba(8, 40, 70, 0.35), rgba(8, 40, 70, 0.05)); }

.hero-copy { position: relative; z-index: 1; max-width: 1164px; }

.hero h2 {
    margin: 0 0 14px;
    color: #fff;
    font-size: 60px;
    font-weight: 700;
}

.hero h3 {
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    max-width: 1164px;
}

.intro, .split, .why, .who, .feature, .join {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    padding: 70px 0;
}

.intro { grid-template-columns: 1.1fr 0.8fr 1fr; }

.intro-photo, .frame, .who img, .why img, .feature img, .pair img, .join img {
    border-radius: 18px;
    width: 100%;
    object-fit: cover;
}

.intro-art { display: grid; gap: 18px; justify-items: start; }

.intro-art img { width: min(246px, 100%); }

.intro-icon { width: 112px !important; }

.intro h1, .page-top h1, .split h1, .contact-grid h1 {
    color: var(--blue);
    font-size: 36px;
    margin: 0 0 12px;
}

.page-top { padding-top: 70px; }

.lede { max-width: 820px; font-size: 18px; }

.offer { padding: 20px 0 40px; }

.offer > div { max-width: 560px; }

.offer h2, .why h2, .who h2, .feature h2, .join h2, .split h2 {
    font-size: 26px;
    margin: 0 0 12px;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--blue-dark);
    text-decoration: none;
    font-weight: 600;
}

.round-ico {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cards-wrap { padding: 10px 0 40px; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.card {
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 10px 30px rgba(22, 63, 88, 0.08);
    padding: 18px 22px 28px;
    text-align: center;
}

.card img {
    width: 100%;
    height: 210px;
    object-fit: contain;
    margin-bottom: 8px;
}

.card h2 {
    font-size: 18px;
    letter-spacing: 0.02em;
    margin: 8px 0;
}

.card p { color: #222; }

.card a { font-weight: 600; text-decoration: none; }

.why ul { padding-left: 18px; }

.why li { margin: 8px 0; color: rgba(0, 0, 0, 0.7); }

.lead-line { font-weight: 700; }

.split h3 { font-size: 20px; color: #000; font-weight: 600; }

.alt { background: transparent; }

.join-photos, .pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.feature.flip { direction: rtl; }
.feature.flip > * { direction: ltr; }

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    padding-bottom: 80px;
}

.eyebrow { color: var(--orange); font-weight: 700; margin-bottom: 0; }

.enquiry-card {
    background: #f7fbfe;
    border-radius: 18px;
    padding: 28px;
}

.enquiry p { margin: 0 0 14px; }

.enquiry label { font-weight: 600; color: var(--ink); }

.enquiry input[type="text"],
.enquiry input[type="email"],
.enquiry textarea {
    width: 100%;
    margin-top: 6px;
    border: 1px solid #d5e3ec;
    border-radius: 10px;
    padding: 12px 14px;
    font: inherit;
}

.enquiry textarea { min-height: 180px; resize: vertical; }

.hp {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
}

.form-note { padding: 10px 12px; border-radius: 8px; }
.form-note.ok { background: #e7f8ee; color: #146c36; }
.form-note.error, .field-error { color: #a12626; }
.field-error { display: block; font-size: 14px; }

.missing { min-height: 50vh; text-align: center; padding: 80px 0; }
.missing h1 { font-size: 90px; color: var(--blue); margin: 0; }

.site-footer {
    background: #163f58;
    background-image: linear-gradient(160deg, #0c0c0c 34%, rgba(0, 0, 0, 0) 100%);
    background-blend-mode: screen;
    color: #fff;
    padding: 60px 8vw 20px;
}

.footer-inner { width: 100%; }

.footer-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.1fr 0.7fr;
    gap: 36px;
}

.footer-logo { width: 250px; margin-bottom: 16px; }

.site-footer h2 { color: #fff; font-size: 22px; margin-top: 0; }

.site-footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.site-footer a:hover { color: #fff; }

.footer-links { text-align: right; }
.footer-links ul { list-style: none; margin: 0 0 18px; padding: 0; }
.footer-links li { margin: 6px 0; }
.footer-links .btn { color: #fff; }

.copyright {
    text-align: center;
    margin: 28px 0 0;
    padding-top: 8px;
}

.to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

@media (max-width: 1035px) {
    .menu-toggle { display: inline-flex; }
    .header-bar { flex-wrap: wrap; }
    .main-nav {
        display: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        order: 3;
    }
    .main-nav.open { display: block; }
    .main-nav > ul { flex-direction: column; align-items: flex-start; gap: 0; }
    .main-nav > ul > li { width: 100%; border-top: 1px solid rgba(16, 148, 204, 0.15); }
    .main-nav > ul > li > a { display: inline-block; padding: 12px 0; }
    .submenu { position: static; box-shadow: none; min-width: 0; padding-left: 8px; }
    .has-sub:hover .submenu { display: none; }
    .has-sub.open .submenu,
    .has-sub:focus-within .submenu { display: flex; }
    .intro, .split, .why, .who, .feature, .join, .contact-grid, .footer-grid, .card-grid {
        grid-template-columns: 1fr;
    }
    .feature.flip { direction: ltr; }
    .hero h2 { font-size: 40px; }
    .hero h3 { font-size: 20px; }
    .footer-links { text-align: left; }
    .logo img { width: min(310px, 70vw); }
}

@media (max-width: 640px) {
    .wrap { width: min(1260px, calc(100% - 32px)); }
    .header-bar { padding-inline: 16px; flex-wrap: wrap; }
    .header-bar .btn { order: 4; width: 100%; justify-content: center; }
    .hero { min-height: 70vh; }
    .hero h2 { font-size: 32px; }
    .hero h3 { font-size: 18px; }
    .missing h1 { font-size: 64px; }
    .site-footer { padding-inline: 16px; }
    .card img { height: auto; }
}