/* ============================================================
   Raisa Enterprise Group — Landing Page
   Design tokens: deep steel navy + industrial safety orange,
   condensed industrial display type, mono for manifest/data feel.
============================================================ */

:root{
  --navy:      #0E1B2A;
  --navy-2:    #142438;
  --navy-3:    #1B2E46;
  --signal:    #FF6A2C;
  --signal-2:  #FF8A54;
  --paper:     #EDE7DA;
  --ink:       #1B2430;
  --steel:     #8494AA;
  --steel-dim: #5C6B80;
  --line:      #2B3B50;
  --line-lt:   #D8D0BE;

  --display: 'Oswald', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--navy); color:var(--paper);
  font-family:var(--body); line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display); font-weight:600; margin:0 0 .4em; letter-spacing:.01em; text-transform:uppercase}
p{margin:0 0 1em}
a{color:inherit}
.mono{font-family:var(--mono)}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px}
img{max-width:100%; display:block}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--signal); outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ---------- stamp bar ---------- */
.stampbar{background:var(--signal); color:var(--navy); font-size:.72rem; letter-spacing:.06em}
.stampbar-in{display:flex; justify-content:space-between; padding:6px 24px; font-weight:500}
.stampbar-right{opacity:.85}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(14,27,42,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line)}
.site-header-in{display:flex; align-items:center; gap:28px; padding:16px 24px}
.brand{font-family:var(--display); font-size:1.15rem; letter-spacing:.03em; text-decoration:none; font-weight:600}
.brand-accent{color:var(--signal)}
.nav{display:flex; gap:24px; margin-left:auto; font-size:.92rem}
.nav a{text-decoration:none; color:var(--steel); transition:color .15s}
.nav a:hover{color:var(--paper)}
.nav-cta{margin-left:8px}
.nav-toggle{display:none; background:none; border:0; color:var(--paper); font-size:1.3rem; cursor:pointer}

@media (max-width:820px){
  .nav{position:absolute; top:100%; left:0; right:0; background:var(--navy-2); flex-direction:column; padding:16px 24px; gap:14px; border-bottom:1px solid var(--line); display:none}
  .nav.open{display:flex}
  .nav-cta{display:none}
  .nav-toggle{display:block}
}

/* ---------- buttons ---------- */
.btn{display:inline-block; padding:12px 22px; border-radius:2px; font-weight:600; font-size:.88rem; text-decoration:none; letter-spacing:.03em; text-transform:uppercase; border:1px solid transparent; cursor:pointer; transition:.15s}
.btn-primary{background:var(--signal); color:var(--navy)}
.btn-primary:hover{background:var(--signal-2)}
.btn-outline{border-color:var(--steel-dim); color:var(--paper)}
.btn-outline:hover{border-color:var(--paper)}
.btn-ghost{border-color:var(--line); color:var(--paper); font-size:.8rem; padding:9px 16px}
.btn-ghost:hover{border-color:var(--signal); color:var(--signal)}

/* ---------- hero ---------- */
.hero{position:relative; padding:96px 0 140px; overflow:hidden}
.hero-in{max-width:760px}
.eyebrow{color:var(--signal); font-size:.78rem; letter-spacing:.1em; margin-bottom:18px}
.hero-title{font-size:clamp(2.6rem,7vw,5.2rem); line-height:.98; margin-bottom:24px}
.hero-title .stroke{color:transparent; -webkit-text-stroke:2px var(--signal)}
.hero-sub{color:var(--steel); max-width:540px; font-size:1.05rem}
.hero-actions{display:flex; gap:14px; margin-top:12px; flex-wrap:wrap}

.route{position:absolute; left:0; right:0; bottom:36px; height:40px}
.route-line{position:absolute; left:6%; right:7%; top:50%; height:1px; background:var(--line)}
.route-pt{position:absolute; top:50%; transform:translate(-50%,-50%); width:8px; height:8px; border-radius:50%; background:var(--signal)}
.route-pt::after{content:attr(data-label); position:absolute; top:14px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:.62rem; letter-spacing:.05em; color:var(--steel-dim); white-space:nowrap}
@media (max-width:700px){ .route{display:none} }

/* ---------- section scaffolding ---------- */
section{padding:88px 0}
.section-tag{color:var(--signal); font-size:.78rem; letter-spacing:.08em; margin-bottom:14px}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* ---------- divisions ---------- */
.divisions{background:var(--navy-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.div-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.div-card{background:var(--navy-2); padding:32px 28px}
.div-no{color:var(--signal); font-size:.8rem; letter-spacing:.05em}
.div-card h3{margin-top:10px; font-size:1.4rem}
.div-card p{color:var(--steel); font-size:.94rem}
.div-tag{display:inline-block; margin-top:6px; font-size:.76rem; color:var(--steel-dim); letter-spacing:.03em; text-transform:uppercase}
@media (max-width:820px){ .div-grid{grid-template-columns:1fr} }

/* ---------- about / stats (paper break) ---------- */
.about{background:var(--paper); color:var(--ink)}
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start}
.about-copy h2{font-size:1.9rem; max-width:480px}
.about-copy p{color:#4B5563; max-width:460px}
.about .section-tag{color:#B24A17}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.stat{border-left:3px solid var(--signal); padding-left:16px}
.stat-num{display:block; font-size:2.1rem; font-weight:500; color:var(--ink)}
.stat-label{font-size:.82rem; color:#6B7280; text-transform:uppercase; letter-spacing:.03em}
@media (max-width:820px){ .about-grid{grid-template-columns:1fr; gap:36px} }

/* ---------- leadership ---------- */
.leadership-h{font-size:2rem; margin-bottom:36px}
.crew{border-top:1px solid var(--line)}
.crew-row{display:grid; grid-template-columns:90px 260px 1fr; gap:24px; padding:22px 0; border-bottom:1px solid var(--line); align-items:start}
.crew-id{color:var(--signal); font-size:.85rem; padding-top:4px}
.crew-info h3{font-size:1.15rem; margin-bottom:2px}
.crew-role{color:var(--steel); font-size:.85rem}
.crew-bio{color:var(--steel); font-size:.92rem; margin:0}
@media (max-width:760px){
  .crew-row{grid-template-columns:1fr; gap:6px}
  .crew-id{padding-top:0}
}

/* ---------- contact ---------- */
.contact{background:var(--navy-2); border-top:1px solid var(--line)}
.contact-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:56px}
.contact-copy{color:var(--steel); max-width:420px}
.contact-info{list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:8px; font-size:.9rem; color:var(--steel)}
.contact-form{display:grid; gap:16px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.contact-form label{display:flex; flex-direction:column; gap:6px; font-size:.82rem; color:var(--steel); letter-spacing:.02em}
.contact-form label.full{grid-column:1/-1}
.contact-form input, .contact-form textarea, .contact-form select{
  background:var(--navy); border:1px solid var(--line); color:var(--paper); padding:11px 12px; border-radius:2px; font:inherit; font-size:.92rem;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{border-color:var(--signal)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.form-status{min-height:1.2em; font-size:.82rem; color:var(--signal)}
@media (max-width:820px){ .contact-grid{grid-template-columns:1fr; gap:40px} .form-row{grid-template-columns:1fr} }

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line); padding:24px 0; font-size:.82rem; color:var(--steel-dim)}
.footer-in{display:flex; justify-content:space-between}