/* =========================================================
Phase 57 — Global Brand Contrast / Section Break / Button Spacing Fix
Scope: all NAKAJP landing pages. Tracking/form logic untouched.

Reason:
Phase56 used broad nth-of-type background overrides. On some pages, dark/image
sections kept white typography but received a light background, causing text
to disappear. Phase57 keeps the section rhythm guardrail but only applies
backgrounds through explicit section classes / known page roles.
========================================================= */
:root{
  --njp-section-white:#FFFDF8;
  --njp-section-warm:#F4EFE6;
  --njp-section-cream:#F8F3EA;
  --njp-section-surface:#FCFAF6;
  --njp-section-card:#FFFFFF;
  --njp-section-line:rgba(107,79,58,.16);
  --njp-text-strong:#211D19;
  --njp-text:#3B3028;
  --njp-text-muted:#6F6257;
  --njp-brand-brown:#6B4F3A;
  --njp-brand-gold:#B8944D;
  --njp-brand-dark:#2B211A;
}

/* Section rhythm guardrail — spacing/divider only, no blind background override */
main > section:not([class*="hero"]):not(.mobile-sticky):not(.mobile-sticky-cta){
  padding-top:max(64px, var(--section-pad-y, 64px));
  padding-bottom:max(64px, var(--section-pad-y, 64px));
}
main > section:not([class*="hero"]) + section:not([class*="hero"]){
  border-top:1px solid var(--njp-section-line);
}

/* Explicit light section backgrounds */
.section--white,
.section-white,
.section--paper{
  background:var(--njp-section-white)!important;
  color:var(--njp-text-strong);
}
.section--warm,
.section--soft,
.section-soft{
  background:linear-gradient(180deg,var(--njp-section-warm),#FFF9F0)!important;
  color:var(--njp-text-strong);
}
.section--surface,
.section--proof,
.nakajp-depth-section{
  background:var(--njp-section-surface)!important;
  color:var(--njp-text-strong);
}
.section--bordered,
.section--soft-divider{
  border-top:1px solid var(--njp-section-line)!important;
  border-bottom:1px solid rgba(107,79,58,.08);
}
.section--form,
.form-section,
.slide-form,
#lead-form,
#form,
#form-dang-ky,
#consultation-form{
  background:linear-gradient(180deg,#F2EADD,#FFF9F0)!important;
  border-top:1px solid rgba(107,79,58,.20)!important;
  color:var(--njp-text-strong);
}

/* Known dark / image sections must keep dark surface + light typography */
.lp002-philosophy,
.lp004-principles,
.dark-section,
.after{
  background:linear-gradient(135deg,#2B211A,#51402F)!important;
  color:#FFFDF8!important;
}
.lp002-philosophy h1,
.lp002-philosophy h2,
.lp002-philosophy h3,
.lp002-philosophy h4,
.lp004-principles h1,
.lp004-principles h2,
.lp004-principles h3,
.lp004-principles h4,
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.after h1,
.after h2,
.after h3,
.after h4{
  color:#FFFDF8!important;
}
.lp002-philosophy p,
.lp002-philosophy li,
.lp004-principles p,
.lp004-principles li,
.dark-section p,
.dark-section li,
.after p,
.after li{
  color:rgba(255,253,248,.82)!important;
}
.lp004-principles .eyebrow,
.lp002-philosophy .eyebrow,
.dark-section .eyebrow{
  color:#E8D7A8!important;
}

/* Footer/dark contact surfaces */
.nakajp-dark-footer,
.site-footer{
  background:#1F1A16!important;
  color:#FFFDF8!important;
}
.nakajp-dark-footer h1,
.nakajp-dark-footer h2,
.nakajp-dark-footer h3,
.site-footer h1,
.site-footer h2,
.site-footer h3{
  color:#FFFDF8!important;
}
.nakajp-dark-footer p,
.nakajp-dark-footer span,
.nakajp-dark-footer a,
.site-footer p,
.site-footer span,
.site-footer a{
  color:rgba(255,253,248,.82)!important;
}

/* Page role background rhythm: explicit, not blind */
.lp004 .lp004-gallery,
.lp004 .lp004-style-system,
.lp004 .lp004-compare,
.lp004 .lp004-faq,
.lp004 .lp004-related{
  background:var(--njp-section-warm)!important;
  color:var(--njp-text-strong)!important;
}
.lp004 .lp004-style-fit,
.lp004 .lp004-style-gallery,
.lp004 .lp004-editorial,
.lp004 .lp004-process{
  background:var(--njp-section-white)!important;
  color:var(--njp-text-strong)!important;
}
.lp002 .lp002-signs,
.lp002 .lp002-method,
.lp002 .lp002-trust,
.lp002 .lp002-faq,
.lp002 .lp002-process{
  background:var(--njp-section-white)!important;
  color:var(--njp-text-strong)!important;
}
.lp002 .lp002-home-map,
.lp002 .lp002-fit,
.lp002 .lp002-variant-insight{
  background:linear-gradient(180deg,var(--njp-section-warm),#FFF9F0)!important;
  color:var(--njp-text-strong)!important;
}
.seo-interior-page .article-section:nth-of-type(odd),
.seo-interior-page .quick-toc,
.seo-interior-page .related{
  background:var(--njp-section-white);
}
.seo-interior-page .article-section:nth-of-type(even){
  background:var(--njp-section-warm);
}

/* Text contrast guardrail for light sections */
.section--white h1,.section--white h2,.section--white h3,
.section--warm h1,.section--warm h2,.section--warm h3,
.section--surface h1,.section--surface h2,.section--surface h3,
.section-white h1,.section-white h2,.section-white h3,
.section-soft h1,.section-soft h2,.section-soft h3,
.lp004-gallery h1,.lp004-gallery h2,.lp004-gallery h3,
.lp004-style-fit h1,.lp004-style-fit h2,.lp004-style-fit h3,
.lp004-style-system h1,.lp004-style-system h2,.lp004-style-system h3,
.lp004-style-gallery h1,.lp004-style-gallery h2,.lp004-style-gallery h3,
.lp004-editorial h1,.lp004-editorial h2,.lp004-editorial h3,
.lp004-compare h1,.lp004-compare h2,.lp004-compare h3,
.lp004-process h1,.lp004-process h2,.lp004-process h3,
.lp004-faq h1,.lp004-faq h2,.lp004-faq h3,
.lp004-related h1,.lp004-related h2,.lp004-related h3{
  color:var(--njp-text-strong)!important;
}
.section--white p,.section--white li,
.section--warm p,.section--warm li,
.section--surface p,.section--surface li,
.section-white p,.section-white li,
.section-soft p,.section-soft li{
  color:var(--njp-text-muted);
}

/* Cards must stay readable on light backgrounds */
.card,
[class*="card"],
[class*="proof-card"],
[class*="value-card"],
[class*="feature-card"],
[class*="risk-card"],
[class*="style-card"],
[class*="story"],
[class*="note"]{
  border-color:rgba(107,79,58,.15);
}
.section--white .card,
.section-white .card,
.section--white [class*="card"],
.section-white [class*="card"],
.section--warm .card,
.section-soft .card,
.lp004-gallery [class*="card"],
.lp004-style-fit [class*="card"],
.lp004-style-system [class*="card"],
.lp002 [class*="card"]{
  box-shadow:0 14px 36px rgba(37,33,29,.07);
}

/* CTA / button spacing guardrail */
.hero-actions,
.lp002-hero-actions,
.btn-row,
.button-group,
.lp-actions,
.section-actions,
.section-cta,
.card-actions,
.form-actions,
.sticky-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
}
.hero-actions,
.lp002-hero-actions{
  margin-top:24px;
}
.section-actions,
.section-cta,
.lp-actions,
.button-group{
  margin-top:24px;
}
.grid + .section-actions,
[class*="grid"] + .section-actions,
[class*="cards"] + .section-actions,
[class*="list"] + .section-actions,
[class*="grid"] + .section-cta,
[class*="cards"] + .section-cta{
  margin-top:28px;
}
.card-actions,
[class*="card"] .card-actions{
  margin-top:18px;
}
p + .btn,
p + .btn-row,
p + .section-actions,
p + .section-cta,
.lead + .btn-row,
.lead + .hero-actions,
.lead + .lp002-hero-actions{
  margin-top:20px;
}
form .btn,
.form-field.full .btn{
  margin-top:8px;
}
.internal-links .section-actions{
  margin-top:0;
}

/* Hero CTA spacing without color override */
.lp002-hero .lp002-hero-actions,
.lp004-hero .hero-actions,
.hero .hero-actions{
  margin-top:24px;
}

/* Keep buttons readable */
.btn--gold,
.btn-primary,
.btn.btn--primary,
a[data-cta][class*="primary"]{
  background:var(--njp-brand-brown);
  color:#FFFDF8;
}
.btn--ghost,
.btn.btn--ghost,
.btn-secondary,
.btn-outline{
  color:var(--njp-text-strong);
  border-color:rgba(107,79,58,.28);
  background:rgba(255,253,248,.78);
}
.lp002-hero .btn--ghost,
.lp004-hero .btn--ghost,
.hero .btn--ghost{
  color:#FFFDF8;
  border-color:rgba(255,255,255,.54);
  background:rgba(255,255,255,.10);
}

@media (max-width:900px){
  main > section:not([class*="hero"]):not(.mobile-sticky):not(.mobile-sticky-cta){
    padding-top:max(44px, var(--section-pad-y-mobile, 44px));
    padding-bottom:max(44px, var(--section-pad-y-mobile, 44px));
  }
  .grid,
  [class*="grid"]{
    gap:max(16px, var(--grid-gap-mobile, 16px));
  }
  .card,
  [class*="card"]{
    padding:min(24px, max(18px, var(--card-pad-mobile, 18px)));
  }
  .hero-actions,
  .lp002-hero-actions{
    margin-top:20px;
  }
  .section-actions,
  .section-cta,
  .lp-actions,
  .button-group{
    margin-top:20px;
  }
  .grid + .section-actions,
  [class*="grid"] + .section-actions,
  [class*="cards"] + .section-actions,
  [class*="list"] + .section-actions,
  [class*="grid"] + .section-cta,
  [class*="cards"] + .section-cta{
    margin-top:22px;
  }
  .card-actions,
  [class*="card"] .card-actions{
    margin-top:18px;
  }
}


/* =========================================================
Phase 58 — Safe brand contrast patch
Fix: no same-background/same-text issue after Phase57.
Palette follows NAKAJP main site visual direction: warm ivory, brown, gold, dark sumi.
========================================================= */
:root{
  --njp-brand-ivory:#F8F3EA;
  --njp-brand-cream:#EFE6DA;
  --njp-brand-paper:#FFFDF8;
  --njp-brand-brown:#6B4F3A;
  --njp-brand-brown-dark:#3E2E22;
  --njp-brand-gold:#B8944D;
  --njp-brand-sumi:#231F1A;
}

/* Light surfaces must always carry dark copy */
.section--white,
.section-white,
.section--paper,
.section--warm,
.section--soft,
.section-soft,
.section--surface,
.section--proof,
.nakajp-depth-section,
.form-section,
.slide-form,
#consultation-form,
#lead-form,
#form{
  color:var(--njp-brand-sumi)!important;
}
.section--white h1,.section--white h2,.section--white h3,.section--white h4,
.section-white h1,.section-white h2,.section-white h3,.section-white h4,
.section--warm h1,.section--warm h2,.section--warm h3,.section--warm h4,
.section--soft h1,.section--soft h2,.section--soft h3,.section--soft h4,
.section-soft h1,.section-soft h2,.section-soft h3,.section-soft h4,
.section--surface h1,.section--surface h2,.section--surface h3,.section--surface h4,
.nakajp-depth-section h1,.nakajp-depth-section h2,.nakajp-depth-section h3,.nakajp-depth-section h4{
  color:var(--njp-brand-brown-dark)!important;
}
.section--white p,.section-white p,.section--warm p,.section--soft p,.section-soft p,
.section--surface p,.nakajp-depth-section p,
.section--white li,.section-white li,.section--warm li,.section--soft li,.section-soft li,
.section--surface li,.nakajp-depth-section li{
  color:#635A50!important;
}

/* Never let utility background classes override image/dark hero sections */
.hero,
[class*="-hero"],
.lp002-hero,
.lp002d-hero,
.lp004-hero{
  color:#fff;
}
.hero h1,.hero h2,.hero h3,
[class*="-hero"] h1,[class*="-hero"] h2,[class*="-hero"] h3,
.lp002-hero h1,.lp002-hero h2,.lp002-hero h3,
.lp002d-hero h1,.lp002d-hero h2,.lp002d-hero h3,
.lp004-hero h1,.lp004-hero h2,.lp004-hero h3{
  color:#fff!important;
}
.hero p,
[class*="-hero"] p,
.lp002-hero p,
.lp002d-hero p,
.lp004-hero p{
  color:rgba(255,253,248,.88)!important;
}

/* Buttons keep readable contrast on all surfaces */
.btn,
.btn--gold,
.btn-primary,
button[type="submit"]{
  color:#fff!important;
}
.btn--ghost,
.btn--glass,
.btn-secondary{
  color:var(--njp-brand-brown-dark);
}
.hero .btn--ghost,
.hero .btn--glass,
[class*="-hero"] .btn--ghost,
[class*="-hero"] .btn--glass{
  color:#fff!important;
}

/* Card on light section needs visible edge */
.section--white .card,
.section-white .card,
.section--warm .card,
.section-soft .card,
.nakajp-depth-section article,
.section--surface .card{
  border-color:rgba(107,79,58,.14)!important;
}



/* =========================================================
Phase 61 — Global Contrast Guardrail
Scope: all LP HTML.
Fix:
- white text/button on light cream/white backgrounds
- light-image hero with text forced white by previous global rule
- related/internal link CTA losing contrast
- LP003C pain opener lacks emphasis
Tracking/form JS untouched.
========================================================= */

:root{
  --nk61-paper:#FFFDF8;
  --nk61-ivory:#F8F3EA;
  --nk61-cream:#EFE6DA;
  --nk61-line:rgba(107,79,58,.18);
  --nk61-text:#231F1A;
  --nk61-text-soft:#635A50;
  --nk61-brown:#6B4F3A;
  --nk61-brown-dark:#3E2E22;
  --nk61-gold:#B8944D;
  --nk61-white:#FFFFFF;
}

/* 1) Light surfaces: never inherit white copy */
.section--white,
.section-white,
.section--paper,
.section--warm,
.section--soft,
.section-soft,
.section--surface,
.section--proof,
.nakajp-depth-section,
.article-section,
.quick-toc,
.related,
.internal-links,
.related-links,
.related-consultation,
.style-related,
.lp-related,
[data-internal-links],
.form-section,
.slide-form,
#lead-form,
#form,
#form-dang-ky,
#consultation-form{
  color:var(--nk61-text)!important;
}

