/* Đông Nam landing FOUNDATION — loaded once by the plugin landing template.
   Owns the .ndn-lp scope: design tokens, base reset/typography, the single
   paper-grain overlay, the container, and the shared cross-section utilities
   (.section-label / .ndn-title / .section-sub, .btn variants, scroll-reveal,
   .sr-only). Each ndn/* block ships only its own section CSS on top of this.
   Tokens live on .ndn-lp (not :root) so the plugin adds zero global footprint. */

.page-template-ndn-landing .wd-page-title {
  display: none;
}

.page-template-ndn-landing .wd-page-content.main-page-wrapper {
  padding-top: 0;
}

.page-template-ndn-landing #main-content.container,
.page-template-ndn-landing .wd-content-layout.container {
  width: 100%;
  max-width: none;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

.ndn-lp {
  --navy: #0E2A4D;
  --navy-2: #1B4B8C;
  --navy-ink: #0a1f3a;
  --red: #C0392B;
  --red-deep: #8E2A1F;
  --cream: #FBF8F1;
  --cream-2: #F4EFE2;
  --paper: #FAF6EC;
  --stone: #D3D1C7;
  --ink: #1a1a1a;
  --ink-2: #444441;
  --muted: #6b6a65;
  --line: #e5e2d6;
  --gold: #B08A3E;
  --radius: 4px;
  --radius-lg: 8px;
  --max: 1240px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --surface: #ffffff;

  font-family: 'Be Vietnam Pro', -apple-system, sans-serif;
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
  width: 100%;
}

.ndn-lp * { box-sizing: border-box; margin: 0; padding: 0; }
.ndn-lp :where(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  font-family: inherit;
  /* Let the browser balance heading line lengths so a short last word never
     orphans onto its own line. Systemic: any heading (current or future edited
     copy) stays tidy without a per-heading font tweak + redeploy. Degrades to
     normal wrapping on engines without text-wrap support. */
  text-wrap: balance;
}
.ndn-lp :where(p, a, button, input, textarea, select, li, span) {
  font-family: inherit;
}

/* Single paper-grain texture overlay (one .ndn-lp wrapper per page). */
.ndn-lp::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .4; mix-blend-mode: multiply; z-index: 1;
}

.ndn-lp > * { position: relative; z-index: 2; }
.ndn-lp .ndn-lp-main { width: 100%; }

.ndn-lp .ndn-container { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* Shared section heading utilities. */
.ndn-lp .section-label {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--red); margin-bottom: 14px; display: flex; align-items: center; gap: 14px;
  font-weight: 500;
}
.ndn-lp .section-label::before { content: ""; width: 32px; height: 1px; background: var(--red); }
.ndn-lp .ndn-title {
  font-family: inherit; font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 400; line-height: 1.1; letter-spacing: -.02em;
  color: var(--navy-ink); margin-bottom: 18px;
}
.ndn-lp .ndn-title em { font-style: normal; color: var(--red); }
.ndn-lp .section-sub {
  font-size: 16px; color: var(--muted); max-width: 680px; font-family: inherit;
  font-style: italic; font-weight: 300; line-height: 1.65;
}

