/* =========================================================
   Investor Relations — Blue Energy Motors
   Page-specific stylesheet (content only — no header/footer
   rules; your existing site header/footer keep their own CSS)

   Suggested location:  assets/css/investor-relations.css
   Include it from your header/template file, e.g.:
     <link rel="stylesheet" href="<?php echo base_url('assets/css/investor-relations.css'); ?>">

   Loads the Barlow font used across blueenergymotors.com.
   If you already load Barlow globally in your main layout,
   you can delete the @import line below to avoid loading it twice.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,200;0,400;0,500;0,600;0,700&display=swap');

.ir-page{
  --navy:#272660;
  --navy-dark:#1a1948;
  --footer:#090917;
  --bg:#fbfbff;
  --surface:#ffffff;
  --line:#e4e4ee;
  --ink:#0f0f0f;
  --muted:#5c5c6b;

  font-family:'Barlow', sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.ir-page *{box-sizing:border-box;}
.ir-page img{max-width:100%;display:block;}
.ir-page .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
@media (max-width:640px){ .ir-page .wrap{padding:0 20px;} }

/* ---------- scroll-reveal animation (mirrors the AOS fade used on blueenergymotors.com) ---------- */
.ir-page [data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .6s ease, transform .6s ease;
  will-change:opacity, transform;
}
.ir-page [data-reveal="left"]{transform:translateX(-36px);}
.ir-page [data-reveal="right"]{transform:translateX(36px);}
.ir-page [data-reveal].is-visible{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .ir-page [data-reveal]{opacity:1; transform:none; transition:none;}
}
.ir-page .stagger > *{transition-delay:calc(var(--i,0) * 90ms);}

/* ---------- hero ---------- */
.ir-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(120deg,#090917 0%, #171545 45%, var(--navy) 100%);
  padding:96px 0 84px;
  color:#fff;
}
.ir-hero .badge-ring{
  position:absolute; right:-90px; top:50%; transform:translateY(-50%);
  width:420px; height:420px; border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
}
.ir-hero .badge-ring::after{
  content:""; position:absolute; inset:38px; border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
}
.ir-hero-inner{position:relative; z-index:1;}
.ir-hero .eyebrow{
  display:inline-block; font-size:16px; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:#fff; margin-bottom:16px;
}
.ir-hero h1{
  font-weight:700; text-transform:uppercase;
  font-size:clamp(36px,6vw,60px); line-height:1.05; margin:0 0 22px;
  max-width:760px;
}
.ir-hero p{
  font-size:18px; color:rgba(255,255,255,.75); max-width:620px; margin:0;
  font-weight:400;
}

/* ---------- sub nav (in-page section jump links) ---------- */
.ir-subnav{
  position:sticky; top:0; z-index:30;
  background:var(--navy-dark);
}
.ir-subnav .wrap{
  display:flex; gap:2px; overflow-x:auto;
  scrollbar-width:none;
}
.ir-subnav .wrap::-webkit-scrollbar{display:none;}
.ir-subnav a{
  flex:none;
  display:block; padding:16px 18px; font-size:15px; font-weight:400;
  text-transform:uppercase; color:rgba(255,255,255,.72);
  text-decoration:none; border-bottom:3px solid transparent; white-space:nowrap;
  transition:color .2s ease, border-color .2s ease;
}
.ir-subnav a:hover{color:#fff; border-bottom-color:#fff;}

/* If your site header is also sticky, change .ir-subnav's "top" above
   to match its height (e.g. top:80px) so the two don't overlap — and
   update .ir-section's "scroll-margin-top" below to header + subnav
   height combined, so clicking a sub-nav link doesn't tuck the section
   heading behind the sticky bars. */

/* ---------- sections ---------- */
.ir-section{padding:80px 0; position:relative; scroll-margin-top:140px;}
.ir-section .wrap{position:relative; z-index:1;}
.ir-section.alt{
  background:#f2f2f8;
  background-image:repeating-linear-gradient(115deg, rgba(39,38,96,.035) 0 1px, transparent 1px 42px);
}
.ir-section.alt::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:56px;
  background:#f2f2f8; transform-origin:top left; transform:skewY(-1.2deg);
}
/* Decorative corner rings (used on a few sections for visual rhythm) */
.section-decor{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.section-decor .ring{position:absolute; border:1px solid rgba(39,38,96,.12); border-radius:50%;}
.section-decor .ring::after{
  content:""; position:absolute; inset:26px; border-radius:50%; border:1px solid rgba(39,38,96,.10);
}
.section-head{max-width:720px; margin-bottom:44px;}
.ir-section h2{
  text-transform:uppercase;
  font-size:clamp(30px,4vw,42px); font-weight:200; margin:0 0 16px; color:var(--ink);
}
.ir-section .lede{color:var(--muted); font-size:18px; margin:0; font-weight:400;}
.ir-page h3.sub-heading{
  font-size:15px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--navy); margin:0 0 20px;
}

