/* Louisiana Petrochem & Refining Co. — industrial/petroleum palette
   charcoal masthead, amber/safety-orange accent, warm cream background */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --steel:      #23272b;  /* masthead, footer */
  --steel-2:    #2e3338;  /* gradient pair */
  --amber:      #e89e1c;  /* logo, accents, CTAs */
  --amber-dk:   #b97a10;  /* hover */
  --cream:      #f3ece0;  /* page background */
  --cream-2:    #ebe2d2;  /* alt-row band */
  --paper:      #fdfaf3;  /* card surfaces */
  --ink:        #1a1c1f;  /* heading text */
  --body:       #3b3f44;  /* body text */
  --muted:      #707479;
  --rust:       #8a3a1a;  /* deep accent — pipeline/refinery valves */
}
body  { font-family: "Segoe UI", -apple-system, system-ui, sans-serif;
        line-height: 1.6; color: var(--body); background: var(--cream); }
a     { color: var(--rust); text-decoration: none; }
a:hover { color: var(--amber-dk); text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 1.4rem; }

/* ── masthead ───────────────────────────────────────────────────────── */
.masthead { background: linear-gradient(180deg, var(--steel) 0%, var(--steel-2) 100%);
            color: #ddd6c8; padding: 0.85rem 0; border-bottom: 3px solid var(--amber); }
.masthead .container { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; }
.brand { display: flex; gap: 0.9rem; align-items: center; }
.logo { display: inline-block; width: 48px; height: 48px; background: var(--amber);
        border-radius: 4px; text-align: center; line-height: 48px;
        font-weight: 800; color: var(--steel); letter-spacing: -1px; font-size: 1.05rem;
        box-shadow: 0 1px 0 rgba(0,0,0,.3); }
.company { font-weight: 700; font-size: 1.05rem; color: #fff; letter-spacing: 0.005em; }
.tag { font-size: 0.78rem; opacity: 0.75; letter-spacing: 0.02em; }
nav a { color: #d9d2c3; margin-left: 1.3rem; font-size: 0.92rem;
        font-weight: 500; letter-spacing: 0.01em; }
nav a:hover { color: var(--amber); text-decoration: none; }
nav a.cta { background: var(--amber); color: var(--steel);
            padding: 0.45rem 0.95rem; border-radius: 4px; font-weight: 700; }
nav a.cta:hover { background: var(--amber-dk); color: #fff; }

/* ── hero ───────────────────────────────────────────────────────────── */
.hero { padding: 3.5rem 0 3rem;
        background: linear-gradient(0deg, var(--cream) 0%, var(--paper) 100%);
        border-bottom: 1px solid #d8cfbe; }
.hero h1 { font-size: 2.4rem; line-height: 1.12; max-width: 720px; color: var(--ink); }
.hero .lead { margin-top: 1.1rem; font-size: 1.13rem; max-width: 740px; color: #4a4f55; }
.cta-row { margin-top: 1.8rem; display: flex; gap: 0.8rem; flex-wrap: wrap; }
.btn { background: var(--rust); color: #fff;
       padding: 0.75rem 1.4rem; border-radius: 3px;
       font-weight: 600; font-size: 0.97rem; text-decoration: none; }
.btn:hover { background: #6c2c11; color: #fff; text-decoration: none; }
.btn-outline { background: transparent; color: var(--rust);
               padding: 0.75rem 1.4rem; border-radius: 3px;
               font-weight: 600; font-size: 0.97rem; text-decoration: none;
               border: 2px solid var(--rust); }
.btn-outline:hover { background: var(--rust); color: #fff; text-decoration: none; }

/* ── stats ──────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr);
         gap: 1.1rem; padding: 2.4rem 1.4rem 1.4rem; }
.stat { background: var(--paper); padding: 1.3rem 1rem; border-radius: 4px;
        text-align: center; box-shadow: 0 1px 0 #d8cfbe;
        border-top: 3px solid var(--amber); }
.stat .n { font-size: 1.85rem; font-weight: 800; color: var(--rust);
           letter-spacing: -0.02em; }
.stat .l { font-size: 0.85rem; color: var(--muted);
           margin-top: 0.35rem; text-transform: uppercase; letter-spacing: 0.08em; }

/* ── content blocks (cards, prose) ──────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(2, 1fr);
         gap: 1.2rem; padding: 1.4rem 1.4rem 3rem; }
.card { background: var(--paper); padding: 1.5rem 1.6rem; border-radius: 4px;
        box-shadow: 0 1px 0 #d8cfbe; border-left: 3px solid var(--amber); }
.card h3 { color: var(--rust); margin-bottom: 0.55rem; font-size: 1.18rem; }
.card .meta { font-size: 0.82rem; color: var(--muted); margin-top: 0.7rem;
              text-transform: uppercase; letter-spacing: 0.06em; }

.prose { background: var(--paper); padding: 2.4rem 2.6rem; border-radius: 4px;
         box-shadow: 0 1px 0 #d8cfbe; margin: 2rem 0; }
.prose h2 { margin-top: 1.6rem; padding-top: 0.4rem;
            border-top: 1px solid #e2d8c4; color: var(--ink); font-size: 1.45rem; }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: 1.2rem; color: var(--rust); font-size: 1.1rem; }
.prose p, .prose li { color: var(--body); margin: 0.65rem 0; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin: 0.35rem 0; }
.prose dl { display: grid; grid-template-columns: 180px 1fr;
            gap: 0.55rem 1.2rem; margin: 0.9rem 0; }
.prose dt { font-weight: 700; color: var(--ink); }
.prose dd { color: var(--body); }
.prose table { border-collapse: collapse; margin: 1rem 0; width: 100%; font-size: 0.93rem; }
.prose th, .prose td { padding: 0.55rem 0.85rem; text-align: left;
                       border-bottom: 1px solid #e2d8c4; }
.prose th { background: var(--cream-2); color: var(--ink);
            font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; }

.page-header { background: var(--steel); color: #fff; padding: 2.4rem 0; }
.page-header h1 { color: #fff; font-size: 1.95rem; }
.page-header .crumb { font-size: 0.85rem; opacity: 0.7; margin-bottom: 0.4rem;
                      text-transform: uppercase; letter-spacing: 0.1em; }

/* ── footer ─────────────────────────────────────────────────────────── */
footer { background: var(--steel); color: #b8b1a4; padding: 2.2rem 0 1.4rem;
         margin-top: 3rem; font-size: 0.9rem; border-top: 3px solid var(--amber); }
footer .container > div { margin: 0.35rem 0; }
footer a { color: var(--amber); }
footer a:hover { color: #ffc245; }
footer .legal { font-size: 0.8rem; opacity: 0.7; margin-top: 1rem;
                padding-top: 1rem; border-top: 1px solid #3a3f44; }

/* ── login card (portal + scada) ────────────────────────────────────── */
.login { display: flex; align-items: center; justify-content: center;
         min-height: 100vh; background: var(--cream); padding: 2rem; }
.login-card { background: var(--paper); padding: 2.2rem 2.6rem; border-radius: 4px;
              box-shadow: 0 4px 18px rgba(20,15,5,.10);
              width: 400px; border-top: 3px solid var(--amber); }
.login-card.scada { border-top: 3px solid var(--rust); }
.login-card .brand { margin-bottom: 1rem; }
.login-card h2 { margin: 0.8rem 0 1.3rem; font-size: 1.25rem; color: var(--ink); }
.login-card .version { color: var(--muted); font-size: 0.85rem;
                       margin-bottom: 1rem; font-family: ui-monospace, monospace; }
.login-card label { display: block; margin: 0.65rem 0; font-size: 0.88rem;
                    color: var(--ink); font-weight: 600; }
.login-card label.cb { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.login-card input { width: 100%; padding: 0.6rem 0.8rem;
                    border: 1px solid #c5b9a0; border-radius: 3px;
                    background: #fffdf7; font-size: 0.96rem; margin-top: 0.3rem; }
.login-card input:focus { outline: none; border-color: var(--amber); }
.login-card button { width: 100%; padding: 0.8rem; background: var(--rust);
                     color: #fff; border: 0; border-radius: 3px; font-weight: 700;
                     letter-spacing: 0.04em; text-transform: uppercase;
                     font-size: 0.88rem; cursor: pointer; margin-top: 1rem; }
.login-card button:hover { background: #6c2c11; }
.login-card .forgot { margin-top: 1rem; font-size: 0.83rem;
                      color: var(--muted); text-align: center; }
.login-card .forgot a { color: var(--rust); }
.login-card .legal { margin-top: 1.3rem; font-size: 0.78rem; color: var(--muted); }