/* Shared buttons. */
.ndn-lp .btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; border-radius: var(--radius);
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
  text-decoration: none; cursor: pointer; border: none;
  font-family: inherit; transition: all .25s;
}
.ndn-lp .btn-red { background: var(--red); color: #fff; }
.ndn-lp .btn-red:hover { background: var(--red-deep); transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(192,57,43,.6); }
.ndn-lp .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
.ndn-lp .btn-ghost:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* Shared Contact Form 7 styling — every ndn/* form embed renders the
   bounded CF7 shortcode inline, so the raw theme/CF7 controls are restyled once here
   to match the brand (rounded fields, navy focus ring, red submit). Both the commit
   and registration form sections share this; scoped to .ndn-lp so the
   plugin keeps zero global footprint. */
.ndn-lp .wpcf7 { text-align: left; }
.ndn-lp .wpcf7-form p { margin: 0 0 14px; }
.ndn-lp .wpcf7-form-control-wrap { display: block; }
.ndn-lp .wpcf7-form input[type="text"],
.ndn-lp .wpcf7-form input[type="tel"],
.ndn-lp .wpcf7-form input[type="email"],
.ndn-lp .wpcf7-form input[type="number"],
.ndn-lp .wpcf7-form select,
.ndn-lp .wpcf7-form textarea {
  width: 100%; padding: 13px 16px; font-size: 15px; font-family: inherit;
  color: var(--navy-ink); background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); outline: none; line-height: 1.4;
  -webkit-appearance: none; appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.ndn-lp .wpcf7-form textarea { min-height: 110px; resize: vertical; }
.ndn-lp .wpcf7-form ::placeholder { color: #9b9a93; opacity: 1; }
.ndn-lp .wpcf7-form input:focus,
.ndn-lp .wpcf7-form select:focus,
.ndn-lp .wpcf7-form textarea:focus {
  border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(27,75,140,.12);
}
.ndn-lp .wpcf7-form input[type="submit"],
.ndn-lp .wpcf7-form .wpcf7-submit {
  width: 100%; margin-top: 6px; padding: 15px 24px;
  font-size: 15px; font-weight: 600; letter-spacing: .02em;
  color: #fff; background: var(--red); border: none;
  border-radius: var(--radius-lg); cursor: pointer; font-family: inherit;
  -webkit-appearance: none; appearance: none;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.ndn-lp .wpcf7-form input[type="submit"]:hover,
.ndn-lp .wpcf7-form .wpcf7-submit:hover {
  background: var(--red-deep); transform: translateY(-1px);
  box-shadow: 0 12px 24px -10px rgba(192,57,43,.6);
}
.ndn-lp .wpcf7-form input[type="submit"]:disabled,
.ndn-lp .wpcf7-form .wpcf7-submit:disabled { opacity: .6; cursor: default; transform: none; }
.ndn-lp .wpcf7-spinner { margin: 0 0 0 10px; }
.ndn-lp .wpcf7-not-valid-tip { color: var(--red); font-size: 12px; margin-top: 4px; display: block; }
.ndn-lp .wpcf7-form .wpcf7-not-valid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(192,57,43,.12); }
.ndn-lp .wpcf7-response-output {
  margin: 14px 0 0; padding: 10px 14px; border-radius: var(--radius);
  font-size: 13px; line-height: 1.5;
}
/* The shared Biotem CF7 form ships tracking/anti-spam fields meant to be hidden
   (a gclid hidden input padded with <br>s, and a "pardot_extra_field" honeypot).
   On this landing they render as large empty gaps, so collapse their wrappers.
   Keep the guard generic enough for CF7's paragraph/br wrappers, but only
   inside .wpcf7-form and only when no visible form control shares that wrapper. */
.ndn-lp .wpcf7-form p:empty,
.ndn-lp .wpcf7-form p:has(> br:only-child),
.ndn-lp .wpcf7-form p:has(input[type="hidden"]):not(:has(input:not([type="hidden"]), textarea, select, button)) { display: none; }
.ndn-lp .wpcf7-form p:has(> .gclid_field),
.ndn-lp .wpcf7-form p:has(> #gclid_field),
.ndn-lp .wpcf7-form :is(p, div):has(#pardot_extra_field) { display: none; }

/* Scroll reveal (driven by foundation.js). */
.ndn-lp .reveal { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
.ndn-lp .reveal.in { opacity: 1; transform: none; }
.ndn-lp .reveal-left { opacity: 0; transform: translateX(-50px); transition: opacity .8s cubic-bezier(0.16,1,0.3,1), transform .8s cubic-bezier(0.16,1,0.3,1); }
.ndn-lp .reveal-left.active { opacity: 1; transform: translateX(0); }
.ndn-lp .reveal-right { opacity: 0; transform: translateX(50px); transition: opacity .8s cubic-bezier(0.16,1,0.3,1), transform .8s cubic-bezier(0.16,1,0.3,1); }
.ndn-lp .reveal-right.active { opacity: 1; transform: translateX(0); }

/* Accessibility utility. */
.ndn-lp .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Respect reduced motion: reveal elements are always visible. */
@media (prefers-reduced-motion: reduce) {
  .ndn-lp .reveal, .ndn-lp .reveal-left, .ndn-lp .reveal-right { opacity: 1; transform: none; transition: none; }
}