/* 
  K.W.T WORKS - Scaffolding Recruitment Website Stylesheet
  Theme: Black base + Premium craft (Phase 1)
*/

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

:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-on-light: #000000;

  /* Ink-black layered backgrounds (墨黒 — lifted dark gray, still black-themed) */
  --color-bg-page: #2a2a2a;
  --color-bg-section: #2c2c2c;
  --color-bg-section-alt: #303030;
  --color-bg-base: #2a2a2a;
  --color-bg-light: #303030;
  --color-bg-deep: #222222;
  --color-bg-deep-alt: #1e1e1e;
  --color-bg-photo: #303030;
  --color-bg-info: #2c2c2c;

  --color-surface: #383838;
  --color-surface-2: #363636;
  --color-surface-elevated: #3c3c3c;
  --color-surface-3: #282828;

  --color-gray-100: #363636;
  --color-gray-200: rgba(255, 255, 255, 0.12);
  --color-gray-300: #d0d0d0;
  --color-gray-500: #bdbdbd;
  --color-gray-700: #e8e8e8;
  --color-gray-900: #f5f5f5;

  --color-accent: #2e3033;
  --color-brown: #b89448;
  /* Premium gold — sparse accent (ENTRY / nav / highlights) */
  --color-accent-warm: #c9a84c;
  --color-accent-warm-hover: #a88838;
  --color-accent-warm-soft: #e0c878;
  --color-accent-warm-rgb: 201, 168, 76;

  /* Typography hierarchy */
  --color-text-heading: #f7f7f7;
  --color-text-main: #f5f5f5;
  --color-text-body: #d4d4d4;
  --color-text-muted: #d0d0d0;
  --color-text-subtle: #b5b5b5;
  --color-text-caption: #a8a8a8;

  --color-border: rgba(255, 255, 255, 0.11);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  
  --font-sans: 'Outfit', 'Noto Sans JP', sans-serif;
  --font-serif: 'Noto Serif JP', serif;
  
  --header-height: 64px;
  --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  --border-radius: 4px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--color-bg-page);
  color: var(--color-text-body);
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
  background-color: var(--color-bg-page);
  color: var(--color-text-body);
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-smooth);
}

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

ul, ol {
  list-style: none;
}

/* --- Layout Utilities --- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-padding {
  padding: 100px 0;
}

@media (max-width: 768px) {
  .section-padding {
    padding: 70px 0;
  }
}

/* 
  --- Floating Left Vertical Capsule Navigation (Desktop) ---
*/
header.site-header {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: auto;
  min-height: 420px;
  background-color: rgba(42, 42, 42, 0.94);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: 99px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: 30px 0;
  transition: var(--transition-smooth);
}

/* On desktop, keep vertically centered without hiding animations */
header.site-header.header-hidden {
  transform: translateY(-50%);
}

.header-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

/* Mini Rounded Logo */
.logo a {
  font-size: 16px;
  font-weight: 900;
  color: var(--color-white);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface-2);
  border-radius: 50%;
  position: relative;
  letter-spacing: 0;
}

.logo span {
  display: none; /* Hide badge inside mini-capsule logo */
}

/* Sliding tooltip for Logo */
.logo a::before {
  content: attr(data-label);
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-smooth);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 1060;
}

.logo a:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Vertical Capsule Menu Items */
.nav-menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.nav-menu a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  background: transparent;
  position: relative;
  transition: var(--transition-smooth);
}

/* Expandable hover tooltip for menu links */
.nav-menu a::before {
  content: attr(data-label);
  position: absolute;
  left: 50px;
  top: 50%;
  transform: translateY(-50%) translateX(-10px);
  background-color: var(--color-black);
  color: var(--color-white);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition-smooth);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 1060;
}

.nav-menu a:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.nav-menu a:hover,
.nav-menu a.active {
  background-color: var(--color-accent-warm);
  color: var(--color-white);
}

.nav-menu a.active {
  box-shadow: 0 0 0 1px rgba(var(--color-accent-warm-rgb), 0.55);
}

.mobile-br {
  display: none;
}

/* CTA inside Capsule */
.nav-cta {
  background-color: var(--color-accent-warm) !important;
  color: var(--color-white) !important;
}

.nav-cta:hover {
  background-color: var(--color-accent-warm-hover) !important;
  color: var(--color-white) !important;
}

/* Hidden Menu Toggle on Desktop */
.menu-toggle {
  display: none;
}

/* Main Content Area Shifted to Right on PC */
.main-content {
  padding-left: 100px;
  min-height: 100vh;
  background-color: var(--color-bg-page);
  transition: var(--transition-smooth);
}

/* 
  --- Tablet & Mobile Responsive Overrides ---
*/
@media (max-width: 992px) {
  header.site-header {
    left: 10px;
    width: 44px; /* Made tablet left menu narrower */
    padding: 20px 0;
    min-height: 390px;
  }
  .logo a,
  .nav-menu a {
    width: 32px;
    height: 32px;
    font-size: 11px;
  }
  .nav-menu {
    gap: 16px;
  }
  .main-content {
    padding-left: 64px; /* Shifted left to match the narrower menu */
  }
}

@media (max-width: 576px) {
  header.site-header {
    left: 6px;
    width: 36px; /* Made mobile left menu narrower */
    padding: 12px 0;
    min-height: 330px;
  }
  
  .logo a,
  .nav-menu a {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }
  
  .nav-menu {
    gap: 10px;
  }
  
  .main-content {
    padding-left: 48px; /* Shifted left to maximize screen space for text */
  }
}

/* --- Split Gateway Portal --- */
html.portal-html,
html:has(body.portal-page) {
  height: 100%;
  overflow: hidden;
  background-color: var(--color-bg-page);
}

body.portal-page {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100svh;
  height: calc(var(--portal-vh, 1vh) * 100);
  min-height: 0;
}

/* Restore viewport-fill after <main> landmark wrap (height:% needs sized parent) */
body.portal-page > main {
  height: 100%;
  min-height: 0;
}

.portal-container {
  display: flex;
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background-color: var(--color-bg-page);
  position: relative;
}

@media (max-width: 768px) {
  .portal-container {
    flex-direction: column;
  }
}

.portal-header {
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  padding: 0 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  z-index: 10;
  pointer-events: none;
}
.portal-header-left {
  pointer-events: auto;
  display: flex;
  align-items: center;
}

.portal-header-logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: min(42vw, 280px);
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.portal-header-title {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
}

.portal-header-sub {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--color-gray-300);
}

@media (max-width: 768px) {
  .portal-header {
    top: max(10px, env(safe-area-inset-top, 0px));
    padding: 0 16px;
  }
  .portal-header-logo {
    height: 40px;
    max-width: min(52vw, 200px);
  }
  .portal-header-left {
    font-size: 16px;
  }
}

.portal-panel {
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  transition: var(--transition-smooth);
  cursor: pointer;
  text-align: center;
}

@media (max-width: 768px) {
  .portal-panel {
    width: 100%;
    flex: 1 1 50%;
    height: auto;
    min-height: 0;
  }

  #portal-corporate.portal-panel {
    padding-top: calc(52px + env(safe-area-inset-top, 0px));
  }

  #portal-recruit.portal-panel {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }

  /* Alternating spotlight animation on mobile */
  #portal-corporate .portal-bg {
    animation: mobileSpotlightCorpBg 5s infinite ease-in-out;
  }
  #portal-corporate .portal-overlay {
    animation: mobileSpotlightCorpOverlay 5s infinite ease-in-out;
  }
  #portal-corporate .portal-content {
    animation: mobileSpotlightText 5s infinite ease-in-out;
  }

  #portal-recruit .portal-bg {
    animation: mobileSpotlightRecBg 5s infinite ease-in-out;
  }
  #portal-recruit .portal-overlay {
    animation: mobileSpotlightRecOverlay 5s infinite ease-in-out;
  }
  #portal-recruit .portal-content {
    animation: mobileSpotlightRecText 5s infinite ease-in-out;
  }

  @keyframes mobileSpotlightCorpBg {
    0%, 40% {
      filter: grayscale(0%) brightness(0.6) contrast(1.1);
      transform: scale(1.03);
    }
    50%, 90% {
      filter: grayscale(70%) brightness(0.48) contrast(1.05);
      transform: scale(1.0);
    }
    100% {
      filter: grayscale(0%) brightness(0.6) contrast(1.1);
      transform: scale(1.03);
    }
  }

  @keyframes mobileSpotlightCorpOverlay {
    0%, 40% {
      background: rgba(0, 0, 0, 0.25);
    }
    50%, 90% {
      background: rgba(0, 0, 0, 0.45);
    }
    100% {
      background: rgba(0, 0, 0, 0.25);
    }
  }

  @keyframes mobileSpotlightText {
    0%, 40% {
      transform: scale(1.02);
    }
    50%, 90% {
      transform: scale(1.0);
    }
    100% {
      transform: scale(1.02);
    }
  }

  @keyframes mobileSpotlightRecBg {
    0%, 40% {
      filter: grayscale(70%) brightness(0.48) contrast(1.05);
      transform: scale(1.0);
    }
    50%, 90% {
      filter: grayscale(0%) brightness(0.6) contrast(1.1);
      transform: scale(1.03);
    }
    100% {
      filter: grayscale(70%) brightness(0.48) contrast(1.05);
      transform: scale(1.0);
    }
  }

  @keyframes mobileSpotlightRecOverlay {
    0%, 40% {
      background: rgba(0, 0, 0, 0.45);
    }
    50%, 90% {
      background: rgba(0, 0, 0, 0.25);
    }
    100% {
      background: rgba(0, 0, 0, 0.45);
    }
  }

  @keyframes mobileSpotlightRecText {
    0%, 40% {
      transform: scale(1.0);
    }
    50%, 90% {
      transform: scale(1.02);
    }
    100% {
      transform: scale(1.0);
    }
  }
}

.portal-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(100%) brightness(0.4) contrast(1.1);
  transition: var(--transition-smooth);
  z-index: 1;
}

.portal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(42, 42, 42, 0.42);
  transition: var(--transition-smooth);
  z-index: 2;
}

.portal-content {
  position: relative;
  z-index: 3;
  padding: 40px;
  max-width: 480px;
  width: 100%;
}

.portal-sub {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--color-gray-300);
  text-transform: uppercase;
  margin-bottom: 15px;
}

.portal-title {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.35;
  margin-bottom: 20px;
}

.portal-desc {
  font-size: 14px;
  color: var(--color-gray-200);
  margin-bottom: 30px;
  opacity: 0.8;
}

.portal-btn {
  display: inline-flex;
  padding: 12px 28px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border: 1px solid var(--color-white);
  border-radius: var(--border-radius);
  background: transparent;
  color: var(--color-white);
  transition: var(--transition-smooth);
}

.portal-container:hover .portal-panel {
  filter: brightness(0.65);
}

.portal-container .portal-panel:hover {
  flex: 1.35;
  filter: brightness(1);
}

.portal-container .portal-panel:hover .portal-bg {
  transform: scale(1.05);
  filter: grayscale(0%) brightness(0.65) contrast(1.1);
}

.portal-container .portal-panel:hover .portal-overlay {
  background: rgba(42, 42, 42, 0.18);
}

.portal-container .portal-panel:hover .portal-btn {
  background: var(--color-white);
  color: var(--color-black);
}

@media (max-width: 768px) {
  .portal-container:hover .portal-panel {
    filter: none;
  }
  .portal-container .portal-panel:hover {
    flex: 1;
  }
  .portal-container .portal-panel:hover .portal-bg {
    transform: none;
  }
}

/* Short screens / browser chrome: keep titles and buttons fully visible */
@media (max-height: 740px) {
  .portal-title {
    font-size: clamp(20px, 4.6vh, 32px);
    margin-bottom: 10px;
  }
  .portal-desc {
    margin-bottom: 16px;
  }
  .portal-content {
    padding: 16px 20px;
  }
}

@media (max-height: 640px) {
  .portal-header-sub {
    display: none;
  }
  .portal-desc {
    display: none;
  }
  .portal-sub {
    margin-bottom: 6px;
    font-size: 11px;
  }
  .portal-title {
    margin-bottom: 10px;
  }
  .portal-btn {
    padding: 8px 20px;
    font-size: 12px;
  }
}

@media (max-width: 768px) and (max-height: 640px) {
  #portal-corporate.portal-panel {
    padding-top: calc(40px + env(safe-area-inset-top, 0px));
  }
  .portal-header-right img {
    height: 32px;
  }
  .portal-content {
    padding: 4px 12px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #portal-corporate .portal-bg,
  #portal-corporate .portal-overlay,
  #portal-corporate .portal-content,
  #portal-recruit .portal-bg,
  #portal-recruit .portal-overlay,
  #portal-recruit .portal-content {
    animation: none !important;
  }
}

/* --- Quick Navigation Panel --- */
.quick-nav-wrap {
  background-color: var(--color-bg-info);
  border-bottom: 1px solid var(--color-border);
  padding: 24px 0;
}

.quick-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.quick-nav-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--color-text-main);
  background-color: transparent;
  border: none;
  cursor: pointer;
  text-align: center;
  z-index: 1;
  transition: all 0.2s ease;
}

/* Background skew layout with a little roundedness */
.quick-nav-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-bottom: 2px solid var(--color-border-strong);
  border-radius: 4px; /* A little roundedness */
  transform: skewX(-12deg); /* Slanted shape */
  z-index: -1;
  transition: all 0.2s ease;
}

.quick-nav-btn:hover {
  color: var(--color-text-main);
}

.quick-nav-btn:hover::before {
  background-color: var(--color-surface-elevated);
  border-color: var(--color-border-strong);
  border-bottom-color: var(--color-border-strong);
}

/* --- Summary Box --- */
.summary-box {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border-strong);
  border-left: 4px solid var(--color-accent-warm);
  padding: 24px 28px;
  border-radius: var(--border-radius);
  margin-bottom: 40px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
}

.summary-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 14px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-main);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 20px;
}

.summary-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
}

.summary-icon {
  position: relative;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  font-size: 16px;
  font-weight: 700;
  /* Hide unicode glyph — iOS may render ✔ as emoji and ignore CSS color */
  color: transparent;
  opacity: 0.55;
  transform: scale(0.88);
  transition:
    opacity 0.4s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.summary-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 42%;
  width: 0.34em;
  height: 0.62em;
  border-right: 0.14em solid rgba(255, 255, 255, 0.32);
  border-bottom: 0.14em solid rgba(255, 255, 255, 0.32);
  transform: translate(-50%, -58%) rotate(45deg);
  box-sizing: border-box;
  transition: border-color 0.4s ease;
}

.summary-item.is-check-lit .summary-icon {
  opacity: 1;
  transform: scale(1);
  animation: summary-check-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.summary-item.is-check-lit .summary-icon::before {
  border-right-color: var(--color-accent-warm);
  border-bottom-color: var(--color-accent-warm);
}

@keyframes summary-check-pop {
  0% {
    transform: scale(0.75);
    filter: brightness(0.7);
  }
  55% {
    transform: scale(1.22);
    filter: brightness(1.25);
  }
  100% {
    transform: scale(1);
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .summary-icon {
    transition: none;
    transform: none;
    opacity: 1;
  }

  .summary-icon::before {
    transition: none;
  }

  .summary-item.is-check-lit .summary-icon {
    animation: none;
  }
}

.summary-text strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.summary-text span {
  color: var(--color-text-subtle);
  font-size: 13px;
}

/* --- 100 TOBI Project Section --- */
.tobi-project-layout {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 50px;
  align-items: center;
}

.tobi-project-copy {
  display: flex;
  flex-direction: column;
}

.tobi-project-slogan {
  font-family: var(--font-serif);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-text-main);
  margin-bottom: 24px;
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

.tobi-project-intro p {
  font-size: 14px;
  color: var(--color-text-main);
  line-height: 1.8;
  margin-bottom: 12px;
}

.tobi-project-stages {
  list-style: none;
  padding: 0;
  margin: 30px 0;
  border-top: 1px solid var(--color-gray-200);
}

.tobi-project-stages li {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-gray-200);
  align-items: flex-start;
}

.tobi-stage-num {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-accent-warm-soft);
  font-family: var(--font-serif);
}

.tobi-stage-content {
  flex: 1;
}

.tobi-stage-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 4px;
}

.tobi-stage-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.tobi-project-callout {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border-strong);
  border-left: 4px solid var(--color-accent-warm);
  padding: 18px 24px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-main);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.tobi-project-visual {
  position: relative;
}

.tobi-image-container {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.tobi-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

@media (max-width: 992px) {
  .tobi-project-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .tobi-project-visual {
    position: static;
  }
  .tobi-image-container {
    aspect-ratio: 16 / 9;
  }
}

/* --- Hero Section --- */
.hero {
  height: 100vh;
  position: relative;
  overflow: hidden;
  background-color: var(--color-gray-900);
}

.hero-slider {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  background-size: cover;
  background-position: center 25%; /* Shift focus upward to ensure faces are visible on wide PC screens */
  filter: contrast(1.1) brightness(0.85);
}

.hero-slide.active {
  opacity: 1;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(42, 42, 42, 0.68) 0%,
    rgba(42, 42, 42, 0.32) 50%,
    rgba(42, 42, 42, 0.58) 100%
  );
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  padding-top: 40px;
}

.hero-sub {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--color-text-subtle);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s forwards 0.2s;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.3;
  font-weight: 900;
  margin-bottom: 30px;
  letter-spacing: 0.05em;
  color: var(--color-white);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s forwards 0.4s;
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

.hero-desc {
  font-size: clamp(14px, 2.5vw, 18px);
  max-width: 600px;
  color: var(--color-text-body);
  margin-bottom: 40px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s forwards 0.6s;
}

.hero-actions {
  display: flex;
  gap: 20px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s forwards 0.8s;
}

@media (max-width: 576px) {
  .hero-actions {
    flex-direction: column;
    gap: 12px;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: var(--border-radius);
  transition: var(--transition-smooth);
  cursor: pointer;
  border: none;
}

.btn-primary {
  background-color: var(--color-white);
  color: var(--color-black);
}

.btn-primary:hover {
  background-color: var(--color-gray-200);
}

.btn-invert {
  background-color: var(--color-white);
  color: var(--color-black);
}

.btn-invert:hover {
  background-color: var(--color-gray-300);
  color: var(--color-on-light);
}

/* Recruit ENTRY — amber accent (sparse) */
.requirements-entry-btn.btn-invert {
  background-color: var(--color-accent-warm);
  color: var(--color-white);
}

.requirements-entry-btn.btn-invert:hover {
  background-color: var(--color-accent-warm-hover);
  color: var(--color-white);
}

.recruit-cta-band {
  text-align: center;
  margin-top: 24px;
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
}

.btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
  font-size: 11px;
  letter-spacing: 0.15em;
  opacity: 0.7;
}

