@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

/* =========================
   ROOT
========================= */

:root {
    --blue: #093994;
    --blue-deep: #071d55;
    --blue-dark: #061637;
    --yellow: #FDD500;
    --ink: #090a0d;
    --muted: #687080;
    --pale: #e6ebf4;
    --bg: #f8f8fb;
    --line: #d9deea;
    --charcoal: #4E4449;
    --max: 1180px;
    --hero-shift: clamp(20px, 6vw, 100px);
}

/* =========================
   RESET
========================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    color: var(--ink);
    font-family: Inter, 'Noto Sans JP', sans-serif;
    background: #fff;
    overflow-x: hidden;
}

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

button,
input,
textarea {
    font: inherit;
}

::selection {
    background: var(--yellow);
    color: #000;
}

.dml5 {
    margin-left: -10px;
}

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

.site-header {
    position: fixed;
    z-index: 1000;
    inset: 0 0 auto;

    height: 95px;
    width: 100%;

    padding: 0 clamp(30px, 4vw, 65px);

    display: flex;
    align-items: center;

    color: #fff;

    background: rgba(0, 0, 0, 0.50);

    transition:
        transform 0.35s ease,
        height 0.35s ease,
        background 0.35s ease;
}

.site-header.hide {
    transform: translateY(-100%);
}

.site-header.scrolled {
    background: rgba(0, 0, 0, 0.78);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.site-header.nav-up {
    background: var(--blue-deep);
}

/* =========================
   LOGO
========================= */

.brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.brand img {
    width: 160px;
    height: auto;
    display: block;
}


/* =========================
   NAVIGATION
========================= */

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

    margin-left: 200px;

    gap: clamp(60px, 4vw, 65px);

    font-size: 15px;
    font-weight: 500;

    white-space: nowrap;
}

.nav a {
    position: relative;
    padding: 30px 0;
    opacity: 0.78;
    transition: 0.25s;
}

.nav a:hover,
.nav a.active {
    opacity: 1;
}

.nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 20px;
    width: 0;
    height: 2px;
    background: #fff;
    transform: translateX(-50%);
    transition: width 0.25s ease;
}

.nav a:hover::after,
.nav a.active::after {
    width: 100%;
}

.nav-mobile-extra {
    display: none;
}

/* =========================
   NAVBAR RIGHT SIDE
========================= */

.header-right {
    margin-left: auto;

    display: flex;
    align-items: center;
    gap: 24px;

    flex-shrink: 0;
}

.language {
    display: flex;
    align-items: center;
    gap: 7px;

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

    white-space: nowrap;

    color: rgba(255, 255, 255, 0.65);
}

.language a {
    position: relative;

    padding: 8px 0;

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

    transition: 0.25s;
}

.language a:hover {
    color: #fff;
}

.language a::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: 0;

    width: 0;
    height: 2px;

    background: #fff;

    transform: translateX(-50%);
    transition: width 0.25s ease;
}

.language a:hover::after {
    width: 100%;
}

.language a.active {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.language a.active::after {
    display: none;
}

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

.header-contact {
    padding: 6px 17px;

    border: 2px solid rgba(255, 255, 255, 0.8);

    font-size: 12px;
    font-weight: 500;

    transition: 0.25s;

    white-space: nowrap;
}

.header-contact:hover {
    background: #fff;
    color: var(--blue);
    font-weight: 600;
}


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

.menu-toggle {
    display: none;

    margin-left: auto;

    border: 0;
    background: none;

    padding: 10px;

    cursor: pointer;
}

.menu-toggle span {
    display: block;

    width: 25px;
    height: 2px;

    margin: 5px;

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

    transition: 0.25s ease;
}

.menu-toggle:hover span {
    background: var(--yellow);
}

.site-header.open .menu-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-header.open .menu-toggle span:nth-child(2) {
    opacity: 0;
}

.site-header.open .menu-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.site-header.open .nav-mobile-extra .header-contact.active {
    background: var(--yellow);
    color: var(--blue-deep);
    font-weight: 600;
    border-color: var(--yellow);
}

.site-header.open .nav-mobile-extra .header-contact.active::after {
    display: none; 
}

.site-header.open .nav-mobile-extra .language a.active {
    color: var(--yellow);
}

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

.hero {
    position: relative;
    height: min(840px, 100vh);
    min-height: 780px;
    overflow: hidden;
    color: #fff;

    --blue-bar-h: clamp(130px, 20vw, 193px);
}

.hero-bg {
    position: absolute;
    inset: 0;
}

.hero-bg1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: -90px center;
    transform: scale(1.16);
}

.hero-bg2 {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(108 137 191);
    mix-blend-mode: multiply;
}

.hero-content {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    bottom: calc(var(--blue-bar-h) + clamp(0px, 1vw, 7px));
}

.hero-content h1 {
    margin: 0;
    font-size: clamp(54px, 7.2vw, 90px);
    line-height: 1.02;
    font-weight: 600;
}

.hero-blue {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--blue-bar-h);
    background: var(--blue);
}

.hero-blue h1 {
    margin: 0;
    font-size: clamp(54px, 7.2vw, 90px);
    line-height: 1.02;
    font-weight: 600;
}

.hero-blue h1 span {
    color: var(--yellow);
}

.hero-align {
    width: min(1000px, calc(100% - 2 * clamp(24px, 8vw, 60px)));
    max-width: 1000px;
    margin: 0 auto;
    transform: translateX(calc(-1 * var(--hero-shift)));
}

