:root {
    --navy-950: #061826;
    --navy-900: #082136;
    --navy-800: #0e3049;
    --navy-700: #17435e;

    --green-700: #08745d;
    --green-600: #0a8c6d;
    --green-500: #11a77f;
    --green-400: #35c99d;

    --white: #ffffff;
    --off-white: #f6f8f7;
    --soft: #eef2f0;
    --line: #dfe6e3;

    --text: #16232c;
    --muted: #64727b;

    --shell: 1240px;

    --shadow:
        0 26px 70px rgba(5, 27, 42, 0.14);
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    color: var(--text);
    background: var(--white);

    font-family:
        Inter,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}


body.nav-open {
    overflow: hidden;
}


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


button,
a {
    -webkit-tap-highlight-color: transparent;
}


.shell {
    width: min(
        calc(100% - 48px),
        var(--shell)
    );

    margin: 0 auto;
}


/* ==================================================
   HEADER
================================================== */

.site-header {
    position: absolute;
    z-index: 50;
    top: 0;
    left: 0;

    width: 100%;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.13);
}


.nav-shell {
    min-height: 92px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


.brand {
    display: inline-flex;
    align-items: center;

    gap: 13px;
}


.brand-mark {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(255, 255, 255, 0.34);

    color: var(--white);

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
}


.brand-copy {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.brand-copy strong {
    color: var(--white);

    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.18em;
}


.brand-copy small {
    color: rgba(255, 255, 255, 0.56);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.13em;

    text-transform: uppercase;
}


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

    gap: 31px;
}


.main-nav > a {
    color: rgba(255, 255, 255, 0.79);

    font-size: 13px;
    font-weight: 650;
}


.main-nav > a:hover {
    color: var(--white);
}


.main-nav .nav-cta {
    min-height: 42px;

    display: inline-flex;
    align-items: center;

    padding: 0 20px;

    border:
        1px solid rgba(255, 255, 255, 0.43);

    color: var(--white);
}


.nav-toggle {
    display: none;

    width: 45px;
    height: 42px;

    padding: 11px;

    border: 0;
    background: transparent;

    cursor: pointer;
}


.nav-toggle span {
    display: block;

    width: 100%;
    height: 1px;

    margin: 5px 0;

    background: var(--white);
}


/* ==================================================
   COMMON
================================================== */

.eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: var(--green-400);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}


.eyebrow::before {
    content: "";

    width: 28px;
    height: 1px;

    background: currentColor;
}


.eyebrow.dark {
    color: var(--green-700);
}


.button {
    min-height: 54px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 24px;

    padding: 0 25px;

    font-size: 13px;
    font-weight: 750;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease;
}


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


.button-primary {
    color: var(--white);
    background: var(--green-600);
}


.button-primary:hover {
    background: var(--green-500);
}


.button-secondary {
    color: var(--white);

    border:
        1px solid rgba(255, 255, 255, 0.30);

    background:
        rgba(255, 255, 255, 0.03);
}


.button-light {
    color: var(--navy-950);
    background: var(--white);
}


/* ==================================================
   HERO
================================================== */

.hero {
    position: relative;
    overflow: hidden;

    min-height: 760px;

    display: flex;
    align-items: center;

    padding:
        154px 0
        105px;

    color: var(--white);

    background:
        radial-gradient(
            circle at 77% 45%,
            rgba(17, 167, 127, 0.19),
            transparent 29%
        ),
        linear-gradient(
            124deg,
            #061826 0%,
            #082337 52%,
            #0b3042 100%
        );
}


.hero::before {
    content: "";

    position: absolute;

    right: -15%;
    bottom: -44%;

    width: 680px;
    height: 680px;

    border:
        1px solid rgba(51, 201, 157, 0.14);

    border-radius: 50%;
}


.hero-grid-pattern {
    position: absolute;
    inset: 0;

    opacity: 0.15;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 5%,
            black 45%,
            black 95%
        );
}


.hero-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(430px, 0.95fr);

    align-items: center;

    gap: 80px;
}


.hero-copy h1 {
    max-width: 680px;

    margin:
        26px 0
        28px;

    color: var(--white);

    font-size:
        clamp(66px, 7vw, 104px);

    line-height: 0.91;

    font-weight: 300;

    letter-spacing: -0.055em;
}


.hero-copy h1 span {
    color: var(--green-400);
}


.hero-lead {
    max-width: 590px;

    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 18px;
    line-height: 1.75;
}


.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 39px;
}


.hero-trust {
    max-width: 570px;

    display: flex;
    align-items: center;

    gap: 18px;

    margin-top: 48px;
}


.trust-line {
    width: 45px;
    height: 1px;

    flex: 0 0 auto;

    background:
        rgba(255, 255, 255, 0.27);
}


.hero-trust p {
    margin: 0;

    color: rgba(255, 255, 255, 0.49);

    font-size: 11px;

    letter-spacing: 0.075em;
    text-transform: uppercase;
}