.scroll-line {
  width: 1px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

.scroll-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  animation: scrollDown 2s infinite ease-in-out;
}

@keyframes scrollDown {
  0% { transform: translateY(-100%); }
  50% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

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

/* --- Section Headers --- */
.section-header {
  margin-bottom: 60px;
}

.section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--color-text-subtle);
  text-transform: uppercase;
  margin-bottom: 16px;
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.3;
  font-weight: 900;
  color: var(--color-text-heading);
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

/* Intended wrap points for Japanese headings on small screens */
.title-br {
  display: none;
}

/* --- Philosophy / Mission Section --- */
.philosophy {
  background-color: var(--color-bg-section-alt);
}

.philosophy-layout,
.tech-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.tech-layout {
  grid-template-columns: 1.2fr 1fr;
}

@media (max-width: 992px) {
  .philosophy-layout,
  .tech-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .philosophy-left-col,
  .tech-right-col {
    display: contents;
  }
  
  .philosophy-header,
  .tech-header {
    order: 1;
  }
  
  .philosophy-layout .philosophy-media,
  .tech-layout .philosophy-media {
    order: 2;
    aspect-ratio: 16 / 9 !important;
  }
  
  .philosophy-content,
  .tech-content {
    order: 3;
  }
}

.philosophy-media {
  background-color: var(--color-gray-200);
  aspect-ratio: 4 / 3;
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
}

.philosophy-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.philosophy-media:hover img {
  transform: scale(1.05);
}

.philosophy-content .lead-text {
  font-size: clamp(20px, 3vw, 28px);
  font-family: var(--font-serif);
  font-weight: 900;
  line-height: 1.5;
  margin-bottom: 24px;
}

.philosophy-content p {
  color: var(--color-text-muted);
  margin-bottom: 20px;
  font-size: 15px;
}

.philosophy-accent-box {
  margin-top: 30px;
  padding: 24px;
  border-left: 4px solid var(--color-accent-warm);
  background-color: var(--color-surface);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text-main);
}

/* --- Features & Stats Section --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 60px;
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.stat-card {
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-gray-100);
  padding: 40px 30px;
  border-radius: var(--border-radius);
  text-align: center;
  transition: var(--transition-smooth);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  border-color: var(--color-gray-200);
}

.stat-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-gray-500);
  margin-bottom: 12px;
}

.stat-num {
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 12px;
  line-height: 1;
}

.stat-desc {
  font-size: 14px;
  color: var(--color-text-muted);
}

/* --- Work Style & Career Section --- */
.work-intro {
  margin-bottom: 60px;
  font-size: 16px;
  color: var(--color-text-muted);
  max-width: 800px;
}

.career-path {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (max-width: 992px) {
  .career-path {
    grid-template-columns: 1fr;
  }
}

.career-step {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 40px;
  border-radius: var(--border-radius);
  position: relative;
  transition: var(--transition-smooth);
}

.career-step:hover {
  background-color: var(--color-surface-2);
  border-color: var(--color-border-strong);
}

/* Company — business section photos (larger, edge-to-edge) */
#business .career-step {
  padding: 0 0 28px;
  overflow: hidden;
}

#business .business-step-media {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 22px;
  overflow: hidden;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-deep);
}

#business .business-step-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#business .career-step .step-num,
#business .career-step .step-title,
#business .career-step .step-desc {
  padding-left: 28px;
  padding-right: 28px;
}

@media (min-width: 993px) {
  #business .business-step-media {
    aspect-ratio: 5 / 4;
  }
}

.step-num {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-gray-500);
  letter-spacing: 0.2em;
  margin-bottom: 20px;
  display: block;
}

.step-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.step-title span {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-gray-500);
}

.step-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}

.step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.step-tag {
  font-size: 11px;
  font-weight: 600;
  background-color: var(--color-surface-2);
  color: var(--color-gray-300);
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--color-border);
}

/* --- Timeline Component --- */
.timeline {
  position: relative;
  max-width: 800px;
  margin: 60px auto 0;
  padding-left: 40px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--color-gray-200);
}

.timeline-item {
  position: relative;
  margin-bottom: 40px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -46px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--color-surface-2);
  border: 3px solid var(--color-border-strong);
  transition: var(--transition-smooth);
}

.timeline-item:hover::before {
  background-color: var(--color-accent-warm);
  border-color: var(--color-accent-warm);
}

.timeline-time {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-gray-500);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.timeline-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 8px;
}

.timeline-content {
  font-size: 14px;
  color: var(--color-text-muted);
}

/* --- Project Showcase Section --- */
.projects {
  background-color: var(--color-bg-section);
  color: var(--color-text-body);
}

.projects .section-title {
  color: var(--color-text-heading);
}

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

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

.project-card {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--border-radius);
  background-color: var(--color-gray-900);
  transition: var(--transition-smooth);
}

.project-card:hover {
  /* Hover zoom/effects stay, grayscale removed */
}

.project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.project-card:hover img {
  transform: scale(1.05);
}

.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}

.project-category {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-gray-300);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.project-title {
  font-size: 18px;
  font-weight: 700;
}

/* --- Compensation & Benefits: Salary Panel --- */
.salary-highlight-banner {
  margin: 0 auto 8px;
  max-width: 960px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.salary-highlight-banner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-accent-warm);
}

.salary-banner-inner {
  display: grid;
  grid-template-columns: minmax(160px, 0.9fr) auto minmax(160px, 1fr);
  align-items: center;
  gap: 12px 28px;
  padding: 22px 32px 22px 36px;
}

.salary-banner-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.salary-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-warm);
  border: 1px solid var(--color-accent-warm);
  padding: 4px 9px;
  line-height: 1;
  background: transparent;
}

.salary-lead {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--color-text-muted);
}

.salary-amount {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
}

.salary-amount-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-gray-500);
  writing-mode: horizontal-tb;
}

.salary-figure {
  display: inline-flex;
  align-items: baseline;
  font-weight: 600;
  color: var(--color-text-main);
  line-height: 0.95;
}

.salary-num {
  font-family: var(--font-sans);
  font-size: clamp(56px, 7vw, 80px);
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-accent-warm);
}

/* Hard lock — short snap (one-shot), not a soft pulse */
#benefits.is-benefits-animate .salary-num {
  display: inline-block;
  transform-origin: 50% 80%;
}

#benefits.is-benefits-animate .salary-num:not(.is-salary-lock) {
  opacity: 0.55;
  transform: scale(1.14) translateY(-8px);
}

#benefits.is-benefits-animate .salary-num.is-salary-lock {
  animation: salaryHardLock 0.38s cubic-bezier(0.15, 0.85, 0.25, 1) both;
}

#benefits.is-benefits-animate .salary-highlight-banner.is-salary-lock::before {
  animation: salaryBarHardLock 0.38s ease both;
}

@keyframes salaryHardLock {
  0% {
    opacity: 0.55;
    transform: scale(1.18) translateY(-10px);
  }
  55% {
    opacity: 1;
    transform: scale(0.9) translateY(2px);
  }
  78% {
    transform: scale(1.05) translateY(0);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes salaryBarHardLock {
  0% {
    width: 4px;
    background: var(--color-gray-300);
  }
  45% {
    width: 10px;
    background: var(--color-accent-warm);
  }
  100% {
    width: 4px;
    background: var(--color-accent-warm);
  }
}

@media (prefers-reduced-motion: reduce) {
  #benefits.is-benefits-animate .salary-num:not(.is-salary-lock),
  #benefits.is-benefits-animate .salary-num.is-salary-lock {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  #benefits.is-benefits-animate .salary-highlight-banner.is-salary-lock::before {
    animation: none !important;
    width: 4px;
    background: var(--color-accent-warm);
  }
}

.salary-unit {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  margin-left: 4px;
  letter-spacing: 0.02em;
}

.salary-from {
  font-family: var(--font-sans);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  margin-left: 2px;
  color: var(--color-text-main);
}

.salary-note {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.45;
  color: var(--color-text-muted);
  text-align: right;
  border-left: 1px solid var(--color-gray-200);
  padding-left: 24px;
}

/* --- Benefits hierarchy (recruit #benefits) --- */
#benefits .section-header {
  text-align: center;
}

.benefits-lead {
  margin: 12px auto 0;
  max-width: 32em;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-muted);
  text-align: center;
}

.benefits-tier {
  max-width: 960px;
  margin: 36px auto 0;
}

.benefits-tier-label {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--color-gray-500);
}


.benefits-tier--support .benefits-points-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 0;
}

.benefits-tier--support .benefit-point-row {
  grid-template-columns: 88px 1fr;
}

.benefits-tier--support .point-badge {
  min-height: 0;
  padding: 14px 10px;
}

.benefits-tier--support .point-body {
  padding: 16px 18px;
}

.benefits-tier--support .point-media {
  display: none;
}

.benefits-tier--grow .benefits-points-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 0;
}

.benefits-tier--grow .benefit-point-row {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.benefits-tier--grow .point-badge {
  min-height: 0;
  flex-direction: row;
  justify-content: space-between;
  padding: 12px 16px;
}

.benefits-tier--grow .point-num {
  margin-bottom: 0;
}

.benefits-tier--grow .point-body {
  padding: 16px 18px 18px;
}

.benefits-tier--grow .point-media {
  display: none;
}

/* --- Horizontal Points List (Welfare Section) --- */
.benefits-points-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 960px;
  margin: 40px auto 0 auto;
}

.benefit-point-row {
  display: grid;
  grid-template-columns: 140px 1fr 120px;
  background-color: var(--color-surface);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  align-items: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.benefit-point-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  border-color: var(--color-border-strong);
}

.point-badge {
  height: 100%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  padding: 16px;
  text-align: center;
  font-family: var(--font-serif);
}

/* Muted, sophisticated low-saturation badge colors matching the Gray & White theme */
.badge-red { background-color: #b87373; }
.badge-orange { background-color: #c4a060; }
.badge-yellow { background-color: #b59b5c; }
.badge-green { background-color: #799479; }
.badge-blue { background-color: #6a859c; }
.badge-purple { background-color: #8c7e91; }
.badge-pink { background-color: #b07c91; }

.point-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.point-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-yellow .point-icon-wrap {
  background-color: rgba(255, 255, 255, 0.08);
}

.point-svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.point-body {
  padding: 24px 30px;
}

.point-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 8px;
  display: inline-block;
  position: relative;
  /* Yellow highlight line under title exactly like reference image */
  background: linear-gradient(transparent 55%, rgba(255, 215, 0, 0.35) 55%);
}

.point-desc {
  font-size: 13px;
  color: var(--color-text-main);
  line-height: 1.6;
  margin: 0;
}

.point-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  height: 100%;
}

.media-svg {
  width: 52px;
  height: 52px;
  color: var(--color-white);
  opacity: 0.18;
}

@media (max-width: 900px) {
  .benefits-tier--support .benefits-points-list,
  .benefits-tier--grow .benefits-points-list {
    grid-template-columns: 1fr 1fr;
  }

  .benefits-tier--support .benefit-point-row,
  .benefits-tier--grow .benefit-point-row {
    grid-template-columns: 1fr;
  }

  .benefits-tier--support .point-badge,
  .benefits-tier--grow .point-badge {
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 14px;
  }

  .benefits-tier--support .point-num,
  .benefits-tier--grow .point-num {
    margin-bottom: 0;
  }
}

@media (max-width: 768px) {
  .benefit-point-row {
    grid-template-columns: 1fr;
    border-radius: var(--border-radius);
  }
  .point-badge {
    height: auto;
    min-height: auto;
    flex-direction: row;
    justify-content: space-between;
    padding: 14px 20px;
  }
  .point-num {
    margin-bottom: 0;
    font-size: 12px;
  }
  .point-icon-wrap {
    width: 28px;
    height: 28px;
  }
  .point-svg {
    width: 14px;
    height: 14px;
  }
  .point-body {
    padding: 20px;
  }
  .point-title {
    font-size: 16px;
  }
  .point-desc {
    font-size: 12px;
  }
  .point-media {
    display: none; /* Hide illustrations on mobile view to keep it compact */
  }

  .benefits-tier {
    margin-top: 28px;
  }

  .benefits-tier--support .point-body,
  .benefits-tier--grow .point-body {
    padding: 12px 14px 14px;
  }

  .benefits-tier--support .point-title,
  .benefits-tier--grow .point-title {
    font-size: 14px;
    margin-bottom: 4px;
  }

  .benefits-tier--support .point-desc,
  .benefits-tier--grow .point-desc {
    font-size: 11px;
    line-height: 1.55;
  }

  /* STEP 9: benefits mobile density */
  #benefits.recruit-tight .section-header {
    margin-bottom: 28px !important;
  }

  #benefits.recruit-tight .benefits-lead {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.85;
  }

  #benefits.recruit-tight .benefits-tier {
    margin-top: 18px;
  }

  #benefits.recruit-tight .benefits-tier-label {
    margin-bottom: 8px;
  }

  #benefits.recruit-tight .benefits-points-list {
    gap: 8px;
  }

  #benefits.recruit-tight .point-badge,
  #benefits.recruit-tight .benefits-tier--support .point-badge,
  #benefits.recruit-tight .benefits-tier--grow .point-badge {
    padding: 8px 12px;
  }

  #benefits.recruit-tight .point-icon-wrap {
    width: 22px;
    height: 22px;
  }

  #benefits.recruit-tight .point-svg {
    width: 12px;
    height: 12px;
  }

  #benefits.recruit-tight .point-body,
  #benefits.recruit-tight .benefits-tier--support .point-body,
  #benefits.recruit-tight .benefits-tier--grow .point-body {
    padding: 10px 12px 11px;
  }

  #benefits.recruit-tight .point-title,
  #benefits.recruit-tight .benefits-tier--support .point-title,
  #benefits.recruit-tight .benefits-tier--grow .point-title {
    margin-bottom: 2px;
    font-size: 13px;
  }

  #benefits.recruit-tight .point-desc,
  #benefits.recruit-tight .benefits-tier--support .point-desc,
  #benefits.recruit-tight .benefits-tier--grow .point-desc {
    font-size: 11px;
    line-height: 1.4;
  }

  #benefits.recruit-tight .salary-highlight-banner {
    margin-bottom: 0;
  }

  #benefits.recruit-tight .salary-banner-inner {
    gap: 6px;
    padding: 12px 14px 12px 18px;
  }

  #benefits.recruit-tight .recruit-cta-band {
    margin-top: 18px;
  }

}

@media (max-width: 480px) {
  .benefits-tier--support .benefits-points-list,
  .benefits-tier--grow .benefits-points-list {
    grid-template-columns: 1fr;
  }
}

/* --- Requirements / Table Styling --- */
.req-table-wrap {
  max-width: 900px;
  margin: 0 auto;
  background-color: var(--color-surface);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.req-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
}

.req-table tr {
  border-bottom: 1px solid var(--color-border);
}

.req-table tr:last-child {
  border-bottom: none;
}

.req-table th {
  width: 250px;
  padding: 24px 16px 24px 24px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-main);
  vertical-align: top;
}

.req-table td {
  padding: 24px 24px 24px 16px;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.7;
  word-break: break-word;
}

@media (max-width: 768px) {
  .req-table th {
    width: 100%;
    display: block;
    padding: 18px 16px 4px;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--color-gray-700);
  }
  .req-table td {
    display: block;
    padding: 0 16px 18px;
    font-size: 13px;
  }
}

/* --- Crew Member Directory Styling --- */
.crew-featured {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 48px;
  align-items: flex-start;
  margin-bottom: 80px;
}

@media (max-width: 992px) {
  .crew-featured {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0;
  }
}

.crew-featured-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-gray-200);
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  transition: var(--transition-smooth);
}

.crew-featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: var(--transition-smooth);
}

.crew-featured:hover .crew-featured-img-wrap {
  border-color: var(--color-gray-300);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.crew-featured:hover .crew-featured-img {
  transform: scale(1.03);
}

.crew-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 48px;
}

.crew-card {
  background-color: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
  gap: 16px;
}

.crew-card:hover {
  transform: translateY(-4px);
  box-shadow: none;
}

.crew-card-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  border-radius: var(--border-radius);
  border: 1px solid var(--color-gray-200);
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  transition: var(--transition-smooth);
}

.crew-card:hover .crew-card-img-wrap {
  border-color: var(--color-gray-300);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.crew-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: var(--transition-smooth);
}

.crew-card:hover .crew-card-img {
  transform: scale(1.05);
}

.crew-card-info {
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.crew-card-name-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.crew-card-name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text-main);
}

.crew-card-en {
  font-size: 12px;
  color: var(--color-gray-500);
}

.crew-card-role {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-main);
  background-color: var(--color-surface-2);
  padding: 4px 8px;
  border-radius: 4px;
  align-self: flex-start;
  margin-bottom: 4px;
}

.crew-card-desc {
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text-muted);
  padding: 0 2px;
}

/* --- Contact & Entry Form --- */
.contact-section {
  background-color: var(--color-bg-page);
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 60px;
}

@media (max-width: 992px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

.contact-info-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--color-text-main);
}

.contact-info-text {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-text-main);
}

.form-label span {
  color: var(--color-text-caption);
  font-size: 10px;
  margin-left: 8px;
  border: 1px solid var(--color-border-strong);
  padding: 1px 4px;
  border-radius: 2px;
}

.form-control {
  width: 100%;
  padding: 14px 16px;
  font-size: 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--border-radius);
  font-family: inherit;
  transition: var(--transition-smooth);
  background-color: var(--color-surface-2);
  color: var(--color-text-body);
}

.form-control:focus {
  outline: none;
  border-color: var(--color-accent-warm);
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 40px;
}

.form-control::placeholder,
textarea.form-control::placeholder {
  color: var(--color-text-caption);
  opacity: 1;
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

.form-submit-wrap {
  margin-top: 40px;
}

/* --- Footer --- */
.site-footer {
  background-color: var(--color-bg-deep);
  color: var(--color-text-body);
  padding: 80px 0 40px;
  border-top: 1px solid var(--color-border);
}

.footer-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 60px;
  width: 100%;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
  max-width: 640px;
}

.footer-logo-img {
  height: 200px;
  width: auto;
  margin-bottom: 24px;
  filter: drop-shadow(0 4px 15px rgba(0,0,0,0.3));
  transition: var(--transition-smooth);
}

@media (max-width: 768px) {
  .footer-logo-img {
    height: 120px;
  }
}

.footer-brand p {
  font-size: 14px;
  color: var(--color-gray-300);
  line-height: 1.8;
  margin: 0;
}