.section--white :is(h1,h2,h3,h4,h5,h6),
.section-white :is(h1,h2,h3,h4,h5,h6),
.section--paper :is(h1,h2,h3,h4,h5,h6),
.section--warm :is(h1,h2,h3,h4,h5,h6),
.section--soft :is(h1,h2,h3,h4,h5,h6),
.section-soft :is(h1,h2,h3,h4,h5,h6),
.section--surface :is(h1,h2,h3,h4,h5,h6),
.section--proof :is(h1,h2,h3,h4,h5,h6),
.nakajp-depth-section :is(h1,h2,h3,h4,h5,h6),
.article-section :is(h1,h2,h3,h4,h5,h6),
.quick-toc :is(h1,h2,h3,h4,h5,h6),
.related :is(h1,h2,h3,h4,h5,h6),
.internal-links :is(h1,h2,h3,h4,h5,h6),
.related-links :is(h1,h2,h3,h4,h5,h6),
.related-consultation :is(h1,h2,h3,h4,h5,h6),
.style-related :is(h1,h2,h3,h4,h5,h6),
.lp-related :is(h1,h2,h3,h4,h5,h6),
[data-internal-links] :is(h1,h2,h3,h4,h5,h6){
  color:var(--nk61-brown-dark)!important;
}

.section--white :is(p,li,small,span),
.section-white :is(p,li,small,span),
.section--paper :is(p,li,small,span),
.section--warm :is(p,li,small,span),
.section--soft :is(p,li,small,span),
.section-soft :is(p,li,small,span),
.section--surface :is(p,li,small,span),
.section--proof :is(p,li,small,span),
.nakajp-depth-section :is(p,li,small,span),
.article-section :is(p,li,small,span),
.quick-toc :is(p,li,small,span),
.related :is(p,li,small,span),
.internal-links :is(p,li,small,span),
.related-links :is(p,li,small,span),
.related-consultation :is(p,li,small,span),
.style-related :is(p,li,small,span),
.lp-related :is(p,li,small,span),
[data-internal-links] :is(p,li,small,span){
  color:var(--nk61-text-soft)!important;
}

/* 2) Buttons on light sections: ghost/secondary must be readable.
   Primary remains brown + white. */
