/*
  Base stylesheet for the Summit Group landing page. A neutral reset and
  consistent typographic scale help ensure the design looks polished on
  different devices. CSS variables at the top define the colour palette,
  allowing you to adjust the look of the site by updating a few values.
*/

/* Colour palette inspired by the uploaded logo. */
:root {
  /*
    Updated colour palette to better match The Summit Group logo.  
    The primary colour is a rich navy, secondary is a muted blue for accents,  
    accent is a warm off‑white for content backgrounds, highlight is a mid‑tone blue  
    used sparingly for emphasised text and links, text is a deep blue for readability,  
    and muted is a soft grey for secondary copy.  
  */
  --colour-primary: #0f2e4d;      /* dark navy for backgrounds and headers */
  --colour-secondary: #274a71;    /* muted blue for accents */
  --colour-accent: #f7f5f1;       /* light beige backdrop for content sections */
  --colour-highlight: #1c528c;    /* mid‑tone blue for highlighted text */
  --colour-text: #152a3b;         /* deep blue for body copy */
  --colour-white: #ffffff;
  --colour-muted: #788090;        /* muted grey for secondary text */
}

/* Reset some default properties. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--colour-text);
  line-height: 1.6;
  background-color: var(--colour-accent);
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: var(--colour-primary);
  line-height: 1.2;
}

h1 { font-size: 2.6rem; margin-bottom: 0.5em; }
h2 { font-size: 1.8rem; margin-bottom: 1em; text-align: center; }
h3 { font-size: 1.3rem; margin-bottom: 0.5em; }

p { margin-bottom: 0.75em; }

a { color: var(--colour-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Container keeps content centered with a maximum width. */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header styling */
.header {
  background-color: var(--colour-white);
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
}

.logo {
  /* Increase the size of the logo so it stands out more prominently in the header. */
  height: 120px;
  width: auto;
}

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  /* Reduce the gap between navigation items so longer menus fit on one line. */
  gap: 1rem;
}

.nav-list li a {
  font-weight: 500;
  color: var(--colour-text);
  transition: color 0.2s ease;
}
.nav-list li a:hover {
  color: var(--colour-primary);
}
.button-outline {
  padding: 0.5rem 1rem;
  border: 2px solid var(--colour-primary);
  border-radius: 25px;
  color: var(--colour-primary);
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.button-outline:hover {
  background-color: var(--colour-primary);
  color: var(--colour-white);
}

/* Generic button styles */
.button {
  display: inline-block;
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  border-radius: 30px;
  text-align: center;
  cursor: pointer;
}
.button-primary {
  background-color: var(--colour-primary);
  color: var(--colour-white);
  border: 2px solid var(--colour-primary);
}
.button-primary:hover {
  background-color: var(--colour-secondary);
  border-color: var(--colour-secondary);
}

/* Hero section styles */
.hero {
  background-color: var(--colour-primary);
  color: var(--colour-white);
  padding: 4rem 0 5rem;
  text-align: center;
}
.hero-content {
  /* Use a responsive grid to place text and illustration side by side. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 3rem;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

/* Ensure the text doesn't stretch too wide */
.hero-text {
  max-width: 600px;
}

/* Illustration styling */
.hero-image img {
  width: 100%;
  height: auto;
}
.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: var(--colour-white);
}
.hero .highlight {
  color: var(--colour-highlight);
}
.hero p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: var(--colour-accent);
}