.hero-trust strong {
    color: rgba(255, 255, 255, 0.85);
}


.hero-visual {
    position: relative;

    min-height: 455px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.visual-glow {
    position: absolute;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(53, 201, 157, 0.19),
            transparent 66%
        );
}


.visual-label {
    position: absolute;
    z-index: 3;

    top: 20px;
    right: 5px;

    display: flex;
    align-items: center;

    gap: 9px;

    color: rgba(255, 255, 255, 0.55);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


.visual-label span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green-400);

    box-shadow:
        0 0 0 5px rgba(53, 201, 157, 0.10);
}


.network-card {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 520px;

    padding: 28px;

    border:
        1px solid rgba(255, 255, 255, 0.13);

    background:
        rgba(4, 22, 34, 0.65);

    box-shadow: var(--shadow);

    backdrop-filter: blur(14px);
}


.network-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}


.network-top > div:first-child {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.network-top small {
    color: rgba(255, 255, 255, 0.42);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.16em;
}


.network-top strong {
    font-size: 17px;
    letter-spacing: 0.03em;
}


.network-status {
    padding: 6px 9px;

    border:
        1px solid rgba(53, 201, 157, 0.28);

    color: var(--green-400);

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 0.15em;
}


.network-map {
    position: relative;

    height: 246px;

    margin-top: 18px;

    overflow: hidden;

    border-top:
        1px solid rgba(255, 255, 255, 0.07);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);
}


.map-orbit {
    position: absolute;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 50%;
}


.orbit-one {
    width: 290px;
    height: 290px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);
}


.orbit-two {
    width: 170px;
    height: 170px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);
}


.map-node {
    position: absolute;
    z-index: 3;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


.map-node > span {
    width: 12px;
    height: 12px;

    margin-bottom: 7px;

    border:
        3px solid rgba(255, 255, 255, 0.18);

    border-radius: 50%;

    background: var(--green-400);

    box-shadow:
        0 0 0 7px rgba(53, 201, 157, 0.09);
}


.map-node strong {
    font-size: 12px;

    letter-spacing: 0.10em;
}


.map-node small {
    color: rgba(255, 255, 255, 0.42);

    font-size: 8px;
}


.node-fiji {
    left: 12%;
    top: 58%;
}


.node-japan {
    right: 11%;
    top: 25%;
}


.map-route {
    position: absolute;

    left: 28%;
    top: 52%;

    width: 45%;
    height: 1px;

    transform: rotate(-18deg);

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            var(--green-400),
            rgba(53, 201, 157, 0.15)
        );
}


.map-route::after {
    content: "";

    position: absolute;

    right: 0;
    top: -3px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--green-400);
}


.network-services {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-top: 22px;
}


.network-services span {
    text-align: center;

    color: rgba(255, 255, 255, 0.48);

    font-size: 8px;
    font-weight: 750;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.visual-footer-note {
    position: absolute;
    z-index: 4;

    bottom: -12px;
    left: 20px;

    padding: 12px 16px;

    color: rgba(255, 255, 255, 0.57);

    background: var(--navy-950);

    font-size: 10px;
    letter-spacing: 0.08em;
}


.visual-footer-note strong {
    color: var(--white);
}


.hero-scroll {
    position: absolute;
    z-index: 4;

    bottom: 31px;
    left: 50%;

    display: flex;
    align-items: center;

    gap: 10px;

    transform: translateX(-50%);

    color: rgba(255, 255, 255, 0.37);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.16em;
    text-transform: uppercase;
}


.hero-scroll span {
    width: 1px;
    height: 28px;

    background:
        rgba(255, 255, 255, 0.25);
}


/* ==================================================
   INTRO
================================================== */

.intro {
    padding: 128px 0;
}


.intro-layout {
    display: grid;

    grid-template-columns:
        0.85fr 1.15fr;

    gap: 100px;
}


.section-heading h2,
.businesses-header h2,
.network-copy h2,
.contact h2 {
    margin:
        19px 0 0;

    color: var(--navy-950);

    font-size:
        clamp(39px, 4.2vw, 62px);

    line-height: 1.06;

    font-weight: 350;

    letter-spacing: -0.04em;
}


.intro-copy {
    padding-top: 7px;
}


.intro-copy p {
    max-width: 660px;

    color: var(--muted);

    font-size: 15px;
    line-height: 1.85;
}


.intro-copy .intro-large {
    margin-top: 0;

    color: var(--text);

    font-size: 22px;
    line-height: 1.55;
}


.intro-principles {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 0;

    margin-top: 49px;

    border-top:
        1px solid var(--line);
}


.intro-principles > div {
    min-height: 115px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 13px;

    padding-right: 20px;

    border-right:
        1px solid var(--line);
}


.intro-principles > div:last-child {
    border-right: 0;
    padding-left: 22px;
}


.intro-principles > div:nth-child(2) {
    padding-left: 22px;
}


.intro-principles span {
    color: var(--green-600);

    font-size: 10px;
    font-weight: 800;
}


.intro-principles strong {
    font-size: 13px;
}


/* ==================================================
   BUSINESSES
================================================== */

.businesses {
    padding: 124px 0;

    color: var(--white);
    background: var(--navy-950);
}


.businesses-header {
    display: grid;

    grid-template-columns:
        1.05fr 0.95fr;

    gap: 100px;

    align-items: end;

    margin-bottom: 61px;
}


.businesses-header h2 {
    color: var(--white);
}


.businesses-header > p {
    max-width: 490px;

    margin:
        0 0 8px auto;

    color: rgba(255, 255, 255, 0.55);

    font-size: 14px;
    line-height: 1.85;
}


.business-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);
}