.footer-instagram {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 99px;
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.footer-instagram svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.footer-instagram:hover {
  background: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}

.req-table a {
  color: var(--color-text-main);
  font-weight: 700;
  border-bottom: 1px solid var(--color-border-strong);
}

.req-table a:hover {
  border-bottom-color: var(--color-accent-warm);
  color: var(--color-accent-warm-soft);
}

.footer-links-title {
  display: none;
}

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.footer-links li {
  margin: 0;
}

.footer-links a {
  font-size: 13px;
  color: var(--color-gray-300);
  transition: var(--transition-smooth);
}

.footer-links a:hover {
  color: var(--color-white);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 576px) {
  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
}

.copyright {
  font-size: 11px;
  color: var(--color-gray-500);
}

.footer-meta {
  font-size: 11px;
  color: var(--color-gray-500);
}

@media (max-width: 576px) {
  .mobile-br {
    display: block !important;
  }

  .container {
    padding: 0 16px;
  }
  
  /* Set mobile hero banner to exactly 16:9 */
  .hero {
    height: auto !important;
    min-height: auto !important;
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
  }
  
  /* Shift hero title text to bottom-left to prevent covering faces */
  .hero-content {
    justify-content: flex-end !important;
    align-items: flex-start !important;
    text-align: left !important;
    padding-bottom: 16px !important;
  }

  .hero-title {
    font-size: 24px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8) !important;
  }

  .hero-desc {
    display: none !important;
  }

  .hero-sub {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }
  
  .section-padding {
    padding: 60px 0;
  }

  .section-header {
    margin-bottom: 36px;
  }
  
  .section-title {
    font-size: clamp(20px, 5.6vw, 26px);
  }

  .section-label {
    letter-spacing: 0.12em;
    font-size: 11px;
  }

  .title-br {
    display: block;
  }

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

  /* Crew Profile Grid: 2 columns for everyone except CEO */
  .crew-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 14px;
  }
  
  .crew-card {
    gap: 8px;
  }

  .crew-card-info {
    padding: 0 10px;
  }
  
  .crew-card-name {
    font-size: 15px;
  }

  .crew-card-en {
    font-size: 10px;
  }

  .crew-card-role {
    font-size: 9px;
    padding: 2px 6px;
    margin-bottom: 2px;
  }

  .crew-card-desc {
    font-size: 11px;
    line-height: 1.65;
    padding: 0 2px;
  }

  .crew-featured {
    margin-bottom: 48px;
    gap: 20px;
    text-align: center;
  }
  
  .crew-featured .crew-featured-img-wrap {
    max-width: 270px;
    margin: 0 auto;
  }

  .crew-featured .crew-card-name-row {
    justify-content: center;
  }

  .crew-featured .crew-card-role {
    align-self: center;
  }
  
  /* Business Service Cards */
  .career-path {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .career-step {
    padding: 24px;
  }

  /* Split Gateway Portal Layout */
  .portal-panel {
    padding-left: 16px;
    padding-right: 16px;
  }

  .portal-content {
    padding: 8px 12px 12px;
  }

  .portal-sub {
    margin-bottom: 8px;
  }

  .portal-title {
    font-size: 22px;
    margin-bottom: 8px;
  }

  .portal-desc {
    font-size: 12px;
    margin-bottom: 14px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .portal-btn {
    padding: 10px 22px;
    font-size: 12px;
  }

  .portal-header {
    padding: 0 16px;
    top: max(10px, env(safe-area-inset-top, 0px));
  }

  .portal-header-logo {
    height: 36px;
    max-width: min(48vw, 180px);
  }

  .portal-header-right img {
    height: 36px;
  }

  /* Timeline */
  .timeline {
    padding-left: 24px;
    margin: 40px auto 0;
  }

  .timeline-item::before {
    left: -30px;
    top: 6px;
  }
  
  /* Form & Access Table */
  .req-table th {
    padding-top: 16px;
  }
  
  .contact-layout {
    gap: 30px;
  }
  
  .contact-info-title {
    font-size: 20px;
  }

  /* General career-step overrides for mobile (applies to recruit.html as well) */
  .career-path {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  .career-step {
    padding: 16px !important;
  }
  .career-step .step-title {
    font-size: 15px !important;
    margin-bottom: 6px !important;
  }
  .career-step .step-desc {
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  /* Clean flex card list layout for Business (with images) on mobile */
  #business .career-path {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  #business .career-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 0 18px !important;
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
    overflow: hidden !important;
  }

  #business .business-step-media,
  #business .career-step > .business-step-media {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    margin: 0 0 14px !important;
    border: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
    overflow: hidden !important;
  }

  #business .career-step .step-num,
  #business .career-step .step-title,
  #business .career-step .step-desc {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  #business .career-step .step-num {
    display: block !important;
    margin-bottom: 4px !important;
    font-size: 10px !important;
    color: var(--color-gray-500) !important;
    font-weight: 700 !important;
  }

  #business .career-step .step-title {
    display: block !important;
    font-size: 15px !important;
    margin-bottom: 8px !important;
    color: var(--color-text-main) !important;
  }

  #business .career-step .step-desc {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--color-text-muted) !important;
  }

  /* Clean flex card list layout for Technology (no images) on mobile */
  #tech .career-path {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  #tech .career-step {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 16px !important;
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
  }

  #tech .career-step .step-num {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    border: 1px solid var(--color-border-strong) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    background-color: var(--color-surface-2) !important;
    color: var(--color-text-main) !important;
    margin-bottom: 8px !important;
  }

  #tech .career-step .step-title {
    display: block !important;
    font-size: 15px !important;
    margin-bottom: 6px !important;
    color: var(--color-text-main) !important;
  }

  #tech .career-step .step-desc {
    display: block !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--color-text-muted) !important;
  }

  /* Slender, narrow container box for 3-seconds summary on mobile */
  .summary-box {
    max-width: 420px !important;
    margin: 0 auto 20px auto !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
    border-left-width: 3px !important;
  }

  .summary-title {
    font-size: 12px !important;
    margin-bottom: 4px !important;
    text-align: center !important;
  }

  /* Compact structured checklist layout for Summary (3秒でわかる) on mobile */
  .summary-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 4px !important;
  }

  .summary-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--color-gray-200) !important;
    padding: 6px 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .summary-item:last-child {
    border-bottom: none !important;
  }

  .summary-icon {
    position: relative !important;
    font-size: 14px !important;
    color: transparent !important;
    opacity: 0.5 !important;
    font-weight: 900 !important;
    flex-shrink: 0 !important;
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    margin-top: 0 !important;
    transform: scale(0.88);
  }

  .summary-icon::before {
    width: 5px !important;
    height: 9px !important;
    border-right-width: 2px !important;
    border-bottom-width: 2px !important;
    border-right-color: rgba(255, 255, 255, 0.35) !important;
    border-bottom-color: rgba(255, 255, 255, 0.35) !important;
  }

  .summary-item.is-check-lit .summary-icon {
    color: transparent !important;
    opacity: 1 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transform: scale(1);
  }

  .summary-item.is-check-lit .summary-icon::before {
    border-right-color: var(--color-accent-warm) !important;
    border-bottom-color: var(--color-accent-warm) !important;
  }

  .summary-text {
    line-height: 1.3 !important;
    text-align: left !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 0 8px !important;
  }

  .summary-text strong {
    display: inline !important;
    font-size: 12px !important;
    color: var(--color-text-main) !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
  }

  .summary-text span {
    display: inline !important;
    font-size: 11px !important;
    color: var(--color-text-muted) !important;
    line-height: 1.3 !important;
  }

  /* Ultra-compact quick nav on mobile to prevent blocking the view */
  .quick-nav-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }

  /* Only when there are exactly 5 tabs: stretch the last one to fill the row.
     With 6 tabs (company), keep 自社アプリ + 会社概要 side-by-side. */
  .quick-nav-grid:has(> a:nth-child(5):last-child) > a:last-child {
    grid-column: span 2 !important;
  }

  .quick-nav-btn {
    padding: 8px 4px !important;
    font-size: 11px !important;
    border: none !important;
    background-color: transparent !important;
    /* Staggered entry animation on load */
    animation: quickNavSlideIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.1) both !important;
  }

  .quick-nav-btn:nth-child(1) { animation-delay: 0.05s !important; }
  .quick-nav-btn:nth-child(2) { animation-delay: 0.12s !important; }
  .quick-nav-btn:nth-child(3) { animation-delay: 0.19s !important; }
  .quick-nav-btn:nth-child(4) { animation-delay: 0.26s !important; }
  .quick-nav-btn:nth-child(5) { animation-delay: 0.33s !important; }
  .quick-nav-btn:nth-child(6) { animation-delay: 0.40s !important; }

  @keyframes quickNavSlideIn {
    0% {
      opacity: 0;
      transform: translateX(20px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .quick-nav-btn::before {
    transform: skewX(-10deg) !important;
    border-radius: 3px !important;
  }

  /* Tactile native-app touch squish feedback for all tap targets */
  .quick-nav-btn:active,
  .btn:active,
  .career-step:active,
  .crew-card:active,
  .nav-menu a:active,
  .portal-btn:active {
    transform: scale(0.95) !important;
    transition: transform 0.08s cubic-bezier(0.25, 1, 0.5, 1) !important;
  }

  /* Gentle floating/breathing animation for left capsule menu on mobile */
  header.site-header {
    animation: capsuleFloat 5s infinite ease-in-out !important;
  }

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

/* --- New Recruitment Sections Styling (recruit.html) --- */

/* ① Welcome Clipboard Checklist Section */
.clipboard-container {
  position: relative;
  max-width: 720px;
  margin: 50px auto 0 auto;
  background-color: #4a4a4a;
  border-radius: 16px;
  padding: 60px 30px 40px 30px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.28);
  border: 3px solid #3a3a3a;
}

/* Metal Clip at the top of the clipboard */
.clipboard-clip {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 44px;
  background-color: #222222;
  border-radius: 6px 6px 4px 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.clipboard-clip::after {
  content: "";
  width: 90px;
  height: 12px;
  background-color: #2a2a2a;
  border-radius: 6px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

/* White Paper Sheet */
.clipboard-paper {
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding: 45px 40px;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.04), 0 5px 15px rgba(0, 0, 0, 0.12);
  color: #5a5a5a;
}

.clipboard-paper-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 800;
  color: #3a3a3a;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: 0.05em;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 15px;
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

.clipboard-title-br {
  display: none;
}

.clipboard-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.clipboard-list li {
  padding: 24px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.clipboard-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.clipboard-list li:first-child {
  padding-top: 0;
}

/* Interactive Checkbox Row Label */
.clipboard-item-label {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  cursor: pointer;
  width: 100%;
  user-select: none;
}

/* Hide native checkbox input visually */
.clipboard-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom checkbox box container matching the reference image style */
.clipboard-custom-checkbox {
  width: 24px;
  height: 24px;
  border: 2px solid #9a9a9a;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: transparent;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Checked state — scaffold amber */
.clipboard-checkbox-input:checked + .clipboard-custom-checkbox {
  border-color: var(--color-accent-warm);
  color: var(--color-accent-warm);
  background-color: color-mix(in srgb, var(--color-accent-warm) 12%, white);
}



.check-svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.clipboard-item-text {
  flex: 1;
}

.clipboard-item-text strong {
  font-size: 16px;
  font-weight: 800;
  color: #3a3a3a;
  display: block;
  margin-bottom: 6px;
  transition: color 0.2s, text-decoration 0.2s;
}

.clipboard-item-text p {
  font-size: 13px;
  color: #5a5a5a;
  line-height: 1.65;
  margin: 0;
  transition: opacity 0.2s;
}

/* ② Timeline Section (Yamasita Fruits Farm Style Reconstructed) */
.custom-timeline-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr; /* Shifted dividing line slightly to the left */
  gap: 50px;
  align-items: flex-start;
  position: relative;
  max-width: 900px;
  margin: 50px auto 0 auto;
}

/* Left Column: Beautiful Organic Photo Cluster */
.timeline-photo-cluster {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 40px;
  padding-right: 20px;
  z-index: 10;
}

.cluster-item {
  position: relative;
  display: inline-block;
  transition: transform 0.4s ease;
}

.cluster-item:hover {
  transform: scale(1.03) !important;
}

.circle-image-wrap {
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.26);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  background-color: var(--color-gray-100);
}

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

/* Size variations for the organic layout */
.circle-image-wrap.size-lg {
  width: 200px;
  height: 200px;
}

.circle-image-wrap.size-md {
  width: 155px;
  height: 155px;
}

.circle-image-wrap.size-sm {
  width: 115px;
  height: 115px;
}

/* Position offsets (staggered overlap) */
.cluster-item.item-1 {
  transform: translateX(-30px);
}

.cluster-item.item-2 {
  transform: translate(15px, -20px);
  z-index: 2;
}

.cluster-item.item-3 {
  transform: translate(-20px, -45px);
}

.cluster-item.item-4 {
  transform: translate(25px, -70px);
  z-index: 2;
}

/* Sticker label style next to the photos */
.circle-label {
  position: absolute;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  padding: 8px 14px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 800;
  color: var(--color-text-main);
  text-align: center;
  line-height: 1.3;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  white-space: nowrap;
  z-index: 3;
}

.cluster-item.item-1 .circle-label {
  bottom: 10px;
  left: -20px;
}

.cluster-item.item-2 .circle-label {
  top: 15px;
  left: -25px; /* Shifted from right to left to avoid overlapping the timeline line */
}

.cluster-item.item-3 .circle-label {
  bottom: 20px;
  right: -30px;
}

.cluster-item.item-4 .circle-label {
  bottom: -5px;
  left: -15px;
}

/* Right Column: Timeline Steps (Pills + Texts) */
.timeline-steps-flow {
  position: relative;
  padding-left: 0;
}

/* Dotted vertical line separating left/right columns - sits exactly at left boundary (50% mark) */
.timeline-vertical-line {
  position: absolute;
  left: 0;
  top: 15px;
  bottom: 15px;
  width: 2px;
  border-left: 2px dashed rgba(255, 255, 255, 0.2);
  overflow: hidden;
  pointer-events: none;
}

/* Progress fill: day advances as the section is scrolled (scaleY, origin top) */
.timeline-progress-line {
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 100%;
  background-color: var(--color-accent-warm);
  transform: scaleY(0);
  transform-origin: top center;
  will-change: transform;
}

#timeline.is-timeline-reduced .timeline-progress-line {
  transform: scaleY(1);
  will-change: auto;
}

/* Progressive enhancement: photos from left, steps alternate L/R */
#timeline.is-timeline-animate .timeline-step-row {
  opacity: 0;
}

/* vertical-line is 1st child → step1=even(from right), step2=odd(from left), … */
#timeline.is-timeline-animate .timeline-step-row:nth-child(even):not(.is-timeline-in) {
  transform: translateX(40px);
}

#timeline.is-timeline-animate .timeline-step-row:nth-child(odd):not(.is-timeline-in) {
  transform: translateX(-40px);
}

#timeline.is-timeline-animate .timeline-step-row.is-timeline-in {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Keep cluster layout offsets; start further left, then settle */
#timeline.is-timeline-animate .cluster-item {
  opacity: 0;
}

#timeline.is-timeline-animate .cluster-item.item-1:not(.is-timeline-in) {
  transform: translateX(-72px);
}

#timeline.is-timeline-animate .cluster-item.item-2:not(.is-timeline-in) {
  transform: translate(-28px, -20px);
}

#timeline.is-timeline-animate .cluster-item.item-3:not(.is-timeline-in) {
  transform: translate(-64px, -45px);
}

#timeline.is-timeline-animate .cluster-item.item-4:not(.is-timeline-in) {
  transform: translate(-20px, -70px);
}

#timeline.is-timeline-animate .cluster-item.is-timeline-in {
  opacity: 1;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

#timeline.is-timeline-animate .cluster-item.item-1.is-timeline-in {
  transform: translateX(-30px);
}

#timeline.is-timeline-animate .cluster-item.item-2.is-timeline-in {
  transform: translate(15px, -20px);
}

#timeline.is-timeline-animate .cluster-item.item-3.is-timeline-in {
  transform: translate(-20px, -45px);
}

#timeline.is-timeline-animate .cluster-item.item-4.is-timeline-in {
  transform: translate(25px, -70px);
}

@media (prefers-reduced-motion: reduce) {
  .timeline-progress-line {
    transform: scaleY(1) !important;
    will-change: auto;
  }

  #timeline.is-timeline-animate .timeline-step-row,
  #timeline.is-timeline-animate .cluster-item {
    opacity: 1 !important;
    transition: none !important;
  }

  #timeline.is-timeline-animate .timeline-step-row {
    transform: none !important;
  }
}

.timeline-step-row {
  position: relative;
  margin-bottom: 45px;
  padding-left: 70px; /* Increased to 70px to create a beautiful 25px gap between the time pill and the title text */
}

.timeline-step-row:last-child {
  margin-bottom: 0;
}

/* Time pill shapes centered on the line */
.step-time-pill {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%); /* Centered exactly on the dashed line */
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-text-main);
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  z-index: 2;
  text-align: center;
  min-width: 90px;
}

.step-text-content {
  padding-top: 4px;
}

.timeline-step-row .step-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text-main);
  margin-bottom: 6px;
}

.timeline-step-row .step-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.timeline-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-text-main);
}

.timeline-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ③ Staircase 3D Isometric Step Flow Section */
.staircase-3d-wrapper {
  display: flex;
  align-items: flex-end; /* Bottom align steps */
  justify-content: center;
  gap: 0; /* Contiguous steps */
  margin-top: 60px;
  height: 520px;
  position: relative;
  padding-right: 15px; /* Leave space for the last step's 3D side face */
}

.staircase-3d-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  position: relative;
}

/* Bullet points and arrows above the 3D block */
.stair-meta {
  margin-bottom: 24px;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 5;
}

/* The 3D Block Container */
.stair-block-container {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
}

/* Hide until section open only when JS opts in */
#step-flow.is-section-reveal:not(.is-section-open) .stair-meta,
#step-flow.is-section-reveal:not(.is-section-open) .stair-block-container {
  opacity: 0;
}

#step-flow.is-section-open .stair-meta {
  animation: fadeInMeta 0.6s ease both;
}

#step-flow.is-section-open .stair-block-container {
  animation: stairClimb 0.8s cubic-bezier(0.25, 1, 0.5, 1) both;
}

#step-flow.is-section-open .staircase-3d-step.step-1 .stair-block-container { animation-delay: 0.1s; }
#step-flow.is-section-open .staircase-3d-step.step-1 .stair-meta { animation-delay: 0.5s; }