/* ---------- document cards ---------- */
.doc-card{
  display:flex; align-items:center; gap:22px;
  background:var(--surface); border:1px solid var(--line);
  padding:26px 28px; max-width:640px;
}
.doc-icon{
  flex:none; width:52px; height:52px; border-radius:50%;
  background:rgba(39,38,96,.07); display:flex; align-items:center; justify-content:center;
  color:var(--navy);
}
.doc-meta{flex:1; min-width:0;}
.doc-meta .name{font-weight:600; font-size:18px; margin:0 0 4px;}
.doc-meta .desc{font-size:15px; color:var(--muted); margin:0;}
.doc-actions{display:flex; gap:10px; flex:none;}
@media (max-width:560px){
  .doc-card{flex-wrap:wrap;}
  .doc-meta{flex-basis:100%;}
  .doc-actions{flex-basis:100%; margin-top:10px;}
  .doc-actions .btn{flex:1; justify-content:center;}
}
.ir-page .btn{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:400; text-transform:uppercase;
  padding:11px 22px; text-decoration:none; white-space:nowrap;
  border:2px solid var(--navy); color:var(--navy); border-radius:0;
  background:transparent; transition:background .2s ease, color .2s ease;
}
.ir-page .btn.solid{background:var(--navy); color:#fff;}
.ir-page .btn.solid:hover{background:var(--navy-dark); border-color:var(--navy-dark);}
.ir-page .btn:not(.solid):hover{background:var(--navy); color:#fff;}

.doc-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
@media (max-width:900px){ .doc-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .doc-grid{grid-template-columns:1fr;} }
.policy-card{
  background:var(--surface); border:1px solid var(--line);
  padding:26px 22px; text-align:left;
}
.policy-card .doc-icon{margin-bottom:18px;}
.policy-card .name{font-weight:600; font-size:16px; margin:0 0 18px; min-height:40px;}
.policy-card .btn{width:100%; justify-content:center;}

/* ---------- board of directors ---------- */
.board-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
@media (max-width:900px){ .board-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .board-grid{grid-template-columns:1fr;} }
.board-card{
  background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--navy);
  padding:30px 26px 28px; position:relative;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.board-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(9,9,23,.10);
}
.board-card .p-index{
  font-size:13px; font-weight:600; letter-spacing:1px; color:var(--muted);
  margin:0 0 14px;
}
.board-card .p-name{font-size:21px; font-weight:600; margin:0 0 12px; line-height:1.25;}
.board-card .p-role{
  display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.8px;
  text-transform:uppercase; color:var(--navy); border:1px solid var(--navy);
  padding:5px 10px;
}

/* ---------- committees ---------- */
.committee-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:800px){ .committee-grid{grid-template-columns:1fr;} }
.committee-card{
  background:var(--surface); border:1px solid var(--line);
}
.committee-card .c-head{
  background:var(--navy); color:#fff; padding:20px 26px;
  text-transform:uppercase; font-weight:600; font-size:18px;
}
.committee-card ul{list-style:none; margin:0; padding:6px 26px 22px;}
.committee-card li{
  display:flex; justify-content:space-between; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--line); font-size:16px;
}
.committee-card li:last-child{border-bottom:none;}
.committee-card li .m-name{font-weight:500;}
.committee-card li .m-role{color:var(--muted); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap;}

/* ---------- contact cards (registrar / company secretary) ---------- */
.contact-card{
  display:grid; grid-template-columns:1.1fr 1fr; gap:0;
  background:var(--surface); border:1px solid var(--line);
  max-width:900px;
}
@media (max-width:760px){ .contact-card{grid-template-columns:1fr;} }
.contact-card .cc-main{padding:34px 36px;}
.contact-card .cc-side{
  padding:34px 36px; background:#f2f2f8; border-left:1px solid var(--line);
}
@media (max-width:760px){ .contact-card .cc-side{border-left:none; border-top:1px solid var(--line);} }
.contact-card .org{font-weight:600; font-size:20px; margin:0 0 6px; color:var(--navy);}
.contact-card .role{font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:var(--muted); margin:0 0 18px;}
.contact-card p{margin:0 0 10px; font-size:16px;}
.contact-card .label{
  font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:6px;
}
.contact-card .field{margin-bottom:20px;}
.contact-card .field:last-child{margin-bottom:0;}
.contact-card a{color:var(--navy); font-weight:500; text-decoration:none;}
.contact-card a:hover{text-decoration:underline;}
.tbd{color:var(--muted); font-style:italic;}

.note{
  margin-top:18px; font-size:13px; color:var(--muted); max-width:640px;
}