/*
 * TOWA AI neutral dark palette
 * ---------------------------------------------
 * Site-wide rule requested for public-facing pages:
 * - large dark / navy presentation modules => #555555
 * - footer => #222222 (footer.css remains the source of its layout)
 *
 * This file is intentionally loaded after each page's own stylesheet so the
 * visual palette stays consistent without rewriting functional UI controls,
 * video surfaces, chat widgets or button states.
 */
:root {
    --tai-neutral-module: #555555;
    --tai-neutral-footer: #222222;
}

/* Home */
.tai-value-section,
.tai-final-cta__inner {
    background: var(--tai-neutral-module) !important;
    background-image: none !important;
}

/* Shared/static page heroes that are designed as dark presentation blocks. */
.policy-hero,
.solution-hero,
.solution-input-hero,
.pricing-hero,
.diagnosis-hero,
.diagnosis-complete-hero,
.ts-hero,
.ts-complete-hero,
.dxai-hero,
.dxai-input-hero,
.dxai-complete-hero,
.rs-diagnosis-hero,
.rs-complete-hero,
.ng-campaign-hero,
.tai-cases-hero,
.tai-case-detail-hero,
.tai-service-hero {
    background: var(--tai-neutral-module) !important;
    background-image: none !important;
}

/* Website report */
.website-report-page .report-hero,
.website-report-page .report-plan-block {
    background: var(--tai-neutral-module) !important;
    background-image: none !important;
}

/* Service overview + shared service detail pages */
.tai-service-index-page .tai-page-hero,
.tai-service-detail-page .tai-service-hero,
.tai-service-detail-page .tai-home-cta,
.tai-service-card__media,
.tai-service-card:nth-child(2n) .tai-service-card__media,
.tai-service-card:nth-child(3n) .tai-service-card__media {
    background: var(--tai-neutral-module) !important;
    background-image: none !important;
}

/* AI Staff */
.tai-ai-staff-journey,
.tai-ai-staff-trust,
.tai-ai-staff-contact__inner {
    background: var(--tai-neutral-module) !important;
    background-image: none !important;
}

/* AI development / AI system */
.tai-ai-dev-philosophy,
.tai-ai-dev-contact__card {
    background: var(--tai-neutral-module) !important;
    background-image: none !important;
}

/* AI Creative */
.tai-ai-creative-system,
.tai-ai-creative-showcase__visual,
.tai-ai-creative-reasons,
.tai-ai-creative-contact__card {
    background: var(--tai-neutral-module) !important;
    background-image: none !important;
}

/* DX */
.tai-dx-flow,
.tai-dx-contact__card {
    background: var(--tai-neutral-module) !important;
    background-image: none !important;
}

/* Immersive AI Experience */
.tai-immersive-section--dark,
.tai-immersive-contact__card {
    background: var(--tai-neutral-module) !important;
    background-image: none !important;
}

/* Cases / industry presentations */
.tai-industry-experience-section,
.re-property-summary,
.re-pivot-card,
.re-final-cta,
.re-life-gallery {
    background: var(--tai-neutral-module) !important;
    background-image: none !important;
}

/* Keep cards readable inside a neutral-dark section without reintroducing navy. */
.tai-industry-experience-card,
.re-life-card {
    background: rgba(255, 255, 255, .055) !important;
    background-image: none !important;
}

/* AI Staff demo closing presentation card. */
.asd-final-card {
    background: var(--tai-neutral-module) !important;
    background-image: none !important;
}

/* Shared legacy full-width service video surround (not the video element). */
.tai-service-video-section {
    background: var(--tai-neutral-module) !important;
}

/* -------------------------------------------------------------------------
 * Natural heading wrapping
 * -------------------------------------------------------------------------
 * Avoid narrow title boxes and balanced/forced wrapping on desktop. Let the
 * browser use the available container width, while keeping body copy readable.
 * Mobile layouts still wrap naturally at the viewport edge.
 */