.site-header .btn--ghost,
.site-header .btn-secondary,
.site-header .btn-outline,
.section--white .btn--ghost,
.section-white .btn--ghost,
.section--paper .btn--ghost,
.section--warm .btn--ghost,
.section--soft .btn--ghost,
.section-soft .btn--ghost,
.section--surface .btn--ghost,
.nakajp-depth-section .btn--ghost,
.article-section .btn--ghost,
.quick-toc .btn--ghost,
.related .btn--ghost,
.internal-links .btn--ghost,
.related-links .btn--ghost,
.related-consultation .btn--ghost,
.style-related .btn--ghost,
.lp-related .btn--ghost,
[data-internal-links] .btn--ghost,
.section--white .btn-secondary,
.section-white .btn-secondary,
.section--paper .btn-secondary,
.section--warm .btn-secondary,
.section--soft .btn-secondary,
.section-soft .btn-secondary,
.section--surface .btn-secondary,
.nakajp-depth-section .btn-secondary,
.article-section .btn-secondary,
.related .btn-secondary,
.internal-links .btn-secondary,
.related-links .btn-secondary,
.related-consultation .btn-secondary,
.style-related .btn-secondary,
.lp-related .btn-secondary,
[data-internal-links] .btn-secondary,
.section--white .btn-outline,
.section-white .btn-outline,
.section--paper .btn-outline,
.section--warm .btn-outline,
.section--soft .btn-outline,
.section-soft .btn-outline,
.section--surface .btn-outline,
.nakajp-depth-section .btn-outline,
.article-section .btn-outline,
.related .btn-outline,
.internal-links .btn-outline,
.related-links .btn-outline,
.related-consultation .btn-outline,
.style-related .btn-outline,
.lp-related .btn-outline,
[data-internal-links] .btn-outline{
  background:rgba(255,253,248,.96)!important;
  color:var(--nk61-brown-dark)!important;
  border:1px solid rgba(107,79,58,.24)!important;
  box-shadow:0 12px 30px rgba(47,36,28,.08)!important;
}

.site-header .btn--ghost *,
.site-header .btn-secondary *,
.site-header .btn-outline *,
.section--white .btn--ghost *,
.section-white .btn--ghost *,
.section--paper .btn--ghost *,
.section--warm .btn--ghost *,
.section--soft .btn--ghost *,
.section-soft .btn--ghost *,
.section--surface .btn--ghost *,
.nakajp-depth-section .btn--ghost *,
.article-section .btn--ghost *,
.related .btn--ghost *,
.internal-links .btn--ghost *,
.related-links .btn--ghost *,
.related-consultation .btn--ghost *,
.style-related .btn--ghost *,
.lp-related .btn--ghost *,
[data-internal-links] .btn--ghost *,
.section--white .btn-secondary *,
.section-white .btn-secondary *,
.section--paper .btn-secondary *,
.section--warm .btn-secondary *,
.section--soft .btn-secondary *,
.section-soft .btn-secondary *,
.section--surface .btn-secondary *,
.nakajp-depth-section .btn-secondary *,
.article-section .btn-secondary *,
.related .btn-secondary *,
.internal-links .btn-secondary *,
.related-links .btn-secondary *,
.related-consultation .btn-secondary *,
.style-related .btn-secondary *,
.lp-related .btn-secondary *,
[data-internal-links] .btn-secondary *{
  color:inherit!important;
}

/* Direct related links without btn class */
.related a,
.quick-toc a,
.related-grid a,
.lp004-related-card{
  background:#fff!important;
  color:var(--nk61-brown-dark)!important;
  border:1px solid rgba(107,79,58,.18)!important;
  box-shadow:0 12px 28px rgba(47,36,28,.06);
}
.related a :is(b,strong,span,small),
.quick-toc a :is(b,strong,span,small),
.related-grid a :is(b,strong,span,small),
.lp004-related-card :is(b,strong,span,small){
  color:inherit!important;
}
.lp004-related-card small{
  color:var(--nk61-text-soft)!important;
}

/* Primary buttons keep clear contrast */
.btn:not(.btn--ghost):not(.btn-secondary):not(.btn-outline):not(.btn--glass),
.btn-primary,
.btn--gold,
button[type="submit"],
.form-submit{
  background:linear-gradient(135deg,var(--nk61-brown),var(--nk61-brown-dark))!important;
  color:#fff!important;
  border-color:transparent!important;
}
.btn:not(.btn--ghost):not(.btn-secondary):not(.btn-outline):not(.btn--glass) *,
.btn-primary *,
.btn--gold *,
button[type="submit"] *,
.form-submit *{
  color:inherit!important;
}

/* 3) Light hero exception: LP006 hero is intentionally light/image based.
   Previous global rule forced every .hero h1/p to white. Revert SEO interior hero to dark copy. */
.seo-interior-page .hero{
  background:
    linear-gradient(90deg,rgba(252,250,246,.96) 0%,rgba(252,250,246,.90) 42%,rgba(252,250,246,.70) 68%,rgba(252,250,246,.48) 100%),
    linear-gradient(180deg,rgba(252,250,246,.16),rgba(252,250,246,.74)),
    url("../images/ART_4617.webp") center right/cover no-repeat!important;
  color:var(--nk61-text)!important;
}
.seo-interior-page .hero :is(h1,h2,h3,h4),
.seo-interior-page .hero .eyebrow{
  color:var(--nk61-brown-dark)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.seo-interior-page .hero :is(p,li,span,.lead){
  color:var(--nk61-text-soft)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.seo-interior-page .hero-copy,
.seo-interior-page .hero-aside{
  background:rgba(255,253,248,.88)!important;
  border:1px solid rgba(107,79,58,.14)!important;
  box-shadow:0 20px 56px rgba(47,36,28,.08)!important;
}
.seo-interior-page .hero .hero-actions .btn--ghost,
.seo-interior-page .hero .hero-actions .btn-secondary,
.seo-interior-page .hero .hero-actions .btn-outline{
  background:rgba(255,253,248,.96)!important;
  color:var(--nk61-brown-dark)!important;
  border:1px solid rgba(107,79,58,.24)!important;
}

/* Keep dark heroes white only on the pages that actually use dark overlays. */
.lp002 .lp002-hero :is(h1,h2,h3,p,li,span),
.lp002 .hero :is(h1,h2,h3,p,li,span),
.nakajp-lp003 .hero :is(h1,h2,h3,p,li,span),
.lp004 .lp004-hero :is(h1,h2,h3,p,li,span){
  color:inherit;
}
.lp002 .hero .btn--ghost,
.nakajp-lp003 .hero .btn--ghost,
.lp004 .lp004-hero .btn--ghost,
.lp002 .hero .btn--glass,
.nakajp-lp003 .hero .btn--glass,
.lp004 .lp004-hero .btn--glass{
  color:#fff!important;
  border-color:rgba(255,255,255,.48)!important;
  background:rgba(255,255,255,.10)!important;
}

/* 4) LP003 / nav dots: avoid stray white button text and make active/ghost state readable */
.nakajp-lp003 .inline-cta .btn.btn-secondary,
.nakajp-lp003 .inline-cta .btn.btn--ghost,
.lp003c .section-actions .btn.btn-secondary,
.lp003c .section-actions .btn.btn--ghost{
  background:#fff!important;
  color:var(--nk61-brown-dark)!important;
  border:1px solid rgba(107,79,58,.24)!important;
}
.nakajp-lp003 .nav-dots a{
  background:rgba(255,253,248,.92)!important;
  border:2px solid var(--nk61-brown)!important;
}
.nakajp-lp003 .nav-dots a.active,
.nakajp-lp003 .nav-dots a:hover{
  background:var(--nk61-brown)!important;
}

/* 5) LP003C material pain opener emphasis */
.lp003c #missing-quote-items .section-header{
  align-items:center!important;
}
.lp003c #missing-quote-items .section-header > :first-child,
.lp003c #missing-quote-items .section-title > :first-child{
  position:relative;
  padding:24px 24px 24px 30px;
  border-radius:24px;
  background:#fff!important;
  border:1px solid rgba(107,79,58,.16);
  box-shadow:0 16px 40px rgba(47,36,28,.07);
}
.lp003c #missing-quote-items .section-header > :first-child::before,
.lp003c #missing-quote-items .section-title > :first-child::before{
  content:"";
  position:absolute;
  left:0;
  top:22px;
  bottom:22px;
  width:5px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--nk61-gold),var(--nk61-brown));
}
.lp003c #missing-quote-items .section-header p:first-child,
.lp003c #missing-quote-items .section-title p:first-child{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  color:var(--nk61-brown-dark)!important;
  font-weight:900!important;
}
.lp003c #missing-quote-items .section-header p:first-child::before,
.lp003c #missing-quote-items .section-title p:first-child::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--nk61-gold);
  box-shadow:0 0 0 5px rgba(184,148,77,.18);
}

/* 6) Mobile guardrail */
@media(max-width:760px){
  .internal-links .btn,
  .related-links .btn,
  .related-consultation .btn,
  .style-related .btn,
  .lp-related .btn,
  [data-internal-links] .btn{
    width:100%;
    justify-content:center;
  }
  .seo-interior-page .hero-copy,
  .seo-interior-page .hero-aside{
    padding:20px!important;
  }
}


/* =========================================================
Phase 62 — Global Readability + Form URL Guardrail
Scope: all NAKAJP LPs.
Fix:
- white text on warm/white cards across LP002/LP003/LP006/brand home
- ghost/secondary buttons white on light surfaces
- light image heroes with glass panels must use dark copy
Tracking/form submit logic is not changed here.
========================================================= */

:root{
  --nk62-paper:#FFFDF8;
  --nk62-ivory:#F8F3EA;
  --nk62-warm:#EFE6DA;
  --nk62-text:#241D18;
  --nk62-text-soft:#5F554B;
  --nk62-brown:#6B4F3A;
  --nk62-brown-dark:#3E2E22;
  --nk62-gold:#B8944D;
  --nk62-border:rgba(107,79,58,.18);
}