.hero-blue .hero-align {
    height: 100%;
    display: flex;
    align-items: center;
}

.hero-bottom-image {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.hero-bottom-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-bottom-image .hero-align {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%) translateX(calc(-1 * var(--hero-shift)));
}

.hero-bottom-image .hero-jp {
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 1.5vw, 18px);
    font-weight: 300;
    letter-spacing: 0.07em;
}

.hero-floating-image {
    position: absolute;

    z-index: 10;

    right: 0;
    bottom: -2%;

    width: 40%;
    height: 420px;

    pointer-events: none;
}

.hero-floating-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    display: block;
}

/* =========================
   SHARED
========================= */

.section {
    position: relative;
    padding: 115px clamp(24px, 8vw, 120px);
}

/* =========================
   ANCHOR SCROLL OFFSET
========================= */

main section[id] {
    scroll-margin-top: 95px;
}

.section-heading {
    max-width: 1000px; 
    margin: 0 auto 40px;
}

.section-heading h2 {
    margin: 0;

    font-size: clamp(88px, 6vw, 90px);
    font-weight: 700;
}

/* =========================
   SERVICES
========================= */

.services {
    background: var(--bg);
}

.service-grid {
    max-width: 1000px;
    margin: auto;

    display: grid;
    gap: clamp(28px, 4vw, 44px);
}

.service-card {
    position: relative;

    display: grid;
    grid-template-columns: 1fr 0.92fr;

    grid-template-rows: 520px;

    overflow: hidden;

    background: #fff;

    box-shadow: 0 20px 50px rgba(16, 42, 91, 0.08);

    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.35s ease;
}

.service-card:hover,
.service-card.reveal.visible:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 40px 50px rgba(14, 87, 223, 0.22);
}

.service-copy {
    padding: clamp(30px, 4vw, 52px);
}

.service-copy h3 {
    margin: -20px 0 10px;

    color: var(--blue);

    font-size: clamp(26px, 5vw, 40px);
}

.service-copy h4 {
    margin: 0 0 17px;
    color: var(--blue);
    font-size: clamp(14px, 2.2vw, 18px);
    font-weight: 400;
}

.service-copy p,
.service-copy li {
    color: #343840;
    font-size: 14px;
    line-height: 1.9;
}

.service-copy ul {
    list-style: none;
    padding-left: 0;
}

.service-copy li {
    position: relative;
    padding-left: 20px;
}

.service-copy li::before {
    content: "\2014";
    position: absolute;
    left: 0;
    color: #343840;
}

.bar {
    margin: 17px 0 5px;
    padding: 8px;

    background: #050505;
    color: #fff;

    text-align: center;

    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    transition: font-size 0.35s ease, letter-spacing 0.35s ease;
}

.service-card:hover .bar,
.service-card.reveal.visible:hover .bar {
    font-size: 16px;
    letter-spacing: 3px;
}

.service-image {
    padding: 16px 0; 
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-origin: content-box;
    background-clip: content-box;
}
.service-image-1 {
    background-image: url('assets/services1.jpg');
}

.service-image-2 {
    background-image: url('assets/services2.jpg');
}

.service-card.reverse {
    grid-template-columns: 0.92fr 1fr;
}

.service-card.reverse .service-copy {
    order: 2;
}

/* =========================
   MAP
========================= */

.map {
    height: 650px;
}

.map__frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* =========================
   COMPANY
========================= */

.company {
    background: var(--pale);
}

.company .section-heading {
    margin-bottom: 16px; 
}

.company-grid {
    max-width: 1000px; 
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 0.9fr;

    gap: 20px;

    align-items: stretch;
}

/* =========================
   LEFT COMPANY INFORMATION
========================= */

.company-info {
    width: 100%;
}

.info-row {
    position: relative;

    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 16px;
    align-items: baseline;

    padding: 20px 24px 20px 0;

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

.info-row::after {
    content: "";
    position: absolute;
    left: 0px; 
    right: 30px;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.9);
}

.info-row:first-child {
    padding-top: 18px;
    padding-bottom: 25px;
}

