/* ============ page banner ============ */
.banner {
    position: relative;
    overflow: hidden;
    min-height: clamp(346px, 50svh, 560px);
    display: flex;
    align-items: flex-end;
    padding: 124px 0 64px;
    background:
        radial-gradient(120% 140% at 50% -30%, #0D1426 0%, var(--space-900) 60%),
        linear-gradient(180deg, #06080F 0%, #04050C 100%);
    border-bottom: 1px solid var(--line);
    margin-top: 64px;
}

.stars,
.stars::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background: transparent
}

.stars {
    box-shadow: 1852px 1146px 0 rgba(231, 196, 92, 0.55),
        3199px 953px 0 rgba(200, 205, 225, 0.35),
        3502px 1202px 0 rgba(200, 205, 225, 0.35),
        3292px 1048px 0 rgba(200, 205, 225, 0.35),
        2514px 381px 0 rgba(200, 205, 225, 0.35),
        1242px 290px 0 rgba(200, 205, 225, 0.35),
        3316px 1420px 0 rgba(200, 205, 225, 0.35),
        2438px 811px 0 rgba(243, 239, 228, 0.9),
        2678px 1260px 0 rgba(231, 196, 92, 0.55),
        2552px 30px 0 rgba(231, 196, 92, 0.55),
        258px 121px 0 rgba(200, 205, 225, 0.35),
        3602px 495px 0 rgba(200, 205, 225, 0.35),
        3187px 950px 0 rgba(200, 205, 225, 0.35),
        2420px 400px 0 rgba(200, 205, 225, 0.35),
        2622px 602px 0 rgba(200, 205, 225, 0.35),
        2713px 174px 0 rgba(200, 205, 225, 0.35),
        1139px 833px 0 rgba(243, 239, 228, 0.9),
        3816px 170px 0 rgba(231, 196, 92, 0.55),
        1291px 470px 0 rgba(200, 205, 225, 0.35),
        121px 143px 0 rgba(200, 205, 225, 0.35),
        442px 820px 0 rgba(200, 205, 225, 0.35),
        1191px 791px 0 rgba(200, 205, 225, 0.35),
        69px 1402px 0 rgba(200, 205, 225, 0.35),
        859px 107px 0 rgba(200, 205, 225, 0.35),
        2903px 813px 0 rgba(200, 205, 225, 0.35),
        2319px 1289px 0 rgba(200, 205, 225, 0.35),
        2764px 552px 0 rgba(200, 205, 225, 0.35),
        1274px 681px 0 rgba(200, 205, 225, 0.35),
        1679px 241px 0 rgba(200, 205, 225, 0.35),
        2895px 206px 0 rgba(200, 205, 225, 0.35),
        1904px 997px 0 rgba(200, 205, 225, 0.35),
        2290px 385px 0 rgba(200, 205, 225, 0.35),
        781px 1498px 0 rgba(231, 196, 92, 0.55),
        1717px 1318px 0 rgba(200, 205, 225, 0.35),
        1617px 861px 0 rgba(243, 239, 228, 0.9),
        1px 552px 0 rgba(231, 196, 92, 0.55),
        3290px 1213px 0 rgba(200, 205, 225, 0.35),
        3624px 40px 0 rgba(200, 205, 225, 0.35),
        1614px 1232px 0 rgba(200, 205, 225, 0.35),
        410px 86px 0 rgba(243, 239, 228, 0.9),
        873px 904px 0 rgba(200, 205, 225, 0.35),
        3164px 1249px 0 rgba(200, 205, 225, 0.35),
        1213px 790px 0 rgba(200, 205, 225, 0.35),
        369px 427px 0 rgba(200, 205, 225, 0.35),
        995px 31px 0 rgba(200, 205, 225, 0.35),
        1522px 1274px 0 rgba(200, 205, 225, 0.35),
        2405px 990px 0 rgba(231, 196, 92, 0.55),
        555px 790px 0 rgba(200, 205, 225, 0.35),
        631px 636px 0 rgba(243, 239, 228, 0.9),
        3349px 1250px 0 rgba(200, 205, 225, 0.35),
        777px 324px 0 rgba(231, 196, 92, 0.55),
        2268px 402px 0 rgba(231, 196, 92, 0.55),
        1590px 988px 0 rgba(200, 205, 225, 0.35),
        1726px 97px 0 rgba(200, 205, 225, 0.35),
        158px 1049px 0 rgba(243, 239, 228, 0.9),
        976px 1442px 0 rgba(200, 205, 225, 0.35),
        1723px 1221px 0 rgba(200, 205, 225, 0.35),
        2130px 359px 0 rgba(243, 239, 228, 0.9),
        281px 258px 0 rgba(200, 205, 225, 0.35),
        2291px 1338px 0 rgba(231, 196, 92, 0.55),
        2516px 151px 0 rgba(200, 205, 225, 0.35),
        3757px 417px 0 rgba(231, 196, 92, 0.55),
        283px 551px 0 rgba(200, 205, 225, 0.35),
        1020px 123px 0 rgba(200, 205, 225, 0.35),
        1154px 755px 0 rgba(200, 205, 225, 0.35),
        538px 188px 0 rgba(200, 205, 225, 0.35),
        3649px 922px 0 rgba(243, 239, 228, 0.9),
        2690px 1500px 0 rgba(231, 196, 92, 0.55),
        2393px 287px 0 rgba(200, 205, 225, 0.35),
        3783px 36px 0 rgba(200, 205, 225, 0.35),
        1464px 1435px 0 rgba(200, 205, 225, 0.35),
        137px 43px 0 rgba(200, 205, 225, 0.35),
        306px 987px 0 rgba(200, 205, 225, 0.35),
        1274px 653px 0 rgba(200, 205, 225, 0.35),
        296px 154px 0 rgba(200, 205, 225, 0.35),
        1506px 91px 0 rgba(243, 239, 228, 0.9),
        3019px 1441px 0 rgba(200, 205, 225, 0.35),
        3747px 699px 0 rgba(200, 205, 225, 0.35),
        2806px 969px 0 rgba(243, 239, 228, 0.9),
        3568px 854px 0 rgba(243, 239, 228, 0.9),
        123px 1023px 0 rgba(200, 205, 225, 0.35),
        2559px 1356px 0 rgba(200, 205, 225, 0.35),
        2386px 25px 0 rgba(200, 205, 225, 0.35),
        328px 185px 0 rgba(200, 205, 225, 0.35),
        1053px 852px 0 rgba(231, 196, 92, 0.55),
        1591px 1421px 0 rgba(200, 205, 225, 0.35),
        1804px 947px 0 rgba(231, 196, 92, 0.55),
        343px 1062px 0 rgba(231, 196, 92, 0.55),
        122px 635px 0 rgba(200, 205, 225, 0.35),
        1969px 45px 0 rgba(200, 205, 225, 0.35),
        2860px 231px 0 rgba(200, 205, 225, 0.35),
        2517px 1351px 0 rgba(243, 239, 228, 0.9),
        1047px 23px 0 rgba(200, 205, 225, 0.35),
        586px 1388px 0 rgba(200, 205, 225, 0.35),
        2123px 347px 0 rgba(231, 196, 92, 0.55),
        1402px 1351px 0 rgba(243, 239, 228, 0.9),
        2041px 494px 0 rgba(200, 205, 225, 0.35),
        2727px 513px 0 rgba(200, 205, 225, 0.35),
        1764px 410px 0 rgba(231, 196, 92, 0.55),
        1574px 449px 0 rgba(200, 205, 225, 0.35),
        1296px 429px 0 rgba(200, 205, 225, 0.35),
        2033px 718px 0 rgba(231, 196, 92, 0.55),
        3476px 83px 0 rgba(231, 196, 92, 0.55),
        1133px 346px 0 rgba(200, 205, 225, 0.35),
        1930px 563px 0 rgba(243, 239, 228, 0.9),
        3403px 847px 0 rgba(200, 205, 225, 0.35),
        2129px 1011px 0 rgba(231, 196, 92, 0.55),
        2933px 1279px 0 rgba(200, 205, 225, 0.35),
        305px 64px 0 rgba(200, 205, 225, 0.35),
        2488px 84px 0 rgba(231, 196, 92, 0.55),
        1151px 1168px 0 rgba(200, 205, 225, 0.35),
        2659px 1155px 0 rgba(200, 205, 225, 0.35),
        556px 829px 0 rgba(200, 205, 225, 0.35),
        101px 545px 0 rgba(200, 205, 225, 0.35),
        577px 96px 0 rgba(243, 239, 228, 0.9),
        472px 914px 0 rgba(200, 205, 225, 0.35),
        2192px 1341px 0 rgba(200, 205, 225, 0.35),
        1510px 159px 0 rgba(231, 196, 92, 0.55),
        816px 973px 0 rgba(200, 205, 225, 0.35),
        2925px 22px 0 rgba(231, 196, 92, 0.55),
        2190px 1462px 0 rgba(200, 205, 225, 0.35),
        927px 557px 0 rgba(231, 196, 92, 0.55),
        2210px 1428px 0 rgba(243, 239, 228, 0.9),
        2049px 1258px 0 rgba(243, 239, 228, 0.9),
        652px 805px 0 rgba(231, 196, 92, 0.55),
        2866px 458px 0 rgba(200, 205, 225, 0.35),
        3819px 1479px 0 rgba(200, 205, 225, 0.35),
        1845px 928px 0 rgba(200, 205, 225, 0.35),
        3634px 13px 0 rgba(200, 205, 225, 0.35),
        2329px 1336px 0 rgba(231, 196, 92, 0.55),
        3263px 702px 0 rgba(200, 205, 225, 0.35),
        2667px 419px 0 rgba(200, 205, 225, 0.35),
        3547px 1314px 0 rgba(243, 239, 228, 0.9),
        505px 436px 0 rgba(200, 205, 225, 0.35),
        1598px 179px 0 rgba(243, 239, 228, 0.9),
        2199px 656px 0 rgba(200, 205, 225, 0.35),
        2942px 32px 0 rgba(200, 205, 225, 0.35),
        339px 76px 0 rgba(200, 205, 225, 0.35),
        2254px 863px 0 rgba(231, 196, 92, 0.55),
        1996px 58px 0 rgba(200, 205, 225, 0.35),
        3553px 131px 0 rgba(200, 205, 225, 0.35),
        143px 354px 0 rgba(200, 205, 225, 0.35),
        2812px 287px 0 rgba(200, 205, 225, 0.35),
        2115px 1481px 0 rgba(200, 205, 225, 0.35),
        2776px 1411px 0 rgba(200, 205, 225, 0.35),
        3604px 1008px 0 rgba(200, 205, 225, 0.35),
        2822px 176px 0 rgba(231, 196, 92, 0.55),
        1799px 1078px 0 rgba(200, 205, 225, 0.35),
        3404px 1492px 0 rgba(200, 205, 225, 0.35),
        673px 1070px 0 rgba(200, 205, 225, 0.35),
        3715px 1146px 0 rgba(200, 205, 225, 0.35),
        2749px 780px 0 rgba(243, 239, 228, 0.9),
        3563px 1248px 0 rgba(200, 205, 225, 0.35),
        3484px 289px 0 rgba(243, 239, 228, 0.9),
        2147px 559px 0 rgba(200, 205, 225, 0.35),
        823px 841px 0 rgba(200, 205, 225, 0.35),
        2061px 10px 0 rgba(200, 205, 225, 0.35),
        113px 1102px 0 rgba(243, 239, 228, 0.9),
        2113px 820px 0 rgba(200, 205, 225, 0.35),
        2305px 249px 0 rgba(200, 205, 225, 0.35),
        2830px 341px 0 rgba(200, 205, 225, 0.35),
        2206px 939px 0 rgba(200, 205, 225, 0.35),
        3278px 827px 0 rgba(200, 205, 225, 0.35),
        1938px 1009px 0 rgba(200, 205, 225, 0.35),
        1776px 975px 0 rgba(200, 205, 225, 0.35),
        444px 392px 0 rgba(200, 205, 225, 0.35),
        120px 532px 0 rgba(200, 205, 225, 0.35),
        3191px 46px 0 rgba(200, 205, 225, 0.35),
        637px 465px 0 rgba(200, 205, 225, 0.35),
        1163px 659px 0 rgba(231, 196, 92, 0.55),
        1001px 1269px 0 rgba(200, 205, 225, 0.35),
        2046px 1496px 0 rgba(200, 205, 225, 0.35),
        3489px 1045px 0 rgba(200, 205, 225, 0.35),
        2939px 404px 0 rgba(231, 196, 92, 0.55),
        3599px 894px 0 rgba(200, 205, 225, 0.35),
        2592px 846px 0 rgba(231, 196, 92, 0.55),
        2522px 327px 0 rgba(200, 205, 225, 0.35),
        3538px 1292px 0 rgba(200, 205, 225, 0.35),
        894px 1084px 0 rgba(200, 205, 225, 0.35),
        2223px 1252px 0 rgba(200, 205, 225, 0.35),
        558px 476px 0 rgba(243, 239, 228, 0.9),
        2571px 711px 0 rgba(243, 239, 228, 0.9),
        1293px 1235px 0 rgba(200, 205, 225, 0.35),
        3779px 398px 0 rgba(200, 205, 225, 0.35),
        796px 198px 0 rgba(200, 205, 225, 0.35),
        980px 271px 0 rgba(231, 196, 92, 0.55),
        1062px 794px 0 rgba(200, 205, 225, 0.35),
        3408px 863px 0 rgba(200, 205, 225, 0.35),
        2887px 258px 0 rgba(200, 205, 225, 0.35),
        2572px 1403px 0 rgba(231, 196, 92, 0.55);
    z-index: 99
}

.stars::before {
    content: "";
    box-shadow: inherit;
    animation: twinkle 5.5s ease-in-out infinite
}

@keyframes twinkle {

    0%,
    100% {
        opacity: .35
    }

    50% {
        opacity: .95
    }
}

/*///////////////banner photo//////////////*/

/* photographic earth, treated so the gold type still reads over it */
.banner-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden
}