/* Light sections/cards: never inherit white copy */
:is(.section:not(.trust-platform-section),.section--white,.section-white,.section--paper,.section--warm,.section--soft,.section-soft,.section--surface,.nakajp-depth-section,
.lp002-signs,.lp002-home-map,.lp002-method,.lp002-fit,.lp002-process,.lp002-trust,.lp002-faq,.lp002-variant-insight,
.workflow-section,.quick-toc,.related,.internal-links,.form-section,#form,#lead-form,#form-dang-ky,#faq-noi-that,
.article-section:not(.dark-section),.brand-home-page .section:not(.trust-platform-section),.brand-home-page .trust-strip):not(.jp-section-accent[data-jp-accent="deep"]):not([data-jp-tone="dark"]) {
  color:var(--nk62-text)!important;
}

:is(.section:not(.trust-platform-section),.section--white,.section-white,.section--paper,.section--warm,.section--soft,.section-soft,.section--surface,.nakajp-depth-section,
.lp002-signs,.lp002-home-map,.lp002-method,.lp002-fit,.lp002-process,.lp002-trust,.lp002-faq,.lp002-variant-insight,
.workflow-section,.quick-toc,.related,.internal-links,.form-section,#form,#lead-form,#form-dang-ky,#faq-noi-that,
.article-section:not(.dark-section),.brand-home-page .section:not(.trust-platform-section),.brand-home-page .trust-strip):not(.jp-section-accent[data-jp-accent="deep"]):not([data-jp-tone="dark"])
:is(h1,h2,h3,h4,h5,h6,.section-title,.lp002-kicker,.eyebrow,.section-kicker,.kicker) {
  color:var(--nk62-brown-dark)!important;
}

:is(.section:not(.trust-platform-section),.section--white,.section-white,.section--paper,.section--warm,.section--soft,.section-soft,.section--surface,.nakajp-depth-section,
.lp002-signs,.lp002-home-map,.lp002-method,.lp002-fit,.lp002-process,.lp002-trust,.lp002-faq,.lp002-variant-insight,
.workflow-section,.quick-toc,.related,.internal-links,.form-section,#form,#lead-form,#form-dang-ky,#faq-noi-that,
.article-section:not(.dark-section),.brand-home-page .section:not(.trust-platform-section),.brand-home-page .trust-strip):not(.jp-section-accent[data-jp-accent="deep"]):not([data-jp-tone="dark"])
:is(p,li,span,small,cite,label) {
  color:var(--nk62-text-soft)!important;
}

/* White/warm cards on light sections need dark headings/body and visible edge */
:is(.section:not(.trust-platform-section),.section--white,.section-white,.section--warm,.section--soft,.section-soft,.nakajp-depth-section,
.lp002-signs,.lp002-home-map,.lp002-method,.lp002-fit,.lp002-process,.lp002-trust,.lp002-faq,.lp002-variant-insight,
.workflow-section,.quick-toc,.related,.internal-links,.brand-home-page .section:not(.trust-platform-section))
:is(.card,[class*="card"],article,.lp002-signs-title,.lp002-signs-list article,.lp002-map-copy,.lp002-fit-card,.lp002-trust-box,.lp002-trust-items article,.service-card,.value-card,.quick-card,.info-card) {
  background-color:rgba(255,253,248,.96);
  color:var(--nk62-text)!important;
  border-color:var(--nk62-border)!important;
}

:is(.section:not(.trust-platform-section),.section--white,.section-white,.section--warm,.section--soft,.section-soft,.nakajp-depth-section,
.lp002-signs,.lp002-home-map,.lp002-method,.lp002-fit,.lp002-process,.lp002-trust,.lp002-faq,.lp002-variant-insight,
.workflow-section,.quick-toc,.related,.internal-links,.brand-home-page .section:not(.trust-platform-section))
:is(.card,[class*="card"],article,.lp002-signs-title,.lp002-signs-list article,.lp002-map-copy,.lp002-fit-card,.lp002-trust-box,.lp002-trust-items article,.service-card,.value-card,.quick-card,.info-card)
:is(h1,h2,h3,h4,b,strong,.title) {
  color:var(--nk62-brown-dark)!important;
}

:is(.section:not(.trust-platform-section),.section--white,.section-white,.section--warm,.section--soft,.section-soft,.nakajp-depth-section,
.lp002-signs,.lp002-home-map,.lp002-method,.lp002-fit,.lp002-process,.lp002-trust,.lp002-faq,.lp002-variant-insight,
.workflow-section,.quick-toc,.related,.internal-links,.brand-home-page .section:not(.trust-platform-section))
:is(.card,[class*="card"],article,.lp002-signs-title,.lp002-signs-list article,.lp002-map-copy,.lp002-fit-card,.lp002-trust-box,.lp002-trust-items article,.service-card,.value-card,.quick-card,.info-card)
:is(p,li,span,small) {
  color:var(--nk62-text-soft)!important;
}

/* LP002C/variant pain cards specifically: screenshot fix */
.lp002 .lp002-signs-title,
.lp002 .lp002-signs-title *,
.lp002 .lp002-signs-list article,
.lp002 .lp002-signs-list article *{
  text-shadow:none!important;
}
.lp002 .lp002-signs-title h2,
.lp002 .lp002-signs-list h3{
  color:var(--nk62-brown-dark)!important;
}
.lp002 .lp002-signs-title p,
.lp002 .lp002-signs-list p{
  color:var(--nk62-text-soft)!important;
}
.lp002 .lp002-signs-list span{
  color:var(--nk62-text)!important;
  background:#E8D7A8!important;
}

/* Brand home hero is a light glass panel on image; use dark copy there */
.brand-home-page .hero-card,
.brand-home-page .hero-copy{
  background:rgba(255,253,248,.84)!important;
  color:var(--nk62-text)!important;
  border:1px solid rgba(107,79,58,.16)!important;
  box-shadow:0 24px 70px rgba(37,33,29,.14)!important;
}
.brand-home-page .hero-card :is(h1,h2,h3,h4,.eyebrow),
.brand-home-page .hero-copy :is(h1,h2,h3,h4,.eyebrow){
  color:var(--nk62-brown-dark)!important;
  text-shadow:none!important;
}
.brand-home-page .hero-card :is(p,li,span),
.brand-home-page .hero-copy :is(p,li,span){
  color:var(--nk62-text-soft)!important;
  text-shadow:none!important;
}
.brand-home-page .hero-panel{
  background:rgba(47,36,28,.88)!important;
  color:#FFFDF8!important;
}
.brand-home-page .hero-panel :is(h1,h2,h3,h4,b,strong){
  color:#FFFDF8!important;
}
.brand-home-page .hero-panel :is(p,li,span){
  color:rgba(255,253,248,.84)!important;
}

/* LP006 / SEO hero: light image hero should not use white text */
.seo-interior-page .hero,
.seo-interior-page .hero *{
  text-shadow:none!important;
}
.seo-interior-page .hero :is(h1,h2,h3,h4,.eyebrow,b,strong){
  color:var(--nk62-brown-dark)!important;
}
.seo-interior-page .hero :is(p,li,span){
  color:var(--nk62-text-soft)!important;
}
.seo-interior-page .hero .btn--ghost,
.seo-interior-page .hero .btn--glass,
.seo-interior-page .hero .btn-secondary,
.seo-interior-page .hero .btn-outline{
  background:rgba(255,253,248,.94)!important;
  color:var(--nk62-brown-dark)!important;
  border:1px solid rgba(107,79,58,.26)!important;
}

/* Light surface buttons: ghost/outline must be readable, not white on white */
:is(.section:not(.trust-platform-section),.section--white,.section-white,.section--warm,.section--soft,.section-soft,.nakajp-depth-section,
.lp002-signs,.lp002-home-map,.lp002-method,.lp002-fit,.lp002-process,.lp002-trust,.lp002-faq,.lp002-variant-insight,
.workflow-section,.quick-toc,.related,.internal-links,.form-section,#form,#lead-form,#form-dang-ky,#faq-noi-that,
.article-section:not(.dark-section),.brand-home-page .section:not(.trust-platform-section))
:is(.btn--ghost,.btn--glass,.btn-secondary,.btn-outline,.quick-link,.chip-link,a.btn--ghost,a.btn-secondary,a.btn-outline) {
  background:rgba(255,253,248,.96)!important;
  color:var(--nk62-brown-dark)!important;
  border:1px solid rgba(107,79,58,.26)!important;
  box-shadow:0 12px 28px rgba(47,36,28,.06);
}
:is(.section:not(.trust-platform-section),.section--white,.section-white,.section--warm,.section--soft,.section-soft,.nakajp-depth-section,
.lp002-signs,.lp002-home-map,.lp002-method,.lp002-fit,.lp002-process,.lp002-trust,.lp002-faq,.lp002-variant-insight,
.workflow-section,.quick-toc,.related,.internal-links,.form-section,#form,#lead-form,#form-dang-ky,#faq-noi-that,
.article-section:not(.dark-section),.brand-home-page .section:not(.trust-platform-section))
:is(.btn--ghost,.btn--glass,.btn-secondary,.btn-outline,.quick-link,.chip-link,a.btn--ghost,a.btn-secondary,a.btn-outline) * {
  color:inherit!important;
}

