/* Shared visual language for subpages: light space, quiet depth, deep navy anchors. */
:root {
  --air-blue: #edf6fb;
  --air-blue-soft: #f6fbfe;
  --air-line: #cbdce7;
  --air-shadow: rgba(31, 75, 105, 0.08);
}

body {
  background: #fcfeff;
}

.section-pad {
  padding-bottom: 120px;
  padding-top: 120px;
}

/* Subpage opening area: related to the homepage without repeating its motion. */
.sub-hero {
  background: linear-gradient(115deg, #ffffff 0%, #f6fbfe 42%, #e7f3fa 68%, var(--navy) 68%);
  min-height: 410px;
}

.sub-hero h1,
.column-hero h1,
.article-hero h1 {
  color: #17222c;
}

.message {
  background: #ffffff;
  max-width: none;
  padding-left: clamp(24px, 7vw, 110px);
  padding-right: clamp(24px, 7vw, 110px);
}

.message-copy {
  border-left-color: var(--air-line);
}

.career {
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.95), transparent 26%),
    linear-gradient(180deg, #edf6fb 0%, #f6fbfe 100%);
}

.timeline {
  border-top-color: #bfd3df;
}

.timeline article {
  border-bottom-color: #c7d9e4;
}

.representative-close {
  background: linear-gradient(135deg, #183f5d, #102d47 72%);
}

/* Column indexes */
.column-hero {
  background:
    radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.92), transparent 25%),
    linear-gradient(115deg, #ffffff 0%, #f3f9fc 48%, #e8f3f9 100%);
}

.column-hero-rule {
  border-left-color: #bfd3df;
}

.column-index {
  background: #ffffff;
  max-width: none;
  padding-left: clamp(24px, 7vw, 110px);
  padding-right: clamp(24px, 7vw, 110px);
}

.column-list {
  border-top-color: #bfd3df;
}

.column-card {
  border-bottom-color: #c7d9e4;
}

.column-card:hover {
  background: linear-gradient(90deg, rgba(237, 246, 251, 0.95), rgba(248, 252, 254, 0.35));
  box-shadow: inset 3px 0 0 #9ebacb;
}

.column-meta span,
.article-meta span {
  background: #eaf4f9;
}

/* Long-form articles remain predominantly white for reading comfort. */
.article-hero {
  background: linear-gradient(120deg, #ffffff 0%, #eef7fb 82%, var(--navy) 82%);
}

.article-layout {
  background: #ffffff;
}

.article-aside {
  border-top-color: #183a5a;
}

.article-check {
  background: linear-gradient(145deg, #edf6fb, #f7fbfd);
  border: 1px solid var(--air-line);
  box-shadow: 0 14px 32px var(--air-shadow);
}

.article-contact {
  background:
    radial-gradient(circle at 88% 18%, rgba(99, 150, 183, 0.16), transparent 30%),
    linear-gradient(135deg, #183f5d, #102d47 72%);
}

/* Service page */
.service-intro {
  background: #ffffff;
}

.stage-section {
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.95), transparent 25%),
    linear-gradient(180deg, #edf6fb 0%, #f6fbfe 100%);
}

.stage-list,
.stage-item {
  border-color: #bfd3df;
}

.scope-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--air-line);
  border-top: 3px solid var(--navy);
  box-shadow: 0 12px 28px var(--air-shadow);
}

.benefit-section {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 36%, #edf6fb 36%, #edf6fb 100%);
}

.benefit-panel {
  background:
    radial-gradient(circle at 92% 14%, rgba(103, 153, 186, 0.17), transparent 30%),
    linear-gradient(145deg, #214965, #12344f 65%, #0f2b43);
  border-color: #8caabd;
  box-shadow:
    inset 0 1px 0 rgba(228, 242, 250, 0.28),
    inset 0 -2px 0 rgba(4, 19, 30, 0.36),
    0 22px 50px rgba(22, 61, 87, 0.18);
}

.fee-section {
  background:
    radial-gradient(circle at 8% 88%, rgba(255, 255, 255, 0.9), transparent 27%),
    #eef6fa;
}

.fee-table {
  border: 1px solid var(--air-line);
  box-shadow: 0 12px 28px var(--air-shadow);
}

.service-close {
  background: #ffffff;
}

@media (max-width: 900px) {
  .sub-hero,
  .article-hero {
    background:
      radial-gradient(circle at 90% 8%, rgba(187, 219, 236, 0.28), transparent 30%),
      linear-gradient(155deg, #ffffff 0%, #edf7fc 100%);
  }

  .message,
  .column-index {
    padding-left: clamp(24px, 7vw, 70px);
    padding-right: clamp(24px, 7vw, 70px);
  }
}

@media (max-width: 600px) {
  .section-pad {
    padding-bottom: 82px;
    padding-top: 82px;
  }

  .sub-hero {
    min-height: 330px;
  }

  .message,
  .column-index {
    padding-left: 24px;
    padding-right: 24px;
  }

  .column-card:hover {
    box-shadow: none;
    padding-left: 4px;
  }

  .article-check {
    box-shadow: 0 9px 22px rgba(31, 75, 105, 0.07);
  }

  .scope-card,
  .fee-table {
    box-shadow: 0 8px 20px rgba(31, 75, 105, 0.07);
  }
}