/* NAKAJP consolidated global bundle: nakajp-global-accent-regression.css
 * Phase 4.6 safe cascade consolidation.
 * Source order preserved exactly.
 */


/* ===== BEGIN SOURCE: nakajp-section-accent.css ===== */
/* 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;
  }
}

/* PHASE 2.5 — scoped dark timeline polish for LP003A */
.page-thiet-ke-truoc-khi-xay #workflow .workflow-title {
  text-align: left;
  margin-bottom: 34px;
}

.page-thiet-ke-truoc-khi-xay #workflow .workflow-title h2 {
  display: inline;
  background: none !important;
  box-shadow: none !important;
  color: #f7f1e8 !important;
  text-shadow: none !important;
}

.page-thiet-ke-truoc-khi-xay #workflow .workflow-title p {
  margin-top: 14px;
  color: rgba(255, 255, 255, .72) !important;
}

.page-thiet-ke-truoc-khi-xay #workflow .ads-ai-content-head-split {
  align-items: start;
  gap: clamp(28px, 4vw, 56px);
}

.page-thiet-ke-truoc-khi-xay #workflow figcaption,
.page-thiet-ke-truoc-khi-xay #workflow .image-caption-main {
  color: rgba(255, 255, 255, .76) !important;
}

.page-thiet-ke-truoc-khi-xay #workflow .image-caption-note {
  color: rgba(255, 255, 255, .55) !important;
}

.page-thiet-ke-truoc-khi-xay #workflow .workflow-timeline {
  margin-top: 44px;
  margin-bottom: 46px;
}

.page-thiet-ke-truoc-khi-xay #workflow .workflow-timeline::before {
  width: 2px;
  background: rgba(190, 156, 86, .72);
}

.page-thiet-ke-truoc-khi-xay #workflow .workflow-step {
  margin-bottom: 20px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: 14px;
  background: rgba(247, 242, 233, .95) !important;
  color: #342c26 !important;
  box-shadow: none !important;
}

.page-thiet-ke-truoc-khi-xay #workflow .workflow-step::before {
  top: 20px;
  width: 14px;
  height: 14px;
  border-width: 2px;
  background: #5d4937;
  border-color: #c5a564;
}

.page-thiet-ke-truoc-khi-xay #workflow .workflow-step h3 {
  margin: 0 0 6px;
  color: #342c26 !important;
}

.page-thiet-ke-truoc-khi-xay #workflow .workflow-step p {
  margin: 0;
  color: #65594f !important;
  line-height: 1.65;
}

.page-thiet-ke-truoc-khi-xay #workflow .workflow-quote {
  background: rgba(238, 229, 214, .95) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .16) !important;
}

.page-thiet-ke-truoc-khi-xay #workflow .workflow-quote p {
  color: #4b4037 !important;
}

@media (max-width: 768px) {
  .page-thiet-ke-truoc-khi-xay #workflow .mobile-compact-section {
    color: rgba(255, 255, 255, .86);
  }

  .page-thiet-ke-truoc-khi-xay #workflow .mobile-compact-section h2 {
    color: #f7f1e8 !important;
  }

  .page-thiet-ke-truoc-khi-xay #workflow .mobile-compact-intro {
    color: rgba(255, 255, 255, .72) !important;
  }

  .page-thiet-ke-truoc-khi-xay #workflow .mobile-compact-steps li {
    background: rgba(247, 242, 233, .95) !important;
    color: #4b4037 !important;
    border-color: rgba(255, 255, 255, .14) !important;
  }
}
/* ===== END SOURCE: nakajp-section-accent.css ===== */


/* ===== BEGIN SOURCE: nakajp-visual-regression-fix5.css ===== */
/* NAKAJP Phase68 visual regression fix5
   Scoped visual rules only. No form, attribution, tracking or submit behavior. */

/* Footer horizontal logo normalization across the page families in this package. */
.brand-home-page .footer-brand-col,
.lp002 .footer-brand-col,
.nakajp-lp003 .footer-brand-col,
.lp004 .footer-brand-col,
.quote-review .footer-brand-col,
.seo-interior-page .footer-brand-col {
  min-width:0;
}

.brand-home-page .footer-logo,
.lp002 .footer-logo,
.nakajp-lp003 .footer-logo,
.lp004 .footer-logo,
.quote-review .footer-logo,
.seo-interior-page .footer-logo {
  display:block;
  width:min(172px, 100%);
  max-width:172px;
  height:auto;
  max-height:64px;
  object-fit:contain;
  object-position:left center;
  flex:0 0 auto;
  margin:0 0 18px;
  filter:brightness(0) invert(1);
}

/* Keep fixed contact controls clear of mobile form actions. */
.brand-home-page .form-section,
.lp002 .form-section,
.nakajp-lp003 #form,
.lp004 .form-section,
.quote-review .slide-form,
.seo-interior-page .form-section {
  scroll-margin-top:96px;
}

@media (max-width:640px) {
  .brand-home-page .footer-logo,
  .lp002 .footer-logo,
  .nakajp-lp003 .footer-logo,
  .lp004 .footer-logo,
  .quote-review .footer-logo,
  .seo-interior-page .footer-logo {
    width:min(156px, 100%);
    max-width:156px;
    max-height:56px;
  }
}


/* Component: mobile sticky guard across approved LP page families.
   Honor the existing JS aria-hidden state while a lead form is visible. */
@media (max-width: 980px) {
  .brand-home-page .mobile-sticky[aria-hidden="true"],
  .lp002 .mobile-sticky[aria-hidden="true"],
  .lp002 .mobile-sticky-cta[aria-hidden="true"],
  .nakajp-lp003 .mobile-sticky-cta[aria-hidden="true"],
  .lp004 .mobile-sticky[aria-hidden="true"],
  .quote-review .mobile-sticky-cta[aria-hidden="true"],
  .seo-interior-page .mobile-sticky[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* Form UX — all NAKAJP lead forms
   Keeps the submit action clear of the card border and mobile safe area. */
form[data-nakajp-lead-form] {
  padding-block-end: max(24px, env(safe-area-inset-bottom));
}

form[data-nakajp-lead-form] button[type="submit"],
form[data-nakajp-lead-form] .form-submit {
  margin-block-start: 8px;
  margin-block-end: 4px;
  min-height: 52px;
}

@media (max-width: 767px) {
  form[data-nakajp-lead-form] {
    padding-block-end: max(28px, env(safe-area-inset-bottom));
  }

  form[data-nakajp-lead-form] button[type="submit"],
  form[data-nakajp-lead-form] .form-submit {
    min-height: 56px;
  }
}
/* ===== END SOURCE: nakajp-visual-regression-fix5.css ===== */