/* Mild Solt lower pages — AIRLIGHT skyline family */

body.studio-lower {
  --lower-bg: #f7fbff;
  --lower-surface: #ffffff;
  --lower-ink: #17283f;
  --lower-muted: #4e5f76;
  --lower-blue: #5f78dc;
  --lower-blue-deep: #455fbf;
  --lower-cyan: #bfeef0;
  --lower-mint: #dff7ed;
  --lower-lilac: #e9e5ff;
  --lower-coral: #ff806f;
  --lower-lime: #dfff84;
  --lower-line: rgba(69, 91, 132, 0.18);
  color: var(--lower-ink);
  background:
    linear-gradient(rgba(95, 120, 220, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 120, 220, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 12% 8%, rgba(191, 238, 240, 0.42), transparent 26rem),
    var(--lower-bg);
  background-size: 54px 54px, 54px 54px, auto, auto;
}

body.studio-company {
  --lower-hero-image: url("/assets/section-manifesto-craft-v1.webp");
  --lower-section-image: url("/assets/capabilities-blueprint-studio-v1.webp");
}

body.studio-contact {
  --lower-hero-image: url("/assets/section-process-flow-v1.webp");
  --lower-section-image: url("/assets/section-work-usability-v1.webp");
}

body.studio-web {
  --lower-hero-image: url("/assets/section-work-usability-v1.webp");
  --lower-section-image: url("/assets/section-process-flow-v1.webp");
}

body.studio-ai {
  --lower-hero-image: url("/assets/capabilities-blueprint-studio-v1.webp");
  --lower-section-image: url("/assets/section-proof-testing-v1.webp");
}

body.studio-legal {
  --lower-hero-image: url("/assets/section-faq-archive-v1.webp");
  --lower-section-image: url("/assets/section-faq-archive-v1.webp");
}

.studio-lower ::selection {
  color: var(--lower-ink);
  background: var(--lower-cyan);
}

.studio-lower .site-header {
  color: var(--lower-ink);
  background: rgba(250, 253, 255, 0.86);
  border-bottom: 1px solid rgba(78, 104, 151, 0.14);
  box-shadow: 0 12px 34px rgba(88, 112, 155, 0.07);
  backdrop-filter: blur(22px) saturate(1.15);
}

.studio-lower .brand,
.studio-lower .brand:hover,
.studio-lower .brand-name,
.studio-lower .gnav a {
  color: var(--lower-ink);
}

.studio-lower .brand-mark {
  color: var(--lower-blue-deep);
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(69, 95, 191, 0.28);
  box-shadow: 0 8px 24px rgba(82, 104, 169, 0.12);
}

.studio-lower .brand-mark::after {
  background: var(--lower-cyan);
  border-color: rgba(69, 95, 191, 0.18);
}

.studio-lower .header-cta {
  color: #fff;
  background: var(--lower-blue);
  border-color: var(--lower-blue);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(95, 120, 220, 0.22);
}

.studio-lower .header-cta:hover {
  color: var(--lower-blue-deep);
  background: #f3efff;
  border-color: rgba(95, 120, 220, 0.3);
}

.studio-lower .page-hero.salt-field {
  min-height: clamp(560px, 72vh, 760px);
  position: relative;
  overflow: hidden;
  color: var(--lower-ink);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0 43%, rgba(248, 252, 255, 0.86) 61%, rgba(226, 240, 247, 0.38) 100%),
    var(--lower-hero-image, url("/assets/capabilities-blueprint-studio-v1.webp"));
  background-position: center, center;
  background-size: cover, cover;
  background-attachment: scroll, fixed;
  border-bottom: 1px solid var(--lower-line);
}

