/* ELP Holding — marketing site
   Design tokens sourced from the approved mockup (design_handoff_elp_portal). */

:root {
  --green-900: #0e2e24;
  --green-800: #14684b;
  --green-700: #1c8862;
  --green-500: #34a97a;
  --green-400: #5fc79a;
  --green-300: #8ddcb8;
  --mint-50: #f2fbf6;
  --mint-100: #e4f3ec;
  --white: #ffffff;
  --ink: #0e2e24;
  /* Text-on-light opacity tiers. Values below were raised from the original
     mockup (.65/.55/.45) after measuring actual WCAG contrast ratios against
     white/mint-50/mint-100 -- the originals measured as low as 2.7:1, well
     under the 4.5:1 AA minimum for body text. Names kept as-is to avoid
     touching every call site; the numbers no longer match the alpha value. */
  --ink-72: rgba(14, 46, 36, .72);
  --ink-65: rgba(14, 46, 36, .75);
  --ink-55: rgba(14, 46, 36, .72);
  --ink-45: rgba(14, 46, 36, .68);
  --ink-40: rgba(14, 46, 36, .40);
  --ink-12: rgba(14, 46, 36, .12);
  --ink-10: rgba(14, 46, 36, .10);
  --ink-06: rgba(14, 46, 36, .06);
  --light: #f2fbf6;
  /* Text-on-green opacity tiers, same story: raised to clear 4.5:1 against
     the darkest background each is actually used on (solid --green-800),
     not just the --green-900 end of the hero gradient. */
  --light-82: rgba(242, 251, 246, .82);
  --light-78: rgba(242, 251, 246, .88);
  --light-70: rgba(242, 251, 246, .86);
  --light-60: rgba(242, 251, 246, .82);
  --light-50: rgba(242, 251, 246, .64);
  --light-45: rgba(242, 251, 246, .62);
  --max-content: 1080px;
  --radius-lg: 12px;
  --radius-md: 8px;
  --radius-sm: 7px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green-800); text-decoration: none; }
a:hover { color: var(--green-500); }
::selection { background: rgba(52, 169, 122, .3); }
img, svg { display: block; max-width: 100%; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--green-800);
  color: var(--light);
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
  z-index: 1000;
}
.skip-link:focus { left: 0; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--mint-50);
  border-bottom: 1px solid var(--ink-06);
}