.info-row b {
    color: var(--blue);

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

.info-row span {
    color: #090a0d;

    overflow-wrap: break-word;
    word-break: break-word;
}

.info-row img {
    grid-column: 2;

    width: auto;
    max-width: 100%;
    max-height: 52px;

    margin-top: 8px;
}


/* =========================
   PARENT COMPANY
========================= */

.company-side {
    width: 100%;

    display: flex;
    flex-direction: column;
}

.parent-card {
    position: relative;

    width: 90%;
    min-height: 420px;
    margin-top: 28px;

    padding: 34px 40px 26px;

    overflow: hidden;

    background: var(--charcoal);
    color: #fff;

    clip-path: polygon(
        0 0,
        68% 0,
        73% 14.6%,
        100% 14.6%,
        100% 100%,
        0 100%
    );
}

.parent-card h3 {
    margin: 0 0 20px;

    font-size: clamp(18px, 2.4vw, 26px);
    line-height: 1.2;
    font-weight: 800;
}

.parent-logo {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 20px;
}

.parent-logo img {
    height: 45px;
    width: auto;

    display: block;
}

.parent-line {
    display: grid;

    grid-template-columns: 90px minmax(0, 1fr);
    column-gap: 18px;

    padding: 15px 0 15px 15px;

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

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

.parent-line:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.parent-line b {
    font-weight: 300;
}

.parent-line span {
    font-weight: 400;

    overflow-wrap: break-word;
    word-break: break-word;
}


/* =========================
   CITY IMAGE
========================= */

.city-image {
    width: 90%; 
    flex: 1;
    margin-top: 50px;

    background: url('assets/officeloc.jpg') center / cover no-repeat;

    box-shadow: none;
}

/* =========================
   HISTORY
========================= */

.history {
    background: #fff;
}

.history-inner {
    padding-top: 90px;
    padding-bottom: 200px;
}

.history-inner .section-heading {
    margin-bottom: 16px;
}

.timeline {
    position: relative;

    max-width: 1000px; 
    margin: auto;

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

.timeline::after {
    content: "";
    position: absolute;
    left: 0;
    right: -260px;
    bottom: -14px;
    height: 14px;
    background: var(--blue);
}

.timeline-item {
    position: relative;

    min-height: 90px;

    padding: 16px 20px 13px;

    border-left: 1px solid var(--blue);
}

.timeline-item:last-child {
    border-right: 1px solid var(--blue);
}

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

    position: absolute;

    left: -4px;
    top: -4px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--blue);
}

.timeline-item span {
    display: block;

    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;

    color: #343840;
}

.timeline-item span b {
    display: block;

    margin-bottom: 4px;

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

    color: var(--ink);
}

/* =========================
   TIMELINE YEAR OVERLAY
========================= */

.timeline-year {
    position: absolute;
    bottom: -70px;

    font-size: clamp(24px, 5vw, 56px);
    font-weight: 900;
    line-height: 1;

    color: var(--blue);
}

.timeline-year--a {
    left: 20px;
}

.timeline-year--b {
    left: calc(25% + 20px);
}

/* =========================
   MEMBER
========================= */

.members {
    position: relative;

    min-height: 820px;

    padding: 105px clamp(24px, 8vw, 120px);

    overflow: hidden;

    background: var(--blue);
    color: #fff;
}

.members .section-heading {
    margin-bottom: 16px; 
}

.member-groups {
    position: relative;
    z-index: 2;

    max-width: 1000px;
    margin: 0 auto;
}

.member-group {
    width: fit-content;
    margin: 28px 0;
}

.member-group small {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 11px;

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

    font-size: 12px;
    white-space: nowrap;
}

.member-group small::after {
    content: "";
    flex: 1;

    height: 2px;

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

.dept-labels {
    display: flex;

    margin-bottom: 11px;
}

.dept-labels small {
    margin-bottom: 0;
}

.dept-admin {
    width: 220px; 
    flex-shrink: 0;
}

.member-group .dept-admin::after {
    content: none; 
}

.dept-content {
    flex: 1;
}

.member-wrap-row .dept-continued {
    display: none;
}

.member-wrap-row {
    display: contents;
}

.member-wrap-row .dept-continued::after {
    content: none;
}
.member-row {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}

.member {
    width: 190px;
}

.member-photo {
    width: 190px;
    height: 220px;

    background-size: 100% auto;
    background-position: center 10%;

    filter: grayscale(1);

    transition: filter 0.35s ease, background-size 0.35s ease;
}

.member:hover .member-photo {
    filter: grayscale(0.2);
    background-size: 110% auto;
}

.member b {
    display: block;

    margin-top: 10px;

    color: var(--yellow);

    font-size: 12px;
    font-weight: 300;
    line-height: 1.35;
    margin-bottom: 0.5em;

    transition: color 0.3s ease, transform 0.3s ease;
}

.member:hover b {
    color: #fff;
    transform: translateY(-2px);
}

.member strong {
    display: block;

    font-size: 14px;
    line-height: 1.35;

    transition: color 0.3s ease, transform 0.3s ease;
}

.member:hover strong {
    color: var(--yellow);
    transform: translateY(-2px);
}

.network-art {
    position: absolute;
    z-index: 1;

    right: 0%;
    bottom: -6%;

    width: 80%;
    height: 75%;

    background: url('assets/member_bg.png') right bottom / cover no-repeat;

    -webkit-mask-image: radial-gradient(
        ellipse 75% 75% at 70% 60%,
        #000 55%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 75% 75% at 70% 60%,
        #000 55%,
        transparent 100%
    );
}

/* =========================
   VISION
========================= */

.vision {
    background: #fff;
}

.vision-top {
    max-width: 1000px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;
}

.vision-top b,
.value-box > b,
.purpose > b {
    color: var(--blue);

    font-size: 22px;
    letter-spacing: 0.05em;
}

.vision-sub {
    margin-left: 10px;
    color: var(--blue);
    font-size: 16px;
    font-weight: 400;
}

.vision-top h3 {
    margin: 9px 0;
}

.vision-top h3.mission-text {
    line-height: 1.5;
}

.vision-top h3.vision-text {
    line-height: 1.3;
}

.mission-text {
    font-size: 22px;
    font-weight: 300;
}

.vision-text {
    font-size: 34px;
    font-weight: 800;
}

.values {
    max-width: 1000px;
    margin: 36px auto;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 22px;
}

.value-box {
    max-width: 490px;
    min-height: 160px;
    padding: 20px 24px;

    border-left: 5px solid var(--blue);

    background: #efefef;

    transition: box-shadow 0.3s ease;
}

.value-box:hover {
    box-shadow: 0 8px 30px rgba(9, 57, 148, 0.35);
}

.value-box .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    margin-right: 4px;

    border-radius: 50%;
    background: #000;
    color: #fff;

    font-size: 16px;
    font-weight: 300;
    line-height: 1;
}

.value-box h4 {
    display: inline;

    margin-left: 10px;

    color: var(--blue);

    font-size: 16px;
    font-weight: 300;
}

.value-box p {
    font-size: 18px;
    line-height: 1.8;
}

.value-box .p1 {
    font-size: 18px;
    line-height: 1.8;
    margin-left: 39px;
}

.value-box .p2 {
    font-size: 18px;
    line-height: 1.8;
    margin-top: 10px;
}

.purpose {
    max-width: 1000px;
    margin: 80px auto 50px;
}

.purpose h4 {
    display: inline;

    margin-left: 5px;

    color: var(--blue);

    font-size: 16px;
    font-weight: 300;
}

.purpose p {
    color: var(--blue);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
}

.four-way {
    position: relative;
    width: 100%;
    max-width: 580px;
    margin: 10px auto 0;
}

.four-way-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.four-way-img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    z-index: 1;
    pointer-events: none;
}