#step-flow.is-section-open .staircase-3d-step.step-2 .stair-block-container { animation-delay: 0.25s; }
#step-flow.is-section-open .staircase-3d-step.step-2 .stair-meta { animation-delay: 0.65s; }

#step-flow.is-section-open .staircase-3d-step.step-3 .stair-block-container { animation-delay: 0.4s; }
#step-flow.is-section-open .staircase-3d-step.step-3 .stair-meta { animation-delay: 0.8s; }

#step-flow.is-section-open .staircase-3d-step.step-4 .stair-block-container { animation-delay: 0.55s; }
#step-flow.is-section-open .staircase-3d-step.step-4 .stair-meta { animation-delay: 0.95s; }

#step-flow.is-section-open .staircase-3d-step.step-5 .stair-block-container { animation-delay: 0.7s; }
#step-flow.is-section-open .staircase-3d-step.step-5 .stair-meta { animation-delay: 1.1s; }

#step-flow.is-section-open .staircase-3d-step.step-6 .stair-block-container { animation-delay: 0.85s; }
#step-flow.is-section-open .staircase-3d-step.step-6 .stair-meta { animation-delay: 1.25s; }

@media (prefers-reduced-motion: reduce) {
  #step-flow .stair-meta,
  #step-flow .stair-block-container {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}

.stair-arrow-header {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-white);
  background-color: var(--phase-color);
  padding: 4px 14px 4px 10px;
  border-radius: 3px 0 0 3px;
  display: inline-block;
  position: relative;
  margin-bottom: 10px;
  clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
  min-width: 76px;
  text-align: left;
}

.stair-points {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.stair-points li {
  position: relative;
  padding-left: 12px;
  margin-bottom: 4px;
  text-align: left;
}

.stair-points li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--phase-color);
  font-weight: bold;
}

/* 3D block top face (tread) */
.stair-block-top {
  width: 100%;
  height: 20px;
  background-color: var(--tread-color);
  transform: skewX(-35deg);
  transform-origin: bottom left; /* Anchor bottom edge to align perfectly with the riser */
  margin-left: 0; /* Remove margin shift to prevent right-edge gap */
  transition: background-color 0.2s ease;
}

/* 3D block front face (riser) */
.stair-block-front {
  background-color: var(--riser-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 8px;
  color: var(--text-color);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.stair-block-text {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

/* 3D block side face (depth) - only visible on the last step (Step 6) to form the outer boundary of the solid block */
.stair-block-side {
  display: none; /* Hidden on intermediate steps so they connect seamlessly */
}

.staircase-3d-step.step-6 .stair-block-side {
  display: block; /* Show side face on the rightmost edge of the entire staircase */
  position: absolute;
  right: -14px;
  top: 7px;
  width: 14px;
  height: calc(100% - 7px);
  background-color: var(--side-color);
  transform: skewY(-35deg);
  transform-origin: top left;
  z-index: 2;
  transition: background-color 0.2s ease;
}

/* Height mapping for risers (front faces) to form the climb on a flat horizontal baseline */
.staircase-3d-step.step-1 .stair-block-front { height: 60px; }
.staircase-3d-step.step-2 .stair-block-front { height: 100px; }
.staircase-3d-step.step-3 .stair-block-front { height: 140px; }
.staircase-3d-step.step-4 .stair-block-front { height: 180px; }
.staircase-3d-step.step-5 .stair-block-front { height: 220px; }
.staircase-3d-step.step-6 .stair-block-front { height: 260px; }

/* Entrance Animations Keyframes */
@keyframes stairClimb {
  0% {
    transform: translateY(60px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeInMeta {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Step 1: Lightest Gray */
.staircase-3d-step.step-1 {
  --phase-color: #94a3b8;
  --tread-color: #ffffff;
  --riser-color: #f1f5f9;
  --side-color: #e2e8f0;
  --text-color: #0f172a;
  z-index: 1; /* Lowest z-index so Step 2 renders on top */
}
/* Step 2: Silver Gray */
.staircase-3d-step.step-2 {
  --phase-color: #64748b;
  --tread-color: #e2e8f0;
  --riser-color: #cbd5e1;
  --side-color: #94a3b8;
  --text-color: #0f172a;
  z-index: 2;
}
/* Step 3: Slate Gray */
.staircase-3d-step.step-3 {
  --phase-color: #475569;
  --tread-color: #cbd5e1;
  --riser-color: #94a3b8;
  --side-color: #64748b;
  --text-color: #ffffff;
  z-index: 3;
}
/* Step 4: Medium Slate */
.staircase-3d-step.step-4 {
  --phase-color: #334155;
  --tread-color: #94a3b8;
  --riser-color: #64748b;
  --side-color: #475569;
  --text-color: #ffffff;
  z-index: 4;
}
/* Step 5: Charcoal */
.staircase-3d-step.step-5 {
  --phase-color: #1e293b;
  --tread-color: #475569;
  --riser-color: #334155;
  --side-color: #1e293b;
  --text-color: #ffffff;
  z-index: 5;
}
/* Step 6: Deep Dark Gray */
.staircase-3d-step.step-6 {
  --phase-color: #0f172a;
  --tread-color: #334155;
  --riser-color: #1e293b;
  --side-color: #0f172a;
  --text-color: #ffffff;
  z-index: 6; /* Highest z-index to sit on top */
}

/* Swipe hint indicator for mobile touch screen users */
.swipe-hint {
  display: none; /* Hidden on desktop */
}

@media (max-width: 992px) {
  .swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-muted);
    margin: -10px auto 25px auto;
    background-color: rgba(0, 0, 0, 0.04);
    padding: 6px 16px;
    border-radius: 20px;
    width: fit-content;
  }

  .swipe-icon {
    font-size: 14px;
    font-weight: 800;
    color: var(--color-gray-300);
    animation: swipeArrow 1.5s ease-in-out infinite;
    display: inline-block;
  }

  @keyframes swipeArrow {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
  }
}

/* ④ FAQ Section — classic speech bubbles (not chat UI) */
.faq-container {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.faq-lead {
  margin: 12px auto 0;
  max-width: 520px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.7;
}

.faq-item {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  overflow: visible;
  box-shadow: none !important;
  padding: 6px 0 14px;
  border-bottom: 1px solid var(--color-gray-200);
}

.faq-item:last-child {
  border-bottom: 0;
}

.faq-item[open],
.faq-item:hover {
  border-color: var(--color-gray-200);
}

.faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px;
  padding: 6px 0 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
  list-style: none;
}

.faq-q::-webkit-details-marker {
  display: none;
}

.faq-bubble {
  display: inline-block;
  margin: 0;
  max-width: min(100%, 460px);
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  position: relative;
}

/* Question: soft speech balloon */
.faq-bubble--ask {
  background: #3e3e3e;
  color: var(--color-text-main);
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  margin-bottom: 8px;
}

.faq-bubble--ask::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -9px;
  width: 16px;
  height: 16px;
  background: #3e3e3e;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transform: rotate(45deg);
}

/* Answer: speech balloon from the person */
.faq-bubble--reply {
  background: #464646;
  color: var(--color-text-main);
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
}

.faq-bubble--reply::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 18px;
  width: 14px;
  height: 14px;
  background: #464646;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  transform: rotate(45deg);
}

.faq-q-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-gray-500);
}

.faq-face {
  width: 48px;
  height: 48px;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
  border: 1px solid var(--color-gray-200);
  background: var(--color-gray-200);
}

.faq-q-hint .faq-face {
  width: 48px;
  height: 48px;
}

.faq-item[open] .faq-q-hint {
  opacity: 0.62;
}

.faq-a {
  display: block;
  padding: 18px 0 4px;
  background: transparent;
}

.faq-reply-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 100%;
}

.faq-reply-photo {
  width: 48px;
  height: 48px;
  margin-top: 22px;
}

.faq-reply-body {
  min-width: 0;
  flex: 1;
  padding-top: 2px;
}

.faq-reply-name {
  margin: 0 0 8px 6px;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--color-text-main);
}

.faq-reply-name span {
  margin-left: 8px;
  font-family: var(--font-sans, inherit);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-gray-500);
}

.faq-reply-body .faq-bubble--reply {
  display: block;
  max-width: 100%;
}

@media (max-width: 992px) {
  .staircase-3d-wrapper {
    display: flex !important;
    flex-direction: row !important; /* Keep horizontal flow */
    overflow-x: auto !important; /* Make it horizontally scrollable */
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
    height: 520px !important;
    gap: 0 !important;
    margin-top: 30px !important;
    justify-content: flex-start !important;
    padding-bottom: 20px !important;
    padding-right: 30px !important;
  }
  .staircase-3d-step {
    flex: 0 0 135px !important; /* Fixed width to prevent columns from collapsing/squishing on mobile */
    width: 135px !important;
    height: 100% !important;
  }
  .staircase-3d-step .stair-block-front {
    /* Cascades PC step height variables to maintain the stair shape */
  }

  /* Elegant scrollbar styling for mobile swipe visibility */
  .staircase-3d-wrapper::-webkit-scrollbar {
    height: 6px;
  }
  .staircase-3d-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
  }
  .staircase-3d-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }
}

@media (max-width: 768px) {
  .clipboard-container {
    padding: 40px 15px 25px 15px !important;
    border-radius: 12px !important;
    margin-top: 30px !important;
  }
  .clipboard-paper {
    padding: 30px 15px !important;
  }
  .clipboard-title-br {
    display: block;
  }
  .clipboard-paper-title {
    font-size: 17px;
    line-height: 1.55;
    letter-spacing: 0.04em;
    margin-bottom: 28px;
    padding-bottom: 12px;
  }
  .clipboard-list li {
    gap: 12px !important;
    padding: 18px 0 !important;
  }
  
  /* Mobile timeline overrides: watermark background photos behind full-width schedule */
  .custom-timeline-grid {
    display: block !important;
    position: relative !important;
    margin-top: 30px !important;
  }

  /* Make the photo cluster container an absolute-overlay background layer */
  .timeline-photo-cluster {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important; /* Lies behind the z-index: 3 text flow */
    pointer-events: none !important;
    display: block !important; /* Disable flex column flow */
    padding: 0 !important;
    border-bottom: none !important;
  }

  /* Hide labels, badges, and time text next to photos on mobile */
  .timeline-photo-cluster .circle-label {
    display: none !important;
  }

  /* Reset layout margins for background watermark items */
  .cluster-item {
    position: absolute !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* Soften circular photos into high-transparency, borderless background assets */
  .circle-image-wrap {
    border: none !important;
    box-shadow: none !important;
    opacity: 0.12 !important; /* Decreased transparency (opacity 0.12) to make photos slightly more visible */
  }

  /* Stagger the watermark photos behind the timeline text layers */
  .cluster-item.item-1 {
    top: 8% !important;
    left: 10% !important;
    right: auto !important;
  }
  .circle-image-wrap.size-lg {
    width: 150px !important;
    height: 150px !important;
  }

  .cluster-item.item-2 {
    top: 36% !important;
    right: 5% !important;
    left: auto !important;
  }
  .circle-image-wrap.size-md {
    width: 140px !important;
    height: 140px !important;
  }

  .cluster-item.item-3 {
    top: 60% !important;
    left: 5% !important;
    right: auto !important;
  }

  .cluster-item.item-4 {
    top: 84% !important;
    right: 8% !important;
    left: auto !important;
  }
  .circle-image-wrap.size-sm {
    width: 130px !important;
    height: 130px !important;
  }

  /* Timeline steps text flow (positioned on top of background photos) */
  .timeline-steps-flow {
    position: relative !important;
    z-index: 3 !important; /* Put text flow on top */
    padding-left: 45px !important;
  }

  .timeline-vertical-line {
    left: 45px !important;
    top: 10px !important;
    bottom: 10px !important;
    z-index: 2 !important;
  }

  .timeline-step-row {
    padding-left: 35px !important;
    margin-bottom: 35px !important;
    z-index: 3 !important;
  }

  .step-time-pill {
    left: -45px !important;
    min-width: 76px !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    z-index: 4 !important;
  }
  
  .step-title {
    font-size: 14px !important;
  }
  
  .step-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }


  .faq-lead {
    font-size: 13px;
  }

  .faq-q {
    gap: 10px;
  }

  .faq-bubble {
    font-size: 13px;
    padding: 12px 15px;
    max-width: min(100%, 300px);
  }

  .faq-q-hint span:last-child {
    display: none;
  }

  .faq-reply-row {
    gap: 10px;
  }

  .faq-reply-photo,
  .faq-face {
    width: 44px;
    height: 44px;
  }

  .faq-reply-photo {
    margin-top: 20px;
  }

  .faq-reply-name {
    font-size: 12px;
    margin-left: 2px;
  }

  .faq-reply-body .faq-bubble--reply {
    max-width: 100%;
  }
}

/* --- Entry Form Optimization Styles --- */
.badge-required {
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
  border: none !important;
  font-size: 10px !important;
  padding: 2px 6px !important;
  border-radius: 2px !important;
  margin-left: 8px !important;
  font-weight: 700 !important;
  display: inline-block !important;
}

.badge-optional {
  background-color: transparent !important;
  color: var(--color-gray-300) !important;
  border: 1px solid var(--color-border-strong) !important;
  font-size: 10px !important;
  padding: 1px 6px !important;
  border-radius: 2px !important;
  margin-left: 8px !important;
  font-weight: 700 !important;
  display: inline-block !important;
}

/* Styled File Upload Input */
.file-upload-wrapper {
  position: relative;
  width: 100%;
}

.file-upload-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 14px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--border-radius);
  background-color: var(--color-surface);
  color: var(--color-text-main);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.file-upload-input:hover {
  border-color: var(--color-accent-warm);
  background-color: var(--color-surface-2);
}

.file-info-note {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 6px;
  line-height: 1.4;
}

/* Radio & Checkbox Styling */
.radio-group, .checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

.radio-item, .checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.radio-item input[type="radio"],
.checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-black);
  cursor: pointer;
}

/* Validation Error Styles */
.error-message {
  color: #d93838;
  font-size: 12px;
  margin-top: 6px;
  display: none;
}

.form-group.has-error .form-control,
.form-group.has-error .file-upload-input {
  border-color: #ff6b6b !important;
  background-color: #1a0a0a !important;
}

.form-group.has-error .error-message {
  display: block;
}

/* Section Grouping */
.form-section-title {
  font-size: 16px;
  font-weight: 800;
  border-bottom: 2px solid var(--color-border-strong);
  padding-bottom: 8px;
  margin: 40px 0 20px 0;
  color: var(--color-text-main);
}

.form-section-title:first-of-type {
  margin-top: 0;
}

/* Form Grid 2-column layout */
.form-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Hide honeypot spam protection field */
.form-honeypot {
  display: none !important;
  visibility: hidden !important;
}

@media (max-width: 900px) and (min-width: 769px) {
  .salary-banner-inner {
    grid-template-columns: 1fr auto;
    gap: 10px 24px;
    padding: 14px 24px 14px 28px;
  }

  .salary-note {
    grid-column: 1 / -1;
    border-left: none;
    padding-left: 0;
    text-align: left;
    border-top: 1px solid var(--color-gray-200);
    padding-top: 10px;
  }
}

@media (max-width: 768px) {
  .salary-highlight-banner {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  .salary-banner-inner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 8px;
    padding: 16px 18px 14px 22px;
  }

  .salary-banner-meta {
    align-items: center;
    gap: 6px;
  }

  .salary-tag {
    font-size: 10px;
    padding: 4px 10px;
    letter-spacing: 0.18em;
  }

  .salary-lead {
    font-size: 12px;
    letter-spacing: 0.06em;
  }

  .salary-amount {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 8px 8px;
    border-top: 1px solid var(--color-gray-200);
    border-bottom: 1px solid var(--color-gray-200);
  }

  .salary-amount-label {
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--color-gray-500);
  }

  .salary-num {
    font-size: clamp(52px, 14vw, 68px);
    font-weight: 700;
    letter-spacing: -0.04em;
  }

  .salary-unit {
    font-size: clamp(20px, 5.5vw, 26px);
    font-weight: 700;
  }

  .salary-from {
    font-size: clamp(26px, 7vw, 34px);
    font-weight: 600;
  }

  .salary-note {
    text-align: center;
    border-left: none;
    padding-left: 0;
    font-size: 11px;
    letter-spacing: 0.05em;
    max-width: 18em;
    line-height: 1.4;
  }
}

/* ==========================================================================
   6. Scaffolding Scroll Indicator Widget (Fixed on the right side)
   ========================================================================== */
.scaffolding-scroll-widget {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 70px;
  height: 260px;
  z-index: 999;
  pointer-events: none; /* Make it pass-through click so it doesn't block clicks underneath */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  transition: opacity 0.3s ease;
}

.scaffolding-svg {
  width: 100%;
  height: calc(100% - 20px);
  overflow: visible;
}

.scaff-group {
  opacity: 0;
  transform: scale(0.85) translateY(12px);
  transform-origin: bottom center;
  transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scaff-group.active {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.scaff-height-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-on-light);
  margin-top: 6px;
  font-family: monospace;
  background-color: rgba(255, 255, 255, 0.92);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Make it smaller on mobile screen to prevent overlapping text */
@media (max-width: 992px) {
  .scaffolding-scroll-widget {
    right: 15px !important;
    bottom: 15px !important;
    width: 45px !important;
    height: 170px !important;
  }
  .scaff-height-label {
    font-size: 9px !important;
    margin-top: 4px !important;
    padding: 1px 4px !important;
  }
}

/* Clear the fixed ENTRY bar on recruit mobile */
@media (max-width: 768px) {
  .scaffolding-scroll-widget {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* PHASE 14A — requirements complete: existing flag + entry settle (once) */
#scaff-flag.is-flag-complete {
  transition: none;
  animation: phase14aFlagIn 0.5s ease forwards;
  transform-origin: bottom center;
}

#scaff-flag polygon {
  fill: #d44832;
  stroke: #e8b45a;
  filter: drop-shadow(0 0 4px rgba(232, 180, 90, 0.55)) drop-shadow(0 1px 3px rgba(212, 72, 50, 0.45));
}

#scaff-flag.is-flag-complete polygon {
  fill: #e0553a;
  stroke: #f0c878;
  filter: drop-shadow(0 0 6px rgba(240, 200, 120, 0.7)) drop-shadow(0 0 10px rgba(212, 72, 50, 0.5));
}

@keyframes phase14aFlagIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1.08);
  }
}

.requirements-entry-btn.is-entry-settle {
  animation: phase14aEntrySettle 0.5s ease both;
}