/* Primary buttons remain strong */
:is(.btn--gold,.btn-primary,.btn.btn--primary,button[type="submit"],.form-submit,.btn:not(.btn--ghost):not(.btn--glass):not(.btn-secondary):not(.btn-outline)) {
  color:#FFFDF8!important;
}
:is(.btn--gold,.btn-primary,.btn.btn--primary,button[type="submit"],.form-submit,.btn:not(.btn--ghost):not(.btn--glass):not(.btn-secondary):not(.btn-outline)) * {
  color:inherit!important;
}

/* Keep intentionally dark sections readable */
:is(.dark-section,.lp002-philosophy,.lp004-principles,.after,.nakajp-dark-footer,.site-footer,.brand-home-page .hero-panel)
:is(h1,h2,h3,h4,b,strong){
  color:#FFFDF8!important;
}
:is(.dark-section,.lp002-philosophy,.lp004-principles,.after,.nakajp-dark-footer,.site-footer,.brand-home-page .hero-panel)
:is(p,li,span,small){
  color:rgba(255,253,248,.84)!important;
}
:is(.dark-section,.lp002-philosophy,.lp004-principles,.after,.nakajp-dark-footer,.site-footer)
:is(.btn--ghost,.btn--glass,.btn-secondary,.btn-outline){
  color:#FFFDF8!important;
  border-color:rgba(255,255,255,.42)!important;
  background:rgba(255,255,255,.10)!important;
}

/* LP003C pain opener: give "Báo giá chưa rõ" an actual visual emphasis */
.lp003c #missing-quote-items .section-header > :first-child{
  background:#FFFDF8!important;
  border:1px solid rgba(107,79,58,.18)!important;
  box-shadow:0 18px 48px rgba(47,36,28,.08)!important;
}
.lp003c #missing-quote-items .section-header > :first-child :is(p,h2){
  color:var(--nk62-brown-dark)!important;
}
.lp003c #missing-quote-items .section-header > :first-child p:not(:first-child){
  color:var(--nk62-text-soft)!important;
}


/* =========================================================
   Phase63 — Form submit restore UI guardrails
========================================================= */
.required-star {
  color: #b98935;
  font-weight: 800;
}

.form-status,
[data-form-status] {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
}

.form-status.is-pending,
[data-form-status].is-pending {
  color: #7a5a3a;
}

.form-status.is-success,
[data-form-status].is-success {
  color: #2f6f45;
}

.form-status.is-error,
[data-form-status].is-error {
  color: #9b2f25;
}

button[disabled],
.btn[disabled],
.cta-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.72;
}


/* =========================================================
   Phase64 — Desktop Section Nav Dot Standardization
   - One generated system only: .section-dots / .section-dot
   - Old hardcoded dot systems hidden to prevent stray bullet columns.
   - Mobile/tablet hidden for UX.
========================================================= */

/* Disable legacy nav dot systems that could drift out of sync with sections */
.nav-dots,
#navDots,
.scroll-dots,
.page-dots,
.side-dots,
.dot-nav,
.lp-section-nav,
.section-nav,
.story-rail,
.chapter-nav,
.jump-nav {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

section[id],
.slide[id] {
  scroll-margin-top: calc(var(--header-h, 84px) + 22px);
}

.section-dots {
  position: fixed;
  left: clamp(16px, 2vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 44;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 999px;
  background: rgba(255, 253, 248, .70);
  border: 1px solid rgba(107, 79, 58, .12);
  box-shadow: 0 16px 38px rgba(43, 33, 26, .08);
  backdrop-filter: blur(8px);
}

.section-dot {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid rgba(107, 79, 58, .72);
  background: rgba(255,255,255,.66);
  opacity: .58;
  cursor: pointer;
  transition:
    transform .2s ease,
    opacity .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.section-dot:hover,
.section-dot:focus-visible {
  opacity: .92;
  transform: scale(1.18);
  outline: none;
  border-color: var(--njp-brand-gold, #B8944D);
  box-shadow: 0 0 0 5px rgba(184, 148, 77, .12);
}

.section-dot.is-active {
  opacity: 1;
  background: var(--njp-brand-gold, #B8944D);
  border-color: var(--njp-brand-brown, #6B4F3A);
  transform: scale(1.34);
  box-shadow:
    0 0 0 6px rgba(184, 148, 77, .16),
    0 8px 18px rgba(43, 33, 26, .14);
}

.section-dot__label {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  width: max-content;
  max-width: 180px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(43, 33, 26, .94);
  color: #FFFDF8;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(43, 33, 26, .18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.section-dot:hover .section-dot__label,
.section-dot:focus-visible .section-dot__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Keep generated dots away from small screens and touch-first UX */
@media (max-width: 1023px) {
  .section-dots {
    display: none !important;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .section-dots {
    left: 12px;
    opacity: .82;
  }
}

/* LP005 hero eyebrow contrast fix:
   "Tư vấn & Thẩm định Báo giá trước khi chốt" must stay readable on the hero image. */
body.quote-review .slide-hero .hero-copy .eyebrow,
.slide-hero .hero-copy .eyebrow {
  background: rgba(255, 253, 248, .96) !important;
  color: var(--njp-brand-brown, #6B4F3A) !important;
  border: 1px solid rgba(107, 79, 58, .18) !important;
  box-shadow: 0 10px 24px rgba(43, 33, 26, .10);
  text-shadow: none !important;
}


/* =========================================================
   Phase65 — Publish Audit Fixes
   Scope: nav dot overload, material sample table, Zero Gap output checklist,
   maintenance-environment proof cards, LP005 hero eyebrow contrast.
   Tracking/form data logic untouched.
========================================================= */

/* Stronger LP005 hero eyebrow contrast on gold/bright hero area */
body.quote-review .slide-hero .hero-copy .eyebrow,
.slide-hero .hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 253, 248, .97) !important;
  color: #5E432A !important;
  border: 1px solid rgba(94, 67, 42, .20) !important;
  box-shadow: 0 10px 26px rgba(43, 33, 26, .12);
  text-shadow: none !important;
}

/* LP003C sample material table */
.material-sample-table-wrap {
  margin-top: 34px;
  padding: 24px;
  border-radius: 24px;
  background: #FFFDF8;
  border: 1px solid rgba(107, 79, 58, .14);
  box-shadow: 0 18px 46px rgba(43, 33, 26, .07);
}

.material-sample-intro {
  max-width: 760px;
  margin-bottom: 18px;
}

.material-sample-intro h3 {
  margin: 8px 0 8px;
  color: #2F241C;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.25;
}

.material-sample-intro p {
  margin: 0;
  color: #5E5146;
}

.material-sample-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 18px;
  border: 1px solid rgba(107, 79, 58, .12);
  background: #fff;
}

.material-sample-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
}

.material-sample-table th,
.material-sample-table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(107, 79, 58, .10);
}

.material-sample-table th {
  background: #F3ECE2;
  color: #5E432A;
  font-weight: 800;
}

.material-sample-table td {
  color: #3A2B22;
}

.material-sample-table tbody tr:last-child td {
  border-bottom: 0;
}

/* LP002D output checklist */
.zero-gap-output-checklist {
  margin-top: 28px;
  padding: 24px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,253,248,.98), rgba(242,235,226,.82));
  border: 1px solid rgba(107, 79, 58, .14);
  box-shadow: 0 16px 42px rgba(43, 33, 26, .07);
}

.zero-gap-output-checklist h3 {
  margin: 0 0 14px;
  color: #2F241C;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.3;
}

.zero-gap-output-checklist ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.zero-gap-output-checklist li {
  position: relative;
  padding-left: 24px;
  color: #5E5146;
  font-weight: 650;
}

.zero-gap-output-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #B8944D;
  font-weight: 900;
}

/* LP002 maintenance proof cards: support 4-card grid */
.nakajp-depth-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#maintenance-environment .nakajp-depth-grid article {
  background: #FFFDF8;
  border: 1px solid rgba(107, 79, 58, .12);
  box-shadow: 0 12px 34px rgba(43, 33, 26, .06);
}

#maintenance-environment .nakajp-depth-grid article h3 {
  color: #2F241C;
}

#maintenance-environment .nakajp-depth-grid article p {
  color: #5E5146;
}

/* Form native-submit fallback should never look broken */
form[onsubmit="return false;"] .form-status:empty,
form[onsubmit="return false;"] [data-form-status]:empty {
  display: none;
}

form[onsubmit="return false;"] .form-status:not(:empty),
form[onsubmit="return false;"] [data-form-status]:not(:empty) {
  display: block;
}

/* Keep section dot count visually calm when a page has 8 dots */
.section-dots {
  max-height: calc(100vh - 180px);
  overflow: visible;
}