.studio-lower .page-hero.salt-field::before {
  content: "";
  position: absolute;
  right: -3vw;
  bottom: -1px;
  width: min(62vw, 900px);
  height: 66%;
  opacity: 0.36;
  background:
    linear-gradient(90deg,
      transparent 0 6%,
      rgba(95, 120, 220, 0.23) 6% 14%,
      transparent 14% 19%,
      rgba(95, 120, 220, 0.16) 19% 29%,
      transparent 29% 34%,
      rgba(95, 120, 220, 0.25) 34% 47%,
      transparent 47% 52%,
      rgba(95, 120, 220, 0.18) 52% 61%,
      transparent 61% 67%,
      rgba(95, 120, 220, 0.2) 67% 82%,
      transparent 82%);
  clip-path: polygon(0 100%, 0 58%, 8% 58%, 8% 35%, 18% 35%, 18% 73%, 31% 73%, 31% 12%, 46% 12%, 46% 48%, 57% 48%, 57% 26%, 70% 26%, 70% 65%, 83% 65%, 83% 4%, 100% 4%, 100% 100%);
  pointer-events: none;
}

.studio-lower .page-hero.salt-field::after {
  content: "";
  position: absolute;
  right: -7vw;
  top: 23%;
  width: min(48vw, 680px);
  height: 9px;
  background: var(--lower-coral);
  box-shadow:
    0 24px 0 var(--lower-cyan),
    0 48px 0 rgba(95, 120, 220, 0.24);
  transform: rotate(-7deg);
  pointer-events: none;
}

.studio-lower .page-hero .container {
  position: relative;
  z-index: 2;
}

body.studio-lower .page-hero h1 {
  max-width: 900px;
  color: var(--lower-ink) !important;
  font-size: clamp(4.2rem, 9.5vw, 8.8rem);
  line-height: 0.94;
  letter-spacing: -0.07em;
  text-shadow: 3px 3px 0 rgba(191, 238, 240, 0.62);
}

.studio-lower .page-hero .crumb,
.studio-lower .page-hero .crumb a,
.studio-lower .page-hero .lead {
  color: var(--lower-muted);
}

.studio-lower .page-hero .lead {
  max-width: 670px;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.9;
}

.studio-lower .page-hero .en {
  right: -0.03em;
  bottom: -0.17em;
  color: rgba(95, 120, 220, 0.06);
  -webkit-text-stroke: 1px rgba(95, 120, 220, 0.24);
  font-size: clamp(10rem, 27vw, 27rem);
}

.studio-lower .sec-title,
.studio-lower .mission-quote,
.studio-lower .cta-band h2,
.studio-lower .legal-body h2 {
  color: var(--lower-ink);
}

.studio-lower .sec-title,
.studio-lower .mission-quote {
  font-size: clamp(2.8rem, 6vw, 5.9rem);
  line-height: 1.06;
  letter-spacing: -0.055em;
}

.studio-lower .sec-label,
.studio-lower .sec-no,
.studio-lower .biz-en,
.studio-lower .tool-card-cat,
.studio-lower .plan-no,
.studio-lower .flow-num {
  color: var(--lower-blue-deep);
}

.studio-lower .mission-strip,
.studio-lower .plan-sec,
.studio-lower .tools-sec-page,
.studio-lower .contact-sec,
.studio-lower .legal-body {
  background:
    linear-gradient(rgba(95, 120, 220, 0.04) 1px, transparent 1px),
    var(--lower-surface);
  background-size: 54px 54px;
}

.studio-lower .info-sec,
.studio-lower .reason-sec-wp,
.studio-lower .custom-sec {
  background: linear-gradient(128deg, #e7f8f8 0 72%, #f1eeff 72%);
}

.studio-lower .biz-sec,
.studio-lower .flow-sec {
  background: linear-gradient(128deg, #f7fbff 0 69%, #dff7ed 69%);
}

.studio-lower .mission-strip,
.studio-lower .info-sec,
.studio-lower .biz-sec,
.studio-lower .plan-sec,
.studio-lower .reason-sec-wp,
.studio-lower .flow-sec,
.studio-lower .tools-sec-page,
.studio-lower .custom-sec,
.studio-lower .contact-sec,
.studio-lower .legal-body {
  position: relative;
  overflow: hidden;
  padding-block: clamp(96px, 11vw, 160px);
}

.studio-company .mission-strip::before,
.studio-company .biz-sec::before,
.studio-contact .contact-sec::before,
.studio-web .reason-sec-wp::before,
.studio-web .flow-sec::before,
.studio-ai .custom-sec::before,
.studio-ai .tools-sec-page::before,
.studio-legal .legal-body::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(247, 251, 255, 0.98) 0 40%, rgba(247, 251, 255, 0.72) 66%, rgba(247, 251, 255, 0.28)),
    var(--lower-section-image);
  background-position: center, center;
  background-size: cover, cover;
  opacity: 0.68;
  transform: scale(1.025);
}

