/*
  Bedrock Advisory Group — Static Site Stylesheet
  This file defines the global variables, base styles, layout utilities,
  and component styling for a polished consulting website. Colors and
  typography follow the brand palette (deep forest green, metallic gold
  gradient) and use Playfair Display for headings with Inter for body
  text. Animations and transitions are designed to feel smooth and
  premium, enhancing the user experience without overwhelming it.
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* CSS Variables for easy theming */
:root {
  --green: #013220;
  --gold-start: #D4AF37;
  --gold-end: #FFD700;
  --text: #222222;
  --white: #ffffff;
  --light-gray: #f8f8f8;
  --dark-bg: #031007;
  --accent-shadow: 0 6px 16px rgba(212,175,55,0.35);
  --transition: 0.3s ease;
  --max-width: 1200px;
}

/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  color: var(--green);
  margin-bottom: 0.5rem;
}

p {
  margin-bottom: 1rem;
}

a {
  color: var(--green);
  text-decoration: none;
  transition: opacity var(--transition);
}

a:hover {
  opacity: 0.8;
}

/* Container utility */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Navigation Bar */
.nav {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: linear-gradient(90deg, var(--white), var(--light-gray));
  border-bottom: 1px solid #eee;
  transition: padding var(--transition), box-shadow var(--transition);
}
.nav.shrink {
  padding: 8px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.nav .nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 0;
}
.nav .logo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav img.logo-img {
  height: 40px;
  width: auto;
  transition: transform var(--transition);
}
.nav img.logo-img:hover {
  transform: scale(1.05);
}
.nav ul {
  display: flex;
  list-style: none;
  margin-left: auto;
  gap: 20px;
}
.nav ul li {
  position: relative;
}
.nav ul li a {
  padding: 6px;
  font-weight: 500;
  position: relative;
}
.nav ul li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--gold-start), var(--gold-end));
  transition: width var(--transition);
}
.nav ul li a:hover::after, .nav ul li a.active::after {
  width: 100%;
}

/* Mobile navigation toggle */
.nav .menu-toggle {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
}
.nav .menu-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: var(--green);
  border-radius: 3px;
  transition: transform var(--transition);
}
.nav.open ul {
  transform: translateY(0);
}

/* Hero Section */
.hero {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background: radial-gradient(80% 100% at 50% 0%, #0a2716 0%, #05150d 60%, #031007 100%);
  color: #f7f7f7;
  padding: 120px 20px 100px;
  position: relative;
  overflow: hidden;
}
.hero .badge {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-start), var(--gold-end));
  color: #0a0a0a;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}
.hero h1 {
  font-size: 3rem;
  color: #f7f7f7;
  margin-bottom: 1rem;
  line-height: 1.2;
}
.hero p {
  max-width: 700px;
  color: #e8e8e8;
  margin-bottom: 2rem;
  font-size: 1.1rem;
}
.hero .cta-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Button Styles */
.btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform var(--transition), box-shadow var(--transition);
  text-align: center;
}
.btn-primary {
  background: linear-gradient(90deg, var(--gold-start), var(--gold-end));
  color: #0a0a0a;
  box-shadow: var(--accent-shadow);
}
.btn-outline {
  background: transparent;
  border: 2px solid var(--gold-start);
  color: #f7f7f7;
}
.btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

/* General Section */
.section {
  padding: 80px 0;
  border-bottom: 1px solid #f0f0f0;
  background: var(--white);
}
.section.dark {
  background: var(--light-gray);
}
.section-title {
  text-align: center;
  margin-bottom: 40px;
  font-size: 2.5rem;
}
.section-subtitle {
  text-align: center;
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 2rem;
}

/* Grid utilities */
.grid {
  display: grid;
  gap: 24px;
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

/* Card component */
.card {
  background: #ffffff;
  border: 1px solid #eee;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.05);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}

/* Services Section */
.services-grid .icon {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  color: var(--green);
}
.services-grid h3 {
  margin-bottom: 8px;
  font-size: 1.3rem;
}

/* Sectors Section */
.sector-card {
  background: #fdfdfd;
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 20px;
  transition: background var(--transition), transform var(--transition);
}
.sector-card:hover {
  background: linear-gradient(90deg, var(--gold-start), var(--gold-end));
  color: #111;
  transform: translateY(-4px);
}
.sector-card h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

/* Our Work Slider */
.slider {
  position: relative;
  overflow: hidden;
}
.slides {
  display: flex;
  transition: transform 0.5s ease;
}
.slide {
  min-width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}
.case-card {
  border: 1px solid #eee;
  border-left: 4px solid var(--gold-start);
  border-radius: 12px;
  padding: 20px;
  background: #fff;
  transition: border-left-color var(--transition), background var(--transition);
}
.case-card:hover {
  border-left-color: var(--green);
  background: #fafafa;
}
.slider-nav {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}
.slider-nav button {
  pointer-events: all;
  background: rgba(255,255,255,0.8);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--green);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform var(--transition);
}
.slider-nav button:hover {
  transform: scale(1.1);
}

/* Accordion for case details */
.accordion {
  max-width: 700px;
  margin: 0 auto;
}
.accordion-item {
  border-bottom: 1px solid #eee;
}
.accordion-header {
  padding: 14px;
  cursor: pointer;
  position: relative;
  font-weight: 600;
  transition: background var(--transition);
}
.accordion-header:hover {
  background: #f7f7f7;
}
.accordion-header::after {
  content: '+';
  position: absolute;
  right: 20px;
  font-weight: bold;
  transition: transform var(--transition);
}
.accordion-header.active::after {
  transform: rotate(45deg);
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding: 0 14px;
}
.accordion-content p {
  margin: 12px 0;
}

/* Counters Section */
.counters {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.counter-box {
  background: #f7f8f7;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 20px;
  flex: 1 1 180px;
  max-width: 200px;
  text-align: center;
}
.counter-box .counter {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--green);
  margin-bottom: 4px;
}
.counter-box .label {
  font-size: 0.9rem;
  color: #555;
}

/* Why Choose section */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.feature-icon {
  font-size: 28px;
  color: var(--green);
}

/* Contact section */
.contact-info {
  margin-bottom: 20px;
}
.contact-form {
  max-width: 600px;
  margin: 0 auto;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  transition: border var(--transition), box-shadow var(--transition);
  font-family: inherit;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--gold-start);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.25);
  outline: none;
}
.contact-form button {
  width: 100%;
}

/* Footer */
.footer {
  background: var(--green);
  color: #dfe7df;
  padding: 40px 0;
  text-align: center;
}
.footer p {
  margin-bottom: 8px;
  color: #c9d3cb;
}
.footer a {
  color: var(--gold-start);
  transition: color var(--transition);
}
.footer a:hover {
  color: var(--gold-end);
}

/* Responsive Layouts */
@media (max-width: 900px) {
  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }
  .grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
  .hero h1 {
    font-size: 2.2rem;
  }
}

@media (max-width: 600px) {
  .grid-3, .grid-2, .grid-5 {
    grid-template-columns: 1fr;
  }
  .nav ul {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    transform: translateY(-200%);
    transition: transform var(--transition);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  }
  .nav.open ul {
    transform: translateY(0);
  }
  .nav .menu-toggle {
    display: flex;
    margin-left: auto;
  }
  .nav .menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .nav .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .nav .menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
}

/* Scroll reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}