@media (max-width: 1023px) {
  .zero-gap-output-checklist ul {
    grid-template-columns: 1fr;
  }

  .material-sample-table-wrap {
    padding: 18px;
    border-radius: 20px;
  }

  .material-sample-table {
    min-width: 760px;
  }
}

@media (max-width: 1180px) {
  .nakajp-depth-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .nakajp-depth-grid--4 {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   Phase66 — Premium Japanese editorial trust system
   Scope: content/layout layer only. No tracking/form logic.
========================================================= */
.premium-standard-section,
.premium-quote-trust {
  position: relative;
  overflow: hidden;
}

.premium-standard-section {
  background:
    radial-gradient(circle at 12% 8%, rgba(202, 168, 91, .14), transparent 34%),
    linear-gradient(135deg, #fbf7ef 0%, #f1e7da 100%);
  border-top: 1px solid rgba(122, 90, 58, .12);
  border-bottom: 1px solid rgba(122, 90, 58, .10);
}

.premium-standard-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.premium-standard-statement {
  position: sticky;
  top: 112px;
}

.premium-standard-statement h2,
.premium-editorial-block h2 {
  color: #2F241C;
  letter-spacing: -.03em;
  line-height: 1.14;
}

.premium-standard-statement p,
.premium-editorial-block p {
  color: #5E5146;
}

.premium-standard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.premium-standard-grid article {
  background: rgba(255, 253, 250, .88);
  border: 1px solid rgba(122, 90, 58, .14);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 18px 44px rgba(47, 36, 28, .07);
}

.premium-standard-grid span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  margin-bottom: 18px;
  background: rgba(202, 168, 91, .18);
  color: #6F4E2F;
  font-weight: 800;
  font-size: 13px;
}

.premium-standard-grid h3 {
  color: #2F241C;
  margin: 0 0 10px;
  font-size: 18px;
}

.premium-standard-grid p {
  color: #5E5146;
  margin: 0;
}

.premium-quote-trust {
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(247,243,237,.96)),
    linear-gradient(135deg, #fffdfa, #f4eadf);
}

.premium-editorial-block {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px);
  border-radius: 30px;
  background: rgba(255, 253, 250, .92);
  border: 1px solid rgba(122, 90, 58, .14);
  box-shadow: 0 22px 58px rgba(47, 36, 28, .08);
}

.premium-editorial-block .section-actions {
  margin-top: 28px;
  justify-content: flex-start;
}

.lead-form-wrap .lead,
.form-box .form-alert,
.slide-form .section-lead {
  color: #5E5146;
}

@media (max-width: 1023px) {
  .premium-standard-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .premium-standard-statement {
    position: static;
  }

  .premium-standard-grid {
    grid-template-columns: 1fr;
  }

  .premium-standard-grid article {
    padding: 20px;
    border-radius: 20px;
  }

  .premium-editorial-block {
    padding: 24px;
    border-radius: 24px;
  }
}


/* =========================================================
   Phase67 — Contrast, Required Star and Section Rhythm Fix
   Scope:
   - Stop white text/white buttons on light sections/cards.
   - Avoid visual double "**" on required labels.
   - Add clearer background rhythm for major non-hero sections.
   Tracking/form data logic untouched.
========================================================= */

:root{
  --nk67-paper:#FFFDF8;
  --nk67-ivory:#FCFAF6;
  --nk67-warm:#F6F0E7;
  --nk67-mist:#EFE7DB;
  --nk67-line:rgba(107,79,58,.16);
  --nk67-line-strong:rgba(107,79,58,.26);
  --nk67-text:#2F261F;
  --nk67-muted:#66594E;
  --nk67-brown:#6B4F3A;
  --nk67-brown-dark:#4F3828;
  --nk67-gold:#B8944D;
}

/* Required marker: render only one star, with brand accent. */
.required-star{
  color:var(--nk67-gold)!important;
  font-weight:900!important;
  margin-left:2px!important;
}

/* Section rhythm classes are applied only to non-hero, non-dark sections.
   They create visible section breaks without forcing dark sections to light backgrounds. */
.section-rhythm:not(.trust-platform-section):not(.jp-section-accent[data-jp-accent="deep"]):not([data-jp-tone="dark"]){
  position:relative;
  color:var(--nk67-text)!important;
  border-top:1px solid rgba(107,79,58,.08);
  border-bottom:1px solid rgba(107,79,58,.035);
}

.section-rhythm--paper{ background:var(--nk67-paper)!important; }
.section-rhythm--warm{ background:linear-gradient(180deg,#F8F3EB 0%,#F3EBDD 100%)!important; }
.section-rhythm--mist:not(.trust-platform-section){ background:linear-gradient(180deg,#FBF8F2 0%,#EFE7DB 100%)!important; }
.section-rhythm--form{ background:linear-gradient(180deg,#F7F0E6 0%,#FFFDF8 100%)!important; border-top:1px solid rgba(107,79,58,.14); }

.section-rhythm:not(.trust-platform-section):not(.jp-section-accent[data-jp-accent="deep"]):not([data-jp-tone="dark"]) :is(h1,h2,h3,h4,h5,h6,.section-title,.section-heading,.eyebrow,.hero-eyebrow,.kicker,.section-kicker,strong,b){
  color:var(--nk67-text)!important;
  text-shadow:none!important;
}

.section-rhythm:not(.trust-platform-section):not(.jp-section-accent[data-jp-accent="deep"]):not([data-jp-tone="dark"]) :is(p,li,small,.muted,.section-lead,.lead,.copy,.description){
  color:var(--nk67-muted)!important;
  text-shadow:none!important;
}

.section-rhythm :is(.card,.info-card,.feature-card,.pain-card,.quick-card,.standard-card,.premium-standard-card,.lp004-style-info,.lp004-related,.trust-card,.proof-card,.faq-item,.faq-card,.form-card){
  background:rgba(255,253,248,.90)!important;
  border-color:var(--nk67-line)!important;
  box-shadow:0 18px 45px rgba(47,38,31,.055)!important;
}

.section-rhythm--warm :is(.card,.info-card,.feature-card,.pain-card,.quick-card,.standard-card,.premium-standard-card,.lp004-style-info,.trust-card,.proof-card,.faq-item,.faq-card),
.section-rhythm--mist :is(.card,.info-card,.feature-card,.pain-card,.quick-card,.standard-card,.premium-standard-card,.lp004-style-info,.trust-card,.proof-card,.faq-item,.faq-card){
  background:rgba(255,253,248,.82)!important;
}

/* Broad readable ghost/secondary buttons on light sections.
   Important for LP004 style-detail and LP005 related blocks. */
main section:not(.lp002-philosophy):not(.lp004-principles):not(.section--dark):not(.dark-section):not(.after):not(.site-footer):not(.nakajp-dark-footer):not(.jp-section-accent[data-jp-accent="deep"]):not([data-jp-tone="dark"])
:is(.btn--ghost,.btn--glass,.btn-secondary,.btn-outline,a.btn--ghost,a.btn-secondary,a.btn-outline,.quick-link,.chip-link){
  background:rgba(255,253,248,.96)!important;
  color:var(--nk67-brown-dark)!important;
  border:1px solid var(--nk67-line-strong)!important;
  text-shadow:none!important;
  box-shadow:0 10px 24px rgba(47,38,31,.055);
}

main section:not(.lp002-philosophy):not(.lp004-principles):not(.section--dark):not(.dark-section):not(.after):not(.site-footer):not(.nakajp-dark-footer):not(.jp-section-accent[data-jp-accent="deep"]):not([data-jp-tone="dark"])
:is(.btn--ghost,.btn--glass,.btn-secondary,.btn-outline,a.btn--ghost,a.btn-secondary,a.btn-outline,.quick-link,.chip-link) *{
  color:inherit!important;
  text-shadow:none!important;
}

main section:not(.lp002-philosophy):not(.lp004-principles):not(.section--dark):not(.dark-section):not(.after):not(.site-footer):not(.nakajp-dark-footer):not(.jp-section-accent[data-jp-accent="deep"]):not([data-jp-tone="dark"])
:is(.btn--ghost,.btn--glass,.btn-secondary,.btn-outline,a.btn--ghost,a.btn-secondary,a.btn-outline,.quick-link,.chip-link):hover{
  background:#F3EBDD!important;
  color:var(--nk67-brown-dark)!important;
  border-color:rgba(107,79,58,.34)!important;
}

/* Keep primary CTAs premium and readable. */
main section :is(.btn-primary,.btn--primary,.btn--gold,.btn:not(.btn--ghost):not(.btn--glass):not(.btn-secondary):not(.btn-outline),button[type="submit"],.form-submit){
  background:linear-gradient(135deg,var(--nk67-brown),var(--nk67-brown-dark))!important;
  color:#FFFDF8!important;
  border-color:transparent!important;
}

main section :is(.btn-primary,.btn--primary,.btn--gold,.btn:not(.btn--ghost):not(.btn--glass):not(.btn-secondary):not(.btn-outline),button[type="submit"],.form-submit) *{
  color:inherit!important;
}

/* Dark sections keep light ghost buttons. */
:is(.lp002-philosophy,.lp004-principles,.section--dark,.dark-section,.after,.site-footer,.nakajp-dark-footer,.jp-section-accent[data-jp-accent="deep"],.jp-section-accent[data-jp-tone="dark"])
:is(.btn--ghost,.btn--glass,.btn-secondary,.btn-outline){
  background:rgba(255,255,255,.10)!important;
  color:#FFFDF8!important;
  border-color:rgba(255,255,255,.38)!important;
}

/* LP004 style detail: prevent the secondary service CTA from disappearing. */
.lp004 .lp004-style-detail .btn--ghost,
.lp004 .lp004-style-detail .btn-secondary,
.lp004 .lp004-style-detail .btn-outline,
.lp004 [data-style-detail-cta] + .btn--ghost{
  background:#FFFDF8!important;
  color:var(--nk67-brown-dark)!important;
  border:1px solid var(--nk67-line-strong)!important;
  box-shadow:0 12px 30px rgba(47,38,31,.07)!important;
}

/* LP005 quote-review hero eyebrow and light buttons. */
.quote-review .hero-copy .eyebrow,
body.quote-review .slide-hero .hero-copy .eyebrow{
  background:rgba(255,253,248,.98)!important;
  color:var(--nk67-brown-dark)!important;
  border:1px solid rgba(107,79,58,.22)!important;
  box-shadow:0 10px 26px rgba(47,38,31,.10)!important;
  text-shadow:none!important;
}

.quote-review .hero-copy .eyebrow *,
body.quote-review .slide-hero .hero-copy .eyebrow *{
  color:inherit!important;
  text-shadow:none!important;
}

/* Floating phone/Zalo: keep a clean vertical stack without hiding content. */
:is(.phone-float,.zalo-float,.floating-phone,.floating-zalo,.zalo-chat-widget){
  box-shadow:0 16px 38px rgba(47,38,31,.16)!important;
}

@media (min-width:1024px){
  .zalo-chat-widget,
  .zalo-float{
    right:24px!important;
    bottom:24px!important;
  }
  .phone-float,
  .floating-phone{
    right:24px!important;
    bottom:94px!important;
  }
}

@media (max-width:1023px){
  .section-rhythm{
    border-top:1px solid rgba(107,79,58,.08);
  }
}


/* =========================================================
   Phase68 — Desktop floating contact normalization
   Scope:
   - Desktop: remove floating phone icons and use one direct chat pill.
   - Mobile: keep compact Zalo bubble / sticky CTA behavior.
   - No form/tracking schema changes.
========================================================= */

@media (min-width: 1024px){
  /* Remove floating phone-only icons on desktop.
     Header/footer phone links remain available; this only removes the side/bottom icon UI. */
  .fixed-contact,
  .floating-contact,
  .contact-pill.phone,
  .floating-contact-item.is-phone,
  .phone-float,
  .floating-phone,
  body.nakajp-lp003 .floating{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  /* Avoid duplicated Zalo plugin bubble on desktop; keep tracked direct-chat anchor. */
  .zalo-chat-widget,
  .zalo-float,
  .floating-zalo{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .zalo-track-overlay{
    position:fixed!important;
    right:24px!important;
    bottom:24px!important;
    z-index:9050!important;
    width:auto!important;
    min-width:154px!important;
    max-width:calc(100vw - 48px)!important;
    height:52px!important;
    min-height:52px!important;
    padding:0 22px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    border-radius:999px!important;
    background:#6B4F3A!important;
    color:#fff!important;
    border:1px solid rgba(255,255,255,.28)!important;
    box-shadow:0 16px 38px rgba(47,38,31,.22)!important;
    font-size:14px!important;
    font-weight:850!important;
    line-height:1!important;
    letter-spacing:.01em!important;
    text-decoration:none!important;
    opacity:1!important;
    transform:none!important;
  }

  .zalo-track-overlay::before{
    content:"";
    width:8px!important;
    height:8px!important;
    border-radius:999px!important;
    background:#D7B56D!important;
    box-shadow:0 0 0 5px rgba(215,181,109,.18)!important;
    flex:0 0 auto!important;
  }

  .zalo-track-overlay:hover{
    background:#5A402D!important;
    color:#fff!important;
    transform:translateY(-1px)!important;
    box-shadow:0 18px 44px rgba(47,38,31,.28)!important;
  }
}

@media (max-width: 1023px){
  /* Mobile keeps a compact bubble so it does not compete with sticky CTA. */
  .zalo-track-overlay{
    font-size:0!important;
    line-height:1!important;
  }

  .zalo-track-overlay::after{
    content:"Zalo";
    font-size:13px!important;
    font-weight:900!important;
    color:#1264ff!important;
    line-height:1!important;
  }
}
/* =========================================================
   Phase68 style10 fix3 — minimal visual corrections only
   Keeps original header/hero/video/section/component structure.
========================================================= */

/* Header: preserve the original component and prevent awkward line wrapping. */
@media (min-width: 1024px){
  .site-header .header-inner{
    gap:18px!important;
  }
  .site-header .nav,
  .site-header .header-cta{
    min-width:0;
  }
  .site-header .nav a,
  .site-header .header-cta .btn{
    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
  .site-header .nav{
    gap:18px!important;
  }
  .site-header .header-cta{
    gap:10px!important;
  }
  .site-header .header-cta .btn{
    padding-left:18px!important;
    padding-right:18px!important;
    font-size:15px!important;
  }
}
@media (min-width:1024px) and (max-width:1240px){
  .site-header .nav{gap:12px!important}
  .site-header .nav a{font-size:14px!important}
  .site-header .header-cta .btn{font-size:14px!important;padding-left:14px!important;padding-right:14px!important}
}

/* Floating Zalo: use the tracked direct-link pill and suppress the broken plugin shell. */
@media (min-width:1024px){
  .zalo-chat-widget{display:none!important}
  .zalo-track-overlay{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:154px!important;
    min-height:52px!important;
    padding:0 20px!important;
    border-radius:999px!important;
    background:#6b4f3a!important;
    color:#fff!important;
    font-weight:800!important;
    text-decoration:none!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    box-shadow:0 14px 34px rgba(47,38,31,.22)!important;
  }
  .zalo-track-overlay:hover,
  .zalo-track-overlay:focus-visible{
    transform:translateY(-2px);
    box-shadow:0 18px 38px rgba(47,38,31,.28)!important;
    outline:2px solid rgba(255,255,255,.9);
    outline-offset:3px;
  }
}

/* LP004: temporarily hide style media only; retain all original card/detail DOM. */
body.lp004 .lp004-style-cover,
body.lp004 .lp004-style-album,
body.lp004 [data-gallery-dialog]{
  display:none!important;
}
body.lp004 .lp004-style-detail{
  grid-template-columns:minmax(0,1fr)!important;
}
body.lp004 .lp004-style-card{
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
body.lp004 .lp004-style-card:hover,
body.lp004 .lp004-style-card:focus-visible{
  transform:translateY(-3px);
}
@media (prefers-reduced-motion:reduce){
  body.lp004 .lp004-style-card,
  .zalo-track-overlay{transition:none!important;transform:none!important}
}

/* =========================================================
   PHASE68 SYSTEM — JAPANESE QUIET LUXURY FIX 1
   Shared visual polish only; no form/tracking/backend changes.
   ========================================================= */
:root {
  --jp-paper: #fcfbf8;
  --jp-ivory: #f7f5f0;
  --jp-stone: #eae6df;
  --jp-sand: #ddd4c7;
  --jp-sumi: #25221f;
  --jp-deep: #33302b;
  --jp-hinoki: #795f48;
  --jp-brass: #a58a5a;
  --jp-line: rgba(37, 34, 31, .14);
  --jp-line-strong: rgba(37, 34, 31, .24);
  --jp-radius-sm: 8px;
  --jp-radius-md: 14px;
  --jp-radius-lg: 22px;
  --jp-shadow-soft: 0 12px 36px rgba(37, 34, 31, .08);
  --jp-shadow-hover: 0 20px 48px rgba(37, 34, 31, .12);
  --jp-ease: cubic-bezier(.2, .7, .2, 1);
  --jp-duration-fast: 180ms;
  --jp-duration-base: 280ms;
  --jp-duration-slow: 600ms;
  --jp-section-space: clamp(64px, 8vw, 112px);
}

html { scroll-behavior: smooth; }
body {
  color: var(--jp-sumi);
  background: var(--jp-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body, button, input, select, textarea { font-weight: 400; }
p, .lead { line-height: 1.75; }
.container { width: min(100% - 40px, 1180px); }
.section,
.section-rhythm,
.article-section,
section[class*="section"] {
  scroll-margin-top: 92px;
}
.section-rhythm { padding-block: var(--jp-section-space); }
.section-rhythm--paper,
.section-white,
.section--white { background: var(--jp-paper) !important; }
.section-rhythm--warm,
.section-soft,
.section--soft,
.section--warm { background: var(--jp-ivory) !important; }
.section-rhythm--mist:not(.trust-platform-section),
.section--surface { background: var(--jp-stone) !important; }

h1, h2, h3, .section-title, .section-head h2, .section-header h2 {
  color: var(--jp-sumi);
  letter-spacing: -.025em;
  text-wrap: balance;
}
h1 { line-height: 1.08; font-weight: 600; }
h2, .section-title { line-height: 1.16; font-weight: 600; }
h3 { line-height: 1.3; font-weight: 600; }
.eyebrow, .section-label {
  color: var(--jp-hinoki);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.section-head p,
.section-header p,
.lead { max-width: 760px; }
.text-center .lead,
.section-head.text-center p,
.section-header.text-center p { margin-inline: auto; }

/* Buttons and links */
.btn,
.btn-primary,
.inline-cta,
button[type="submit"] {
  min-height: 48px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .005em;
  transition:
    transform var(--jp-duration-base) var(--jp-ease),
    background-color var(--jp-duration-base) var(--jp-ease),
    border-color var(--jp-duration-base) var(--jp-ease),
    color var(--jp-duration-base) var(--jp-ease),
    box-shadow var(--jp-duration-base) var(--jp-ease);
}
.btn--gold,
.btn-primary,
.btn.primary,
button[type="submit"] {
  background: var(--jp-deep);
  border-color: var(--jp-deep);
  color: #fff;
  box-shadow: none;
}
.btn--ghost,
.btn.secondary {
  background: transparent;
  border-color: var(--jp-line-strong);
  color: var(--jp-sumi);
}
@media (hover:hover) and (pointer:fine) {
  .btn:hover,
  .btn-primary:hover,
  .inline-cta:hover,
  button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: var(--jp-shadow-soft);
  }
  .btn--gold:hover,
  .btn-primary:hover,
  button[type="submit"]:hover {
    background: var(--jp-hinoki);
    border-color: var(--jp-hinoki);
  }
  .btn--ghost:hover {
    background: var(--jp-ivory);
    border-color: var(--jp-hinoki);
  }
}
.btn:focus-visible,
.btn-primary:focus-visible,
.inline-cta:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(165, 138, 90, .28);
  outline-offset: 3px;
}

/* Shared interactive surfaces */
.service-card, .project-card, .style-card, .lp004-style-card,
.info-card, .card, .value-card, .team-card, .stat-card,
.lp002-fit-card, .lp002-contrast-card, .lp004-related-card,
.reason-copy-card, .zero-card, .trust-item, .pill-card {
  border-color: var(--jp-line);
  box-shadow: none;
  transition:
    transform var(--jp-duration-base) var(--jp-ease),
    border-color var(--jp-duration-base) var(--jp-ease),
    box-shadow var(--jp-duration-base) var(--jp-ease),
    background-color var(--jp-duration-base) var(--jp-ease);
}
@media (hover:hover) and (pointer:fine) {
  .service-card:hover, .project-card:hover, .style-card:hover,
  .lp004-style-card:hover, .info-card:hover, .card:hover,
  .value-card:hover, .team-card:hover, .stat-card:hover,
  .lp002-fit-card:hover, .lp002-contrast-card:hover,
  .lp004-related-card:hover, .reason-copy-card:hover, .zero-card:hover {
    transform: translateY(-5px);
    border-color: var(--jp-line-strong);
    box-shadow: var(--jp-shadow-hover);
  }
  .service-card img, .project-card img, .style-card img,
  .lp004-style-card img, .team-card img, .info-card img {
    transition: transform var(--jp-duration-slow) var(--jp-ease);
  }
  .service-card:hover img, .project-card:hover img, .style-card:hover img,
  .lp004-style-card:hover img, .team-card:hover img, .info-card:hover img {
    transform: scale(1.03);
  }
}

/* Forms */
.form-field label,
.form-field-label { color: var(--jp-deep); font-weight: 600; }
.form-field input,
.form-field select,
.form-field textarea,
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
select, textarea {
  border: 1px solid var(--jp-line-strong);
  border-radius: var(--jp-radius-sm);
  background: rgba(255,255,255,.88);
  color: var(--jp-sumi);
  transition:
    border-color var(--jp-duration-fast) ease,
    box-shadow var(--jp-duration-fast) ease,
    background-color var(--jp-duration-fast) ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
input:not([type="hidden"]):focus,
select:focus, textarea:focus {
  border-color: var(--jp-brass);
  box-shadow: 0 0 0 4px rgba(165,138,90,.12);
  background: #fff;
}
button[disabled], .btn[aria-disabled="true"] {
  opacity: .62;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Header/navigation: preserve DOM, reduce wrapping and add restrained states */
.site-header, header.site-header, .header {
  transition: background-color var(--jp-duration-base) ease,
              border-color var(--jp-duration-base) ease,
              box-shadow var(--jp-duration-base) ease;
}
.site-header.jp-header-scrolled,
header.jp-header-scrolled,
.header.jp-header-scrolled {
  background: rgba(252,251,248,.97);
  border-bottom-color: var(--jp-line);
  box-shadow: 0 8px 28px rgba(37,34,31,.06);
}
.site-header nav a,
.main-nav a,
.header-nav a,
nav a {
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  transition: color var(--jp-duration-fast) ease,
              text-decoration-color var(--jp-duration-fast) ease;
}
@media (min-width: 1024px) {
  .site-header nav a, .main-nav a, .header-nav a { white-space: nowrap; }
  .header-inner { gap: clamp(14px, 2vw, 30px); }
  .site-header .btn, .header .btn { white-space: nowrap; padding-inline: 18px; }
}
@media (hover:hover) and (pointer:fine) {
  .site-header nav a:hover, .main-nav a:hover, .header-nav a:hover {
    color: var(--jp-hinoki);
    text-decoration-color: var(--jp-brass);
  }
}

/* FAQ */
details summary,
.faq-question,
.faq-header {
  transition: color var(--jp-duration-fast) ease,
              background-color var(--jp-duration-fast) ease;
}
@media (hover:hover) and (pointer:fine) {
  details summary:hover, .faq-question:hover, .faq-header:hover {
    color: var(--jp-hinoki);
  }
}

/* Floating actions and sticky safe-area */
.floating-actions,
.floating-contact,
.floating-chat,
.mobile-sticky,
.mobile-sticky-cta {
  max-width: calc(100vw - 24px);
}
.floating-actions a,
.floating-contact a,
.floating-chat a {
  box-shadow: 0 10px 28px rgba(37,34,31,.14);
  transition: transform var(--jp-duration-base) var(--jp-ease),
              box-shadow var(--jp-duration-base) var(--jp-ease);
}
@media (hover:hover) and (pointer:fine) {
  .floating-actions a:hover,
  .floating-contact a:hover,
  .floating-chat a:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(37,34,31,.18);
  }
}
@media (max-width: 767px) {
  .mobile-sticky, .mobile-sticky-cta {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  body { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
}

/* Safe progressive scroll reveal: content is hidden only after JS activates system */
.jp-reveal-ready [data-jp-reveal] {
  opacity: 0;
  transform: translateY(20px);
}
.jp-reveal-ready [data-jp-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--jp-duration-slow) var(--jp-ease),
    transform var(--jp-duration-slow) var(--jp-ease);
  transition-delay: var(--jp-reveal-delay, 0ms);
}

/* Hero entrance, once only */
.jp-reveal-ready .hero [data-jp-hero],
.jp-reveal-ready [class*="hero"] [data-jp-hero] {
  opacity: 0;
  transform: translateY(18px);
}
.jp-reveal-ready .hero [data-jp-hero].is-visible,
.jp-reveal-ready [class*="hero"] [data-jp-hero].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--jp-ease), transform 620ms var(--jp-ease);
  transition-delay: var(--jp-reveal-delay, 0ms);
}

/* Mobile typography and overflow guard */
img, video, iframe { max-width: 100%; }
body { overflow-x: clip; }
@media (max-width: 767px) {
  .container { width: min(100% - 28px, 1180px); }
  h1 { font-size: clamp(2rem, 9vw, 3rem); }
  h2, .section-title { font-size: clamp(1.65rem, 7vw, 2.35rem); }
  .section-rhythm { padding-block: clamp(52px, 14vw, 76px); }
  .btn, .btn-primary, button[type="submit"] { min-height: 50px; }
  .hero p, [class*="hero"] p { max-width: 38rem; }
}

/* LP004: retain card DOM, media hidden until final approved assets */
.lp004-style-card .lp004-style-media,
.lp004-style-card [class*="style-media"],
.lp004-style-card figure,
.lp004-style-card > img {
  display: none !important;
}
.lp004-style-card[aria-selected="true"],
.lp004-style-card.is-selected,
.lp004-style-card.selected {
  border-color: var(--jp-brass);
  box-shadow: 0 0 0 3px rgba(165,138,90,.14), var(--jp-shadow-soft);
}

/* Reduced motion is mandatory */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .jp-reveal-ready [data-jp-reveal],
  .jp-reveal-ready [data-jp-hero] {
    opacity: 1 !important;
    transform: none !important;
  }
}