@media (min-width: 992px) {
    .tai-section-heading,
    .pricing-section-head,
    .solution-section-heading,
    .ng-section-heading,
    .section-heading,
    .service-section-head,
    .rs-section-heading,
    .report-section-heading,
    .diagnosis-section-heading,
    .tai-ai-dev-heading,
    .tai-ai-staff-heading,
    .tai-immersive-section-heading,
    .tai-ai-creative-heading,
    .tai-dx-heading,
    .re-heading:not(.re-heading--split) {
        max-width: none !important;
        width: 100%;
    }

    .tai-ai-dev-heading--wide,
    .tai-ai-staff-heading--wide,
    .tai-ai-creative-heading--wide,
    .tai-dx-heading--wide {
        max-width: none !important;
    }

    .tai-section-heading > p:last-child,
    .pricing-section-head > p:last-child,
    .solution-section-heading > p:last-child,
    .ng-section-heading > p:last-child,
    .section-heading > p:last-child,
    .service-section-head > p:last-child,
    .rs-section-heading > p:last-child,
    .report-section-heading > p:last-child,
    .diagnosis-section-heading > p:last-child,
    .tai-ai-dev-heading > p:last-child,
    .tai-ai-staff-heading > p:last-child,
    .tai-immersive-section-heading > p:last-child,
    .tai-ai-creative-heading > p:last-child,
    .tai-dx-heading > p:last-child,
    .re-heading:not(.re-heading--split) > p:last-child {
        max-width: 920px;
    }

    .tai-section-heading.text-center > p:last-child,
    .pricing-section-head.text-center > p:last-child,
    .solution-section-heading.text-center > p:last-child,
    .ng-section-heading.text-center > p:last-child,
    .section-heading.text-center > p:last-child,
    .service-section-head.text-center > p:last-child,
    .rs-section-heading.text-center > p:last-child,
    .report-section-heading.text-center > p:last-child,
    .diagnosis-section-heading.text-center > p:last-child,
    .re-heading--center > p:last-child {
        margin-left: auto;
        margin-right: auto;
    }

    /* This real-estate heading was previously only a few characters short of
       fitting on one line. Slightly reduce its desktop scale instead of forcing
       an artificial break. */
    .re-capabilities-section .re-heading h2 {
        font-size: clamp(2rem, 3.65vw, 3.3rem);
    }
}

/* Prefer natural, visually pleasant wrapping instead of line balancing that
   can create short orphan fragments such as "か？" or split AIスタッフ. */
.tai-section-heading h2,
.pricing-section-head h2,
.solution-section-heading h2,
.ng-section-heading h2,
.section-heading h2,
.service-section-head h2,
.rs-section-heading h2,
.report-section-heading h2,
.diagnosis-section-heading h2,
.tai-ai-dev-heading h2,
.tai-ai-staff-heading h2,
.tai-immersive-section-heading h2,
.tai-ai-creative-heading h2,
.tai-dx-heading h2,
.re-heading h2 {
    text-wrap: pretty !important;
    overflow-wrap: normal;
}