@keyframes phase14aEntrySettle {
  from {
    opacity: 0.82;
    transform: translateY(6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #scaff-flag.is-flag-complete,
  .requirements-entry-btn.is-entry-settle {
    animation: none !important;
    transform: none !important;
  }

  #scaff-flag.is-flag-complete {
    opacity: 1;
  }
}

/* ==========================================================================
   7. 100 TOBI Project Scroll Reveal Animations
   ========================================================================== */
/* Initial hidden states */
.reveal-hidden {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-hidden-right {
  opacity: 0;
  transform: translateX(40px) scale(0.98);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-hidden-stage {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Revealed active states */
.reveal-show {
  opacity: 1;
  transform: translate(0) scale(1) !important;
}

/* Staggered stage reveals using CSS variables for transition delay */
.reveal-show-stage {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: calc(var(--stage-index) * 0.15s) !important;
}

/* Interactive dynamic hover effects on Stages list */
.tobi-project-stages li {
  position: relative;
  transition: background-color 0.3s ease, padding-left 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s ease;
  border-radius: 8px;
  padding: 20px 15px !important; /* Give slight side padding for hover bg */
  margin: 0 -15px; /* Offset side padding so alignment stays clean */
}

.tobi-project-stages li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background-color: var(--color-brown);
  transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  border-radius: 8px 0 0 8px;
}

.tobi-project-stages li:hover {
  background-color: rgba(255, 255, 255, 0.04);
  padding-left: 25px !important; /* Slide right slightly */
  transform: translateY(-2px);
}

.tobi-project-stages li:hover::before {
  width: 4px; /* Glowing brand-color left accent bar on hover */
}

.tobi-project-stages li:hover .tobi-stage-num {
  color: var(--color-brown);
  transform: scale(1.1);
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Premium visual frame — clean photo, no edge vignette */
.tobi-project-visual {
  position: relative;
}

.tobi-image-container {
  border-radius: 12px;
}

.tobi-project-section .section-title {
  font-size: clamp(34px, 6vw, 58px);
  letter-spacing: 0.06em;
}

/* 100 Tobi Project Layout Hidden & Fade-in states */
.tobi-project-layout.tobi-layout-hidden {
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.tobi-project-section {
  position: relative;
  min-height: 500px;
  overflow-anchor: none;
}

html.is-tobi-scroll-lock,
html.is-tobi-scroll-lock body {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
  overflow-anchor: none;
}

/* Waiting: one viewport of dark stage (not a tall invisible content block) */
.tobi-project-section.tobi-intro-waiting {
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  overflow: hidden;
  background-color: var(--color-bg-page);
}

.tobi-project-section.tobi-intro-waiting > .container {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.tobi-project-section.tobi-intro-ready,
.tobi-project-section.tobi-intro-playing {
  visibility: visible;
  pointer-events: auto;
}

/* Waiting / playing / fading: clip to one screen during active intro only */
.tobi-project-section.tobi-intro-ready,
.tobi-project-section.tobi-intro-playing {
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  overflow: hidden;
}

.tobi-project-section.tobi-intro-done {
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
}

.tobi-project-section.tobi-intro-ready > .container,
.tobi-project-section.tobi-intro-playing:not(.tobi-intro-fading) > .container {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.tobi-project-section.tobi-intro-playing.tobi-intro-fading > .container {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}

.tobi-project-section.tobi-intro-playing.tobi-intro-fading .tobi-100-scaffold-anim-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 100 Tobi Project Particle Count-up Intro Overlay */
.tobi-100-scaffold-anim-wrap {
  --tobi-count-solid: #c9a84c;
  --tobi-count-particle: #e8d08a;
  position: absolute;
  inset: 0;
  background-color: var(--color-bg-page);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  z-index: 10;
  display: block;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}

/* Must come AFTER the base rule so waiting stage is never blank */
.tobi-project-section.tobi-intro-waiting .tobi-100-scaffold-anim-wrap {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
}

.tobi-particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* Overlay fullscreen once intro is armed (also when moved onto document.body) */
.tobi-project-section.tobi-intro-ready .tobi-100-scaffold-anim-wrap,
.tobi-project-section.tobi-intro-playing .tobi-100-scaffold-anim-wrap,
body > .tobi-100-scaffold-anim-wrap.is-tobi-overlay-active {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 2000;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
  transition: none;
}

.tobi-project-section.tobi-intro-playing.tobi-intro-fading .tobi-100-scaffold-anim-wrap,
body > .tobi-100-scaffold-anim-wrap.is-tobi-overlay-active.is-tobi-overlay-fading {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}

/* Overlay removed after intro */
.tobi-project-section.tobi-intro-done .tobi-100-scaffold-anim-wrap,
body > .tobi-100-scaffold-anim-wrap.is-tobi-overlay-done {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
}

/* Title appears under the particle number once count hits 100 */
.tobi-movie-title-wrap {
  position: absolute;
  left: 50%;
  top: 72%;
  transform: translate(-50%, 12px);
  text-align: center;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  font-family: 'Outfit', 'Noto Sans JP', sans-serif;
  width: min(90vw, 640px);
  transition: opacity 0.9s cubic-bezier(0.25, 1, 0.5, 1), transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}

.tobi-project-section.tobi-intro-title-show .tobi-movie-title-wrap,
body > .tobi-100-scaffold-anim-wrap.is-tobi-title-show .tobi-movie-title-wrap {
  opacity: 0.9;
  transform: translate(-50%, 0);
}

.tobi-project-section.tobi-intro-fading .tobi-movie-title-wrap,
body > .tobi-100-scaffold-anim-wrap.is-tobi-overlay-fading .tobi-movie-title-wrap {
  opacity: 0;
  transform: translate(-50%, -8px);
  transition-duration: 0.7s;
}

.tobi-movie-title {
  font-size: clamp(20px, 4.5vw, 36px);
  font-weight: 600;
  color: var(--color-text-main);
  letter-spacing: 0.18em;
  margin: 0 0 8px;
  line-height: 1.15;
  text-transform: uppercase;
}

.tobi-movie-subtitle {
  font-size: clamp(11px, 2.6vw, 14px);
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: 0.22em;
  margin: 0;
}

/* Hide section header + layout only during active intro animation */
.tobi-project-section.tobi-intro-ready .section-header,
.tobi-project-section.tobi-intro-playing:not(.tobi-intro-fading) .section-header,
.tobi-project-section.tobi-intro-ready .tobi-project-layout,
.tobi-project-section.tobi-intro-playing:not(.tobi-intro-fading) .tobi-project-layout {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.tobi-project-section.tobi-intro-playing.tobi-intro-fading .section-header,
.tobi-project-section.tobi-intro-playing.tobi-intro-fading .tobi-project-layout,
.tobi-project-section.tobi-intro-done .section-header,
.tobi-project-section.tobi-intro-done .tobi-project-layout {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  transition: opacity 0.9s ease;
}

.tobi-element-show {
  opacity: 1 !important;
  transform: translate(0) scale(1) !important;
}

.tobi-element-show-stage {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition-delay: calc(var(--stage-index) * 0.15s) !important;
}

/* ==========================================================================
   9. KWT WORKS APP V3.1 Polished Section Styles (Light Grey Theme)
   ========================================================================== */
.kwt-app-v3-section {
  background-color: var(--color-bg-section);
  color: var(--color-text-body);
  padding: 80px 0;
  overflow: hidden;
  position: relative;
}

/* Remove neon glowing gradients and blueprint backgrounds */
.kwt-app-v3-blueprint-bg {
  display: none; /* Removed to reduce visual noise */
}

.kwt-app-v3-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.kwt-app-v3-layout {
  display: grid;
  grid-template-columns: 460px 1fr; /* Increased left column width to fit larger phones */
  gap: 50px;
  align-items: start;
}

/* Left Column: Phone Mockups */
.kwt-app-v3-visual-col {
  display: flex;
  justify-content: center;
  position: sticky;
  top: 80px;
}

.kwt-app-v3-phones-container {
  position: relative;
  width: 100%;
  max-width: 460px; /* Scaled up container */
  height: 480px; /* Scaled up container */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* 3D-effect Phone Frame Shell */
.kwt-app-v3-phone {
  position: absolute;
  width: 175px; /* Increased from 135px */
  height: 360px; /* Increased from 280px */
  background-color: #111113;
  border: 9px solid #2a2a2e;
  border-radius: 26px;
  outline: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 
    0 20px 45px rgba(0, 0, 0, 0.4),
    inset 0 0 10px rgba(255, 255, 255, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 2;
  opacity: 1; /* Always visible to prevent issues if JS doesn't trigger */
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.kwt-app-v3-phone-speaker {
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 4px;
  background-color: #3e3e42;
  border-radius: 2px;
  z-index: 20;
}

.kwt-app-v3-phone-camera {
  position: absolute;
  top: -5px;
  left: calc(50% + 22px);
  width: 5px;
  height: 5px;
  background-color: #3e3e42;
  border-radius: 50%;
  z-index: 20;
}

.kwt-app-v3-phone-shadow {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 15px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 80%);
  filter: blur(5px);
  pointer-events: none;
  z-index: 1;
}

/* Positioning & Rotation for Phone A, B, C (Scaled Up) */
.kwt-app-v3-phone--a {
  left: 0;
  bottom: 30px;
  width: 155px; /* Scaled up */
  height: 320px; /* Scaled up */
  z-index: 1;
  transform: translateY(28px) rotate(-6deg);
  transition-delay: 0.05s;
}

.kwt-app-v3-phone--b {
  left: 50%;
  bottom: 0;
  width: 175px; /* Scaled up */
  height: 360px; /* Scaled up */
  z-index: 3;
  transform: translate(-50%, 20px);
  transition-delay: 0.16s;
}

.kwt-app-v3-phone--c {
  right: 0;
  bottom: 35px;
  width: 155px; /* Scaled up */
  height: 320px; /* Scaled up */
  z-index: 2;
  transform: translateY(32px) rotate(6deg);
  transition-delay: 0.28s;
}

/* IntersectionObserver active trigger classes */
.kwt-app-v3-section.is-app-visible .kwt-app-v3-phone--a {
  transform: translateY(0) rotate(-6deg) !important;
}

.kwt-app-v3-section.is-app-visible .kwt-app-v3-phone--b {
  transform: translate(-50%, 0) !important;
}

.kwt-app-v3-section.is-app-visible .kwt-app-v3-phone--c {
  transform: translateY(0) rotate(6deg) !important;
}

/* Inside screen container */
.kwt-app-v3-screen-placeholder {
  width: 100%;
  height: 100%;
  background-color: #0b0f19;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  margin: 2px;
  border: 1px solid rgba(255,255,255,0.01);
}

.kwt-app-screen-shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.kwt-app-coming-soon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgba(247, 247, 248, 0) 18%,
    rgba(247, 247, 248, 0.52) 48%,
    rgba(247, 247, 248, 0.88) 100%
  );
  pointer-events: none;
}

.kwt-app-coming-soon-label {
  font-family: var(--font-sans);
  font-size: clamp(10px, 2.4vw, 13px);
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-black);
  padding: 9px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
  transform: translateY(22%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* App UI Dashboard styling (Scaled Typography) */
.kwt-app-v3-app-ui {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  color: var(--color-text-heading);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 12px 10px 10px;
}

.kwt-app-v3-app-ui.is-on {
  opacity: 1;
  z-index: 10;
}

.kwt-app-v3-app-header {
  background-color: #111726;
  padding: 8px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: 8px;
  border-radius: 4px;
}

.kwt-app-v3-app-logo-text {
  font-size: 9px; /* Scaled up */
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #94a3b8;
}

.kwt-app-v3-app-time {
  font-size: 9px; /* Scaled up */
  color: #64748b;
  font-weight: 700;
}

.kwt-app-v3-app-body {
  flex: 1;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px; /* Scaled up */
  overflow: hidden;
}

.kwt-app-v3-app-welcome {
  margin-bottom: 4px;
}

.kwt-app-v3-welcome-sub {
  font-size: 8px; /* Scaled up */
  color: #64748b;
  display: block;
}

.kwt-app-v3-welcome-name {
  font-size: 11px; /* Scaled up */
  font-weight: 800;
  color: var(--color-text-heading);
}

.kwt-app-v3-app-card {
  background-color: #141c2d;
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  padding: 8px; /* Scaled up */
  display: flex;
  flex-direction: column;
}

.kwt-app-v3-app-card-primary {
  border-color: rgba(217, 119, 6, 0.15);
  background-color: rgba(217, 119, 6, 0.02);
}

.kwt-app-v3-app-card-title {
  font-size: 8px; /* Scaled up */
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.kwt-app-v3-app-card-site {
  font-size: 10px; /* Scaled up */
  font-weight: 800;
  color: var(--color-text-heading);
  line-height: 1.25;
}

.kwt-app-v3-app-card-btn {
  background-color: var(--color-brown);
  color: var(--color-white);
  text-align: center;
  font-size: 9px; /* Scaled up */
  font-weight: 800;
  padding: 6px;
  border-radius: 4px;
  margin-top: 6px;
}

.kwt-app-v3-app-map {
  background: linear-gradient(135deg, rgba(217,119,6,0.1), rgba(99,102,241,0.05));
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 4px;
  flex: 1;
  min-height: 70px; /* Scaled up */
  position: relative;
}

.kwt-app-v3-app-map::after {
  content: "GPS";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
}

.kwt-app-v3-app-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  background: rgba(255,255,255,0.01);
  padding: 4px;
  border-radius: 4px;
}

.kwt-app-v3-app-cal b {
  font-size: 8px; /* Scaled up */
  text-align: center;
  color: #64748b;
  font-weight: normal;
  padding: 2px 0;
}

.kwt-app-v3-app-cal b.is-on {
  color: var(--color-text-heading);
  background-color: var(--color-brown);
  border-radius: 50%;
  font-weight: 800;
}

.kwt-app-v3-app-pay {
  font-size: 17px; /* Scaled up */
  font-weight: 800;
  color: var(--color-text-heading);
  text-align: center;
  padding: 14px 0;
}

.kwt-app-v3-app-pay small {
  font-size: 8px; /* Scaled up */
  color: #64748b;
  display: block;
}

/* Right Column Content - Soft Dark Ink Typography */
.kwt-app-v3-content-col {
  display: flex;
  flex-direction: column;
}

.kwt-app-v3-tag {
  background: rgba(28, 28, 28, 0.05);
  color: #555555;
  border: 1px solid rgba(28, 28, 28, 0.1);
  padding: 3px 8px;
  font-size: 9px;
  font-weight: 800;
  border-radius: 3px;
  width: fit-content;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: inline-block;
}

.kwt-app-v3-subcopy {
  font-family: var(--font-serif);
  font-size: clamp(20px, 3.2vw, 28px);
  font-weight: 800;
  color: var(--color-text-main);
  margin: 0 0 6px 0;
  line-height: 1.35;
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

.kwt-app-v3-title {
  font-size: 12px;
  color: var(--color-brown);
  font-weight: 800;
  letter-spacing: 1.5px;
  margin: 0 0 24px 0;
}

.kwt-app-v3-desc {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.75;
  margin: 0 0 28px 0;
}

/* Accent Callout box adjusted for light theme */
.kwt-app-v3-accent-box {
  display: flex;
  background-color: rgba(255, 255, 255, 0.45);
  border-left: 2px solid var(--color-brown);
  padding: 12px 16px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 35px;
  align-items: start;
}

.kwt-app-v3-accent-title {
  font-size: 13px;
  font-weight: 800;
  color: #1c1c1c;
  margin: 0 0 3px 0;
}

.kwt-app-v3-accent-desc {
  font-size: 12px;
  color: rgba(28, 28, 28, 0.6);
  margin: 0;
  line-height: 1.4;
}

/* Features Grid cards matching light theme beige-grey */
.kwt-app-v3-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.kwt-app-v3-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  background-color: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(28, 28, 28, 0.08);
  border-radius: 8px;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
              background-color 0.3s ease, 
              border-color 0.3s ease;
}

.kwt-app-v3-card-full {
  grid-column: span 2;
}

.kwt-app-v3-card-hero {
  background-color: rgba(255, 255, 255, 0.65);
  border-color: rgba(28, 28, 28, 0.12);
}

.kwt-app-v3-card:hover {
  background-color: rgba(255, 255, 255, 0.85);
  border-color: rgba(28, 28, 28, 0.16);
  transform: translateY(-2px);
}

.kwt-app-v3-card-hero:hover {
  background-color: rgba(255, 255, 255, 0.95);
  border-color: rgba(217, 119, 6, 0.25);
}

.kwt-app-v3-card-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background-color: rgba(28, 28, 28, 0.03);
  border: 1px solid rgba(28, 28, 28, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(28, 28, 28, 0.6);
}

.kwt-app-v3-card:hover .kwt-app-v3-card-icon-wrap {
  color: var(--color-brown);
  border-color: rgba(217, 119, 6, 0.2);
  background-color: rgba(217, 119, 6, 0.05);
}

.kwt-app-v3-svg-icon {
  width: 16px;
  height: 16px;
}

.kwt-app-v3-card-title {
  font-size: 13px;
  font-weight: 800;
  color: #1c1c1c;
  margin: 0 0 3px 0;
}

.kwt-app-v3-card-text {
  font-size: 12px;
  color: rgba(28, 28, 28, 0.6);
  line-height: 1.45;
  margin: 0;
}

.kwt-app-v3-footnote {
  font-size: 10px;
  color: rgba(28, 28, 28, 0.4);
  margin: 0;
  letter-spacing: 0.3px;
}

/* Staggered Entrance Scroll Animations */
.reveal-hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1), transform 1s cubic-bezier(0.25, 1, 0.5, 1);
}

.kwt-app-v3-section.is-app-visible .kwt-app-v3-visual-col {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1) 0.1s, transform 1s cubic-bezier(0.25, 1, 0.5, 1) 0.1s !important;
}

.kwt-app-v3-section.is-app-visible .kwt-app-v3-header {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1) 0.2s, transform 1s cubic-bezier(0.25, 1, 0.5, 1) 0.2s !important;
}

.kwt-app-v3-section.is-app-visible .kwt-app-v3-desc {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1) 0.3s, transform 1s cubic-bezier(0.25, 1, 0.5, 1) 0.3s !important;
}

.kwt-app-v3-section.is-app-visible .kwt-app-v3-accent-box {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1) 0.4s, transform 1s cubic-bezier(0.25, 1, 0.5, 1) 0.4s !important;
}

.kwt-app-v3-section.is-app-visible .kwt-app-v3-features-grid {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1) 0.5s, transform 1s cubic-bezier(0.25, 1, 0.5, 1) 0.5s !important;
}

/* Initial state of layout elements inside hidden app section */
.kwt-app-v3-section.is-app-hidden .kwt-app-v3-visual-col,
.kwt-app-v3-section.is-app-hidden .kwt-app-v3-header,
.kwt-app-v3-section.is-app-hidden .kwt-app-v3-desc,
.kwt-app-v3-section.is-app-hidden .kwt-app-v3-accent-box,
.kwt-app-v3-section.is-app-hidden .kwt-app-v3-features-grid {
  opacity: 0 !important;
  transform: translateY(15px) !important;
}

/* Responsive Overrides */
@media (max-width: 992px) {
  .kwt-app-v3-section {
    padding: 60px 0;
  }

  .kwt-app-v3-container {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .kwt-app-v3-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    width: 100%;
  }
  
  .kwt-app-v3-visual-col {
    position: relative;
    top: 0;
    width: 100%;
  }

  .kwt-app-v3-content-col {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .kwt-app-v3-phones-container {
    max-width: none;
    height: auto !important;
    min-height: 0;
  }
  
  .kwt-app-v3-features-grid {
    grid-template-columns: 1fr;
  }
  
  .kwt-app-v3-card-full {
    grid-column: span 1;
  }
  
  /* Disable stagger animations on tablet/mobile for lightweight rendering */
  .kwt-app-v3-visual-col,
  .kwt-app-v3-header,
  .kwt-app-v3-desc,
  .kwt-app-v3-accent-box,
  .kwt-app-v3-features-grid {
    opacity: 1;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 768px) {
  .kwt-app-v3-visual-col {
    width: 100%;
    justify-content: center;
  }

  .kwt-app-v3-phones-container {
    max-width: 240px;
    height: auto;
    min-height: 0;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .kwt-app-v3-phone--a,
  .kwt-app-v3-phone--c {
    display: none;
  }

  .kwt-app-v3-phone--b,
  .kwt-app-v3-section.is-app-visible .kwt-app-v3-phone--b {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0 auto;
    transform: none !important;
    width: min(200px, 58vw);
    height: auto;
    aspect-ratio: 175 / 360;
  }
}

@media (max-width: 480px) {
  .kwt-app-v3-phone--a,
  .kwt-app-v3-phone--c {
    display: none; /* Hide side phones on tiny screen sizes to avoid overlap */
  }

  .kwt-app-v3-phone--b,
  .kwt-app-v3-section.is-app-visible .kwt-app-v3-phone--b {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0 auto;
    transform: none !important;
    width: min(200px, 62vw);
    height: auto;
    aspect-ratio: 175 / 360;
  }
}

/* ==========================================================================
   WORK section (recruit.html #work) — video-led
   ========================================================================== */
.work-section {
  background-color: var(--color-bg-section);
}

.work-video-wrap {
  max-width: 960px;
  margin: 0 auto;
  border-radius: var(--border-radius);
  overflow: hidden;
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
}

.work-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background-color: var(--color-surface-2);
}

.work-video-caption {
  max-width: 36em;
  margin: 20px auto 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .work-caption-br {
    display: none;
  }

  .work-video-caption {
    font-size: 13px;
    margin-top: 16px;
  }
}

/* ==========================================================================
   PEOPLE section (recruit.html #people) — STEP 3B
   Scoped .recruit-people-* only. Does not modify company crew styles.
   ========================================================================== */
.recruit-people-section {
  background-color: var(--color-bg-section-alt);
  overflow-x: clip;
}


.recruit-people-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.recruit-people-card {
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--border-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* STEP 13B: card entrance — progressive enhancement only */
#people.is-people-animate .recruit-people-card:not(.is-people-in) {
  opacity: 0;
  transform: translateY(16px);
}

#people.is-people-animate .recruit-people-card.is-people-in {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.4s ease var(--people-stagger, 0ms),
    transform 0.4s ease var(--people-stagger, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  #people.is-people-animate .recruit-people-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

.recruit-people-photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-gray-200);
}

.recruit-people-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recruit-people-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.recruit-people-role {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
  line-height: 1.4;
}

.recruit-people-name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text-heading);
  line-height: 1.3;
}

.recruit-people-tag {
  margin: 2px 0 4px;
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--color-text-main);
  border: 1px solid var(--color-border-strong);
  padding: 3px 8px;
  line-height: 1;
}

