:root {
  --primary-color: #1e1e1e;
  --accent-color: #ffb100;
  --text-light: #f9f9f9;
  --background: #ffffff;
  --section-background: #f5f5f5;
  --nav-background: rgba(30, 30, 30, 0.9);
  --footer-background: #1e1e1e;
  --divider-color: #ddd;
}

/* Reset & Base */
body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--background);
  color: var(--primary-color);
}
a {
  text-decoration: none;
}

/* Top nav */
.top-nav {
  display: flex;
  align-items: center;
  background: var(--nav-background);
  padding: 0.5em 1em;
}
.logo-small {
  height: 80px;
  margin-right: auto;
}
.top-nav ul {
  display: flex;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
.top-nav li {
  margin: 0 1em;
}
.top-nav a {
  color: var(--text-light);
  font-weight: 600;
  transition: color 0.3s;
}
.top-nav a:hover {
  color: var(--accent-color);
}

/* Hero */
header.hero {
  position: relative;
  text-align: center;
  color: var(--text-light);
}
header.hero img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  opacity: 0.85;
}
header.hero .overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7));
}
header.hero .overlay .logo {
  font-size: 3rem;
  font-weight: 800;
  padding: 0.5em 1em;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  letter-spacing: 2px;
}

/* Primary tagline: appears first */
header.hero .overlay .tagline {
  margin-top: 1em;
  font-size: 2.5rem;
  color: var(--accent-color);
  font-weight: 600;   
  opacity: 0;
  animation: fadeSlideUp 1s ease-out forwards;
  animation-delay: 0.5s; /* half-second after load */
}

/* Secondary tagline: correlated, but delayed */
header.hero .overlay .tagline-small {
  margin-top: 0.5em;
  font-size: 1.5rem;
  color: #ffffff;
  font-weight: 600;
  opacity: 0;
  animation: fadeSlideUp 1s ease-out forwards;
  animation-delay: 1.3s; /* starts after primary finishes */
}

@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

/* Main wrapper + sections */
main {
  max-width: 1100px;
  margin: auto;
  padding: 2em 1em;
}
.section {
  background: var(--section-background);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  margin-bottom: 2em;
  overflow: hidden;
}
.section.active {
  display: block;
}
.section:not(.active) {
  display: none;
}

/* Home unified section */
#home.home-section {
  background: var(--background);
}
#home.home-section .subsection {
  padding: 2em 1.5em;
}
#home.home-section .subsection + .subsection {
  border-top: 1px solid var(--divider-color);
}

/* CTA bar */
.cta-bar {
  background: var(--nav-background);
  color: var(--text-light);
  text-align: center;
}
.cta-bar .btn-quote {
  display: inline-block;
  background: var(--accent-color);
  color: var(--text-light);
  font-weight: 600;
  padding: 0.75em 1.5em;
  border-radius: 5px;
  margin-left: 1em;
}

/* Solutions */
.solutions .intro-title {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}
.solutions .intro-title::before {
  content: '';
  width: 5px;
  height: 1.5em;
  background: var(--accent-color);
  margin-right: 0.75em;
}
.solutions h2 {
  margin: 0;
  font-size: 2rem;
  text-transform: uppercase;
}
.solutions ul {
  padding-left: 1.5em;
  color: #666;
}
.solutions li {
  margin-bottom: 0.75em;
  line-height: 1.4;
}

/* EPC Highlight */
.epc-highlight {
  position: relative;
  background: url('images/background.jpg') center/cover no-repeat;
  color: #fff;
}
.epc-highlight::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(30,30,30,0.7);
}
.epc-highlight .content {
  position: relative;
  max-width: 800px;
  margin: auto;
}
.epc-highlight .subtitle {
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 0.5em;
}
.epc-highlight .main-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0.25em 0 1em;
}
.epc-highlight p {
  line-height: 1.6;
}