@supports (word-break: auto-phrase) {
    html:lang(ja) .tai-section-heading h2,
    html:lang(ja) .pricing-section-head h2,
    html:lang(ja) .solution-section-heading h2,
    html:lang(ja) .ng-section-heading h2,
    html:lang(ja) .section-heading h2,
    html:lang(ja) .service-section-head h2,
    html:lang(ja) .rs-section-heading h2,
    html:lang(ja) .report-section-heading h2,
    html:lang(ja) .diagnosis-section-heading h2,
    html:lang(ja) .tai-ai-dev-heading h2,
    html:lang(ja) .tai-ai-staff-heading h2,
    html:lang(ja) .tai-immersive-section-heading h2,
    html:lang(ja) .tai-ai-creative-heading h2,
    html:lang(ja) .tai-dx-heading h2,
    html:lang(ja) .re-heading h2,
    html:lang(zh-cn) .tai-section-heading h2,
    html:lang(zh-cn) .pricing-section-head h2,
    html:lang(zh-cn) .solution-section-heading h2,
    html:lang(zh-cn) .ng-section-heading h2,
    html:lang(zh-cn) .section-heading h2,
    html:lang(zh-cn) .service-section-head h2,
    html:lang(zh-cn) .rs-section-heading h2,
    html:lang(zh-cn) .report-section-heading h2,
    html:lang(zh-cn) .diagnosis-section-heading h2,
    html:lang(zh-cn) .tai-ai-dev-heading h2,
    html:lang(zh-cn) .tai-ai-staff-heading h2,
    html:lang(zh-cn) .tai-immersive-section-heading h2,
    html:lang(zh-cn) .tai-ai-creative-heading h2,
    html:lang(zh-cn) .tai-dx-heading h2,
    html:lang(zh-cn) .re-heading h2 {
        word-break: auto-phrase;
    }
}

/* -------------------------------------------------------------------------
 * Global small heading / eyebrow text palette
 * -------------------------------------------------------------------------
 * User-requested global rule: the small labels above page/section headings use
 * a consistent neutral gray instead of blue/cyan or near-white variants.
 * Dark surfaces use the same neutral-gray system at a lighter value so the
 * label remains legible against #555555/video backgrounds.
 */
:root {
    --tai-small-label: #6b7280;
    --tai-small-label-on-dark: #d1d5db;
}

.tai-kicker,
.company-kicker,
.policy-kicker,
.ts-kicker,
.rs-kicker,
.solution-kicker,
.diagnosis-kicker,
.faq-kicker,
.re-kicker,
.recruitment-kicker,
.report-kicker,
.report-processing__kicker,
.asd-kicker,
.dxai-scope-kicker,
.material-kicker,
.meet-kicker,
.modal-kicker,
.ng-campaign-kicker,
.partner-kicker,
.pricing-kicker,
.sitemap-kicker,
.tai-ai-creative-kicker,
.tai-ai-dev-kicker,
.tai-ai-staff-kicker,
.tai-dx-kicker,
.tai-immersive-kicker,
.dxai-eyebrow,
.solution-eyebrow,
.re-eyebrow,
.report-eyebrow,
.ng-campaign-eyebrow,
.asd-eyebrow,
.towa-seo-eyebrow,
.os-eyebrow,
.ts-eyebrow,
.inquiry-final-eyebrow,
.tai-nav-dropdown__group > p {
    color: var(--tai-small-label) !important;
}

/* Neutral light gray on dark/video surfaces: still gray, but readable. */
.tai-ai-creative-kicker--light,
.tai-ai-dev-kicker--light,
.tai-ai-staff-kicker--light,
.tai-dx-kicker--light,
.tai-ai-dev-hero .tai-ai-dev-kicker,
.tai-ai-staff-hero .tai-ai-staff-kicker,
.tai-dx-video-hero .tai-dx-kicker,
.tai-immersive-video-hero .tai-immersive-kicker,
.tai-ai-creative-video-hero .tai-ai-creative-kicker,
.tai-value-section .tai-kicker,
.tai-final-cta .tai-kicker,
.company-vision-card--dark .company-kicker,
.company-contact-panel > p:first-child {
    color: var(--tai-small-label-on-dark) !important;
}

/* Other compact section/meta labels (form labels are intentionally excluded). */
.ts-section-label,
.ng-feature-label,
.pricing-side-label {
    color: var(--tai-small-label) !important;
}

.tai-ai-creative-hero__stack-label,
.tai-ai-dev-hero__signal-label,
.tai-dx-video-hero__scope-label,
.tai-industry-detail-hero__label,
.ng-campaign-free-label,
.re-pivot-card__label {
    color: var(--tai-small-label-on-dark) !important;
}