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

:root {
  --font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif;
  --font-display: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, sans-serif;
  --font-en: "Inter", "Noto Sans JP", "Segoe UI", Arial, sans-serif;
  --ink: #10345d;
  --muted: #596b7a;
  --line: #d6e5f0;
  --base: #f3f9ff;
  --white: #ffffff;
  --yellow: #d7edff;
  --yellow-deep: #1276bd;
  --blue: #1276bd;
  --blue-bright: #29a8df;
  --navy: #073a72;
  --sky: #ddf3ff;
  --soft: #edf8ff;
  --shadow: 0 22px 54px rgba(7, 58, 114, 0.16);
  --shadow-strong: 0 30px 80px rgba(7, 58, 114, 0.24);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(18, 118, 189, 0.12), transparent 24rem),
    radial-gradient(circle at 88% 22%, rgba(41, 168, 223, 0.2), transparent 22rem),
    var(--base);
  font-family: var(--font-ja);
  letter-spacing: 0;
  font-feature-settings: "palt", "kern";
  font-optical-sizing: auto;
}

body::selection {
  background: #cceeff;
}

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

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  min-height: 72px;
  padding: 14px clamp(18px, 4vw, 48px);
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(216, 228, 230, 0.88);
  backdrop-filter: blur(18px);
}

.brand,
.nav,
.hero-actions,
.culture-tags,
.entry-list {
  display: flex;
  align-items: center;
}

.brand {
  gap: 10px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.06em;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--white);
  background: var(--navy);
  border-radius: 50%;
  box-shadow: inset -6px -6px 0 rgba(0, 0, 0, 0.08);
}

.brand-logo {
  display: block;
  width: auto;
  height: 22px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.brand-recruit {
  display: inline-flex;
  min-height: 20px;
  padding-left: 11px;
  align-items: center;
  color: var(--navy);
  border-left: 1px solid rgba(7, 58, 114, 0.22);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

@media (max-width: 560px) {
  .brand { gap: 8px; }
  .brand-logo { height: 18px; }
  .brand-recruit { min-height: 17px; padding-left: 8px; font-size: 9px; letter-spacing: .1em; }
}

.nav {
  gap: clamp(12px, 2vw, 28px);
  color: var(--muted);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.nav a:hover {
  color: var(--blue);
}

.header-entry {
  padding: 10px 18px;
  color: var(--white);
  background: var(--navy);
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px rgba(7, 58, 114, 0.18);
  transition: transform 0.25s ease, background 0.25s ease;
}

.header-entry:hover {
  background: var(--blue);
  transform: translateY(-2px);
}

.hero {
  position: relative;
  min-height: calc(100svh - 72px);
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 72px);
  isolation: isolate;
  perspective: 1200px;
}

.hero-image,
.hero-overlay {
  position: absolute;
  inset: 0;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: heroBreath 12s ease-in-out infinite alternate;
}

.hero-overlay {
  background:
    radial-gradient(circle at 72% 17%, rgba(18, 118, 189, 0.2), transparent 18rem),
    radial-gradient(circle at 90% 80%, rgba(41, 168, 223, 0.34), transparent 22rem),
    linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(237, 248, 255, 0.82) 46%, rgba(237, 248, 255, 0.32)),
    linear-gradient(0deg, rgba(11, 58, 104, 0.14), rgba(11, 58, 104, 0));
}

.hero-energy {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.energy-dot,
.energy-line {
  position: absolute;
  display: block;
}

.energy-dot {
  width: clamp(110px, 14vw, 190px);
  aspect-ratio: 1;
  border-radius: 38% 62% 54% 46% / 46% 40% 60% 54%;
  filter: blur(0.2px);
  opacity: 0.72;
  animation: morphFloat 9s ease-in-out infinite alternate;
}

.dot-a {
  right: 18%;
  top: 12%;
  background: linear-gradient(135deg, rgba(41, 168, 223, 0.42), rgba(255, 255, 255, 0.46));
}

.dot-b {
  right: 4%;
  bottom: 16%;
  animation-delay: -2s;
  background: linear-gradient(135deg, rgba(41, 168, 223, 0.62), rgba(255, 255, 255, 0.42));
}

.dot-c {
  left: 3%;
  bottom: 10%;
  width: clamp(80px, 10vw, 140px);
  animation-delay: -5s;
  background: linear-gradient(135deg, rgba(41, 168, 223, 0.28), rgba(18, 118, 189, 0.24));
}

.energy-line {
  width: 44vw;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(18, 118, 189, 0.78), rgba(41, 168, 223, 0.55), transparent);
  transform: rotate(-18deg);
  animation: lineSweep 5.5s ease-in-out infinite;
}

.line-a {
  right: -8%;
  top: 31%;
}

.line-b {
  right: 8%;
  bottom: 24%;
  animation-delay: -2.2s;
  transform: rotate(14deg);
}

.hero-content {
  position: relative;
  z-index: 4;
  max-width: 760px;
  animation: heroCopyIn 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.eyebrow,
.section-heading span,
.work-cards span,
.promise span,
.entry-box span,
.detail-label {
  color: var(--yellow-deep);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 24px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(44px, 5.7vw, 74px);
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-shadow: 0 14px 34px rgba(7, 58, 114, 0.16);
}

h1 span {
  display: block;
}

.hero-lead {
  max-width: 620px;
  color: #24455f;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 2.05;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
}

.attention-rotator {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 690px;
  margin: -6px 0 22px;
}

.attention-rotator span,
.attention-rotator strong {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 28px rgba(7, 58, 114, 0.12);
  animation: chipPop 0.7s ease both;
}

.attention-rotator span {
  color: var(--navy);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(7, 58, 114, 0.12);
}

.attention-rotator span:nth-child(2) {
  animation-delay: 0.12s;
}

.attention-rotator span:nth-child(3) {
  animation-delay: 0.24s;
}

.attention-rotator strong {
  color: var(--navy);
  background: linear-gradient(135deg, #eef8ff, var(--yellow));
  animation-delay: 0.36s;
}

.hero-actions {
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-ja);
  font-weight: 800;
  letter-spacing: 0.01em;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.button.primary {
  color: var(--white);
  background: linear-gradient(135deg, var(--navy), var(--blue));
  box-shadow: 0 12px 28px rgba(11, 58, 104, 0.24);
}

.button.secondary {
  color: var(--navy);
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(18, 58, 99, 0.2);
}

.button:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.button.large {
  min-width: 220px;
}

.orbit {
  position: absolute;
  right: clamp(20px, 7vw, 96px);
  bottom: clamp(24px, 6vw, 72px);
  z-index: 4;
  width: min(34vw, 390px);
  min-width: 270px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 30%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.58) 52%, rgba(221, 243, 255, 0.42)),
    linear-gradient(135deg, rgba(18, 118, 189, 0.12), rgba(41, 168, 223, 0.22));
  box-shadow: var(--shadow-strong), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transform-style: preserve-3d;
  animation: orbitFloat 6.8s ease-in-out infinite;
  transition: transform 0.18s ease-out;
}

.orbit-ring {
  position: absolute;
  inset: 10%;
  border: 1px dashed rgba(7, 58, 114, 0.24);
  border-radius: 50%;
  animation: spin 26s linear infinite;
}

.ring-two {
  inset: 22%;
  border-style: solid;
  border-color: rgba(41, 168, 223, 0.52);
  animation-duration: 18s;
  animation-direction: reverse;
}

.orbit strong,
.orbit span {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-family: var(--font-ja);
  font-weight: 800;
}

.orbit strong {
  inset: 36%;
  color: var(--navy);
  background: linear-gradient(135deg, #f2faff, var(--yellow));
  box-shadow: 0 18px 34px rgba(7, 58, 114, 0.18), inset 0 -6px 0 rgba(18, 118, 189, 0.12);
  transform: translateZ(48px);
}

.orbit span {
  width: 80px;
  height: 40px;
  background: var(--white);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--navy);
  box-shadow: 0 14px 28px rgba(7, 58, 114, 0.13);
  transform: translateZ(32px);
  animation: tagPulse 4s ease-in-out infinite;
}

.orbit span:nth-child(3) { animation-delay: -0.6s; }
.orbit span:nth-child(4) { animation-delay: -1.2s; }
.orbit span:nth-child(6) { animation-delay: -1.8s; }
.orbit span:nth-child(7) { animation-delay: -2.4s; }
.orbit span:nth-child(8) { animation-delay: -3s; }

.orbit span:nth-of-type(1) { left: 50%; top: 5%; transform: translateX(-50%) translateZ(32px); }
.orbit span:nth-of-type(2) { right: 8%; top: 26%; }
.orbit span:nth-of-type(3) { right: 14%; bottom: 18%; }
.orbit span:nth-of-type(4) { left: 14%; bottom: 18%; }
.orbit span:nth-of-type(5) { left: 8%; top: 26%; }
.orbit span:nth-of-type(6) { left: 50%; bottom: 5%; transform: translateX(-50%) translateZ(32px); }

.hero-floating-cards {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.float-card {
  position: absolute;
  max-width: 230px;
  padding: 14px 16px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.01em;
  backdrop-filter: blur(12px);
  animation: floatCard 7s ease-in-out infinite;
}

.float-card::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--blue-bright);
  box-shadow: 0 0 0 6px rgba(41, 168, 223, 0.12);
}

.card-home {
  right: 37%;
  top: 18%;
}

.card-accident {
  right: 4%;
  top: 50%;
  animation-delay: -1.6s;
}

.card-call {
  right: 29%;
  bottom: 10%;
  animation-delay: -3.2s;
}

