:root{
  --primary:#FF8100;
  --secondary:#FBB040;
  --bg:#ffffff;
  --muted:#6B7280;
  --text:#111827;
  --container:1160px;
  --card-shadow: 0 12px 30px rgba(16,24,40,0.06);
  --radius:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(6px);z-index:60;border-bottom:1px solid rgba(16,24,40,0.04)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo{height:36px}
.brand-text{font-weight:700;color:var(--primary);margin-left:6px}
.brand-text--sub{color:var(--secondary);margin-left:4px;font-weight:700}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-links a{color:#374151;text-decoration:none;font-weight:600;padding:10px}
.nav-links a:hover{color:var(--primary)}
.hero{position:relative;overflow:hidden;width:100%;height:600px;display:flex;align-items:center}
.hero.small{height:360px}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0.98;transform:translate3d(0,0,0)}
.hero-inner{position:relative;display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;padding:48px 0}
.hero-copy h1{font-size:40px;line-height:1.06;margin:0}
.hero-copy p{color:var(--muted);margin-top:12px}
.hero-ctas .btn{margin-right:10px}
.btn{display:inline-block;padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:700}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--secondary));color:#fff}
.btn-outline{border:1px solid rgba(16,24,40,0.06);color:var(--text);background:transparent;padding:9px 14px}
.muted{color:var(--muted)}
.what-we-do{padding:56px 0}
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border-radius:12px;padding:20px;border:1px solid rgba(16,24,40,0.04);box-shadow:var(--card-shadow)}
.card img{width:100%;height:auto;border-radius:8px}
.about-preview{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;padding:56px 0}
.services-grid{padding:40px 0}
.service-card{background:#fff;border-radius:12px;padding:18px;border:1px solid rgba(16,24,40,0.04);box-shadow:var(--card-shadow);transition:transform .28s ease,box-shadow .28s ease;overflow:hidden}
.service-card:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(16,24,40,0.08)}
.service-card .illustration img{width:120px;height:120px;object-fit:contain}
.service-card h3{margin:10px 0 6px}
.service-card .more{display:none;margin-top:12px;color:#334155}
.service-card.expanded .more{display:block}
.toggle-more{background:transparent;border:0;color:var(--primary);font-weight:600;cursor:pointer;margin-top:8px}
.about-grid{display:grid;grid-template-columns:1fr 420px;gap:24px;padding:40px 0}
.mission-vision{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:40px 0}
.contact-form{display:grid;grid-template-columns:1fr 420px;gap:24px;padding:40px 0}
.contact-form form.card{padding:18px}
.contact-form input, .contact-form textarea{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(16,24,40,0.06);margin-top:6px}
.site-footer{padding:28px 0;text-align:center;color:var(--muted);border-top:1px solid rgba(16,24,40,0.04);margin-top:40px}

/* Floating CTA */
.quote-float{position:fixed;right:20px;bottom:20px;background:linear-gradient(90deg,var(--primary),var(--secondary));color:white;padding:12px 16px;border-radius:999px;z-index:9999;text-decoration:none;font-weight:700;box-shadow:0 18px 40px rgba(255,129,0,0.14)}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s,transform .6s}
.reveal.in-view{opacity:1;transform:translateY(0)}

@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .about-preview{grid-template-columns:1fr}
}
@media(max-width:640px){
  .grid-3{grid-template-columns:1fr}
  .hero{height:420px}
  .hero.copy{padding:24px}
}
/* Contact page redesign */
.contact-section{padding:60px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.contact-info-card{
  background:#FFF7ED;
  border-left:4px solid var(--primary);
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,0.05);
  padding:24px 28px;
  line-height:1.6;
}
.contact-info-card h2{margin-top:0;margin-bottom:12px;color:var(--primary)}
.contact-info-card p{margin:10px 0;font-size:16px}
.contact-info-card .icon{display:inline-block;width:24px;margin-right:6px}
.contact-info-card a{color:var(--primary);text-decoration:none;font-weight:600}
.contact-info-card a:hover{text-decoration:underline}
.contact-form-card{
  background:#fff;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,0.05);
  padding:24px 28px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.contact-form-card label span{display:block;font-weight:600;margin-bottom:6px}
.contact-form-card input,
.contact-form-card textarea{
  width:100%;padding:10px 12px;
  border:1px solid rgba(0,0,0,0.1);
  border-radius:8px;font-size:15px;
  transition:border .2s,box-shadow .2s;
}
.contact-form-card input:focus,
.contact-form-card textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 2px rgba(255,129,0,0.2);
}
.contact-form-card .btn-primary{
  align-self:flex-start;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  color:#fff;border:0;cursor:pointer;
  transition:transform .2s,box-shadow .2s;
}
.contact-form-card .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(255,129,0,0.25);
}
@media(max-width:880px){
  .contact-grid{grid-template-columns:1fr;gap:20px}
}
/* Fade + lift reveal animation for contact section */
.reveal-contact {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-contact.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* --- Refined Footer --- */
.dark-footer {
  background:#141C2C; /* lighter than before for better readability */
  color:#ddd;
  padding:60px 0 20px;
  font-family:inherit;
}

.footer-container {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  text-align:left; /* left align everything */
}

.footer-logo {
  width:140px;
  margin-bottom:15px;
}

.footer-col h4 {
  color:#FBB040;
  margin-bottom:15px;
  font-size:18px;
  text-align:left;
}

.footer-col ul {
  list-style:none;
  padding:0;
  margin:0;
}

.footer-col ul li {
  margin-bottom:8px;
}

.footer-col ul li a {
  color:#ccc;
  text-decoration:none;
  transition:color .3s;
}

.footer-col ul li a:hover {
  color:#FF8100;
}

/* Contact text + links */
.footer-col p {
  color:#ccc;
  line-height:1.6;
}
.footer-col a {
  color:#ccc !important;
  text-decoration:none;
}
.footer-col a:hover {
  color:#FF8100 !important;
}

/* Social Links */
.social-links a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  margin-right:10px;
  background:#1E2535;
  border-radius:50%;
  color:#fff;
  transition:all .3s ease;
}
.social-links a svg {
  width:18px;
  height:18px;
  fill:#fff;
}
.social-links a:hover {
  background:linear-gradient(45deg,#FF8100,#FBB040);
  transform:translateY(-2px);
}
.social-links a:hover svg {
  fill:#fff;
}


/* Footer Bottom */
.footer-bottom {
  text-align:left;
  border-top:1px solid rgba(255,255,255,0.08);
  margin-top:40px;
  padding:15px 20px 0;
  font-size:14px;
  color:#aaa;
}

}