.business-card {
    position: relative;

    min-height: 470px;

    display: flex;
    flex-direction: column;

    padding:
        32px 30px
        29px;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    border-right: 0;

    background:
        rgba(255, 255, 255, 0.015);

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.business-card:last-child {
    border-right:
        1px solid rgba(255, 255, 255, 0.10);
}


.business-card:hover {
    z-index: 3;

    transform: translateY(-9px);

    background:
        rgba(255, 255, 255, 0.045);
}


.business-card.featured {
    background:
        linear-gradient(
            180deg,
            rgba(17, 167, 127, 0.19),
            rgba(17, 167, 127, 0.03)
        );
}


.card-number {
    color: rgba(255, 255, 255, 0.25);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.12em;
}


.card-icon {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    margin-top: 51px;

    color: var(--green-400);
}


.card-icon svg {
    width: 46px;
    height: 46px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.business-card h3 {
    margin:
        27px 0
        19px;

    color: var(--white);

    font-size: 26px;
    line-height: 1.15;

    font-weight: 430;
    letter-spacing: -0.025em;
}


.business-card p {
    margin: 0;

    color: rgba(255, 255, 255, 0.51);

    font-size: 13px;
    line-height: 1.75;
}


.business-card > a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: auto;
    padding-top: 24px;

    border-top:
        1px solid rgba(255, 255, 255, 0.10);

    color: rgba(255, 255, 255, 0.67);

    font-size: 11px;
    font-weight: 750;
}


.business-card > a span {
    color: var(--green-400);

    font-size: 18px;
}


/* ==================================================
   NETWORK
================================================== */

.network {
    padding: 132px 0;

    background: var(--off-white);
}


.network-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(390px, 0.8fr);

    align-items: center;

    gap: 115px;
}


.network-copy > p {
    max-width: 590px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.85;
}


.network-copy h2 + p {
    margin-top: 34px;
}


.support-badge {
    max-width: 430px;

    display: flex;
    align-items: center;

    gap: 17px;

    margin-top: 38px;
    padding-top: 28px;

    border-top:
        1px solid var(--line);
}


.support-mark {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    color: var(--white);
    background: var(--navy-950);

    font-weight: 900;
}


.support-badge > div:last-child {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.support-badge small {
    color: #8a969b;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.11em;
}


.support-badge strong {
    color: var(--navy-950);

    font-size: 14px;
}


.network-process {
    position: relative;

    padding:
        13px 0
        13px 54px;
}


.process-line {
    position: absolute;

    left: 16px;
    top: 28px;
    bottom: 28px;

    width: 1px;

    background: #cad5d1;
}


.process-item {
    position: relative;

    min-height: 102px;

    display: flex;
    align-items: flex-start;

    gap: 23px;
}


.process-item::before {
    content: "";

    position: absolute;

    left: -43px;
    top: 5px;

    width: 11px;
    height: 11px;

    border:
        3px solid var(--off-white);

    border-radius: 50%;

    background: var(--green-600);

    box-shadow:
        0 0 0 1px var(--green-600);
}


.process-item > span {
    min-width: 27px;

    color: var(--green-600);

    font-size: 10px;
    font-weight: 850;
}


.process-item > div {
    display: flex;
    flex-direction: column;

    gap: 7px;
}


.process-item small {
    color: #94a09f;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 0.14em;
}


.process-item strong {
    color: var(--navy-950);

    font-size: 17px;
    font-weight: 600;
}


/* ==================================================
   STATEMENT
================================================== */

.statement {
    padding: 106px 0;

    color: var(--white);

    background:
        linear-gradient(
            115deg,
            var(--green-700),
            #08644f
        );
}


.statement-inner {
    display: flex;
    align-items: center;

    gap: 60px;
}


.statement-symbol {
    width: 80px;
    height: 80px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    border:
        1px solid rgba(255, 255, 255, 0.39);

    font-size: 20px;
    font-weight: 800;

    letter-spacing: 0.08em;
}


.statement blockquote {
    margin: 0;

    color: rgba(255, 255, 255, 0.76);

    font-size:
        clamp(36px, 5vw, 68px);

    line-height: 1.1;

    font-weight: 300;

    letter-spacing: -0.045em;
}


.statement blockquote span {
    color: var(--white);
}


/* ==================================================
   CONTACT
================================================== */

.contact {
    padding: 125px 0;

    color: var(--white);
    background: var(--navy-900);
}


.contact-layout {
    display: grid;

    grid-template-columns:
        1.1fr 0.9fr;

    gap: 100px;
}


.contact h2 {
    color: var(--white);
}


.contact-copy {
    align-self: end;

    padding-bottom: 7px;
}


.contact-copy p {
    max-width: 490px;

    margin:
        0 0
        31px;

    color: rgba(255, 255, 255, 0.59);

    font-size: 15px;
    line-height: 1.8;
}


.contact-note {
    display: block;

    margin-top: 16px;

    color: rgba(255, 255, 255, 0.34);

    font-size: 9px;

    letter-spacing: 0.07em;
}


/* ==================================================
   FOOTER
================================================== */

.site-footer {
    padding:
        58px 0
        31px;

    color: var(--white);
    background: #04131f;
}


.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding-bottom: 45px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.09);
}