/* Services grid & animations */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5em;
  margin-top: 2em;
}
.service-card {
  background: var(--background);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: center;
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}
.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.service-card:nth-child(4) { animation-delay: 0.4s; }
.service-card:nth-child(5) { animation-delay: 0.5s; }
.service-card:nth-child(6) { animation-delay: 0.6s; }
.service-card img {
  width: 100%;
  height: 150px;
  object-fit: contain;
}
.service-card h4 {
  margin: 0.75em 0;
  font-size: 1rem;
  color: var(--primary-color);
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Quality Assurance */
.quality-assurance {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2em;
}
.qa-text, .qa-image {
  flex: 1 1 300px;
  padding: 2em;
}
.qa-image img {
  width: 100%;
  border-radius: 10px;
}
.qa-text h2 {
  margin-top: 0;
}
.qa-text ul {
  padding-left: 1.5em;
  list-style: disc;
}
.qa-text li {
  margin-bottom: 0.75em;
  line-height: 1.4;
}

/* Commitment & Who We Serve */
.commit-serve {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  margin-top: 2em;
}
.commitment, .whom-serve {
  flex: 1 1 300px;
}
.commit-serve ol,
.whom-serve ul {
  padding-left: 1.5em;
  margin-top: 0.5em;
}
.commit-serve li,
.whom-serve li {
  margin-bottom: 0.75em;
  line-height: 1.4;
}

/* Clients logos & animations */
.clients-logos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5em;
  align-items: center;
  margin-top: 2em;
}
.clients-logos > div {
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
}
.clients-logos > div:nth-child(1) { animation-delay: 0.1s; }
.clients-logos > div:nth-child(2) { animation-delay: 0.2s; }
.clients-logos > div:nth-child(3) { animation-delay: 0.3s; }
.clients-logos > div:nth-child(4) { animation-delay: 0.4s; }
.clients-logos > div:nth-child(5) { animation-delay: 0.5s; }
.clients-logos > div:nth-child(6) { animation-delay: 0.6s; }
.clients-logos img {
  max-width: 100%;
  opacity: 0.8;
  transition: opacity 0.3s;
}
.clients-logos img:hover {
  opacity: 1;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* On-scroll reveal for Home subsections */
#home.home-section .subsection {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
#home.home-section .subsection.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Footer */
footer {
  background: var(--footer-background);
  color: #ccc;
  text-align: center;
  padding: 2em 1em;
}
.footer-links {
  margin-bottom: 1em;
}
.footer-links a {
  color: #ccc;
  margin: 0 0.5em;
  font-weight: 600;
  transition: color 0.3s;
}
.footer-links a:hover {
  color: var(--accent-color);
}

/* default hidden state on scroll */
#home.home-section .subsection {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* visible state when scrolled into view */
#home.home-section .subsection.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------------------------
   Contact Us Section
---------------------------------- */
#contact h2 {
  text-align: center;
  margin-bottom: 1.5em;
}

/* Layout */
.contact-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
}
.contact-info,
.contact-form {
  flex: 1 1 300px;
  background: #fff;
  padding: 1.5em;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

/* Contact Info */
.contact-info ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.contact-info li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.25em;
}
.contact-info .icon {
  font-size: 1.5rem;
  margin-right: 0.75em;
  line-height: 1;
  color: var(--accent-color);
}
.contact-info strong {
  display: block;
  margin-bottom: 0.25em;
  font-weight: 600;
}
.contact-info a {
  color: var(--primary-color);
  transition: color 0.3s;
}
.contact-info a:hover {
  color: var(--accent-color);
}


/* Map */
.map-container {
  margin-top: 2em;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.map-container iframe {
  width: 100%;
  height: 350px;
  border: 0;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .contact-container {
    flex-direction: column;
  }
}

/* Contact Form */
.contact-form form {
  display: flex;
  flex-direction: column;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75em;
  margin-bottom: 1em;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: inherit;
  font-size: 1rem;
}
.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}
.contact-form button {
  background: var(--accent-color);
  color: var(--text-light);
  border: none;
  padding: 0.75em;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
  transition: opacity 0.3s;
}
.contact-form button:hover {
  opacity: 0.9;
}