.banner-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    /* filter: brightness(.5) saturate(.6) contrast(1.06); */
}

/* .banner-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 95% at 72% 12%, rgba(231, 196, 92, .20), transparent 58%);
    mix-blend-mode: overlay;
} */

.banner-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* one satellite skimming the horizon: keeps the motion language of the top page */
.pass {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden
}

.sat {
    position: absolute;
    top: 0;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, var(--gold-bright), var(--gold) 55%, var(--gold-deep) 100%);
    box-shadow: 0 0 10px 2px rgba(243, 215, 126, .9), 0 0 24px 7px rgba(231, 196, 92, .35);
    offset-path: path("M -60 470 C 340 180, 980 120, 1560 330");
    offset-rotate: auto;
    animation: pass 22s linear infinite;
}

.sat::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 50%;
    width: 46px;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(231, 196, 92, 0), rgba(231, 196, 92, .5));
    border-radius: 2px;
}

@keyframes pass {
    0% {
        offset-distance: 0%;
        opacity: 0
    }

    8% {
        opacity: 1
    }

    88% {
        opacity: 1
    }

    100% {
        offset-distance: 100%;
        opacity: 0
    }
}

/*///////////////end banner photo//////////////*/

.banner .wrap {
    position: relative;
    z-index: 3
}

.crumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

.crumbs a {
    text-decoration: none;
    transition: color .2s
}

.crumbs a:hover {
    color: var(--gold)
}

.crumbs .sl {
    color: var(--line)
}

.crumbs [aria-current] {
    color: var(--ink)
}

.banner h1 {
    font-family: var(--jp-serif);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .03em;
    font-size: clamp(38px, 5.6vw, 64px);
}

.banner .en {
    display: block;
    margin-top: 14px;
    font-family: var(--en);
    font-size: clamp(13px, 1.4vw, 15px);
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ============ sections ============ */
section {
    padding: clamp(72px, 10vw, 132px) 0
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 26px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
}

.eyebrow .tick {
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent)
}

.lede {
    font-family: var(--jp-serif);
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.45;
    font-size: clamp(28px, 4.2vw, 50px);
}

.lede .accent {
    color: var(--gold-bright)
}

.body {
    margin-top: 30px;
    max-width: 62ch;
    color: var(--muted);
    font-size: clamp(14.5px, 1.3vw, 16px);
    line-height: 2.05
}

.body b {
    color: var(--ink);
    font-weight: 500
}

.body+.body {
    margin-top: 18px
}

/* mission */
.mission {
    border-bottom: 1px solid var(--hair)
}

.mission .quote-en {
    margin-top: 28px;
    font-family: var(--en);
    font-size: clamp(16px, 1.8vw, 20px);
    color: var(--ink);
    opacity: .85;
}

