:root {
  --gold: #D0B86E;
  --gold-light: #E2C78F;
  --gold-dark: #8B6B2D;
  --brown: #4A3A2C;
  --bg-dark: #1A1A1A;
  --white: #FFFFFF;
  --black: #000000;
  --dark-blue: #0A1E35;
  --font-main: 'Inter', sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

@keyframes goldShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes kenBurns {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

body { font-family: var(--font-main); color: var(--black); line-height: 1.6; }

/* Header */
.header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 5%; background: var(--white); box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: relative; width: 100%; z-index: 1000; }
.logo { display: flex; align-items: center; gap: 15px; text-decoration: none; color: var(--black); }
.logo-img { height: 70px; width: auto; }
.logo-text { font-size: 1.5rem; font-weight: 700; color: var(--black); }
.nav-menu { display: flex; align-items: center; gap: 30px; }
.nav-menu a { text-decoration: none; color: var(--black); font-weight: 600; font-size: 0.95rem; transition: color 0.3s ease; }
.nav-menu a:hover { color: var(--gold); }
.nav-toggle, #nav-toggle { display: none !important; visibility: hidden; position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.nav-toggle-label { display: none !important; }
.header-actions { display: flex; align-items: center; }
.btn-primary { background:linear-gradient(180deg, #E2BF7C 0%, #937340 100%); color: var(--white); padding: 0.8rem 1.5rem; border: none; border-radius: 50px; cursor: pointer; font-weight: 600; transition: opacity 0.3s; }
.btn-primary:hover { opacity: 0.9; }
.btn-primary:hover { background: #5a4030; }

/* Hero */
.hero { height: 90vh; position: relative; display: flex; align-items: center; padding: 0 5%; color: var(--white); overflow: hidden; padding-top: 80px; }
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('homeheader.png'); 
  background-size: cover; 
  background-position: left center;
  z-index: -1;
  animation: kenBurns 20s ease-in-out infinite alternate;
}
.hero-content { max-width: 550px; animation: fadeInUp 1s ease-out forwards; }
.hero h1 { font-size: 3rem; line-height: 1.2; margin: 0; font-weight: 800; }
.gold-text { 
  color: var(--gold); 
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold), var(--gold-dark), var(--gold));
  background-size: 300% center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 8s linear infinite;
}
.hero-subtext { font-size: 1.3rem; line-height: 1.6; margin: 20px 0; opacity: 0.9; }
.btn-secondary { background:linear-gradient(180deg, #E2BF7C 0%, #937340 100%); color: var(--white); padding: 15px 35px; border: none; border-radius: 50px; font-size: 1.1rem; font-weight: 600; cursor: pointer; }
.btn-secondary:hover { opacity: 0.9; }

/* Metrics */
.metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 0 10%; margin-top: -60px; position: relative; z-index: 10; }
.metric-card { height: 240px; border-radius: 40px; position: relative; overflow: hidden; background-size: cover; background-position: center; box-shadow: 0 20px 40px rgba(0,0,0,0.1); animation: fadeInUp 0.8s ease-out forwards; }
.metric-card-1 { background-image: url('metriccard1.png'); }
.metric-card-2 { background-image: url('metriccard2.png'); }
.metric-card-3 { background-image: url('metriccard3.png'); }
.metric-inner { background: rgba(255, 255, 255, 0.95); width: 45%; height: 70%; margin: 30px; border-radius: 30px; padding: 30px; display: flex; flex-direction: column; justify-content: center; }
.metric-icon { margin-top: 8px; margin-bottom: 6px; }
.metric-label { font-size: 11px; line-height: 1.3; margin: 1px 0; }
.metric-value { font-size: 2rem; font-weight: 800; color: var(--gold); margin: 0; }

/* Why RWC Section */
.why-rwc { padding: 40px 5% 100px 5%; background: url('whyrwcebg.png') center/cover no-repeat; color: var(--white); text-align: center; position: relative; overflow: hidden; }
.why-header h2 { font-size: 3.5rem; font-weight: 900; margin-bottom: 10px; }
.why-frame-container { position: relative; max-width: 1100px; margin: 0 auto; }
.why-frame { position: relative; height: 600px; display: flex; justify-content: center; align-items: center; }
.why-center-logo { position: relative; z-index: 2; width: 350px; height: 350px; display: flex; justify-content: center; align-items: center; }
.why-center-logo img { width: 350px; }
.why-prop { position: absolute; display: flex; flex-direction: column; gap: 12px; width: 240px; z-index: 3; animation: float 4s ease-in-out infinite; }
.prop-top { top: 20px; left: calc(50% - 120px); align-items: center; text-align: center; }
.prop-right { right: 60px; top: 30%; transform: translateY(-50%); align-items: flex-start; text-align: left; }
.prop-bottom-right { right: 60px; bottom: 60px; align-items: flex-start; text-align: left; }
.prop-bottom-left { left: 60px; bottom: 60px; align-items: flex-end; text-align: right; }
.prop-left { left: 60px; top: 30%; transform: translateY(-50%); align-items: flex-end; text-align: right; }

/* Mascot */
.mascot-container { 
  position: fixed; 
  bottom: 20px; 
  right: 20px; 
  width: 130px; 
  height: 130px; 
  z-index: 9999; 
  opacity: 0; 
  visibility: hidden; 
  transition: all 0.5s ease;
  transform: translateY(20px);
}
.mascot-container.visible { 
  opacity: 1; 
  visibility: visible; 
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 1024px) {
  .nav-menu { gap: 15px; }
  .nav-menu a { font-size: 0.85rem; }
}

@media (max-width: 768px) {
  .header { flex-wrap: wrap; padding: 1rem 20px; }
  .header-actions { display: none; }
  .nav-toggle-label { display: flex; flex-direction: column; gap: 5px; padding: 10px; }
  .nav-toggle-label span { display: block; width: 25px; height: 3px; background: var(--brown); border-radius: 2px; position: relative; transition: all 0.3s ease; }
  .nav-toggle-label span::before, .nav-toggle-label span::after { content: ''; display: block; width: 25px; height: 3px; background: var(--brown); border-radius: 2px; position: absolute; transition: all 0.3s ease; }
  .nav-toggle-label span::before { top: -8px; }
  .nav-toggle-label span::after { top: 8px; }
  .nav-menu { display: none; width: 100%; flex-direction: column; gap: 10px; padding: 20px 0; }
  .nav-toggle:checked ~ .nav-menu { display: flex; }
  .hero { height: auto; padding: 100px 20px; text-align: center; }
  .hero-content { margin: 0 auto; }
  .hero h1 { font-size: 2.2rem; }
  .metrics-grid { grid-template-columns: 1fr; }
  .why-frame { height: auto; flex-direction: column; gap: 30px; padding: 40px 0; }
  .why-center-logo { width: 200px; height: 200px; order: -1; margin: 0 auto; }
  .why-center-logo img { width: 200px; }
  .why-prop { position: relative; margin: 15px auto; transform: none !important; align-items: center; text-align: center; width: 100%; max-width: 280px; }
  .prop-top, .prop-right, .prop-bottom-right, .prop-bottom-left, .prop-left { top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; align-items: center; text-align: center; }
  .prop-icon-img { width: 48px; height: 48px; }
  
  /* What We Do section */
  .wwd-container { flex-direction: column !important; gap: 40px !important; }
  .wwd-visuals { height: 360px !important; }
  .wwd-visuals img { object-fit: cover !important; }
  .wwd-content h2[style*="font-size:56px"] { font-size: 32px !important; }
  .wwd-content p[style*="font-size:18px"] { font-size: 15px !important; }
  
  /* About page sections */
  #about-section > div > div[style*="display:flex"] { flex-direction: column !important; gap: 20px !important; }
  #about-section h2 { font-size: 1.4rem !important; }
  #about-section div[style*="min-width:320px"] { min-width: 100% !important; }
  #about-section p { font-size: 0.95rem !important; }
  #about-section .badge, #about-section span[style*="border-radius:999px"] { font-size: 10px !important; padding: 5px 14px !important; }
  
  /* About page - About Our Company section */
  section[style*="background:#fff"] > div[style*="display:flex; gap:80px"] { flex-direction: column !important; gap: 40px !important; }
  section[style*="background:#fff"] div[style*="min-width:340px"] { min-width: 100% !important; }
  
  /* About Our Company - image block */
  div[style*="position:relative; z-index:2; margin:0 30px"] { margin: 0 !important; }
  div[style*="position:absolute; bottom:0; right:0; width:80%; height:80%"] { width: 90% !important; height: 90% !important; }
  
  /* About page - Our Approach section header */
  div[style*="grid-template-columns:repeat(3,1fr)"] > div:first-child h2 { font-size: 1.4rem !important; }
  
  /* Section padding */
  .what-we-do-detailed { padding: 50px 0 !important; }
  .what-we-do-detailed .wwd-container { padding: 0 24px !important; }
  
  /* CTA section mobile text */
  section[style*="#0A1E35"] h2 { font-size: 1.8rem !important; }
  section[style*="#0A1E35"] p { font-size: 0.95rem !important; }
  
  /* Product & Services badges fix */
  span[style*="font-size:14px"] > img { max-width: 100%; height: auto; }
}

/* Nav Dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.nav-dropdown-toggle::after { content: ''; display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; margin-top: 1px; transition: transform 0.2s; }
.nav-dropdown:hover .nav-dropdown-toggle::after { transform: rotate(180deg); }
.nav-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  min-width: 200px;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
  padding: 10px 0;
  z-index: 1001;
  border: 1px solid #e0d8bf;
}
.nav-dropdown:hover .nav-submenu { display: flex; flex-direction: column; }
.nav-submenu a {
  padding: 12px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--black);
  transition: all 0.2s;
}
.nav-submenu a:hover { background: #fdfaf2; color: var(--gold); }

@media (max-width: 768px) {
  .nav-submenu {
    position: static;
    box-shadow: none;
    border: none;
    padding: 0 0 0 20px;
  }
  .nav-dropdown:hover .nav-submenu { display: flex; flex-direction: column; }
}

/* Footer */
.footer { background: #000; color: #fff; padding: 80px 40px 40px; font-family: 'Inter', sans-serif; }
.footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.footer-logo img { height: 32px; width: auto; }
.footer-logo span { font-size: 22px; font-weight: bold; letter-spacing: 0.5px; }
.footer-about { color: #aaa; font-size: 15px; line-height: 1.6; margin-bottom: 30px; max-width: 300px; }
.footer-socials { display: flex; gap: 15px; }
.footer-socials .social-icon { width: 32px; height: 32px; display: block; transition: transform 0.2s; }
.footer-socials .social-icon:hover { transform: scale(1.1); }
.footer-socials .social-icon svg { width: 100%; height: 100%; fill: #888; transition: fill 0.2s; }
.footer-socials .social-icon:hover svg { fill: #D0B86E; }
.footer-heading { color: #fff; font-size: 18px; font-weight: 600; margin-bottom: 10px; position: relative; display: inline-block; }
.footer-heading::after { content: ''; display: block; width: 40px; height: 2px; background: linear-gradient(180deg, #E2BF7C 0%, #937340 100%); margin-top: 8px; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-links a { color: #aaa; text-decoration: none; font-size: 15px; transition: color 0.2s; }
.footer-links a:hover { color: #fff; }
.opening-hours { display: flex; flex-direction: column; gap: 10px; }
.hour-row { display: flex; justify-content: space-between; border-bottom: 1px solid #222; padding-bottom: 8px; color: #aaa; font-size: 14px; }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer { padding: 50px 24px 30px; }
}

/* ============ COMPREHENSIVE MOBILE RESPONSIVE ============ */
@media (max-width: 768px) {
  /* Fix inline hero heights */
  section[style*="height:60vh"] { height: auto !important; min-height: 320px !important; padding: 100px 20px 60px !important; }
  section[style*="height:80vh"] { height: auto !important; min-height: 360px !important; padding: 100px 20px 60px !important; }
  section[style*="90vh"] { height: auto !important; padding: 100px 20px 60px !important; }
  
  /* Fix inline grid layouts (3 cols → 1 col) */
  div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  
  /* Fix inline flex layouts */
  div[style*="display:flex; gap:60px"] { flex-direction: column !important; gap: 40px !important; }
  div[style*="display:flex; gap:80px"] { flex-direction: column !important; gap: 40px !important; }
  div[style*="display:flex; gap:48px"] { flex-direction: column !important; gap: 30px !important; }
  div[style*="gap:28px"] { gap: 20px !important; }
  div[style*="gap:24px"] { gap: 16px !important; }
  
  /* Fix inline padding */
  div[style*="padding:100px 0"] { padding: 60px 0 !important; }
  div[style*="padding:80px 40px"] { padding: 50px 24px !important; }
  div[style*="padding:48px"] { padding: 32px 24px !important; }
  div[style*="padding:60px 56px"] { padding: 36px 28px !important; }
  div[style*="padding:40px"] { padding: 28px 20px !important; }
  
  /* Fix inline width constraints */
  div[style*="max-width:620px"] { max-width: 100% !important; }
  div[style*="max-width:480px"] { max-width: 100% !important; }
  div[style*="max-width:700px"] { max-width: 100% !important; }
  
  /* Fix flex-wrap layouts that need different alignment */
  div[style*="align-items:flex-start; flex-wrap:wrap"] { flex-direction: column !important; }
  
  /* Team member cards */
  .team-member-wrapper { grid-template-columns: 1fr !important; gap: 40px !important; }
  .team-member-wrapper.reverse { direction: ltr !important; }
  .team-member-photo { max-width: 300px !important; }
  .team-member-stats { flex-wrap: wrap !important; gap: 20px !important; }
  
  /* Contact form card */
  div[style*="border:1px solid #e0d8bf; box-shadow"] { padding: 24px !important; }
  
  /* Team member sections */
  .team-member-section { padding: 60px 20px !important; }
  .team-hero { height: auto !important; min-height: 320px !important; padding: 100px 20px 60px !important; }
  
  /* CTA sections */
  section[style*="#0A1E35"] { padding: 60px 20px !important; }
  
  /* Hero content centering */
  section[style*="justify-content:center"] > div[style*="z-index:2"] { width: 100%; }
}

@media (max-width: 480px) {
  section[style*="height:60vh"] { min-height: 280px !important; padding: 80px 16px 40px !important; }
  section[style*="height:80vh"] { min-height: 300px !important; padding: 80px 16px 40px !important; }
  div[style*="padding:100px 0"] { padding: 40px 0 !important; }
  h1[style*="font-size"] { font-size: 1.8rem !important; }
  h2[style*="font-size"] { font-size: 1.5rem !important; }
  h3[style*="font-size"] { font-size: 1.3rem !important; }
  
  /* About RWC Equity heading */
  .wwd-content h2 { font-size: 26px !important; }
  .wwd-content p { font-size: 14px !important; }
  
  /* About page headings */
  #about-section h2 { font-size: 1.2rem !important; }
  #about-section p { font-size: 0.85rem !important; }
}