.contact-form iframe {
  border: none;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

/* ===== Services section (matches site theme) ===== */
.services-section { background: var(--background); }

.services-hero{
  text-align:center; padding: 28px 16px 12px;
  background: #f3f5f8; border-bottom: 1px solid #e9e9e9;
  border-radius: 10px 10px 0 0;
}
.services-title{ margin:0; font-size:2rem; letter-spacing:.4px }
.services-sub{ margin:.35em 0 0; color:#666 }

.services-wrap{ max-width:1100px; margin: 0 auto; padding: 18px 16px 8px; }

.services-grid{
  display:grid; gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}

/* Base card */
.srv-card{
  background: var(--section-background);
  border-radius: 12px; overflow:hidden; box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transform: translateY(10px); opacity: 0; /* for reveal */
}

/* Feature card (text-first) */
.srv-card--feature{ background:#fff; padding: 22px 22px 18px; position:relative; display:flex; flex-direction:column; }
.srv-stripe{ position:absolute; left:0; top:0; height:6px; width:100%; background: linear-gradient(90deg, var(--accent-color), #ffd677); }
.srv-title{ margin: 6px 0 10px; font-size:1.1rem; text-transform:uppercase; letter-spacing:.2px }
.srv-text{ color:#4a4a4a; margin:0 0 12px; line-height:1.6 }
.srv-more{ color: var(--accent-color); font-weight:700; }

/* Image card */
.srv-card--image img{ display:block; width:100%; height:220px; object-fit:fill; }
.srv-bar{ background:#fff; border-top:4px solid var(--accent-color); padding: 14px 16px; }
.srv-bar h4{ margin:0; font-size:1rem; font-weight:700; line-height:1.4 }

/* CTA */
.services-cta{
  margin: 28px 0 6px; text-align:center; padding: 24px 16px;
  background: var(--section-background); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transform: translateY(10px); opacity:0; /* reveal */
}
.services-cta .btn{
  display:inline-block; background: var(--accent-color); color: var(--text-light);
  padding: .8em 1.25em; border-radius: 6px; text-decoration: none; font-weight: 700;
}
.services-cta .btn:hover{ filter: brightness(.95); }

/* Reveal on scroll */
.reveal{ transition: opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform: translateY(0); }

/* Stagger for cards */
.srv-card:nth-child(1){ transition-delay: .05s }
.srv-card:nth-child(2){ transition-delay: .10s }
.srv-card:nth-child(3){ transition-delay: .15s }
.srv-card:nth-child(4){ transition-delay: .20s }
.srv-card:nth-child(5){ transition-delay: .25s }
.srv-card:nth-child(6){ transition-delay: .30s }
.srv-card:nth-child(7){ transition-delay: .35s }
.srv-card:nth-child(8){ transition-delay: .40s }
.srv-card:nth-child(9){ transition-delay: .45s }

/* Responsive */
@media (max-width: 980px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .srv-card--image img{ height: 200px; }
}
@media (max-width: 620px){
  .services-grid{ grid-template-columns: 1fr; }
  .srv-card--image img{ height: 190px; }
}


/* Body (image + bottom title bar) */
.srv-card--image{ position:relative; overflow:hidden; }
.srv-body{ position:relative; z-index:1; }
.srv-card--image img{ display:block; width:100%; height:220px; object-fit:fill; }
.srv-bar{
  background:#fff; border-top:4px solid var(--accent-color);
  padding:14px 16px; min-height:56px;
}

/* FULL overlay that covers the whole card on hover/focus */
.srv-overlay{
  position:absolute; inset:0; z-index:2;
  background:#fff;
  display:flex; flex-direction:column;
  gap:.5rem;
  padding:18px 18px 16px;
  transform:translateY(100%); /* hidden below the card */
  transition:transform .35s ease;
  box-shadow: inset 0 0 0 0 rgba(0,0,0,0); /* smooth look */
}
.srv-card--image:hover .srv-overlay,
.srv-card--image:focus .srv-overlay,
.srv-card--image:focus-within .srv-overlay{
  transform:translateY(0);
}

/* Overlay content styles */
.srv-overlay-head{ display:flex; align-items:center; gap:.5rem; }
.srv-pill{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:6px;
  background:var(--accent-color); color:#fff; font-size:.9rem;
}
.srv-overlay h4{ margin:0; font-size:1rem; text-transform:uppercase; letter-spacing:.2px; }
.srv-overlay p{ margin:0; color:#4a4a4a; line-height:1.5; }
.srv-link{
  margin-top:auto; align-self:flex-start;
  color:var(--accent-color); font-weight:700; text-decoration:none;
}
.srv-card--image:focus{ outline:none; box-shadow:0 0 0 3px rgba(255,177,0,.5); }

/* Mobile height tweaks */
@media (max-width:980px){ .srv-card--image img{ height:200px; } }
@media (max-width:620px){ .srv-card--image img{ height:190px; } }

/* Reduced motion respect */
@media (prefers-reduced-motion:reduce){ .srv-overlay{ transition:none; } }

/* ===== Manufacturing (Alternating rows) ===== */
.mfg-rows { background: var(--background); }
.mfg-head { text-align:center; padding: 24px 16px 8px; }
.mfg-head h2 { margin:0 0 .35em; font-size:2rem; }
.mfg-head p  { margin:0; color:#666; }

.mfg-row{
  display:grid; gap:20px; align-items:center;
  grid-template-columns: 1.2fr 1fr; /* image bigger by default */
  background:#fff; border-radius:12px;
  padding:16px; margin:18px 0;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  /* scroll-reveal safe defaults */
  opacity:1; transform:none;
}
.has-io .mfg-row{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.has-io .mfg-row.mfg-reveal.visible{ opacity:1; transform: translateY(0); }

.mfg-row.mfg-rev{ grid-template-columns: 1fr 1.2fr; }
.mfg-row.mfg-rev .mfg-media{ order:2; }
.mfg-row.mfg-rev .mfg-info { order:1; }

.mfg-media{
  position:relative; overflow:hidden; border-radius:10px;
  background:#000;
}
.mfg-media img{
  width:100%; height:100%; max-height:320px; object-fit:fill;
  display:block; transform: scale(1); transition: transform .6s ease, filter .6s ease;
  filter: brightness(.95);
}

/* Diagonal accent wipe (distinct from Services) */
.mfg-wipe{
  position:absolute; inset:auto 0 0 0; height:0%;
  background: linear-gradient(135deg, rgba(255,177,0,.95) 0%, rgba(255,177,0,.5) 60%, rgba(255,177,0,0) 100%);
  transform: skewY(-6deg);
  transition: height .6s ease;
}
.mfg-media:hover img{ transform: scale(1.06); filter: brightness(1); }
.mfg-media:hover .mfg-wipe{ height:45%; }

.mfg-info h3{
  margin:.2em 0 .4em; font-size:1.25rem; letter-spacing:.2px;
  border-left:5px solid var(--accent-color); padding-left:.6em;
}
.mfg-info p{ margin:0 0 .75em; color:#444; line-height:1.6; }
.mfg-bullets{ margin:0 0 1em 0; padding-left:1.2em; color:#333; }
.mfg-bullets li{ margin:.3em 0; }

.mfg-cta{
  display:inline-block; background: var(--accent-color); color: var(--text-light);
  padding:.7em 1.1em; border-radius:6px; font-weight:700; text-decoration:none;
  transition: filter .25s ease;
}
.mfg-cta:hover{ filter: brightness(.95); }

/* Responsive */
@media (max-width: 920px){
  .mfg-row,
  .mfg-row.mfg-rev{
    grid-template-columns: 1fr;
  }
  .mfg-row.mfg-rev .mfg-media,
  .mfg-row.mfg-rev .mfg-info{
    order: initial;
  }
  .mfg-media img{ max-height:260px; }
}


/* ===== Sister Companies (Brand Ribbon Tiles) ===== */
.sisters-section{ background: var(--background); }
.sisters-head{ text-align:center; padding: 24px 16px 8px; }
.sisters-head h2{ margin:0 0 .35em; font-size:2rem; }
.sisters-head p{ margin:0; color:#666; }

.sisters-grid{
  display:grid; gap:24px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px){ .sisters-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 620px){ .sisters-grid{ grid-template-columns: 1fr; }}

/* Tile */
.sister-card{
  position:relative;
  background:#fff;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  overflow:hidden;
  transform: translateY(8px);
  /* visible by default (no-JS safe) */
  opacity:1;
}
.has-io .sister-reveal{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.has-io .sister-reveal.visible{ opacity:1; transform: translateY(0); }

/* Diagonal ribbon */
.sister-ribbon{
  position:absolute; top:14px; left:-42px;
  background: var(--accent-color); color:#1a1a1a; font-weight:800; letter-spacing:.15px;
  padding:.35em 1.6em;
  transform: rotate(-12deg);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  pointer-events:none;
}

/* Logo band */
.sister-logo{
  background: linear-gradient(180deg, #0f0f0f, #1a1a1a);
  padding: 26px 18px;
  display:flex; align-items:center; justify-content:center;
}
.sister-logo img{
  max-width: 70%; max-height: 64px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  transition: transform .35s ease;
}

/* Body */
.sister-body{ padding: 16px 16px 18px; }
.sister-body h3{
  margin:.2em 0 .35em; font-size:1.15rem;
  border-left:5px solid var(--accent-color); padding-left:.6em;
}
.sister-body p{ margin:0 0 .8em; color:#444; line-height:1.6; }
.sister-tags{ display:flex; flex-wrap:wrap; gap:.4em; margin-bottom:.9em; }
.sister-tags .tag{
  background:#fff7e6; color:#6a4b00; border:1px solid #ffd27a;
  font-size:.78rem; padding:.25em .5em; border-radius:999px; font-weight:700;
}
.sister-link{
  display:inline-block; text-decoration:none; font-weight:800;
  color: var(--accent-color);
  border-bottom: 2px solid transparent;
  transition: border-color .25s ease, transform .25s ease;
}

/* Hover effects (unique from other sections) */
.sister-card:hover .sister-logo img{ transform: scale(1.04) translateY(-2px); }
.sister-card:hover .sister-link{ border-color: var(--accent-color); }
.sister-card::after{
  /* soft top highlight / “shine” sweeping on hover */
  content:''; position:absolute; inset:0 0 auto 0; height:0;
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0));
  transition: height .5s ease;
}
.sister-card:hover::after{ height:36px; }


/* ===== Our Group Companies (Horizontal Slider) ===== */
.group-section{ background: var(--background); }
.group-head{ text-align:center; padding: 24px 16px 8px; }
.group-head h2{ margin:0 0 .35em; font-size:2rem; }
.group-head p{ margin:0; color:#666; }

.group-slider{
  position:relative; margin-top: 8px;
  background: var(--section-background);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  padding: 16px 44px; /* space for arrows */
}

.group-track{
  display:flex; gap:16px; overflow-x:auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding-bottom: 6px;
  scrollbar-width: none; /* Firefox */
}
.group-track::-webkit-scrollbar{ display:none; }

.group-card{
  scroll-snap-align: start;
  min-width: 280px; max-width: 320px; flex: 0 0 auto;
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  border:1px solid #eee;
  transform: translateY(8px);
}
.has-io .group-reveal{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.has-io .group-reveal.visible{ opacity:1; transform: translateY(0); }

.group-logo{
  background: linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.10));
  display:flex; align-items:center; justify-content:center;
  padding: 8px 8px;
}
.group-logo img{
  height:150px; max-width:100%;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
  transition: transform .25s ease;
  object-fit:contain;
}
.group-card:hover .group-logo img{ transform: translateY(-2px) scale(1.03); }

.group-body{ padding: 14px 14px 16px; }
.group-body h3{
  margin:.25em 0 .35em; font-size:1.05rem; line-height:1.3;
  border-left:5px solid var(--accent-color); padding-left:.55em;
}
.group-body p{ margin:0 0 .8em; color:#444; line-height:1.55; }
.group-tags{ display:flex; flex-wrap:wrap; gap:.4em; margin-bottom:.8em; }
.group-tags .tag{
  background:#fff7e6; color:#6a4b00; border:1px solid #ffd27a;
  font-size:.78rem; padding:.25em .5em; border-radius:999px; font-weight:700;
}
.group-link{
  color: var(--accent-color); font-weight:800; text-decoration:none;
  border-bottom:2px solid transparent; transition: border-color .25s ease;
}
.group-link:hover{ border-color: var(--accent-color); }

/* Arrows */
.group-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  border:none; cursor:pointer;
  background: var(--accent-color); color:#fff; font-size:22px; line-height:36px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
}
.group-prev{ left:8px; }
.group-next{ right:8px; }
.group-nav:disabled{ opacity:.5; cursor:default; }

/* Hover lift */
.group-card:hover{
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border-color: #f2c76a;
}

/* Responsive */
@media (max-width: 720px){
  .group-slider{ padding: 14px 38px; }
  .group-card{ min-width: 260px; }
}

/* ===== Vision & Goals (unique look) ===== */
.vision-section{ background:var(--background); }
.vision-hero{
  text-align:center; padding:32px 18px 22px;
  background: linear-gradient(180deg,#fff 0%, #fff7e6 100%);
  border-radius:10px; box-shadow:0 10px 26px rgba(0,0,0,.06);
}
.vh-badge{
  display:inline-block; font-weight:800; letter-spacing:.3px;
  background: var(--accent-color); color:#1a1a1a;
  padding:.35em .7em; border-radius:999px; font-size:.82rem;
}
.vision-hero h2{ margin:.6rem 0 .35rem; font-size:1.85rem; letter-spacing:.2px; }
.vision-hero p{ margin:0 auto 1rem; max-width:820px; color:#444; line-height:1.6; }
.vision-hero .btn{ display:inline-block; background:var(--accent-color); color:#fff;
  padding:.8em 1.2em; border-radius:6px; font-weight:700; text-decoration:none;
}
.vision-hero .btn:hover{ filter:brightness(.95); }

/* Pillars grid */
.vision-pillars{
  display:grid; gap:16px; margin:16px 0 8px;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:980px){ .vision-pillars{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .vision-pillars{ grid-template-columns:1fr;} }

.pillar{
  background:#fff; border-radius:12px; padding:18px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.pillar:hover{ transform: translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.08); }
.pillar .ic{ font-size:1.4rem; display:inline-block; margin-bottom:.25rem; }
.pillar h3{ margin:.25rem 0 .35rem; font-size:1.05rem; }
.pillar p{ margin:0; color:#555; line-height:1.55; }

/* Timeline */
.vision-timeline{ margin:18px 0 8px; }
.vision-timeline h3{ text-align:center; margin:6px 0 14px; }
.timeline{
  list-style:none; margin:0; padding:0;
  display:grid; gap:16px;
}
.timeline li{
  display:grid; grid-template-columns:24px 1fr; align-items:start; gap:10px;
}
.timeline .dot{
  width:14px; height:14px; border-radius:50%;
  background:var(--accent-color); margin-top:6px; box-shadow:0 0 0 4px rgba(255,177,0,.25);
}
.timeline .card{
  background:#fff; border-left:4px solid var(--accent-color);
  padding:12px 14px; border-radius:8px; box-shadow:0 8px 22px rgba(0,0,0,.05);
}
.timeline .card h4{ margin:.1rem 0 .25rem; font-size:1rem; }
.timeline .card p{ margin:0; color:#555; }

/* Capabilities band */
.vision-capabilities{
  margin:16px 0 0; display:grid; gap:12px;
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:980px){ .vision-capabilities{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .vision-capabilities{ grid-template-columns:1fr;} }

.cap{
   background: linear-gradient(180deg,#fff 0%, #fff7e6 100%); color:#fff; border-radius:10px;
  padding:16px; position:relative; overflow:hidden;
}
.cap::after{
  content:''; position:absolute; inset:auto -10% -30% -10%; height:60%;
  background: radial-gradient(60% 120% at 50% 100%, rgba(255,177,0,.45), transparent 60%);
  transform: translateY(30%); pointer-events:none;
}
.cap h5{ margin:.15rem 0 .35rem; font-size:1rem; color:#000; }
.cap p{ margin:0; color:#444; }

/* Reveal for vision */
.vision-reveal{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; }
.vision-reveal.visible{ opacity:1; transform:translateY(0); }

.vision-capabilities .cap:nth-child(1) { transition-delay: 0.1s; }
.vision-capabilities .cap:nth-child(2) { transition-delay: 0.2s; }
.vision-capabilities .cap:nth-child(3) { transition-delay: 0.3s; }
.vision-capabilities .cap:nth-child(4) { transition-delay: 0.4s; }