/* =========================================================
   HOME — HERO
   ========================================================= */
.hero{
  position:relative;
  background: var(--forest-2);
  color: #EFEDF9;
  overflow:hidden;
  padding-top: 84px;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(241,97,11,0.20), transparent 55%),
    radial-gradient(ellipse at 85% 80%, rgba(245,138,6,0.16), transparent 55%);
  pointer-events:none;
}
.hero-bg::after{
  content:"";
  position:absolute; inset:0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><circle cx="1" cy="1" r="1" fill="%23EFEDF9" opacity="0.07"/></svg>');
  background-size: 26px 26px;
  opacity: 0.5;
}

.hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items:center;
  padding: 76px 0 60px;
}

.hero-copy .eyebrow{ color: var(--secondary); }
.hero-copy .eyebrow::before{ background: var(--secondary); }

.hero-title{
  font-size: clamp(38px, 4.6vw, 60px);
  color: #FEFDFB;
  margin: 18px 0 22px;
  line-height: 1.08;
}
.hero-title em{
  font-style: normal;
  color: var(--secondary);
}
.hero-desc{
  font-size: 17.5px;
  color: #C8C4E0;
  max-width: 520px;
  margin-bottom: 34px;
}
.hero-ctas{
  display:flex;
  align-items:center;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.hero-ctas .btn-outline{ color:#FEFDFB; border-color: rgba(255,255,255,0.5); }
.hero-ctas .btn-outline:hover{ background:#FEFDFB; color:var(--forest-2); border-color:#FEFDFB; }

.hero-stats{
  display:flex;
  gap: 40px;
  flex-wrap: wrap;
}
.hero-stat b{
  display:block;
  font-family: var(--font-display);
  font-size: 30px;
  color: #FEFDFB;
  font-weight:600;
}
.hero-stat span{
  font-size: 12.5px;
  color: #A9A3CC;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight:600;
}

/* --- Hero visual --- */
.hero-visual{
  position:relative;
  height: 520px;
}
.hv-frame{
  position:absolute;
  border-radius: var(--r-lg);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  border: 5px solid var(--forest-2);
}
.hv-1{ width: 78%; height: 78%; top:0; right:0; }
.hv-1 img{ width:100%; height:100%; object-fit:cover; }
.hv-2{
  width: 52%; height: 46%;
  left:0; bottom:0;
  border-color: var(--ivory);
  z-index:2;
}
.hv-2 img{ width:100%; height:100%; object-fit:cover; }
.hv-badge{
  position:absolute;
  top: 22px; left: -18px;
  z-index:3;
  background: var(--primary);
  color:#fff;
  padding: 14px 20px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  max-width: 190px;
}
.hv-badge b{ display:block; font-family:var(--font-display); font-size:22px; }
.hv-badge span{ font-size:12px; opacity:0.92; }

/* =========================================================
   MARQUEE / STRIP
   ========================================================= */
.strip{
  background: var(--sage);
  border-bottom: 1px solid var(--line);
  overflow:hidden;
  padding: 18px 0;
}
.strip-track{
  display:flex;
  gap: 64px;
  white-space:nowrap;
  animation: marquee 34s linear infinite;
  width: max-content;
}
.strip-item{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--forest);
  font-weight:600;
}
.strip-item svg{ width:16px; height:16px; color:var(--primary); flex-shrink:0; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* =========================================================
   PILLAR CARDS
   ========================================================= */
.pillar-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pillar-card{
  background: var(--paper);
  border-radius: var(--r-lg);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  display:flex;
  flex-direction:column;
}
.pillar-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.pillar-media{ position:relative; height: 210px; overflow:hidden; }
.pillar-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.pillar-card:hover .pillar-media img{ transform: scale(1.06); }
.pillar-num{
  position:absolute; top:16px; left:16px;
  width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,0.94);
  display:flex; align-items:center; justify-content:center;
  color: var(--primary);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.pillar-card:hover .pillar-num{ background: var(--primary); color:#fff; }
.pillar-num svg{ width:18px; height:18px; }
.pillar-body{ padding: 26px 26px 30px; flex:1; display:flex; flex-direction:column; }
.pillar-body h3{ font-size: 21px; margin-bottom: 10px; }
.pillar-body p{ color: var(--ink-soft); font-size: 14.5px; flex:1; margin-bottom:16px; }

/* =========================================================
   IMPACT NUMBERS BAND
   ========================================================= */
.impact-band{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border-radius: var(--r-lg);
  overflow:hidden;
}
.impact-cell{
  background: var(--forest-2);
  padding: 40px 28px;
  text-align:center;
}
.impact-cell b{
  display:block;
  font-family: var(--font-display);
  font-size: 42px;
  color: var(--secondary);
  margin-bottom: 6px;
}
.impact-cell span{
  font-size: 13px;
  color: #C8C4E0;
  letter-spacing:0.02em;
}

/* =========================================================
   PROJECT / EVENT TEASER CARDS
   ========================================================= */
.teaser-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.teaser-card{
  position:relative;
  border-radius: var(--r-lg);
  overflow:hidden;
  height: 320px;
  box-shadow: var(--shadow-sm);
}
.teaser-card img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s var(--ease);
}
.teaser-card:hover img{ transform: scale(1.07); }
.teaser-scrim{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(36,27,82,0) 30%, rgba(36,27,82,0.90) 100%);
}
.teaser-content{
  position:absolute; left:0; right:0; bottom:0;
  padding: 24px;
}
.teaser-tag{
  display:inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 8px;
}
.teaser-content h3{ color:#fff; font-size: 20px; margin-bottom:0; }

/* =========================================================
   LEADERSHIP QUOTES
   ========================================================= */
.leader-strip{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.leader-card{
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: 36px;
  box-shadow: var(--shadow-sm);
  position:relative;
}
.leader-quote-mark{
  font-family: var(--font-display);
  font-size: 64px;
  color: var(--sage-2);
  line-height:0.4;
  position:absolute;
  top:32px; right: 32px;
}
.leader-card p.quote{
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--forest-2);
  line-height:1.5;
  margin-bottom: 22px;
  padding-right: 40px;
}
.leader-person{ display:flex; align-items:center; gap:14px; }
.leader-person img{ width:52px; height:52px; border-radius:50%; object-fit:cover; }
.leader-person b{ display:block; font-size:15px; color:var(--ink); }
.leader-person span{ font-size:13px; color:var(--ink-soft); }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{
  background: linear-gradient(120deg, var(--forest) 0%, var(--forest-2) 100%);
  border-radius: var(--r-lg);
  padding: 60px 64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 32px;
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:"";
  position:absolute; right:-60px; top:-60px;
  width:260px; height:260px; border-radius:50%;
  background: rgba(245,138,6,0.16);
}
.cta-band-text{ position:relative; z-index:1; max-width:560px; }
.cta-band-text .eyebrow{ color: var(--secondary); }
.cta-band-text .eyebrow::before{ background:var(--secondary); }
.cta-band-text h2{ color:#FEFDFB; font-size: clamp(26px,3vw,36px); margin: 14px 0 0; }
.cta-band-actions{ display:flex; gap:16px; flex-wrap:wrap; position:relative; z-index:1; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-visual{ height: 380px; order:-1; }
  .mega-verticals-grid{ grid-template-columns: repeat(3,1fr); }
  .mega-about{ grid-template-columns: 1fr; }
  .mega-feature{ display:none; }
}
@media (max-width: 860px){
  .pillar-grid, .teaser-grid{ grid-template-columns: 1fr; }
  .impact-band{ grid-template-columns: repeat(2,1fr); }
  .leader-strip{ grid-template-columns: 1fr; }
  .cta-band{ padding: 40px 28px; flex-direction:column; align-items:flex-start; }
  .mega-verticals-grid{ grid-template-columns: repeat(2,1fr); }
  .hero-stats{ gap:24px; }
}