@media(max-width:900px){
  .footer-container{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .footer-container{grid-template-columns:1fr}
}

/* About page split layout */
.about-split {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:60px;
  max-width:1200px;
  margin:0 auto;
  padding:80px 20px;
}
.about-split.reverse {
  direction:rtl;
}
.about-split.reverse .about-text {
  direction:ltr;
}
.about-text h2 {
  color:var(--primary);
  margin-bottom:15px;
  font-size:2rem;
}
.about-text p {
  font-size:1.05rem;
  line-height:1.7;
  color:#333;
  margin-bottom:12px;
}
.about-img img {
  width:100%;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
}
@media(max-width:900px){
  .about-split{grid-template-columns:1fr;gap:30px}
  .about-split.reverse{direction:ltr}
}
/* --- What We Do hover animation --- */
.service-card {
  background:#fff;
  border-radius:16px;
  padding:30px;
  box-shadow:0 4px 16px rgba(0,0,0,0.05);
  transition:all .35s ease;
  transform:translateY(0);
}
.service-card:hover {
  transform:translateY(-8px);
  box-shadow:0 10px 24px rgba(255,129,0,0.25); /* orange glow */
}
.service-card:hover h3 {
  color:#FF8100;
}
/* --- Unified Hover Animation Enhancements --- */

/* What We Do Section (Home) */
.service-card {
  background:#fff;
  border-radius:16px;
  padding:30px;
  box-shadow:0 4px 16px rgba(0,0,0,0.05);
  transition:all .35s ease;
  transform:translateY(0);
  will-change:transform, box-shadow;
}
.service-card img {
  transition:transform .4s ease, filter .4s ease;
}
.service-card:hover {
  transform:translateY(-8px);
  box-shadow:0 10px 24px rgba(255,129,0,0.25); /* orange glow */
}
.service-card:hover h3 {
  color:#FF8100;
}
.service-card:hover img {
  transform:scale(1.05);
  filter:drop-shadow(0 0 10px rgba(255,129,0,0.4));
}

/* Services Page */
.service-box {
  background:#fff;
  border-radius:16px;
  padding:40px 30px;
  text-align:left;
  box-shadow:0 4px 16px rgba(0,0,0,0.05);
  transition:all .35s ease;
  will-change:transform, box-shadow;
}
.service-box img {
  transition:transform .4s ease, filter .4s ease;
}
.service-box:hover {
  transform:translateY(-6px);
  box-shadow:0 8px 24px rgba(255,129,0,0.25); /* brand glow */
}
.service-box:hover h3 {
  color:#FF8100;
}
.service-box:hover img {
  transform:scale(1.05);
  filter:drop-shadow(0 0 10px rgba(255,129,0,0.4));
}

/* Smooth hover transitions */
.service-card h3, .service-box h3 {
  transition:color .3s ease;
}
/* --- Fade-up on scroll animation --- */

/* Base hidden state */
.service-card,
.service-box {
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s ease-out, transform .8s ease-out;
}

/* When visible */
.service-card.visible,
.service-box.visible {
  opacity:1;
  transform:translateY(0);
}

/* Keyframes (for optional reuse) */
@keyframes fadeUp {
  from {
    opacity:0;
    transform:translateY(30px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}
/* Ensure base card rules (apply to home 'what we do' tiles) */
.what-we-do .card,
.what-we-do .service-card {
  background: #fff;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
  transition: transform .35s ease, box-shadow .35s ease, color .25s ease;
  transform: translateY(0);
  will-change: transform, box-shadow;
  cursor: pointer;              /* makes hover obvious */
  position: relative;           /* helps with stacking */
  z-index: 1;
}

/* Hover state — orange glow, lift */
.what-we-do .card:hover,
.what-we-do .service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(255,129,0,0.18); /* brand orange glow */
}

/* Headings & images on hover */
.what-we-do .card:hover h3,
.what-we-do .service-card:hover h3 {
  color: var(--primary);
}

.what-we-do .card img,
.what-we-do .service-card img {
  transition: transform .4s ease, filter .4s ease;
}
.what-we-do .card:hover img,
.what-we-do .service-card:hover img {
  transform: scale(1.04);
  filter: drop-shadow(0 0 10px rgba(255,129,0,0.25));
}

/* Prevent overlays from blocking hover */
.what-we-do .card * { pointer-events: auto; }