.recruit-people-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--color-text-body);
}

/* PHASE 15 — seamless photo film (CSS only, no JS) */
.recruit-people-film-intro {
  margin: 40px auto 18px;
  max-width: 1100px;
  text-align: center;
}

.recruit-people-film-heading {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--color-text-main);
  line-break: strict;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}

.recruit-people-film-lead {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
}

.recruit-people-film {
  --people-film-duration: 55s;
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  /* Prevent 100vw scrollbar interaction */
  touch-action: pan-y;
}

.recruit-people-film__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: recruitPeopleFilmScroll var(--people-film-duration) linear infinite;
}

.recruit-people-film__set {
  display: flex;
  flex-shrink: 0;
  gap: 0;
  margin: 0;
  padding: 0;
}

.recruit-people-film__img {
  display: block;
  flex-shrink: 0;
  width: 22vw; /* ~4.5 frames on PC */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Portrait crops: favor faces over mechanical center */
.recruit-people-film__img--pos-8594 {
  object-position: 50% 28%; /* IMG_8594 — keep 7 faces */
}

.recruit-people-film__img--pos-8592 {
  object-position: 50% 44%; /* IMG_8592 — keep 5 faces */
}

@keyframes recruitPeopleFilmScroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media (max-width: 768px) {
  .title-br {
    display: block;
  }

  .section-label {
    letter-spacing: 0.12em;
  }

  .recruit-people-film-intro {
    margin-top: 28px;
    margin-bottom: 12px;
  }

  .recruit-people-film-heading {
    font-size: 18px;
  }

  .recruit-people-film-lead {
    margin-top: 6px;
    font-size: 12px;
  }

  .recruit-people-film__img {
    width: 58vw; /* ~1.7 frames on SP */
  }
}

@media (prefers-reduced-motion: reduce) {
  .recruit-people-film__track {
    animation: none;
    transform: none;
  }
}

.recruit-people-more {
  margin-top: 36px;
  text-align: center;
}

.recruit-people-more-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-text-main);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 4px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.recruit-people-more-link:hover {
  color: var(--color-accent-warm-soft);
  border-bottom-color: var(--color-accent-warm);
}

@media (max-width: 1100px) {
  .recruit-people-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 768px) {
  #people.recruit-people-section .section-header {
    margin-bottom: 20px !important;
  }

  .recruit-people-grid {
    gap: 12px;
  }

  .recruit-people-body {
    padding: 12px 12px 14px;
    gap: 3px;
  }

  .recruit-people-role {
    font-size: 10px;
    line-height: 1.3;
  }

  .recruit-people-name {
    font-size: 16px;
    line-height: 1.2;
  }

  .recruit-people-tag {
    margin: 0 0 2px;
    padding: 2px 6px;
    font-size: 9px;
  }

  .recruit-people-text {
    font-size: 12px;
    line-height: 1.55;
  }

  .recruit-people-more {
    margin-top: 20px;
  }
}

@media (max-width: 576px) {
  .recruit-people-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 100%;
  }

  .recruit-people-photo {
    aspect-ratio: 1 / 1;
  }

  .recruit-people-body {
    padding: 10px 10px 12px;
    gap: 2px;
  }

  .recruit-people-name {
    font-size: 14px;
  }

  .recruit-people-role {
    font-size: 9px;
  }

  .recruit-people-text {
    font-size: 11px;
    line-height: 1.4;
  }

  .recruit-people-more {
    margin-top: 18px;
  }
}

/* ==========================================================================
   APP single-phone screenshot (company + recruit)
   ========================================================================== */
.kwt-app-screenshot-wrap {
  position: relative;
  width: 100%;
  max-width: 280px;
  height: auto !important;
  min-height: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.kwt-app-screenshot-wrap .kwt-app-v3-phone--b,
.kwt-app-v3-section.is-app-visible .kwt-app-screenshot-wrap .kwt-app-v3-phone--b {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  margin: 0 auto;
  transform: none !important;
  width: min(220px, 100%);
  height: auto;
  aspect-ratio: 175 / 360;
}

@media (min-width: 993px) {
  .company-app-section .kwt-app-v3-layout {
    grid-template-columns: minmax(220px, 320px) 1fr;
  }
}

@media (max-width: 992px) {
  .company-app-section .kwt-app-v3-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    width: 100%;
  }

  .company-app-section .kwt-app-v3-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .company-app-section .kwt-app-v3-visual-col,
  .company-app-section .kwt-app-v3-content-col {
    position: relative;
    top: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .company-app-section .kwt-app-v3-phones-container {
    max-width: none;
    height: auto !important;
    min-height: 0;
  }

  .company-app-section .kwt-app-v3-subcopy,
  .company-app-section .kwt-app-v3-desc {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .kwt-app-screenshot-wrap {
    max-width: min(240px, 58vw);
  }

  .kwt-app-screenshot-wrap .kwt-app-v3-phone--b,
  .kwt-app-v3-section.is-app-visible .kwt-app-screenshot-wrap .kwt-app-v3-phone--b {
    width: min(200px, 58vw);
  }
}

@media (max-width: 480px) {
  .kwt-app-screenshot-wrap .kwt-app-v3-phone--b,
  .kwt-app-v3-section.is-app-visible .kwt-app-screenshot-wrap .kwt-app-v3-phone--b {
    width: min(200px, 62vw);
  }
}

/* ==========================================================================
   APP recruit short version (recruit.html #kwt-app-section.recruit-app-section)
   Scoped to .recruit-app-section — does not affect company.html APP.
   ========================================================================== */
.recruit-app-section.kwt-app-v3-section {
  padding: 72px 0;
}

.recruit-app-container {
  max-width: 1000px;
}

.recruit-app-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px 48px;
  align-items: center;
}

.recruit-app-desc {
  margin-top: 8px;
  margin-bottom: 0;
  max-width: 36em;
}

.recruit-app-points {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  border-top: 1px solid var(--color-border);
}

.recruit-app-point {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}

.recruit-app-point-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-text-main);
}

.recruit-app-point-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-muted);
}



.recruit-app-section .kwt-app-v3-visual-col,
.recruit-app-section .kwt-app-v3-header,
.recruit-app-section .kwt-app-v3-desc,
.recruit-app-section .kwt-app-v3-accent-box,
.recruit-app-section .kwt-app-v3-features-grid {
  opacity: 1 !important;
  transform: none !important;
}

@media (max-width: 900px) {
  .recruit-app-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    width: 100%;
  }

  .recruit-app-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .recruit-app-visual {
    order: -1;
    width: 100%;
    min-width: 0;
  }

  .recruit-app-section .kwt-app-v3-content-col {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .recruit-app-section.kwt-app-v3-section {
    padding: 56px 0;
  }
}

/* Recruit continuous stretch: slightly tighter padding */
.recruit-tight.section-padding {
  padding: 80px 0;
}

.recruit-tight .benefits-tier {
  margin-top: 28px;
}

.recruit-tight .point-body {
  padding: 14px 16px;
}

.recruit-tight .point-title {
  margin-bottom: 4px;
  font-size: 16px;
}

.recruit-tight .point-desc {
  font-size: 12px;
  line-height: 1.55;
}

.recruit-tight .benefits-points-list {
  gap: 12px;
}

.recruit-app-section.recruit-tight {
  padding: 56px 0;
}

.recruit-tight .recruit-app-point {
  padding: 12px 0;
}

.recruit-tight .recruit-app-point-text {
  font-size: 12px;
}

@media (max-width: 768px) {
  /* STEP 9: people / benefits only — other recruit-tight sections unchanged */
  #people.recruit-tight.section-padding,
  #benefits.recruit-tight.section-padding {
    padding: 40px 0;
  }
}

/* ==========================================================================
   Recruit — section open (once per section when it enters view)
   Progressive enhancement via .is-section-reveal / .is-section-open
   ========================================================================== */
.page-recruit .is-section-reveal:not(.is-section-open) > .container > *,
.page-recruit .hero.is-section-reveal:not(.is-section-open) .hero-content > * {
  opacity: 0;
  transform: translateY(28px);
}

.page-recruit .is-section-open > .container > *,
.page-recruit .hero.is-section-open .hero-content > * {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-recruit .is-section-open > .container > *:nth-child(1),
.page-recruit .hero.is-section-open .hero-content > *:nth-child(1) {
  transition-delay: 0.04s;
}

.page-recruit .is-section-open > .container > *:nth-child(2),
.page-recruit .hero.is-section-open .hero-content > *:nth-child(2) {
  transition-delay: 0.12s;
}

.page-recruit .is-section-open > .container > *:nth-child(3),
.page-recruit .hero.is-section-open .hero-content > *:nth-child(3) {
  transition-delay: 0.2s;
}

.page-recruit .is-section-open > .container > *:nth-child(4) {
  transition-delay: 0.28s;
}

.page-recruit .is-section-open > .container > *:nth-child(5) {
  transition-delay: 0.36s;
}

/* FAQ items: light cascade inside the open */
.page-recruit #faq.is-section-reveal:not(.is-section-open) .faq-item {
  opacity: 0;
  transform: translateY(18px);
}

.page-recruit #faq.is-section-open .faq-item {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}

.page-recruit #faq.is-section-open .faq-item:nth-child(1) { transition-delay: 0.16s; }
.page-recruit #faq.is-section-open .faq-item:nth-child(2) { transition-delay: 0.24s; }
.page-recruit #faq.is-section-open .faq-item:nth-child(3) { transition-delay: 0.32s; }
.page-recruit #faq.is-section-open .faq-item:nth-child(4) { transition-delay: 0.4s; }
.page-recruit #faq.is-section-open .faq-item:nth-child(5) { transition-delay: 0.48s; }
.page-recruit #faq.is-section-open .faq-item:nth-child(6) { transition-delay: 0.56s; }

@media (prefers-reduced-motion: reduce) {
  .page-recruit .is-section-reveal > .container > *,
  .page-recruit .hero.is-section-reveal .hero-content > *,
  .page-recruit #faq.is-section-reveal .faq-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Recruit mobile fixed ENTRY */
.recruit-fixed-entry {
  display: none;
}

@media (max-width: 768px) {
  .recruit-fixed-entry {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
    height: 48px;
    padding: 0 20px;
    background-color: var(--color-accent-warm);
    /* 金地に白はコントラスト不足のため濃色テキストへ（背景色は維持） */
    color: #1a1a1a;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.18em;
    border-radius: 2px;
    box-shadow: 0 8px 24px rgba(var(--color-accent-warm-rgb), 0.35);
    text-decoration: none;
  }

  .recruit-fixed-entry:hover {
    background-color: var(--color-accent-warm-hover);
    color: #1a1a1a;
  }

  .page-recruit .site-footer {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* ==========================================================================
   Scaffold arrow cursor (desktop)
   ========================================================================== */
.kwt-emblem-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 24px;
  height: 31px;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 10050;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
  transition: opacity 0.12s ease;
}

.kwt-emblem-cursor.is-on {
  opacity: 1;
}

.kwt-emblem-cursor img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

body.is-emblem-cursor,
body.is-emblem-cursor a,
body.is-emblem-cursor button,
body.is-emblem-cursor .btn,
body.is-emblem-cursor .quick-nav-btn,
body.is-emblem-cursor label,
body.is-emblem-cursor summary,
body.is-emblem-cursor [role="button"] {
  cursor: none;
}

body.is-emblem-cursor input,
body.is-emblem-cursor textarea,
body.is-emblem-cursor select,
body.is-emblem-cursor [contenteditable="true"] {
  cursor: text;
}

/* Touch / coarse: never show custom cursor */
@media (hover: none), (pointer: coarse) {
  .kwt-emblem-cursor {
    display: none !important;
  }

  body.is-emblem-cursor,
  body.is-emblem-cursor a,
  body.is-emblem-cursor button,
  body.is-emblem-cursor .btn,
  body.is-emblem-cursor .quick-nav-btn,
  body.is-emblem-cursor label,
  body.is-emblem-cursor summary,
  body.is-emblem-cursor [role="button"] {
    cursor: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kwt-emblem-cursor {
    display: none !important;
  }

  body.is-emblem-cursor,
  body.is-emblem-cursor a,
  body.is-emblem-cursor button {
    cursor: auto;
  }
}

/* ==========================================================================
   Phase 1 — Black base theme helpers & recruitment UI
   ========================================================================== */
.section-padding {
  background-color: var(--color-bg-page);
}

.career-step,
.tobi-project-callout,
.project-card,
.crew-card,
.privacy-content-card {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border-strong) !important;
  color: var(--color-text-body);
}

.clipboard-paper {
  background-color: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  color: #5a5a5a !important;
}

.kwt-app-v3-title,
.kwt-app-v3-subcopy,
.kwt-app-v3-desc,
.kwt-app-v3-accent-title,
.kwt-app-v3-card-title,
.kwt-app-v3-card-text,
.kwt-app-v3-card,
.recruit-app-point-title,
.recruit-app-point-text,
.recruit-app-desc {
  color: var(--color-text-main);
}

.kwt-app-v3-desc,
.kwt-app-v3-card-text,
.kwt-app-v3-accent-desc,
.recruit-app-point-text {
  color: var(--color-text-muted);
}

.kwt-app-v3-card {
  background-color: var(--color-surface);
  border-color: var(--color-border-strong);
}

.kwt-app-v3-tag,
.kwt-app-v3-accent-box {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.kwt-app-coming-soon {
  background: linear-gradient(
    180deg,
    rgba(42, 42, 42, 0) 18%,
    rgba(42, 42, 42, 0.48) 48%,
    rgba(34, 34, 34, 0.82) 100%
  );
}

.kwt-app-coming-soon-label {
  color: var(--color-text-main);
  background: rgba(42, 42, 42, 0.9);
  border-color: var(--color-border);
}

.btn-invert {
  background-color: var(--color-white);
  color: var(--color-on-light);
}

.btn-invert:hover {
  background-color: var(--color-gray-300);
  color: var(--color-on-light);
}

.req-table a,
.footer-phone a,
.recruit-cta-phone a {
  color: var(--color-text-main);
  font-weight: 700;
  border-bottom: 1px solid var(--color-border-strong);
}

.req-table a:hover,
.footer-phone a:hover,
.recruit-cta-phone a:hover {
  border-bottom-color: var(--color-accent-warm);
  color: var(--color-accent-warm-soft);
}

.footer-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.footer-phone svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}

.salary-wage-table-wrap {
  max-width: 960px;
  margin: 20px auto 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.salary-wage-table {
  width: 100%;
  min-width: 280px;
  border-collapse: collapse;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.salary-wage-table th,
.salary-wage-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

.salary-wage-table th {
  width: 42%;
  color: var(--color-text-main);
  font-weight: 800;
  background: rgba(255, 255, 255, 0.03);
}

.salary-wage-table td {
  color: var(--color-text-muted);
  font-weight: 700;
}

.salary-wage-table tr:last-child th,
.salary-wage-table tr:last-child td {
  border-bottom: none;
}

.salary-wage-note {
  max-width: 960px;
  margin: 12px auto 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-muted);
}

.benefits-confirmed-list,
.benefits-events-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 960px;
  margin: 20px auto 0;
  padding: 0;
  list-style: none;
}

.benefits-confirmed-list li:not(.scan-row),
.benefits-events-list li:not(.event-row) {
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-main);
}

.benefits-support-message {
  max-width: 960px;
  margin: 28px auto 0;
  padding: 18px 20px;
  border-left: 3px solid var(--color-accent-warm);
  background: rgba(255, 255, 255, 0.03);
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-main);
}