.footer-links {
    display: flex;

    gap: 29px;
}


.footer-links a {
    color: rgba(255, 255, 255, 0.56);

    font-size: 11px;
}


.footer-bottom {
    display: flex;
    justify-content: space-between;

    gap: 25px;

    padding-top: 25px;
}


.footer-bottom p {
    margin: 0;

    color: rgba(255, 255, 255, 0.29);

    font-size: 9px;

    letter-spacing: 0.05em;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1050px) {

    .hero-layout {
        grid-template-columns: 1fr;
        gap: 75px;
    }

    .hero-copy {
        max-width: 760px;
    }

    .hero-visual {
        max-width: 670px;
        width: 100%;

        margin: 0 auto;
    }

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

    .business-card {
        border-bottom: 0;
    }

    .business-card:nth-child(2) {
        border-right:
            1px solid rgba(255, 255, 255, 0.10);
    }

    .business-card:nth-child(3),
    .business-card:nth-child(4) {
        border-bottom:
            1px solid rgba(255, 255, 255, 0.10);
    }

    .network-layout {
        gap: 65px;
    }

}


@media (max-width: 820px) {

    .shell {
        width:
            min(
                calc(100% - 34px),
                var(--shell)
            );
    }

    .site-header {
        position: absolute;
    }

    .nav-shell {
        min-height: 76px;
    }

    .brand-mark {
        width: 39px;
        height: 39px;

        font-size: 12px;
    }

    .brand-copy strong {
        font-size: 14px;
    }

    .nav-toggle {
        display: block;

        position: relative;
        z-index: 80;
    }

    .main-nav {
        position: fixed;
        z-index: 70;

        inset: 0;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 28px;

        padding: 70px 36px;

        background:
            rgba(4, 19, 31, 0.98);

        opacity: 0;
        visibility: hidden;

        transform: translateY(-10px);

        transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            transform 0.2s ease;
    }

    .main-nav.is-open {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);
    }

    .main-nav > a {
        font-size: 24px;
        font-weight: 400;
    }

    .main-nav .nav-cta {
        margin-top: 9px;

        font-size: 14px;
    }

    .hero {
        min-height: auto;

        padding:
            132px 0
            93px;
    }

    .hero-layout {
        gap: 60px;
    }

    .hero-copy h1 {
        font-size:
            clamp(58px, 16vw, 82px);
    }

    .hero-lead {
        font-size: 16px;
    }

    .hero-trust {
        align-items: flex-start;
    }

    .hero-scroll {
        display: none;
    }

    .hero-visual {
        min-height: 390px;
    }

    .network-card {
        padding: 22px;
    }

    .network-map {
        height: 210px;
    }

    .intro,
    .businesses,
    .network,
    .contact {
        padding:
            88px 0;
    }

    .intro-layout,
    .businesses-header,
    .network-layout,
    .contact-layout {
        grid-template-columns: 1fr;

        gap: 47px;
    }

    .businesses-header > p {
        margin: 0;
    }

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

    .intro-principles > div,
    .intro-principles > div:nth-child(2),
    .intro-principles > div:last-child {
        min-height: 80px;

        padding:
            0 0;

        border-right: 0;

        border-bottom:
            1px solid var(--line);
    }

    .intro-principles > div:last-child {
        border-bottom: 0;
    }

    .network-process {
        padding-left: 46px;
    }

    .statement {
        padding: 76px 0;
    }

    .statement-inner {
        align-items: flex-start;
        flex-direction: column;

        gap: 32px;
    }

    .statement-symbol {
        width: 62px;
        height: 62px;
    }

    .footer-top,
    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-links {
        flex-wrap: wrap;
    }

}