/* vision pillars */
.vision {
    background: linear-gradient(180deg, var(--space-900) 0%, var(--space-800) 50%, var(--space-900) 100%)
}

.pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin-top: 56px;
    background: var(--hair);
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
}

.pillar {
    background: var(--space-900);
    padding: 38px 32px 42px;
    position: relative
}

.pillar .no {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .2em;
    color: var(--gold);
    margin-bottom: 18px;
    display: block;
}

.pillar h3 {
    font-family: var(--jp-serif);
    font-weight: 600;
    font-size: clamp(19px, 1.7vw, 22px);
    line-height: 1.5;
    margin-bottom: 14px;
}

.pillar p {
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.95
}

.pillar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--gold);
    transition: width .5s cubic-bezier(.2, .7, .2, 1);
}

.pillar:hover::before {
    width: 100%
}

/* company info */
.info dl {
    margin-top: 48px;
    border-top: 1px solid var(--hair)
}

.info .row {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    padding: 26px 4px;
    border-bottom: 1px solid var(--hair);
    transition: background .3s;
}

.info .row:hover {
    background: rgba(231, 196, 92, .03)
}

.info dt {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.info dt .jp {
    font-weight: 500;
    font-size: 15px;
    color: var(--ink)
}

.info dt .en {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted)
}