/* Benefits section */
.benefits {
  padding: 4rem 0;
  background-color: var(--colour-accent);
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.benefit-item {
  background-color: var(--colour-white);
  padding: 2rem 1.5rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.benefit-item .icon {
  background-color: var(--colour-accent);
  color: var(--colour-primary);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  border-radius: 50%;
}
.benefit-item h3 {
  margin-bottom: 0.5rem;
  color: var(--colour-primary);
}
.benefit-item p {
  color: var(--colour-muted);
  font-size: 0.95rem;
}

/* Values section */
.values {
  padding: 4rem 0;
}
.values-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.values .card {
  background-color: var(--colour-primary);
  color: var(--colour-white);
  padding: 2rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  min-height: 200px;
}
.values .card h3 {
  color: var(--colour-accent);
}
.values .card p {
  color: var(--colour-accent);
  font-size: 0.95rem;
}

/* Process section */
.process {
  padding: 4rem 0;
  background-color: var(--colour-accent);
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.process-item {
  background-color: var(--colour-white);
  padding: 2rem 1.5rem;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.process-icon {
  background-color: var(--colour-accent);
  color: var(--colour-primary);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  border-radius: 50%;
}
.process h3 {
  margin-bottom: 0.5rem;
  color: var(--colour-primary);
}
.process p {
  color: var(--colour-muted);
  font-size: 0.95rem;
}
/* Testimonials */
.testimonials {
  padding: 4rem 0;
  background-color: var(--colour-accent);
}
.testimonial-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.testimonial-card {
  background-color: var(--colour-white);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  position: relative;
}
.testimonial-card .quote {
  font-style: italic;
  color: var(--colour-text);
  margin-bottom: 1rem;
}
.testimonial-card .author {
  font-weight: 600;
  color: var(--colour-primary);
}

/* FAQ styles */
.faq {
  padding: 4rem 0;
}
.faq-item + .faq-item {
  margin-top: 1rem;
}
.accordion {
  background-color: var(--colour-white);
  color: var(--colour-primary);
  cursor: pointer;
  padding: 1rem 1.5rem;
  width: 100%;
  text-align: left;
  outline: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-size: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.accordion::after {
  content: '\002B';
  font-size: 1.5rem;
  line-height: 1;
  color: var(--colour-secondary);
}
.accordion.active::after {
  content: '\2212';
}
.panel {
  background-color: var(--colour-white);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.2s ease-out;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0 0 8px 8px;
  padding: 0 1.5rem;
}
.panel p {
  padding: 1rem 0;
  color: var(--colour-muted);
}

/* Contact section */
.contact {
  padding: 4rem 0;
  background-color: var(--colour-primary);
  color: var(--colour-accent);
}
.contact h2 {
  text-align: center;
  color: var(--colour-accent);
}
.contact-form {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.contact-form label {
  display: block;
  font-weight: 500;
  color: var(--colour-accent);
  font-size: 0.95rem;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.3rem;
  border: none;
  border-bottom: 2px solid var(--colour-accent);
  background-color: transparent;
  color: var(--colour-accent);
  font-size: 1rem;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(245, 246, 247, 0.7);
}
.contact-form textarea {
  resize: vertical;
  min-height: 80px;
}
.contact-form .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.contact-form .form-row label {
  flex: 1 1 250px;
}
.contact .button-primary {
  align-self: flex-start;
}

/* About section */
.about {
  padding: 4rem 0;
  background-color: var(--colour-accent);
}
.about-content p {
  margin-bottom: 1rem;
  color: var(--colour-text);
  max-width: 800px;
}
.about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
  justify-content: center;
}
.stat {
  text-align: center;
  flex: 1 1 200px;
}
.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--colour-primary);
  margin-bottom: 0.3rem;
}
.stat-label {
  font-size: 1rem;
  color: var(--colour-muted);
}

/* CTA section */
.cta {
  padding: 3.5rem 0;
  background-color: var(--colour-primary);
  color: var(--colour-accent);
  text-align: center;
}
.cta h2 {
  margin-bottom: 1rem;
  color: var(--colour-accent);
}
.cta p {
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
  color: var(--colour-accent);
}
.cta .button-primary {
  font-size: 1rem;
}

/* Footer styles */
.footer {
  background-color: var(--colour-primary);
  color: var(--colour-accent);
  padding: 2rem 0;
  font-size: 0.9rem;
}
.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.footer a {
  color: var(--colour-highlight);
}
.footer a:hover {
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .nav-list {
    gap: 0.8rem;
  }
  .hero h1 {
    font-size: 2.3rem;
  }
  .hero p {
    font-size: 1rem;
  }
  h2 {
    font-size: 1.5rem;
  }

  /* Stack hero columns on smaller screens */
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-image {
    order: -1;
    margin-bottom: 2rem;
  }
  .hero-text {
    margin: 0 auto;
  }

  /* Stack about statistics vertically on small screens */
  .about-stats {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }
}
/* ===== Mobile-only header polish ===== */
@media (max-width: 768px) {
  .header { … }
  .header .header-container { … }
  .logo {
    height: 65px;  /* a bit smaller but still larger than before */
    width: auto;
  }
  .nav .nav-list { … }
  .nav .nav-list li:last-child { … }
  .nav .button.button-outline { … }
}
/* ===== Hamburger menu (mobile) ===== */
.hamburger {
  display: none;               /* hidden on desktop */
  width: 40px; height: 36px;
  background: transparent;
  border: 0;
  padding: 0;
  margin-left: auto;           /* push it to the right of the logo */
  cursor: pointer;
}
.hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #0f1a2a;         /* dark navy to match your theme */
  transition: transform .2s ease, opacity .2s ease;
}
.hamburger span + span { margin-top: 6px; }

/* X animation when open */
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile header + menu panel */
@media (max-width: 768px) {
  .header { position: sticky; top: 0; z-index: 1000; background: #fff; }
  .header .header-container {
    display: grid;
    grid-template-columns: auto 1fr;   /* logo | rest */
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    position: relative;                /* anchor the dropdown */
  }
  .logo { height: 65px; width: auto; }

  /* show burger, hide full nav by default */
  .hamburger { display: inline-flex; justify-content: center; align-items: center; }

  .nav { margin-left: auto; }          /* keep nav area aligned right */

  /* base: hide the list on mobile */
  .nav .nav-list {
    display: none;
  }

  /* dropdown panel when open */
  .nav .nav-list.open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.6rem 1rem 0.8rem;
  }
  .nav .nav-list.open li { display: block; }
  .nav .nav-list.open a {
    display: block;
    padding: 0.55rem 0;
  }

  /* keep the CTA styled nicely inside the dropdown too */
  .nav .nav-list.open li:last-child a.button-outline {
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 999px;
    text-align: center;
    margin-top: 0.25rem;
    padding: 0.55rem 0.9rem;
  }

  /* IMPORTANT: undo any earlier “hide all except last-child” rules */
  .nav .nav-list li { display: block; }
}
/* === Force bigger, centered Submit button on the contact form === */
.contact .contact-form button.button.button-primary,
.contact .contact-form input[type="submit"].button-primary,
.contact .contact-form .button.button-primary {
  display: block !important;         /* center-able */
  margin: 1.5rem auto 0 !important;  /* centers horizontally */
  padding: 1rem 2rem !important;     /* bigger click target */
  font-size: 1.15rem !important;     /* larger text */
  font-weight: 800 !important;       /* extra bold */
  min-width: 240px !important;       /* consistent presence */
  border-radius: 999px !important;   /* pill shape */
  text-align: center !important;
}

/* Optional: make it pop with brand color (adjust as needed) */
.contact .contact-form .button-primary {
  background: #6cb3ff !important;    /* Summit baby-blue (example) */
  color: #fff !important;
  border: none !important;
}
/* === Contact Form Submit Button with Circle Border === */
.contact-form .button-primary {
  display: block;
  margin: 1.5rem auto 0;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;

  /* Circle effect */
  border: 3px solid #6cb3ff;   /* Summit blue border */
  border-radius: 50%;          /* makes it a circle/oval */
  width: 80px;                 /* fixed circle size */
  height: 80px;
  line-height: 1.2;
  background: #fff;            /* white background */
  color: #6cb3ff;              /* Summit blue text */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* Hover effect */
.contact-form .button-primary:hover {
  background: #6cb3ff;
  color: #fff;
  transform: scale(1.05);
}