.attention-section {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  padding: clamp(72px, 9vw, 124px) clamp(20px, 5vw, 72px);
  background:
    radial-gradient(circle at 14% 16%, rgba(18, 118, 189, 0.12), transparent 18rem),
    radial-gradient(circle at 95% 32%, rgba(41, 168, 223, 0.28), transparent 24rem),
    linear-gradient(135deg, #ffffff, #eaf7ff 58%, #f4fbff);
}

.student-section {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(300px, 1.08fr);
  gap: clamp(28px, 6vw, 76px);
  align-items: center;
  padding: clamp(72px, 9vw, 124px) clamp(20px, 5vw, 72px);
  background:
    radial-gradient(circle at 80% 18%, rgba(41, 168, 223, 0.2), transparent 18rem),
    linear-gradient(135deg, var(--navy), #0b66a8 62%, #0a4a84);
  color: var(--white);
}

.student-section::before {
  content: "WHY THIS WORK?";
  position: absolute;
  left: -1vw;
  bottom: -2vw;
  color: rgba(255, 255, 255, 0.08);
  font-size: clamp(54px, 12vw, 160px);
  font-weight: 900;
  white-space: nowrap;
}

.student-copy,
.student-thoughts {
  position: relative;
  z-index: 1;
}

.student-copy span {
  color: var(--yellow);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.student-copy h2 {
  margin: 12px 0 20px;
  font-family: var(--font-display);
  font-size: clamp(34px, 5.4vw, 68px);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.student-copy p {
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 2.05;
  letter-spacing: 0.01em;
}

.student-thoughts {
  display: grid;
  gap: 16px;
}

.student-thoughts span {
  display: block;
  padding: clamp(18px, 3vw, 28px);
  color: var(--navy);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: clamp(18px, 2.1vw, 25px);
  font-weight: 800;
  line-height: 1.65;
  letter-spacing: 0.01em;
  transform: rotate(-1deg);
}

.student-thoughts span:nth-child(2) {
  transform: translateX(34px) rotate(1deg);
}

.student-thoughts span:nth-child(3) {
  transform: translateX(68px) rotate(-0.6deg);
}

.attention-section::before {
  content: "";
  position: absolute;
  inset: 30px;
  border: 1px solid rgba(7, 58, 114, 0.08);
  border-radius: 28px;
  pointer-events: none;
}

.attention-copy {
  position: relative;
  z-index: 1;
}

.attention-copy span {
  color: var(--yellow-deep);
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: 0.06em;
}

.attention-copy h2 {
  margin: 12px 0 18px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 66px);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.attention-copy p,
.attention-card p {
  color: var(--muted);
  line-height: 2.05;
  letter-spacing: 0.01em;
}

.attention-cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.attention-card {
  min-height: auto;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 22px;
  align-items: start;
  padding: clamp(24px, 3vw, 34px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82)),
    radial-gradient(circle at 20% 10%, rgba(41, 168, 223, 0.18), transparent 9rem);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 8px;
  box-shadow: var(--shadow);
  transform-style: preserve-3d;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.attention-card:nth-child(2) {
  transform: translateX(42px);
}

.attention-card:nth-child(3) {
  transform: translateX(84px);
}

.attention-card span {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin-bottom: 24px;
  color: var(--navy);
  background: linear-gradient(135deg, #e8f7ff, var(--yellow));
  border-radius: 50%;
  box-shadow: 0 16px 28px rgba(7, 58, 114, 0.14);
  font-family: var(--font-en);
  font-weight: 800;
}

.attention-card h3 {
  color: var(--navy);
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.48;
  letter-spacing: 0.02em;
}

.attention-card p {
  margin-bottom: 0;
}

.intro-band {
  position: relative;
  overflow: hidden;
  padding: 36px clamp(22px, 6vw, 80px);
  background:
    linear-gradient(135deg, var(--navy), #0b66a8);
  color: var(--white);
}

.marquee {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0.18;
  pointer-events: none;
}

.marquee-track {
  display: flex;
  gap: 34px;
  width: max-content;
  animation: marquee 34s linear infinite;
}

.marquee span {
  color: var(--white);
  font-family: var(--font-en);
  font-size: clamp(30px, 7vw, 84px);
  font-weight: 800;
  white-space: nowrap;
}

.intro-band p {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.8;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.connection-section {
  --connection-glow: 0;
  position: relative;
  min-height: 170svh;
  overflow: clip;
  background:
    radial-gradient(circle at 50% 44%, rgba(41, 168, 223, 0.18), transparent 28rem),
    linear-gradient(180deg, #f4fbff, #ffffff 46%, #edf8ff);
}

.connection-section::before {
  content: "CONNECT";
  position: absolute;
  right: -4vw;
  top: 8vw;
  color: rgba(7, 58, 114, 0.045);
  font-family: var(--font-en);
  font-size: clamp(86px, 18vw, 230px);
  font-weight: 900;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.connection-sticky {
  position: sticky;
  top: 72px;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(320px, 1.18fr);
  align-items: center;
  gap: clamp(32px, 6vw, 86px);
  min-height: calc(100svh - 72px);
  padding: clamp(74px, 9vw, 124px) clamp(20px, 5vw, 72px);
}

.connection-heading {
  max-width: 570px;
}

.connection-heading h2 {
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(42px, 5.6vw, 78px);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.connection-heading h2 .no-break {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .connection-heading h2 {
    font-size: clamp(27px, 8.5vw, 42px);
  }
}

/* Work background word: right-aligned as intended. */
.page-work .work-compact-hero::before {
  right: 1vw;
  left: auto;
}

@media (max-width: 760px) {
  .page-work .work-compact-hero::before {
    right: 1vw;
    left: auto;
  }
}

/* Recruitment top v17: bring back the original two-colleague photo softly. */
.page-home .hero-energy { z-index: 1; }

.page-home .hero-photo-stage {
  display: block !important;
  z-index: 2;
  top: 42% !important;
  right: 1.5% !important;
  width: min(46vw, 680px) !important;
  height: 48% !important;
  margin: 0 !important;
  opacity: .52;
  translate: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: none !important;
  -webkit-mask-image: radial-gradient(ellipse 76% 80% at 66% 58%, #000 0%, #000 54%, rgba(0,0,0,.72) 70%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 76% 80% at 66% 58%, #000 0%, #000 54%, rgba(0,0,0,.72) 70%, transparent 100%) !important;
  animation: heroPhotoReturnFinal 1.8s cubic-bezier(.2,.72,.2,1) both;
}

.page-home .hero-photo-stage::before,
.page-home .hero-photo-stage::after,
.page-home .hero-photo-sub,
.page-home .hero-photo-caption,
.page-home .hero-photo-dot { display: none !important; }

.page-home .hero-photo-main {
  display: block !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: heroAtmosphereDrift 12s ease-in-out infinite alternate;
}

.page-home .hero-photo-main::after { display: none !important; }

.page-home .hero-photo-main img {
  width: 100% !important;
  height: 100% !important;
  opacity: 1 !important;
  object-fit: cover !important;
  object-position: 48% 48% !important;
  filter: saturate(.78) brightness(1.09) contrast(.92) !important;
  transform: none !important;
}

@keyframes heroPhotoReturnFinal {
  from { opacity: 0; transform: translate3d(18px,10px,0); }
  to { opacity: .52; transform: translate3d(0,0,0); }
}

@media (max-width: 760px) {
  .page-home .hero-photo-stage {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: calc(100% + 24px) !important;
    height: min(66vw, 390px) !important;
    margin: 26px -12px -8px !important;
    opacity: .62;
    translate: none !important;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 82%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 82%, transparent 100%) !important;
  }

  .page-home .hero-photo-main img { object-position: 50% 48% !important; }
}

/* Culture final: fit the full word and remove inherited circle decoration. */
.page-culture .culture-section::before {
  right: 2vw;
  left: auto;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: clamp(7.5rem, 11.5vw, 12.5rem);
}

.page-culture .culture-section::after {
  display: none !important;
  content: none !important;
}

@media (max-width: 760px) {
  .page-culture .culture-section::before {
    right: 2vw;
    left: auto;
    width: auto;
    height: auto;
    font-size: clamp(3.9rem, 12.5vw, 5.7rem);
  }
}

/* Philosophy: same background-word system, scaled only as needed to fit. */
.page-philosophy .identity-book-section::before {
  right: auto;
  left: 2vw;
  top: .02em;
  display: block;
  color: rgba(7,83,137,.047);
  font-family: var(--font-en);
  font-size: clamp(8rem, 14vw, 15rem);
  font-weight: 900;
  line-height: .8;
  letter-spacing: -.09em;
  white-space: nowrap;
  animation: philosophyBackgroundWord 1.7s cubic-bezier(.16,1,.3,1) both;
}

@keyframes philosophyBackgroundWord {
  from { opacity: 0; transform: translate3d(5%,5%,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

@media (max-width: 760px) {
  .page-philosophy .identity-book-section::before {
    left: 2vw;
    font-size: clamp(4.4rem, 15vw, 6.5rem);
    letter-spacing: -.1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-philosophy .identity-book-section::before { animation: none; }
}

/* Background word refinement: match Philosophy and remove redundant decoration. */
.page-work .work-compact-hero::before,
.page-home .hero-energy::before,
.page-people .people-section::before,
.page-culture .culture-section::before {
  right: auto;
  left: 1vw;
  font-size: clamp(8rem, 14vw, 15rem);
  line-height: .8;
  letter-spacing: -.09em;
}

.page-culture .culture-section::after,
.contact-section::before {
  display: none !important;
}

/* Recruitment top: restore the two-colleague photograph over the shared background. */
.page-home .hero-energy { z-index: 1; }

.page-home .hero-photo-stage {
  display: block !important;
  z-index: 2;
  top: 42% !important;
  right: 1.5% !important;
  width: min(46vw, 680px) !important;
  height: 48% !important;
  margin: 0 !important;
  opacity: .52;
  translate: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
  -webkit-mask-image: radial-gradient(ellipse 76% 80% at 66% 58%, #000 0%, #000 54%, rgba(0,0,0,.72) 70%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 76% 80% at 66% 58%, #000 0%, #000 54%, rgba(0,0,0,.72) 70%, transparent 100%) !important;
  animation: heroPhotoReturn 1.8s cubic-bezier(.2,.72,.2,1) both;
}

.page-home .hero-photo-main {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: heroAtmosphereDrift 14s ease-in-out infinite alternate;
}

.page-home .hero-photo-main img {
  object-fit: cover !important;
  object-position: 48% 48% !important;
  filter: saturate(.78) brightness(1.09) contrast(.92) !important;
}

@keyframes heroPhotoReturn {
  from { opacity: 0; transform: translate3d(28px,10px,0); }
  to { opacity: .52; transform: translate3d(0,0,0); }
}

@media (max-width: 760px) {
  .page-work .work-compact-hero::before,
  .page-home .hero-energy::before,
  .page-people .people-section::before,
  .page-culture .culture-section::before {
    left: 1vw;
    font-size: clamp(4.4rem, 15vw, 6.5rem);
    letter-spacing: -.1em;
  }
}

/* Final Work alignment override. */
.page-work .work-compact-hero::before {
  right: 1vw;
  left: auto;
}

@media (max-width: 760px) {
  .page-work .work-compact-hero::before {
    right: 1vw;
    left: auto;
  }

  .page-home .hero-photo-stage {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: calc(100% + 24px) !important;
    height: min(66vw, 390px) !important;
    margin: 26px -12px -8px !important;
    opacity: .62;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 88%, transparent 100%) !important;
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 88%, transparent 100%) !important;
  }
}

.connection-heading p {
  color: var(--muted);
  font-size: clamp(15px, 1.45vw, 18px);
  line-height: 2;
}

.connection-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(420px, 55vw, 620px);
}

.connection-visual::before {
  content: "";
  position: absolute;
  width: min(54vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.86), rgba(221, 243, 255, 0.38) 48%, rgba(18, 118, 189, 0.08) 64%, transparent 68%),
    conic-gradient(from 120deg, rgba(18, 118, 189, 0.1), rgba(41, 168, 223, 0.18), rgba(255, 213, 79, 0.1), rgba(18, 118, 189, 0.1));
  filter: blur(0.2px);
  opacity: calc(0.18 + (var(--connection-glow) * 0.52));
  transform: scale(calc(0.66 + (var(--connection-glow) * 0.34)));
}

.connection-section .orbit {
  position: relative;
  right: auto;
  bottom: auto;
  z-index: 1;
  width: clamp(280px, 38vw, 460px);
  min-width: 0;
  opacity: 0;
  animation: none;
  transform: scale(0);
  transition: none;
}

.connection-section .orbit-ring {
  animation-play-state: paused;
}

.connection-section.is-complete .orbit-ring {
  animation-play-state: running;
}

.connection-section .orbit strong,
.connection-section .orbit span {
  opacity: 0;
  filter: blur(6px);
  animation: none;
  will-change: opacity, filter, translate;
}

.connection-section .orbit strong {
  display: grid;
  place-items: center;
  gap: 2px;
  width: 42%;
  height: 42%;
  padding: 18px;
  text-align: center;
  line-height: 1.15;
}

.connection-section .orbit strong small {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.64rem, 1vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.connection-notes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.connection-notes span {
  position: absolute;
  max-width: 230px;
  padding: 14px 16px;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(214, 229, 240, 0.9);
  border-radius: 8px;
  box-shadow: 0 18px 38px rgba(7, 58, 114, 0.12);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.65;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(18px);
  backdrop-filter: blur(12px);
}

.connection-notes span small {
  display: block;
  margin-bottom: 4px;
  color: #1685ba;
  font-family: var(--font-en);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.connection-notes span:nth-child(1) {
  left: 2%;
  top: 14%;
}

.connection-notes span:nth-child(2) {
  right: 1%;
  top: 26%;
  border-left: 4px solid #2b79d0;
}

.connection-notes span:nth-child(3) {
  right: 1%;
  bottom: 25%;
  border-left: 4px solid #16a39d;
}

.connection-notes span:nth-child(4) {
  left: 9%;
  bottom: 7%;
  color: #fff;
  background: linear-gradient(135deg, #07549a, #0794ad);
  border-color: transparent;
  border-radius: 999px;
  text-align: center;
}

.section {
  padding: clamp(72px, 10vw, 132px) clamp(20px, 5vw, 72px);
}

.reveal {
  opacity: 0.12;
  transform: translateY(22px);
  transition: opacity 0.58s ease, transform 0.58s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.section-heading {
  max-width: 720px;
}

.section-heading.centered {
  margin: 0 auto 42px;
  text-align: center;
}

.section-heading h2,
.promise h2,
.entry-box h2,
.message-box h2 {
  margin: 10px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.section-heading h2 {
  color: var(--navy);
}

.section-heading p,
.purpose-grid p,
.promise p,
.message-box p,
.entry-box p,
.faq-list p {
  color: var(--muted);
  line-height: 2.05;
  letter-spacing: 0.01em;
}

.purpose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: clamp(28px, 6vw, 76px);
  align-items: stretch;
  margin-top: 44px;
}

.large-copy {
  margin-bottom: 10px;
  color: var(--yellow-deep);
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.purpose-grid h3 {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1.24;
  letter-spacing: 0.02em;
}

blockquote {
  margin: 0;
  padding: clamp(28px, 4vw, 44px);
  background: var(--white);
  border-left: 7px solid var(--blue);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

blockquote p {
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

cite {
  color: var(--muted);
  font-style: normal;
  font-weight: 700;
}

.anchor-target {
  position: absolute;
  display: block;
  scroll-margin-top: 120px;
}

.identity-book-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(41, 168, 223, 0.18), transparent 22rem),
    radial-gradient(circle at 88% 42%, rgba(7, 58, 114, 0.13), transparent 24rem),
    linear-gradient(180deg, #ffffff, #edf8ff 52%, #f7fcff);
}

.identity-book-section::before {
  content: "PHILOSOPHY";
  position: absolute;
  left: -2vw;
  top: 7vw;
  color: rgba(7, 58, 114, 0.045);
  font-family: var(--font-en);
  font-size: clamp(76px, 17vw, 220px);
  font-weight: 900;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.credo-book {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 38px auto 0;
}

.credo-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
}

.credo-tabs button {
  min-height: 44px;
  padding: 0 18px;
  color: var(--blue);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(214, 229, 240, 0.96);
  border-radius: 999px;
  font: inherit;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(7, 58, 114, 0.07);
  transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.credo-tabs button.active,
.credo-tabs button:hover {
  color: var(--white);
  background: linear-gradient(135deg, var(--navy), var(--blue));
  box-shadow: 0 16px 32px rgba(7, 58, 114, 0.18);
  transform: translateY(-2px);
}

.book-stage {
  position: relative;
  min-height: 500px;
  padding: clamp(14px, 3vw, 24px) clamp(42px, 6vw, 64px);
  perspective: 1400px;
  overflow: visible;
}

.book-cover {
  position: absolute;
  inset: 0 clamp(42px, 6vw, 72px);
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(135deg, rgba(7, 58, 114, 0.94), rgba(18, 118, 189, 0.84)),
    radial-gradient(circle at 82% 20%, rgba(41, 168, 223, 0.24), transparent 15rem);
  border-radius: 8px;
  font-family: var(--font-en);
  font-size: clamp(34px, 6vw, 66px);
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 0 24px 52px rgba(7, 58, 114, 0.18);
}

.book-cover::before,
.book-cover::after {
  content: "";
  position: absolute;
  inset: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 6px;
}

.book-cover::after {
  inset: auto 26px 22px;
  height: 4px;
  background: rgba(255, 255, 255, 0.28);
  border: 0;
}

.book-spread {
  position: absolute;
  inset: clamp(14px, 3vw, 24px) clamp(42px, 6vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 454px;
  opacity: 0;
  pointer-events: none;
  transform: rotateY(-12deg) translateX(16px);
  transform-origin: left center;
  transition: opacity 0.24s ease, transform 0.48s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-style: preserve-3d;
}

.book-spread.active {
  opacity: 1;
  pointer-events: auto;
  transform: rotateY(0deg) translateX(0);
}

.book-stage.is-turning .book-spread.active {
  animation: spreadSettle 0.68s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.page-turner {
  position: absolute;
  z-index: 4;
  top: clamp(14px, 3vw, 24px);
  bottom: clamp(14px, 3vw, 24px);
  left: 50%;
  width: calc((100% - (clamp(42px, 6vw, 64px) * 2)) / 2);
  pointer-events: none;
  opacity: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  background:
    linear-gradient(90deg, rgba(7, 58, 114, 0.08), transparent 10%),
    linear-gradient(180deg, #ffffff, #f3faff);
  border: 1px solid rgba(214, 229, 240, 0.96);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 18px 42px rgba(7, 58, 114, 0.16);
}

.page-turner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 58, 114, 0.16), rgba(255, 255, 255, 0.24) 35%, transparent);
  border-radius: inherit;
}

.book-stage.turn-next .page-turner {
  opacity: 1;
  transform-origin: left center;
  animation: pageTurnNext 0.78s cubic-bezier(0.2, 0.78, 0.16, 1) both;
}

.book-stage.turn-prev .page-turner {
  left: auto;
  right: 50%;
  border-right: 0;
  border-left: 1px solid rgba(214, 229, 240, 0.96);
  border-radius: 8px 0 0 8px;
  opacity: 1;
  transform-origin: right center;
  animation: pageTurnPrev 0.78s cubic-bezier(0.2, 0.78, 0.16, 1) both;
}

.book-page {
  height: 100%;
  min-height: 388px;
  padding: clamp(24px, 4vw, 42px);
  background:
    linear-gradient(90deg, rgba(7, 58, 114, 0.06), transparent 8%),
    linear-gradient(180deg, #ffffff, #f7fcff);
  border: 1px solid rgba(214, 229, 240, 0.96);
  box-shadow: 0 22px 50px rgba(7, 58, 114, 0.12);
}

.book-page-left {
  border-radius: 8px 0 0 8px;
}

.book-page-right {
  height: calc(100% + 16px);
  min-height: 402px;
  border-left: 0;
  border-radius: 0 8px 8px 0;
  padding-top: clamp(20px, 3vw, 34px);
  padding-bottom: clamp(20px, 3vw, 34px);
  background:
    linear-gradient(270deg, rgba(41, 168, 223, 0.08), transparent 10%),
    linear-gradient(180deg, #ffffff, #f3faff);
}

.purpose-copy-page,
.purpose-title-page {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.purpose-copy-page .purpose-statement {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: clamp(0.76rem, 1.15vw, 0.98rem);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.025em;
}

.purpose-copy-page .purpose-statement span {
  display: block;
  white-space: nowrap;
}

.purpose-title-page .book-number {
  margin: 0 0 16px;
}

.purpose-title-page h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1.35;
}

.credo-title-page,
.credo-copy-page,
.principle-stance-page {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.credo-title-page h3,
.principle-stance-page h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1.35;
}

.credo-copy-page .credo-statement {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.05vw, 0.92rem);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.02em;
}

.credo-copy-page .credo-statement span {
  display: block;
  white-space: nowrap;
}

.principle-stance-page > p:last-child {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(0.82rem, 1.25vw, 1rem);
  line-height: 1.9;
}

.principle-list-page {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(24px, 4vw, 42px);
}

.principle-list-page .book-number {
  margin-bottom: 10px;
}

.principle-list-page-right {
  padding-top: clamp(24px, 4vw, 42px);
}

.principle-number-placeholder {
  visibility: hidden;
}

.principle-static-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.principle-static-list > div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 2px 10px;
  padding: 9px 0;
  border-bottom: 1px dotted rgba(7, 58, 114, 0.3);
}

.principle-static-list > div:last-child {
  border-bottom: 0;
}

.principle-static-list b {
  grid-column: 1;
  grid-row: 1 / span 2;
  color: var(--blue);
  font-family: var(--font-en);
  font-size: 0.68rem;
}

.principle-static-list h4 {
  grid-column: 2;
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(0.86rem, 1.25vw, 1.05rem);
  line-height: 1.3;
}

.principle-static-list p {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: clamp(0.62rem, 0.85vw, 0.75rem);
  line-height: 1.45;
}

.book-number,
.book-kicker {
  margin: 0 0 18px;
  color: var(--blue);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.book-page h3 {
  margin: 0 0 18px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(27px, 3.7vw, 44px);
  line-height: 1.24;
  letter-spacing: 0.02em;
}

.book-page p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.95;
  letter-spacing: 0.01em;
}

.principle-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.principle-list > span,
.principle-list button {
  padding: 14px 16px;
  color: var(--navy);
  background: rgba(232, 246, 255, 0.9);
  border: 1px solid rgba(185, 223, 245, 0.9);
  border-radius: 8px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.principle-list button {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.principle-list button:hover,
.principle-list button:focus-visible {
  color: #fff;
  background: var(--blue);
  transform: translateX(4px);
}

.principle-list button i {
  margin-left: 10px;
  font-size: 1.15rem;
  font-style: normal;
  font-weight: 500;
}

.logo-page {
  display: grid;
  align-content: start;
  gap: 18px;
}

.flex-logo-lockup {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 0 0 6px;
}

.flex-group-full-logo {
  display: block;
  width: min(100%, 360px);
  height: auto;
  margin: 8px auto 12px;
}

.flex-logo-lockup small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.flex-logo-lockup strong {
  color: #4d5258;
  font-family: var(--font-en);
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
}

.flex-logo-lockup strong img {
  display: inline-block;
  width: 0.74em;
  height: 1.02em;
  margin-right: 7px;
  object-fit: contain;
  mix-blend-mode: multiply;
  vertical-align: -0.13em;
}

.principle-modal {
  width: min(760px, calc(100vw - 36px));
  max-height: 88vh;
  padding: 0;
  overflow: hidden;
  color: #102a43;
  border: 0;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 40px 120px rgba(5, 18, 36, 0.38);
}

.principle-modal::backdrop {
  background: rgba(7, 20, 38, 0.74);
  backdrop-filter: blur(10px);
}

.principle-modal[open] {
  animation: people-modal-in 240ms ease both;
}

.principle-modal-close {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 18px;
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  color: #fff;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 26, 49, 0.86);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.principle-modal-content {
  position: relative;
  min-height: 430px;
  padding: clamp(70px, 10vw, 110px) clamp(32px, 8vw, 80px);
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 8%, rgba(41, 168, 223, 0.2), transparent 32%),
    linear-gradient(145deg, #f8fcff, #e9f6ff);
}

.principle-modal-content::before {
  position: absolute;
  right: -0.08em;
  bottom: -0.2em;
  color: rgba(23, 105, 255, 0.055);
  content: "F";
  font-family: var(--font-en);
  font-size: clamp(180px, 36vw, 360px);
  font-weight: 900;
  line-height: 1;
}

.principle-modal-content > * {
  position: relative;
  z-index: 1;
}

.principle-modal-content > span {
  color: var(--blue);
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.principle-modal-content h2 {
  max-width: 590px;
  margin: 18px 0 30px;
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 1.22;
}

.principle-modal-content p {
  max-width: 590px;
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 800;
  line-height: 1.9;
}

body:has(.principle-modal[open]) {
  overflow: hidden;
}

@media (max-width: 600px) {
  .principle-modal {
    width: 100vw;
    max-width: none;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .principle-modal-content {
    display: grid;
    min-height: 100dvh;
    padding: 90px 24px 60px;
    align-content: center;
  }
}

.logo-copy {
  max-width: 430px;
}

.logo-copy .book-number {
  margin-bottom: 10px;
}

.logo-page h3 {
  margin-bottom: 12px;
  font-size: clamp(22px, 2.7vw, 32px);
  line-height: 1.38;
}

.logo-page p {
  font-size: 15px;
  line-height: 1.72;
}

.logo-mark-page {
  display: grid;
  align-content: center;
  gap: 12px;
  text-align: center;
}

.logo-mark-page p {
  font-size: 14px;
  line-height: 1.55;
}

.mark-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2vw, 22px);
}

.mark-flow > span {
  position: relative;
  display: grid;
  width: clamp(54px, 6vw, 74px);
  height: clamp(54px, 6vw, 74px);
  place-items: center;
  margin: 0 auto;
  color: var(--blue);
  font-family: var(--font-en);
  font-size: clamp(44px, 5.6vw, 66px);
  font-weight: 900;
  line-height: 1;
}

.mark-flow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mark-flow i {
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 12px solid rgba(99, 115, 128, 0.72);
}

.mark-turn {
  transform: rotate(-45deg);
}

.mark-turn::before,
.mark-turn::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(99, 115, 128, 0.72);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}

.mark-turn::before {
  right: -8px;
  top: 4px;
}

.mark-turn::after {
  left: -8px;
  bottom: 4px;
  transform: rotate(180deg);
}

.mark-heart {
  border-bottom: 5px solid var(--blue);
  border-left: 5px solid var(--blue);
}

.mark-heart::after {
  content: "(心)";
  position: absolute;
  left: 50%;
  bottom: -22px;
  color: rgba(99, 115, 128, 0.9);
  font-family: var(--font-ja);
  font-size: 13px;
  font-weight: 800;
  transform: translateX(-50%);
}

.official-mark-flow {
  display: grid;
  width: min(100%, 430px);
  margin: 0 auto;
  place-items: center;
}

.official-mark-flow img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.book-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 46px;
  height: 46px;
  color: transparent;
  background: var(--white);
  border: 1px solid rgba(214, 229, 240, 0.96);
  border-radius: 50%;
  box-shadow: 0 18px 34px rgba(7, 58, 114, 0.14);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform 0.2s ease, background 0.2s ease;
}

.book-arrow::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-top: 3px solid var(--blue);
  border-left: 3px solid var(--blue);
}

.book-arrow.prev {
  left: 0;
}

.book-arrow.prev::before {
  transform: rotate(-45deg);
}

.book-arrow.next {
  right: 0;
}

.book-arrow.next::before {
  transform: rotate(135deg);
}

.book-arrow:hover {
  background: #e8f6ff;
  transform: translateY(-50%) scale(1.06);
}

.credo-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.credo-progress span {
  width: 9px;
  height: 9px;
  background: rgba(18, 118, 189, 0.22);
  border-radius: 999px;
  transition: width 0.25s ease, background 0.25s ease;
}

.credo-progress span.active {
  width: 32px;
  background: var(--blue);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(300px, 1.08fr);
  gap: clamp(28px, 6vw, 76px);
  align-items: center;
}

.split.reverse {
  grid-template-columns: minmax(300px, 1.08fr) minmax(0, 0.92fr);
}

.split img {
  width: 100%;
  border-radius: 8px;
  box-shadow: var(--shadow-strong);
  transform: rotate(1.2deg);
}

.work-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 38px;
}

.scene-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 42px;
}

.scene-card {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  padding: clamp(24px, 3vw, 34px);
  color: var(--white);
  background:
    linear-gradient(155deg, rgba(7, 58, 114, 0.98), rgba(18, 118, 189, 0.9)),
    radial-gradient(circle at 18% 10%, rgba(41, 168, 223, 0.34), transparent 11rem);
  border-radius: 8px;
  box-shadow: var(--shadow-strong);
  transform-style: preserve-3d;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.scene-card::after {
  content: "";
  position: absolute;
  right: -48px;
  bottom: -48px;
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(41, 168, 223, 0.28);
  box-shadow: 0 0 0 24px rgba(255, 255, 255, 0.08);
}

.scene-card span {
  color: var(--yellow);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.scene-card h3 {
  position: relative;
  z-index: 1;
  margin: 14px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.44;
  letter-spacing: 0.02em;
}

.scene-card p {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.84);
  line-height: 2.05;
  letter-spacing: 0.01em;
}

.work-cards article,
.numbers-grid div {
  background: var(--white);
  border: 1px solid rgba(223, 229, 234, 0.88);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(7, 58, 114, 0.08);
}

.work-cards article {
  padding: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transform-style: preserve-3d;
}

.work-cards .future-card {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(237, 248, 255, 0.86)),
    radial-gradient(circle at 86% 12%, rgba(41, 168, 223, 0.22), transparent 9rem);
  border-style: dashed;
}

.work-cards .future-card::after {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -26px;
  width: 96px;
  aspect-ratio: 1;
  border: 1px solid rgba(18, 118, 189, 0.18);
  border-radius: 50%;
}

.work-cards .future-card small {
  display: inline-flex;
  margin-top: 18px;
  color: var(--blue);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-cards article:hover,
.attention-card:hover,
.scene-card:hover,
.message-box:hover,
.entry-box:hover {
  box-shadow: var(--shadow-strong);
}

.work-cards h3 {
  margin: 10px 0 12px;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.02em;
}

.work-cards p {
  color: var(--muted);
  line-height: 1.95;
  letter-spacing: 0.01em;
}

.values-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--sky), #f4fbff);
}

.values-section::before {
  content: "";
  position: absolute;
  right: -120px;
  top: 80px;
  width: 320px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(41, 168, 223, 0.24), transparent 68%);
  animation: morphFloat 8s ease-in-out infinite alternate;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 12px;
  max-width: 1060px;
  margin: 0 auto 24px;
}

.value-card {
  min-height: 86px;
  padding: 16px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-family: var(--font-ja);
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(7, 58, 114, 0.08);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.value-card.active,
.value-card:hover {
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
  transform: translateY(-4px);
}

.value-detail {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 48px);
  background: var(--white);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.value-detail h3 {
  margin: 8px 0 14px;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: 0.02em;
}

.value-detail p:last-child {
  color: var(--muted);
  line-height: 2.05;
  letter-spacing: 0.01em;
}

.principle-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 12%, rgba(41, 168, 223, 0.16), transparent 20rem),
    radial-gradient(circle at 92% 36%, rgba(41, 168, 223, 0.22), transparent 22rem),
    #ffffff;
}

.principle-section::before {
  content: "PRINCIPLE";
  position: absolute;
  left: -1vw;
  top: 5vw;
  color: rgba(7, 58, 114, 0.045);
  font-family: var(--font-en);
  font-size: clamp(70px, 15vw, 190px);
  font-weight: 800;
  letter-spacing: 0.04em;
  pointer-events: none;
  white-space: nowrap;
}

.principle-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 42px;
}

.principle-grid article {
  min-height: 260px;
  padding: clamp(22px, 3vw, 30px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 251, 255, 0.92)),
    radial-gradient(circle at 16% 12%, rgba(41, 168, 223, 0.14), transparent 8rem);
  border: 1px solid rgba(214, 229, 240, 0.92);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(7, 58, 114, 0.1);
  transform-style: preserve-3d;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.principle-grid article:hover {
  box-shadow: var(--shadow-strong);
}

.principle-grid span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--navy);
  background: linear-gradient(135deg, #e8f7ff, var(--yellow));
  border-radius: 50%;
  font-family: var(--font-en);
  font-weight: 800;
}

.principle-grid h3 {
  margin: 18px 0 12px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.principle-grid p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.95;
  letter-spacing: 0.01em;
}

.promise-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 14%, rgba(246, 195, 52, 0.24), transparent 26%),
    linear-gradient(135deg, var(--navy), #0b66a8 68%, #063354);
  color: var(--white);
}

.promise-section::after {
  content: "THINK PEOPLE FIRST";
  position: absolute;
  right: -2vw;
  bottom: -2vw;
  color: rgba(255, 255, 255, 0.08);
  font-size: clamp(48px, 11vw, 150px);
  font-weight: 900;
  white-space: nowrap;
}

.promise {
  max-width: 920px;
}

.promise span {
  color: #cceeff;
}

.promise p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 19px;
}

.people-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 16%, rgba(41, 168, 223, 0.14), transparent 20rem),
    #ffffff;
}

.people-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(112px, auto);
  gap: 12px;
  margin-top: 38px;
}

.people-tile {
  position: relative;
  margin: 0;
  padding: clamp(22px, 2.6vw, 30px);
  overflow: hidden;
  background:
    linear-gradient(180deg, #ffffff, #f2f9ff),
    radial-gradient(circle at 16% 0%, rgba(41, 168, 223, 0.16), transparent 9rem);
  border: 1px solid rgba(214, 229, 240, 0.92);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(7, 58, 114, 0.1);
  transform-style: preserve-3d;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.people-tile::before {
  content: "“";
  position: absolute;
  right: 18px;
  top: -18px;
  color: rgba(41, 168, 223, 0.34);
  font-size: 88px;
  font-weight: 900;
  line-height: 1;
}

.people-tile:hover {
  box-shadow: var(--shadow-strong);
}

.tile-large {
  grid-column: span 3;
  grid-row: span 2;
}

.tile-blue {
  grid-column: span 3;
  grid-row: span 1;
  color: var(--white);
  background:
    linear-gradient(135deg, rgba(7, 58, 114, 0.96), rgba(18, 118, 189, 0.9)),
    radial-gradient(circle at 88% 12%, rgba(41, 168, 223, 0.28), transparent 10rem);
}

.tile-quote {
  grid-column: span 2;
  grid-row: span 2;
}

.tile-small {
  grid-column: span 2;
}

.tile-wide {
  grid-column: span 4;
}

.people-tile blockquote {
  margin: 0;
  padding: 0;
  color: var(--navy);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 29px);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.tile-quote-with-photo {
  padding-top: clamp(218px, 25vw, 292px);
}

.people-tile-story-photo {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(196px, 22vw, 264px);
  object-fit: cover;
  object-position: center 66%;
}

.tile-quote-with-photo::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: clamp(196px, 22vw, 264px);
  background: linear-gradient(180deg, transparent 65%, rgba(8, 42, 76, 0.16));
  pointer-events: none;
}

.tile-quote-with-photo blockquote,
.tile-quote-with-photo .role,
.tile-quote-with-photo .people-card-action {
  position: relative;
  z-index: 1;
}

.people-tile span,
.role {
  display: inline-flex;
  margin: 0 0 12px;
  color: var(--yellow-deep);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.people-tile h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.people-tile p {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.82;
  letter-spacing: 0.01em;
}

.tile-large h3 {
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.28;
}

.tile-blue .role,
.tile-blue h3,
.tile-blue p {
  color: var(--white);
}

.tile-blue p {
  color: rgba(255, 255, 255, 0.82);
}

.tile-blue::before {
  color: rgba(255, 255, 255, 0.12);
}

.tile-small h3,
.tile-wide h3 {
  font-size: clamp(22px, 2.1vw, 30px);
}

.culture-tags {
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 36px;
}

.culture-tags span {
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-ja);
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 20px rgba(7, 58, 114, 0.08);
  animation: tagFloat 5s ease-in-out infinite;
}

.culture-tags span:nth-child(2n) {
  animation-delay: -1.8s;
}

.culture-tags span:nth-child(3n) {
  animation-delay: -3.2s;
}

.numbers-section {
  background:
    radial-gradient(circle at 12% 30%, rgba(41, 168, 223, 0.16), transparent 18rem),
    #f6fbff;
}

.numbers-page-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: min(1120px, calc(100% - 40px));
  margin: clamp(42px, 7vw, 80px) auto 0;
}

.numbers-page-links a {
  display: grid;
  min-height: 170px;
  padding: clamp(22px, 3vw, 34px);
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(7, 27, 53, 0.1);
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(7, 27, 53, 0.07);
  transition: transform 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.numbers-page-links a:hover,
.numbers-page-links a:focus-visible {
  color: #fff;
  background: var(--ink);
  transform: translateY(-4px);
}

.numbers-page-links small {
  color: #1769ff;
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: 0.1em;
}

.numbers-page-links strong {
  align-self: end;
  margin-top: 30px;
  font-size: clamp(1.15rem, 2.3vw, 1.65rem);
}

.numbers-page-links span {
  margin-top: 8px;
  font-size: 0.78rem;
}

.numbers-page-links .numbers-home-link {
  color: #fff;
  background: var(--ink);
}

.numbers-page-links .numbers-home-link small {
  color: #77c9ff;
}

.work-page-links {
  width: 100%;
  margin-top: clamp(52px, 8vw, 96px);
}

.people-page-links {
  width: 100%;
  margin-top: clamp(52px, 8vw, 96px);
}

.philosophy-page-links {
  width: 100%;
  margin-top: clamp(52px, 8vw, 96px);
}

.culture-compact-links {
  justify-content: center;
  margin-top: clamp(42px, 7vw, 72px);
}

.culture-faq-link {
  display: grid;
  max-width: 640px;
  margin: 26px auto 0;
  padding: 18px 4px 10px;
  grid-template-columns: 1fr auto;
  gap: 4px 22px;
  color: var(--navy);
  border-top: 1px solid rgba(16, 52, 93, 0.16);
  text-decoration: none;
}

.culture-faq-link > span {
  grid-column: 1 / -1;
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.culture-faq-link strong {
  font-size: 0.92rem;
}

.culture-faq-link small {
  align-self: center;
  color: var(--muted);
  font-size: 0.72rem;
  transition: color 0.2s ease, transform 0.2s ease;
}

.culture-faq-link:hover small {
  color: #1769ff;
  transform: translateX(4px);
}

@media (max-width: 700px) {
  .culture-compact-links {
    display: grid;
    grid-template-columns: 1fr;
  }

  .culture-compact-links .button {
    width: 100%;
  }

  .culture-faq-link {
    grid-template-columns: 1fr;
  }
}

/* Culture: 福利厚生は実写真の代わりに、人を支える仕組みを表す抽象ビジュアル */
.page-culture .culture-tags .benefits-tag-button::before {
  background:
    radial-gradient(circle at 25% 38%, rgba(255, 255, 255, 0.96) 0 9%, transparent 9.5%),
    radial-gradient(circle at 50% 29%, rgba(255, 255, 255, 0.78) 0 12%, transparent 12.5%),
    radial-gradient(circle at 73% 43%, rgba(255, 255, 255, 0.9) 0 8%, transparent 8.5%),
    radial-gradient(ellipse at 50% 122%, rgba(255, 255, 255, 0.4) 0 48%, transparent 48.5%),
    linear-gradient(135deg, #0e6f91, #5b7bc1 56%, #9a6daf);
  opacity: 1;
}

.page-culture .culture-tags .benefits-tag-button::after {
  position: absolute;
  z-index: 1;
  top: 24px;
  right: 24px;
  display: block;
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--font-en);
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  content: "CARE / SUPPORT";
}

/* Culture: give the title room before the six scene cards */
.page-culture .culture-editorial-hero + .culture-tags {
  margin-top: clamp(58px, 7vw, 96px);
}

/* Final spacing override: bring Culture choices into the first viewport sooner. */
.page-culture .culture-section {
  padding-top: clamp(58px, 6vw, 82px);
}

.page-culture .culture-explore-heading {
  margin-top: clamp(36px, 4vw, 56px);
}

@media (max-width: 760px) {
  .page-culture .culture-explore-heading {
    margin-top: 30px;
  }
}

/* Recruitment journey refinements */
.page-work .work-business-glance {
  display: none;
}

.work-scenes-preview {
  padding: clamp(72px, 8vw, 112px) clamp(20px, 6vw, 88px);
  background: linear-gradient(180deg, #f7fbfe 0%, #ffffff 100%);
  scroll-margin-top: 88px;
}

.work-scenes-heading {
  max-width: 880px;
  margin: 0 auto clamp(38px, 5vw, 64px);
  text-align: center;
}

.work-scenes-heading > p:first-child {
  color: #0876a7;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.work-scenes-heading h2 {
  margin: 14px 0 18px;
  color: #073a6d;
  font-size: clamp(2rem, 4.2vw, 4rem);
  line-height: 1.25;
}

.work-scenes-heading > p:last-child {
  color: #52687b;
  line-height: 1.9;
}

.work-scene-list {
  display: none;
  gap: clamp(26px, 4vw, 48px);
  max-width: 1120px;
  margin: 0 auto;
}

.work-attitude-flow {
  display: none;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 1.8vw, 24px);
  max-width: 1120px;
  margin: 0 auto;
}

.work-daily-panorama {
  display: none;
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #cfe2ef;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 20px 54px rgba(15, 64, 103, 0.09);
}

.work-behind-scenes {
  display: none;
  grid-template-columns: minmax(0, 1.28fr) minmax(320px, .72fr);
  align-items: center;
  gap: clamp(34px, 5vw, 76px);
  max-width: 1180px;
  margin: 0 auto;
}

.work-desk-scene {
  display: none;
  position: relative;
  max-width: 1120px;
  min-height: 650px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 50%, rgba(33, 151, 184, .15) 0 22%, transparent 22.5%),
    radial-gradient(circle at 50% 50%, transparent 0 39%, rgba(22, 134, 170, .14) 39.3% 39.7%, transparent 40%),
    linear-gradient(145deg, #f2f9fc, #ffffff 48%, #edf4fa);
}

.work-positive-illustration { padding:clamp(34px,5vw,72px) clamp(18px,4vw,56px); background:#f7fbfd; }
.work-positive-illustration > :not(.work-positive-visual) { display:none !important; }
.work-positive-visual { width:min(1180px,100%); margin:0 auto; overflow:hidden; border-radius:clamp(22px,3vw,40px); box-shadow:0 22px 70px rgba(8,67,112,.12); }
.work-positive-visual img { display:block; width:100%; height:auto; }
.work-positive-visual.work-story { overflow:visible; border-radius:0; box-shadow:none; }
.page-work .work-compact-hero { grid-template-columns:1fr; }
.page-work .work-compact-copy { width:min(900px,100%); }
.page-work .work-scope-art { display:none; }
.page-work .work-compact-hero { position:relative; isolation:isolate; }
.page-work .work-compact-hero::before { position:absolute; right:-.04em; bottom:-.2em; z-index:-1; color:rgba(9,102,157,.055); font-family:var(--font-en); font-size:clamp(11rem,29vw,32rem); font-weight:900; line-height:.8; letter-spacing:-.09em; content:"WORK"; }
.page-work .work-compact-hero::after { position:absolute; right:4vw; bottom:16%; z-index:-1; width:min(44vw,640px); height:min(22vw,280px); border-top:2px solid rgba(20,145,177,.24); border-radius:50%; transform:rotate(-8deg); content:""; }
.page-work .work-compact-copy { position:relative; z-index:1; padding:clamp(28px,4vw,52px) 0; }
@media (max-width:760px) { .page-work .work-compact-hero::before { right:-.08em; bottom:.08em; font-size:clamp(8rem,42vw,14rem); } .page-work .work-compact-hero::after { right:-16vw; bottom:17%; width:90vw; height:42vw; } }
.page-work .work-compact-hero {
  min-height: min(610px, 76vh);
  padding-top: clamp(96px, 10vw, 132px);
  padding-bottom: clamp(18px, 3vw, 38px);
}
.page-work .work-compact-hero::before {
  right: 1vw;
  bottom: -0.08em;
  font-size: clamp(9rem, 22vw, 24rem);
}
.page-work .work-positive-illustration {
  padding-top: clamp(8px, 1.5vw, 22px);
}
@media (max-width:760px) {
  .page-work .work-compact-hero {
    min-height: 560px;
    padding-top: 88px;
    padding-bottom: 14px;
  }
  .page-work .work-compact-hero::before {
    right: -0.04em;
    bottom: 0.12em;
    font-size: clamp(7rem, 36vw, 11rem);
  }
}
.page-culture .culture-editorial-hero + .culture-tags {
  margin-top: clamp(58px, 7vw, 96px);
}
.work-trouble-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.work-trouble-tags span { padding:7px 11px; color:#07549a; background:#edf7fc; border:1px solid rgba(7,84,154,.16); border-radius:999px; font-size:.72rem; font-weight:800; }

.work-you-map {
  position: relative;
  max-width: 1120px;
  min-height: 720px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 36px;
  background: radial-gradient(circle at 50% 48%, #e7f6fb 0 16%, #f7fbfd 38%, #fff 70%);
}

.work-you-center {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 230px;
  height: 230px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #07549a, #078899);
  box-shadow: 0 24px 50px rgba(7, 84, 154, .25);
  text-align: center;
}

.work-you-center span { position:absolute; top:42px; font-family:var(--font-en); font-size:.68rem; font-weight:900; letter-spacing:.2em; opacity:.78; }
.work-you-center strong { font-size:1.18rem; line-height:1.65; }
.work-you-center i { position:absolute; bottom:38px; width:38px; height:38px; border:2px solid rgba(255,255,255,.8); border-radius:50%; }
.work-you-center i::before { position:absolute; top:7px; left:50%; width:10px; height:10px; transform:translateX(-50%); border:2px solid #fff; border-radius:50%; content:""; }
.work-you-center i::after { position:absolute; bottom:6px; left:50%; width:20px; height:10px; transform:translateX(-50%); border:2px solid #fff; border-bottom:0; border-radius:12px 12px 0 0; content:""; }

.work-you-orbit { position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); border:1px dashed #acd1e0; border-radius:50%; }
.work-you-orbit-a { width:670px; height:430px; }
.work-you-orbit-b { width:920px; height:610px; opacity:.65; }

.work-you-node {
  position: absolute;
  z-index: 3;
  width: 240px;
  padding: 20px 22px 20px 86px;
  border: 1px solid #d4e6ef;
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 34px rgba(11, 66, 106, .08);
}

.work-you-node::after { position:absolute; top:50%; width:90px; height:1px; background:#73b3cb; content:""; }
.work-you-node svg { position:absolute; top:22px; left:22px; width:46px; height:46px; fill:none; stroke:#0876a7; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.work-you-node > span { color:#1686aa; font-family:var(--font-en); font-size:.62rem; font-weight:900; letter-spacing:.15em; }
.work-you-node strong { display:block; margin:5px 0 6px; color:#073a6d; font-size:1rem; }
.work-you-node p { margin:0; color:#52687b; font-size:.72rem; line-height:1.6; }
.work-you-node-01 { top:62px; left:64px; }
.work-you-node-01::after { right:-78px; transform:rotate(22deg); transform-origin:left; }
.work-you-node-02 { top:60px; right:62px; }
.work-you-node-02::after { left:-78px; transform:rotate(-22deg); transform-origin:right; }
.work-you-node-03 { top:292px; left:30px; }
.work-you-node-03::after { right:-90px; }
.work-you-node-04 { top:292px; right:30px; }
.work-you-node-04::after { left:-90px; }
.work-you-node-05 { bottom:42px; left:50%; transform:translateX(-50%); }
.work-you-node-05::after { top:-72px; left:50%; width:1px; height:72px; }

.work-you-message { max-width:760px; margin:34px auto 0; text-align:center; }
.work-you-message strong { display:block; color:#073a6d; font-size:clamp(1.35rem,2.2vw,2rem); }
.work-you-message p { margin:12px 0 0; color:#52687b; line-height:1.8; }

.work-desk-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 330px;
  height: 240px;
  transform: translate(-50%, -50%);
  border-radius: 24px;
  background: linear-gradient(145deg, #0a5c91, #078899);
  box-shadow: 0 28px 58px rgba(7, 71, 112, .22);
}

.work-desk-core strong {
  position: absolute;
  top: 34px;
  left: 36px;
  color: rgba(255,255,255,.84);
  font-family: var(--font-en);
  font-size: .72rem;
  letter-spacing: .18em;
  line-height: 1.7;
}

.work-desk-screen { position: absolute; top: 34px; right: 36px; width: 150px; height: 92px; border: 7px solid #e7f5fa; border-radius: 9px; background: #fff; }
.work-desk-screen::after { position:absolute; left:50%; bottom:-25px; width:55px; height:18px; transform:translateX(-50%); border-bottom:5px solid #d7edf4; content:""; }
.work-desk-keyboard { position:absolute; right:45px; bottom:48px; width:132px; height:34px; transform:skew(-10deg); border-radius:5px; background:rgba(255,255,255,.72); }
.work-desk-phone { position:absolute; left:48px; bottom:45px; width:38px; height:72px; border:5px solid rgba(255,255,255,.84); border-radius:10px; }
.work-desk-note { position:absolute; left:106px; bottom:50px; width:42px; height:42px; transform:rotate(-7deg); background:#f5cd63; }
.work-desk-chair { position:absolute; left:50%; bottom:-70px; width:116px; height:100px; transform:translateX(-50%); border-radius:55px 55px 12px 12px; background:#073a6d; }

.work-moment {
  position: absolute;
  width: 238px;
  padding: 22px 24px;
  border: 1px solid #cfe2ec;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 13px 30px rgba(14, 65, 104, .08);
}

.work-moment::after { position:absolute; width:54px; height:1px; background:#8fc1d4; content:""; }
.work-moment span { color:#1686aa; font-family:var(--font-en); font-size:.66rem; font-weight:900; letter-spacing:.16em; }
.work-moment strong { display:block; margin:9px 0 7px; color:#073a6d; font-size:1.08rem; }
.work-moment p { margin:0; color:#52687b; font-size:.76rem; line-height:1.65; }
.work-moment-01 { top:46px; left:46px; }
.work-moment-01::after { right:-54px; bottom:32px; transform:rotate(18deg); transform-origin:left; }
.work-moment-02 { top:42px; right:42px; }
.work-moment-02::after { left:-54px; bottom:30px; transform:rotate(-18deg); transform-origin:right; }
.work-moment-03 { top:270px; left:22px; }
.work-moment-03::after { right:-54px; top:50%; }
.work-moment-04 { top:270px; right:22px; }
.work-moment-04::after { left:-54px; top:50%; }
.work-moment-05 { left:50%; bottom:32px; transform:translateX(-50%); }
.work-moment-05::after { top:-54px; left:50%; width:1px; height:54px; }

.work-desk-message {
  max-width: 840px;
  margin: 38px auto 0;
  color: #073a6d;
  font-size: clamp(1.08rem, 1.8vw, 1.45rem);
  font-weight: 800;
  line-height: 1.9;
  text-align: center;
}

.work-behind-stage {
  position: relative;
  filter: drop-shadow(0 18px 34px rgba(16, 65, 104, .1));
}

.work-behind-stage svg { display: block; width: 100%; height: auto; }

.work-front-label,
.work-back-label {
  position: absolute;
  left: 6%;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.work-front-label { top: 7%; color: #07549a; background: rgba(255,255,255,.78); }
.work-back-label { bottom: 4%; color: #fff; background: #07549a; }

.work-behind-copy > p {
  margin: 0 0 18px;
  color: #1686aa;
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.8;
}

.work-behind-copy h3 {
  margin: 0;
  color: #073a6d;
  font-size: clamp(1.65rem, 2.65vw, 2.65rem);
  line-height: 1.5;
}

.work-behind-actions {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

.work-behind-actions span {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid #d2e2ec;
  color: #52687b;
  font-size: .86rem;
  line-height: 1.6;
}

.work-behind-actions b { color: #07549a; font-size: 1.05rem; }

.work-day-moments {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 260px;
  padding: 42px 36px 34px;
  background: linear-gradient(105deg, #eef8fc 0%, #fff9ea 36%, #fff4e8 68%, #e8effa 100%);
}

.work-day-moments::before {
  position: absolute;
  right: 7%;
  bottom: -72px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  content: "";
}

.work-day-moments > div {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 0 22px;
  border-left: 1px solid rgba(7, 76, 126, 0.13);
}

.work-day-moments > div:first-child { border-left: 0; }
.work-day-moments span {
  color: #1686aa;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.work-day-moments strong { color: #073a6d; font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.65; }

.work-support-layer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  color: #fff;
  background: linear-gradient(90deg, #07549a 0 50%, #168f9a 50% 100%);
}

.work-support-layer > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 22px;
  min-height: 118px;
  padding: 26px 34px;
}

.work-support-layer > div + div { border-left: 1px solid rgba(255, 255, 255, 0.3); }
.work-support-layer span { padding: 7px 11px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; font-size: .72rem; font-weight: 900; white-space: nowrap; }
.work-support-layer strong { font-size: clamp(.9rem, 1.35vw, 1.08rem); line-height: 1.7; }

.work-attitude-flow > div {
  min-height: 230px;
  padding: 30px 24px;
  border: 1px solid #cfe2ef;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 36px rgba(15, 64, 103, 0.07);
}

.work-attitude-flow span {
  color: #1686aa;
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.work-attitude-flow strong {
  display: block;
  margin: 22px 0 15px;
  color: #073a6d;
  font-size: clamp(1.55rem, 2.3vw, 2.2rem);
}

.work-attitude-flow p {
  margin: 0;
  color: #52687b;
  font-size: 0.88rem;
  line-height: 1.8;
}

.work-attitude-flow > i {
  color: #54a4be;
  font-size: 1.35rem;
  font-style: normal;
}

.work-scene-row {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr);
  overflow: hidden;
  border: 1px solid #d9e9f3;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 64, 103, 0.09);
}

.work-scene-row.work-scene-support .work-scene-visual { order: 2; }
.work-scene-row.work-scene-support .work-scene-copy { order: 1; }

.work-scene-row figure {
  min-height: 360px;
  margin: 0;
}

.work-scene-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-scene-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 360px;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.work-scene-visual::before,
.work-scene-visual::after {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  content: "";
}

.work-scene-visual::before { width: 310px; height: 310px; }
.work-scene-visual::after { width: 470px; height: 470px; }

.work-scene-visual-insurance {
  background: linear-gradient(145deg, #074b85 0%, #1688af 100%);
}

.work-scene-visual-support {
  background: linear-gradient(145deg, #087b8d 0%, #43a6a2 100%);
}

.work-scene-visual strong {
  position: relative;
  z-index: 2;
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.4;
  text-align: center;
}

.work-scene-visual > span {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.76rem;
  font-weight: 900;
  backdrop-filter: blur(5px);
}

.work-visual-home,
.work-visual-voice { top: 30px; left: 34px; }
.work-visual-shield,
.work-visual-response { right: 34px; bottom: 30px; }
.work-visual-line,
.work-visual-arrow {
  top: 50%;
  right: 24px;
  width: 48px !important;
  height: 48px !important;
  transform: translateY(-50%);
  font-size: 1.2rem !important;
}

.work-visual-line::before { content: "＋"; }

.work-scene-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 5vw, 62px);
}

.work-scene-copy > span {
  color: #1686aa;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.work-scene-copy h3 {
  margin: 14px 0 18px;
  color: #073a6d;
  font-size: clamp(1.55rem, 2.7vw, 2.5rem);
  line-height: 1.38;
}

.work-scene-copy p {
  margin: 0;
  color: #52687b;
  line-height: 1.85;
}

.work-scene-copy ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.work-scene-copy li {
  list-style: none;
  padding: 7px 12px;
  border-radius: 999px;
  color: #07549a;
  background: #eaf5fb;
  font-size: 0.75rem;
  font-weight: 800;
}

.work-scenes-next {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  margin: 42px auto 0;
  color: #07549a;
  font-weight: 800;
  text-decoration: none;
}

.work-scenes-next p { margin: 0; color: #52687b; }
.work-scenes-next a { color: #07549a; font-weight: 900; text-decoration: none; }

.people-story-takeaway {
  max-width: 760px;
  margin: 18px 0 30px;
  padding: 17px 22px;
  border-left: 4px solid #1487ad;
  border-radius: 0 12px 12px 0;
  color: #07549a;
  background: linear-gradient(90deg, #eaf7fb, #f8fbfd);
  font-size: clamp(0.95rem, 1.45vw, 1.16rem);
  font-weight: 800;
  line-height: 1.75;
}

.page-culture .culture-section {
  padding-top: clamp(58px, 6vw, 82px);
}

.page-culture .culture-explore-heading {
  margin-top: clamp(36px, 4vw, 56px);
}

@media (max-width: 760px) {
  .work-scenes-preview { padding: 58px 18px; }
  .work-scene-row { grid-template-columns: 1fr; border-radius: 20px; }
  .work-scene-row.work-scene-support .work-scene-visual,
  .work-scene-row.work-scene-support .work-scene-copy { order: initial; }
  .work-scenes-next { flex-direction: column; text-align: center; }
  .work-attitude-flow { grid-template-columns: 1fr; }
  .work-attitude-flow > div { min-height: auto; }
  .work-attitude-flow > i { transform: rotate(90deg); text-align: center; }
  .work-day-moments { grid-template-columns: 1fr 1fr; min-height: 0; padding: 28px 20px; }
  .work-day-moments > div { min-height: 150px; gap: 28px; padding: 16px; }
  .work-support-layer { grid-template-columns: 1fr; background: #07549a; }
  .work-support-layer > div + div { border-top: 1px solid rgba(255,255,255,.3); border-left: 0; background: #168f9a; }
  .work-support-layer > div { grid-template-columns: 1fr; gap: 12px; min-height: auto; }
  .work-behind-scenes { grid-template-columns: 1fr; gap: 30px; }
  .work-behind-copy { padding: 0 8px; }
  .work-desk-scene { display:grid; grid-template-columns:1fr; gap:12px; min-height:0; padding:22px; border-radius:24px; }
  .work-desk-core { position:relative; top:auto; left:auto; width:100%; height:210px; transform:none; }
  .work-moment { position:relative; inset:auto; width:auto; }
  .work-moment::after { display:none; }
  .work-moment-05 { transform:none; }
  .work-you-map { display:grid; gap:12px; min-height:0; padding:22px; border-radius:24px; }
  .work-you-center { position:relative; top:auto; left:auto; width:190px; height:190px; margin:0 auto 10px; transform:none; }
  .work-you-node { position:relative; inset:auto; width:auto; min-height:104px; transform:none; }
  .work-you-node::after,
  .work-you-orbit { display:none; }
  .work-scene-row figure,
  .work-scene-visual { min-height: 230px; }
  .work-scene-copy { padding: 28px 24px 32px; }
  .page-culture .culture-explore-heading { margin-top: 30px; }
}

/* Work: product-level understanding before the group structure */
.work-scope-art {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border: 1px solid rgba(7, 80, 145, 0.12);
  border-radius: 48% 52% 44% 56% / 54% 42% 58% 46%;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.98) 0 18%, transparent 18.5%),
    radial-gradient(circle at 50% 48%, rgba(72,166,220,.12) 0 38%, transparent 38.5%),
    linear-gradient(145deg, #eef9ff 0%, #fff 48%, #edf8f7 100%);
  box-shadow: 0 30px 80px rgba(14, 79, 132, 0.12);
}

.scope-home {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  width: 142px;
  height: 142px;
  place-content: center;
  text-align: center;
  transform: translate(-50%, -50%);
}

.scope-home span {
  position: relative;
  width: 56px;
  height: 45px;
  margin: 12px auto 10px;
  border: 4px solid #0874ba;
  border-top: 0;
  border-radius: 4px;
}

.scope-home span::before {
  position: absolute;
  top: -22px;
  left: 5px;
  width: 39px;
  height: 39px;
  border-top: 4px solid #0874ba;
  border-left: 4px solid #0874ba;
  content: "";
  transform: rotate(45deg);
}

.scope-home span::after {
  position: absolute;
  right: 8px;
  bottom: 0;
  width: 13px;
  height: 24px;
  background: #40aec0;
  content: "";
}

.scope-home > svg {
  display: block;
  width: 58px;
  height: 58px;
  margin: 2px auto 8px;
  overflow: visible;
  color: #0874ba;
}

.scope-home strong {
  color: #063e78;
  font-size: 1.1rem;
  letter-spacing: .12em;
}

.scope-home small {
  margin-top: 3px;
  color: #51809d;
  font-family: var(--font-en);
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .2em;
}

.scope-item {
  position: absolute;
  z-index: 4;
  display: grid;
  width: 82px;
  height: 82px;
  align-content: center;
  justify-items: center;
  gap: 7px;
  color: #07538c;
  border: 1px solid rgba(9, 112, 174, .16);
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  box-shadow: 0 14px 32px rgba(8, 68, 114, .11);
}

.scope-item i {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  color: #1784bf;
}

.scope-item svg {
  display: block;
  width: 25px;
  height: 25px;
  overflow: visible;
  color: #1681bb;
  vector-effect: non-scaling-stroke;
}

.scope-water svg,
.scope-equipment svg { color: #2597a7; }

.scope-theft svg,
.scope-call svg { color: #4b76ab; }

.scope-fire i {
  width: 15px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 70% 35% 65% 45%;
  transform: rotate(45deg);
}
.scope-fire i::after {
  position: absolute;
  right: 3px;
  bottom: 2px;
  width: 5px;
  height: 8px;
  border-left: 1px solid currentColor;
  border-radius: 50%;
  content: "";
}

.scope-water i {
  width: 15px;
  height: 20px;
  border: 2px solid currentColor;
  border-radius: 70% 35% 65% 45%;
  transform: rotate(45deg);
}

.scope-theft i {
  width: 18px;
  height: 15px;
  margin-top: 5px;
  border: 2px solid currentColor;
  border-radius: 3px;
}
.scope-theft i::before {
  position: absolute;
  top: -9px;
  left: 3px;
  width: 8px;
  height: 9px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  content: "";
}
.scope-theft i::after {
  position: absolute;
  top: 5px;
  left: 7px;
  width: 3px;
  height: 5px;
  border-radius: 3px;
  background: currentColor;
  content: "";
}

.scope-key i::before {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 9px;
  height: 9px;
  border: 2px solid currentColor;
  border-radius: 50%;
  content: "";
}
.scope-key i::after {
  position: absolute;
  top: 11px;
  left: 10px;
  width: 12px;
  height: 2px;
  background: currentColor;
  box-shadow: 6px 3px 0 -0.3px currentColor;
  content: "";
  transform: rotate(45deg);
  transform-origin: left center;
}

.scope-equipment i {
  border: 2px solid currentColor;
  border-radius: 50%;
}
.scope-equipment i::before {
  position: absolute;
  inset: 5px;
  border: 2px solid currentColor;
  border-radius: 50%;
  content: "";
}
.scope-equipment i::after {
  position: absolute;
  top: -4px;
  left: 7px;
  width: 3px;
  height: 26px;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  content: "";
  opacity: .32;
  transform: rotate(45deg);
}

.scope-call i {
  border: 2px solid currentColor;
  border-radius: 50%;
}
.scope-call i::before {
  position: absolute;
  top: 3px;
  left: 8px;
  width: 2px;
  height: 8px;
  border-radius: 2px;
  background: currentColor;
  content: "";
}
.scope-call i::after {
  position: absolute;
  bottom: 3px;
  left: 8px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.scope-fire { top: 12%; left: 44%; }
.scope-water { top: 24%; right: 10%; }
.scope-theft { right: 15%; bottom: 14%; }
.scope-key { bottom: 9%; left: 43%; }
.scope-equipment { bottom: 18%; left: 10%; }
.scope-call { top: 20%; left: 9%; }

.scope-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px dashed rgba(9, 117, 179, .24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: work-scope-spin 42s linear infinite;
}

.scope-ring-one { width: 66%; height: 66%; }
.scope-ring-two { width: 88%; height: 88%; animation-direction: reverse; animation-duration: 58s; }

@keyframes work-scope-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.work-visual-flow.work-service-overview {
  display: block;
  padding: clamp(76px, 10vw, 140px) max(5vw, 24px);
  background: #f7fbfe;
}

.service-overview-heading {
  max-width: 1120px;
  margin: 0 auto clamp(36px, 5vw, 68px);
}

.service-overview-heading p {
  margin: 0 0 12px;
  color: #1476b6;
  font-family: var(--font-en);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .2em;
}

.service-overview-heading h2 {
  margin: 0;
  color: #073d73;
  font-size: clamp(2rem, 4.2vw, 4.5rem);
  line-height: 1.18;
  letter-spacing: -.03em;
}

.service-overview-grid {
  display: grid;
  max-width: 1120px;
  margin: 0 auto;
  gap: clamp(18px, 3vw, 36px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-overview-card {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  padding: clamp(30px, 4vw, 54px);
  border-radius: 34px;
  box-shadow: 0 24px 70px rgba(11, 66, 108, .12);
}

.service-insurance { background: linear-gradient(145deg, #e7f2ff, #f9fcff); }
.service-support { background: linear-gradient(145deg, #e5f8f4, #fbfffe); }

.service-card-copy { position: relative; z-index: 2; }
.service-card-copy small {
  color: #1476b6;
  font-family: var(--font-en);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .18em;
}
.service-support .service-card-copy small { color: #168b82; }
.service-card-copy > span {
  float: right;
  color: rgba(7, 61, 115, .18);
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 900;
}
.service-card-copy h3 {
  margin: 22px 0 16px;
  color: #063d72;
  font-size: clamp(1.55rem, 2.7vw, 2.6rem);
  line-height: 1.32;
}
.service-card-copy p {
  max-width: 30em;
  margin: 0;
  color: #3d6078;
  line-height: 1.9;
}

.service-scene-list {
  position: absolute;
  right: clamp(24px, 4vw, 48px);
  bottom: clamp(28px, 4vw, 48px);
  left: clamp(24px, 4vw, 48px);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-scene-list span {
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: #154c76;
  border: 1px solid rgba(17, 103, 162, .13);
  border-radius: 16px;
  background: rgba(255,255,255,.8);
  font-size: .86rem;
  font-weight: 800;
}

.service-scene-list i {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border: 3px solid #228aca;
  border-radius: 50% 50% 50% 12%;
  transform: rotate(45deg);
}
.service-support .service-scene-list i { border-color: #28a79a; }

.service-overview-note {
  margin: 46px auto 18px;
  color: #557086;
  text-align: center;
  font-size: .85rem;
}

.work-service-overview .work-flow-to-map {
  display: flex;
  width: max-content;
  margin: 0 auto;
}

@media (max-width: 760px) {
  .work-scope-art { min-height: 370px; border-radius: 38px; }
  .scope-home { transform: translate(-50%, -50%) scale(.84); }
  .scope-item { width: 64px; height: 64px; font-size: .7rem; }
  .scope-fire { top: 9%; }
  .scope-water { right: 5%; }
  .scope-theft { right: 8%; bottom: 10%; }
  .scope-key { bottom: 6%; }
  .scope-equipment { bottom: 13%; left: 5%; }
  .scope-call { top: 16%; left: 4%; }
  .service-overview-grid { grid-template-columns: 1fr; }
  .service-overview-card { min-height: 470px; border-radius: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .scope-ring { animation: none; }
}

/* Work: editorial paths instead of company-like cards */
.work-service-paths {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 49.94%, rgba(14, 104, 165, .1) 49.94% 50.06%, transparent 50.06%),
    #f9fcfe !important;
}

.work-service-paths::before {
  position: absolute;
  top: 220px;
  left: 50%;
  width: min(88vw, 1180px);
  height: min(88vw, 1180px);
  border: 1px solid rgba(23, 126, 180, .09);
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
}

.service-path-list {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
}

.service-path {
  display: grid;
  min-height: 270px;
  align-items: center;
  gap: clamp(26px, 5vw, 74px);
  padding: clamp(38px, 6vw, 72px) 0;
  border-top: 1px solid rgba(7, 61, 115, .2);
  grid-template-columns: 110px minmax(270px, 1.15fr) minmax(260px, .85fr);
}

.service-path-support { border-bottom: 1px solid rgba(7, 61, 115, .2); }

.service-path-number {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-path-number small {
  color: #1476b6;
  font-family: var(--font-en);
  font-size: .59rem;
  font-weight: 900;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
}

.service-path-support .service-path-number small { color: #168b82; }

.service-path-number b {
  color: rgba(7, 61, 115, .17);
  font-family: var(--font-en);
  font-size: clamp(2.6rem, 5vw, 5rem);
  font-weight: 800;
  line-height: 1;
}

.service-path-copy h3 {
  margin: 0 0 18px;
  color: #063d72;
  font-size: clamp(1.75rem, 3.2vw, 3.25rem);
  line-height: 1.3;
  letter-spacing: -.025em;
}

.service-path-copy p {
  max-width: 34em;
  margin: 0;
  color: #42647b;
  line-height: 1.9;
}

.service-path-scenes {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-path-scenes span {
  position: relative;
  display: flex;
  min-height: 86px;
  align-items: center;
  padding: 14px 14px 14px 32px;
  color: #174f78;
  border-bottom: 1px solid rgba(7, 91, 148, .16);
  font-size: .85rem;
  font-weight: 800;
}

.service-path-scenes span:nth-child(odd) { border-right: 1px solid rgba(7, 91, 148, .16); }
.service-path-scenes span:nth-last-child(-n+2) { border-bottom: 0; }

.service-path-scenes span::before {
  position: absolute;
  left: 10px;
  width: 9px;
  height: 9px;
  border: 2px solid #1884c4;
  border-radius: 50%;
  content: "";
}

.service-path-support .service-path-scenes span::before { border-color: #239e94; }

.service-path-connector {
  display: flex;
  width: min(520px, 78%);
  align-items: center;
  gap: 18px;
  margin: -1px auto;
  color: #6a8293;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  white-space: nowrap;
}

.service-path-connector i {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #41a7c5);
}

.service-path-connector i:last-child { transform: rotate(180deg); }

@media (max-width: 760px) {
  .work-service-paths {
    background: #f9fcfe !important;
  }

  .service-path {
    min-height: 0;
    gap: 22px 18px;
    grid-template-columns: 52px 1fr;
  }

  .service-path-number { grid-row: 1 / 3; }
  .service-path-number small { writing-mode: vertical-rl; }
  .service-path-copy { grid-column: 2; }
  .service-path-scenes { grid-column: 2; }
  .service-path-scenes span { min-height: 62px; padding-left: 25px; font-size: .75rem; }
  .service-path-scenes span::before { left: 7px; }
  .service-path-connector { width: 82%; gap: 10px; }
}

/* Work: compact illustrated bridge that hands attention to the company map */
.work-business-glance {
  position: relative;
  overflow: hidden;
  padding: clamp(62px, 8vw, 100px) max(5vw, 24px) clamp(48px, 6vw, 76px);
  background: #f8fbfd;
}

.business-glance-heading {
  max-width: 1080px;
  margin: 0 auto clamp(30px, 4vw, 46px);
  text-align: center;
}

.business-glance-heading p,
.group-map-heading p {
  margin: 0 0 10px;
  color: #1977b3;
  font-family: var(--font-en);
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .2em;
}

.business-glance-heading h2 {
  margin: 0;
  color: #0b4478;
  font-size: clamp(1.45rem, 2.5vw, 2.45rem);
  letter-spacing: -.02em;
}

.business-glance-visual {
  position: relative;
  display: grid;
  max-width: 960px;
  min-height: 250px;
  align-items: center;
  gap: clamp(30px, 6vw, 90px);
  margin: 0 auto;
  grid-template-columns: 1fr 150px 1fr;
}

.business-glance-visual::before,
.business-glance-visual::after {
  position: absolute;
  z-index: 0;
  top: 50%;
  width: calc(50% - 76px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31, 137, 190, .42));
  content: "";
}

.business-glance-visual::before { left: 0; }
.business-glance-visual::after { right: 0; transform: rotate(180deg); }

.glance-role,
.glance-home {
  position: relative;
  z-index: 1;
  text-align: center;
}

.glance-symbol {
  position: relative;
  display: grid;
  width: 76px;
  height: 76px;
  margin: 0 auto 17px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 12px 32px rgba(11, 74, 119, .1);
}

.glance-shield i {
  width: 34px;
  height: 40px;
  border: 3px solid #1683c6;
  border-radius: 16px 16px 21px 21px;
  clip-path: polygon(50% 0,100% 15%,90% 74%,50% 100%,10% 74%,0 15%);
}

.glance-shield i::before,
.glance-shield i::after {
  position: absolute;
  top: 36px;
  left: 31px;
  width: 14px;
  height: 3px;
  background: #1683c6;
  content: "";
}
.glance-shield i::after { transform: rotate(90deg); }

.glance-tool i {
  width: 35px;
  height: 12px;
  border: 3px solid #249b91;
  border-radius: 999px;
  transform: rotate(-42deg);
}

.glance-tool i::before {
  position: absolute;
  top: 27px;
  left: 23px;
  width: 19px;
  height: 19px;
  border: 5px solid #249b91;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
}

.glance-role small {
  display: block;
  color: #668296;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.glance-role h3 {
  margin: 5px 0 8px;
  color: #083f73;
  font-size: clamp(1.25rem, 2vw, 1.9rem);
}
.glance-role p {
  margin: 0;
  color: #577287;
  font-size: .75rem;
  line-height: 1.7;
}

.glance-home {
  display: grid;
  width: 138px;
  height: 138px;
  place-content: center;
  border: 1px solid rgba(19, 120, 177, .16);
  border-radius: 50%;
  background: linear-gradient(145deg, #fff, #e9f6fb);
  box-shadow: 0 18px 50px rgba(16, 91, 138, .12);
}
.glance-home i {
  position: relative;
  width: 42px;
  height: 34px;
  margin: 7px auto 9px;
  border: 3px solid #177db7;
  border-top: 0;
}
.glance-home i::before {
  position: absolute;
  top: -17px;
  left: 4px;
  width: 29px;
  height: 29px;
  border-top: 3px solid #177db7;
  border-left: 3px solid #177db7;
  content: "";
  transform: rotate(45deg);
}
.glance-home strong { color: #0b477c; font-size: .85rem; letter-spacing: .14em; }

.business-glance-next {
  margin-top: clamp(28px, 4vw, 44px);
  text-align: center;
}
.business-glance-next p { margin: 0 0 13px; color: #647d8f; font-size: .78rem; }
.business-glance-next a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #096caf;
  border-bottom: 1px solid rgba(9, 108, 175, .35);
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
}

.group-map-heading {
  max-width: 1120px;
  margin: 0 auto clamp(34px, 5vw, 64px);
  text-align: center;
}
.group-map-heading h2 {
  margin: 0 0 14px;
  color: #063d72;
  font-size: clamp(2.25rem, 5vw, 5.1rem);
  letter-spacing: -.04em;
}
.group-map-heading span { color: #587286; font-size: .84rem; line-height: 1.8; }

@media (max-width: 700px) {
  .business-glance-visual {
    min-height: 0;
    gap: 18px 10px;
    grid-template-columns: 1fr 86px 1fr;
  }
  .business-glance-visual::before,
  .business-glance-visual::after { width: calc(50% - 43px); }
  .glance-symbol { width: 58px; height: 58px; }
  .glance-home { width: 82px; height: 82px; }
  .glance-home i { width: 28px; height: 23px; margin-top: 12px; }
  .glance-home i::before { top: -12px; left: 3px; width: 19px; height: 19px; }
  .glance-home strong { font-size: .68rem; }
  .glance-role p { font-size: .62rem; }
  .glance-role h3 { font-size: 1rem; }
  .glance-role small { font-size: .55rem; }
}

/* Work compact visual story */
.work-version-one { display: none !important; }

.work-compact-hero {
  min-height: min(820px, 92vh);
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(440px, 1.08fr);
  align-items: center;
  gap: clamp(48px, 7vw, 110px);
  padding: clamp(120px, 14vw, 190px) max(6vw, 54px) clamp(88px, 10vw, 140px);
  overflow: hidden;
  background: linear-gradient(135deg, #fff 0%, #f8fbfd 58%, #ecf6fa 100%);
}

.work-compact-copy > p:first-child {
  color: #0875ba;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.work-compact-copy h1 {
  margin: 24px 0 30px;
  color: #073e6c;
  font-size: clamp(2.65rem, 5vw, 5.4rem);
  line-height: 1.1;
  letter-spacing: -0.055em;
}
.work-compact-copy h1 span { display: block; }
.work-compact-copy h1 span:last-child { color: #0c78b2; }
.work-compact-copy > p:nth-of-type(2) { color: #607586; font-size: clamp(0.98rem, 1.2vw, 1.14rem); line-height: 1.95; }

.work-compact-copy > a,
.work-flow-to-map {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding: 12px 0;
  border-bottom: 1px solid #91b9cf;
  color: #08679f;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
}

.work-continuity-art { position: relative; min-height: 500px; }
.continuity-day {
  position: absolute;
  z-index: 2;
  display: grid;
  width: clamp(150px, 16vw, 230px);
  aspect-ratio: 1;
  place-content: center;
  border-radius: 50%;
  text-align: center;
}
.continuity-day small { font-family: var(--font-en); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.18em; }
.continuity-day strong { margin-top: 8px; font-size: clamp(2rem, 3.5vw, 3.8rem); }
.continuity-today { top: 8%; left: 2%; background: #0b6099; color: white; box-shadow: 0 30px 65px rgba(8,80,130,0.22); }
.continuity-tomorrow { right: 1%; bottom: 4%; background: #dff2f5; color: #07547e; box-shadow: 0 30px 65px rgba(47,129,155,0.18); }

.continuity-path {
  position: absolute;
  top: 45%;
  left: 22%;
  width: 62%;
  height: 26%;
  border-top: 3px solid #2b9cab;
  border-radius: 50%;
  transform: rotate(17deg);
}
.continuity-path::before { position: absolute; top: -8px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: #2b9cab; box-shadow: 0 0 0 9px rgba(43,156,171,0.12); content: ""; }
.continuity-path i { position: absolute; top: -7px; width: 11px; height: 11px; border: 2px solid white; border-radius: 50%; background: #f3bd42; box-shadow: 0 5px 18px rgba(14,94,125,0.18); animation: continuity-pulse 3.8s ease-in-out infinite; }
.continuity-path i:nth-child(1) { left: 28%; }
.continuity-path i:nth-child(2) { left: 53%; animation-delay: 0.7s; }
.continuity-path i:nth-child(3) { left: 78%; animation-delay: 1.4s; }

.continuity-word { position: absolute; z-index: 3; padding: 10px 17px; border: 1px solid rgba(18,104,148,0.15); border-radius: 999px; background: rgba(255,255,255,0.92); box-shadow: 0 12px 32px rgba(23,85,117,0.11); color: #375e77; font-size: 0.74rem; font-weight: 700; }
.word-home { top: 4%; right: 9%; }
.word-smile { top: 48%; left: 42%; }
.word-peace { bottom: 5%; left: 12%; }
@keyframes continuity-pulse { 0%, 100% { transform: scale(1); opacity: 0.65; } 50% { transform: scale(1.55); opacity: 1; } }

.work-visual-flow {
  display: grid;
  grid-template-columns: minmax(180px, 0.85fr) 56px minmax(360px, 1.3fr) 56px minmax(180px, 0.85fr);
  align-items: center;
  gap: 18px;
  padding: clamp(88px, 11vw, 150px) max(5vw, 42px) clamp(78px, 9vw, 120px);
  background: #f2f7fa;
}
.work-flow-side, .work-flow-actions { min-height: 300px; }
.work-flow-side { display: flex; flex-direction: column; justify-content: center; padding: 36px; border: 1px solid #d5e3eb; border-radius: 28px; background: rgba(255,255,255,0.84); }
.work-flow-side > p { color: #3681a6; font-family: var(--font-en); font-size: 0.62rem; font-weight: 900; letter-spacing: 0.16em; }
.work-flow-side h2 { margin: 18px 0 28px; color: #0a426c; font-size: clamp(1.55rem, 2.3vw, 2.6rem); line-height: 1.25; }
.work-flow-moments { display: flex; flex-wrap: wrap; gap: 8px; }
.work-flow-moments span { padding: 8px 12px; border-radius: 999px; background: #e5f1f7; color: #3f6a82; font-size: 0.72rem; }
.work-flow-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.flow-action { display: flex; min-width: 0; flex-direction: column; justify-content: flex-end; padding: 34px; border-radius: 28px; color: white; }
.flow-action-insurance { background: linear-gradient(145deg, #075da3, #198ec6); }
.flow-action-support { background: linear-gradient(145deg, #087f83, #2cab9e); }
.flow-action small { margin-bottom: auto; color: rgba(255,255,255,0.7); font: 800 0.58rem/1.3 var(--font-en); letter-spacing: 0.12em; }
.flow-action strong { font-size: clamp(1.8rem, 3.1vw, 3.2rem); }
.flow-action span { margin-top: 10px; color: rgba(255,255,255,0.83); font-size: 0.78rem; }
.work-flow-arrow { color: #6da7bd; font-size: 2rem; text-align: center; }
.work-flow-line { position: relative; height: 42px; margin-top: 20px; border-top: 2px solid #35a1ad; }
.work-flow-line::after { position: absolute; top: -6px; right: 0; width: 10px; height: 10px; border-radius: 50%; background: #f0b73f; content: ""; }
.work-flow-answer { grid-column: 1 / -1; margin: 38px 0 0; color: #0a426c; font-size: clamp(1.8rem, 3.7vw, 3.8rem); font-weight: 850; letter-spacing: -0.045em; text-align: center; }
.work-flow-answer span { color: #4692a9; }
.work-flow-to-map { grid-column: 1 / -1; justify-self: center; margin-top: 8px; }

@media (max-width: 900px) {
  .work-compact-hero { min-height: auto; grid-template-columns: 1fr; padding: 112px 24px 72px; }
  .work-compact-copy h1 { font-size: clamp(2.45rem, 10.5vw, 4.25rem); }
  .work-continuity-art { min-height: 410px; }
  .work-visual-flow { grid-template-columns: 1fr; padding: 72px 20px 84px; }
  .work-flow-side, .work-flow-actions { min-height: 240px; }
  .work-flow-arrow { transform: rotate(90deg); }
  .work-flow-answer, .work-flow-to-map { grid-column: 1; }
}
@media (max-width: 560px) {
  .work-continuity-art { min-height: 340px; }
  .continuity-day { width: 148px; }
  .continuity-path { left: 19%; width: 66%; }
  .word-smile { left: 38%; }
  .work-flow-actions { grid-template-columns: 1fr 1fr; min-height: 220px; }
  .flow-action { padding: 24px 18px; }
  .flow-action strong { font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { .continuity-path i { animation: none; } }

.work-visual-flow.work-four-actions {
  display: block;
  padding: clamp(90px, 11vw, 150px) max(5vw, 48px) clamp(78px, 9vw, 120px);
}

.work-actions-heading {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(300px, 1.2fr);
  column-gap: clamp(48px, 8vw, 130px);
  max-width: 1180px;
  margin: 0 auto 58px;
}
.work-actions-heading > p:first-child { grid-column: 1; color: #267fa8; font: 900 0.65rem/1.4 var(--font-en); letter-spacing: 0.18em; }
.work-actions-heading h2 { grid-column: 1; margin: 16px 0 0; color: #093f6b; font-size: clamp(2.15rem, 4vw, 4.35rem); line-height: 1.2; letter-spacing: -0.045em; }
.work-actions-heading > p:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: end; color: #647a8b; font-size: clamp(0.94rem, 1.1vw, 1.08rem); line-height: 1.95; }

.work-actions-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1240px;
  margin: 0 auto;
}
.work-actions-track::before { position: absolute; top: 42px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, #267fb7, #37a6a1, #e4ae36); content: ""; }

.work-action-step {
  position: relative;
  min-height: 315px;
  padding: 86px 28px 30px;
  border: 1px solid #d5e4ec;
  border-radius: 24px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 18px 48px rgba(28,79,107,0.07);
}
.work-action-step > span { position: absolute; z-index: 2; top: 28px; left: 28px; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: #0a6fa9; color: white; font: 800 0.62rem/1 var(--font-en); }
.work-action-step small { color: #5790aa; font: 900 0.58rem/1.4 var(--font-en); letter-spacing: 0.15em; }
.work-action-step strong { display: block; margin: 22px 0 20px; color: #0a426c; font-size: clamp(1.45rem, 2vw, 2.1rem); line-height: 1.25; }
.work-action-step p { color: #667c8c; font-size: 0.86rem; line-height: 1.85; }
.step-listen > span { background: #1b8ca6; }
.step-respond > span { background: #269f98; }
.step-connect > span { background: #d59b24; }

.work-four-actions .work-flow-answer { margin-top: 56px; }
.work-four-actions .work-flow-to-map { display: flex; width: fit-content; margin: 10px auto 0; }

@media (max-width: 900px) {
  .work-visual-flow.work-four-actions { display: block; padding: 76px 20px 88px; }
  .work-actions-heading { display: block; margin-bottom: 42px; }
  .work-actions-heading > p:last-child { margin-top: 24px; }
  .work-actions-track { grid-template-columns: 1fr 1fr; }
  .work-actions-track::before { display: none; }
  .work-action-step { min-height: 280px; }
}

@media (max-width: 560px) {
  .work-actions-track { grid-template-columns: 1fr; }
  .work-action-step { min-height: 0; padding: 78px 24px 28px; }
  .work-four-actions .work-flow-answer { margin-top: 42px; }
}

/* Work: student journey before the existing business map */
.work-legacy-intro {
  display: none !important;
}

.work-journey-hero {
  min-height: min(820px, 92vh);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  align-items: center;
  gap: clamp(44px, 7vw, 110px);
  padding: clamp(118px, 14vw, 190px) max(6vw, 48px) clamp(86px, 10vw, 140px);
  overflow: hidden;
  background: linear-gradient(135deg, #ffffff 0%, #f5faff 55%, #edf7fb 100%);
}

.work-journey-number,
.work-roles-heading > p:first-child,
.work-map-bridge > p:first-child,
.work-role-card > p:first-of-type {
  color: #0874bd;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.work-journey-copy h1 {
  margin: 24px 0 28px;
  color: #073c69;
  font-size: clamp(2.7rem, 5.4vw, 5.7rem);
  line-height: 1.16;
  letter-spacing: -0.055em;
}

.work-journey-copy h1 span {
  display: block;
}

.work-journey-lead {
  max-width: 720px;
  color: #526a7e;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 2.05;
}

.work-journey-scroll,
.work-map-bridge a {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
  padding: 13px 0;
  border-bottom: 1px solid #8eb5d2;
  color: #075d9d;
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.work-journey-daily {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1 / 1;
  justify-self: center;
  border: 1px solid rgba(15, 103, 158, 0.18);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.92) 0 27%, transparent 28%),
    radial-gradient(circle at center, rgba(40,153,191,0.08) 0 53%, transparent 54%),
    linear-gradient(145deg, rgba(255,255,255,0.8), rgba(206,235,245,0.54));
  box-shadow: 0 34px 90px rgba(38, 111, 151, 0.15);
}

.work-journey-daily::before,
.work-journey-daily::after {
  position: absolute;
  inset: 14%;
  border: 1px dashed rgba(9, 116, 177, 0.24);
  border-radius: 50%;
  content: "";
  animation: work-orbit 28s linear infinite;
}

.work-journey-daily::after {
  inset: 29%;
  animation-direction: reverse;
  animation-duration: 20s;
}

.work-journey-daily > strong,
.work-journey-daily > small {
  position: absolute;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  text-align: center;
}

.work-journey-daily > strong {
  top: 44%;
  color: #075b96;
  font-family: var(--font-en);
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  letter-spacing: 0.12em;
}

.work-journey-daily > small {
  top: 53%;
  width: 100%;
  color: #6b8191;
  font-size: 0.76rem;
}

.daily-word {
  position: absolute;
  z-index: 3;
  padding: 10px 18px;
  border: 1px solid rgba(20, 111, 165, 0.15);
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 12px 35px rgba(29, 93, 126, 0.12);
  color: #174e72;
  font-size: 0.78rem;
  font-weight: 700;
}

.daily-word-morning { top: 12%; left: 9%; }
.daily-word-home { top: 21%; right: 2%; }
.daily-word-rest { right: 12%; bottom: 12%; }

.daily-thread {
  position: absolute;
  left: 13%;
  bottom: 17%;
  width: 34%;
  height: 2px;
  transform: rotate(-23deg);
  transform-origin: left center;
  background: linear-gradient(90deg, #1b83c1, #58b9b4);
}

@keyframes work-orbit { to { transform: rotate(360deg); } }

.work-roles-intro {
  padding: clamp(90px, 11vw, 160px) max(6vw, 48px);
  background: #f4f8fb;
}

.work-roles-heading {
  max-width: 980px;
  margin: 0 auto 64px;
  text-align: center;
}

.work-roles-heading h2,
.work-map-bridge h2 {
  margin: 18px 0 24px;
  color: #073f6d;
  font-size: clamp(2.25rem, 4.6vw, 4.8rem);
  line-height: 1.22;
  letter-spacing: -0.045em;
}

.work-roles-description,
.work-map-bridge > p:nth-of-type(2) {
  color: #5e7384;
  font-size: clamp(0.96rem, 1.2vw, 1.12rem);
  line-height: 1.95;
}

.work-life-scenes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1120px;
  margin: 0 auto 32px;
  overflow: hidden;
  border: 1px solid #d2e2ec;
  border-radius: 22px;
  background: rgba(255,255,255,0.82);
}

.work-life-scenes > div {
  position: relative;
  min-height: 148px;
  padding: 32px;
  border-right: 1px solid #d2e2ec;
}

.work-life-scenes > div:last-child { border-right: 0; }
.work-life-scenes span { color: #1682bd; font: 800 0.66rem/1 var(--font-en); letter-spacing: 0.15em; }
.work-life-scenes strong { display: block; margin: 24px 0 8px; color: #123f61; font-size: 1.18rem; }
.work-life-scenes small { color: #7890a1; }

.work-role-pair {
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  align-items: stretch;
  max-width: 1120px;
  margin: 0 auto;
}

.work-role-card {
  position: relative;
  min-height: 360px;
  padding: clamp(38px, 5vw, 66px);
  overflow: hidden;
  border-radius: 28px;
  color: white;
}

.work-role-insurance { background: linear-gradient(145deg, #0759a0, #168ac4); }
.work-role-support { background: linear-gradient(145deg, #087f85, #28aaa2); }
.work-role-card > p:first-of-type { color: rgba(255,255,255,0.76); }
.work-role-card h3 { margin: 88px 0 18px; font-size: clamp(1.8rem, 3vw, 3rem); letter-spacing: -0.035em; }
.work-role-card > p:last-child { max-width: 440px; color: rgba(255,255,255,0.88); line-height: 1.85; }

.work-role-symbol {
  position: absolute;
  top: 38px;
  right: 42px;
  width: 84px;
  height: 84px;
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 50%;
}

.work-role-symbol::before,
.work-role-symbol::after,
.work-role-symbol span {
  position: absolute;
  display: block;
  background: rgba(255,255,255,0.88);
  content: "";
}

.work-role-insurance .work-role-symbol::before { inset: 22px 27px 18px; border-radius: 18px 18px 28px 28px; background: transparent; border: 3px solid white; }
.work-role-insurance .work-role-symbol::after { left: 39px; top: 28px; width: 3px; height: 31px; }
.work-role-support .work-role-symbol::before { left: 22px; top: 37px; width: 40px; height: 30px; background: transparent; border: 3px solid white; border-top: 0; }
.work-role-support .work-role-symbol::after { left: 20px; top: 28px; width: 44px; height: 3px; transform: rotate(-36deg); transform-origin: left; }

.work-role-connector { display: grid; place-items: center; }
.work-role-connector span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: white; box-shadow: 0 12px 34px rgba(28,77,108,0.12); color: #3487a8; font-weight: 900; }

.work-roles-conclusion {
  max-width: 920px;
  margin: 58px auto 0;
  color: #566f80;
  font-size: 1rem;
  line-height: 2;
  text-align: center;
}

.work-roles-conclusion span { display: block; margin-bottom: 8px; color: #0a4773; font-size: clamp(1.4rem, 2.5vw, 2.15rem); font-weight: 800; }

.work-map-bridge {
  padding: clamp(90px, 11vw, 155px) max(6vw, 48px) clamp(70px, 8vw, 110px);
  background: white;
  text-align: center;
}

@media (max-width: 820px) {
  .work-journey-hero { min-height: auto; grid-template-columns: 1fr; padding: 112px 24px 72px; }
  .work-journey-copy h1 { font-size: clamp(2.35rem, 10vw, 3.6rem); }
  .work-journey-copy h1 span:last-child { font-size: 0.88em; }
  .work-journey-daily { width: min(88vw, 430px); }
  .work-roles-intro { padding: 80px 20px; }
  .work-life-scenes { grid-template-columns: 1fr; }
  .work-life-scenes > div { min-height: 116px; padding: 24px; border-right: 0; border-bottom: 1px solid #d2e2ec; }
  .work-life-scenes > div:last-child { border-bottom: 0; }
  .work-life-scenes strong { margin-top: 14px; }
  .work-role-pair { grid-template-columns: 1fr; gap: 18px; }
  .work-role-connector { height: 32px; }
  .work-role-card { min-height: 310px; padding: 34px 28px; }
  .work-role-card h3 { margin-top: 82px; }
  .work-map-bridge { padding-inline: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .work-journey-daily::before,
  .work-journey-daily::after { animation: none; }
}

/* Culture: editorial photo sequence, distinct from the home hero */
.page-culture .culture-editorial-hero {
  position: relative;
  z-index: 1;
}

.culture-editorial-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: clamp(38px, 8vw, 120px);
  align-items: end;
}

.culture-editorial-head > div:first-child > span {
  display: block;
  color: #0876a7;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.culture-editorial-head h2 {
  margin: 18px 0 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 7vw, 7.2rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.culture-editorial-intro {
  padding-bottom: 8px;
}

.culture-editorial-intro p {
  margin: 0;
  color: #315069;
  font-size: clamp(0.82rem, 1.15vw, 0.96rem);
  line-height: 2;
}

.culture-editorial-intro a {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  margin-top: 26px;
  padding-bottom: 8px;
  color: #0876a7;
  border-bottom: 1px solid rgba(8, 118, 167, 0.32);
  font-size: 0.78rem;
  font-weight: 800;
}

.culture-editorial-intro a i {
  font-style: normal;
  transition: transform 180ms ease;
}

.culture-editorial-intro a:hover i,
.culture-editorial-intro a:focus-visible i {
  transform: translateY(4px);
}

.culture-filmstrip {
  position: relative;
  margin-top: clamp(52px, 7vw, 86px);
  padding: 0 clamp(0px, 4vw, 64px);
}

.culture-film-photo {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: #e7f3f8;
  box-shadow: 0 22px 54px rgba(20, 68, 100, 0.12);
}

.culture-film-photo-main {
  width: min(100%, 1120px);
  height: clamp(360px, 48vw, 610px);
  margin: 0 auto;
  border-radius: 18px 80px 18px 52px;
}

.culture-film-photo-award {
  height: clamp(250px, 29vw, 410px);
  margin-top: clamp(70px, 9vw, 128px);
  border-radius: 48px 14px 42px 14px;
}

.culture-film-photo-learning {
  height: clamp(300px, 34vw, 480px);
  margin-top: clamp(22px, 3vw, 46px);
  border-radius: 14px 48px 18px 62px;
}

.culture-film-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.08) saturate(0.94);
  transition: transform 700ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.culture-film-photo-main img {
  object-position: center 46%;
}

.culture-film-photo-award img {
  object-position: center 34%;
}

.culture-film-photo-learning img {
  object-position: center 65%;
}

.culture-film-photo:hover img {
  transform: scale(1.035);
}

.culture-film-photo figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 7px 10px;
  color: #fff;
  background: rgba(5, 52, 88, 0.74);
  border-radius: 999px;
  font-family: var(--font-en);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  backdrop-filter: blur(8px);
}

@media (max-width: 820px) {
  .culture-editorial-head {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .culture-filmstrip { padding: 0; }
}

@media (max-width: 560px) {
  .culture-editorial-head h2 {
    font-size: clamp(3.1rem, 14vw, 4.4rem);
  }

  .culture-editorial-intro p br {
    display: none;
  }

  .culture-film-photo-main {
    height: 68vw;
    min-height: 290px;
    border-radius: 14px 42px 14px 30px;
  }
}

@media (max-width: 700px) {
  .numbers-page-links {
    grid-template-columns: 1fr;
  }

  .numbers-page-links a {
    min-height: 145px;
  }
}

.numbers-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.numbers-grid div {
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: 18px;
  text-align: center;
  background:
    linear-gradient(180deg, #ffffff, #f3faff);
}

.numbers-grid strong {
  color: var(--navy);
  font-family: var(--font-en);
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
  font-weight: 800;
}

.numbers-grid span {
  color: var(--muted);
  font-family: var(--font-ja);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.numbers-grid span small {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.72em;
  font-weight: 600;
}

.note {
  margin: 20px 0 0;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.message-box,
.entry-box {
  max-width: 1060px;
  margin: 0 auto;
  padding: clamp(34px, 6vw, 72px);
  background: var(--white);
  border-radius: 8px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  transform-style: preserve-3d;
}

.timeline-message {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 30px;
}

.timeline-message article {
  position: relative;
  min-height: 260px;
  padding: clamp(22px, 3vw, 30px);
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 14%, rgba(41, 168, 223, 0.16), transparent 8rem),
    linear-gradient(180deg, #ffffff, #f3faff);
  border: 1px solid rgba(214, 229, 240, 0.92);
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(7, 58, 114, 0.08);
}

.timeline-message article::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--blue), var(--blue-bright));
}

.timeline-message span {
  display: inline-flex;
  color: var(--blue);
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timeline-message h3 {
  margin: 12px 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45;
  letter-spacing: 0.02em;
}

.timeline-message p {
  margin: 0;
  color: var(--muted);
  line-height: 1.95;
  letter-spacing: 0.01em;
}

.play-button {
  min-height: 52px;
  padding: 0 22px;
  color: var(--navy);
  background: #e8f6ff;
  border: 1px solid #b9dff5;
  border-radius: 999px;
  font: inherit;
  font-family: var(--font-ja);
  font-weight: 800;
  letter-spacing: 0.01em;
}

.faq-list {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
}

summary {
  padding: 22px 24px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
}

details p {
  margin: 0;
  padding: 0 24px 24px;
}

.entry-section {
  background: linear-gradient(135deg, #e8f7fb, #f4fbff 58%, #eef8ff);
}

.contact-section {
  position: relative;
  overflow: hidden;
}

.contact-section::before {
  content: "CONTACT";
  position: absolute;
  right: -2vw;
  top: 5vw;
  color: rgba(7, 58, 114, 0.045);
  font-family: var(--font-en);
  font-size: clamp(70px, 14vw, 180px);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.contact-form-intro {
  max-width: 760px;
  margin: clamp(38px, 5vw, 54px) auto 0;
  padding-top: clamp(28px, 4vw, 38px);
  border-top: 1px solid var(--line);
}

.contact-form-intro h3 {
  margin: 6px 0 8px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(23px, 3vw, 31px);
}

.contact-form-intro p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.8;
}

.contact-form {
  margin-top: 22px;
}

.compact-contact-form {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

.contact-submit-status {
  min-height: 1.5em;
  margin: 12px 0 0;
  color: #53677a;
  font-size: 0.82rem;
  line-height: 1.6;
}

.contact-submit:disabled {
  cursor: not-allowed;
  opacity: 0.42;
  filter: saturate(0.45);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.contact-field {
  display: grid;
  gap: 7px;
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 800;
}

.contact-field-wide {
  grid-column: 1 / -1;
}

.contact-field em {
  margin-left: 7px;
  padding: 3px 7px;
  color: #fff;
  background: var(--blue);
  border-radius: 4px;
  font-size: 0.68rem;
  font-style: normal;
  vertical-align: 2px;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  padding: 11px 13px;
  color: var(--ink);
  background: #f8fcff;
  border: 1px solid rgba(7, 58, 114, 0.2);
  border-radius: 8px;
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-field textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(23, 105, 255, 0.1);
}

.contact-consent {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 18px 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.contact-consent input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.contact-privacy-note {
  max-width: 680px;
  margin: 20px 0 0;
  padding: 16px 18px;
  color: #53677a;
  border-left: 2px solid rgba(23, 105, 255, 0.55);
  background: rgba(23, 105, 255, 0.045);
  font-size: 0.8rem;
  line-height: 1.8;
}

.contact-privacy-note a,
.contact-consent a {
  color: #1769ff;
  font-weight: 700;
  text-underline-offset: 3px;
}

.contact-submit {
  min-width: 170px;
  min-height: 44px;
  padding: 10px 22px;
  border: 0;
  cursor: pointer;
}

.contact-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.page-home .contact-section {
  padding-top: clamp(34px, 4vw, 52px);
  padding-bottom: clamp(34px, 4vw, 52px);
}

.page-home .contact-section::before {
  top: 2vw;
  font-size: clamp(38px, 6vw, 72px);
}

.page-home .contact-section .entry-box {
  max-width: 760px;
  padding: clamp(24px, 3vw, 34px);
}

.page-home .contact-section .entry-box > h2 {
  max-width: 620px;
  font-size: clamp(23px, 3vw, 32px);
}

.page-home .contact-section .entry-box > p {
  max-width: 720px;
  font-size: 0.9rem;
  line-height: 1.8;
}

.contact-page-main {
  padding-top: 72px;
}

.contact-page-section {
  min-height: calc(100svh - 72px);
}

.contact-page-section .entry-box {
  max-width: 820px;
}

.contact-page-section h1 {
  margin: 8px 0 14px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 52px);
}

.contact-page-actions {
  margin: 26px 0 38px;
}

.contact-page-back {
  display: inline-flex;
  margin-top: 34px;
}

@media (max-width: 700px) {
  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .contact-field-wide {
    grid-column: auto;
  }

  .contact-submit {
    width: 100%;
  }
}

.entry-list {
  align-items: stretch;
  gap: 12px;
  margin: 28px 0;
}

.entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.entry-list dl {
  flex: 1;
  margin: 0;
  padding: 18px;
  background: #f4fbff;
  border-radius: 8px;
}

.entry-list dt {
  color: var(--yellow-deep);
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.faq-page-main {
  padding-top: 72px;
  background:
    radial-gradient(circle at 88% 8%, rgba(41, 168, 223, 0.16), transparent 18rem),
    linear-gradient(180deg, #ffffff, #f4fbff);
}

.faq-page-section {
  min-height: calc(100svh - 72px);
}

.faq-page-section h1 {
  margin: 10px 0 18px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.18;
}

.faq-back {
  margin-top: 28px;
}

.selection-flow {
  padding: 4px 24px 26px;
}

.selection-flow ol {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.selection-flow li {
  position: relative;
  display: grid;
  min-height: 58px;
  place-items: center;
  padding: 10px 8px;
  color: #fff;
  background: linear-gradient(135deg, #36a7eb, #0f659f);
  font-weight: 800;
  text-align: center;
}

.selection-flow li:last-child {
  background: var(--navy);
}

.selection-flow-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 22px;
}

.selection-flow-note strong {
  padding: 7px 14px;
  color: #fff;
  background: #1769c2;
  border-radius: 999px;
  font-size: 0.75rem;
  white-space: nowrap;
}

.selection-flow-note p {
  padding: 0;
  line-height: 1.8;
}

@media (max-width: 760px) {
  .selection-flow ol {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .selection-flow li {
    min-height: 62px;
    border-radius: 8px;
  }

  .selection-flow li:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: -21px;
    width: 10px;
    height: 10px;
    border-right: 3px solid #1683c4;
    border-bottom: 3px solid #1683c4;
    transform: translateX(-50%) rotate(45deg);
  }

  .selection-flow-note {
    grid-template-columns: 1fr;
  }

  .selection-flow-note strong {
    justify-self: start;
  }
}

@keyframes heroBreath {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(-1.4%, -0.8%, 0); }
}

@keyframes heroCopyIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes chipPop {
  from { opacity: 0; transform: translateY(12px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes morphFloat {
  from { transform: translate3d(0, 0, 0) rotate(0deg); border-radius: 38% 62% 54% 46% / 46% 40% 60% 54%; }
  to { transform: translate3d(18px, -22px, 0) rotate(9deg); border-radius: 62% 38% 44% 56% / 54% 62% 38% 46%; }
}

@keyframes lineSweep {
  0%, 100% { opacity: 0; transform: translateX(50px) rotate(-18deg); }
  45%, 60% { opacity: 1; }
  80% { transform: translateX(-120px) rotate(-18deg); }
}

@keyframes orbitFloat {
  0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
  50% { transform: translateY(-16px) rotateX(4deg) rotateY(-5deg); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes tagPulse {
  0%, 100% { box-shadow: 0 14px 28px rgba(7, 58, 114, 0.13); }
  50% { box-shadow: 0 18px 36px rgba(7, 58, 114, 0.22), 0 0 0 8px rgba(41, 168, 223, 0.12); }
}

@keyframes spreadSettle {
  0% { transform: translateX(10px); filter: brightness(0.98); }
  70% { transform: translateX(-2px); filter: brightness(1.02); }
  100% { transform: translateX(0); filter: brightness(1); }
}

@keyframes pageTurnNext {
  0% { opacity: 0; transform: rotateY(0deg); }
  8% { opacity: 1; }
  58% { opacity: 1; transform: rotateY(-116deg); }
  100% { opacity: 0; transform: rotateY(-178deg); }
}

@keyframes pageTurnPrev {
  0% { opacity: 0; transform: rotateY(0deg); }
  8% { opacity: 1; }
  58% { opacity: 1; transform: rotateY(116deg); }
  100% { opacity: 0; transform: rotateY(178deg); }
}

@keyframes floatCard {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(0, -18px, 0) rotate(1deg); }
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

@keyframes tagFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.entry-list dd {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.footer {
  padding: 32px clamp(20px, 5vw, 72px);
  color: rgba(255, 255, 255, 0.78);
  background: var(--ink);
}

.footer p {
  margin-bottom: 8px;
  color: var(--white);
  font-weight: 900;
}

.footer-contact {
  display: inline-block;
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-contact:hover,
.footer-contact:focus-visible {
  color: #fff;
}

.home-footer {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.home-footer > small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.7rem;
}

.home-footer-nav {
  display: flex;
  gap: clamp(20px, 3vw, 38px);
  align-items: center;
}

.home-footer-nav a {
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-en);
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  transition: color 0.2s ease;
}

.home-footer-nav a:hover,
.home-footer-nav a:focus-visible {
  color: #fff;
}

@media (max-width: 700px) {
  .home-footer {
    align-items: flex-start;
    flex-direction: column-reverse;
  }

  .home-footer-nav {
    width: 100%;
    flex-wrap: wrap;
  }
}

.next-journey-section {
  padding-top: clamp(70px, 10vw, 130px);
  padding-bottom: clamp(70px, 10vw, 130px);
  background: #f2f6f8;
}

.next-journey-heading {
  max-width: 760px;
  margin-bottom: clamp(32px, 5vw, 54px);
}

.next-journey-heading > span {
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.next-journey-heading h2 {
  margin: 14px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 4.6rem);
  line-height: 1.25;
}

.next-journey-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.next-journey-links a {
  display: grid;
  min-height: 240px;
  padding: clamp(26px, 4vw, 44px);
  color: var(--ink);
  border: 1px solid rgba(7, 27, 53, 0.1);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(7, 27, 53, 0.06);
  transition: transform 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.next-journey-links a:hover,
.next-journey-links a:focus-visible {
  color: #fff;
  background: var(--ink);
  transform: translateY(-5px);
}

.next-journey-links small {
  align-self: start;
  color: #1769ff;
  font-family: var(--font-en);
  font-weight: 800;
  letter-spacing: 0.12em;
}

.next-journey-links strong {
  align-self: end;
  margin-top: 48px;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.next-journey-links span {
  margin-top: 9px;
  font-size: 0.82rem;
}

.culture-next-links {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.culture-next-links .culture-home-link {
  color: #fff;
  background: var(--ink);
}

.culture-next-links .culture-home-link small {
  color: #77c9ff;
}

@media (max-width: 700px) {
  .next-journey-links {
    grid-template-columns: 1fr;
  }

  .next-journey-links a {
    min-height: 190px;
  }
}

@media (max-width: 1080px) {
  .work-cards,
  .numbers-grid,
  .scene-cards,
  .principle-grid,
  .timeline-message {
    grid-template-columns: repeat(3, 1fr);
  }

  .people-bento {
    grid-template-columns: repeat(6, 1fr);
  }

  .tile-large,
  .tile-blue {
    grid-column: span 3;
  }

  .tile-quote,
  .tile-small {
    grid-column: span 2;
  }

  .tile-wide {
    grid-column: span 4;
  }

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

  .orbit {
    opacity: 0.9;
  }

  .attention-cards {
    grid-template-columns: 1fr;
  }

  .attention-card,
  .attention-card:nth-child(2),
  .attention-card:nth-child(3) {
    grid-template-columns: auto 1fr;
    min-height: auto;
    transform: none;
  }

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

  .student-thoughts span,
  .student-thoughts span:nth-child(2),
  .student-thoughts span:nth-child(3) {
    transform: none;
  }

  .book-stage {
    min-height: 520px;
  }

  .connection-sticky {
    grid-template-columns: 1fr;
  }

  .connection-heading {
    max-width: 760px;
  }

  .connection-visual {
    min-height: 520px;
  }
}

@media (max-width: 760px) {
  .site-header {
    gap: 12px;
  }

  .nav {
    display: none;
  }

  .header-entry {
    padding: 9px 14px;
  }

  .hero {
    min-height: auto;
    padding-top: 72px;
    padding-bottom: 286px;
  }

  h1 {
    font-size: clamp(42px, 13vw, 58px);
  }

  .hero-overlay {
    background:
      radial-gradient(circle at 86% 18%, rgba(41, 168, 223, 0.24), transparent 15rem),
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(237, 248, 255, 0.82) 58%, rgba(237, 248, 255, 0.28)),
      linear-gradient(0deg, rgba(7, 58, 114, 0.18), rgba(7, 58, 114, 0));
  }

  .orbit {
    left: 50%;
    right: auto;
    bottom: 26px;
    transform: translateX(-50%);
    min-width: 230px;
    width: 230px;
  }

  .orbit span {
    width: 68px;
    height: 34px;
    font-size: 12px;
  }

  .connection-section {
    min-height: auto;
  }

  .connection-sticky {
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
    gap: 26px;
    min-height: auto;
    padding: 70px 20px;
  }

  .connection-visual {
    display: block;
    min-height: auto;
  }

  .connection-visual::before {
    left: 50%;
    top: 22px;
    width: min(86vw, 360px);
    transform: translateX(-50%) scale(1);
    opacity: 0.44;
  }

  .connection-section .orbit {
    left: auto;
    right: auto;
    bottom: auto;
    width: min(78vw, 320px);
    margin: 0 auto;
    opacity: 1;
    transform: scale(1);
  }

  .connection-section .orbit strong,
  .connection-section .orbit span {
    opacity: 1;
    filter: none;
    translate: 0 0;
  }

  .connection-notes {
    position: relative;
    display: grid;
    gap: 10px;
    margin-top: 22px;
  }

  .connection-notes span,
  .connection-notes span:nth-child(1),
  .connection-notes span:nth-child(2),
  .connection-notes span:nth-child(3),
  .connection-notes span:nth-child(4) {
    position: relative;
    inset: auto;
    max-width: none;
    opacity: 1;
    transform: none;
  }

  .purpose-grid,
  .split,
  .split.reverse,
  .entry-list,
  .attention-section,
  .student-section {
    grid-template-columns: 1fr;
    display: grid;
  }

  .work-cards,
  .numbers-grid,
  .values-grid,
  .scene-cards,
  .principle-grid,
  .timeline-message {
    grid-template-columns: 1fr;
  }

  .people-bento {
    grid-template-columns: 1fr;
  }

  .tile-large,
  .tile-blue,
  .tile-quote,
  .tile-small,
  .tile-wide {
    grid-column: auto;
    grid-row: auto;
  }

  .credo-tabs {
    justify-content: flex-start;
  }

  .credo-tabs button {
    flex: 1 1 calc(50% - 10px);
  }

  .book-stage {
    min-height: 760px;
    padding: 62px 0 0;
  }

  .book-cover {
    inset: 62px 0 0;
    font-size: clamp(36px, 13vw, 58px);
  }

  .book-spread {
    inset: 62px 0 0;
    grid-template-columns: 1fr;
  }

  .page-turner {
    display: none;
  }

  .book-page {
    min-height: auto;
    padding: 28px;
  }

  .book-page-left,
  .book-page-right {
    border: 1px solid rgba(214, 229, 240, 0.96);
    border-radius: 8px;
  }

  .book-page-right {
    border-top: 0;
    border-radius: 0 0 8px 8px;
  }

  .book-page-left {
    border-radius: 8px 8px 0 0;
  }

  .principle-list-page-right {
    padding-top: 28px;
  }

  .book-arrow {
    top: 26px;
    transform: none;
  }

  .book-arrow:hover {
    transform: scale(1.04);
  }

  .section-heading.centered {
    text-align: left;
  }

  .attention-section::before {
    inset: 16px;
    border-radius: 18px;
  }

  .attention-copy h2 {
    font-size: clamp(32px, 10vw, 46px);
  }

  .attention-rotator {
    gap: 8px;
  }

  .attention-rotator span,
  .attention-rotator strong {
    min-height: 32px;
    padding: 0 11px;
  }
}

/* FLEX AWARD */
.culture-tags .award-tag-button {
  border-color: rgba(218, 151, 29, 0.42);
}

.culture-tags .award-tag-button i {
  background: #d99a24;
}

.culture-tags .award-tag-button:hover,
.culture-tags .award-tag-button:focus-visible {
  background: #b9780d;
}

.culture-tags .award-tag-button:hover i,
.culture-tags .award-tag-button:focus-visible i {
  color: #b9780d;
}

.award-modal-header {
  background:
    radial-gradient(circle at 86% 0%, rgba(255, 212, 105, 0.28), transparent 30%),
    linear-gradient(145deg, #21180b, #6f4814 58%, #aa741c);
}

.award-modal-header > span {
  color: #ffd66e;
}

.award-gallery {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
  grid-template-rows: repeat(2, minmax(260px, 1fr));
  gap: 16px;
  padding: clamp(24px, 4vw, 48px);
  background: #f8f4ec;
}

.award-gallery figure {
  position: relative;
  min-height: 340px;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #d8d0c2;
}

.award-gallery .award-photo-group {
  grid-column: 1 / -1;
  min-height: 500px;
}

.award-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.award-gallery .award-photo-portrait img {
  object-fit: contain;
}

.award-gallery .award-photo-portrait {
  grid-row: 1 / span 2;
}

.award-gallery .award-photo-landscape {
  min-height: 260px;
}

.award-gallery .award-photo-landscape img {
  object-position: center center;
}

.award-gallery figcaption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  padding: 12px 15px;
  color: #fff;
  border-radius: 12px;
  background: rgba(42, 27, 7, 0.78);
  backdrop-filter: blur(7px);
  font-size: 0.78rem;
}

.award-message {
  padding: clamp(48px, 7vw, 84px) clamp(28px, 6vw, 70px) clamp(68px, 9vw, 110px);
  background: #fff;
}

.award-message > span {
  color: #b9780d;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.award-message > h3 {
  margin: 14px 0 38px;
  max-width: 920px;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.8rem);
  line-height: 1.45;
}

.award-message > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.award-message article {
  min-height: 220px;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid rgba(137, 90, 14, 0.16);
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, #fbf5e9);
}

.award-message strong {
  color: #b9780d;
  font-family: var(--font-en);
  font-size: 0.74rem;
}

.award-message h4 {
  margin: 25px 0 13px;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
}

.award-message p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

@media (max-width: 760px) {
  .award-gallery,
  .award-message > div {
    grid-template-columns: 1fr;
  }

  .award-gallery {
    grid-template-rows: none;
  }

  .award-gallery .award-photo-group {
    grid-column: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .award-gallery .award-photo-portrait {
    grid-row: auto;
  }

  .award-gallery figure {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

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

  .connection-section {
    min-height: auto;
  }

  .connection-sticky {
    position: relative;
    top: auto;
  }

  .connection-section .orbit,
  .connection-section .orbit strong,
  .connection-section .orbit span,
  .connection-notes span {
    opacity: 1;
    filter: none;
    transform: none;
    translate: 0 0;
  }

  .connection-visual::before {
    opacity: 0.42;
    transform: scale(1);
  }
}
/* Multi-page recruitment journey */
.page-home #business,
.page-home #purpose,
.page-home #people,
.page-home #work,
.page-home .culture-section,
.page-home .numbers-section {
  display: none;
}

.explore-section {
  background:
    radial-gradient(circle at 12% 10%, rgba(35, 106, 255, 0.12), transparent 30%),
    #f5f7fb;
}

.explore-section .section-heading {
  max-width: 760px;
  margin-inline: auto;
}

.explore-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1180px;
  margin: 54px auto 0;
}

.explore-card {
  position: relative;
  min-height: 390px;
  padding: 34px;
  overflow: hidden;
  color: #101828;
  text-decoration: none;
  border: 1px solid rgba(16, 24, 40, 0.1);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.9);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.explore-card::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: var(--explore-glow, rgba(35, 106, 255, 0.12));
  transition: transform 300ms ease;
}

.explore-card:hover,
.explore-card:focus-visible {
  transform: translateY(-8px);
  border-color: rgba(35, 106, 255, 0.35);
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.13);
}

.explore-card:hover::after,
.explore-card:focus-visible::after {
  transform: scale(1.2);
}

.explore-people { --explore-glow: rgba(255, 180, 75, 0.2); }
.explore-work { --explore-glow: rgba(39, 174, 96, 0.18); }

.explore-number {
  display: inline-grid;
  width: 46px;
  height: 46px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #1769ff;
  font-weight: 800;
}

.explore-en {
  margin: 64px 0 8px;
  color: #1769ff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.explore-card h3 {
  margin: 0 0 16px;
  font-size: clamp(2rem, 3vw, 3.1rem);
  line-height: 1.1;
}

.explore-card > p:not(.explore-en) {
  position: relative;
  z-index: 1;
  line-height: 1.85;
}

.explore-card strong {
  position: absolute;
  z-index: 1;
  left: 34px;
  bottom: 30px;
  display: flex;
  gap: 14px;
  align-items: center;
}

.explore-card i,
.culture-path i {
  font-style: normal;
  transition: transform 200ms ease;
}

.explore-card:hover i,
.culture-path:hover i {
  transform: translateX(6px);
}

.culture-path {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  margin: 18px auto 0;
  padding: 28px 34px;
  color: #fff;
  text-decoration: none;
  border-radius: 24px;
  background: #101828;
}

.culture-path span {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 700;
}

.culture-path small {
  display: block;
  margin-bottom: 5px;
  color: #8eb5ff;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.culture-path strong {
  display: flex;
  flex: 0 0 auto;
  gap: 14px;
  align-items: center;
}

.page-detail main {
  padding-top: 74px;
}

.page-philosophy main > section:not(#purpose):not(.contact-section),
.page-people main > section:not(#people):not(.contact-section),
.page-work main > section:not(#business):not(#work):not(.work-bridge):not(.group-business-map):not(.work-perspective):not(.work-story):not(.work-story-single):not(.work-journey-hero):not(.work-roles-intro):not(.work-map-bridge):not(.work-compact-hero):not(.work-visual-flow):not(.work-scenes-preview):not(.contact-section),
.page-culture main > section:not(.culture-section):not(.numbers-section):not(.contact-section) {
  display: none;
}

.detail-back {
  display: inline-flex;
  margin: 0 0 28px clamp(20px, 5vw, 76px);
  color: #1769ff;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 860px) {
  .explore-grid {
    grid-template-columns: 1fr;
  }

  .explore-card {
    min-height: 330px;
  }
}

@media (max-width: 600px) {
  .explore-card {
    padding: 26px;
    border-radius: 22px;
  }

  .explore-card strong {
    left: 26px;
  }

  .culture-path {
    align-items: flex-start;
    flex-direction: column;
    padding: 24px;
  }
}

/* Simplified work fields */
.work-perspective {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.work-perspective::before {
  position: absolute;
  top: clamp(70px, 10vw, 130px);
  right: clamp(-120px, -7vw, -40px);
  width: clamp(240px, 32vw, 470px);
  height: clamp(240px, 32vw, 470px);
  border: 1px solid rgba(23, 105, 255, 0.1);
  border-radius: 50%;
  box-shadow:
    0 0 0 42px rgba(23, 105, 255, 0.025),
    0 0 0 84px rgba(23, 105, 255, 0.018);
  content: "";
}

.work-perspective-visual-only {
  padding-top: clamp(40px, 6vw, 78px);
  padding-bottom: clamp(54px, 8vw, 100px);
  background:
    linear-gradient(180deg, #fff 0%, #f8fbff 68%, #eef6fc 100%);
}

.work-perspective-visual-only::before {
  opacity: 0.5;
}

.work-perspective-visual-only .work-role-visual {
  max-width: 1180px;
}

.work-perspective-visual-only .work-role-illustration {
  width: min(100%, 1040px);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.work-perspective-heading {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-bottom: clamp(42px, 7vw, 78px);
}

.work-perspective-heading > span {
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.work-perspective-heading h2 {
  margin: 14px 0 22px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 5vw, 4.5rem);
  line-height: 1.14;
  letter-spacing: -0.035em;
}

.work-perspective-heading p {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  line-height: 2;
}

.work-visual-intro {
  max-width: 920px;
  margin: 0 auto clamp(34px, 5vw, 58px);
  text-align: center;
}

.work-visual-intro h2 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 4rem);
  line-height: 1.28;
  letter-spacing: -0.035em;
}

.work-role-visual {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
}

.work-role-illustration {
  position: relative;
  width: min(100%, 900px);
  margin: 0 auto;
  padding: clamp(12px, 2vw, 20px);
  border: 1px solid rgba(23, 105, 255, 0.1);
  border-radius: 30px;
  background: linear-gradient(145deg, #fff, #f5faff);
  box-shadow: 0 24px 64px rgba(29, 82, 123, 0.1);
}

.work-role-illustration img {
  display: block;
  width: 100%;
  height: auto;
}

.work-role-illustration figcaption {
  position: absolute;
  top: clamp(20px, 4vw, 42px);
  left: clamp(20px, 4vw, 44px);
  max-width: 310px;
  padding: 16px 20px;
  border: 1px solid rgba(23, 105, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 32px rgba(27, 77, 116, 0.1);
  backdrop-filter: blur(8px);
}

.work-role-illustration figcaption span,
.work-role-illustration figcaption strong {
  display: block;
}

.work-role-labels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(100%, 760px);
  margin: 22px auto 0;
}

.work-role-labels > div {
  position: relative;
  padding: 17px 20px 17px 24px;
  border: 1px solid rgba(12, 66, 111, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
}

.work-role-labels > div::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 12px 0 0 12px;
  background: #1769ff;
  content: "";
}

.work-role-labels > div:last-child::before {
  background: #049a9a;
}

.work-role-labels small,
.work-role-labels strong {
  display: block;
}

.work-role-labels small {
  color: #60778b;
  font-size: 0.7rem;
}

.work-role-labels strong {
  margin-top: 5px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.3rem);
}

.work-role-illustration figcaption span {
  color: #1769ff;
  font-size: 0.68rem;
  font-weight: 800;
}

.work-role-illustration figcaption strong {
  margin-top: 5px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.4rem);
  line-height: 1.5;
}

.work-role-paths {
  position: relative;
  width: 50%;
  height: 58px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(23, 105, 255, 0.28);
}

.work-role-paths::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 58px;
  background: rgba(23, 105, 255, 0.28);
  content: "";
}

.work-role-paths span {
  position: absolute;
  bottom: -18px;
  width: 1px;
  height: 18px;
  background: rgba(23, 105, 255, 0.28);
}

.work-role-paths span:first-child { left: 0; }
.work-role-paths span:last-child { right: 0; }

.work-role-businesses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 44px);
  margin-top: 18px;
}

.work-role-business {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 22px;
  min-height: 360px;
  padding: clamp(28px, 4vw, 42px);
  overflow: hidden;
  border: 1px solid rgba(9, 69, 120, 0.12);
  border-top: 5px solid var(--role-accent);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(24, 70, 108, 0.1);
}

.work-role-insurance { --role-accent: #1769ff; }
.work-role-partners { --role-accent: #049a9a; }

.work-role-symbol {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  color: #fff;
  border-radius: 20px;
  background: var(--role-accent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--role-accent) 25%, transparent);
}

.work-role-symbol span {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 900;
}

.work-role-copy > span,
.work-role-copy > small {
  display: block;
}

.work-role-copy > span {
  color: var(--role-accent);
  font-family: var(--font-en);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.work-role-copy > small {
  margin-top: 6px;
  color: #62788b;
  font-size: 0.72rem;
  font-weight: 700;
}

.work-role-copy h3 {
  margin: 20px 0 14px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  line-height: 1.25;
}

.work-role-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.9;
}

.work-role-moment {
  grid-column: 1 / -1;
  align-self: end;
  padding-top: 20px;
  color: var(--role-accent);
  border-top: 1px solid color-mix(in srgb, var(--role-accent) 18%, white);
  font-family: var(--font-display);
  font-size: 0.98rem;
}

.work-role-foundation {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) 1.15fr;
  gap: clamp(24px, 5vw, 60px);
  align-items: center;
  margin-top: 34px;
  padding: clamp(26px, 4vw, 42px);
  color: #fff;
  border-radius: 18px 18px 8px 8px;
  background: linear-gradient(110deg, #073b74, #087fac);
  box-shadow: 0 20px 46px rgba(5, 64, 117, 0.18);
}

.work-role-foundation span,
.work-role-foundation strong {
  display: block;
}

.work-role-foundation span {
  color: #8fdcff;
  font-family: var(--font-en);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.work-role-foundation strong {
  margin-top: 9px;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.3vw, 1.75rem);
  line-height: 1.45;
}

.work-role-foundation p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.84rem;
  line-height: 1.9;
}

.work-story {
  padding: clamp(54px, 7vw, 104px) clamp(20px, 5vw, 76px);
  background:
    radial-gradient(circle at 18% 18%, rgba(63, 181, 230, 0.1), transparent 26%),
    linear-gradient(180deg, #f8fcff 0%, #ffffff 100%);
}

.work-story-stage {
  width: min(1320px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}

.work-story-visual {
  position: sticky;
  top: 96px;
  height: min(72vh, 690px);
  min-height: 520px;
  border-radius: 34px;
  overflow: hidden;
  background: linear-gradient(145deg, #edf8ff, #ffffff 58%, #f2f9ff);
  box-shadow: 0 30px 80px rgba(5, 74, 126, 0.11);
}

.work-story-visual figure {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  padding: clamp(18px, 3vw, 44px);
  opacity: 0;
  transform: scale(0.975) translateY(12px);
  transition: opacity 0.75s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.work-story-visual figure.is-active {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.work-story-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.work-story-progress {
  position: absolute;
  z-index: 3;
  left: clamp(20px, 3vw, 38px);
  bottom: clamp(18px, 2.5vw, 30px);
  display: flex;
  gap: 8px;
}

.work-story-progress span {
  width: 36px;
  padding-bottom: 7px;
  border-bottom: 2px solid rgba(0, 75, 133, 0.18);
  color: rgba(0, 75, 133, 0.35);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  transition: color 0.35s ease, border-color 0.35s ease;
}

.work-story-progress span.is-active {
  color: #0068ad;
  border-color: #20a8d8;
}

.work-story-steps {
  padding-bottom: 8vh;
}

.work-story-step {
  min-height: 66vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.28;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.65s ease;
}

.work-story-step.is-active {
  opacity: 1;
  transform: translateY(0);
}

.work-story-step > span {
  margin-bottom: 20px;
  color: #1787bd;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.work-story-step h2,
.work-story-step h3 {
  margin: 0 0 24px;
  color: #004b85;
  font-size: clamp(30px, 3.2vw, 52px);
  line-height: 1.28;
  letter-spacing: 0.02em;
}

.work-story-step p {
  margin: 0;
  color: #3f5d70;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 2;
}

@media (max-width: 820px) {
  .work-story {
    padding-inline: 16px;
  }

  .work-story-stage {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .work-story-visual {
    top: 72px;
    z-index: 2;
    height: 46vh;
    min-height: 300px;
    border-radius: 24px;
  }

  .work-story-steps {
    position: relative;
    z-index: 3;
    padding: 0 14px 2vh;
  }

  .work-story-step {
    min-height: 58vh;
    justify-content: flex-end;
    padding: 120px 12px 38px;
  }

  .work-story-step > span,
  .work-story-step h2,
  .work-story-step h3,
  .work-story-step p {
    width: fit-content;
    max-width: 100%;
    padding-inline: 5px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9);
  }

  .work-story-step h2,
  .work-story-step h3 {
    font-size: clamp(28px, 8.8vw, 40px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-story-visual figure,
  .work-story-step {
    transition: none;
  }
}

.work-perspective-guide {
  position: relative;
  z-index: 1;
  margin: clamp(34px, 5vw, 56px) 0 0;
  padding-left: 22px;
  border-left: 2px solid #1769ff;
  color: #31526e;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.8;
}

@media (max-width: 820px) {
  .work-role-businesses,
  .work-role-foundation {
    grid-template-columns: 1fr;
  }

  .work-role-paths {
    display: none;
  }

  .work-role-businesses {
    margin-top: 22px;
  }

  .work-role-business {
    min-height: 0;
  }

  .work-role-foundation {
    gap: 14px;
  }
}

@media (max-width: 520px) {
  .work-role-illustration figcaption {
    position: static;
    max-width: none;
    margin-top: 8px;
    box-shadow: none;
  }

  .work-role-labels {
    grid-template-columns: 1fr;
  }

  .work-role-business {
    grid-template-columns: 56px 1fr;
    gap: 16px;
  }

  .work-role-symbol {
    width: 54px;
    height: 54px;
    border-radius: 15px;
  }

  .work-role-symbol span {
    font-size: 1.35rem;
  }
}

.work-story-single {
  padding-top: clamp(68px, 9vw, 120px);
  padding-bottom: clamp(76px, 10vw, 136px);
  background: linear-gradient(180deg, #ffffff 0%, #f2f9ff 100%);
}

.work-story-single-visual {
  width: min(1220px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border-radius: clamp(22px, 3vw, 42px);
  box-shadow: 0 28px 72px rgba(6, 64, 111, 0.15);
}

.work-story-single-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.work-story-single-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  gap: clamp(30px, 6vw, 84px);
  align-items: end;
  width: min(1120px, calc(100% - 40px));
  margin: clamp(34px, 5vw, 62px) auto 0;
}

.work-story-single-copy p {
  margin: 0;
  color: #536b80;
  font-size: clamp(0.96rem, 1.4vw, 1.1rem);
  line-height: 2;
}

.work-story-single-copy strong {
  color: #073e72;
  font-size: clamp(1.45rem, 2.7vw, 2.55rem);
  line-height: 1.4;
  letter-spacing: -0.025em;
}

@media (max-width: 720px) {
  .work-story-single-visual {
    border-radius: 20px;
  }

  .work-story-single-visual img {
    width: 155%;
    max-width: none;
    margin-left: -27.5%;
  }

  .work-story-single-copy {
    grid-template-columns: 1fr;
  }
}

.group-business-map {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 16%, rgba(47, 164, 255, 0.12), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #eef6fc 100%);
}

.group-business-map::before {
  position: absolute;
  right: -8vw;
  top: -10vw;
  width: 30vw;
  height: 30vw;
  border: 1px solid rgba(23, 105, 255, 0.1);
  border-radius: 50%;
  content: "";
}

.group-business-map-heading {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto clamp(42px, 6vw, 72px);
  text-align: center;
}

.group-business-map-heading > span {
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.group-business-map-heading h2 {
  margin: 14px 0 20px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.group-business-map-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 2;
}

.group-business-diagram {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
}

.group-purpose-core {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) auto auto;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  width: 100%;
  min-height: 132px;
  margin: 76px auto 0;
  padding: 28px clamp(24px, 4vw, 48px);
  color: var(--navy);
  background:
    linear-gradient(90deg, rgba(23, 105, 255, 0.06), rgba(4, 154, 154, 0.07)),
    #fff;
  border: 1px solid rgba(7, 70, 126, 0.14);
  border-top: 7px solid #087fad;
  border-radius: 10px 10px 22px 22px;
  box-shadow: 0 22px 48px rgba(5, 64, 117, 0.13);
  text-align: left;
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.group-purpose-core:hover,
.group-purpose-core:focus-visible {
  box-shadow: 0 30px 66px rgba(5, 64, 117, 0.3);
  transform: translateY(-5px);
}

.group-purpose-core::before {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 76px;
  background: rgba(23, 105, 255, 0.34);
  content: "";
}

.group-foundation-brand {
  display: block;
  min-width: 0;
}

.group-foundation-brand img {
  display: block;
  width: min(100%, 330px);
  height: 54px;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: multiply;
  filter: contrast(1.02);
}

.group-foundation-brand small {
  display: block;
  margin-top: 10px;
  color: #5c778c;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.group-foundation-functions {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #47677e;
}

.group-foundation-functions > span {
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.group-foundation-functions > span:not(:last-child)::after {
  margin-left: 10px;
  color: rgba(7, 70, 126, 0.28);
  content: "/";
}

.group-purpose-link {
  color: #087fad;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.group-purpose-link i,
.group-business-scene i {
  margin-left: 6px;
  font-style: normal;
}

.group-business-branches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 46px);
}

.group-business-branches::before {
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: -38px;
  height: 38px;
  border: solid rgba(23, 105, 255, 0.34);
  border-width: 0 1px 1px;
  content: "";
}

.group-business-company {
  position: relative;
  display: flex;
  min-height: 440px;
  flex-direction: column;
  padding: clamp(28px, 4vw, 46px);
  overflow: hidden;
  border: 1px solid rgba(7, 70, 126, 0.12);
  border-radius: 26px;
  box-shadow: 0 22px 54px rgba(28, 74, 111, 0.1);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.group-business-company:hover,
.group-business-company:focus-visible {
  box-shadow: 0 30px 66px rgba(28, 74, 111, 0.17);
  transform: translateY(-6px);
}

.group-business-company::before {
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--company-accent);
  content: "";
}

.group-business-company::after {
  position: absolute;
  right: -64px;
  top: -64px;
  width: 180px;
  height: 180px;
  border: 36px solid color-mix(in srgb, var(--company-accent) 10%, transparent);
  border-radius: 50%;
  content: "";
}

.group-business-insurance {
  --company-accent: #1769ff;
  background: rgba(255, 255, 255, 0.94);
}

.group-business-partners {
  --company-accent: #049a9a;
  background: rgba(255, 255, 255, 0.94);
}

.group-business-company-head,
.group-business-company > p,
.group-business-company ul,
.group-business-scene {
  position: relative;
  z-index: 1;
}

.group-business-company-head span {
  color: var(--company-accent);
  font-family: var(--font-en);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.group-business-company-head h3 {
  margin: 12px 0 20px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.7vw, 2.25rem);
  line-height: 1.35;
}

.group-business-company-logo {
  display: block;
  width: min(100%, 430px);
  height: clamp(42px, 5vw, 58px);
  margin: 16px 0 24px;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: multiply;
  filter: contrast(1.02);
}

.group-business-company > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.9;
}

.group-business-company ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 30px;
  padding: 0;
  list-style: none;
}

.group-business-company li {
  padding: 8px 12px;
  color: #31526e;
  background: color-mix(in srgb, var(--company-accent) 8%, white);
  border: 1px solid color-mix(in srgb, var(--company-accent) 18%, white);
  border-radius: 999px;
  font-size: 0.72rem;
}

.group-business-scene {
  margin-top: auto;
  padding: 18px 20px;
  color: #fff;
  background: color-mix(in srgb, var(--company-accent) 88%, #073b74);
  border-radius: 14px;
}

.group-business-scene small,
.group-business-scene strong {
  display: block;
}

.group-business-scene small {
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--font-en);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.group-business-scene strong {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.55;
}

.group-business-outcome {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 24px);
  margin-top: 34px;
  padding: 22px 24px;
  color: #49667d;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(7, 70, 126, 0.1);
  border-radius: 16px;
  font-size: 0.78rem;
}

.group-business-outcome i {
  color: #1769ff;
  font-style: normal;
}

.group-business-outcome strong {
  color: var(--navy);
}

@media (max-width: 700px) {
  .group-business-map-heading {
    text-align: left;
  }

  .group-purpose-core {
    grid-template-columns: 1fr;
    min-height: 160px;
    margin: 56px auto 0;
    padding: 22px;
    border-radius: 26px;
  }

  .group-foundation-functions,
  .group-purpose-link {
    grid-column: 1 / -1;
  }

  .group-foundation-brand img {
    width: min(100%, 300px);
    height: 48px;
  }

  .group-foundation-functions {
    flex-wrap: wrap;
  }

  .group-purpose-core::before {
    height: 56px;
  }

  .group-business-branches {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .group-business-branches::before {
    display: none;
  }

  .group-business-company {
    min-height: 390px;
  }

  .group-business-outcome {
    align-items: stretch;
    flex-direction: column;
    text-align: center;
  }

  .group-business-outcome i {
    transform: rotate(90deg);
  }
}

.work-business-heading {
  max-width: 760px;
  margin-bottom: 34px;
}

.work-business-heading > span {
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.work-business-heading h3 {
  margin: 10px 0 12px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.work-business-heading p {
  color: var(--muted);
  line-height: 1.9;
}

.work-business-philosophy {
  margin: 20px 0 22px;
  padding: 18px 0 18px 20px;
  border-left: 2px solid rgba(23, 105, 255, 0.5);
}

.work-business-philosophy small,
.work-business-philosophy strong {
  display: block;
}

.work-business-philosophy small {
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.work-business-philosophy strong {
  margin-top: 8px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.5;
}

.work-business-philosophy strong:first-child {
  margin-top: 0;
}

.work-business-philosophy p {
  margin: 8px 0 0;
  font-size: 0.86rem;
  line-height: 1.75;
}

.work-business-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.work-business-links a {
  display: grid;
  min-height: 240px;
  padding: clamp(26px, 4vw, 42px);
  color: #fff;
  background:
    radial-gradient(circle at 88% 14%, rgba(93, 198, 255, 0.3), transparent 28%),
    linear-gradient(135deg, #063d74, #087caf);
  border-radius: 20px;
  box-shadow: 0 18px 46px rgba(7, 58, 114, 0.16);
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.work-business-links a:hover,
.work-business-links a:focus-visible {
  box-shadow: 0 26px 60px rgba(7, 58, 114, 0.25);
  transform: translateY(-5px);
}

.work-business-links small {
  color: #8fd9ff;
  font-family: var(--font-en);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.work-business-links strong {
  align-self: center;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.55rem);
  line-height: 1.35;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.work-business-links span {
  align-self: end;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
}

.work-business-links i {
  margin-left: 8px;
  font-style: normal;
}

@media (max-width: 700px) {
  .work-business-links {
    grid-template-columns: 1fr;
  }

  .work-business-links a {
    min-height: 190px;
  }
}

.page-work .work-fields-heading {
  margin-top: clamp(70px, 9vw, 110px);
}

.page-work .work-field-list {
  display: block;
  border-top: 1px solid rgba(16, 52, 93, 0.2);
}

.page-work .work-field-list details {
  border-bottom: 1px solid rgba(16, 52, 93, 0.2);
  background: transparent;
  transition: background 200ms ease;
}

.page-work .work-field-list details:hover,
.page-work .work-field-list details[open] {
  background: rgba(255, 255, 255, 0.72);
}

.page-work .work-field-list summary {
  display: grid;
  grid-template-columns: minmax(130px, 0.75fr) minmax(180px, 1fr) minmax(280px, 2fr) 46px;
  gap: clamp(18px, 3vw, 44px);
  align-items: center;
  min-height: 132px;
  padding: 24px clamp(12px, 2vw, 26px);
  list-style: none;
  cursor: pointer;
}

.page-work .work-field-list summary::-webkit-details-marker {
  display: none;
}

.page-work .work-field-list summary > span {
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.page-work .work-field-list summary h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 2.25rem);
}

.page-work .work-field-list summary p {
  margin: 0;
  color: #3e566c;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 700;
  line-height: 1.65;
}

.page-work .work-field-list summary i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #1769ff;
  border: 1px solid rgba(23, 105, 255, 0.35);
  border-radius: 50%;
  font-style: normal;
  font-size: 1.35rem;
  transition: color 180ms ease, background 180ms ease, transform 240ms ease;
}

.page-work .work-field-list details:hover summary i,
.page-work .work-field-list details[open] summary i {
  color: #fff;
  background: #1769ff;
}

.page-work .work-field-list details[open] summary i {
  transform: rotate(45deg);
}

.page-work .work-field-list details > div {
  padding: 0 clamp(70px, 8vw, 120px) 38px calc(130px + clamp(18px, 3vw, 44px));
}

.page-work .work-field-list details > div p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--muted);
  line-height: 2;
}

@media (max-width: 800px) {
  .page-work .work-field-list summary {
    grid-template-columns: 1fr 46px;
    gap: 8px 18px;
    min-height: 0;
    padding: 28px 8px;
  }

  .page-work .work-field-list summary > span,
  .page-work .work-field-list summary h3,
  .page-work .work-field-list summary p {
    grid-column: 1;
  }

  .page-work .work-field-list summary i {
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  .page-work .work-field-list summary p {
    margin-top: 6px;
  }

  .page-work .work-field-list details > div {
    padding: 0 62px 30px 8px;
  }
}

/* Home: philosophy and people first */
.home-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 1180px;
  margin: clamp(52px, 7vw, 86px) auto 0;
  border-top: 0;
}

.home-equal-card {
  position: relative;
  display: grid;
  grid-template-columns: clamp(120px, 16vw, 210px) minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(28px, 5vw, 70px);
  width: calc(100% - 38px);
  min-height: 145px;
  padding: clamp(20px, 2.8vw, 30px) clamp(22px, 4vw, 48px);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 88% 18%, rgba(71, 181, 255, 0.3), transparent 24%),
    linear-gradient(135deg, #063d74, #086ca8 68%, #158bc4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(7, 58, 114, 0.17);
  text-decoration: none;
  transition: color 0.22s ease, background 0.28s ease, padding-left 0.22s ease;
}

.home-equal-card:nth-child(odd) {
  margin-right: 38px;
}

.home-equal-card:nth-child(even) {
  margin-left: 38px;
  background:
    radial-gradient(circle at 12% 82%, rgba(79, 194, 255, 0.24), transparent 26%),
    linear-gradient(135deg, #07568f, #087cb7 70%, #23a4d2);
}

.home-equal-card:hover,
.home-equal-card:focus-within,
.home-equal-card:focus-visible {
  color: #fff;
  padding-left: clamp(30px, 5vw, 68px);
  box-shadow: 0 26px 66px rgba(7, 58, 114, 0.26);
  transform: translateY(-4px);
}

.home-equal-card > span {
  grid-column: 1;
  grid-row: 1 / -1;
  color: #8fd9ff;
  font-family: var(--font-en);
  font-size: clamp(0.72rem, 1.2vw, 0.9rem);
  font-weight: 900;
  letter-spacing: 0.12em;
}

.home-equal-card > p {
  grid-column: 2;
  grid-row: 1;
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.86rem;
}

.home-equal-card > h3 {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.6vw, 2.35rem);
  line-height: 1.35;
}

.home-equal-card > small {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  padding-top: 10px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.76rem;
}

.home-equal-card > i {
  grid-column: 3;
  grid-row: 1 / -1;
  align-self: center;
  color: #fff;
  font-size: 1.5rem;
  font-style: normal;
}

.home-equal-people {
  background:
    radial-gradient(circle at 88% 18%, rgba(71, 181, 255, 0.3), transparent 24%),
    linear-gradient(135deg, #063d74, #086ca8 68%, #158bc4);
}

.home-contact-link {
  display: flex;
  width: fit-content;
  margin: 22px 0 0 auto;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.home-contact-link span {
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
}

.home-contact-link i {
  color: #1769ff;
  font-style: normal;
  transition: transform 0.2s ease;
}

.home-contact-link:hover i {
  transform: translateX(5px);
}

.home-equal-movie {
  position: relative;
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  width: clamp(210px, 26vw, 340px);
  height: clamp(110px, 15vw, 170px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
}

.home-equal-movie video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-equal-movie b {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 42px;
  height: 42px;
  color: #fff;
  background: rgba(7, 27, 53, 0.72);
  border-radius: 50%;
  place-items: center;
  transform: translate(-50%, -50%);
}

.home-equal-movie small {
  position: absolute;
  bottom: 8px;
  left: 10px;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.home-equal-people > a {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  padding-top: 20px;
  color: #a9e3ff;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 900px) {
  .home-equal-card {
    grid-template-columns: 100px minmax(0, 1fr) auto;
    column-gap: 24px;
  }

  .home-equal-movie {
    width: 220px;
    height: 120px;
  }
}

@media (max-width: 700px) {
  .home-content-grid {
    gap: 8px;
  }

  .home-equal-card {
    grid-template-columns: 86px minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    min-height: 82px;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding: 14px 18px;
    column-gap: 12px;
    border-radius: 12px;
  }

  .home-equal-card:nth-child(odd),
  .home-equal-card:nth-child(even) {
    margin-right: 0;
    margin-left: 0;
  }

  .home-equal-card > span {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    font-size: 0.6rem;
  }

  .home-equal-card > p {
    display: none;
  }

  .home-equal-card > h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: clamp(1.15rem, 5.6vw, 1.55rem);
    white-space: nowrap;
  }

  .home-equal-card > small {
    display: none;
  }

  .home-equal-card > i {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    font-size: 1rem;
  }

  .home-contact-link {
    margin-top: 16px;
    font-size: 0.72rem;
  }
}

.home-priority {
  display: grid;
  gap: 22px;
  max-width: 1180px;
  margin: clamp(52px, 7vw, 86px) auto 0;
}

.home-feature {
  position: relative;
  display: grid;
  min-height: 560px;
  padding: clamp(34px, 6vw, 74px);
  overflow: hidden;
  color: #fff;
  border-radius: 34px;
  text-decoration: none;
  transition: transform 240ms ease, box-shadow 240ms ease;
}

.home-feature:hover,
.home-feature:focus-visible {
  transform: translateY(-6px);
  box-shadow: 0 30px 80px rgba(9, 35, 67, 0.2);
}

.home-philosophy {
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(circle at 82% 25%, rgba(54, 161, 255, 0.36), transparent 25%),
    linear-gradient(145deg, #061a33, #103f70 62%, #1769a8);
}

.home-philosophy::after {
  content: "WHY";
  position: absolute;
  right: -0.03em;
  bottom: -0.2em;
  color: rgba(255, 255, 255, 0.055);
  font-family: var(--font-en);
  font-size: clamp(9rem, 26vw, 23rem);
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.home-feature > *,
.home-people-copy,
.home-people-voices {
  position: relative;
  z-index: 1;
}

.home-feature-number {
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.home-philosophy > div {
  align-self: center;
  max-width: 790px;
}

.home-feature div > p:first-child,
.home-people-copy > p:first-of-type {
  margin: 0 0 13px;
  color: #75c8ff;
  font-weight: 800;
}

.home-feature h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.home-feature-copy {
  max-width: 660px;
  margin: 26px 0 0;
  color: rgba(255, 255, 255, 0.75);
  line-height: 2;
}

.home-feature strong {
  display: inline-flex;
  gap: 16px;
  align-items: center;
  align-self: end;
  justify-self: start;
}

.home-feature strong i,
.home-secondary i {
  font-style: normal;
  transition: transform 180ms ease;
}

.home-feature:hover strong i,
.home-secondary a:hover i {
  transform: translateX(6px);
}

.home-people {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: clamp(36px, 6vw, 90px);
  color: var(--navy);
  border: 1px solid rgba(16, 52, 93, 0.1);
  background:
    radial-gradient(circle at 92% 4%, rgba(255, 193, 58, 0.24), transparent 27%),
    linear-gradient(145deg, #fff, #eaf5ff);
}

.home-people-copy {
  display: flex;
  flex-direction: column;
}

.home-people .home-feature-number,
.home-people-copy > p:first-of-type {
  color: #1769ff;
}

.home-people h3 {
  margin-top: 44px;
  font-size: clamp(2.7rem, 5.5vw, 5.6rem);
}

.home-people .home-feature-copy {
  color: var(--muted);
}

.home-people strong {
  margin-top: auto;
  padding-top: 34px;
  color: #1769ff;
}

.home-people-voices {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-people-voices blockquote {
  margin: 0;
  padding: 24px 0;
  color: var(--navy);
  border-top: 1px solid rgba(16, 52, 93, 0.16);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 800;
  line-height: 1.6;
}

.home-people-voices blockquote:last-child {
  border-bottom: 1px solid rgba(16, 52, 93, 0.16);
}

.home-secondary {
  max-width: 1180px;
  margin: clamp(70px, 10vw, 120px) auto 0;
}

.home-secondary > p {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 0.86rem;
}

.home-secondary > div {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 14px;
}

.home-secondary a {
  display: flex;
  min-height: 126px;
  padding: 28px 30px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: #fff;
  border-radius: 22px;
  background: #102a43;
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}

.home-secondary a:last-child {
  background: #1769a8;
}

.home-secondary a:hover {
  background: #1769ff;
  transform: translateY(-3px);
}

.home-secondary span {
  font-size: clamp(1rem, 1.7vw, 1.3rem);
  font-weight: 800;
}

.home-secondary small {
  display: block;
  margin-bottom: 7px;
  color: #8fd4ff;
  font-family: var(--font-en);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
}

@media (max-width: 820px) {
  .home-feature {
    min-height: 510px;
  }

  .home-people {
    grid-template-columns: 1fr;
  }

  .home-people-voices {
    margin-top: 12px;
  }

  .home-secondary > div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .home-feature {
    min-height: 480px;
    padding: 30px 24px;
    border-radius: 24px;
  }

  .home-philosophy h3 br {
    display: none;
  }

  .home-people {
    min-height: 0;
  }

  .home-people h3 {
    margin-top: 28px;
  }

  .home-secondary a {
    min-height: 104px;
    padding: 24px;
  }
}

/* Featured people movie on home */
.home-people-link {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 34px;
  color: #1769ff;
  text-decoration: none;
}

.home-people-link strong {
  margin: 0;
  padding: 0;
}

.home-people-media {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.home-top-movie {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  overflow: hidden;
  color: #fff;
  border: 0;
  border-radius: 26px;
  background: #0b2948;
  box-shadow: 0 22px 60px rgba(11, 41, 72, 0.2);
  cursor: pointer;
}

.home-top-movie img,
.home-top-movie video,
.home-top-movie-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-top-movie img,
.home-top-movie video {
  object-fit: cover;
  transition: transform 500ms ease;
}

.home-top-movie-shade {
  background: linear-gradient(180deg, rgba(5, 25, 47, 0.08), rgba(5, 25, 47, 0.82));
}

.home-top-play {
  position: absolute;
  z-index: 2;
  top: 48%;
  left: 50%;
  display: grid;
  width: clamp(76px, 9vw, 104px);
  height: clamp(76px, 9vw, 104px);
  padding-left: 6px;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(23, 105, 255, 0.86);
  box-shadow: 0 10px 34px rgba(2, 26, 58, 0.3);
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  transition: transform 220ms ease, background 220ms ease;
}

.home-top-movie-label {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 24px;
  left: 24px;
  text-align: left;
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 800;
  line-height: 1.55;
}

.home-top-movie-label small {
  display: block;
  margin-bottom: 8px;
  color: #8fd4ff;
  font-family: var(--font-en);
  font-size: 0.64rem;
  letter-spacing: 0.13em;
}

.home-top-movie:hover img,
.home-top-movie:hover video,
.home-top-movie:focus-visible img,
.home-top-movie:focus-visible video {
  transform: scale(1.045);
}

.home-top-movie:hover .home-top-play,
.home-top-movie:focus-visible .home-top-play {
  background: #1769ff;
  transform: translate(-50%, -50%) scale(1.1);
}

.home-top-movie:focus-visible {
  outline: 3px solid #1769ff;
  outline-offset: 5px;
}

.home-people-media > p {
  margin: 15px 4px 0;
  color: var(--muted);
  font-size: 0.78rem;
}

@media (max-width: 820px) {
  .home-top-movie {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 560px) {
  .home-people-link {
    margin-top: 0;
  }

  .home-top-movie {
    aspect-ratio: 4 / 5;
    border-radius: 20px;
  }
}

.people-movie-video {
  display: block;
  width: 100%;
  max-height: min(64vh, 680px);
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #061628;
}

/* Training gallery and development systems */
.culture-tags .culture-tag-button {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  color: var(--navy);
  border: 1px solid rgba(23, 105, 255, 0.34);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(7, 58, 114, 0.1);
  font-family: var(--font-ja);
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  animation: tagFloat 5s -1.8s ease-in-out infinite;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.culture-tags .culture-tag-button i {
  display: grid;
  width: 21px;
  height: 21px;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: #1769ff;
  font-style: normal;
  font-size: 0.85rem;
}

.culture-tags .culture-tag-button:hover,
.culture-tags .culture-tag-button:focus-visible {
  color: #fff;
  background: #1769ff;
  animation-play-state: paused;
}

.culture-tags .culture-tag-button:hover i,
.culture-tags .culture-tag-button:focus-visible i {
  color: #1769ff;
  background: #fff;
}

.training-modal {
  width: min(1120px, calc(100vw - 34px));
  max-height: min(92vh, 980px);
  padding: 0;
  overflow: hidden;
  color: var(--navy);
  border: 0;
  border-radius: 30px;
  background: #f6f9fc;
  box-shadow: 0 40px 120px rgba(5, 18, 36, 0.4);
}

.training-modal::backdrop {
  background: rgba(7, 20, 38, 0.74);
  backdrop-filter: blur(10px);
}

.training-modal[open] {
  animation: people-modal-in 240ms ease both;
}

.training-modal-close {
  position: absolute;
  z-index: 5;
  top: 18px;
  right: 18px;
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(8, 26, 49, 0.84);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.training-modal-scroll {
  max-height: min(92vh, 980px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.training-modal-header {
  padding: clamp(58px, 8vw, 96px) clamp(28px, 7vw, 84px) clamp(42px, 6vw, 68px);
  color: #fff;
  background:
    radial-gradient(circle at 90% 0%, rgba(117, 200, 255, 0.3), transparent 30%),
    linear-gradient(145deg, #071b35, #104675);
}

.training-modal-header > span,
.development-heading > span {
  color: #75c8ff;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.training-modal-header h2 {
  max-width: 850px;
  margin: 20px 0 28px;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 6rem);
  line-height: 1.12;
}

.training-modal-header p {
  max-width: 700px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  line-height: 2;
}

.training-gallery {
  display: grid;
  grid-template-columns: 1.45fr 0.85fr;
  gap: 16px;
  padding: clamp(24px, 4vw, 48px);
}

.training-gallery figure {
  position: relative;
  min-height: 360px;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #dce8f2;
}

.training-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.training-gallery .training-photo-main img {
  filter: brightness(1.16) contrast(0.96);
}

.training-gallery figcaption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  padding: 12px 15px;
  color: #fff;
  border-radius: 12px;
  background: rgba(7, 27, 53, 0.76);
  backdrop-filter: blur(7px);
  font-size: 0.78rem;
}

.contribution-gallery {
  grid-template-columns: 0.9fr 1.25fr;
  align-items: stretch;
  width: min(100%, 820px);
  margin-right: auto;
  margin-left: auto;
}

.contribution-activity {
  width: min(100%, 920px);
  margin: clamp(42px, 6vw, 66px) auto clamp(30px, 5vw, 48px);
}

.contribution-gallery .training-photo-main {
  display: grid;
  min-height: 520px;
  padding: clamp(10px, 1.5vw, 18px);
  place-items: center;
  background: #edf3f8;
}

.contribution-gallery .training-photo-main img {
  object-fit: contain;
}

.contribution-gallery-side {
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.contribution-gallery .contribution-gallery-side figure {
  min-height: 0;
}

.contribution-gallery .contribution-gallery-side img {
  object-fit: contain;
  background: #edf3f8;
}

.sponsor-activity {
  width: min(100%, 920px);
  margin: clamp(52px, 8vw, 90px) auto 0;
  padding-top: clamp(36px, 5vw, 58px);
  border-top: 1px solid rgba(20, 58, 91, 0.16);
}

.sponsor-activity-heading {
  max-width: 680px;
}

.sponsor-activity-heading > span,
.sponsor-team-sport {
  color: #24779b;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.sponsor-activity-heading h3 {
  margin: 12px 0 18px;
  color: #102f4d;
  font-size: clamp(1.75rem, 4vw, 2.8rem);
  line-height: 1.45;
}

.sponsor-activity-heading p,
.sponsor-team p {
  margin: 0;
  color: #526577;
  line-height: 2;
}

.sponsor-teams {
  display: grid;
  gap: 22px;
  margin-top: clamp(30px, 5vw, 48px);
}

.sponsor-team {
  overflow: hidden;
  border: 1px solid rgba(20, 58, 91, 0.12);
  border-radius: 20px;
  background: #f6f9fb;
}

.sponsor-team-text,
.sponsor-team-copy {
  padding: clamp(24px, 4vw, 38px);
}

.sponsor-team h4 {
  margin: 8px 0 12px;
  color: #102f4d;
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
}

.sponsor-team-text {
  position: relative;
  background: linear-gradient(135deg, #f7fafc, #edf5f7);
}

.sponsor-team-text::after {
  position: absolute;
  top: 50%;
  right: clamp(22px, 5vw, 54px);
  width: 68px;
  height: 68px;
  border: 1px solid rgba(36, 119, 155, 0.2);
  border-radius: 50%;
  content: "";
  transform: translateY(-50%);
}

.sponsor-team-text p {
  max-width: 650px;
  padding-right: 90px;
}

.sponsor-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: #d9e2e8;
}

.sponsor-photo-grid-single {
  grid-template-columns: 1fr;
}

.sponsor-photo-grid-single figure {
  min-height: 380px;
}

.sponsor-photo-grid figure {
  position: relative;
  min-height: 280px;
  margin: 0;
  background: #e8eef2;
}

.sponsor-photo-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sponsor-photo-grid figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  padding: 10px 12px;
  color: #fff;
  border-radius: 10px;
  background: rgba(7, 27, 53, 0.72);
  font-size: 0.74rem;
  backdrop-filter: blur(6px);
}

/* Internal events: add future event sections inside .event-collection */
.culture-tags .event-tag-button {
  border-color: rgba(111, 74, 183, 0.36);
}

.culture-tags .event-tag-button i {
  background: #7450bd;
}

.culture-tags .event-tag-button:hover,
.culture-tags .event-tag-button:focus-visible {
  background: #6542ad;
}

.culture-tags .event-tag-button:hover i,
.culture-tags .event-tag-button:focus-visible i {
  color: #6542ad;
}

.event-modal-header {
  background:
    radial-gradient(circle at 88% 0%, rgba(224, 190, 255, 0.3), transparent 32%),
    linear-gradient(145deg, #21153d, #553183 58%, #7450bd);
}

.event-modal-header > span,
.event-entry-heading > span {
  color: #ddc2ff;
}

.event-collection {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
  padding: clamp(28px, 5vw, 56px);
}

.event-entry {
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid rgba(73, 46, 120, 0.14);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(35, 18, 65, 0.09);
}

.event-entry-heading {
  margin-bottom: 24px;
}

.event-entry-heading > span {
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.event-entry-heading h3 {
  margin: 10px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
}

.event-entry-heading p {
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
}

.event-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.event-gallery figure {
  position: relative;
  min-height: 320px;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #eee9f5;
}

.event-gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.entrance-ceremony-gallery img {
  filter: brightness(1.28) contrast(0.94) saturate(1.04);
}

.event-gallery figcaption {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  padding: 11px 14px;
  color: #fff;
  border-radius: 11px;
  background: rgba(31, 18, 55, 0.76);
  backdrop-filter: blur(7px);
  font-size: 0.78rem;
}

.bbq-gallery {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 820px);
  margin: 0 auto;
}

.bbq-gallery figure {
  min-height: 0;
  aspect-ratio: 4 / 3;
}

.company-trip-gallery {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  width: min(100%, 820px);
  margin: 0 auto;
}

.company-trip-gallery figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #e9eef4;
}

.company-trip-landscape {
  grid-column: span 2;
  aspect-ratio: 4 / 3;
}

.company-trip-portrait {
  grid-column: span 2;
  aspect-ratio: 3 / 4;
}

.company-trip-portrait:nth-last-child(2) {
  grid-column: 2 / span 2;
}

.company-trip-portrait:last-child {
  grid-column: 4 / span 2;
}

.company-trip-gallery img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.company-trip-gallery figcaption {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  padding: 9px 12px;
  color: #fff;
  border-radius: 10px;
  background: rgba(16, 30, 50, 0.72);
  backdrop-filter: blur(7px);
  font-size: 0.75rem;
}

/* Employee benefits */
.culture-tags .benefits-tag-button {
  border-color: rgba(28, 151, 124, 0.38);
}

.culture-tags .benefits-tag-button i {
  background: #199476;
}

.culture-tags .benefits-tag-button:hover,
.culture-tags .benefits-tag-button:focus-visible {
  background: #147c64;
}

.culture-tags .benefits-tag-button:hover i,
.culture-tags .benefits-tag-button:focus-visible i {
  color: #147c64;
}

.benefits-modal-header {
  background:
    radial-gradient(circle at 88% 0%, rgba(135, 238, 207, 0.28), transparent 32%),
    linear-gradient(145deg, #0b352e, #146d5b 58%, #199476);
}

.benefits-modal-header > span,
.benefits-card > span {
  color: #94ead4;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: clamp(28px, 5vw, 56px) clamp(28px, 5vw, 56px) 24px;
}

.benefits-card {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(19, 117, 93, 0.14);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(9, 71, 59, 0.08);
}

.benefits-card > span {
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.benefits-card h3 {
  margin: 10px 0 20px;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.benefits-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.benefits-card li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.65;
}

.benefits-card li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #199476;
}

.benefits-photo-coming {
  display: grid;
  min-height: 190px;
  place-items: center;
  border-radius: 16px;
  background:
    radial-gradient(circle at 25% 22%, rgba(148, 234, 212, 0.5), transparent 32%),
    linear-gradient(145deg, #e8f7f2, #d6eee7);
}

.benefits-photo-coming > span {
  color: #19745f;
  font-family: var(--font-en);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: center;
}

.benefits-photo-coming small {
  display: block;
  margin-top: 6px;
  font-size: 0.72em;
}

.benefits-jiujitsu-feature {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  margin: 0 clamp(28px, 5vw, 56px) clamp(48px, 7vw, 72px);
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(19, 117, 93, 0.14);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(9, 71, 59, 0.08);
}

.activity-jiujitsu-feature {
  margin-top: 0;
}

.activity-culture-section-with-jiujitsu {
  padding-bottom: clamp(34px, 5vw, 56px);
}

.activity-jiujitsu-heading {
  padding: clamp(42px, 6vw, 68px) clamp(28px, 6vw, 70px) clamp(24px, 3vw, 34px);
  background: #f5f9fb;
}

.activity-jiujitsu-heading > span {
  color: #168f7d;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.activity-jiujitsu-heading h3 {
  margin: 14px 0 0;
  color: #073e72;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 3.6rem);
  line-height: 1.25;
}

.benefits-jiujitsu-copy > span {
  color: #199476;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.benefits-jiujitsu-copy h3 {
  margin: 10px 0 16px;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
}

.benefits-jiujitsu-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.8;
}

.benefits-jiujitsu-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-height: 250px;
  overflow: hidden;
  border-radius: 16px;
  background: #e8f1ee;
}

.benefits-jiujitsu-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
}

.benefits-jiujitsu-gallery img:first-child {
  object-position: center 48%;
}

.benefits-jiujitsu-gallery img:last-child {
  object-position: center 52%;
}

.benefits-recognition {
  padding: clamp(44px, 7vw, 80px) clamp(28px, 5vw, 56px) clamp(64px, 9vw, 104px);
  background: #eff7f4;
}

.benefits-recognition-heading {
  max-width: 760px;
  margin-bottom: clamp(30px, 5vw, 48px);
}

.benefits-recognition-heading > span {
  color: #147c64;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.benefits-recognition-heading h3 {
  margin: 14px 0 18px;
  color: #103c34;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 3.6rem);
  line-height: 1.35;
}

.benefits-recognition-heading p {
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
}

.benefits-recognition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.recognition-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 28px);
  min-height: 210px;
  padding: clamp(24px, 3.5vw, 36px);
  border: 1px solid rgba(19, 117, 93, 0.13);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
}

.recognition-card-featured {
  grid-column: 1 / -1;
  grid-template-columns: 120px minmax(0, 1fr);
  background: linear-gradient(135deg, #0e4c40, #16816a);
}

.recognition-year {
  align-self: start;
  padding-top: 7px;
  color: #16816a;
  border-top: 2px solid currentColor;
  font-family: var(--font-en);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.recognition-card small {
  color: #199476;
  font-family: var(--font-en);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.recognition-card h4 {
  margin: 8px 0 13px;
  color: #103c34;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.5;
}

.recognition-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.85;
}

.recognition-card-featured .recognition-year,
.recognition-card-featured small {
  color: #99ecd7;
}

.recognition-card-featured h4,
.recognition-card-featured p {
  color: #fff;
}

.recognition-note {
  margin: 18px 0 0;
  color: #71827d;
  font-size: 0.72rem;
  line-height: 1.7;
}

.development-section {
  padding: clamp(44px, 7vw, 84px) clamp(28px, 6vw, 70px) clamp(64px, 9vw, 110px);
  background: #fff;
}

.development-heading {
  max-width: 720px;
  margin-bottom: 38px;
}

.development-heading > span {
  color: #1769ff;
}

.development-heading h3 {
  margin: 14px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.2;
}

.development-heading p {
  color: var(--muted);
  line-height: 1.9;
}

.development-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.development-grid article {
  min-height: 230px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(16, 52, 93, 0.1);
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, #f1f7fc);
}

.development-grid article > span {
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.74rem;
  font-weight: 800;
}

.development-grid h4 {
  margin: 26px 0 14px;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.development-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
}

body:has(.training-modal[open]) {
  overflow: hidden;
}

@media (max-width: 760px) {
  .training-modal {
    width: 100vw;
    max-width: none;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .training-modal-scroll {
    max-height: 100dvh;
  }

  .training-gallery,
  .development-grid {
    grid-template-columns: 1fr;
  }

  .training-gallery figure {
    min-height: 260px;
    aspect-ratio: 4 / 3;
  }

  .contribution-gallery .training-photo-main {
    min-height: 0;
    aspect-ratio: 3 / 4;
  }

  .contribution-gallery-side {
    grid-template-rows: none;
  }

  .contribution-gallery .contribution-gallery-side figure {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .sponsor-photo-grid {
    grid-template-columns: 1fr;
  }

  .sponsor-photo-grid figure {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .sponsor-team-text p {
    padding-right: 0;
  }

  .sponsor-team-text::after {
    display: none;
  }

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

  .event-gallery figure {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

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

  .company-trip-landscape,
  .company-trip-portrait {
    grid-column: auto;
  }

  .company-trip-portrait:nth-last-child(2),
  .company-trip-portrait:last-child {
    grid-column: auto;
  }

  .company-trip-landscape {
    aspect-ratio: 4 / 3;
  }

  .company-trip-portrait {
    aspect-ratio: 3 / 4;
  }

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

  .benefits-jiujitsu-feature {
    grid-template-columns: 1fr;
  }

  .benefits-recognition-grid {
    grid-template-columns: 1fr;
  }

  .recognition-card,
  .recognition-card-featured {
    grid-column: auto;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .recognition-year {
    width: fit-content;
    min-width: 88px;
  }
}

/* Work page: philosophy-to-action story */
.work-bridge {
  position: relative;
  display: grid;
  min-height: 78vh;
  padding: clamp(90px, 13vw, 180px) max(6vw, 28px);
  place-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(41, 168, 223, 0.28), transparent 32%),
    linear-gradient(145deg, #071b35, #103f70 55%, #0a294b);
}

.work-bridge::before,
.work-bridge::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

.work-bridge::before {
  top: 50%;
  left: 50%;
  width: min(70vw, 760px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.work-bridge::after {
  top: 50%;
  left: 50%;
  width: min(48vw, 520px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.work-bridge > * {
  position: relative;
  z-index: 1;
}

.work-bridge-line {
  width: 1px;
  height: 70px;
  margin: 0 auto 26px;
  background: linear-gradient(transparent, #75c8ff);
}

.work-bridge-en {
  margin: 0 0 18px;
  color: #75c8ff;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.work-bridge h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 7.5rem);
  line-height: 1.08;
  letter-spacing: 0.02em;
}

.work-bridge > p:not(.work-bridge-en) {
  max-width: 680px;
  margin: 34px auto 0;
  color: rgba(255, 255, 255, 0.78);
  line-height: 2;
}

.work-bridge a {
  display: inline-flex;
  gap: 18px;
  align-items: center;
  justify-self: center;
  margin-top: 42px;
  padding: 13px 24px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease;
}

.work-bridge a:hover {
  border-color: #75c8ff;
  background: rgba(117, 200, 255, 0.12);
}

.page-work .work-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 94% 15%, rgba(41, 168, 223, 0.12), transparent 24%),
    #f6f9fc;
}

.work-story-intro {
  display: grid;
  grid-template-columns: 0.7fr 2fr 1.3fr;
  gap: 28px;
  align-items: end;
  margin: clamp(80px, 10vw, 140px) 0 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(16, 52, 93, 0.16);
}

.work-story-intro > p,
.work-fields-heading > span {
  margin: 0;
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.work-story-intro h3,
.work-fields-heading h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.2;
}

.work-story-intro > span {
  color: var(--muted);
  line-height: 1.85;
}

.page-work .work-story-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.page-work .work-story-track .scene-card {
  position: relative;
  display: flex;
  min-height: 470px;
  padding: clamp(28px, 3vw, 42px);
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: #fff;
  border: 0;
  border-radius: 28px;
  background: linear-gradient(155deg, #0d3865, #071c36);
}

.page-work .work-story-track .scene-card:nth-child(2) {
  background: linear-gradient(155deg, #125d82, #0b304c);
}

.page-work .work-story-track .scene-card:nth-child(3) {
  background: linear-gradient(155deg, #1769a8, #0d3f69);
}

.page-work .work-story-track .scene-card::before {
  content: attr(data-scene);
  position: absolute;
  top: 18px;
  right: 22px;
  color: rgba(255, 255, 255, 0.1);
  font-family: var(--font-en);
  font-size: clamp(6rem, 10vw, 10rem);
  font-weight: 900;
  line-height: 1;
}

.page-work .work-story-track .scene-card::after {
  content: "";
  position: absolute;
  top: 38%;
  left: 42px;
  width: 42px;
  height: 1px;
  background: #75c8ff;
}

.page-work .work-story-track .scene-card > * {
  position: relative;
  z-index: 1;
}

.page-work .work-story-track .scene-card > span {
  color: #75c8ff;
}

.page-work .work-story-track .scene-card h3 {
  color: #fff;
  font-size: clamp(1.55rem, 2.3vw, 2.35rem);
}

.page-work .work-story-track .scene-card p {
  color: rgba(255, 255, 255, 0.72);
}

.work-fields-heading {
  max-width: 760px;
  margin: clamp(100px, 13vw, 170px) 0 42px;
}

.work-fields-heading h3 {
  margin-top: 14px;
}

.work-fields-heading p {
  color: var(--muted);
  line-height: 1.8;
}

.page-work .work-cards article {
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.page-work .work-cards article:hover {
  border-color: rgba(23, 105, 255, 0.3);
  box-shadow: 0 22px 54px rgba(10, 43, 79, 0.12);
}

@media (max-width: 900px) {
  .work-story-intro {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .page-work .work-story-track {
    grid-template-columns: 1fr;
  }

  .page-work .work-story-track .scene-card {
    min-height: 400px;
  }
}

@media (max-width: 600px) {
  .work-bridge {
    min-height: 70vh;
  }

  .work-bridge::before {
    width: 110vw;
  }

  .work-bridge::after {
    width: 78vw;
  }

  .page-work .work-story-track {
    display: flex;
    width: calc(100% + 24px);
    padding-right: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .page-work .work-story-track::-webkit-scrollbar {
    display: none;
  }

  .page-work .work-story-track .scene-card {
    min-width: min(82vw, 340px);
    scroll-snap-align: start;
  }
}

/* People stories and movie dialog */
.people-tile-interactive {
  cursor: pointer;
}

.people-tile-interactive:focus-visible {
  outline: 3px solid #1769ff;
  outline-offset: 5px;
}

.people-tile-video::after {
  content: "▶";
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(82px, 10vw, 126px);
  height: clamp(82px, 10vw, 126px);
  padding-left: 7px;
  place-items: center;
  color: rgba(23, 105, 255, 0.2);
  border: 2px solid rgba(23, 105, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease, transform 220ms ease;
  pointer-events: none;
}

.people-tile-video:hover::after,
.people-tile-video:focus-visible::after {
  color: rgba(23, 105, 255, 0.48);
  border-color: rgba(23, 105, 255, 0.3);
  background: rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%) scale(1.08);
}

.people-tile-video > * {
  position: relative;
  z-index: 1;
}

.people-tile-featured-movie {
  isolation: isolate;
  color: #fff;
  background: #092b4d;
}

.people-tile-featured-movie .people-tile-preview-video,
.people-tile-featured-movie .people-tile-preview-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.people-tile-featured-movie .people-tile-preview-video {
  object-fit: cover;
  opacity: 0.64;
}

.people-tile-featured-movie .people-tile-preview-shade {
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 31, 57, 0.18), rgba(5, 31, 57, 0.84));
}

.people-tile-next-photo {
  isolation: isolate;
  color: #fff;
  background: #092f54;
}

.people-tile-next-photo > img,
.people-tile-next-photo .people-tile-next-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.people-tile-next-photo > img {
  object-fit: cover;
  object-position: center 34%;
}

.people-tile-next-photo .people-tile-next-shade {
  z-index: -1;
  background: linear-gradient(90deg, rgba(5, 30, 56, 0.94) 0%, rgba(5, 30, 56, 0.72) 47%, rgba(5, 30, 56, 0.2) 100%);
}

.people-story-profile .people-story-photo-next-challenge {
  object-position: center 30%;
}

.movie-panel[data-person-panel="accident-support"] .people-movie-copy:not(.people-movie-copy-new),
.movie-panel[data-person-panel="accident-support"] .people-modal-note {
  display: none;
}

.page-home .hero-photo-main img {
  object-position: center 45%;
}

.people-tile-featured-movie::after {
  z-index: 2;
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(7, 58, 114, 0.48);
}

.people-tile-featured-movie .role,
.people-tile-featured-movie h3,
.people-tile-featured-movie p,
.people-tile-featured-movie .people-card-action {
  z-index: 3;
  color: #fff;
  text-shadow: 0 2px 16px rgba(4, 28, 50, 0.3);
}

.people-tile-hr-day {
  isolation: isolate;
  min-height: 210px;
  color: #fff;
  background: #17334c;
}

.people-tile-hr-day > img,
.people-tile-hr-day .people-tile-hr-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.people-tile-hr-day > img {
  object-fit: cover;
  object-position: center 42%;
}

.people-tile-hr-day .people-tile-hr-shade {
  z-index: -1;
  background: linear-gradient(180deg, rgba(7, 37, 62, 0.08), rgba(7, 37, 62, 0.84));
}

.people-tile-hr-day > span,
.people-tile-hr-day h3,
.people-tile-hr-day .people-card-action {
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 0 2px 14px rgba(5, 26, 44, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .people-tile-preview-video {
    display: none;
  }
}

.people-tile .people-card-action {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin: 20px 0 0;
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* People: keep every photo story visually consistent; movies remain identifiable by play marks */
.people-tile-photo-card {
  isolation: isolate;
  min-height: 210px;
  padding: clamp(24px, 3vw, 34px);
  color: #fff;
  background: #0b3154;
}

.people-tile-photo-card > img,
.people-tile-photo-card > .people-tile-photo-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.people-tile-photo-card > img {
  object-fit: cover;
  opacity: 0.86;
  transition: opacity 220ms ease, transform 420ms ease;
}

.people-tile-photo-card > .people-tile-photo-shade {
  z-index: -1;
  background: linear-gradient(180deg, rgba(5, 29, 53, 0.1) 8%, rgba(5, 29, 53, 0.82) 88%);
}

.people-tile-photo-card:hover > img,
.people-tile-photo-card:focus-visible > img {
  opacity: 0.96;
  transform: scale(1.025);
}

.people-tile-photo-card > span,
.people-tile-photo-card .role,
.people-tile-photo-card h3,
.people-tile-photo-card blockquote,
.people-tile-photo-card .people-card-action {
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 0 2px 16px rgba(4, 28, 50, 0.42);
}

.people-tile-photo-card.tile-quote-with-photo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: clamp(28px, 4vw, 44px);
}

.people-tile-photo-card.tile-quote-with-photo > .people-tile-next-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 30, 54, 0.12) 4%, rgba(4, 30, 54, 0.48) 48%, rgba(4, 30, 54, 0.94) 100%),
    linear-gradient(90deg, rgba(4, 30, 54, 0.5), transparent 72%);
}

.people-tile-photo-card.tile-quote-with-photo > p:not(.role) {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 14px rgba(4, 28, 50, 0.48);
}

/* People movie: keep the opening audio while gently concealing the desk-only shot. */
.people-video-soft-intro {
  --intro-blur: 0px;
  --intro-brightness: 1;
  filter: blur(var(--intro-blur)) brightness(var(--intro-brightness));
  transform: scale(var(--intro-scale, 1));
  transition: filter 0.28s linear, transform 0.28s linear;
}

.people-video-frame {
  position: relative;
  overflow: hidden;
  background: #dfeaf1;
}

.people-video-frame .people-movie-video {
  display: block;
  width: 100%;
}

.people-video-opening {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 10px;
  padding: 8% 8% 20%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, #ffffff, #f3fafd 42%, #ddeef7 100%);
  color: #0b456e;
  text-align: center;
  opacity: 1;
}

.people-video-opening::before,
.people-video-opening::after {
  width: 54px;
  height: 1px;
  margin: 0 auto 8px;
  background: rgba(15, 123, 171, 0.42);
  content: "";
}

.people-video-opening::after {
  margin: 9px auto 0;
}

.people-video-opening small {
  font-size: clamp(9px, 1.1vw, 12px);
  font-weight: 800;
  letter-spacing: 0.24em;
}

.people-video-opening strong {
  font-size: clamp(15px, 2vw, 24px);
  line-height: 1.65;
  letter-spacing: 0.04em;
}

.people-video-frame.is-revealing .people-video-opening {
  animation: peopleOpeningVeil 5.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.people-video-frame.is-revealing .people-video-opening small,
.people-video-frame.is-revealing .people-video-opening strong,
.people-video-frame.is-revealing .people-video-opening::before,
.people-video-frame.is-revealing .people-video-opening::after {
  animation: peopleOpeningWords 5.6s ease forwards;
}

.people-video-frame.intro-conversation.is-revealing .people-video-opening {
  animation: peopleConversationVeil 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.people-video-frame.intro-conversation.is-revealing .people-video-opening small,
.people-video-frame.intro-conversation.is-revealing .people-video-opening strong,
.people-video-frame.intro-conversation.is-revealing .people-video-opening::before,
.people-video-frame.intro-conversation.is-revealing .people-video-opening::after {
  animation: peopleConversationWords 4s ease forwards;
}

@keyframes peopleConversationVeil {
  0%, 50% {
    opacity: 1;
  }
  74% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
  }
}

@keyframes peopleConversationWords {
  0%, 48% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
  74% {
    opacity: 0.68;
    filter: blur(2px);
    transform: translateY(-2px) scale(1.012);
  }
  100% {
    opacity: 0;
    filter: blur(9px);
    transform: translateY(-7px) scale(1.035);
  }
}

@keyframes peopleOpeningVeil {
  0% {
    opacity: 1;
  }
  36% {
    opacity: 1;
  }
  68% {
    opacity: 0.88;
  }
  100% {
    opacity: 0;
  }
}

@keyframes peopleOpeningWords {
  0%, 38% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
  70% {
    opacity: 0.72;
    filter: blur(2px);
    transform: translateY(-3px) scale(1.015);
  }
  100% {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(-8px) scale(1.04);
  }
}

.people-video-play-button {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 68%;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  background: rgba(5, 58, 96, 0.86);
  box-shadow: 0 14px 36px rgba(4, 35, 60, 0.28);
  color: #fff;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.people-video-play-button:hover,
.people-video-play-button:focus-visible {
  background: #0878b9;
  transform: translate(-50%, -50%) scale(1.06);
}

.people-video-play-button.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* 2026-09-04: mobile reading and composition refinements */
.page-home .hero-lead {
  max-width: 34em;
  text-wrap: pretty;
  word-break: normal;
  line-break: strict;
}

@media (max-width: 560px) {
  .page-home .hero {
    display: flex;
    min-height: auto;
    flex-direction: column;
    padding: 68px 20px 54px;
  }

  .page-home .hero-content {
    position: relative;
    order: 1;
  }

  .page-home .hero-lead {
    max-width: 100%;
    font-size: 0.94rem;
    line-height: 1.95;
    text-wrap: pretty;
  }

  .page-home .hero-photo-stage {
    position: relative;
    order: 2;
    top: auto;
    right: auto;
    bottom: auto;
    width: calc(100% + 16px);
    height: auto;
    aspect-ratio: 793 / 562;
    margin: 30px -8px 0;
    translate: none;
  }

  .page-home .hero-photo-main {
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: 22px 42px 22px 34px;
    background: #eef7fb;
  }

  .page-home .hero-photo-main img {
    opacity: 0.78;
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  .page-home .hero-photo-stage::after {
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(251, 253, 255, 0.14), rgba(251, 253, 255, 0.02) 62%, rgba(251, 253, 255, 0.1));
  }

  /* Keep the Philosophy credo as a two-page book on phones. */
  .page-philosophy .book-stage {
    min-height: 520px;
    padding: 58px 0 0;
  }

  .page-philosophy .book-cover,
  .page-philosophy .book-spread {
    inset: 58px 0 0;
  }

  .page-philosophy .book-spread {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-philosophy .book-page {
    min-width: 0;
    min-height: 450px;
    padding: 18px 14px;
    border-radius: 0;
  }

  .page-philosophy .book-page-left {
    border-right: 0;
    border-radius: 8px 0 0 8px;
  }

  .page-philosophy .book-page-right {
    border-top: 1px solid rgba(214, 229, 240, 0.96);
    border-radius: 0 8px 8px 0;
  }

  .page-philosophy .book-page h3 {
    font-size: clamp(1.12rem, 5.2vw, 1.45rem);
    line-height: 1.45;
  }

  .page-philosophy .book-page p,
  .page-philosophy .book-page li,
  .page-philosophy .purpose-lines span {
    font-size: clamp(0.62rem, 2.6vw, 0.76rem);
    line-height: 1.72;
  }

  .page-philosophy .book-number,
  .page-philosophy .book-kicker {
    font-size: 0.55rem;
  }

  .page-philosophy .book-arrow {
    top: 22px;
  }

  /* Keep the two group companies side by side, as in the desktop concept map. */
  .page-work .group-business-branches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .page-work .group-business-branches::before {
    display: block;
    right: 25%;
    left: 25%;
  }

  .page-work .group-business-company {
    min-height: 410px;
    padding: 20px 13px;
    border-radius: 18px;
  }

  .page-work .group-business-company-head h3 {
    margin: 9px 0 12px;
    font-size: clamp(0.92rem, 4vw, 1.14rem);
  }

  .page-work .group-business-company-logo {
    height: 34px;
    margin: 10px 0 14px;
  }

  .page-work .group-business-company > p {
    font-size: 0.68rem;
    line-height: 1.7;
  }

  .page-work .group-business-company ul {
    gap: 5px;
    margin: 14px 0 18px;
  }

  .page-work .group-business-company li {
    padding: 5px 7px;
    font-size: 0.58rem;
  }

  .page-work .group-business-scene {
    padding: 12px 10px;
  }

  .page-work .group-business-scene strong {
    font-size: 0.72rem;
    line-height: 1.5;
  }

  .page-work .group-business-scene small {
    font-size: 0.5rem;
  }
}

.people-tile-photo-card .people-tile-story-photo {
  height: 100%;
  object-position: center 48%;
}

.people-tile-chino > img {
  right: 0;
  left: auto;
  width: 58%;
  object-fit: contain;
  object-position: center;
  opacity: 0.72;
}

.people-tile-chino {
  padding-right: 38%;
  background: linear-gradient(135deg, #0a3157, #125d83);
}

.people-tile-chino h3 {
  font-size: clamp(1.05rem, 1.65vw, 1.42rem);
  line-height: 1.5;
}

.people-tile-next-photo {
  padding-right: 39%;
  background: linear-gradient(135deg, #082d51, #0d5c80);
}

.people-tile-next-photo > img {
  right: 0;
  left: auto;
  width: 43%;
  object-fit: contain;
  object-position: center;
  opacity: 0.9;
}

.people-tile-next-photo .people-tile-next-shade {
  background: linear-gradient(90deg, rgba(5, 30, 56, 0.96) 0%, rgba(5, 30, 56, 0.76) 51%, rgba(5, 30, 56, 0.12) 100%);
}

@media (max-width: 680px) {
  .people-tile-chino,
  .people-tile-next-photo {
    padding-right: 28px;
  }

  .people-tile-chino > img,
  .people-tile-next-photo > img {
    width: 54%;
    opacity: 0.62;
  }
}

.people-tile-featured-movie .people-tile-preview-video {
  opacity: 0.72;
}

.people-card-action i {
  font-style: normal;
  transition: transform 180ms ease;
}

.people-tile-interactive:hover .people-card-action i {
  transform: translateX(5px);
}

.people-modal {
  width: min(960px, calc(100vw - 36px));
  max-height: min(88vh, 900px);
  padding: 0;
  overflow: hidden;
  color: #102a43;
  border: 0;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 40px 120px rgba(5, 18, 36, 0.35);
}

.people-modal::backdrop {
  background: rgba(7, 20, 38, 0.72);
  backdrop-filter: blur(10px);
}

.people-modal[open] {
  animation: people-modal-in 240ms ease both;
}

@keyframes people-modal-in {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.people-modal-close {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: 18px;
  display: grid;
  width: 46px;
  height: 46px;
  padding: 0;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(8, 26, 49, 0.82);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.people-modal-scroll {
  max-height: min(88vh, 900px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.people-modal-panel {
  padding: clamp(42px, 7vw, 84px);
}

.people-modal-label,
.people-modal-kicker {
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.people-modal-kicker {
  margin: 50px 0 12px;
}

.people-modal-panel h2 {
  max-width: 780px;
  margin: 12px 0 34px;
  font-size: clamp(1.8rem, 3.8vw, 3rem);
  line-height: 1.32;
  letter-spacing: -0.025em;
}

.people-story-copy {
  max-width: 720px;
  margin-left: auto;
  font-size: 1.02rem;
  line-height: 2.05;
}

.people-story-profile {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1.2fr);
  gap: clamp(28px, 5vw, 58px);
  align-items: center;
  max-width: 820px;
  margin: 0 0 clamp(38px, 6vw, 66px) auto;
}

.people-story-profile figure {
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #e8f2f8;
}

.people-story-profile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 68%;
}

.people-story-profile .people-story-photo-chino {
  object-position: 54% center;
}

.people-story-photo-placeholder {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 28% 24%, rgba(91, 185, 235, 0.42), transparent 32%),
    linear-gradient(145deg, #0c4d78, #178bb8 56%, #8fcce2);
}

.people-story-photo-placeholder > span {
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-en);
  font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-align: center;
}

.people-story-photo-placeholder small {
  display: block;
  margin-top: 8px;
  font-size: 0.58em;
  letter-spacing: 0.12em;
}

.people-story-profile > div > span {
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.people-story-profile h3 {
  margin: 10px 0 18px;
  color: #102a43;
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  line-height: 1.35;
}

.people-story-profile h3 span {
  display: block;
  margin-top: 5px;
  color: #6b7c8e;
  font-family: var(--font-en);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.people-story-profile p {
  margin: 0;
  color: #52677b;
  font-size: 0.92rem;
  line-height: 1.9;
}

.people-story-copy blockquote {
  margin: 40px 0;
  padding: 24px 0 24px 28px;
  color: #1769ff;
  border-left: 4px solid #1769ff;
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.65;
}

.people-interview-qa {
  max-width: 920px;
  margin-left: auto;
}

.people-interview-qa article {
  padding: clamp(34px, 5vw, 58px) 0;
  border-bottom: 1px solid rgba(23, 105, 255, 0.16);
}

.people-interview-question,
.people-interview-answer {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: clamp(18px, 4vw, 42px);
  align-items: start;
}

.people-interview-question {
  margin-bottom: 26px;
}

.people-interview-question > span,
.people-interview-answer > span {
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.people-interview-question h3 {
  margin: 0;
  color: #102a43;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.6;
}

.people-interview-answer p {
  margin: 0;
  color: #073e72;
  font-size: clamp(1.2rem, 2.7vw, 1.75rem);
  font-weight: 700;
  line-height: 1.75;
}

.people-interview-story {
  display: grid;
  gap: 18px;
}

.people-interview-answer .people-interview-story p {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 500;
  line-height: 1.9;
}

.people-interview-answer .people-interview-story-lead {
  color: #073e72;
  font-family: inherit;
  font-size: clamp(1.2rem, 2.7vw, 1.75rem);
  font-weight: 700;
  line-height: 1.75;
}

.people-interview-detail {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: clamp(18px, 4vw, 42px);
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px dashed rgba(23, 105, 255, 0.24);
}

.people-interview-detail > span {
  color: #718096;
  font-family: var(--font-en);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.6;
}

.people-interview-detail > div {
  display: grid;
  gap: 14px;
}

.people-interview-detail p {
  margin: 0;
  color: #36566f;
  font-size: clamp(0.92rem, 1.45vw, 1.05rem);
  font-weight: 500;
  line-height: 1.9;
}

.people-interview-answer > span {
  color: #15a0a0;
}

.people-interview-qa article.people-interview-answer-final {
  border-bottom: 0;
}

.people-interview-answer-final blockquote {
  margin: 0;
  padding: 0;
  color: #073e72;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: clamp(1.2rem, 2.7vw, 1.75rem);
  font-weight: 700;
  line-height: 1.75;
}

.people-interview-invitation {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: clamp(18px, 4vw, 42px);
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px dashed rgba(23, 105, 255, 0.24);
}

.people-interview-invitation > span {
  color: #15a0a0;
  font-family: var(--font-en);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.people-interview-invitation p {
  margin: 0;
  color: #36566f;
  font-size: clamp(0.92rem, 1.45vw, 1.05rem);
  font-weight: 600;
  line-height: 1.8;
}

.hr-day-message {
  margin-bottom: clamp(50px, 8vw, 86px);
}

.hr-day-caption {
  width: min(100%, 1040px);
  margin: 0 auto 18px;
  color: #728396;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.hr-day-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 34px);
  max-width: 920px;
  margin-left: auto;
}

.hr-day-timeline > section {
  padding-top: 22px;
  border-top: 3px solid #1769ff;
}

.hr-day-timeline > section:nth-child(2) {
  border-color: #15a0a0;
}

.hr-day-timeline > section:nth-child(3) {
  border-color: #d26786;
}

.hr-day-timeline > section > span {
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.hr-day-timeline > section:nth-child(2) > span { color: #138c8c; }
.hr-day-timeline > section:nth-child(3) > span { color: #bd4f70; }

.hr-day-timeline dl {
  margin: 22px 0 0;
}

.hr-day-timeline dl > div {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(16, 42, 67, 0.1);
}

.hr-day-timeline dt {
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.85rem;
  font-weight: 900;
}

.hr-day-timeline dd {
  margin: 0;
  color: #52677b;
  font-size: 0.83rem;
  line-height: 1.65;
}

.people-modal-note {
  margin: 42px 0 0;
  color: #6b7c8e;
  font-size: 0.78rem;
  line-height: 1.7;
}

.movie-panel {
  padding: 0 0 clamp(42px, 6vw, 70px);
}

.movie-panel > .people-modal-label,
.movie-panel > h2,
.movie-panel > .people-movie-copy,
.movie-panel > .people-modal-note {
  margin-right: clamp(28px, 6vw, 70px);
  margin-left: clamp(28px, 6vw, 70px);
}

.movie-panel > .people-modal-label {
  padding-top: clamp(42px, 6vw, 70px);
}

.movie-panel h2 {
  margin-top: 16px;
}

.people-movie-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  color: #fff;
  background: #0b1c30;
}

.people-movie-placeholder img,
.people-movie-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.people-movie-placeholder img {
  object-fit: cover;
}

.people-movie-shade {
  background: linear-gradient(180deg, rgba(8, 25, 47, 0.18), rgba(8, 25, 47, 0.75));
}

.people-movie-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(68px, 10vw, 100px);
  height: clamp(68px, 10vw, 100px);
  padding-left: 6px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(23, 105, 255, 0.86);
  transform: translate(-50%, -50%);
  font-size: 1.4rem;
}

.people-movie-placeholder > p {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 24px;
  left: 28px;
  margin: 0;
}

.people-movie-placeholder strong,
.people-movie-placeholder small {
  display: block;
}

.people-movie-placeholder strong {
  font-family: var(--font-en);
  letter-spacing: 0.1em;
}

.people-movie-placeholder small {
  margin-top: 4px;
}

.people-movie-copy {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 30px;
  margin-top: 36px;
  line-height: 1.9;
}

.people-movie-copy .role {
  color: #1769ff;
  font-weight: 800;
}

body:has(.people-modal[open]) {
  overflow: hidden;
}

@media (max-width: 600px) {
  .people-modal {
    width: 100vw;
    max-width: none;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .people-modal-scroll {
    max-height: 100dvh;
  }

  .people-modal-panel {
    padding: 68px 24px 44px;
  }

  .people-story-profile {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-left: 0;
  }

  .people-story-profile figure {
    aspect-ratio: 4 / 4.6;
  }

  .movie-panel {
    padding: 0 0 44px;
  }

  .movie-panel > .people-modal-label {
    padding-top: 76px;
  }

  .people-movie-copy {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .people-interview-question,
  .people-interview-answer {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .people-interview-detail {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .people-interview-invitation {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hr-day-timeline {
    grid-template-columns: 1fr;
  }
}
/* Internal activities */
.culture-tags .activity-tag-button {
  border-color: rgba(24, 139, 125, 0.42);
}

.culture-tags .activity-tag-button i {
  background: #168f7d;
}

.culture-tags .activity-tag-button:hover,
.culture-tags .activity-tag-button:focus-visible {
  background: #117665;
}

.culture-tags .activity-tag-button:hover i,
.culture-tags .activity-tag-button:focus-visible i {
  color: #117665;
}

.activity-modal-header {
  background:
    radial-gradient(circle at 88% 0%, rgba(112, 230, 203, 0.24), transparent 31%),
    linear-gradient(145deg, #062d34, #0f655f 58%, #168f7d);
}

.activity-modal-header > span {
  color: #86efd9;
}

.activity-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: clamp(24px, 4vw, 48px);
  background: #eff8f6;
}

.activity-gallery figure {
  position: relative;
  min-height: 430px;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #d6e7e3;
}

.activity-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-gallery figcaption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  left: 16px;
  padding: 14px 16px;
  color: #fff;
  border-radius: 12px;
  background: rgba(5, 48, 49, 0.8);
  backdrop-filter: blur(7px);
}

.activity-gallery figcaption strong,
.activity-gallery figcaption span {
  display: block;
}

.activity-gallery figcaption strong {
  margin-bottom: 4px;
  font-size: 1rem;
}

.activity-gallery figcaption span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.76rem;
  line-height: 1.6;
}

.activity-culture-section {
  padding: clamp(48px, 7vw, 84px) clamp(28px, 6vw, 70px) clamp(68px, 9vw, 110px);
  background: #fff;
}

.activity-culture-heading {
  max-width: 760px;
  margin-bottom: 38px;
}

.activity-culture-heading > span {
  color: #168f7d;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.activity-culture-heading h3 {
  margin: 14px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1.2;
}

.activity-culture-heading p {
  color: var(--muted);
  line-height: 1.9;
}

.activity-culture-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.activity-practice-grid,
.activity-four-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.activity-three-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.activity-challenge-heading {
  margin-top: clamp(58px, 8vw, 92px);
}

.activity-challenge-heading > span {
  color: #5574b8;
}

.activity-challenge-grid {
  grid-template-columns: 1fr;
}

.activity-challenge-grid article {
  min-height: 210px;
  border-color: rgba(85, 116, 184, 0.18);
  background:
    radial-gradient(circle at 92% 12%, rgba(126, 155, 218, 0.2), transparent 28%),
    linear-gradient(145deg, #fff, #f0f3fb);
}

.activity-challenge-grid article > span {
  color: #5574b8;
}

.activity-culture-grid article {
  min-height: 250px;
  padding: clamp(24px, 3vw, 34px);
  overflow: hidden;
  border: 1px solid rgba(19, 117, 103, 0.14);
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, #edf8f5);
}

.activity-culture-grid article > span,
.activity-jiujitsu-card div > span {
  color: #168f7d;
  font-family: var(--font-en);
  font-size: 0.74rem;
  font-weight: 800;
}

.activity-culture-grid h4 {
  margin: 26px 0 14px;
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
}

.activity-culture-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.85;
}

.activity-culture-grid .activity-jiujitsu-card {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1.3fr);
  gap: 24px;
  padding: 0;
  background: #eef8f5;
}

.activity-jiujitsu-card img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
  background: #d8e9e5;
}

.activity-jiujitsu-card div {
  padding: 30px 30px 30px 0;
}

@media (max-width: 760px) {
  .activity-gallery,
  .activity-culture-grid {
    grid-template-columns: 1fr;
  }

  .activity-gallery figure {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .activity-culture-grid .activity-jiujitsu-card {
    grid-template-columns: 1fr;
  }

  .activity-jiujitsu-card img {
    min-height: 0;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }

  .activity-jiujitsu-card div {
    padding: 0 26px 30px;
  }
}

/* Culture page: imagine yourself working here */
.page-culture .culture-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 8%, rgba(41, 168, 223, 0.2), transparent 25rem),
    radial-gradient(circle at 6% 42%, rgba(255, 216, 84, 0.14), transparent 18rem),
    linear-gradient(180deg, #f9fcff 0%, #eef7ff 48%, #fff 100%);
}

.page-culture .culture-section::before {
  position: absolute;
  top: 86px;
  right: -110px;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(23, 105, 255, 0.12);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 52px rgba(41, 168, 223, 0.04), 0 0 0 104px rgba(23, 105, 255, 0.025);
}

.culture-hero-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(420px, 1.15fr);
  gap: clamp(42px, 7vw, 100px);
  align-items: center;
}

.culture-hero-copy {
  max-width: 600px;
}

.culture-imagine-copy {
  display: block;
  margin-top: clamp(34px, 5vw, 62px);
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.5vw, 2.25rem);
  line-height: 1.55;
}

.culture-moments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid rgba(23, 105, 255, 0.13);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 28px 70px rgba(7, 58, 114, 0.12);
  backdrop-filter: blur(18px);
}

.culture-moments article {
  position: relative;
  min-height: 210px;
  padding: clamp(24px, 3vw, 34px);
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff, #eaf6ff);
}

.culture-moments article:nth-child(2),
.culture-moments article:nth-child(3) {
  background: linear-gradient(145deg, #0b4c82, #0c75ad);
}

.culture-moments article > span {
  position: absolute;
  right: 16px;
  bottom: -18px;
  color: rgba(23, 105, 255, 0.08);
  font-family: var(--font-en);
  font-size: 6rem;
  font-weight: 900;
  line-height: 1;
}

.culture-moments article:nth-child(2) > span,
.culture-moments article:nth-child(3) > span {
  color: rgba(255, 255, 255, 0.1);
}

.culture-moments small,
.culture-moments strong,
.culture-moments p {
  position: relative;
  z-index: 1;
  display: block;
}

.culture-moments small {
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.culture-moments strong {
  margin-top: 28px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
}

.culture-moments p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.7;
}

.culture-moments article:nth-child(2) small,
.culture-moments article:nth-child(3) small {
  color: #8fddff;
}

.culture-moments article:nth-child(2) strong,
.culture-moments article:nth-child(3) strong,
.culture-moments article:nth-child(2) p,
.culture-moments article:nth-child(3) p {
  color: #fff;
}

.culture-moments article:nth-child(2) p,
.culture-moments article:nth-child(3) p {
  color: rgba(255, 255, 255, 0.72);
}

.culture-explore-heading {
  margin-top: clamp(80px, 11vw, 150px);
}

.culture-explore-heading > span {
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.culture-explore-heading h3 {
  margin: 12px 0 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3.6rem);
  line-height: 1.3;
}

.page-culture .culture-tags {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}

.page-culture .culture-tags .culture-tag-button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 34px;
  gap: 16px;
  align-items: start;
  min-height: 210px;
  padding: 26px;
  color: var(--navy);
  text-align: left;
  border: 1px solid rgba(23, 105, 255, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 34px rgba(7, 58, 114, 0.08);
  animation: none;
  transition: color 220ms ease, background 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.page-culture .culture-tags .culture-tag-button > span {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.page-culture .culture-tags .culture-tag-button > span:first-child {
  color: #1769ff;
  font-family: var(--font-en);
  font-size: 0.68rem;
  font-weight: 900;
}

.page-culture .culture-tag-button small,
.page-culture .culture-tag-button strong,
.page-culture .culture-tag-button em {
  display: block;
}

.page-culture .culture-tag-button small {
  color: #5b83aa;
  font-family: var(--font-en);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.page-culture .culture-tag-button strong {
  margin-top: 26px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
}

.page-culture .culture-tag-button em {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.65;
}

.page-culture .culture-tags .culture-tag-button i {
  width: 32px;
  height: 32px;
  color: #1769ff;
  border: 1px solid rgba(23, 105, 255, 0.25);
  background: transparent;
  transition: color 220ms ease, background 220ms ease, transform 220ms ease;
}

.page-culture .culture-tags .culture-tag-button:hover,
.page-culture .culture-tags .culture-tag-button:focus-visible {
  color: #fff;
  border-color: #0b4c82;
  background: linear-gradient(145deg, #073a72, #0d73a8);
  box-shadow: 0 24px 48px rgba(7, 58, 114, 0.2);
  transform: translateY(-6px);
}

.page-culture .culture-tag-button:hover > span:first-child,
.page-culture .culture-tag-button:focus-visible > span:first-child,
.page-culture .culture-tag-button:hover small,
.page-culture .culture-tag-button:focus-visible small {
  color: #8fddff;
}

.page-culture .culture-tag-button:hover em,
.page-culture .culture-tag-button:focus-visible em {
  color: rgba(255, 255, 255, 0.72);
}

.page-culture .culture-tags .culture-tag-button:hover i,
.page-culture .culture-tags .culture-tag-button:focus-visible i {
  color: #073a72;
  background: #fff;
  transform: rotate(90deg);
}

@media (max-width: 960px) {
  .culture-hero-layout {
    grid-template-columns: 1fr;
  }

  .culture-moments {
    max-width: 720px;
  }

  .page-culture .culture-tags {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .culture-moments,
  .page-culture .culture-tags {
    grid-template-columns: 1fr;
  }

  .culture-moments article {
    min-height: 180px;
  }

  .page-culture .culture-tags .culture-tag-button {
    min-height: 176px;
  }
}

/* Culture page: editorial bento links */
.page-culture .culture-tags {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

.page-culture .culture-tag-button:nth-child(1) { grid-column: span 5; --culture-accent: #087f72; --culture-tint: #e6f7f3; }
.page-culture .culture-tag-button:nth-child(2) { grid-column: span 3; --culture-accent: #1769ff; --culture-tint: #e9f1ff; }
.page-culture .culture-tag-button:nth-child(3) { grid-column: span 4; --culture-accent: #b9780d; --culture-tint: #fff4d9; }
.page-culture .culture-tag-button:nth-child(4) { grid-column: span 4; --culture-accent: #c64f6d; --culture-tint: #fff0f4; }
.page-culture .culture-tag-button:nth-child(5) { grid-column: span 5; --culture-accent: #6542ad; --culture-tint: #f1ebff; }
.page-culture .culture-tag-button:nth-child(6) { grid-column: span 3; --culture-accent: #327d59; --culture-tint: #ebf7ee; }

.page-culture .culture-tags .culture-tag-button {
  position: relative;
  isolation: isolate;
  min-height: 250px;
  overflow: hidden;
  padding: 30px;
  border: 0;
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--culture-accent) 24%, transparent), transparent 34%),
    linear-gradient(145deg, #fff 20%, var(--culture-tint));
  box-shadow: 0 20px 46px rgba(7, 58, 114, 0.11);
}

.page-culture .culture-tags .culture-tag-button::before {
  position: absolute;
  z-index: -1;
  right: -48px;
  bottom: -70px;
  width: 190px;
  height: 190px;
  border: 1px solid color-mix(in srgb, var(--culture-accent) 28%, transparent);
  border-radius: 50%;
  content: "";
  box-shadow:
    0 0 0 24px color-mix(in srgb, var(--culture-accent) 6%, transparent),
    0 0 0 50px color-mix(in srgb, var(--culture-accent) 3%, transparent);
  transition: transform 360ms ease, background 260ms ease;
}

.page-culture .culture-tags .culture-tag-button::after {
  position: absolute;
  right: 72px;
  bottom: 27px;
  color: color-mix(in srgb, var(--culture-accent) 72%, transparent);
  content: "VIEW";
  font-family: var(--font-en);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  transition: color 220ms ease, transform 220ms ease;
}

.page-culture .culture-tags .culture-tag-button > * {
  position: relative;
  z-index: 1;
}

.page-culture .culture-tags .culture-tag-button > span:first-child,
.page-culture .culture-tag-button small {
  color: var(--culture-accent);
}

.page-culture .culture-tags .culture-tag-button i {
  color: var(--culture-accent);
  border-color: color-mix(in srgb, var(--culture-accent) 35%, transparent);
  background: rgba(255, 255, 255, 0.66);
  font-size: 1rem;
}

.page-culture .culture-tags .culture-tag-button:hover,
.page-culture .culture-tags .culture-tag-button:focus-visible {
  border-color: transparent;
  background: linear-gradient(145deg, color-mix(in srgb, var(--culture-accent) 88%, #061f3d), var(--culture-accent));
  box-shadow: 0 30px 64px color-mix(in srgb, var(--culture-accent) 25%, transparent);
}

.page-culture .culture-tags .culture-tag-button:hover::before,
.page-culture .culture-tags .culture-tag-button:focus-visible::before {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.18);
}

.page-culture .culture-tags .culture-tag-button:hover::after,
.page-culture .culture-tags .culture-tag-button:focus-visible::after {
  color: rgba(255, 255, 255, 0.62);
  transform: translateX(-4px);
}

.page-culture .culture-tags .culture-tag-button:hover i,
.page-culture .culture-tags .culture-tag-button:focus-visible i {
  color: var(--culture-accent);
  background: #fff;
  transform: translate(3px, -3px);
}

@media (max-width: 960px) {
  .page-culture .culture-tags {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-culture .culture-tag-button:nth-child(n) {
    grid-column: auto;
  }
}

@media (max-width: 620px) {
  .page-culture .culture-tags {
    grid-template-columns: 1fr;
  }

  .page-culture .culture-tags .culture-tag-button {
    min-height: 215px;
  }
}

/* Culture page: non-interactive working-moments visual */
.culture-moments {
  position: relative;
  display: grid;
  grid-template-columns: minmax(170px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  padding: clamp(32px, 5vw, 56px);
  overflow: hidden;
  color: #fff;
  border: 0;
  border-radius: 34px;
  background:
    radial-gradient(circle at 88% 8%, rgba(99, 210, 255, 0.28), transparent 17rem),
    linear-gradient(145deg, #062f61, #0876a7);
  box-shadow: 0 28px 70px rgba(7, 58, 114, 0.18);
  pointer-events: none;
  user-select: none;
}

.culture-moments::before {
  position: absolute;
  right: -50px;
  bottom: -45px;
  color: rgba(255, 255, 255, 0.055);
  content: "CULTURE";
  font-family: var(--font-en);
  font-size: clamp(4rem, 9vw, 8.5rem);
  font-weight: 900;
  letter-spacing: -0.05em;
}

.culture-moments-heading {
  position: relative;
  z-index: 1;
}

.culture-moments-heading small {
  display: block;
  color: #8fddff;
  font-family: var(--font-en);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.culture-moments-heading strong {
  display: block;
  margin-top: 20px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.8vw, 2.35rem);
  line-height: 1.5;
}

.culture-moment-flow {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0 0 0 28px;
  list-style: none;
}

.culture-moment-flow::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 8px;
  width: 1px;
  content: "";
  background: linear-gradient(#8fddff, rgba(255, 255, 255, 0.2));
}

.culture-moment-flow li {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.culture-moment-flow li:last-child {
  border-bottom: 0;
}

.culture-moment-flow li > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #073a72;
  border-radius: 50%;
  background: #fff;
  font-family: var(--font-en);
  font-size: 0.58rem;
  font-weight: 900;
}

.culture-moment-flow small,
.culture-moment-flow strong,
.culture-moment-flow p {
  display: block;
}

.culture-moment-flow small {
  color: #8fddff;
  font-family: var(--font-en);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.culture-moment-flow strong {
  margin-top: 3px;
  color: #fff;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
}

.culture-moment-flow p {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.7rem;
  line-height: 1.55;
}

@media (max-width: 620px) {
  .culture-moments {
    grid-template-columns: 1fr;
  }

  .culture-moment-flow {
    padding-left: 22px;
  }
}

/* Culture page: abstract, non-interactive hero artwork */
.culture-atmosphere-art {
  position: relative;
  min-height: clamp(350px, 42vw, 510px);
  overflow: hidden;
  color: #fff;
  border-radius: 36px;
  background:
    radial-gradient(circle at 79% 22%, rgba(142, 225, 255, 0.32), transparent 22%),
    radial-gradient(circle at 12% 88%, rgba(74, 176, 206, 0.28), transparent 28%),
    linear-gradient(145deg, #052e61 4%, #086998 58%, #0b83a7 100%);
  box-shadow: 0 28px 70px rgba(7, 58, 114, 0.18);
  pointer-events: none;
  user-select: none;
}

.culture-atmosphere-art::before,
.culture-atmosphere-art::after {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  content: "";
}

.culture-atmosphere-art::before {
  top: -20%;
  right: -12%;
  width: 58%;
  aspect-ratio: 1;
}

.culture-atmosphere-art::after {
  right: 18%;
  bottom: -30%;
  width: 72%;
  aspect-ratio: 1;
}

.culture-atmosphere-orbit {
  position: absolute;
  top: 18%;
  right: 15%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    -112px 72px 0 5px rgba(255, 255, 255, 0.18),
    36px 154px 0 12px rgba(143, 221, 255, 0.22);
}

.culture-atmosphere-word {
  position: absolute;
  right: -0.08em;
  bottom: -0.2em;
  color: rgba(255, 255, 255, 0.075);
  font-family: var(--font-en);
  font-size: clamp(4.8rem, 11vw, 10.5rem);
  font-weight: 900;
  letter-spacing: -0.075em;
  line-height: 1;
  white-space: nowrap;
}

.culture-atmosphere-copy {
  position: absolute;
  z-index: 1;
  top: clamp(42px, 7vw, 74px);
  left: clamp(34px, 6vw, 70px);
}

.culture-atmosphere-copy small {
  display: block;
  color: #9ce6ff;
  font-family: var(--font-en);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.culture-atmosphere-copy strong {
  display: block;
  margin-top: 22px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 3.2vw, 2.75rem);
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.culture-atmosphere-guide {
  position: absolute;
  z-index: 1;
  right: clamp(28px, 5vw, 58px);
  bottom: clamp(28px, 4vw, 48px);
  display: flex;
  gap: 12px;
  align-items: center;
}

.culture-atmosphere-guide span {
  width: 44px;
  height: 1px;
  background: rgba(255, 255, 255, 0.62);
}

.culture-atmosphere-guide small {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-en);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

@media (max-width: 620px) {
  .culture-atmosphere-art {
    min-height: 330px;
    border-radius: 28px;
  }

  .culture-atmosphere-guide {
    right: auto;
    left: 34px;
  }
}

/* Culture page: title integrated into the abstract artwork */
.culture-hero-layout {
  grid-template-columns: 1fr;
  gap: 0;
}

.culture-atmosphere-art {
  width: 100%;
  min-height: clamp(420px, 52vw, 600px);
}

.culture-art-heading {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(34px, 8vw, 100px);
  width: min(620px, calc(100% - 68px));
  color: #fff;
  transform: translateY(-50%);
}

.culture-art-heading > span {
  display: block;
  color: #9ce6ff;
  font-family: var(--font-en);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.culture-art-heading h2 {
  margin: 18px 0 24px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.95rem, 6.2vw, 5.7rem);
  line-height: 1.16;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.culture-art-heading p {
  max-width: 590px;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(0.78rem, 1.25vw, 0.95rem);
  line-height: 2;
}

/* Social contribution: three equal sponsorship cards */
.sponsor-teams.sponsor-teams-equal {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.sponsor-teams-equal .sponsor-team-text {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-top: 4px solid #1686b5;
}

.sponsor-card-photo {
  position: relative;
  z-index: 1;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  background: #dfeaf0;
}

.sponsor-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sponsor-employee-balloon {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  left: 14px;
  padding: 13px 15px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(8, 63, 99, 0.22);
  color: #075681;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}

.sponsor-employee-balloon::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.94);
  transform: rotate(45deg);
}

.sponsor-employee-balloon strong,
.sponsor-employee-balloon span {
  position: relative;
  z-index: 1;
  display: block;
}

.sponsor-employee-balloon strong {
  font-size: 0.88rem;
  line-height: 1.5;
}

.sponsor-employee-balloon span {
  margin-top: 3px;
  color: #426779;
  font-size: 0.72rem;
  line-height: 1.55;
}

.sponsor-team-employee:hover .sponsor-employee-balloon,
.sponsor-team-employee:focus .sponsor-employee-balloon,
.sponsor-team-employee:focus-within .sponsor-employee-balloon {
  opacity: 1;
  transform: translateY(0);
}

.sponsor-team-employee:focus-visible {
  outline: 3px solid #31a1d2;
  outline-offset: 4px;
}

.sponsor-team-card-copy {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 2.5vw, 30px);
}

.sponsor-teams-equal .sponsor-team-text::after {
  top: auto;
  right: -22px;
  bottom: -30px;
  width: 120px;
  height: 120px;
  transform: none;
}

.sponsor-team-number {
  display: block;
  margin-bottom: 22px;
  color: rgba(36, 119, 155, 0.28);
  font-family: var(--font-en);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
}

.contribution-modal .training-modal-scroll {
  padding-bottom: clamp(40px, 7vw, 80px);
}

.sponsor-teams-equal .sponsor-team-text p {
  max-width: none;
  padding-right: 0;
  font-size: 0.84rem;
  line-height: 1.85;
}

@media (max-width: 760px) {
  .sponsor-teams.sponsor-teams-equal {
    grid-template-columns: 1fr;
  }

  .sponsor-teams-equal .sponsor-team-text {
    min-height: 0;
  }

  .sponsor-team-number {
    margin-bottom: 22px;
  }
}

@media (hover: none) {
  .sponsor-employee-balloon {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 620px) {
  .culture-atmosphere-art {
    min-height: 400px;
  }

  .culture-art-heading {
    top: 45%;
    transform: translateY(-50%);
  }

  .culture-art-heading p br {
    display: none;
  }
}

/* Culture page: unify the six links with a quiet blue base */
.page-culture .culture-tags .culture-tag-button {
  border: 1px solid rgba(7, 58, 114, 0.16);
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--culture-accent) 14%, transparent), transparent 30%),
    linear-gradient(145deg, #f1f8fd 8%, #dcebf6 100%);
  box-shadow:
    0 20px 44px rgba(7, 58, 114, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.page-culture .culture-tag-button:nth-child(1) { --culture-photo: url("assets/activity-environment.jpg"); }
.page-culture .culture-tag-button:nth-child(2) { --culture-photo: url("assets/training-workshop-session.jpg"); }
.page-culture .culture-tag-button:nth-child(3) { --culture-photo: url("assets/award-2025-recipient.JPG"); }
.page-culture .culture-tag-button:nth-child(4) { --culture-photo: none; }
.page-culture .culture-tag-button:nth-child(5) { --culture-photo: url("assets/event-entrance-ceremony-new-employees.jpg"); }
.page-culture .culture-tag-button:nth-child(6) { --culture-photo: url("assets/social-contribution-spogomi-group-landscape.jpg"); }

.page-culture .culture-tags .culture-tag-button::before {
  inset: 0;
  width: auto;
  height: auto;
  border: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(4, 38, 78, 0.78), rgba(4, 76, 112, 0.56)),
    var(--culture-photo) center / cover no-repeat;
  box-shadow: none;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 320ms ease, transform 520ms ease;
}

.page-culture .culture-tags .culture-tag-button::before {
  border-color: transparent;
  box-shadow: none;
}

.page-culture .culture-tags .culture-tag-button:hover,
.page-culture .culture-tags .culture-tag-button:focus-visible {
  background: linear-gradient(145deg, #073a72, #0d73a8);
  box-shadow: 0 28px 58px rgba(7, 58, 114, 0.22);
}

.page-culture .culture-tags .culture-tag-button:hover::before,
.page-culture .culture-tags .culture-tag-button:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

/* Recruitment top: abstract hero aligned with the detail pages */
.page-home .hero {
  background: #052e61;
}

.hero-graphic {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 22%, rgba(142, 225, 255, 0.32), transparent 19rem),
    radial-gradient(circle at 88% 82%, rgba(47, 178, 211, 0.28), transparent 24rem),
    radial-gradient(circle at 12% 88%, rgba(74, 176, 206, 0.2), transparent 28rem),
    linear-gradient(145deg, #052e61 2%, #076594 58%, #0b83a7 100%);
}

.hero-graphic::before,
.hero-graphic::after {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 50%;
  content: "";
}

.hero-graphic::before {
  top: -24%;
  right: -9%;
  width: min(62vw, 820px);
  aspect-ratio: 1;
}

.hero-graphic::after {
  right: 14%;
  bottom: -54%;
  width: min(72vw, 940px);
  aspect-ratio: 1;
}

.hero-graphic-orbit {
  position: absolute;
  top: 17%;
  right: 16%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    -138px 92px 0 7px rgba(255, 255, 255, 0.15),
    58px 190px 0 16px rgba(143, 221, 255, 0.2);
}

.hero-graphic-glow {
  position: absolute;
  top: 44%;
  right: 30%;
  width: clamp(120px, 18vw, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(139, 224, 255, 0.13);
  filter: blur(2px);
}

.hero-graphic-word {
  position: absolute;
  right: -0.04em;
  bottom: -0.18em;
  color: rgba(255, 255, 255, 0.065);
  font-family: var(--font-en);
  font-size: clamp(9rem, 25vw, 24rem);
  font-weight: 900;
  letter-spacing: -0.09em;
  line-height: 1;
  white-space: nowrap;
}

.page-home .hero-overlay {
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(3, 31, 70, 0.56), rgba(3, 43, 82, 0.12) 62%, transparent),
    linear-gradient(0deg, rgba(3, 29, 62, 0.18), transparent 45%);
}

.page-home .hero-energy {
  display: none;
}

.page-home .hero-content {
  color: #fff;
}

.page-home .hero .eyebrow {
  color: #9ce6ff;
}

.page-home .hero h1 {
  color: #fff;
  text-shadow: 0 18px 44px rgba(1, 20, 48, 0.3);
}

.page-home .hero-lead {
  color: rgba(255, 255, 255, 0.82);
  text-shadow: none;
}

.page-home .hero .button.primary {
  color: #073a72;
  background: #fff;
  box-shadow: 0 14px 34px rgba(1, 24, 54, 0.2);
}

.page-home .hero .button.secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

@media (max-width: 620px) {
  .hero-graphic::before {
    top: 4%;
    right: -44%;
    width: 98vw;
  }

  .hero-graphic-word {
    bottom: 0;
    font-size: 44vw;
  }
}

/* Recruitment top: light hero to separate it from the blue FOR YOU section */
.page-home .hero {
  background: #f7fbff;
}

.page-home .hero-graphic {
  background:
    radial-gradient(circle at 76% 20%, rgba(88, 190, 226, 0.22), transparent 19rem),
    radial-gradient(circle at 88% 82%, rgba(41, 168, 223, 0.18), transparent 24rem),
    radial-gradient(circle at 12% 88%, rgba(82, 177, 207, 0.12), transparent 28rem),
    linear-gradient(145deg, #ffffff 3%, #edf7fd 58%, #dceff8 100%);
}

.page-home .hero-graphic::before,
.page-home .hero-graphic::after {
  border-color: rgba(7, 75, 130, 0.13);
}

.page-home .hero-graphic-orbit {
  background: rgba(9, 100, 157, 0.72);
  box-shadow:
    -138px 92px 0 7px rgba(13, 117, 166, 0.11),
    58px 190px 0 16px rgba(41, 168, 223, 0.13);
}

.page-home .hero-graphic-glow {
  background: rgba(54, 178, 218, 0.12);
}

.page-home .hero-graphic-word {
  color: rgba(7, 83, 137, 0.055);
}

.page-home .hero-overlay {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(240, 248, 253, 0.46) 62%, transparent),
    linear-gradient(0deg, rgba(218, 237, 248, 0.2), transparent 45%);
}

.page-home .hero-content {
  color: var(--navy);
}

.page-home .hero .eyebrow {
  color: #0876a7;
}

.page-home .hero h1 {
  color: var(--navy);
  text-shadow: 0 16px 38px rgba(7, 58, 114, 0.13);
}

.page-home .hero-lead {
  color: #24455f;
}

.page-home .hero .button.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  box-shadow: 0 12px 28px rgba(11, 58, 104, 0.24);
}

.page-home .hero .button.secondary {
  color: var(--navy);
  border-color: rgba(18, 58, 99, 0.2);
  background: rgba(255, 255, 255, 0.8);
}

/* Recruitment top: centered editorial title */
.page-home .hero-overlay {
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.68), rgba(240, 248, 253, 0.2) 58%, transparent 82%),
    linear-gradient(0deg, rgba(218, 237, 248, 0.18), transparent 45%);
}

.page-home .hero-content {
  width: min(100%, 980px);
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.page-home .hero h1 {
  margin-top: 18px;
  margin-bottom: 30px;
  font-size: clamp(3rem, 7.4vw, 6.8rem);
  line-height: 1.08;
  letter-spacing: 0.015em;
}

.page-home .attention-rotator,
.page-home .hero-actions {
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
}

.page-home .hero-lead {
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 620px) {
  .page-home .hero h1 {
    font-size: clamp(2.65rem, 13vw, 4.25rem);
    line-height: 1.13;
  }
}

/* Recruitment top: calm first-view motion */
.page-home .hero-graphic::before {
  animation: topHeroRingA 14s ease-in-out infinite alternate;
}

.page-home .hero-graphic::after {
  animation: topHeroRingB 18s ease-in-out infinite alternate;
}

.page-home .hero-graphic-orbit {
  animation: topHeroOrbit 8s ease-in-out infinite alternate;
}

.page-home .hero-graphic-glow {
  animation: topHeroGlow 6s ease-in-out infinite alternate;
}

.page-home .hero-graphic-word {
  animation: topHeroWord 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
}

.page-home .hero .eyebrow {
  animation: topHeroCopy 0.8s ease-out 0.12s both;
}

.page-home .hero h1 span {
  animation: topHeroTitle 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.page-home .hero h1 span:first-child {
  animation-delay: 0.22s;
}

.page-home .hero h1 span:last-child {
  animation-delay: 0.36s;
}

.page-home .hero-lead {
  animation: topHeroCopy 0.85s ease-out 0.68s both;
}

.page-home .hero-actions {
  animation: topHeroCopy 0.85s ease-out 0.82s both;
}

@keyframes topHeroRingA {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-2.2%, 2.6%, 0) scale(1.05); }
}

@keyframes topHeroRingB {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(2.8%, -2%, 0) scale(0.96); }
}

@keyframes topHeroOrbit {
  from { transform: translate3d(0, -5px, 0); }
  to { transform: translate3d(-12px, 13px, 0); }
}

@keyframes topHeroGlow {
  from { opacity: 0.42; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1.12); }
}

@keyframes topHeroWord {
  from { opacity: 0; transform: translate3d(5%, 9%, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes topHeroTitle {
  from { opacity: 0; transform: translate3d(0, 44px, 0); filter: blur(8px); }
  to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
}

@keyframes topHeroCopy {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero-graphic::before,
  .page-home .hero-graphic::after,
  .page-home .hero-graphic-orbit,
  .page-home .hero-graphic-glow,
  .page-home .hero-graphic-word,
  .page-home .hero .eyebrow,
  .page-home .hero h1 span,
  .page-home .hero-lead,
  .page-home .hero-actions {
    animation: none;
  }
}

/* Recruitment top: slower, more grounded title entrance */
.page-home .hero-content {
  animation: heroCopyIn 1.6s cubic-bezier(0.18, 0.75, 0.18, 1) both;
}

.page-home .hero .eyebrow {
  animation-duration: 1.25s;
  animation-delay: 0.25s;
}

.page-home .hero h1 span {
  animation-duration: 1.65s;
  animation-timing-function: cubic-bezier(0.16, 0.82, 0.2, 1);
}

.page-home .hero h1 span:first-child {
  animation-delay: 0.42s;
}

.page-home .hero h1 span:last-child {
  animation-delay: 0.66s;
}

.page-home .hero-lead {
  animation-duration: 1.25s;
  animation-delay: 1.15s;
}

.page-home .hero-actions {
  animation-duration: 1.25s;
  animation-delay: 1.38s;
}

/* Recruitment top: bright, people-led first view */
.page-home .hero {
  min-height: calc(100svh - 72px);
  padding: clamp(84px, 9vw, 126px) clamp(22px, 6vw, 88px);
  background:
    radial-gradient(circle at 10% 14%, rgba(255, 222, 112, 0.2), transparent 18rem),
    radial-gradient(circle at 54% 92%, rgba(91, 196, 226, 0.14), transparent 24rem),
    #fbfdff;
}

.page-home .hero::before {
  position: absolute;
  left: -4vw;
  bottom: -12vw;
  width: 34vw;
  aspect-ratio: 1;
  border: 1px solid rgba(8, 111, 165, 0.1);
  border-radius: 50%;
  content: "";
}

.page-home .hero-overlay,
.page-home .hero-energy {
  display: none;
}

.page-home .hero-content {
  width: min(46vw, 660px);
  max-width: 660px;
  margin: 0;
  text-align: left;
}

.page-home .hero .eyebrow {
  color: #0876a7;
  letter-spacing: 0.16em;
}

.page-home .hero h1 {
  margin: 18px 0 28px;
  color: var(--navy);
  font-size: clamp(3.25rem, 6.1vw, 6.6rem);
  line-height: 1.08;
  letter-spacing: 0;
  text-shadow: none;
}

.page-home .attention-rotator,
.page-home .hero-actions {
  justify-content: flex-start;
  margin-right: 0;
  margin-left: 0;
}

.page-home .hero-lead {
  max-width: 570px;
  margin-right: 0;
  margin-left: 0;
  color: #315069;
}

.hero-photo-stage {
  position: absolute;
  z-index: 3;
  top: clamp(46px, 7vh, 76px);
  right: clamp(18px, 4vw, 62px);
  bottom: clamp(42px, 7vh, 76px);
  width: min(47vw, 720px);
  animation: heroPhotoIn 1.7s cubic-bezier(0.18, 0.78, 0.2, 1) 0.18s both;
}

.hero-photo-stage::before {
  position: absolute;
  inset: 5% -3% -3% 7%;
  background: #dff2f8;
  border-radius: 34% 8% 28% 10% / 13% 24% 11% 28%;
  content: "";
  transform: rotate(2deg);
}

.hero-photo-main,
.hero-photo-sub {
  position: absolute;
  overflow: hidden;
  margin: 0;
  background: #fff;
  box-shadow: 0 26px 62px rgba(20, 68, 100, 0.16);
}

.hero-photo-main {
  inset: 0;
  border-radius: 30% 7% 24% 8% / 12% 24% 10% 22%;
}

.hero-photo-sub {
  left: 0;
  bottom: 0;
  width: clamp(140px, 17vw, 250px);
  aspect-ratio: 1.25;
  border: 7px solid #fff;
  border-radius: 12px 28px 12px 28px;
  transform: rotate(-3deg);
}

.hero-photo-main img,
.hero-photo-sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96);
}

.hero-photo-main img {
  object-position: center center;
}

.hero-photo-caption {
  position: absolute;
  right: 18px;
  bottom: 2%;
  color: #0876a7;
  font-family: var(--font-en);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
}

@keyframes heroPhotoIn {
  from { opacity: 0; transform: translate3d(34px, 14px, 0) scale(0.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 900px) {
  .page-home .hero {
    align-content: start;
    min-height: auto;
    padding-top: 68px;
  }

  .page-home .hero-content {
    width: 100%;
    max-width: 680px;
  }

  .page-home .hero h1 {
    font-size: clamp(3rem, 11vw, 5.4rem);
  }

  .hero-photo-stage {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: min(76vw, 560px);
    margin-top: 48px;
  }
}

@media (max-width: 560px) {
  .page-home .hero {
    padding: 54px 20px 64px;
  }

  .page-home .hero h1 {
    font-size: clamp(2.75rem, 14vw, 4rem);
  }

  .hero-photo-stage {
    height: 92vw;
    margin-top: 38px;
  }

  .hero-photo-main {
    inset: 0;
    border-radius: 22px 56px 22px 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-photo-stage {
    animation: none;
  }
}

/* Recruitment top: keep both people fully visible in the first-view photo */
.page-home .hero-photo-stage {
  top: 50%;
  bottom: auto;
  width: min(45vw, 700px);
  height: min(34vw, 520px);
  translate: 0 -50%;
}

.page-home .hero-photo-main {
  display: block;
  padding: 0;
  border-radius: 38px 12px 54px 18px;
  background: #eaf6fb;
  box-shadow: 0 30px 72px rgba(20, 68, 100, 0.18);
}

.page-home .hero-photo-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  border-radius: inherit;
  filter: saturate(0.94) brightness(1.04);
}

@media (max-width: 900px) {
  .page-home .hero-photo-stage {
    top: auto;
    bottom: auto;
    width: 100%;
    height: min(72vw, 520px);
    translate: none;
  }
}

/* 2026-08-27: balanced four-item culture numbers */
.page-culture .numbers-grid {
  max-width: 1000px;
  margin-right: auto;
  margin-left: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 22px);
}

.page-culture .numbers-grid > div {
  min-height: 170px;
  border: 1px solid rgba(12, 91, 145, 0.1);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(12, 72, 112, 0.07);
}

@media (max-width: 700px) {
  .page-culture .numbers-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-culture .numbers-grid > div {
    min-height: 138px;
  }
}

/* 2026-08-27: people photo as a soft atmospheric layer */
.page-home .hero {
  isolation: isolate;
}

.page-home .hero-photo-stage {
  z-index: 1;
  top: 0;
  right: 0;
  bottom: auto;
  width: 64%;
  height: 100%;
  translate: none;
  animation: heroPhotoSoftIn 2s cubic-bezier(.2,.72,.2,1) .12s both;
}

.page-home .hero-photo-stage::before {
  display: none;
}

.page-home .hero-photo-stage::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  background:
    linear-gradient(90deg, #fbfdff 0%, rgba(251,253,255,.94) 18%, rgba(251,253,255,.55) 42%, rgba(251,253,255,.08) 76%),
    linear-gradient(180deg, rgba(251,253,255,.18), transparent 30%, rgba(251,253,255,.18));
  content: "";
  pointer-events: none;
}

.page-home .hero-photo-main {
  inset: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
}

.page-home .hero-photo-main img {
  border-radius: 0;
  opacity: .67;
  object-fit: cover;
  object-position: center 48%;
  filter: saturate(.72) brightness(1.12) contrast(.92);
  transform: scale(1.015);
}

.page-home .hero-photo-caption {
  display: none;
}

.page-home .hero-content {
  z-index: 4;
  width: min(48vw, 680px);
}

@keyframes heroPhotoSoftIn {
  from { opacity: 0; transform: translateX(24px) scale(1.01); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@media (max-width: 900px) {
  .page-home .hero {
    position: relative;
    min-height: 820px;
    padding-bottom: clamp(190px, 33vw, 280px);
  }

  .page-home .hero-content {
    width: 100%;
  }

  .page-home .hero-photo-stage {
    position: absolute;
    top: 43%;
    right: 0;
    width: 100%;
    height: 57%;
  }

  .page-home .hero-photo-main {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 27%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 27%, #000 100%);
  }

  .page-home .hero-photo-stage::after {
    background: linear-gradient(180deg, #fbfdff 0%, rgba(251,253,255,.72) 26%, rgba(251,253,255,.1) 72%);
  }

  .page-home .hero-photo-main img {
    opacity: .58;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero-photo-stage {
    animation: none;
  }
}

/* Keep both people visible inside the right-side photo area */
@media (min-width: 901px) {
  .page-home .hero-photo-stage {
    top: 50%;
    right: 0;
    width: min(56vw, 760px);
    height: min(40vw, 545px);
    translate: 0 -50%;
  }

  .page-home .hero-photo-stage::after {
    background:
      linear-gradient(90deg, rgba(251,253,255,.96) 0%, rgba(251,253,255,.38) 9%, rgba(251,253,255,.08) 22%, transparent 40%),
      linear-gradient(180deg, rgba(251,253,255,.1), transparent 28%, rgba(251,253,255,.08));
  }

  .page-home .hero-photo-main {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 11%, #000 100%);
  }

  .page-home .hero-photo-main img {
    opacity: .74;
    object-fit: cover;
    object-position: center center;
    transform: none;
  }
}

/* Recruitment top v10: move the background photo about 3 cm lower. */
@media (min-width: 901px) {
  .page-home .hero-photo-stage {
    top: 30%;
    height: 70%;
  }

  .page-home .hero-photo-main img {
    object-position: 46% 52%;
  }
}

/* Recruitment top v11: keep the faces beside the lead copy on desktop and tablet. */
@media (min-width: 761px) {
  .page-home .hero-photo-stage {
    position: absolute !important;
    top: 40% !important;
    right: 0 !important;
    width: min(59vw, 920px) !important;
    height: 60% !important;
    margin: 0 !important;
    translate: none !important;
  }

  .page-home .hero-photo-main img {
    object-position: 46% 46% !important;
  }
}

/* Recruitment top v15 base; v17 restores the earlier two-colleague photo. */
.page-home .hero-photo-stage { display: block !important; }

.page-home .hero-energy {
  position: absolute;
  z-index: 3;
  top: 12%;
  right: 2%;
  bottom: 8%;
  left: auto;
  display: block;
  width: min(49vw, 720px);
  overflow: hidden;
  border-radius: 48% 8% 42% 12% / 16% 36% 14% 38%;
  background:
    radial-gradient(circle at 51% 48%, rgba(255,216,82,.22) 0 7%, transparent 7.4%),
    radial-gradient(circle at 51% 48%, transparent 0 21%, rgba(14,121,177,.15) 21.2% 21.5%, transparent 21.8%),
    radial-gradient(circle at 51% 48%, transparent 0 36%, rgba(14,121,177,.1) 36.2% 36.45%, transparent 36.8%),
    linear-gradient(145deg, rgba(225,244,252,.78), rgba(255,255,255,.2));
  box-shadow: inset 0 0 0 1px rgba(12,101,157,.08);
  opacity: 1;
}

.page-home .hero-energy::before {
  content: "FLEX";
  position: absolute;
  right: -.04em;
  bottom: -.18em;
  color: rgba(7,75,130,.055);
  font-family: var(--font-en);
  font-size: clamp(9rem,18vw,17rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.08em;
}

.page-home .hero-energy::after {
  content: "人を想う　・　仕事で支える　・　明日へつなぐ";
  position: absolute;
  top: 48%;
  left: 51%;
  width: 210px;
  color: #07558b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.8;
  text-align: center;
  transform: translate(-50%, -50%);
}

.page-home .hero-energy .energy-dot,
.page-home .hero-energy .energy-line { display: block; position: absolute; }

.page-home .hero-energy .energy-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0d78b5;
  box-shadow: 0 0 0 8px rgba(13,120,181,.08);
}

.page-home .hero-energy .dot-a { top: 18%; left: 23%; animation: abstractDotA 7s ease-in-out infinite alternate; }
.page-home .hero-energy .dot-b { top: 25%; right: 18%; width: 16px; height: 16px; background: #ffd452; animation: abstractDotB 9s ease-in-out infinite alternate; }
.page-home .hero-energy .dot-c { right: 24%; bottom: 18%; width: 7px; height: 7px; animation: abstractDotA 8s ease-in-out infinite alternate-reverse; }

.page-home .hero-energy .energy-line {
  top: 48%;
  left: 51%;
  width: 56%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(9,105,164,.26), transparent);
  transform-origin: center;
}
.page-home .hero-energy .line-a { transform: translate(-50%,-50%) rotate(28deg); }
.page-home .hero-energy .line-b { transform: translate(-50%,-50%) rotate(-35deg); }

@keyframes abstractDotA { from { transform: translate3d(0,0,0); } to { transform: translate3d(12px,-10px,0); } }
@keyframes abstractDotB { from { transform: translate3d(0,0,0) scale(.9); } to { transform: translate3d(-10px,12px,0) scale(1.12); } }

@media (max-width: 900px) {
  .page-home .hero-energy {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: min(72vw, 440px);
    margin-top: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero-energy .energy-dot { animation: none; }
}

/* Recruitment top v13: slightly clearer people while retaining the background treatment. */
.page-home .hero-photo-stage {
  opacity: .56;
  animation-name: heroAtmosphereInClear;
}

@keyframes heroAtmosphereInClear {
  from { opacity: 0; transform: translate3d(34px,0,0); }
  to { opacity: .56; transform: translate3d(0,0,0); }
}

/* Culture: bright first view aligned with the recruitment top */
.page-culture .culture-section {
  background:
    radial-gradient(circle at 9% 10%, rgba(255, 222, 112, 0.18), transparent 18rem),
    radial-gradient(circle at 88% 34%, rgba(91, 196, 226, 0.14), transparent 25rem),
    linear-gradient(180deg, #fbfdff 0%, #f1f8fc 45%, #fff 100%);
}

.page-culture .culture-section::before {
  display: none;
}

.page-culture .culture-hero-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.86fr) minmax(460px, 1.14fr);
  gap: clamp(42px, 7vw, 100px);
  align-items: center;
  min-height: min(680px, calc(100svh - 150px));
}

.culture-bright-copy {
  position: relative;
  z-index: 2;
  max-width: 650px;
}

.culture-bright-copy > span {
  display: block;
  color: #0876a7;
  font-family: var(--font-en);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.culture-bright-copy h2 {
  margin: 18px 0 28px;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.6vw, 5.8rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.culture-bright-copy p {
  margin: 0;
  color: #315069;
  font-size: clamp(0.82rem, 1.15vw, 0.96rem);
  line-height: 2;
}

.culture-bright-copy a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding-bottom: 8px;
  color: #0876a7;
  border-bottom: 1px solid rgba(8, 118, 167, 0.32);
  font-size: 0.78rem;
  font-weight: 800;
}

.culture-bright-copy a i {
  font-style: normal;
  transition: transform 180ms ease;
}

.culture-bright-copy a:hover i,
.culture-bright-copy a:focus-visible i {
  transform: translateY(4px);
}

.culture-bright-photos {
  position: relative;
  min-height: clamp(460px, 48vw, 630px);
  animation: heroPhotoIn 1.7s cubic-bezier(0.18, 0.78, 0.2, 1) 0.18s both;
}

.culture-bright-photos::before {
  position: absolute;
  inset: 6% -3% -2% 8%;
  background: #dff2f8;
  border-radius: 32% 8% 27% 10% / 12% 23% 10% 26%;
  content: "";
  transform: rotate(2deg);
}

.culture-bright-photo-main,
.culture-bright-photo-sub {
  position: absolute;
  overflow: hidden;
  margin: 0;
  background: #fff;
  box-shadow: 0 26px 62px rgba(20, 68, 100, 0.16);
}

.culture-bright-photo-main {
  inset: 0 0 10% 8%;
  border-radius: 30% 7% 24% 8% / 12% 24% 10% 22%;
}

.culture-bright-photo-sub {
  left: 0;
  bottom: 0;
  width: clamp(155px, 18vw, 270px);
  aspect-ratio: 1.25;
  border: 7px solid #fff;
  border-radius: 12px 28px 12px 28px;
  transform: rotate(-3deg);
}

.culture-bright-photo-main img,
.culture-bright-photo-sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.08) saturate(0.94);
}

.culture-bright-photo-main img {
  object-position: center center;
}

.culture-bright-photo-sub img {
  object-position: center 66%;
}

.culture-bright-caption {
  position: absolute;
  right: 16px;
  bottom: 2%;
  color: #0876a7;
  font-family: var(--font-en);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
}

.page-culture .culture-explore-heading {
  margin-top: clamp(36px, 4vw, 56px);
  scroll-margin-top: 100px;
}

@media (max-width: 900px) {
  .page-culture .culture-hero-layout {
    grid-template-columns: 1fr;
    gap: 46px;
    min-height: auto;
  }

  .culture-bright-photos {
    min-height: min(78vw, 590px);
  }
}

@media (max-width: 560px) {
  .culture-bright-copy h2 {
    font-size: clamp(2.75rem, 13vw, 4rem);
  }

  .culture-bright-copy p br {
    display: none;
  }

  .culture-bright-photos {
    min-height: 96vw;
  }

  .culture-bright-photo-main {
    inset: 0 0 12% 0;
    border-radius: 22px 56px 22px 44px;
  }

  .culture-bright-photo-sub {
    width: 45vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .culture-bright-photos {
    animation: none;
  }
}

/* Culture: bright editorial scene cards */
.page-culture .culture-tags {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.page-culture .culture-tag-button:nth-child(n) {
  grid-column: auto;
}

.page-culture .culture-tags .culture-tag-button {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  min-height: 390px;
  padding: 206px 28px 28px;
  overflow: hidden;
  color: var(--navy);
  border: 1px solid rgba(7, 58, 114, 0.1);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 20px 48px rgba(20, 68, 100, 0.1);
  animation: none;
  text-align: left;
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}

.page-culture .culture-tags .culture-tag-button::before {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  width: 100%;
  height: 180px;
  border: 0;
  border-radius: 24px 24px 36px 12px;
  background:
    linear-gradient(180deg, transparent 54%, rgba(5, 52, 88, 0.12)),
    var(--culture-photo) center / cover no-repeat;
  box-shadow: none;
  content: "";
  opacity: 1;
  transform: scale(1);
  transform-origin: center;
  transition: height 420ms cubic-bezier(0.2, 0.75, 0.2, 1), transform 520ms ease;
}

.page-culture .culture-tags .culture-tag-button::after {
  display: none;
}

.page-culture .culture-tags .culture-tag-button > span:first-child {
  align-self: start;
  padding-top: 3px;
  color: var(--culture-accent);
  font-family: var(--font-en);
  font-size: 0.68rem;
  font-weight: 900;
}

.page-culture .culture-tags .culture-tag-button > span:nth-child(2) {
  display: grid;
  gap: 8px;
}

.page-culture .culture-tags .culture-tag-button small {
  color: var(--culture-accent);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
}

.page-culture .culture-tags .culture-tag-button strong {
  color: var(--navy);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: 1.35;
}

.page-culture .culture-tags .culture-tag-button em {
  color: #5b7183;
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75;
}

.page-culture .culture-tags .culture-tag-button i {
  align-self: end;
  width: 34px;
  height: 34px;
  color: #fff;
  border: 0;
  background: var(--culture-accent);
  font-size: 0.9rem;
}

.page-culture .culture-tags .culture-tag-button:hover,
.page-culture .culture-tags .culture-tag-button:focus-visible {
  color: var(--navy);
  border-color: color-mix(in srgb, var(--culture-accent) 30%, transparent);
  background: #fff;
  box-shadow: 0 30px 64px rgba(20, 68, 100, 0.17);
  transform: translateY(-6px);
}

.page-culture .culture-tags .culture-tag-button:hover::before,
.page-culture .culture-tags .culture-tag-button:focus-visible::before {
  height: 190px;
  opacity: 1;
  transform: scale(1.035);
}

.page-culture .culture-tags .culture-tag-button:hover i,
.page-culture .culture-tags .culture-tag-button:focus-visible i {
  color: #fff;
  background: var(--culture-accent);
  transform: translate(3px, -3px);
}

@media (max-width: 960px) {
  .page-culture .culture-tags {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .page-culture .culture-tags {
    grid-template-columns: 1fr;
  }

  .page-culture .culture-tags .culture-tag-button {
    min-height: 350px;
    padding-top: 190px;
  }

  .page-culture .culture-tags .culture-tag-button::before {
    height: 166px;
  }
}

@keyframes topHeroTitle {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.985); filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero-content {
    animation: none;
  }
}

/* Home navigation: gently prioritize People and Culture */
.home-equal-people,
.home-equal-culture {
  isolation: isolate;
  min-height: 178px;
  border-color: rgba(161, 226, 255, 0.52);
  box-shadow: 0 24px 58px rgba(7, 58, 114, 0.24);
}

.home-equal-people::before,
.home-equal-culture::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.045);
  transition: opacity 380ms ease, transform 650ms ease;
}

.home-equal-people > span,
.home-equal-people > p,
.home-equal-people > h3,
.home-equal-people > small,
.home-equal-people > i,
.home-equal-culture > span,
.home-equal-culture > p,
.home-equal-culture > h3,
.home-equal-culture > small,
.home-equal-culture > i {
  position: relative;
  z-index: 1;
}

.home-equal-people::before {
  background-image:
    linear-gradient(90deg, rgba(4, 38, 78, 0.88), rgba(5, 72, 109, 0.62)),
    url("assets/award-2025-winner.JPG");
  background-position: center 38%;
}

.home-equal-culture::before {
  background-image:
    linear-gradient(90deg, rgba(4, 38, 78, 0.88), rgba(5, 72, 109, 0.58)),
    url("assets/event-bbq-group-day.jpg");
  background-position: center 46%;
}

.home-equal-people:hover::before,
.home-equal-people:focus-visible::before,
.home-equal-culture:hover::before,
.home-equal-culture:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.home-featured-label {
  position: absolute;
  z-index: 3;
  top: 18px;
  right: 58px;
  padding: 6px 10px;
  color: #073a72;
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-en);
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  box-shadow: 0 8px 22px rgba(2, 29, 63, 0.18);
}

.home-equal-people > i,
.home-equal-culture > i {
  transition: transform 260ms ease;
}

.home-equal-people:hover > i,
.home-equal-people:focus-visible > i,
.home-equal-culture:hover > i,
.home-equal-culture:focus-visible > i {
  transform: translateX(8px);
}

@media (max-width: 700px) {
  .home-equal-people,
  .home-equal-culture {
    min-height: 98px;
  }

  .home-featured-label {
    top: 8px;
    right: 42px;
    padding: 4px 7px;
    font-size: 0.46rem;
  }
}

/* Culture: 福利厚生カードは実写真を使わない専用ビジュアル */
.page-culture .culture-tags .benefits-tag-button::before {
  background:
    radial-gradient(circle at 24% 38%, rgba(255, 255, 255, 0.98) 0 9%, transparent 9.5%),
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.78) 0 12%, transparent 12.5%),
    radial-gradient(circle at 74% 42%, rgba(255, 255, 255, 0.92) 0 8%, transparent 8.5%),
    radial-gradient(ellipse at 50% 128%, rgba(255, 255, 255, 0.42) 0 49%, transparent 49.5%),
    linear-gradient(135deg, #0e7192 0%, #557fc0 56%, #9870ad 100%);
}

.page-culture .culture-tags .benefits-tag-button::after {
  position: absolute;
  z-index: 1;
  top: 24px;
  right: 24px;
  display: block;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-en);
  font-size: 0.54rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  content: "CARE / SUPPORT";
}

/* Culture: use the group photo for the Benefits scene card */
.page-culture .culture-tags .benefits-tag-button::before {
  background:
    linear-gradient(135deg, rgba(4, 38, 78, 0.22), rgba(13, 112, 133, 0.08)),
    url("assets/jiujitsu-training-04.jpeg") center 54% / cover no-repeat;
  filter: brightness(1.12) saturate(1.03);
}

/* Work: three-scene story plays gently without requiring a long scroll. */
.work-story.is-auto-story .work-story-visual {
  position: relative;
  top: auto;
}

.work-story.is-auto-story .work-story-steps {
  display: grid;
  min-height: min(72vh, 690px);
  padding-bottom: 0;
}

.work-story.is-auto-story .work-story-step {
  grid-area: 1 / 1;
  min-height: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  pointer-events: none;
}

.work-story.is-auto-story .work-story-step.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.work-story.is-auto-story .work-story-progress span {
  cursor: pointer;
}

.work-story.is-auto-story .work-story-progress span:focus-visible {
  outline: 2px solid #0878b9;
  outline-offset: 4px;
}

@media (max-width: 760px) {
  .work-story.is-auto-story .work-story-steps {
    min-height: 340px;
  }
}

@media (max-width: 620px) {
  .benefits-jiujitsu-gallery {
    grid-template-columns: 1fr;
  }

  .benefits-jiujitsu-gallery img {
    min-height: 210px;
  }
}

/* Final mobile overrides: preserve desktop relationships without cropping. */
@media (max-width: 560px) {
  .page-home .hero {
    display: flex;
    min-height: auto;
    flex-direction: column;
    padding: 68px 20px 54px;
  }

  .page-home .hero-content {
    position: relative;
    order: 1;
    width: 100%;
  }

  .page-home .hero-lead {
    max-width: 100%;
    font-size: 0.94rem;
    line-height: 1.95;
    text-wrap: pretty;
    word-break: normal;
    line-break: strict;
  }

  .page-home .hero-photo-stage {
    position: relative;
    order: 2;
    top: auto;
    right: auto;
    bottom: auto;
    width: calc(100% + 16px);
    height: auto;
    aspect-ratio: 793 / 562;
    margin: 30px -8px 0;
    translate: none;
  }

  .page-home .hero-photo-main {
    -webkit-mask-image: none;
    mask-image: none;
    border-radius: 22px 42px 22px 34px;
  }

  .page-home .hero-photo-main img {
    opacity: 0.78;
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  .page-home .hero-photo-stage::after {
    background: linear-gradient(180deg, rgba(251, 253, 255, 0.14), rgba(251, 253, 255, 0.02) 62%, rgba(251, 253, 255, 0.1));
  }

  .page-philosophy .book-stage {
    min-height: 520px;
    padding: 58px 0 0;
  }

  .page-philosophy .book-cover,
  .page-philosophy .book-spread {
    inset: 58px 0 0;
  }

  .page-philosophy .book-spread {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-philosophy .book-page {
    min-width: 0;
    min-height: 450px;
    padding: 18px 14px;
    border-radius: 0;
  }

  .page-philosophy .book-page-left {
    border-right: 0;
    border-radius: 8px 0 0 8px;
  }

  .page-philosophy .book-page-right {
    border-top: 1px solid rgba(214, 229, 240, 0.96);
    border-radius: 0 8px 8px 0;
  }

  .page-philosophy .book-page h3 {
    font-size: clamp(1.08rem, 5vw, 1.4rem);
  }

  .page-philosophy .book-page p,
  .page-philosophy .book-page li,
  .page-philosophy .purpose-lines span {
    font-size: clamp(0.6rem, 2.5vw, 0.74rem);
    line-height: 1.7;
  }

  .page-work .group-business-branches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .page-work .group-business-branches::before {
    display: block;
  }

  .page-work .group-business-company {
    min-height: 410px;
    padding: 20px 13px;
    border-radius: 18px;
  }

  .page-work .group-business-company-head h3 {
    margin: 9px 0 12px;
    font-size: clamp(0.92rem, 4vw, 1.14rem);
  }

  .page-work .group-business-company-logo {
    height: 34px;
    margin: 10px 0 14px;
  }

  .page-work .group-business-company > p {
    font-size: 0.68rem;
    line-height: 1.7;
  }

  .page-work .group-business-company ul {
    gap: 5px;
    margin: 14px 0 18px;
  }

  .page-work .group-business-company li {
    padding: 5px 7px;
    font-size: 0.58rem;
  }

  .page-work .group-business-scene {
    padding: 12px 10px;
  }

  .page-work .group-business-scene strong {
    font-size: 0.72rem;
  }
}

/* Recruitment entrance: a short bridge from the corporate site. */
.recruit-opening {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 18%, rgba(80, 194, 226, 0.17), transparent 24rem),
    radial-gradient(circle at 18% 82%, rgba(28, 117, 187, 0.1), transparent 26rem),
    #fbfdff;
  animation: recruitOpeningExit 0.8s cubic-bezier(0.65, 0, 0.35, 1) 4.1s forwards;
}

.recruit-opening[hidden] {
  display: none;
}

.recruit-opening::before,
.recruit-opening::after {
  position: absolute;
  width: min(72vw, 820px);
  aspect-ratio: 1;
  border: 1px solid rgba(8, 112, 170, 0.13);
  border-radius: 50%;
  content: "";
}

.recruit-opening::before {
  top: -48%;
  right: -18%;
  animation: recruitOpeningCircle 3.6s ease-out both;
}

.recruit-opening::after {
  bottom: -54%;
  left: -23%;
  animation: recruitOpeningCircle 3.6s ease-out 0.15s both reverse;
}

.recruit-opening-inner {
  position: relative;
  z-index: 2;
  min-width: min(78vw, 620px);
  color: #084c82;
  text-align: center;
}

.recruit-opening-inner::before {
  position: absolute;
  z-index: -1;
  top: -18%;
  right: -16%;
  bottom: -18%;
  left: -16%;
  background: radial-gradient(ellipse at center, #fff 0 46%, rgba(255, 255, 255, 0.94) 62%, rgba(255, 255, 255, 0) 82%);
  content: "";
  pointer-events: none;
}

.recruit-opening-inner .recruit-opening-logo {
  display: block;
  width: clamp(250px, 33vw, 430px);
  height: auto;
  margin: 0 auto 24px;
  opacity: 0;
  mix-blend-mode: multiply;
  clip-path: inset(2px);
  filter: contrast(0.98) saturate(0.96);
  animation: recruitOpeningMark 1s ease-out 0.42s forwards;
}

.recruit-opening-inner h1 {
  margin: 13px 0 18px;
  color: #06477a;
  font: 800 clamp(3.2rem, 9vw, 7.8rem)/0.88 var(--font-en);
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(22px);
  animation: recruitOpeningTitle 1.15s cubic-bezier(0.16, 1, 0.3, 1) 1.28s forwards;
}

.recruit-opening-inner span {
  display: block;
  color: #34718f;
  font-size: clamp(0.78rem, 1.4vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0;
  animation: recruitOpeningCopy 1s ease-out 2.25s forwards;
}

.recruit-opening-line {
  position: absolute;
  z-index: 1;
  left: 50%;
  width: min(84vw, 980px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(2, 119, 180, 0.52), transparent);
  transform: translateX(-50%) scaleX(0);
  animation: recruitOpeningLine 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.recruit-opening-line-a {
  top: 22%;
  animation-delay: 0.12s;
}

.recruit-opening-line-b {
  bottom: 22%;
  animation-delay: 0.38s;
}

.recruit-opening.is-leaving {
  pointer-events: none;
}

body.recruit-opening-active {
  overflow: hidden;
}

@keyframes recruitOpeningLine {
  to { transform: translateX(-50%) scaleX(1); }
}

@keyframes recruitOpeningMark {
  from { opacity: 0; transform: translateY(10px) rotate(-8deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes recruitOpeningCopy {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes recruitOpeningCircle {
  from { opacity: 0; transform: scale(0.84); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes recruitOpeningExit {
  to { opacity: 0; visibility: hidden; transform: translateY(-2%); }
}

@media (max-width: 560px) {
  .recruit-opening-inner {
    min-width: 90vw;
  }

  .recruit-opening-inner h1 {
    font-size: clamp(3rem, 17vw, 4.6rem);
    letter-spacing: 0.04em;
  }

  .recruit-opening-inner .recruit-opening-logo {
    width: min(76vw, 330px);
    margin-bottom: 20px;
  }

  .recruit-opening-line-a { top: 23%; }
  .recruit-opening-line-b { bottom: 23%; }
}

@media (prefers-reduced-motion: reduce) {
  .recruit-opening {
    animation-duration: 0.01ms;
    animation-delay: 0.8s;
  }
}

/* Recruitment top: isolate the people and remove visual noise from the office. */
.page-home .hero-photo-stage {
  top: 50%;
  right: 1.5%;
  width: min(57vw, 790px);
  height: min(43vw, 595px);
  translate: 0 -50%;
  background:
    radial-gradient(circle at 68% 36%, rgba(255, 220, 118, 0.2), transparent 24%),
    radial-gradient(circle at 38% 60%, rgba(76, 185, 222, 0.17), transparent 38%);
  border-radius: 46% 18% 42% 16% / 30% 42% 22% 36%;
}

.page-home .hero-photo-stage::before {
  display: block;
  inset: 7% 2% 3% 8%;
  background: linear-gradient(145deg, rgba(224, 244, 251, 0.66), rgba(255, 255, 255, 0.1));
  border: 1px solid rgba(8, 111, 165, 0.08);
  border-radius: 48% 16% 44% 20% / 26% 44% 20% 40%;
  transform: rotate(-2deg);
}

.page-home .hero-photo-stage::after {
  display: none;
}

.page-home .hero-photo-main {
  inset: 0;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
  background: transparent;
}

.page-home .hero-photo-main img {
  opacity: 1;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 24px 28px rgba(15, 67, 99, 0.12));
  transform: none;
}

@media (max-width: 900px) {
  .page-home .hero-photo-stage {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1.4;
    margin-top: 34px;
    translate: none;
  }
}

@media (max-width: 560px) {
  .page-home .hero-photo-stage {
    order: 2;
    width: calc(100% + 12px);
    margin: 28px -6px 0;
  }

  .page-home .hero-photo-main img {
    width: 100%;
    height: 100%;
  }
}

/* Recruitment top v4: contextual photo crops in organic frames. */
.page-home .hero-photo-stage {
  top: 51%;
  right: 1.5%;
  width: min(53vw, 760px);
  height: min(43vw, 610px);
  translate: 0 -50%;
  overflow: visible;
  background: none;
}

.page-home .hero-photo-main,
.page-home .hero-photo-sub {
  position: absolute;
  display: block;
  overflow: hidden;
  margin: 0;
  background: #eaf5fa;
  box-shadow: 0 24px 54px rgba(18, 69, 104, 0.14);
}

.page-home .hero-photo-main {
  inset: 3% 1% 3% auto;
  width: 65%;
  border: 3px solid rgba(8, 89, 167, 0.82);
  border-left-color: transparent;
  border-bottom-color: rgba(255, 197, 54, 0.9);
  border-radius: 48% 40% 46% 38% / 32% 48% 38% 50%;
  transform: rotate(1.2deg);
  animation: heroOrganicMain 8s ease-in-out infinite alternate;
}

.page-home .hero-photo-sub {
  left: 2%;
  bottom: 10%;
  width: 39%;
  height: 58%;
  aspect-ratio: auto;
  border: 3px solid rgba(255, 196, 46, 0.88);
  border-top-color: rgba(8, 89, 167, 0.86);
  border-right-color: transparent;
  border-radius: 46% 54% 48% 52% / 52% 44% 56% 48%;
  transform: rotate(-2deg);
  animation: heroOrganicSub 7s ease-in-out infinite alternate;
}

.page-home .hero-photo-main img,
.page-home .hero-photo-sub img {
  width: 100%;
  height: 100%;
  opacity: 1;
  object-fit: cover;
  filter: saturate(0.92) brightness(1.06);
  transform: none;
}

.page-home .hero-photo-main img {
  object-position: 82% 50%;
}

.page-home .hero-photo-sub img {
  object-position: 10% 48%;
}

.page-home .hero-photo-stage::before,
.page-home .hero-photo-stage::after {
  display: none;
}

.hero-photo-dot {
  position: absolute;
  z-index: 4;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.hero-photo-dot-yellow {
  top: 6%;
  left: 31%;
  width: clamp(24px, 4vw, 54px);
  aspect-ratio: 1;
  background: #ffd252;
  opacity: 0.78;
  animation: heroDotFloatA 5.8s ease-in-out infinite alternate;
}

.hero-photo-dot-blue {
  right: 3%;
  bottom: 7%;
  width: clamp(12px, 2vw, 26px);
  aspect-ratio: 1;
  background: #0c63c7;
  opacity: 0.72;
  animation: heroDotFloatB 7.2s ease-in-out infinite alternate;
}

.hero-photo-dot-small {
  top: 28%;
  left: -1%;
  width: 10px;
  aspect-ratio: 1;
  background: #23a4d1;
  animation: heroDotFloatB 4.8s ease-in-out infinite alternate-reverse;
}

.page-home .hero::before {
  left: 35%;
  top: 18%;
  bottom: auto;
  width: clamp(72px, 9vw, 126px);
  background: rgba(255, 215, 82, 0.2);
  border: 0;
  animation: heroSoftCircle 6.5s ease-in-out infinite alternate;
}

@keyframes heroOrganicMain {
  from { transform: translateY(-3px) rotate(1.2deg); }
  to { transform: translateY(6px) rotate(0.4deg); }
}

@keyframes heroOrganicSub {
  from { transform: translateY(4px) rotate(-2deg); }
  to { transform: translateY(-5px) rotate(-1deg); }
}

@keyframes heroDotFloatA {
  from { transform: translate3d(0, 0, 0) scale(0.92); }
  to { transform: translate3d(10px, -12px, 0) scale(1.08); }
}

@keyframes heroDotFloatB {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-8px, 10px, 0); }
}

@keyframes heroSoftCircle {
  from { opacity: 0.42; transform: scale(0.9); }
  to { opacity: 0.8; transform: scale(1.08); }
}

@media (max-width: 900px) {
  .page-home .hero-photo-stage {
    position: relative;
    top: auto;
    right: auto;
    width: min(100%, 680px);
    height: auto;
    aspect-ratio: 1.25;
    margin: 36px auto 0;
    translate: none;
  }

  .page-home .hero::before {
    left: auto;
    right: 7%;
    top: 34%;
  }
}

@media (max-width: 560px) {
  .page-home .hero-photo-stage {
    order: 2;
    width: 100%;
    margin-top: 28px;
  }

  .page-home .hero-photo-main {
    width: 66%;
  }

  .page-home .hero-photo-sub {
    width: 41%;
    height: 56%;
  }

  .hero-photo-dot-yellow {
    width: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero-photo-main,
  .page-home .hero-photo-sub,
  .hero-photo-dot,
  .page-home .hero::before {
    animation: none;
  }
}

/* Recruitment top v5: one shared scene for the two colleagues. */
.page-home .hero-photo-stage { top: 51%; right: 1.2%; width: min(54vw, 780px); height: min(38vw, 535px); translate: 0 -50%; }
.page-home .hero-photo-main { inset: 5% 1% 4%; width: auto; height: auto; border: 3px solid rgba(8,89,167,.75); border-left-color: rgba(255,199,55,.88); border-bottom-color: rgba(255,199,55,.88); border-radius: 47% 53% 45% 55% / 44% 39% 61% 56%; transform: rotate(.4deg); animation: heroSharedScene 8s ease-in-out infinite alternate; }
.page-home .hero-photo-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(255,255,255,.08),transparent 22%,transparent 78%,rgba(255,255,255,.1)); pointer-events: none; }
.page-home .hero-photo-main img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; filter: saturate(.9) brightness(1.07) contrast(.96); transform: scale(1.02); }
.page-home .hero-photo-sub { display: none; }
.hero-photo-dot-yellow { top: 0; left: 14%; width: clamp(20px,3vw,42px); }
.hero-photo-dot-blue { right: 0; bottom: 4%; }
.hero-photo-dot-small { top: 23%; left: -1%; }
@keyframes heroSharedScene { from { transform: translateY(-3px) rotate(.4deg); border-radius: 47% 53% 45% 55% / 44% 39% 61% 56%; } to { transform: translateY(5px) rotate(-.2deg); border-radius: 51% 49% 52% 48% / 48% 44% 56% 52%; } }
@media (max-width: 900px) { .page-home .hero-photo-stage { position: relative; top: auto; right: auto; width: min(100%,680px); height: auto; aspect-ratio: 1.45; margin: 34px auto 0; translate: none; } .page-home .hero-photo-main { inset: 3% 1% 5%; } }
@media (max-width: 560px) { .page-home .hero-photo-stage { width: 100%; aspect-ratio: 1.32; margin-top: 26px; } .page-home .hero-photo-main { width: auto; inset: 3% 0 5%; } .page-home .hero-photo-main img { object-position: 50% 52%; } }
@media (prefers-reduced-motion: reduce) { .page-home .hero-photo-main { animation: none; } }

/* Recruitment top v6: sharper visual tone aligned with the FOR YOU section. */
.page-home .hero {
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    radial-gradient(circle at 82% 22%, rgba(75,188,228,.27), transparent 25rem),
    radial-gradient(circle at 9% 88%, rgba(18,116,181,.2), transparent 28rem),
    linear-gradient(135deg, #062c5b 0%, #064d85 56%, #087ba3 100%);
  background-size: 72px 72px, 72px 72px, auto, auto, auto;
}

.page-home .hero::before {
  left: 33%;
  top: 12%;
  width: clamp(70px, 8vw, 112px);
  background: rgba(255, 207, 61, .14);
  border: 1px solid rgba(255, 220, 107, .3);
  box-shadow: 0 0 70px rgba(255, 207, 61, .12);
}

.page-home .hero-content { color: #fff; }
.page-home .hero .eyebrow { color: #ffd45f; }
.page-home .hero h1 { color: #fff; text-shadow: 0 18px 44px rgba(1,20,48,.24); }
.page-home .hero-lead { color: rgba(255,255,255,.86); }

.page-home .attention-rotator span,
.page-home .attention-rotator strong {
  color: #fff;
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.09);
  box-shadow: none;
  backdrop-filter: blur(8px);
}

.page-home .attention-rotator strong {
  color: #062f61;
  border-color: rgba(255,212,95,.76);
  background: #ffd45f;
}

.page-home .hero .button.primary {
  color: #073a72;
  background: #fff;
  box-shadow: 0 14px 34px rgba(1,24,54,.22);
}

.page-home .hero .button.secondary {
  color: #fff;
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.08);
}

.page-home .hero-photo-main {
  border-color: rgba(255,255,255,.72);
  border-left-color: #ffd45f;
  border-bottom-color: #ffd45f;
  box-shadow: 0 30px 70px rgba(1,25,56,.32);
}

.page-home .hero-photo-main img {
  filter: saturate(.92) brightness(1.04) contrast(.98);
}

.page-home .hero-photo-caption { color: rgba(255,255,255,.72); }
.hero-photo-dot-yellow { background: #ffd45f; }
.hero-photo-dot-blue { background: #6dd7f4; }
.hero-photo-dot-small { background: rgba(255,255,255,.85); }

@media (max-width: 900px) {
  .page-home .hero::before { left: auto; right: 8%; top: 30%; }
}

/* Work story: photographic treatment consistent with People and Culture. */
.work-photo-story .work-story-visual figure { padding: 0; background: #eaf3f8; }
.work-photo-story .work-story-visual::before { content: "IMAGE PHOTO"; position: absolute; z-index: 5; top: clamp(18px,2.5vw,28px); right: clamp(18px,2.5vw,28px); padding: 7px 10px; color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.48); background: rgba(3,38,70,.24); backdrop-filter: blur(6px); font-family: var(--font-en); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.work-photo-story .work-story-visual img { object-fit: cover; filter: saturate(.88) contrast(.98) brightness(1.03); }
.work-photo-story .work-story-visual figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(4,42,78,.18)); pointer-events: none; }
.work-photo-story .work-story-progress { z-index: 4; }
.work-photo-story .work-story-progress span { color: rgba(255,255,255,.58); border-color: rgba(255,255,255,.32); text-shadow: 0 1px 8px rgba(0,35,68,.35); }
.work-photo-story .work-story-progress span.is-active { color: #fff; border-color: #ffd45f; }

/* Recruitment top v8: people as atmosphere, copy as the focal point. */
.page-home .hero {
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 9% 13%, rgba(255,218,92,.16), transparent 16rem),
    radial-gradient(circle at 76% 84%, rgba(81,188,224,.13), transparent 25rem),
    linear-gradient(135deg, #fff 0%, #f9fcff 58%, #edf7fc 100%);
}

.page-home .hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: -9vw;
  bottom: -24vw;
  width: min(68vw, 960px);
  aspect-ratio: 1;
  border: 1px solid rgba(8,105,163,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 9vw rgba(65,177,216,.025), 0 0 0 18vw rgba(65,177,216,.018);
  animation: topBackgroundOrbit 16s ease-in-out infinite alternate;
  pointer-events: none;
}

.page-home .hero-photo-stage {
  z-index: 1;
  top: 0;
  right: 0;
  width: min(58vw, 900px);
  height: 100%;
  translate: none;
  opacity: .46;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 43%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 16%, #000 43%, #000 100%);
  animation: heroAtmosphereIn 2.2s cubic-bezier(.2,.72,.2,1) both;
}

.page-home .hero-photo-main {
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: heroAtmosphereDrift 14s ease-in-out infinite alternate;
}

.page-home .hero-photo-main::after {
  background:
    linear-gradient(90deg, rgba(249,252,255,.9) 0%, rgba(249,252,255,.25) 36%, transparent 68%),
    linear-gradient(0deg, rgba(237,247,252,.22), transparent 42%);
}

.page-home .hero-photo-main img {
  object-position: 52% 50%;
  filter: saturate(.72) brightness(1.1) contrast(.9);
  transform: scale(1.035);
}

.page-home .hero-photo-caption { display: none; }
.page-home .hero-photo-dot-yellow { top: 15%; left: 15%; width: clamp(16px,2vw,28px); opacity: .48; }
.page-home .hero-photo-dot-blue { right: 9%; bottom: 12%; width: clamp(10px,1.3vw,18px); opacity: .34; }
.page-home .hero-photo-dot-small { display: none; }

.page-home .hero-content { z-index: 5; width: min(54vw, 760px); }

@keyframes heroAtmosphereIn {
  from { opacity: 0; transform: translate3d(34px,0,0); }
  to { opacity: .46; transform: translate3d(0,0,0); }
}

@keyframes heroAtmosphereDrift {
  from { transform: scale(1.035) translate3d(0,0,0); }
  to { transform: scale(1.055) translate3d(-7px,4px,0); }
}

@keyframes topBackgroundOrbit {
  from { transform: translate3d(0,0,0) rotate(0deg); }
  to { transform: translate3d(-14px,-8px,0) rotate(3deg); }
}

@media (max-width: 900px) {
  .page-home .hero-content { width: 100%; }
  .page-home .hero-photo-stage {
    position: relative;
    top: auto;
    right: auto;
    width: calc(100% + 40px);
    height: min(64vw, 440px);
    margin: 30px -20px -20px;
    opacity: .58;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 100%);
  }
  .page-home .hero-photo-main img { object-position: 50% 46%; }
}

@media (prefers-reduced-motion: reduce) {
  .page-home .hero::after,
  .page-home .hero-photo-stage,
  .page-home .hero-photo-main { animation: none; }
}

/* Recruitment top v12: smaller supporting photo, clear of the lead copy. */
@media (min-width: 761px) {
  .page-home .hero-photo-stage {
    top: 42% !important;
    right: 1.5% !important;
    width: min(48vw, 710px) !important;
    height: 49% !important;
  }
}

/* Recruitment top v9: lower the atmospheric photo and reveal both faces. */
@media (min-width: 901px) {
  .page-home .hero-photo-stage {
    top: 8%;
    height: 92%;
    width: min(61vw, 930px);
    opacity: .5;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.62) 8%, #000 28%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.62) 8%, #000 28%, #000 100%);
  }

  .page-home .hero-photo-main img {
    object-position: 46% 59%;
  }
}

/* Recruitment top v7: return to the light background and prioritize the title. */
.page-home .hero {
  background:
    radial-gradient(circle at 10% 14%, rgba(255,222,112,.18), transparent 17rem),
    radial-gradient(circle at 72% 88%, rgba(91,196,226,.12), transparent 23rem),
    linear-gradient(135deg, #fff 0%, #f8fcff 56%, #edf7fc 100%);
  background-size: auto;
}

.page-home .hero::before {
  left: 36%;
  top: 18%;
  width: clamp(64px, 7vw, 98px);
  background: rgba(255,215,82,.18);
  border: 0;
  box-shadow: none;
}

.page-home .hero-content {
  z-index: 5;
  width: min(50vw, 720px);
  max-width: 720px;
  color: var(--navy);
}

.page-home .hero .eyebrow { color: #0876a7; }
.page-home .hero h1 {
  color: var(--navy);
  font-size: clamp(3.5rem, 6.45vw, 7rem);
  text-shadow: none;
}
.page-home .hero-lead { color: #315069; }

.page-home .attention-rotator span,
.page-home .attention-rotator strong {
  color: var(--navy);
  border-color: rgba(18,58,99,.15);
  background: rgba(255,255,255,.84);
  box-shadow: 0 8px 22px rgba(20,68,100,.06);
  backdrop-filter: blur(7px);
}

.page-home .attention-rotator strong {
  color: #07517f;
  border-color: rgba(96,190,226,.18);
  background: #dff3ff;
}

.page-home .hero .button.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--blue));
  box-shadow: 0 12px 28px rgba(11,58,104,.22);
}

.page-home .hero .button.secondary {
  color: var(--navy);
  border-color: rgba(18,58,99,.2);
  background: rgba(255,255,255,.82);
}

.page-home .hero-photo-stage {
  right: 2.8%;
  width: min(43vw, 625px);
  height: min(31vw, 445px);
}

.page-home .hero-photo-main {
  border-color: rgba(8,89,167,.58);
  border-left-color: rgba(255,199,55,.82);
  border-bottom-color: rgba(255,199,55,.82);
  box-shadow: 0 22px 52px rgba(20,68,100,.14);
}

.page-home .hero-photo-caption { color: rgba(8,91,145,.66); }
.hero-photo-dot-blue { background: #0c63c7; }
.hero-photo-dot-small { background: #23a4d1; }

@media (max-width: 900px) {
  .page-home .hero-content { width: 100%; }
  .page-home .hero-photo-stage {
    width: min(88%, 590px);
    aspect-ratio: 1.48;
    margin-top: 28px;
  }
  .page-home .hero::before { left: auto; right: 8%; top: 33%; }
}

@media (max-width: 560px) {
  .page-home .hero h1 { font-size: clamp(2.8rem, 13.5vw, 4.1rem); }
  .page-home .hero-photo-stage { width: 92%; margin-top: 24px; }
}

/* Recruitment top v14: dissolve the photograph into the background. */
@media (min-width: 761px) {
  .page-home .hero-photo-stage {
    overflow: visible !important;
    border-radius: 0 !important;
    -webkit-mask-image: radial-gradient(ellipse 72% 76% at 66% 59%, #000 0%, #000 52%, rgba(0,0,0,.72) 68%, transparent 100%) !important;
    mask-image: radial-gradient(ellipse 72% 76% at 66% 59%, #000 0%, #000 52%, rgba(0,0,0,.72) 68%, transparent 100%) !important;
  }

  .page-home .hero-photo-main {
    inset: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .page-home .hero-photo-main::after {
    background: radial-gradient(ellipse at 66% 58%, transparent 42%, rgba(249,252,255,.18) 68%, rgba(249,252,255,.68) 100%) !important;
  }
}

/* Recruitment top v16: use the same visual language as the Work hero. */
.page-home .hero-energy {
  top: 7%;
  right: -2%;
  bottom: 5%;
  width: min(55vw, 820px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-home .hero-energy::before {
  content: "RECRUIT";
  right: -.06em;
  bottom: -.13em;
  color: rgba(7,83,137,.052);
  font-size: clamp(9rem,17vw,17rem);
  letter-spacing: -.075em;
  animation: topRecruitWord 1.6s cubic-bezier(.16,1,.3,1) both;
}

.page-home .hero-energy::after {
  content: "";
  top: 18%;
  left: 9%;
  width: 84%;
  height: 56%;
  border: 1px solid rgba(9,105,164,.15);
  border-right-color: transparent;
  border-bottom-color: rgba(9,105,164,.08);
  border-radius: 50%;
  transform: rotate(-9deg);
  animation: topRecruitOrbit 15s ease-in-out infinite alternate;
}

.page-home .hero-energy .energy-line {
  top: 48%;
  left: 46%;
  width: 78%;
  height: 42%;
  border: 1px solid rgba(9,105,164,.12);
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  background: none;
}

.page-home .hero-energy .line-a { transform: translate(-50%,-50%) rotate(13deg); }
.page-home .hero-energy .line-b { transform: translate(-50%,-50%) rotate(-25deg) scale(.76); }
.page-home .hero-energy .dot-a { top: 25%; left: 25%; }
.page-home .hero-energy .dot-b { top: 18%; right: 20%; width: 13px; height: 13px; }
.page-home .hero-energy .dot-c { right: 24%; bottom: 24%; }

@keyframes topRecruitWord {
  from { opacity: 0; transform: translate3d(6%,8%,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

@keyframes topRecruitOrbit {
  from { transform: rotate(-9deg) translate3d(0,0,0); }
  to { transform: rotate(-6deg) translate3d(-10px,8px,0); }
}

@media (max-width: 900px) {
  .page-home .hero-energy {
    width: 100%;
    height: min(68vw, 420px);
    margin-top: 22px;
  }
  .page-home .hero-energy::before { font-size: clamp(7rem,27vw,13rem); }
}

/* People v17: shared visual language with the recruitment top and Work. */
.page-people .people-section {
  isolation: isolate;
  min-height: calc(100svh - 74px);
  background:
    radial-gradient(circle at 88% 14%, rgba(73,185,224,.13), transparent 22rem),
    radial-gradient(circle at 8% 74%, rgba(255,216,82,.08), transparent 18rem),
    linear-gradient(145deg, #fff 0%, #f8fcff 64%, #eef8fc 100%);
}

.page-people .people-section::before {
  content: "PEOPLE";
  position: absolute;
  z-index: -1;
  top: -.12em;
  right: -.045em;
  color: rgba(7,83,137,.047);
  font-family: var(--font-en);
  font-size: clamp(9rem,20vw,19rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.075em;
  white-space: nowrap;
  animation: peopleBackgroundWord 1.7s cubic-bezier(.16,1,.3,1) both;
}

.page-people .people-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 3%;
  right: -10%;
  width: min(62vw, 880px);
  aspect-ratio: 1.65;
  border: 1px solid rgba(9,105,164,.12);
  border-left-color: rgba(255,204,65,.15);
  border-radius: 50%;
  transform: rotate(-8deg);
  animation: peopleBackgroundOrbit 17s ease-in-out infinite alternate;
  pointer-events: none;
}

.page-people .section-heading,
.page-people .people-bento,
.page-people .entry-actions {
  position: relative;
  z-index: 2;
}

@keyframes peopleBackgroundWord {
  from { opacity: 0; transform: translate3d(6%,5%,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

@keyframes peopleBackgroundOrbit {
  from { transform: rotate(-8deg) translate3d(0,0,0); }
  to { transform: rotate(-5deg) translate3d(-12px,9px,0); }
}

@media (max-width: 700px) {
  .page-people .people-section::before {
    top: .04em;
    font-size: clamp(7rem,34vw,12rem);
  }
  .page-people .people-section::after {
    top: 2%;
    right: -38%;
    width: 118vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-people .people-section::before,
  .page-people .people-section::after { animation: none; }
}

/* Recruitment top v18: keep the full RECRUIT word inside the viewport. */
.page-home .hero-energy::before {
  right: 1%;
  bottom: -.08em;
  font-size: clamp(7.5rem, 11.5vw, 12rem);
  letter-spacing: -.055em;
}

/* Culture v18: shared visual language with Recruitment, Work and People. */
.page-culture .culture-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100svh - 74px);
  background:
    radial-gradient(circle at 87% 13%, rgba(73,185,224,.13), transparent 22rem),
    radial-gradient(circle at 7% 76%, rgba(255,216,82,.08), transparent 18rem),
    linear-gradient(145deg, #fff 0%, #f8fcff 64%, #eef8fc 100%);
}

.page-culture .culture-section::before {
  content: "CULTURE";
  position: absolute;
  z-index: -1;
  top: -.12em;
  right: -.025em;
  display: block;
  color: rgba(7,83,137,.047);
  font-family: var(--font-en);
  font-size: clamp(8rem,18vw,17rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.07em;
  white-space: nowrap;
  animation: cultureBackgroundWord 1.7s cubic-bezier(.16,1,.3,1) both;
}

.page-culture .culture-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 2%;
  right: -9%;
  width: min(61vw,860px);
  aspect-ratio: 1.65;
  border: 1px solid rgba(9,105,164,.12);
  border-left-color: rgba(255,204,65,.15);
  border-radius: 50%;
  transform: rotate(-8deg);
  animation: cultureBackgroundOrbit 18s ease-in-out infinite alternate;
  pointer-events: none;
}

.page-culture .culture-editorial-hero,
.page-culture .culture-tags {
  position: relative;
  z-index: 2;
}

@keyframes cultureBackgroundWord {
  from { opacity: 0; transform: translate3d(6%,5%,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}

@keyframes cultureBackgroundOrbit {
  from { transform: rotate(-8deg) translate3d(0,0,0); }
  to { transform: rotate(-5deg) translate3d(-12px,9px,0); }
}

@media (max-width: 700px) {
  .page-culture .culture-section::before {
    top: .03em;
    font-size: clamp(6.5rem,30vw,11rem);
  }
  .page-culture .culture-section::after {
    top: 2%;
    right: -38%;
    width: 118vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-culture .culture-section::before,
  .page-culture .culture-section::after { animation: none; }
}

/* Shared background-word scale and placement across Recruitment, Work, People and Culture. */
.page-work .work-compact-hero::before,
.page-home .hero-energy::before,
.page-people .people-section::before,
.page-culture .culture-section::before {
  right: auto;
  left: 2vw;
  font-size: clamp(9rem, 22vw, 24rem);
  line-height: .8;
  letter-spacing: -.09em;
}

.page-home .hero-energy {
  right: 0;
  left: 0;
  width: 100%;
}

.page-home .hero-energy::before {
  bottom: -.08em;
}

.page-people .people-section::before,
.page-culture .culture-section::before {
  top: .02em;
}

@media (max-width: 760px) {
  .page-work .work-compact-hero::before,
  .page-home .hero-energy::before,
  .page-people .people-section::before,
  .page-culture .culture-section::before {
    right: auto;
    left: 2vw;
    font-size: clamp(5.5rem, 24vw, 9rem);
    letter-spacing: -.1em;
  }
}

/* Final background word sizing: use the Philosophy scale throughout. */
.page-home .hero-energy::before,
.page-people .people-section::before {
  right: 1vw;
  left: auto;
  font-size: clamp(8rem, 14vw, 15rem);
  line-height: .8;
  letter-spacing: -.09em;
}

.page-culture .culture-section::before {
  right: 2vw;
  left: auto;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: clamp(7.5rem, 11.5vw, 12.5rem);
  line-height: .8;
  letter-spacing: -.09em;
}

.page-philosophy .identity-book-section::before {
  right: auto;
  left: 50%;
  translate: -50% 0;
}

.page-work .work-compact-hero::before {
  right: 1vw;
  left: auto;
  font-size: clamp(8rem, 14vw, 15rem);
  line-height: .8;
  letter-spacing: -.09em;
}

.page-culture .culture-section::after,
.contact-section::before {
  display: none !important;
}

@media (max-width: 760px) {
  .page-home .hero-energy::before,
  .page-people .people-section::before {
    right: 1vw;
    left: auto;
    font-size: clamp(4.4rem, 15vw, 6.5rem);
    letter-spacing: -.1em;
  }

  .page-culture .culture-section::before {
    right: 2vw;
    left: auto;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: clamp(3.9rem, 12.5vw, 5.7rem);
    letter-spacing: -.1em;
  }

  .page-philosophy .identity-book-section::before {
    right: auto;
    left: 50%;
    translate: -50% 0;
  }

  .page-work .work-compact-hero::before {
    right: 1vw;
    left: auto;
    font-size: clamp(4.4rem, 15vw, 6.5rem);
    letter-spacing: -.1em;
  }
}

/* Philosophy mobile v2: compact desktop-like open book. */
@media (max-width: 560px) {
  .page-philosophy .credo-book { width: 100%; margin-top: 26px; }
  .page-philosophy .credo-tabs { gap: 6px; margin-bottom: 10px; }
  .page-philosophy .credo-tabs button { min-height: 34px; padding: 0 9px; font-size: .62rem; }
  .page-philosophy .book-stage { width: 100%; min-height: 0; height: auto; aspect-ratio: 1.4; padding: 42px 0 0; }
  .page-philosophy .book-cover,
  .page-philosophy .book-spread { inset: 42px 0 0; min-height: 0; }
  .page-philosophy .book-cover { font-size: clamp(1.5rem, 9vw, 2.4rem); }
  .page-philosophy .book-spread { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .page-philosophy .book-page,
  .page-philosophy .book-page-right { width: auto; min-width: 0; min-height: 0; height: 100%; padding: 12px 10px; overflow: hidden; }
  .page-philosophy .book-page-left { border: 1px solid rgba(214,229,240,.96); border-right: 0; border-radius: 7px 0 0 7px; }
  .page-philosophy .book-page-right { border: 1px solid rgba(214,229,240,.96); border-left: 0; border-radius: 0 7px 7px 0; }
  .page-philosophy .book-number,
  .page-philosophy .book-kicker { margin-bottom: 7px; font-size: clamp(.4rem, 1.75vw, .52rem); }
  .page-philosophy .book-page h3,
  .page-philosophy .purpose-title-page h3,
  .page-philosophy .credo-title-page h3,
  .page-philosophy .principle-stance-page h3 { margin-bottom: 7px; font-size: clamp(.78rem, 3.7vw, 1.05rem); line-height: 1.38; letter-spacing: .01em; }
  .page-philosophy .book-page p,
  .page-philosophy .book-page li,
  .page-philosophy .purpose-lines span,
  .page-philosophy .purpose-copy-page .purpose-statement,
  .page-philosophy .credo-copy-page .credo-statement { font-size: clamp(.43rem, 1.95vw, .56rem); line-height: 1.62; letter-spacing: 0; }
  .page-philosophy .principle-list-page,
  .page-philosophy .principle-list-page-right { padding: 11px 9px; }
  .page-philosophy .principle-list-page .book-number { margin-bottom: 3px; }
  .page-philosophy .principle-static-list > div { grid-template-columns: 13px minmax(0,1fr); gap: 0 4px; padding: 3px 0; }
  .page-philosophy .principle-static-list b { font-size: .42rem; }
  .page-philosophy .principle-static-list h4 { font-size: clamp(.42rem, 1.9vw, .54rem); line-height: 1.24; }
  .page-philosophy .principle-static-list p { font-size: clamp(.34rem, 1.55vw, .44rem); line-height: 1.3; }
  .page-philosophy .logo-page { align-content: center; gap: 7px; }
  .page-philosophy .logo-page h3 { font-size: clamp(.58rem, 2.4vw, .72rem); }
  .page-philosophy .logo-mark-page { gap: 6px; }
  .page-philosophy .official-mark-flow { min-height: 0; }
  .page-philosophy .official-mark-flow img { max-height: 92px; object-fit: contain; }
  .page-philosophy .book-arrow { top: 5px; height: 30px; padding: 0 10px; font-size: .6rem; }
}

/* Social contribution mobile: align SPOGOMI copy with the other modal sections. */
@media (max-width: 760px) {
  .contribution-modal .contribution-activity {
    box-sizing: border-box;
    width: auto;
    margin: 38px 0 30px;
    padding: 0 28px;
  }

  .contribution-modal .contribution-activity .sponsor-activity-heading {
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }

  .contribution-modal .contribution-activity .sponsor-activity-heading h3 {
    margin-top: 10px;
    font-size: clamp(1.65rem, 8vw, 2.15rem);
    line-height: 1.4;
  }

  .contribution-modal .contribution-activity .sponsor-activity-heading p {
    line-height: 1.9;
  }
}

@media (max-width: 380px) {
  .contribution-modal .contribution-activity { padding-right: 22px; padding-left: 22px; }
}

/* Social contribution mobile: balance the sponsorship introduction too. */
@media (max-width: 760px) {
  .contribution-modal .sponsor-activity > .sponsor-activity-heading {
    box-sizing: border-box;
    width: auto;
    max-width: none;
    margin-right: 28px;
    margin-left: 28px;
  }

  .contribution-modal .sponsor-activity > .sponsor-activity-heading h3 {
    margin-top: 10px;
    font-size: clamp(1.65rem, 8vw, 2.15rem);
    line-height: 1.4;
  }

  .contribution-modal .sponsor-activity > .sponsor-activity-heading p {
    line-height: 1.9;
  }
}

@media (max-width: 380px) {
  .contribution-modal .sponsor-activity > .sponsor-activity-heading {
    margin-right: 22px;
    margin-left: 22px;
  }
}