.recruit-cta-message {
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-size: clamp(18px, 3.4vw, 24px);
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-text-main);
}

.recruit-cta-phone {
  margin: 0 0 20px;
  font-size: clamp(20px, 4.5vw, 28px);
  font-weight: 900;
  letter-spacing: 0.06em;
}

.recruit-cta-phone a {
  border-bottom: none;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 768px) {
  .benefits-confirmed-list,
  .benefits-events-list {
    grid-template-columns: 1fr;
  }

  .salary-wage-table th,
  .salary-wage-table td {
    padding: 12px 14px;
    font-size: 13px;
  }

  .recruit-cta-phone a {
    display: inline-block;
    padding: 4px 0;
  }
}

/* ==========================================================================
   Phase 1b — Black background readability pass
   ========================================================================== */
.privacy-content-card h2,
.privacy-section-heading {
  font-size: 18px;
  font-weight: 800;
  border-bottom: 2px solid var(--color-border-strong);
  padding-bottom: 8px;
  margin: 30px 0 15px 0;
  color: var(--color-text-main);
}

.contact-form-card a,
.checkbox-item a {
  color: var(--color-accent-warm-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-form-card a:hover,
.checkbox-item a:hover {
  color: var(--color-accent-warm);
}

.kwt-app-v3-tag {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.kwt-app-v3-accent-box,
.kwt-app-v3-card,
.kwt-app-v3-card-hero {
  background-color: var(--color-surface);
  border-color: var(--color-border-strong);
}

.kwt-app-v3-accent-box:hover,
.kwt-app-v3-card:hover,
.kwt-app-v3-card-hero:hover {
  background-color: var(--color-surface-elevated);
  border-color: rgba(255, 255, 255, 0.2);
}

.kwt-app-v3-accent-title,
.kwt-app-v3-card-title {
  color: var(--color-text-main);
}

.kwt-app-v3-accent-desc,
.kwt-app-v3-card-text,
.kwt-app-v3-footnote {
  color: var(--color-text-muted);
}

.kwt-app-v3-card-icon-wrap {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.kwt-app-v3-card:hover .kwt-app-v3-card-icon-wrap {
  color: var(--color-accent-warm-soft);
  border-color: rgba(var(--color-accent-warm-rgb), 0.35);
  background-color: rgba(var(--color-accent-warm-rgb), 0.08);
}

.kwt-app-coming-soon-label {
  color: var(--color-on-light);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--color-border-strong);
}

.featured-crew-name {
  color: var(--color-text-main);
}

/* ==========================================================================
   Phase 2 — Layered dark hierarchy (B案 refinement)
   ========================================================================== */
.main-content > .section-padding:nth-of-type(odd):not(.recruit-people-section):not(.work-section):not(.page-hero-band) {
  background-color: var(--color-bg-page);
}

.main-content > .section-padding:nth-of-type(even):not(.recruit-people-section):not(.page-hero-band) {
  background-color: var(--color-bg-section);
}

.main-content > .recruit-people-section,
.main-content > .work-section {
  background-color: var(--color-bg-photo);
}

.page-hero-band {
  background-color: var(--color-bg-info) !important;
}

.section-padding .section-header + p,
.philosophy-content p,
.tobi-project-intro p,
.tobi-project-stages li,
.work-video-caption,
.faq-lead,
.contact-info-text,
.crew-card-desc,
.tobi-project-copy p {
  color: var(--color-text-body);
}

.form-label {
  color: var(--color-text-heading);
}

.privacy-content-card {
  background-color: var(--color-surface-elevated) !important;
}

.summary-text strong,
.career-step .step-title,
.recruit-people-name,
.recruit-people-film-heading {
  color: var(--color-text-heading);
}

.clipboard-paper-title,
.clipboard-item-text strong {
  color: #3a3a3a !important;
}

.footer-meta,
.footer-links a {
  color: var(--color-text-subtle);
}

.hero-overlay {
  background: linear-gradient(
    to right,
    rgba(42, 42, 42, 0.68) 0%,
    rgba(42, 42, 42, 0.32) 50%,
    rgba(42, 42, 42, 0.58) 100%
  );
}

.scroll-indicator {
  color: var(--color-text-subtle);
  opacity: 1;
}

.portal-desc {
  color: var(--color-text-body);
  opacity: 1;
}

.portal-sub {
  color: var(--color-text-subtle);
}

.kwt-app-v3-tag {
  background: var(--color-surface-2);
  color: var(--color-text-subtle);
  border-color: var(--color-border-strong);
}

.kwt-app-v3-card-icon-wrap {
  background-color: var(--color-surface-2);
  border-color: var(--color-border-strong);
  color: var(--color-text-subtle);
}

.salary-wage-table th {
  background: var(--color-surface-2);
}

.benefits-confirmed-list li:not(.scan-row),
.benefits-events-list li:not(.event-row) {
  background: var(--color-surface-elevated);
  border-color: var(--color-border-strong);
}

.benefits-support-message {
  background: transparent;
  border-left-color: var(--color-accent-warm);
}

@media (max-width: 768px) {
  .summary-text span {
    color: var(--color-text-subtle);
  }
}


/* ==========================================================================
   Phase 4 — Black UX: hierarchy, spacing, scan-friendly information
   ========================================================================== */

/* --- Global typography on black --- */
body {
  font-weight: 500;
  letter-spacing: 0.02em;
}

.section-header {
  margin-bottom: clamp(48px, 8vw, 80px);
}

.section-header--center,
#benefits .section-header,
#contract .section-header,
#requirements .section-header {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  color: var(--color-text-heading);
  letter-spacing: 0.02em;
}

.page-hero-lead {
  margin-top: 20px;
  max-width: 38em;
  font-size: clamp(15px, 2.2vw, 17px);
  font-weight: 500;
  line-height: 1.85;
  color: var(--color-text-body);
}

/* --- Scan sections: generous vertical rhythm --- */
.section-scan.section-padding {
  padding-top: clamp(88px, 14vw, 148px);
  padding-bottom: clamp(88px, 14vw, 148px);
}

.section-scan .section-header {
  margin-bottom: clamp(56px, 9vw, 96px);
}

/* --- Summary panel: border-only, no gray card --- */
.summary-box {
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border-strong);
  border-left: none;
  border-radius: 0;
  box-shadow: none;
  padding: 32px 0 36px;
  margin-bottom: 48px;
}

.summary-title {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-heading);
  margin-bottom: 24px;
}

.summary-text strong {
  font-size: clamp(16px, 2.5vw, 18px);
  font-weight: 800;
  color: var(--color-text-heading);
  margin-bottom: 6px;
}

.summary-text span {
  font-size: 14px;
  line-height: 1.6;
}

/* --- Benefits lead --- */
.benefits-lead {
  margin: 20px auto 0;
  font-size: clamp(15px, 2.2vw, 17px);
  font-weight: 500;
  line-height: 1.85;
  color: var(--color-text-body);
}

.benefits-tier {
  margin-top: clamp(56px, 8vw, 88px);
}

.benefits-tier-label {
  margin: 0 0 0;
  padding-bottom: 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-heading);
  border-bottom: 1px solid var(--color-border-strong);
}

/* --- Salary hero: number-first, no card box --- */
#benefits .salary-highlight-banner {
  margin: 0 auto;
  max-width: 960px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border-strong);
  border-radius: 0;
  overflow: visible;
}

#benefits .salary-banner-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: clamp(36px, 6vw, 56px) 0;
  text-align: center;
}

#benefits .salary-banner-meta {
  align-items: center;
}

#benefits .salary-lead {
  font-size: clamp(14px, 2vw, 16px);
  font-weight: 500;
  color: var(--color-text-body);
}

#benefits .salary-amount {
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#benefits .salary-amount-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.24em;
  color: var(--color-text-subtle);
}

#benefits .salary-num {
  font-size: clamp(64px, 12vw, 96px);
  font-weight: 900;
  color: var(--color-text-heading);
}

#benefits .salary-unit,
#benefits .salary-from {
  color: var(--color-text-heading);
  font-weight: 700;
}

#benefits .salary-note {
  font-size: 14px;
  line-height: 1.7;
  max-width: 36em;
  margin: 0 auto;
  padding-top: 8px;
}

/* --- Salary table: open scan layout --- */
#benefits .salary-wage-table-wrap {
  max-width: 720px;
  margin: clamp(40px, 6vw, 64px) auto 0;
}

#benefits .salary-wage-table {
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-border);
}

#benefits .salary-wage-table tr {
  border-bottom: 1px solid var(--color-border);
}

#benefits .salary-wage-table th,
#benefits .salary-wage-table td {
  padding: clamp(16px, 3vw, 22px) 0;
  border-bottom: none;
  vertical-align: middle;
}

#benefits .salary-wage-table th {
  width: auto;
  background: transparent;
  font-size: clamp(13px, 2vw, 15px);
  font-weight: 600;
  color: var(--color-text-subtle);
  letter-spacing: 0.04em;
}

#benefits .salary-wage-table td.wage-amount {
  text-align: right;
  font-size: clamp(22px, 4.5vw, 32px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-heading);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* --- Benefits: editorial flat list (deprecated — replaced by poster) --- */
.benefits-confirmed-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  max-width: 960px;
  margin: 28px auto 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.benefits-confirmed-list .scan-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px 24px;
  padding: clamp(18px, 3vw, 24px) 0;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
}

.benefits-confirmed-list .scan-row:nth-child(odd) {
  padding-right: clamp(16px, 4vw, 32px);
}

.benefits-confirmed-list .scan-row:nth-child(even) {
  padding-left: clamp(16px, 4vw, 32px);
  border-left: 1px solid var(--color-border);
}

.scan-label {
  font-size: clamp(15px, 2.2vw, 17px);
  font-weight: 800;
  color: var(--color-text-heading);
  line-height: 1.4;
}

.scan-value {
  font-size: clamp(14px, 2vw, 15px);
  font-weight: 500;
  color: var(--color-text-subtle);
  text-align: right;
  line-height: 1.5;
  white-space: nowrap;
}

.scan-value--accent {
  font-weight: 800;
  color: var(--color-text-heading);
  font-variant-numeric: tabular-nums;
}

.benefits-support-message {
  max-width: 960px;
  margin: clamp(40px, 6vw, 56px) auto 0;
  padding: 0 0 0 20px;
  border: none;
  border-left: 3px solid var(--color-accent-warm);
  background: transparent;
  font-size: clamp(16px, 2.5vw, 18px);
  font-weight: 700;
  line-height: 1.8;
  color: var(--color-text-heading);
}

/* --- Events: numbered list --- */
.benefits-events-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 960px;
  margin: 28px auto 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}

.benefits-events-list .event-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: start;
  gap: 20px;
  padding: clamp(22px, 4vw, 32px) 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
}

.event-num {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--color-accent-warm);
  padding-top: 4px;
}

.event-text {
  font-size: clamp(16px, 2.5vw, 18px);
  font-weight: 700;
  color: var(--color-text-heading);
  line-height: 1.6;
}

/* --- Requirements / profile tables: white card on dark page --- */
#requirements .req-table-wrap {
  max-width: 880px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

#requirements .req-table tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

#requirements .req-table tr:last-child {
  border-bottom: none;
}

#requirements .req-table th {
  width: clamp(140px, 22vw, 220px);
  padding: clamp(20px, 3.5vw, 28px) clamp(16px, 3vw, 24px);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4a4a4a;
  background: #f5f5f5;
  vertical-align: top;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

#requirements .req-table td {
  padding: clamp(20px, 3.5vw, 28px) clamp(20px, 3vw, 28px);
  font-size: clamp(15px, 2.2vw, 16px);
  font-weight: 500;
  line-height: 1.85;
  color: #333333;
  background: #ffffff;
  max-width: 52em;
}

#requirements .req-table td strong {
  color: #1a1a1a;
  font-weight: 800;
}

#requirements .req-table a {
  color: #1a1a1a;
  font-weight: 700;
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

#requirements .req-table a:hover {
  color: var(--color-accent-warm-hover);
  border-bottom-color: var(--color-accent-warm);
}

/* --- CTA band --- */
.recruit-cta-band {
  margin-top: clamp(64px, 10vw, 96px);
  padding-top: clamp(48px, 8vw, 72px);
  border-top: 1px solid var(--color-border-strong);
  text-align: center;
}

.recruit-cta-message {
  color: var(--color-text-heading);
}

.requirements-entry-btn {
  min-height: 52px;
  padding: 16px 40px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

/* --- Contact --- */
.contact-info-title {
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 900;
  line-height: 1.45;
  color: var(--color-text-heading);
  margin-bottom: 24px;
}

.contact-info-text {
  font-size: clamp(15px, 2.2vw, 16px);
  font-weight: 500;
  line-height: 1.9;
  max-width: 38em;
}

.contact-section .contact-flow-title {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-heading);
  margin-bottom: 16px;
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}

.contact-section .contact-flow-list {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--color-text-body);
  list-style-type: decimal;
  padding-left: 1.4em;
  display: grid;
  gap: 12px;
}

/* --- Contact form: white card for easy input --- */
.contact-section .contact-form-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  padding: clamp(28px, 5vw, 48px);
  color: #333333;
}

.contact-section .contact-form-card .form-section-title {
  color: #1a1a1a;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

.contact-section .contact-form-card .form-section-title:first-of-type {
  margin-top: 0;
}

.contact-section .contact-form-card .form-label {
  color: #333333;
}

.contact-section .contact-form-card .form-control {
  background-color: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #1a1a1a;
}

.contact-section .contact-form-card .form-control:focus {
  background-color: #ffffff;
  border-color: var(--color-accent-warm);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-warm-rgb), 0.18);
}

.contact-section .contact-form-card .form-control::placeholder,
.contact-section .contact-form-card textarea.form-control::placeholder {
  color: #999999;
}

.contact-section .contact-form-card select.form-control {
  background-color: #fafafa;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 40px;
}

.contact-section .contact-form-card .radio-item,
.contact-section .contact-form-card .checkbox-item {
  color: #333333;
}

.contact-section .contact-form-card .radio-item input[type="radio"],
.contact-section .contact-form-card .checkbox-item input[type="checkbox"] {
  accent-color: var(--color-accent-warm);
}

.contact-section .contact-form-card .badge-optional {
  color: #666666 !important;
  border-color: rgba(0, 0, 0, 0.2) !important;
}

.contact-section .contact-form-card .file-upload-input {
  background: #fafafa;
  border-color: rgba(0, 0, 0, 0.15);
  color: #333333;
}

.contact-section .contact-form-card .file-upload-input:hover {
  background: #ffffff;
  border-color: var(--color-accent-warm);
}

.contact-section .contact-form-card .file-info-note {
  color: #666666;
}

.contact-section .contact-form-card .form-privacy-note {
  font-size: 12px;
  color: #666666;
  margin-bottom: 12px;
  line-height: 1.6;
}

.contact-section .contact-form-card .checkbox-item a {
  /* 白カード上の薄いゴールドは読みにくいため、同系の濃い色へ最小限調整 */
  color: #7a5c14;
}

.contact-section .contact-form-card .checkbox-item a:hover {
  color: #5c450f;
}

.contact-section .contact-form-card .form-status-message {
  margin-bottom: 24px;
  padding: 20px;
  border-radius: var(--border-radius);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.contact-section .contact-form-card .form-submit-wrap {
  margin-top: 30px;
}

.contact-section .contact-form-card .form-submit-btn {
  width: 100%;
  padding: 16px;
  min-height: 52px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.contact-section .contact-form-card .form-group.has-error .form-control,
.contact-section .contact-form-card .form-group.has-error .file-upload-input {
  border-color: #e05050 !important;
  background-color: #fff5f5 !important;
}

.form-section-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--color-text-heading);
  margin: 40px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.form-control {
  font-size: 16px;
  font-weight: 500;
  padding: 16px 18px;
  min-height: 52px;
  background-color: transparent;
  border-color: var(--color-border-strong);
}

.form-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text-heading);
  margin-bottom: 10px;
}

/* --- Privacy prose --- */
.section-scan .privacy-content-card {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  max-width: 42em;
  margin: 0 auto;
}

.section-scan .privacy-content-card p,
.section-scan .privacy-content-card li {
  font-size: clamp(15px, 2.2vw, 16px);
  font-weight: 500;
  line-height: 1.9;
  color: var(--color-text-body);
}

.section-scan .privacy-section-heading {
  font-size: clamp(16px, 2.5vw, 18px);
  font-weight: 900;
  color: var(--color-text-heading);
  margin-top: 48px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-strong);
}

/* --- FAQ readability --- */
#faq .section-header {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.faq-lead {
  font-size: clamp(15px, 2.2vw, 16px);
  line-height: 1.85;
}

/* --- Timeline step titles --- */
.step-title {
  font-size: clamp(17px, 2.5vw, 20px);
  font-weight: 800;
  color: var(--color-text-heading);
}

.step-desc {
  font-size: clamp(15px, 2.2vw, 16px);
  font-weight: 500;
  line-height: 1.85;
  margin-top: 8px;
}

/* --- Override Phase 1/2 gray card surfaces in scan sections --- */
.section-scan .benefits-confirmed-list li,
.section-scan .benefits-events-list li,
#benefits .salary-wage-table,
#benefits .salary-wage-table th {
  background: transparent !important;
}