.info dd {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.95
}

.info dd b {
    color: var(--ink);
    font-weight: 500
}

.info dd .note {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--muted);
    opacity: .8
}

.info dd ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.info dd li {
    padding-left: 18px;
    position: relative
}

.info dd li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .82em;
    width: 6px;
    height: 1px;
    background: var(--gold);
}

/* CTA strip */
.cta {
    border-top: 1px solid var(--line);
    background: radial-gradient(90% 160% at 78% 50%, rgba(201, 146, 10, .10), transparent 60%), var(--space-900);
}

.cta .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap
}

.cta h2 {
    font-family: var(--jp-serif);
    font-weight: 600;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.5
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    font-weight: 500;
    font-size: 15px;
    color: var(--space-900);
    background: var(--gold);
    padding: 14px 28px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .25s, box-shadow .25s, background .25s;
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-2px);
    background: var(--gold-bright);
    box-shadow: 0 10px 30px -8px rgba(231, 196, 92, .55)
}

.btn .arr {
    transition: transform .25s
}

.btn:hover .arr {
    transform: translateX(4px)
}

.btn:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px
}

a {
    color: inherit
}

::selection {
    background: rgba(231, 196, 92, .25)
}

@keyframes pulse {

    0%,
    100% {
        opacity: .45
    }

    50% {
        opacity: 1
    }
}

.top-link {
    text-decoration: none;
    color: var(--muted);
    transition: color .25s
}

.top-link:hover {
    color: var(--gold)
}

/* ============ responsive ============ */
@media (max-width:1080px) {
    .pillars {
        grid-template-columns: 1fr
    }

    .foot-grid {
        grid-template-columns: 1fr 1fr;
        gap: 44px 32px
    }
}

@media (max-width:960px) {
    .banner-globe {
        right: -220px;
        width: 520px;
        height: 520px;
        opacity: .4
    }

    .banner::after {
        background: linear-gradient(180deg, rgba(5, 7, 15, .5) 0%, rgba(5, 7, 15, .85) 70%, var(--space-900) 100%)
    }

    .info .row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 22px 4px
    }
}

@media (max-width:560px) {
    .banner {
        padding: 130px 0 44px
    }

    .banner-globe {
        right: -46vw;
        width: 400px;
        height: 400px
    }

    .foot-grid {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .cta .wrap {
        flex-direction: column;
        align-items: flex-start
    }
}

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

    .sat,
    .stars::before,
    .foot-bottom .dot {
        animation: none !important
    }

    .sat {
        offset-distance: 24%
    }

    .pillar::before {
        transition: none
    }
}