.studio-company .biz-sec::before,
.studio-web .flow-sec::before,
.studio-ai .tools-sec-page::before {
  background:
    linear-gradient(270deg, rgba(247, 251, 255, 0.97) 0 44%, rgba(247, 251, 255, 0.62) 72%, rgba(247, 251, 255, 0.22)),
    var(--lower-section-image);
}

.studio-lower .mission-strip > .container,
.studio-lower .info-sec > .container,
.studio-lower .biz-sec > .container,
.studio-lower .plan-sec > .container,
.studio-lower .reason-sec-wp > .container,
.studio-lower .flow-sec > .container,
.studio-lower .tools-sec-page > .container,
.studio-lower .custom-sec > .container,
.studio-lower .contact-sec > .container,
.studio-lower .legal-body > .container {
  position: relative;
  z-index: 1;
}

.studio-lower .mission-strip > *,
.studio-lower .info-sec > *,
.studio-lower .biz-sec > *,
.studio-lower .plan-sec > *,
.studio-lower .reason-sec-wp > *,
.studio-lower .flow-sec > *,
.studio-lower .tools-sec-page > *,
.studio-lower .custom-sec > *,
.studio-lower .contact-sec > *,
.studio-lower .legal-body > * {
  position: relative;
  z-index: 1;
}

.studio-lower .plan-grid,
.studio-lower .biz-grid,
.studio-lower .tool-grid-page {
  gap: clamp(20px, 3vw, 38px);
}

.studio-lower .plan-card,
.studio-lower .biz-card,
.studio-lower .tool-card-page,
.studio-lower .custom-stat-card,
.studio-lower .form-panel,
.studio-lower .spec-table,
.studio-lower .rep-profile,
.studio-lower .legal-meta,
.studio-lower .toku-table {
  color: var(--lower-ink);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(95, 120, 220, 0.28);
  border-radius: 4px 34px 4px 4px;
  box-shadow: 16px 19px 0 rgba(191, 238, 240, 0.6), 0 25px 60px rgba(76, 103, 152, 0.1);
}

.studio-lower .plan-card:nth-child(2n),
.studio-lower .biz-card:nth-child(2n),
.studio-lower .tool-card-page:nth-child(2n) {
  box-shadow: 16px 19px 0 rgba(233, 229, 255, 0.75), 0 25px 60px rgba(76, 103, 152, 0.1);
}

.studio-lower .plan-card:hover,
.studio-lower .biz-card:hover,
.studio-lower .tool-card-page:hover {
  color: var(--lower-ink);
  transform: translateY(-8px) rotate(-0.45deg);
  border-color: var(--lower-blue);
}

.studio-lower .plan-price-monitor,
.studio-lower .tool-link-btn,
.studio-lower .btn-ink,
.studio-lower .btn-shu {
  color: #fff;
  background: var(--lower-blue);
  border-color: var(--lower-blue);
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(95, 120, 220, 0.2);
}

.studio-lower .reason-row-item,
.studio-lower .flow-item {
  color: var(--lower-ink);
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(95, 120, 220, 0.22);
}

.studio-lower .reason-row-item:nth-child(2n),
.studio-lower .flow-item:nth-child(2n) {
  background: rgba(233, 229, 255, 0.72);
}

.studio-lower .meta-strip {
  color: var(--lower-ink);
  background: linear-gradient(90deg, var(--lower-cyan), var(--lower-mint));
  border-block-color: rgba(95, 120, 220, 0.24);
}