.nav {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark { width: 32px; height: 32px; flex: none; }
.brand-name {
  font: 600 18px/1 'Inter', sans-serif;
  letter-spacing: -.005em;
  color: var(--ink);
  white-space: nowrap;
}

.nav-toggle { display: none; }
.nav-toggle-label {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle-label svg { width: 22px; height: 22px; }
.nav-toggle-label:hover,
.nav-toggle:focus-visible ~ .nav-toggle-label {
  background: var(--ink-06);
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.nav-links a.nav-link {
  font: 400 14px/1 'Inter', sans-serif;
  color: var(--ink-72);
}
.nav-links a.nav-link:hover { color: var(--green-800); }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid var(--ink-12);
  border-radius: 6px;
}
.lang-switch a {
  font: 500 13px/1 'Inter', sans-serif;
  color: var(--ink);
  padding: 2px;
}
.lang-switch a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.lang-switch a:not([aria-current="true"]) { color: var(--ink-45); }
.lang-sep { color: var(--ink-45); font: 400 13px/1 'Inter', sans-serif; }

.btn {
  display: inline-block;
  font: 500 13px/1 'Inter', sans-serif;
  padding: 10px 20px;
  border-radius: 7px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
}
.btn-solid { background: var(--green-800); color: var(--light); }
.btn-solid:hover { background: var(--green-700); color: var(--light); }
.btn-outline { color: var(--green-800); border-color: rgba(20,104,75,.35); background: transparent; }
.btn-outline:hover { background: rgba(20,104,75,.06); color: var(--green-800); }
.btn-light { background: var(--light); color: var(--green-900); }
.btn-light:hover { background: #fff; }
.btn-ghost-light { color: var(--light); border-color: rgba(242,251,246,.50); }
.btn-ghost-light:hover { background: rgba(242,251,246,.10); color: var(--light); }
.btn-block { display: block; width: 100%; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 110px 24px 90px;
  background: linear-gradient(170deg, var(--green-800) 0%, var(--green-900) 100%);
  overflow: hidden;
  text-align: center;
}
.hero-arc { position: absolute; pointer-events: none; }
.hero-arc--1 { right: -120px; top: -120px; width: 480px; height: 480px; opacity: .1; }
.hero-arc--2 { left: -100px; bottom: -140px; width: 360px; height: 360px; opacity: .07; }

.hero-inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.eyebrow {
  font: 500 12px/1 'Inter', sans-serif;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(242, 251, 246, .88);
}
.hero h1 {
  margin: 0;
  font: 300 clamp(32px, 5.5vw, 52px)/1.1 'Inter', sans-serif;
  letter-spacing: -.03em;
  color: var(--light);
}
.hero h1 em { font-style: normal; color: var(--green-300); }
.hero p.lede {
  margin: 0;
  font: 400 17px/1.7 'Inter', sans-serif;
  color: var(--light-78);
  max-width: 520px;
}
.hero-ctas { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.hero-ctas .btn { padding: 14px 30px; font-size: 15px; }

/* ---------- Sections ---------- */
.section { padding: 72px 24px; }
.section-inner { max-width: var(--max-content); margin: 0 auto; }
.eyebrow-dark { color: var(--ink-45); }
.section h2 {
  margin: 0 0 14px;
  font: 300 clamp(26px, 4vw, 34px)/1.15 'Inter', sans-serif;
  letter-spacing: -.02em;
  color: var(--ink);
}
.section p.section-lede {
  margin: 0 0 44px;
  font: 400 16px/1.7 'Inter', sans-serif;
  color: var(--ink-65);
  max-width: 540px;
}

.services { background: var(--white); }
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.card {
  padding: 32px 28px;
  background: var(--mint-50);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.icon-tile {
  width: 46px; height: 46px;
  border-radius: 10px;
  background: rgba(20, 104, 75, .08);
  display: grid;
  place-items: center;
}
.icon-tile svg { width: 22px; height: 22px; stroke: var(--green-800); }
.card h3 { margin: 0; font: 500 17px/1.3 'Inter', sans-serif; color: var(--ink); }
.card p { margin: 0; font: 400 15px/1.7 'Inter', sans-serif; color: var(--ink-65); }

.pillars { background: var(--mint-100); }
.pillar {
  padding: 30px;
  background: var(--white);
  border-radius: 10px;
  border: 1px solid var(--ink-06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pillar .num {
  font: 500 12px/1 'Inter', sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--green-800);
}
.pillar h3 { margin: 0; font: 500 19px/1.25 'Inter', sans-serif; color: var(--ink); }
.pillar p { margin: 0; font: 400 15px/1.7 'Inter', sans-serif; color: var(--ink-65); }

/* ---------- Contact ---------- */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0;
}
.contact-info {
  padding: 64px 24px;
  background: var(--green-800);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}
.contact-info .eyebrow { color: var(--light-60); }
.contact-info h2 { margin: 0; font: 300 30px/1.2 'Inter', sans-serif; letter-spacing: -.02em; color: var(--light); }
.contact-info p { margin: 0; font: 400 15px/1.7 'Inter', sans-serif; color: var(--light-70); max-width: 360px; }
.contact-facts { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.contact-fact { display: flex; align-items: center; gap: 12px; }
.contact-fact svg { width: 18px; height: 18px; stroke: var(--green-300); flex: none; }
.contact-fact span { font: 400 14px/1.5 'Inter', sans-serif; color: var(--light-82); }
.contact-fact a { color: var(--light-82); }
.contact-fact a:hover { color: var(--white); }

.contact-form-wrap {
  padding: 64px 24px;
  background: var(--mint-50);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.contact-form { display: flex; flex-direction: column; gap: 16px; max-width: 400px; margin: 0 auto; width: 100%; }
.field label {
  display: block;
  font: 500 13px/1.4 'Inter', sans-serif;
  color: var(--ink-55);
  margin-bottom: 5px;
}
.field input, .field textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-sm);
  background: var(--white);
  font: 400 15px/1.4 'Inter', sans-serif;
  color: var(--ink);
  outline: none;
}
.field input:focus, .field textarea:focus { border-color: var(--green-500); }
.field textarea { min-height: 90px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-honeypot { position: absolute; left: -9999px; top: -9999px; }

/* ---------- Footer ---------- */
.site-footer { padding: 40px 24px; background: var(--green-900); }
.footer-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand span { font: 400 14px/1 'Inter', sans-serif; color: var(--light-60); }
.footer-brand svg { width: 24px; height: 24px; }
.footer-legal { font: 400 13px/1.5 'Inter', sans-serif; color: var(--light-50); text-align: center; }
.footer-copy { font: 400 13px/1.5 'Inter', sans-serif; color: var(--light-45); }

/* ---------- Sub-page header (About / Contact / Policies) ---------- */
.page-header {
  padding: 64px 24px 48px;
  background: linear-gradient(170deg, var(--green-800) 0%, var(--green-900) 100%);
  text-align: center;
}
.page-header .eyebrow { color: var(--light-60); }
.page-header h1 {
  margin: 10px 0 0;
  font: 300 clamp(28px, 4.5vw, 40px)/1.15 'Inter', sans-serif;
  letter-spacing: -.02em;
  color: var(--light);
}
.page-header p {
  margin: 14px auto 0;
  max-width: 560px;
  font: 400 16px/1.7 'Inter', sans-serif;
  color: var(--light-78);
}

/* ---------- Long-form content (About body / policy text) ---------- */
.prose-section { padding: 64px 24px 88px; background: var(--white); }
.prose { max-width: 720px; margin: 0 auto; }
.prose .meta { font: 500 13px/1.5 'Inter', sans-serif; color: var(--ink-45); margin: 0 0 32px; }
.prose h2 { font: 500 22px/1.3 'Inter', sans-serif; color: var(--ink); margin: 40px 0 14px; }
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { font: 500 17px/1.3 'Inter', sans-serif; color: var(--ink); margin: 28px 0 10px; }
.prose p { font: 400 16px/1.75 'Inter', sans-serif; color: var(--ink-72); margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { font: 400 16px/1.75 'Inter', sans-serif; color: var(--ink-72); margin-bottom: 8px; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose a { text-decoration: underline; }
.prose hr { border: none; border-top: 1px solid var(--ink-10); margin: 40px 0; }

/* About page process steps */
.process-steps { display: flex; flex-direction: column; gap: 20px; margin: 0 0 8px; }
.process-step { display: flex; gap: 18px; align-items: flex-start; }
.process-step .num {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(20, 104, 75, .08);
  color: var(--green-800);
  font: 500 13px/1 'Inter', sans-serif;
  display: grid; place-items: center;
}
.process-step h3 { margin: 4px 0 4px; }
.process-step p { margin: 0; }

/* Contact page (dedicated) reuses .contact-split but as a standalone section */
.contact-page .contact-split { min-height: 0; }
.contact-note {
  margin-top: 22px;
  padding: 14px 16px;
  background: rgba(242, 251, 246, .08);
  border: 1px solid rgba(242, 251, 246, .16);
  border-radius: var(--radius-md);
}
.contact-note p { color: var(--light-70); font-size: 14px; margin: 0; }
.contact-note a { color: inherit; text-decoration: underline; }

/* Homepage/vi-homepage "learn more" links out of the #about and #contact
   teaser sections. Inline style="" attributes don't work here -- this
   site's CSP has no style-src 'unsafe-inline', so the browser silently
   drops any style="" attribute and the element falls back to whatever the
   stylesheet says (which made these links invisible against green-800). */
.section-more { margin: 36px 0 0; }
.contact-more { margin-top: 4px; }
.contact-more a { color: var(--light-70); text-decoration: underline; }

/* Vietnamese subtitle on the partner/customer-portal "coming soon" notices. */
.notice-sub { color: var(--light-70); font-size: 14px; }

/* ---------- Footer policy links ---------- */
.footer-links {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: center;
  order: 2;
}
.footer-links a { font: 400 13px/1.5 'Inter', sans-serif; color: var(--light-60); }
.footer-links a:hover { color: var(--light); }
.footer-legal { order: 3; }
.footer-copy { order: 4; }
.footer-brand { order: 1; }

/* ---------- Notice pages (thank-you / error / coming soon) ---------- */
.notice-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  background: linear-gradient(170deg, var(--green-800) 0%, var(--green-900) 100%);
}
.notice-card {
  max-width: 480px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.notice-card svg.brand-mark { margin: 0 auto; }
.notice-card h1 { margin: 0; font: 300 30px/1.25 'Inter', sans-serif; color: var(--light); letter-spacing: -.02em; }
.notice-card p { margin: 0; font: 400 16px/1.7 'Inter', sans-serif; color: var(--light-78); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr; }
  .contact-split { grid-template-columns: 1fr; }
  .contact-info, .contact-form-wrap { padding: 48px 24px; }
}

@media (max-width: 760px) {
  .nav-toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .nav-toggle-label { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--mint-50);
    border-bottom: 1px solid var(--ink-06);
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px 24px 22px;
  }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-links .btn { width: 100%; }
  .lang-switch { align-self: flex-start; }
  .footer-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 520px) {
  .field-row { grid-template-columns: 1fr; }
  .section { padding: 56px 20px; }
  .hero { padding: 88px 20px 64px; }
}