.four-way-note-label {
    display: none;
}

.circle {
    position: absolute;
    z-index: 2;

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

    width: 130px;
    height: 130px;

    padding: 10px;

    font-size: 22px;
    line-height: 1.3;
    color: var(--ink);

    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.circle.reveal {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 24px));
}

.circle.reveal.visible {
    opacity: 1;
    transform: translate(-50%, -50%);
}

.center-text {
    position: absolute;
    left: 50%;
    top: 51%;

    z-index: 3;

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

    font-size: 48px;
    font-weight: 400;

    white-space: nowrap;
}

.four-way-note {
    position: absolute;
    z-index: 2;

    max-width: 220px;
    font-size: 14px;
    line-height: 1.6;
}

.four-way-note--top {
    top: 4%;
    left: 64%;
}

.four-way-note--bottom {
    bottom: 22%;
    left: 64%;
}

.circle.top {
    left: 50%;
    top: 12%;
    transform: translate(-50%, -50%);
}

.circle.bottom {
    left: 50%;
    top: 88%;
    transform: translate(-50%, -50%);
}

.circle.left {
    left: 12%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.circle.right {
    left: 88%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.circle.top.reveal {
    transition-delay: 0.1s;
}

.circle.left.reveal {
    transition-delay: 0.25s;
}

.circle.right.reveal {
    transition-delay: 0.4s;
}

.circle.bottom.reveal {
    transition-delay: 0.55s;
}

/* =========================
   CAREERS
========================= */

.careers {
    padding: 0;
    background: #fff;
}

.careers-photo {
    width: 100%;
}

.careers-photo img {
    width: 100%;
    height: auto;
    display: block;
}

.careers-content {
    max-width: 1080px;

    margin: auto;
    padding: 62px 30px 90px;

    display: grid;
    grid-template-columns: 1fr 1.45fr;

    column-gap: 70px;
}

.careers-title h2 {
    margin: 0;
    font-size: clamp(88px, 6vw, 90px);
    line-height: 0.95;
}

.careers-intro b {
    color: var(--blue);
    font-size: 28px;
    font-weight: 400;
}

.careers-intro p {
    font-size: 15px;
    line-height: 1.9;
}

.career-subtitle {
    grid-column: 1 / -1;

    margin: 20px 0 0;

    color: var(--blue);

    text-align: center;

    font-size: 40px;
    font-weight: 700;
}

.career-subtitle1 {
    grid-column: 1 / -1;
    margin: 15px 0 50px;
    text-align: center;

    font-size: 16px;
}

.career-paths {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.career-paths > div {
    position: relative;

    min-height: 220px;

    padding: 30px 28px 30px 34px;

    overflow: hidden;

    background: var(--blue);
    color: #fff;

    transition: 0.3s;
}

.career-paths > div::before {
    content: "";
    position: absolute;

    left: 28px;
    top: 0;
    height: 85px;

    width: 2px;

    background: var(--yellow);

    transition: height 0.4s ease;
}

.career-paths > div:hover {
    transform: translateY(-5px);
}

.career-paths > div:hover::before {
    height: calc(68% - 24px);
}

.career-paths span {
    position: absolute;

    right: 16px;
    bottom: -24px;

    color: rgba(0, 0, 0, 0.2);

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

    transition: color 0.3s ease, transform 0.4s ease;
}

.career-paths > div:hover span {
    color: rgba(255, 255, 255, 0.215);
    transform: translateY(-8px);
}

.career-paths b {
    display: block;

    margin-bottom: 20px;
    margin-left: 5px;

    color: var(--yellow);

    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
}

.career-paths p {
    font-size: 14px;
    line-height: 1.6;
    margin-left: 5px;
    margin-bottom: 40px;
}

.career-subtitle2 {
    grid-column: 1 / -1;

    max-width: 780px;
    margin: 30px auto 50px;

    text-align: center;

    font-size: 16px;
    line-height: 1.7;
}

.career-note {
    grid-column: 1 / -1;

    display: grid;
    grid-template-columns: 260px 1fr 280px;
    align-items: center;

    gap: 30px;

    margin-top: 30px;
    padding: 20px;

    background: var(--pale);
    border: 1px solid var(--blue);

    font-size: 15px;

    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.career-note:hover {
    box-shadow: 0 8px 30px rgba(9, 57, 148, 0.2);
    transform: translateY(-4px);
}

.career-note > b {
    color: var(--blue);
    font-size: 24px;
    font-weight: 300;
    white-space: nowrap; 
    margin-left: 20px;
    margin-bottom: 75px;
}

.career-note p {
    font-size: 14px;
    line-height: 1.8;
}

.mini-team {
    width: 285px;
    height: 160px;

    background: url('assets/teams2.jpg') center / cover no-repeat;

    transition: transform 0.35s ease-out;
}

.career-note:hover .mini-team {
    transform: scale(1.04);
}

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

.contact {
    position: relative;

    padding: 80px clamp(24px, 8vw, 120px) 0;

    overflow: hidden;

    background: var(--pale);
}

.contact::after {
    content: "";
    position: absolute;
    inset: 0 -10% 0;

    background: url('assets/contact-bg.jpg') center bottom / cover;

    opacity: 1;
    pointer-events: none;

    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 90%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 90%
    );
}

.contact > * {
    position: relative;
    z-index: 2;
}

.contact-top {
    max-width: 1000px;
    margin: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: end;
}

.contact-top h2 {
    margin: 0;
    font-size: clamp(88px, 6vw, 90px);
}

.contact-top h3 {
    margin-top: 22px;
    font-size: 18px;
    font-weight: 300;
}

.contact-top p {
    margin-top: 40px;

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

.contact-tabs {
    max-width: 1000px;
    margin: 0 auto 0;

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

    gap: 12px;
}

.contact-tabs button {
    min-height: 90px;

    padding: 18px 14px 16px;

    border: 1px solid var(--blue);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.9);

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

    text-align: center;

    cursor: pointer;

    transition: 0.25s;
}

.contact-tabs button:hover,
.contact-tabs button.active {
    background: var(--blue);
    border-color: var(--blue);
}

.contact-tabs button:hover h4,
.contact-tabs button.active h4 {
    color: var(--yellow);
}

.contact-tabs button:hover small,
.contact-tabs button:hover p,
.contact-tabs button.active small,
.contact-tabs button.active p {
    color: rgba(255, 255, 255, 0.85);
}

.contact-tabs button h4 {
    margin: 0;

    color: var(--blue);

    font-size: 17px;
    font-weight: 300;
    line-height: 1.3;
}

.contact-tabs button small {
    margin-top: -7px;
    color: var(--blue);
    font-size: 17px;
    font-weight: 300;
}

.contact-tabs button p {
    margin: 22px 0 0;

    color: var(--ink);

    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}

.contact-tabs button small + p {
    margin-top: 6px; 
}

.contact-tabs button.active {
    background: var(--blue);
    border-color: var(--blue);
}

.contact-tabs button.active h4 {
    color: var(--yellow);
}

.contact-tabs button.active small,
.contact-tabs button.active p {
    color: rgba(255, 255, 255, 0.85);
}

.contact-form {
    max-width: 780px;

    margin: 0 auto;
    padding: 32px 0 72px;
}

.contact-form label {
    display: grid;
    position: relative;
    grid-template-columns: 180px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 17px;
    row-gap: 2px;

    margin: 10px 0 10px 40px;

    color: var(--blue);
    font-size: 14px;
    font-weight: 300;
}

.field-label {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    padding-top: 10px;
}

.contact-form label span {
    display: block;
}

.contact-form label small {
    display: block;

    margin-top: 4px;

    font-weight: 300;
    font-size: 12px;
    color: var(--blue);
}

.contact-form input,
.contact-form textarea {
    grid-column: 2;
    grid-row: 2;      

    width: 100%;
    min-width: 0;

    padding: 20px 22px;

    border: 1px solid #9db0d4;
    border-radius: 5px;

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

    font-size: 13px;

    outline: none;
}

.contact-form textarea {
    height: 170px;
    resize: vertical;
}

.error-msg {
    display: none;
    grid-column: 2;
    grid-row: 1;
    align-self: end;  

    margin: 0;
    color: #d3342d;
    font-size: 12px;
    font-weight: 400;
}

.contact-form input.invalid,
.contact-form textarea.invalid {
    border-color: #d3342d;
    background: rgba(211, 52, 45, 0.05);
}

.contact-form label.has-error .error-msg {
    display: block;
}

.contact-form > button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.contact-form-submit {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    margin: 40px 0 0 40px;
}

.contact-form-submit button {
    grid-column: 2;
    justify-self: center;
}

.contact-form-submit > button {
    display: block;

    width: 95px;

    margin: 0;
    padding: 10px;

    border: 1px solid var(--blue);
    border-radius: 5px;
    background: var(--blue);
    color: white;

    font-size: 16px;
    font-weight: 300;
    letter-spacing: .3px;

    cursor: pointer;

    transition: 0.25s;
}

.contact-form-submit1 {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    margin: 40px 0 0 40px; 
}

.contact-form-submit1 button {
    grid-column: 2;
    justify-self: center;
}

.contact-form-submit1 > button {
    display: block;

    width: 140px;

    margin: 0;
    padding: 10px;

    border: 1px solid var(--blue);
    border-radius: 5px;
    background: var(--blue);
    color: white;

    font-size: 16px;
    font-weight: 300;
    letter-spacing: .3px;

    cursor: pointer;

    transition: 0.25s;
}

.contact-form-submit > button:hover {
    color: var(--yellow);
    background-color: var(--blue-deep);
}

.contact-form-submit1 > button:hover {
    color: var(--yellow);
    background-color: var(--blue-deep);
}

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

footer {
    background: var(--charcoal);
    color: #fff;
    padding: 65px 0 40px;
}

.footer-inner {
    max-width: 1000px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: start;
    gap: 50px;

    padding: 0 clamp(24px, 8vw, 24px);
}

.footer-brand img {
    width: 250px;
    height: auto;
}

.footer-company {
    font-size: 14px;
    line-height: 1.8;
}

.footer-company span {
    display: block;
}

footer small {
    grid-column: 1 / -1;

    margin-top: 10px;

    color: #aaa;

    font-size: 12px;
}

/* =========================
   BACK TO TOP BUTTON
========================= */

.back-to-top-floating {
    position: fixed;
    z-index: 900;

    right: 24px;
    bottom: 24px;

    width: 50px;
    height: 50px;

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

    border: none;
    border-radius: 50%;
    background: var(--blue);
    color: #fff;

    font-size: 18px;
    font-weight: 700;

    cursor: pointer;
    opacity: 0;
    pointer-events: none;

    transition: opacity 0.3s ease, background 0.25s ease;
}

.back-to-top-floating.visible {
    opacity: 1;
    pointer-events: auto;
}

.back-to-top-floating:hover {
    background: var(--blue-deep);
    color: var(--yellow);
}

/* =========================
   REVEAL
========================= */

.reveal {
    opacity: 0;

    transform: translateY(24px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

/* =========================================================
   HERO LOAD ANIMATION
========================================================= */

.hero-content h1,
.hero-blue h1 {
    opacity: 0;
    transform: translateY(45px);
    animation: heroTextIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-content h1 {
    animation-delay: 0.15s;
}

.hero-blue h1 {
    animation-delay: 0.4s;
}

@keyframes heroTextIn {
    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Logo2 entrance animation */
.hero-floating-image {
    animation: logo2Enter 0.7s ease-out 0.3s both;
}

@keyframes logo2Enter {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 1250px) {

    :root {
        --hero-shift: clamp(20px, 4vw, 100px); 
    }

    .site-header {
        padding-left: 30px;
        padding-right: 30px;
    }

    .brand img {
        width: 145px;
    }

    .nav {
        margin-left: 70px;
        gap: 22px;
        font-size: 14px;
    }

    .header-right {
        gap: 18px;
    }

    .header-contact {
        padding: 6px 14px;
    }
}

/* =========================
   TABLET
========================= */
@media (max-width: 900px) {

    .site-header {
        height: 68px;

        padding: 0 5vw;
    }

    main section[id] {
        scroll-margin-top: 68px;
    }

    .brand img {
        width: 135px;
    }

    .nav {
        display: none;
    }

    .header-right {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .site-header.open {
        background: rgba(5, 14, 32, 0.98);
    }

    .site-header.open .nav {
        position: absolute;

        left: 0;
        right: 0;
        top: 68px;

        display: flex;

        flex-direction: column;
        align-items: flex-start;

        gap: 0;

        margin: 0;

        padding: 12px 7vw 22px;

        background: rgba(5, 14, 32, 0.98);

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

    .site-header.open .nav a {
        position: relative;

        width: auto;

        padding: 14px 0;

        font-size: 13px;

        color: #fff;
        opacity: 0.78;

        transition: color 0.25s ease, opacity 0.25s ease;
    }

    /* Remove the desktop underline behavior */
    .site-header.open .nav a::after {
        left: 50%;
        bottom: 7px;

        width: 0;
        height: 2px;

        background: var(--yellow);

        transform: translateX(-50%);

        transition: width 0.25s ease;
    }

    .site-header.open .nav a:hover {
        color: var(--yellow);
        opacity: 1;
    }

    .site-header.open .nav a:hover::after {
        width: 100%;
    }

    /* Active item */
    .site-header.open .nav a.active {
        color: #fff;
        opacity: 1;
    }

    .site-header.open .nav a.active::after {
        left: 50%;
        bottom: 7px;

        width: 100%;

        transform: translateX(-50%);

        background: var(--yellow);
    }

    .site-header.open .nav-mobile-extra {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;

        margin-top: 20px;
        padding-top: 20px;
    }

    .site-header.open .nav-mobile-extra .header-contact {
        padding: 8px 18px;
    }

    .site-header.open .nav-mobile-extra .language {
        color: rgba(255, 255, 255, 0.65);
    }

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

    .parent-card,
    .city-image {
        width: 100%;
    }

    .city-image {
        flex: none;
        height: 320px;
    }

    .section-heading h2,
    .members h2, .careers-title h2,
    .contact-top h2 {
        font-size: clamp(52px, 8vw, 76px);
        word-break: break-word;
    }

    .service-card,
    .service-card.reverse {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
    }

    .service-image,
    .service-card.reverse .service-image {
        order: 1;
    }

    .service-copy,
    .service-card.reverse .service-copy {
        order: 2;
    }

    .service-image {
        min-height: 500px;
    }

    .timeline::after {
        right: -40px;
    }
}

@media (max-width: 768px) {
    .section-heading {
        margin: -60px auto 20px;
    }    

    .section {
        padding-bottom: 80px;
    }

    .member-groups {
        max-width: 100%;
    }

    .member-group {
        width: 100%;
    }

    .member-wrap-row {
        display: flex;
        flex-wrap: wrap;

        gap: 30px;
        row-gap: 2px;
        width: 100%;
    }

    .member-wrap-row .dept-continued {
        display: flex;
        align-items: center;
        gap: 10px;

        width: 100%;
        margin-bottom: 8px;

        color: rgba(255, 255, 255, 0.68);
        font-size: 12px;
        white-space: nowrap;
    }

    .member-wrap-row .dept-continued::after {
        content: "";
        flex: 1;

        height: 2px;
        background: rgba(255, 255, 255, 0.2);
    }

    .dept-labels {
        flex-wrap: wrap;
        gap: 30px;
    }

    .dept-admin {
        width: 305px;
    }

    .dept-content {
        width: 305px;
        flex: none;
    }

    .member-row {
        flex-wrap: wrap;
        row-gap: 30px;
        justify-content: flex-start;
    }

    .member {
        width: 305px;
    }

    .member-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 190 / 220;
    }

    .history-inner {
        padding-top: 90px;
        padding-bottom: 120px;
    }

    .purpose {
        margin-top: 50px;
    }

    .vision {
        padding-bottom: 60px;
    }

    .vision .section-heading {
        margin-bottom: 16px;
    }

    .vision-top {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .values {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .contact {
        padding-top: 30px; 
    }

    .contact-top {
        grid-template-columns: 1fr; 
        gap: 12px;
    }

    .contact-top p {
        margin-top: 0; 
    }   

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

    .careers-content {
        grid-template-columns: 1fr;
        padding-top: 30px;
        padding-bottom: 10px;
    }

    .career-subtitle, .career-subtitle1, .career-subtitle2 {
        text-align: left;
    }

    .career-subtitle1 {
    margin: 15px 0 30px;
    }

    .career-subtitle2 {
        margin-bottom: 5px;
    }

    .careers-title,
    .careers-intro {
        grid-column: 1 / -1;
        margin-top: 30px;
    }

    .career-note {
        grid-template-columns: 1fr;
        gap: 16px;
        text-align: left;
    }

    .career-note > b {
        white-space: normal;
        margin: 0 0 -20px;
    }

    .career-paths {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .career-paths > div {
        min-height: auto;
        padding: 16px 16px 16px 24px;
    }

    .career-paths > div::before {
        left: 20px;
        height: 70px;
    }

    .career-paths span {
        font-size: 70px;
        bottom: -16px;
        right: 12px;
    }

    .career-paths p {
        font-size: 16px;
    }

    .contact-top h3 {
        margin-top: -5px;
    }

    .mini-team {
        width: 100%;
        max-width: none;
        height: 280px;
        margin: -15px 0 0;

        background-position: center top;
    }

    footer {
    padding-top: 32px; 
    }
    }

@media (max-width: 750px) {

    .hero-floating-image {
        display: none;
    }

}

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

@media (max-width: 600px) {

    .hero {
        height: auto;
        min-height: 0;

        background: var(--blue);
    }

    .hero-bg {
        position: relative;
    }

    .hero-bg1 {
        position: static;

        display: block;
        width: 100%;
        height: 230px;

        object-fit: cover;
        object-position: center center;

        transform: none;
    }

    .hero-bg2 {
        position: absolute;
        inset: 0;
    }

    .city-image {
        height: 200px;
    }

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

    .info-row img {
        grid-column: auto;
        max-width: 150px;
    }

    .parent-card {
        padding: 24px 20px 20px;
    }

    .parent-line {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }

    .brand {
        min-width: auto;
    }

    .hero-content {
        position: static;

        left: auto;
        right: auto;
        bottom: auto;

        max-width: none;

        background: var(--blue);

        padding: 24px 7vw 0;
    }

    .hero-content h1 {
        font-size: clamp(35px, 10vw, 62px);
    }

    .hero-bottom-image .hero-jp {
        font-size: 20px;
    }

    .hero-blue {
        position: static;
        
        left: auto;
        right: auto;
        bottom: auto;

        height: auto;

        padding: 0 7vw 32px;
    }

    .hero-blue h1 {
        font-size: clamp(20px, 10vw, 62px);
    }
    
    .hero-align {
        width: auto;
        max-width: none;
        margin: 0;
        transform: none; 
    }

    .hero-bottom-image .hero-align {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%); 
        padding: 0 7vw; 
    } 

    .hero-floating-image {
        display: none;
    }

    .section-heading h2,
    .members h2, .careers-title h2,
    .contact-top h2 {
        font-size: clamp(38px, 15vw, 70px);
        word-break: break-word;
    }    

    .service-card,
    .service-card.reverse {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        height: auto;
    }

    .service-image,
    .service-card.reverse .service-image {
        order: 1;
    }

    .service-copy,
    .service-card.reverse .service-copy {
        order: 2;
    }

    .service-copy {
        padding: 30px;
    }

    .service-image {
        min-height: 400px;
    }

    .history-inner {
        padding-top: 100px;
        padding-bottom: 90px;
    }

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

    .timeline-item:nth-child(1) span br:nth-of-type(-n+2) {
        display: none;
    }

    .timeline::after {
        right: 0;
    }

    .timeline::before {
        content: "";
        position: absolute;
        left: -3px;
        top: 0;
        bottom: 0;

        width: 7px;

        background:
            radial-gradient(circle 3.5px at 3.5px 3.5px, var(--blue) 100%, transparent 100%) top / 7px 7px no-repeat,
            linear-gradient(var(--blue), var(--blue)) center / 1px 100% no-repeat;
    }

    .timeline-item {
        min-height: auto;

        padding: 10px 0 10px 24px;

        border: none;
    }

    .timeline-item::before {
        display: none;
    }

    .timeline-item:last-child {
        border: none;
    }

    .timeline-year--a { order: 1; }
    .timeline-item:nth-child(1) { order: 2; }
    .timeline-year--b { order: 3; }
    .timeline-item:nth-child(2) { order: 4; }
    .timeline-item:nth-child(3) { order: 5; }
    .timeline-item:nth-child(4) { order: 6; }

    .timeline-year {
        position: relative;
        left: 0;
        bottom: 0;

        padding: 6px 0 6px 24px;

        font-size: 40px;

        border: none;
    }

    .member-row {
        flex-wrap: wrap;
        gap: 16px;
    }

    .member {
        width: calc(50% - 8px);
    }

    .member-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 190 / 220;
    }

    .dept-admin {
        width: calc(50% - 8px);
    }

    .dept-content {
        width: calc(50% - 8px);
        flex: none;
    }

    .dept-labels {
        gap: 16px;
    }

    .member-wrap-row {
        gap: 16px;
        row-gap: 2px;
    }

    .network-art {
        width: 100%;
        right: -28%;
        bottom: -7%;

        opacity: 0.3;
    }

    .circle.left {
        left: 11%;
    }

    .circle.right {
        right: 18%;
    }

    .circle {
        width: 90px;
        height: 90px;
        font-size: 13px;
        padding: 6px;
        hyphens: none; 
    }

    .center-text {
        font-size: 28px;
    }

    .four-way {
        width: 100%;
        margin: 10px 0 40px; 
    }

    .four-way-visual {
        width: 100%;
        max-width: 320px;
        margin: 0 auto; 
        aspect-ratio: 1 / 1;
    }

    .four-way-note {
        position: static;
        width: 100%;
        max-width: none;
        margin: 12px 0 0;
        font-size: 13px;
    }

    .four-way-note-label {
        display: inline;
        color: var(--blue);
        font-weight: 700;
    }

    .vision-top b,
    .value-box > b,
    .purpose > b {
        font-size: 18px;
    }

    .vision-sub {
        font-size: 13px;
    }

    .mission-text {
        font-size: 18px;
    }

    .vision-text {
        font-size: 26px;
    }

    .value-box h4,
    .purpose h4 {
        font-size: 14px;
    }

    .value-box p,
    .value-box .p1,
    .value-box .p2 {
        font-size: 15px;
    }

    .value-box .num {
        width: 22px;
        height: 22px;
        font-size: 14px;
    }

    .purpose p {
        margin-bottom: -25px;
    }
    
    .careers-photo {
        height: 270px;
    }

    .careers-content {
        padding: 62px clamp(24px, 8vw, 120px) 90px; 
    }

    .mini-team {
        width: 100%;
        max-width: none;
        height: 160px;
        margin: -15px 0 0;

        background-position: center top;
    }

    .contact-tabs {
        grid-template-columns: 1fr;
    }

    .contact-top {
        grid-template-columns: 1fr; 
        gap: 12px;
    }

    .contact-top p {
        margin-top: 0; 
        font-size: 14px;
    }

    .contact-top h3 {
        margin-top: 0;
        font-size: 16px;
    }

    .contact-tabs button {
        align-items: flex-start; 
        text-align: left;        
    }

    .contact-form label {
        grid-template-columns: 1fr; 
        grid-template-rows: auto auto auto;
        gap: 4px;
        margin: 13px 0;
    }

    .field-label {
        grid-column: 1;
        grid-row: 1;
        padding-top: 0;
        align-self: start;
    }

    .error-msg {
        grid-column: 1;
        grid-row: 2; 
        align-self: start;
        margin: 0;
    }

    .contact-form input,
    .contact-form textarea {
        grid-column: 1;
        grid-row: 3; 
    }

    .contact-form-submit {
        grid-template-columns: 1fr;
        margin: 24px 0 0 0;
        justify-items: center;
    }

    .contact-form-submit1 {
        grid-template-columns: 1fr;
        margin: 24px 0 0 0;
        justify-items: center;
    }    

    .contact-form-submit button {
        grid-column: 1; /
    }

    .contact-form-submit1 button {
        grid-column: 1; 
    }

    .contact-form-submit > button {
        width: auto;
        min-width: 85px;
    }

    .footer-inner {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .footer-brand {
        text-align: center;
    }

    .footer-brand img {
        width: 200px;
        display: block;
    }

    .back-to-top-floating {
        width: 44px;
        height: 44px;
        right: 16px;
        bottom: 16px;
    }  
}

@media (max-width: 450px) {
    .dml5a {
        margin-left: -10px;
    }
    
    .four-way-note {
        margin-top: 20px;
    }

    .vision {
        padding-bottom: 0px; 
    }

    .careers-content {
        margin-top: -120px; 
        margin-bottom: -120px;
    }

    .careers-intro b {
        font-size: 24px;
    }

    .career-subtitle {
        font-size: 30px;
    }

    .purpose p {
        margin-bottom: -35px;
    }
}    

@media (max-width: 380px) {
    .careers-content {
        margin-top: -160px; 
        margin-bottom: -120px;
    }

    .circle {
        width: 73px;
        height: 73px;
        font-size: 11px;
        padding: 4px;
    }

    .center-text {
        font-size: 22px;
    }
}