/* NAKAJP Phase68 Fix4 — Japanese Quiet Luxury section accents
   Loaded after page/global CSS. Visual only; no form or tracking logic. */

:root {
  --jp-accent-overlay-light: rgba(252, 251, 248, .86);
  --jp-accent-overlay-dark: rgba(31, 28, 25, .68);
  --jp-accent-overlay-dark-soft: rgba(31, 28, 25, .52);
  --jp-section-border: rgba(37, 34, 31, .12);
}

section[id] { scroll-margin-top: 104px; }

/* Shared image-led section. Decorative images come from existing NAKAJP package assets. */
.jp-section-accent {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.jp-section-accent > .container,
.jp-section-accent > .wrap,
.jp-section-accent > [class*="container"] {
  position: relative;
  z-index: 2;
}
.jp-section-accent::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.jp-section-accent[data-jp-accent="wood"],
.jp-section-accent[data-jp-accent="light"],
.jp-section-accent[data-jp-accent="consultation"],
.jp-section-accent[data-jp-accent="material"] {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.jp-section-accent[data-jp-accent="wood"] {
  background-image: url("../images/quiet-luxury/jp-bg-wood.webp") !important;
}
.jp-section-accent[data-jp-accent="light"] {
  background-image: url("../images/quiet-luxury/jp-bg-light.webp") !important;
}
.jp-section-accent[data-jp-accent="consultation"] {
  /* Portrait photo removed: these sections already contain their own content/people.
     A neutral consultation surface prevents duplicate giant faces behind cards. */
  background-image:
    radial-gradient(circle at 14% 18%, rgba(184,148,77,.12), transparent 28%),
    radial-gradient(circle at 86% 76%, rgba(107,79,58,.08), transparent 30%),
    linear-gradient(135deg, #f7f1e8 0%, #eee4d7 100%) !important;
}
.jp-section-accent[data-jp-accent="material"] {
  background-image: url("../images/quiet-luxury/jp-bg-material.webp") !important;
}
.jp-section-accent[data-jp-tone="dark"]::before {
  background:
    linear-gradient(115deg, rgba(28, 25, 22, .82) 0%, rgba(28, 25, 22, .65) 48%, rgba(28, 25, 22, .44) 100%);
}
.jp-section-accent[data-jp-tone="light"]::before {
  background:
    linear-gradient(105deg, rgba(252, 251, 248, .95) 0%, rgba(252, 251, 248, .84) 50%, rgba(252, 251, 248, .58) 100%);
}
.jp-section-accent[data-jp-tone="dark"] {
  color: rgba(255,255,255,.88);
}
.jp-section-accent[data-jp-tone="dark"] h1,
.jp-section-accent[data-jp-tone="dark"] h2,
.jp-section-accent[data-jp-tone="dark"] h3,
.jp-section-accent[data-jp-tone="dark"] .eyebrow,
.jp-section-accent[data-jp-tone="dark"] .lead,
.jp-section-accent[data-jp-tone="dark"] p,
.jp-section-accent[data-jp-tone="dark"] li,
.jp-section-accent[data-jp-tone="dark"] small {
  color: inherit;
}
.jp-section-accent[data-jp-tone="dark"] .eyebrow {
  color: #e7d7b6;
}


.jp-section-accent[data-jp-tone="dark"] .card,
.jp-section-accent[data-jp-tone="dark"] .process-step,
.jp-section-accent[data-jp-tone="dark"] .workflow-step,
.jp-section-accent[data-jp-tone="dark"] .nakajp-depth-grid > * {
  color: var(--jp-sumi);
}



/* LP001 trust/platform: bright proof CTA remains a light reading surface
   inside the image-dark section. */
.brand-home-page .trust-platform-section .proof-cta h3 {
  color: var(--bh-sumi);
}
.jp-section-accent[data-jp-tone="dark"] .btn--ghost,
.jp-section-accent[data-jp-tone="dark"] .btn.secondary {
  border-color: rgba(255,255,255,.48);
  color: #fff;
  background: rgba(37,34,31,.24);
}

/* One purposeful deep section. */
.jp-section-accent[data-jp-accent="deep"] {
  background:
    radial-gradient(circle at 82% 12%, rgba(165,138,90,.20), transparent 34%),
    linear-gradient(145deg, #2d2a26 0%, #1f1d1a 100%) !important;
  color: rgba(255,255,255,.84);
}
.jp-section-accent[data-jp-accent="deep"] h1,
.jp-section-accent[data-jp-accent="deep"] h2,
.jp-section-accent[data-jp-accent="deep"] h3,
.jp-section-accent[data-jp-accent="deep"] p,
.jp-section-accent[data-jp-accent="deep"] li,
.jp-section-accent[data-jp-accent="deep"] small,
.jp-section-accent[data-jp-accent="deep"] .lead {
  color: inherit;
}
.jp-section-accent[data-jp-accent="deep"] .eyebrow {
  color: #d9c396;
}
.jp-section-accent[data-jp-accent="deep"] .card,
.jp-section-accent[data-jp-accent="deep"] .process-step,
.jp-section-accent[data-jp-accent="deep"] .workflow-step {
  background: rgba(255,255,255,.96);
  color: var(--jp-sumi);
  border-color: rgba(255,255,255,.22);
}

/* Visual Fix7: legacy global light-surface rules use !important.
   These exact dark-tone scopes restore readable copy without touching light cards. */
:is(
  .jp-section-accent[data-jp-tone="dark"],
  .jp-section-accent[data-jp-accent="deep"]
) :is(h1,h2,h3,h4,h5,h6,p,li,small,.lead,.section-lead,.eyebrow,.kicker,.section-kicker,strong,b) {
  color: rgba(255,253,248,.88) !important;
  text-shadow: none !important;
}

:is(
  .jp-section-accent[data-jp-tone="dark"],
  .jp-section-accent[data-jp-accent="deep"]
) .eyebrow {
  color: #e7d7b6 !important;
}


/* LP006 image-dark article sections place content directly under the section.
   Keep the overlay behind copy/cards instead of dimming the whole component. */
.seo-interior-page .jp-section-accent[data-jp-tone="dark"] > * {
  position: relative;
  z-index: 1;
}

.seo-interior-page #interior-japan .info-card {
  background: rgba(255, 253, 248, .94);
  border-color: rgba(255, 255, 255, .32);
}

:is(
  .jp-section-accent[data-jp-tone="dark"],
  .jp-section-accent[data-jp-accent="deep"]
) :is(
  .card,
  .step,
  .process-step,
  .workflow-step,
  .solution-card,
  .risk-card,
  .check-card,
  .info-card,
  .value-card,
  .nakajp-depth-grid > *,
  .lp002-method-steps,
  .lp002d-method-panel,
  .workflow-quote,
  .brand-home-page .trust-platform-section details.more-standards,
  .brand-home-page .trust-platform-section .standard-list--cards > li,
  .brand-home-page .trust-platform-section .proof-cta
) {
  color: var(--jp-sumi) !important;
}

:is(
  .jp-section-accent[data-jp-tone="dark"],
  .jp-section-accent[data-jp-accent="deep"]
) :is(
  .card,
  .step,
  .process-step,
  .workflow-step,
  .solution-card,
  .risk-card,
  .check-card,
  .info-card,
  .value-card,
  .nakajp-depth-grid > *,
  .lp002-method-steps,
  .lp002d-method-panel,
  .workflow-quote,
  .brand-home-page .trust-platform-section details.more-standards,
  .brand-home-page .trust-platform-section .standard-list--cards > li,
  .brand-home-page .trust-platform-section .proof-cta
) :is(h1,h2,h3,h4,h5,h6,p,li,small,span,strong,b,summary) {
  color: inherit !important;
}

/* Subtle washi/line texture without an image request. */
.jp-section-accent[data-jp-accent="texture"] {
  background-color: var(--jp-ivory) !important;
}
.jp-section-accent[data-jp-accent="texture"]::before {
  opacity: .55;
  background:
    linear-gradient(90deg, transparent 0 11%, rgba(121,95,72,.06) 11% 11.08%, transparent 11.08% 100%),
    linear-gradient(0deg, transparent 0 68%, rgba(121,95,72,.05) 68% 68.08%, transparent 68.08% 100%),
    radial-gradient(circle at 18% 24%, rgba(165,138,90,.08), transparent 28%);
  background-size: 220px 220px, 260px 260px, 100% 100%;
}

/* Brighter forms: conversion surfaces remain calm and readable. */
.section-rhythm--form,
.form-section,
.slide-form {
  background:
    linear-gradient(180deg, #fbfaf7 0%, #f3efe8 100%) !important;
  border-top: 1px solid var(--jp-section-border);
}
.section-rhythm--form form,
.form-section form,
.slide-form form {
  background: rgba(255,255,255,.96);
  border: 1px solid var(--jp-line);
  box-shadow: 0 18px 54px rgba(37,34,31,.08);
}

/* “Tình huống thường gặp” is not presented as a completed project. */
.jp-situation-proof {
  background: var(--jp-paper) !important;
  border-block: 1px solid var(--jp-line);
}
.jp-situation-proof .jp-situation-proof__head {
  max-width: 760px;
  margin-bottom: 32px;
}
.jp-situation-proof .jp-situation-proof__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  border-top: 1px solid var(--jp-line);
  border-bottom: 1px solid var(--jp-line);
}
.jp-situation-proof .jp-situation-proof__item {
  padding: 24px 22px;
  min-width: 0;
  border-right: 1px solid var(--jp-line);
}
.jp-situation-proof .jp-situation-proof__item:last-child { border-right: 0; }
.jp-situation-proof .jp-situation-proof__item small {
  display: block;
  margin-bottom: 10px;
  color: var(--jp-hinoki);
  font-weight: 600;
  letter-spacing: .06em;
}
.jp-situation-proof .jp-situation-proof__item h3 {
  margin: 0 0 10px;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
}
.jp-situation-proof .jp-situation-proof__item p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.7;
}

/* Style picker: assets are not distinct enough yet, so media remains hidden. */
body.lp004 .lp004-style-cover,
body.lp004 .lp004-style-album,
body.lp004 [data-gallery-dialog],
body.lp004 .lp004-style-album-meta {
  display: none !important;
}
body.lp004 .lp004-style-detail {
  grid-template-columns: minmax(0, 1fr) !important;
}
body.lp004 #style-gallery.is-change-style-target {
  animation: jp-gallery-focus 900ms var(--jp-ease) both;
}
@keyframes jp-gallery-focus {
  0% { box-shadow: inset 0 0 0 0 rgba(165,138,90,0); }
  38% { box-shadow: inset 0 0 0 4px rgba(165,138,90,.22); }
  100% { box-shadow: inset 0 0 0 0 rgba(165,138,90,0); }
}
body.lp004 .lp004-style-card.is-active,
body.lp004 .lp004-style-card[aria-pressed="true"] {
  border-color: var(--jp-brass);
  background: #fffdf9;
  box-shadow: 0 0 0 3px rgba(165,138,90,.14), 0 18px 42px rgba(37,34,31,.10);
}

/* Keep navigation/CTA on one line where desktop width allows. */
@media (min-width: 1120px) {
  .site-header nav a,
  .lp004-nav a,
  .header-nav a,
  .main-nav a {
    white-space: nowrap;
  }
  .site-header .btn,
  .lp004-header-cta .btn,
  .header-contact .btn {
    white-space: nowrap;
  }
}

/* Image-backed sections should not make text columns too wide. */
.jp-section-accent .section-head,
.jp-section-accent .section-header,
.jp-section-accent .content-copy,
.jp-section-accent .article-copy {
  max-width: 760px;
}

/* Mobile */
@media (max-width: 980px) {
  section[id] { scroll-margin-top: 88px; }
  .jp-section-accent[data-jp-accent="wood"],
  .jp-section-accent[data-jp-accent="light"],
  .jp-section-accent[data-jp-accent="consultation"],
  .jp-section-accent[data-jp-accent="material"] {
    background-position: 58% center;
  }
  .jp-section-accent[data-jp-tone="dark"]::before {
    background: linear-gradient(180deg, rgba(28,25,22,.82), rgba(28,25,22,.64));
  }
  .jp-section-accent[data-jp-tone="light"]::before {
    background: linear-gradient(180deg, rgba(252,251,248,.94), rgba(252,251,248,.78));
  }
  .jp-situation-proof .jp-situation-proof__grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .jp-situation-proof .jp-situation-proof__item:nth-child(2) { border-right: 0; }
  .jp-situation-proof .jp-situation-proof__item:nth-child(-n+2) { border-bottom: 1px solid var(--jp-line); }
}
@media (max-width: 560px) {
  .jp-section-accent[data-jp-accent="wood"],
  .jp-section-accent[data-jp-accent="light"],
  .jp-section-accent[data-jp-accent="consultation"],
  .jp-section-accent[data-jp-accent="material"] {
    background-position: 62% center;
  }
  .jp-situation-proof .jp-situation-proof__grid { grid-template-columns: 1fr; }
  .jp-situation-proof .jp-situation-proof__item {
    border-right: 0;
    border-bottom: 1px solid var(--jp-line);
    padding: 20px 0;
  }
  .jp-situation-proof .jp-situation-proof__item:last-child { border-bottom: 0; }
  .lp004-style-actions { flex-direction: column; align-items: stretch; }
  .lp004-style-actions .btn { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  body.lp004 #style-gallery.is-change-style-target { animation: none !important; }
}

/* Fix4 responsive containment — prevent intrinsic media/decorative layers from widening the viewport. */
.brand-home-page .who-layout > *,
.brand-home-page .showroom-layout > *,
.brand-home-page .foundation-layout > *,
.brand-home-page .spirit-layout > *,
.brand-home-page .team-intro > *,
.brand-home-page .form-shell > * {
  min-width: 0;
}

.brand-home-page .who-media,
.brand-home-page .showroom-media,
.brand-home-page .who-media img,
.brand-home-page .showroom-media img {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.quote-review {
  overflow-x: clip;
}

@media (min-width: 901px) and (max-width: 1100px) {
  .brand-home-page .header-inner {
    gap: 10px !important;
  }

  .brand-home-page .nav {
    gap: 12px;
    font-size: 13px;
  }

  .brand-home-page .header-cta {
    gap: 6px !important;
  }

  .brand-home-page .header-cta .btn {
    padding-inline: 11px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }
}