.studio-lower .contact-form input,
.studio-lower .contact-form textarea,
.studio-lower .contact-form select {
  color: var(--lower-ink);
  background: #fafdff;
  border-color: rgba(95, 120, 220, 0.27);
  border-radius: 4px 16px 4px 4px;
}

.studio-lower .contact-form input:focus,
.studio-lower .contact-form textarea:focus,
.studio-lower .contact-form select:focus {
  border-color: var(--lower-blue);
  box-shadow: 0 0 0 4px rgba(95, 120, 220, 0.12);
}

.studio-lower .cta-band {
  color: var(--lower-ink);
  background: linear-gradient(118deg, var(--lower-cyan) 0 67%, var(--lower-lime) 67%);
  border-block: 1px solid rgba(95, 120, 220, 0.32);
}

.studio-lower .cta-band p {
  color: var(--lower-muted);
}

.studio-lower .site-footer {
  color: var(--lower-ink);
  background: #e9f7fb;
  border-top-color: rgba(95, 120, 220, 0.25);
}

.studio-lower .site-footer a,
.studio-lower .footer-brand,
.studio-lower .footer-brand .wordmark {
  color: var(--lower-ink);
}

.studio-lower .site-footer .footer-col h3 {
  color: var(--lower-blue-deep);
}

.studio-lower .site-footer .footer-brand p,
.studio-lower .site-footer .footer-bottom,
.studio-lower .site-footer .footer-bottom a {
  color: #52647c;
}

.studio-lower .mission-label,
.studio-lower .rep-label,
.studio-lower .biz-en,
.studio-lower .legal-meta,
.studio-lower .toku-table th,
.studio-lower .spec-table th {
  color: #455873;
}

.studio-lower .mission-body,
.studio-lower .rep-body,
.studio-lower .biz-card p,
.studio-lower .legal-body p,
.studio-lower .legal-body li,
.studio-lower .legal-body td,
.studio-lower .toku-table td,
.studio-lower .spec-table td {
  color: #3f5066;
}

.studio-lower .legal-body {
  color: var(--lower-muted);
}

.studio-lower .legal-body h2 {
  margin-top: 2.4em;
  padding-top: 0.8em;
  border-top: 1px solid var(--lower-line);
  font-size: clamp(1.65rem, 3vw, 2.4rem);
}

@media (max-width: 820px) {
  .studio-lower .page-hero.salt-field {
    min-height: 580px;
    background:
      linear-gradient(155deg, rgba(255, 255, 255, 0.98) 0 58%, rgba(241, 249, 252, 0.85) 78%, rgba(235, 232, 250, 0.62) 100%),
      var(--lower-hero-image, url("/assets/capabilities-blueprint-studio-v1.webp"));
    background-position: center, 70% center;
    background-size: cover, cover;
    background-attachment: scroll;
  }

  body.studio-lower .page-hero h1 {
    font-size: clamp(3.8rem, 19vw, 6.5rem);
  }

  .studio-lower .plan-card,
  .studio-lower .biz-card,
  .studio-lower .tool-card-page,
  .studio-lower .custom-stat-card,
  .studio-lower .form-panel {
    box-shadow: 9px 11px 0 rgba(191, 238, 240, 0.65);
  }

  .studio-company .mission-strip::before,
  .studio-company .biz-sec::before,
  .studio-contact .contact-sec::before,
  .studio-web .reason-sec-wp::before,
  .studio-web .flow-sec::before,
  .studio-ai .custom-sec::before,
  .studio-ai .tools-sec-page::before,
  .studio-legal .legal-body::before {
    opacity: 0.4;
    background:
      linear-gradient(rgba(247, 251, 255, 0.9), rgba(247, 251, 255, 0.72)),
      var(--lower-section-image);
    background-position: center;
    background-size: cover;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-lower .plan-card,
  .studio-lower .biz-card,
  .studio-lower .tool-card-page {
    transition: none;
  }
}