@media (max-width: 768px) {
  .benefits-confirmed-list {
    grid-template-columns: 1fr;
  }

  .benefits-confirmed-list .scan-row:nth-child(even) {
    padding-left: 0;
    border-left: none;
  }

  .benefits-confirmed-list .scan-row:nth-child(odd) {
    padding-right: 0;
  }

  .scan-value {
    white-space: normal;
  }

  #benefits .salary-wage-table th,
  #benefits .salary-wage-table td.wage-amount {
    display: table-cell;
    width: auto;
    padding: 16px 0;
  }

  #benefits .salary-wage-table th {
    font-size: 13px;
    padding-right: 16px;
  }

  #benefits .salary-wage-table td.wage-amount {
    font-size: clamp(20px, 6vw, 28px);
    text-align: right;
  }

  #requirements .req-table th {
    display: block;
    width: 100%;
    padding: 18px 20px 8px;
    font-size: 11px;
    color: #4a4a4a;
    background: #f5f5f5;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  #requirements .req-table td {
    display: block;
    padding: 12px 20px 20px;
    font-size: 15px;
    color: #333333;
    background: #ffffff;
  }

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

  .contact-layout {
    gap: 56px;
  }

  .contact-section .contact-form-card {
    padding: 24px 20px;
  }

  .form-control {
    font-size: 16px;
  }

  .benefits-events-list .event-row {
    grid-template-columns: 36px 1fr;
    gap: 14px;
  }
}

/* ==========================================================================
   Benefits — hero pickup + full disclosure panels
   ========================================================================== */
#benefits .benefits-lead {
  margin: 20px auto 0;
  max-width: 36em;
  font-size: clamp(15px, 2.2vw, 17px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
}

#benefits .benefits-detail {
  max-width: 960px;
  margin: clamp(40px, 6vw, 64px) auto 0;
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5vw, 48px);
}

#benefits .benefits-block {
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

#benefits .benefits-block--salary {
  border-top: 4px solid #8f5555;
}

#benefits .benefits-block--support {
  border-top: 4px solid #3d9a82;
}

#benefits .benefits-block--events {
  border-top: 4px solid #7a6ab8;
}

#benefits .benefits-block-head {
  padding: clamp(24px, 4vw, 32px) clamp(24px, 4vw, 36px) 0;
}

#benefits .benefits-block-toggle {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

#benefits .benefits-block-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

#benefits .benefits-block-toggle .benefits-block-title,
#benefits .benefits-block-toggle .benefits-block-desc {
  display: block;
}

#benefits .benefits-collapsible-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}

#benefits .benefits-collapsible-icon::before,
#benefits .benefits-collapsible-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

#benefits .benefits-collapsible-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

#benefits .is-expanded .benefits-collapsible-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}

#benefits .benefits-collapsible-trigger {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 4px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 700;
  color: #f5f5f5;
  background: #262626;
  border: 1px solid rgba(255, 255, 255, 0.14);
  cursor: pointer;
}

#benefits .benefits-collapsible-trigger .benefits-collapsible-icon {
  margin-top: 0;
}

#benefits .benefits-block-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.3;
  color: #f5f5f5;
}

#benefits .benefits-block--salary .benefits-block-title { color: #e8c4c4; }
#benefits .benefits-block--support .benefits-block-title { color: #8ee4cc; }
#benefits .benefits-block--events .benefits-block-title { color: #d4c8f0; }

#benefits .benefits-block-desc {
  margin: 10px 0 0;
  font-size: clamp(15px, 2vw, 17px);
  font-weight: 500;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}

#benefits .benefits-block-body {
  padding: clamp(20px, 3vw, 28px) clamp(24px, 4vw, 36px) clamp(28px, 4vw, 40px);
}

/* --- Salary hero --- */
#benefits .benefits-salary-hero.salary-highlight-banner {
  margin: 0 0 clamp(24px, 4vw, 32px);
  max-width: none;
  padding: clamp(32px, 5vw, 48px) clamp(20px, 4vw, 32px);
  text-align: center;
  background: #262626;
  border: 1px solid rgba(143, 85, 85, 0.5);
  border-radius: 0;
}

#benefits .benefits-salary-hero.salary-highlight-banner::before {
  display: block;
  background: #d9a8a8;
}

#benefits .benefits-salary-hero-label {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: #e8c4c4;
}

#benefits .benefits-salary-hero-value {
  margin: 0;
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #f5f5f5;
  line-height: 1.2;
}

#benefits .benefits-salary-hero-range {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(232, 196, 196, 0.9);
}

#benefits .benefits-salary-hero-value .salary-num {
  font-family: var(--font-sans);
  font-size: clamp(48px, 9vw, 72px);
  font-weight: 900;
  color: #f5f5f5;
}

#benefits .benefits-salary-growth {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#benefits .benefits-salary-growth-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

#benefits .benefits-salary-growth-stage {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

#benefits .benefits-salary-growth-note {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

#benefits .benefits-salary-growth-amount {
  font-size: clamp(18px, 2.5vw, 22px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #f5f5f5;
  white-space: nowrap;
}

#benefits .benefits-salary-growth-item--raise .benefits-salary-growth-amount {
  color: #e8c4c4;
}

#benefits .benefits-salary-note {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

#benefits .benefits-salary-note:last-child {
  margin-bottom: 0;
}

#benefits .benefits-salary-note a {
  color: #e8c4c4;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#benefits.is-benefits-animate .benefits-salary-hero-value .salary-num {
  display: inline-block;
  transform-origin: 50% 80%;
}

#benefits.is-benefits-animate .benefits-salary-hero-value .salary-num:not(.is-salary-lock) {
  opacity: 0.55;
  transform: scale(1.08) translateY(-2px);
}

#benefits .benefits-table-caption {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

/* --- Shared table styles --- */
#benefits .benefits-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#benefits .benefits-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.6;
}

#benefits .benefits-table thead th {
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: left;
  color: rgba(255, 255, 255, 0.72);
  background: #242424;
  border-bottom: 2px solid rgba(255, 255, 255, 0.14);
}

#benefits .benefits-table thead th:last-child {
  text-align: right;
}

#benefits .benefits-table tbody tr:nth-child(odd) {
  background: #242424;
}

#benefits .benefits-table tbody tr:nth-child(even) {
  background: #2c2c2c;
}

#benefits .benefits-table th[scope="row"],
#benefits .benefits-table td {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  vertical-align: middle;
}

#benefits .benefits-table th[scope="row"] {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  text-align: left;
  word-break: keep-all;
}

#benefits .benefits-table-value {
  font-weight: 800;
  color: #f5f5f5;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#benefits .benefits-table-value--salary {
  font-size: clamp(16px, 2vw, 18px);
  color: #e8c4c4;
}

#benefits .benefits-table-value--accent {
  color: #8ee4cc;
}

#benefits .benefits-table tbody tr:last-child th,
#benefits .benefits-table tbody tr:last-child td {
  border-bottom: none;
}

#benefits .visually-hidden,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Support groups --- */
#benefits .benefits-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 28px);
}

#benefits .benefits-group {
  background: #262626;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: clamp(18px, 3vw, 24px);
}

#benefits .benefits-group--env { border-top: 3px solid #3d9a82; }
#benefits .benefits-group--money { border-top: 3px solid #8f5555; }
#benefits .benefits-group--safety { border-top: 3px solid #5a8fc4; }
#benefits .benefits-group--other { border-top: 3px solid #7a6ab8; }

#benefits .benefits-group-title {
  margin: 0 0 clamp(14px, 2vw, 18px);
  font-family: var(--font-serif);
  font-size: clamp(16px, 2vw, 18px);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #f5f5f5;
}

#benefits .benefits-group .benefits-table tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.05);
}

#benefits .benefits-group .benefits-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.09);
}

#benefits .benefits-group .benefits-table th[scope="row"],
#benefits .benefits-group .benefits-table td {
  padding: 14px 16px;
  font-size: 15px;
}

/* --- Events cards --- */
#benefits .benefits-events-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 24px);
}

#benefits .benefits-events-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 3vw, 28px);
  background: #262626;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 4px solid #7a6ab8;
}

#benefits .benefits-events-season {
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.8vw, 24px);
  font-weight: 900;
  letter-spacing: 0.15em;
  color: #d4c8f0;
}

#benefits .benefits-events-title {
  margin: 0;
  font-size: clamp(15px, 1.9vw, 17px);
  font-weight: 700;
  line-height: 1.7;
  color: #f5f5f5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* Section reveal */
#benefits.is-section-reveal:not(.is-section-open) .benefits-block {
  opacity: 0;
  transform: translateY(12px);
}

#benefits.is-section-open .benefits-block {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

#benefits.is-section-open .benefits-detail .benefits-block:nth-child(1) { transition-delay: 0.05s; }
#benefits.is-section-open .benefits-detail .benefits-block:nth-child(2) { transition-delay: 0.15s; }
#benefits.is-section-open .benefits-detail .benefits-block:nth-child(3) { transition-delay: 0.25s; }

#benefits.is-benefits-reduced .benefits-block {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #benefits .benefits-block {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 992px) {
  #benefits .benefits-groups {
    grid-template-columns: 1fr;
  }

  #benefits .benefits-events-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  #benefits.recruit-tight .section-header {
    margin-bottom: 24px;
  }

  #benefits.recruit-tight .benefits-lead {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.03em;
    max-width: none;
    padding: 0 4px;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: pretty;
  }

  #benefits .benefits-detail {
    margin-top: clamp(28px, 7vw, 40px);
    gap: 16px;
  }

  #benefits .benefits-block-head {
    padding: 16px 16px 0;
  }

  #benefits .benefits-block--collapsible:not(.is-expanded) .benefits-block-head {
    padding-bottom: 16px;
  }

  #benefits .benefits-block-toggle .benefits-collapsible-icon {
    display: block;
  }

  #benefits .benefits-collapsible-trigger {
    display: flex;
  }

  #benefits .benefits-block-body {
    padding: 12px 16px 16px;
  }

  #benefits .benefits-block-title {
    font-size: 20px;
  }

  #benefits .benefits-block-desc {
    font-size: 14px;
    line-height: 1.6;
  }

  #benefits .benefits-salary-hero.salary-highlight-banner {
    margin-bottom: 12px;
    padding: 22px 14px;
  }

  #benefits .benefits-salary-hero-value .salary-num {
    font-size: clamp(36px, 11vw, 48px);
  }

  #benefits .benefits-salary-hero-range {
    margin-top: 10px;
    font-size: 13px;
  }

  #benefits .benefits-salary-growth-item {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 14px 0;
  }

  #benefits .benefits-salary-growth-amount {
    font-size: 18px;
  }

  #benefits .benefits-salary-growth-stage {
    font-size: 14px;
  }

  #benefits .benefits-salary-row-duplicate {
    display: none;
  }

  #benefits .benefits-collapsible--salary-table .benefits-collapsible-panel {
    padding-top: 14px;
  }

  #benefits .benefits-table-caption {
    margin: 0 0 16px;
    padding: 4px 0;
    font-size: 14px;
    line-height: 1.7;
  }

  #benefits .benefits-table {
    font-size: 14px;
  }

  #benefits .benefits-table thead th {
    padding: 10px 12px;
    font-size: 12px;
  }

  #benefits .benefits-table th[scope="row"],
  #benefits .benefits-table td {
    padding: 11px 12px;
  }

  #benefits .benefits-table th[scope="row"] {
    font-size: 13px;
    line-height: 1.5;
  }

  #benefits .benefits-table-value {
    font-size: 14px;
  }

  #benefits .benefits-groups {
    gap: 12px;
  }

  #benefits .benefits-group {
    padding: 14px;
  }

  #benefits .benefits-group-title {
    margin-bottom: 10px;
    font-size: 15px;
  }

  #benefits .benefits-group .benefits-table th[scope="row"],
  #benefits .benefits-group .benefits-table td {
    padding: 10px 12px;
    font-size: 14px;
  }

  #benefits .benefits-events-cards {
    gap: 10px;
  }

  #benefits .benefits-events-card {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
  }

  #benefits .benefits-events-season {
    flex-shrink: 0;
    min-width: 2.2em;
    font-size: 18px;
  }

  #benefits .benefits-events-title {
    font-size: 14px;
    line-height: 1.55;
    text-wrap: pretty;
  }

  #benefits .benefits-note-br {
    display: block;
  }
}

@media (min-width: 769px) {
  #benefits .benefits-block-toggle {
    pointer-events: none;
    cursor: default;
  }

  #benefits .benefits-collapsible-icon {
    display: none;
  }

  #benefits .benefits-collapsible-trigger {
    display: none;
  }

  #benefits .benefits-collapsible-panel[hidden],
  #benefits .benefits-block-body[hidden] {
    display: block !important;
  }

  #benefits .benefits-note-br {
    display: none;
  }
}


/* ==========================================================================
   Contract types — readable panels (aligned with benefits)
   ========================================================================== */
.contract-lead {
  margin: 20px auto 0;
  max-width: 36em;
  font-size: clamp(15px, 2.2vw, 17px);
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
}

.contract-lead--follow {
  margin-top: 0.55em;
}

.contract-detail {
  max-width: 960px;
  margin: clamp(40px, 6vw, 64px) auto 0;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 40px);
}

.contract-block {
  background: #1e1e1e;
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.contract-block--solo {
  border-top: 4px solid var(--color-accent-warm);
}

.contract-block--crew {
  border-top: 4px solid #8ee4cc;
}

.contract-block-head {
  padding: clamp(24px, 4vw, 32px) clamp(24px, 4vw, 36px) 0;
}

.contract-block-kicker {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
}

.contract-block-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2em;
  padding: 4px 8px;
  font-family: Outfit, "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #1a1a1a;
  background: var(--color-accent-warm);
}

.contract-block--crew .contract-block-num {
  background: #8ee4cc;
}

.contract-block-title {
  margin: 0;
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--color-text-heading);
}

.contract-block-desc {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
}

.contract-block-body {
  padding: clamp(20px, 3.5vw, 28px) clamp(24px, 4vw, 36px) clamp(28px, 4vw, 36px);
}

.contract-range-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 18px 20px;
  margin-bottom: 20px;
  background: #262626;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.contract-range-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
}

.contract-range-value {
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
  line-height: 1.2;
}

.contract-growth {
  margin-bottom: 20px;
}

.contract-growth-caption {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
}

.contract-growth-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #262626;
}

.contract-growth-item {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 12px 20px;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.contract-growth-item:last-child {
  border-bottom: none;
}

.contract-growth-stage {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}

.contract-growth-note {
  color: rgba(255, 255, 255, 0.5);
}

.contract-growth-amount {
  font-size: clamp(18px, 2.8vw, 22px);
  font-weight: 800;
  text-align: right;
  color: #ffffff;
  letter-spacing: 0.02em;
}

.contract-growth-item--raise .contract-growth-amount {
  color: var(--color-accent-warm-soft);
}

.contract-table-wrap {
  overflow-x: auto;
}

.contract-table {
  width: 100%;
  border-collapse: collapse;
  background: #262626;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.contract-table th,
.contract-table td {
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.7;
  vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.contract-table tr:last-child th,
.contract-table tr:last-child td {
  border-bottom: none;
}

.contract-table th {
  width: 38%;
  text-align: left;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.03);
}

.contract-table td {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.contract-rate-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contract-rate-panel {
  background: #262626;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 18px 18px;
}

.contract-rate-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--color-accent-warm-soft);
}

.contract-block--crew .contract-rate-title {
  color: #8ee4cc;
}

.contract-rate-amount {
  margin: 0 0 16px;
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.contract-rate-panel .contract-table-wrap {
  margin-top: 0;
}

.contract-rate-panel .contract-table {
  border: none;
  background: transparent;
}

.contract-rate-panel .contract-table th,
.contract-rate-panel .contract-table td {
  padding: 10px 0;
  font-size: 13px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.contract-rate-panel .contract-table th {
  width: 55%;
  color: rgba(255, 255, 255, 0.55);
}

.contract-rate-note {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.68);
}

.contract-annex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contract-annex-panel {
  padding: 20px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.contract-annex-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
}

.contract-annex-body {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.68);
  overflow-wrap: break-word;
  white-space: normal;
}

.contract-annex-meta {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  overflow-wrap: break-word;
}

#contract .section-title {
  text-wrap: wrap;
}

.contract-growth-stage,
.contract-rate-note,
.contract-block-title,
.contract-range-value,
.contract-rate-amount {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
  text-wrap: wrap;
}

@media (max-width: 768px) {
  .contract-block-head {
    padding: 28px 22px 0;
  }

  .contract-block-title {
    font-size: clamp(20px, 5.6vw, 24px);
    line-height: 1.5;
  }

  .contract-block-desc {
    margin-top: 12px;
  }

  .contract-block-body {
    padding: 24px 22px 32px;
  }

  .contract-range-bar {
    padding: 18px 20px;
  }

  .contract-growth-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 20px;
  }

  .contract-growth-amount {
    text-align: left;
  }

  .contract-growth-stage {
    padding-right: 4px;
    line-height: 1.8;
  }

  .contract-rate-panels,
  .contract-annex {
    grid-template-columns: 1fr;
  }

  .contract-rate-panels {
    gap: 18px;
  }

  .contract-rate-panel {
    padding: 22px 20px 24px;
  }

  .contract-rate-title {
    margin-bottom: 14px;
  }

  .contract-rate-amount {
    margin-bottom: 18px;
    font-size: clamp(19px, 5.2vw, 22px);
    line-height: 1.45;
  }

  .contract-rate-note {
    margin-top: 4px;
    padding-right: 2px;
    font-size: 13px;
    line-height: 1.9;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: auto;
  }

  .contract-table th,
  .contract-table td {
    display: block;
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }

  .contract-table th {
    padding-bottom: 4px;
  }

  .contract-table td {
    padding-top: 0;
    padding-bottom: 16px;
  }

  /* Keep label + amount on one row (avoid stacked “paragraph” look) */
  .contract-rate-panel .contract-table,
  .contract-rate-panel .contract-table tbody {
    display: block;
    width: 100%;
  }

  .contract-rate-panel .contract-table tr {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .contract-rate-panel .contract-table tr:last-child {
    border-bottom: none;
  }

  .contract-rate-panel .contract-table th,
  .contract-rate-panel .contract-table td {
    display: block;
    width: auto;
    padding: 0;
    border-bottom: none;
  }

  .contract-rate-panel .contract-table th {
    flex: 1 1 auto;
    min-width: 0;
  }

  .contract-rate-panel .contract-table td {
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
  }

  .contract-annex {
    gap: 8px;
  }

  .contract-annex-panel {
    padding: 22px 8px;
  }

  /* keep-all was breaking after 「・」 into awkward half-lines on SP */
  .contract-annex-body,
  .contract-annex-meta {
    display: block;
    white-space: normal;
    word-break: normal;
    overflow-wrap: break-word;
    line-break: auto;
  }

  .contract-growth-stage,
  .contract-block-title,
  .contract-range-value,
  .contract-rate-amount {
    word-break: normal;
    overflow-wrap: break-word;
    line-break: auto;
  }
}