@media (max-width: 570px) {

    .shell {
        width:
            calc(100% - 28px);
    }

    .brand-copy small {
        display: none;
    }

    .hero-copy h1 {
        margin-top: 21px;

        font-size:
            clamp(54px, 18vw, 74px);
    }

    .hero-actions {
        display: grid;

        grid-template-columns: 1fr;
    }

    .button {
        width: 100%;
    }

    .hero-visual {
        min-height: 340px;
    }

    .network-card {
        padding: 18px;
    }

    .network-map {
        height: 185px;
    }

    .network-services {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 12px;
    }

    .visual-label {
        top: -5px;
        right: 0;
    }

    .visual-footer-note {
        left: 0;
        bottom: -5px;
    }

    .business-grid {
        grid-template-columns: 1fr;
    }

    .business-card {
        min-height: 420px;

        border-right:
            1px solid rgba(255, 255, 255, 0.10);

        border-bottom: 0;
    }

    .business-card:nth-child(3) {
        border-bottom: 0;
    }

    .business-card:last-child {
        border-bottom:
            1px solid rgba(255, 255, 255, 0.10);
    }

    .statement blockquote {
        font-size: 42px;
    }

    .footer-links {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        width: 100%;
    }

}


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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition: none !important;
    }

}

/* =====================================================
   IVUREVURE_PACIFIC_HERO_V5_20260818
   FIJI HUB -> SOUTH PACIFIC
   ===================================================== */


.hero {
    position: relative;
    overflow: hidden;

    min-height:
        calc(100svh - 70px);

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(34, 211, 177, .16),
            transparent 30%
        ),
        radial-gradient(
            circle at 17% 18%,
            rgba(42, 112, 230, .15),
            transparent 31%
        ),
        linear-gradient(
            130deg,
            #020c16 0%,
            #061929 43%,
            #072b38 100%
        );
}


.hero::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(120, 202, 211, .027) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(120, 202, 211, .027) 1px,
            transparent 1px
        );

    background-size:
        64px 64px;
}


.hero-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .94fr)
        minmax(490px, 1.06fr);

    gap:
        clamp(
            42px,
            5vw,
            82px
        );

    align-items: center;

    padding-top:
        clamp(
            70px,
            8vw,
            118px
        );

    padding-bottom:
        clamp(
            80px,
            8vw,
            125px
        );
}


.hero-copy {
    position: relative;
    z-index: 3;

    max-width: 700px;
}


.pacific-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

    color: #83ebd3;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .19em;
}


.pacific-eyebrow span {
    width: 30px;
    height: 1px;

    background: #5ce2c2;

    box-shadow:
        0 0 12px
        rgba(92, 226, 194, .9);
}


.hero-copy h1 {
    max-width: 760px;

    margin: 0;

    color: #f6fbff;

    font-size:
        clamp(
            48px,
            5.45vw,
            80px
        );

    line-height: .99;

    letter-spacing: -.052em;
}


.hero-copy h1 span {
    display: block;

    margin-top: 8px;

    background:
        linear-gradient(
            90deg,
            #70edcf,
            #55d5df 52%,
            #91bfff
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color:
        transparent;
}


.hero-lead {
    max-width: 640px;

    margin-top: 28px;

    color:
        rgba(
            220,
            235,
            245,
            .76
        );

    font-size:
        clamp(
            17px,
            1.4vw,
            20px
        );

    line-height: 1.7;
}


.pacific-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;
}


.pacific-button {
    display: inline-flex;

    min-height: 50px;

    align-items: center;
    justify-content: center;

    gap: 16px;

    padding:
        0 21px;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius: 9px;

    text-decoration: none;

    font-size: 13px;
    font-weight: 800;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}


.pacific-button:hover {
    transform:
        translateY(-2px);
}


.pacific-button-primary {
    color: #02161b;

    border-color: #65e4c5;

    background:
        linear-gradient(
            135deg,
            #72ecca,
            #4ed5dc
        );

    box-shadow:
        0 14px 35px
        rgba(37,206,174,.19);
}


.pacific-button-primary b {
    font-size: 17px;
}


.pacific-button-secondary {
    color: #edf9ff;

    background:
        rgba(255,255,255,.045);
}


.pacific-button-secondary:hover {
    border-color:
        rgba(104,231,205,.42);

    background:
        rgba(255,255,255,.075);
}


.pacific-business-pills {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 25px;
}


.pacific-business-pills span {
    padding:
        7px 10px;

    border:
        1px solid
        rgba(111,220,207,.14);

    border-radius: 999px;

    color:
        rgba(218,242,243,.70);

    background:
        rgba(7,36,47,.48);

    font-size: 10px;
    font-weight: 750;

    letter-spacing: .05em;
}


.pacific-base-note {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-top: 23px;
}


.pacific-base-note i {
    width: 8px;
    height: 8px;

    flex:
        0 0 8px;

    border-radius: 50%;

    background: #61e2bd;

    box-shadow:
        0 0 0 5px
        rgba(97,226,189,.09),
        0 0 16px
        rgba(97,226,189,.65);
}


.pacific-base-note p {
    margin: 0;

    color:
        rgba(194,219,226,.57);

    font-size: 11px;

    line-height: 1.5;
}


.pacific-base-note strong {
    color:
        rgba(231,247,246,.88);
}


/* =============================================
   NETWORK
   ============================================= */


.pacific-visual {
    position: relative;

    min-width: 0;

    padding:
        34px 0 25px;
}


.pacific-glow {
    position: absolute;

    inset:
        9% 3% 5% 8%;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(47,226,190,.18),
            rgba(30,123,203,.08) 46%,
            transparent 71%
        );

    filter:
        blur(27px);
}


.pacific-map-label {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin:
        0 0 11px 20px;

    color:
        rgba(176,220,227,.63);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .19em;
}


.pacific-map-label span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #68e5c5;

    box-shadow:
        0 0 13px
        #68e5c5;
}


.pacific-card {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(117,215,209,.17);

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            rgba(7,34,49,.90),
            rgba(3,18,31,.95)
        );

    box-shadow:
        0 34px 90px
        rgba(0,0,0,.34),
        inset 0 1px 0
        rgba(255,255,255,.035);
}


.pacific-card::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -90px;
    top: -100px;

    border-radius: 50%;

    background:
        rgba(61,221,187,.07);

    pointer-events: none;
}


.pacific-card-head {
    position: relative;
    z-index: 4;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding:
        19px 21px 16px;

    border-bottom:
        1px solid
        rgba(255,255,255,.055);
}


.pacific-card-head small {
    display: block;

    margin-bottom: 5px;

    color:
        rgba(164,211,219,.49);

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .21em;
}


.pacific-card-head strong {
    color: #e8f7fa;

    font-size: 15px;

    letter-spacing: .08em;
}


.pacific-active {
    display: flex;

    align-items: center;

    gap: 7px;

    padding:
        6px 9px;

    border:
        1px solid
        rgba(95,225,190,.16);

    border-radius: 999px;

    color: #89e7ce;

    background:
        rgba(32,155,121,.08);

    font-size: 8px;
    font-weight: 850;

    letter-spacing: .12em;
}


.pacific-active i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #64e1bd;

    box-shadow:
        0 0 12px
        rgba(100,225,189,.85);
}


.pacific-map {
    position: relative;

    height: 450px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 53%,
            rgba(57,226,187,.11),
            transparent 21%
        ),
        radial-gradient(
            circle at 72% 28%,
            rgba(48,143,219,.08),
            transparent 23%
        ),
        linear-gradient(
            180deg,
            rgba(4,22,35,.55),
            rgba(4,26,36,.23)
        );
}


.pacific-grid {
    position: absolute;

    inset: 0;

    opacity: .23;

    background-image:
        linear-gradient(
            rgba(122,193,205,.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(122,193,205,.12) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;
}


.pacific-ocean-title {
    position: absolute;

    left: 50%;
    top: 46%;

    transform:
        translate(-50%, -50%);

    color:
        rgba(115,192,205,.075);

    font-size:
        clamp(
            30px,
            4vw,
            48px
        );

    font-weight: 900;

    letter-spacing: .22em;

    white-space: nowrap;
}


.pacific-lines {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


.pacific-lines path {
    fill: none;

    stroke:
        rgba(91,228,197,.60);

    stroke-width: .35;

    vector-effect:
        non-scaling-stroke;

    stroke-dasharray:
        5 4;

    filter:
        drop-shadow(
            0 0 3px
            rgba(71,221,188,.68)
        );

    animation:
        ivuRouteFlow
        6s linear infinite;
}


.pacific-lines path:nth-child(even) {
    stroke:
        rgba(79,176,225,.54);

    animation-duration:
        7.5s;
}


@keyframes ivuRouteFlow {

    to {
        stroke-dashoffset:
            -72;
    }

}


.pacific-radar {
    position: absolute;

    left: 50%;
    top: 53%;

    width: 90px;
    height: 90px;

    transform:
        translate(-50%, -50%);

    border:
        1px solid
        rgba(92,231,196,.20);

    border-radius: 50%;

    animation:
        ivuRadarPulse
        3.5s ease-out infinite;
}


.radar-two {
    animation-delay:
        1.7s;
}


@keyframes ivuRadarPulse {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(.45);
    }

    28% {
        opacity: .8;
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(1.75);
    }

}


.pacific-point {
    position: absolute;
    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;

    transform:
        translate(-50%, -50%);

    text-align: center;
}


.pacific-point i {
    width: 8px;
    height: 8px;

    margin-bottom: 6px;

    border:
        2px solid
        rgba(200,252,238,.88);

    border-radius: 50%;

    background: #3bcca9;

    box-shadow:
        0 0 0 5px
        rgba(59,204,169,.08),
        0 0 14px
        rgba(59,204,169,.75);
}


.pacific-point strong {
    max-width: 115px;

    color:
        rgba(225,244,247,.87);

    font-size: 8px;
    font-weight: 850;

    line-height: 1.18;

    letter-spacing: .06em;

    white-space: nowrap;
}


.pacific-point small {
    margin-top: 3px;

    color:
        rgba(139,226,209,.72);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .10em;
}


.point-fiji {
    left: 50%;
    top: 53%;

    z-index: 8;
}


.point-samoa {
    left: 78%;
    top: 28%;
}


.point-tonga {
    left: 73%;
    top: 70%;
}


.point-vanuatu {
    left: 34%;
    top: 54%;
}


.point-solomon {
    left: 27%;
    top: 31%;
}


.point-png {
    left: 14%;
    top: 17%;
}


.point-nc {
    left: 30%;
    top: 81%;
}


.point-tuvalu {
    left: 58%;
    top: 17%;
}


.point-cook {
    left: 87%;
    top: 51%;
}


.point-fiji i {
    width: 16px;
    height: 16px;

    margin-bottom: 8px;

    border:
        3px solid
        rgba(225,255,247,.97);

    background: #58e3bf;

    box-shadow:
        0 0 0 8px
        rgba(88,227,191,.10),
        0 0 30px
        rgba(88,227,191,.92);
}


.point-fiji strong {
    color: #fff;

    font-size: 13px;

    letter-spacing: .13em;
}


.point-fiji small {
    font-size: 8px;
}


.pacific-card-services {
    position: relative;
    z-index: 4;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 7px;

    padding:
        14px 16px 17px;

    border-top:
        1px solid
        rgba(255,255,255,.05);
}


.pacific-card-services span {
    padding:
        7px 6px;

    border:
        1px solid
        rgba(123,212,207,.10);

    border-radius: 6px;

    color:
        rgba(192,222,227,.61);

    background:
        rgba(255,255,255,.018);

    text-align: center;

    font-size: 8px;
    font-weight: 750;
}


.pacific-signature {
    margin-top: 13px;

    padding-right: 9px;

    color:
        rgba(178,211,219,.51);

    text-align: right;

    font-size: 10px;

    letter-spacing: .06em;
}


.pacific-signature strong {
    color:
        rgba(108,230,203,.82);
}


/* =============================================
   TABLET
   ============================================= */


@media (max-width: 1120px) {

    .hero-layout {
        grid-template-columns:
            1fr;

        gap: 32px;

        padding-top:
            72px;
    }


    .hero-copy {
        max-width:
            820px;
    }


    .pacific-visual {
        width:
            min(
                100%,
                820px
            );

        margin:
            0 auto;
    }

}


/* =============================================
   MOBILE
   ============================================= */


@media (max-width: 720px) {

    .hero {
        min-height:
            auto;
    }


    .hero-layout {
        gap: 27px;

        padding-top: 50px;

        padding-bottom:
            74px;
    }


    .pacific-eyebrow {
        margin-bottom:
            16px;

        font-size:
            9px;

        letter-spacing:
            .14em;
    }


    .hero-copy h1 {
        font-size:
            clamp(
                40px,
                12.5vw,
                59px
            );

        line-height:
            1.01;
    }


    .hero-lead {
        margin-top:
            20px;

        font-size:
            15px;

        line-height:
            1.62;
    }


    .pacific-actions {
        display: grid;

        grid-template-columns:
            1fr;

        margin-top:
            24px;
    }


    .pacific-button {
        width: 100%;
    }


    .pacific-business-pills {
        margin-top:
            19px;
    }


    .pacific-business-pills span {
        font-size:
            9px;
    }


    .pacific-visual {
        padding-top:
            15px;
    }


    .pacific-map-label {
        margin-left:
            8px;

        font-size:
            8px;
    }


    .pacific-card {
        border-radius:
            16px;
    }


    .pacific-card-head {
        padding:
            15px 13px 13px;
    }


    .pacific-card-head strong {
        font-size:
            11px;
    }


    .pacific-active {
        padding:
            5px 7px;

        font-size:
            7px;
    }


    .pacific-map {
        height:
            385px;
    }


    .pacific-ocean-title {
        font-size:
            25px;
    }


    .pacific-point strong {
        max-width:
            78px;

        font-size:
            6.5px;

        white-space:
            normal;
    }


    .pacific-point small {
        display: none;
    }


    .point-fiji strong {
        font-size:
            11px;
    }


    .point-png {
        left: 16%;
    }


    .point-cook {
        left: 85%;
    }


    .pacific-card-services {
        grid-template-columns:
            repeat(2, 1fr);

        padding:
            11px 10px 13px;
    }


    .pacific-card-services span {
        font-size:
            7px;
    }


    .pacific-signature {
        padding-right:
            2px;

        text-align:
            left;
    }

}


/* =============================================
   ACCESSIBILITY
   ============================================= */


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

    .pacific-lines path,
    .pacific-radar {
        animation:
            none !important;
    }

}




/* =========================================================
   IVUREVURE_PACIFIC_LANDSCAPE_V51_20260818
   Desktop network visual landscape correction
   ========================================================= */


/*
 * 既存 hero-visual のレイアウト影響をリセット
 */

.hero-visual.pacific-visual {
    display: block !important;

    position: relative !important;

    width: 100% !important;
    max-width: 660px !important;

    min-width: 0 !important;

    margin:
        0 auto !important;

    padding:
        20px 0 18px !important;

    transform: none !important;
}


/*
 * 右カラム自体も十分な横幅を確保
 */

.hero-layout {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(560px, .96fr) !important;

    gap:
        clamp(
            50px,
            5vw,
            86px
        ) !important;
}


/*
 * NETWORKラベルをカード左上へ正常配置
 */

.pacific-map-label {
    position: static !important;

    display: flex !important;

    width: auto !important;

    align-items: center !important;

    justify-content: flex-start !important;

    margin:
        0 0 12px 4px !important;

    transform: none !important;

    text-align: left !important;
}


/*
 * 本体カード
 */

.pacific-card {
    display: block !important;

    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 0 !important;

    margin: 0 !important;

    transform: none !important;

    border-radius:
        22px !important;
}


/*
 * 地図を縦長450pxから横長320pxへ
 */

.pacific-map {
    width: 100% !important;

    height: 320px !important;

    min-height: 0 !important;

    aspect-ratio: auto !important;
}


/*
 * ヘッダーも横長カード向け
 */

.pacific-card-head {
    min-height: 74px !important;

    padding:
        17px 22px !important;
}


.pacific-card-head strong {
    font-size:
        16px !important;
}


/*
 * 太平洋の薄い背景文字
 */

.pacific-ocean-title {
    font-size:
        clamp(
            38px,
            4vw,
            58px
        ) !important;

    letter-spacing:
        .24em !important;
}


/*
 * 島国名を少し読みやすく
 */

.pacific-point strong {
    font-size:
        8.5px !important;

    max-width:
        120px !important;
}


.point-fiji strong {
    font-size:
        14px !important;
}


/*
 * 横長になったのでポイント位置も微調整
 */

.point-png {
    left: 12% !important;
    top: 18% !important;
}


.point-solomon {
    left: 27% !important;
    top: 34% !important;
}


.point-vanuatu {
    left: 34% !important;
    top: 57% !important;
}


.point-nc {
    left: 28% !important;
    top: 83% !important;
}


.point-tuvalu {
    left: 58% !important;
    top: 16% !important;
}


.point-fiji {
    left: 51% !important;
    top: 55% !important;
}


.point-samoa {
    left: 78% !important;
    top: 28% !important;
}


.point-cook {
    left: 89% !important;
    top: 54% !important;
}


.point-tonga {
    left: 72% !important;
    top: 78% !important;
}


/*
 * 6事業はPCで横一列
 */

.pacific-card-services {
    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    gap:
        6px !important;

    padding:
        13px 15px 15px !important;
}


.pacific-card-services span {
    display: flex !important;

    min-height:
        36px !important;

    align-items: center !important;
    justify-content: center !important;

    padding:
        6px 4px !important;

    font-size:
        8px !important;

    line-height:
        1.2 !important;
}


/*
 * Built in Fiji... をカード直下へ
 */

.pacific-signature {
    position: static !important;

    width: 100% !important;

    margin:
        11px 4px 0 !important;

    padding: 0 !important;

    transform: none !important;

    text-align:
        right !important;
}


/*
 * Glowも横長へ
 */

.pacific-glow {
    inset:
        10% -2% 4% 0 !important;

    transform:
        scaleX(1.18) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1120px) {

    .hero-layout {
        grid-template-columns:
            1fr !important;
    }


    .hero-visual.pacific-visual {
        width:
            min(
                100%,
                760px
            ) !important;

        max-width:
            760px !important;
    }


    .pacific-map {
        height:
            350px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .hero-visual.pacific-visual {
        width:
            100% !important;

        max-width:
            none !important;

        padding-top:
            12px !important;
    }


    .pacific-card {
        border-radius:
            16px !important;
    }


    .pacific-map {
        height:
            300px !important;
    }


    .pacific-card-head {
        min-height:
            62px !important;

        padding:
            13px 13px !important;
    }


    .pacific-card-head strong {
        font-size:
            11px !important;
    }


    .pacific-point strong {
        font-size:
            6.5px !important;
    }


    .point-fiji strong {
        font-size:
            11px !important;
    }


    .pacific-card-services {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }


    .pacific-signature {
        text-align:
            left !important;
    }

}