:root {
  --primary: #6eb12d; /* Professional Trust Blue */
  --secondary: #457e43;
  --electric-gold: #ffbd59; /* High-visibility Action Yellow/Gold */

  --text-dark: #333;

  --white: #ffffff;
}

@font-face {
  font-family: "MusticaPro";
  src: url("../media/MusticaPro-SemiBold.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;

  font-family: "MusticaPro", Verdana, sans-serif;
}

h1,
h2,
h3 {
  color: var(--secondary);
}

/* -----------------------------------------------------------------
Top Bar
--------------------------------------------------------------------*/

.top-bar {
  min-height: 2vh;
  background-color: #f4f4f4;

  padding: 8px 5%;

  display: flex;

  justify-content: flex-end;

  gap: 20px;

  font-size: 0.9rem;

  border-bottom: 1px solid #ddd;
}

.top-bar a {
  color: var(--primary);

  text-decoration: none;

  font-weight: 600;
}

.top-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-weight: 600;
}

.icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
  color: var(--text-dark);
  fill: none;
}

@media (max-width: 400px) {
  .top-bar {
    justify-content: center;

    font-size: 0.6rem;

    gap: 10px;
  }
}

@media (max-width: 600px) {
  .top-bar {
    justify-content: center;

    font-size: 0.8rem;

    gap: 10px;
  }
}

/* -----------------------------------------------------------------
Hero section
--------------------------------------------------------------------*/
.hero {
  min-height: 20vh;
  background-color: var(--white);

  /* 1. Use Flexbox to align them side-by-side naturally instead of absolute pinning */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4vw; /* Keeps the spacing proportional to the screen width */
  padding-top: 20px;
  box-sizing: border-box;
}

/* 2. Pull the card out of the background so it can scale naturally next to the text */
.hero-card-img {
  width: 35vw; /* Scale relative to screen width */
  height: auto;
  display: block;
}

.hero h1 {
  /* 3. Drop absolute positioning entirely so it can never smash into the image */
  position: relative;
  left: auto;
  bottom: auto;
  line-height: 1.1;
  margin: 0;
  color: var(--primary);
  text-align: left;
  z-index: 10;
}

.hero h1 span {
  display: block;
}

/* 
   4. Use vw (Viewport Width) units for font size. 
   This forces the text to shrink flawlessly like an image as the screen narrows.
*/
.hero h1 span:first-child {
  font-size: 5.5vw;
}

.hero h1 span:last-child {
  font-size: 5vw;
}

/* -----------------------------------------------------------------
Scroll Indicator Styles
--------------------------------------------------------------------*/
.scroll-indicator {
  position: absolute;
  bottom: 4%; /* Pins it cleanly just above the fold */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  z-index: 20;
  cursor: pointer;
}

/* The Animated Mouse Body */
.scroll-indicator .mouse {
  width: 26px;
  height: 42px;
  border: 2px solid var(--primary);
  border-radius: 20px;
  position: relative;
}

/* The Moving Wheel Inside the Mouse */
.scroll-indicator .wheel {
  width: 4px;
  height: 8px;
  background-color: var(--secondary);
  border-radius: 2px;
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll-wheel 1.6s infinite ease-in-out;
}

/* The Subtle Bouncing Chevron/Arrow below the mouse */
.scroll-indicator .arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--primary);
  border-bottom: 2px solid var(--primary);
  transform: rotate(45deg);
  animation: scroll-arrow 1.6s infinite ease-in-out;
}

/*Animations*/
@keyframes scroll-wheel {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 14px);
  }
}

@keyframes scroll-arrow {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-3px, -3px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(3px, 3px);
  }
}

/* Mobile Responsiveness*/
@media (max-width: 900px) {
  .scroll-indicator {
    bottom: 2%; /* Snugs it tighter to the bottom on smaller viewport heights */
  }

  .scroll-indicator .mouse {
    width: 22px;
    height: 36px; /* Slightly scaled down for small viewports */
  }

  /* Optional: change indicators to match secondary color if white card background changes */
  .scroll-indicator .mouse,
  .scroll-indicator .arrow {
    border-color: var(--secondary);
  }
}

/* -----------------------------------------------------------------
Service and About Section
--------------------------------------------------------------------*/

.info-split {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Aside is smaller */
  gap: 50px;
  background: #fdfdfd;
  padding: 1em 10em;
}

.aside-info {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  height: fit-content;
}

.aside-info h3 {
  color: var(--secondary);
  border-bottom: 2px solid var(--electric-gold);
  display: inline-block;
}

.aside-info hr {
  color: var(--secondary);
}

/* about section */

.main-about h2 {
  color: var(--secondary);
}

.main-about strong {
  color: var(--primary);
}

.about-flex-container {
  gap: 30px;
  align-items: center; /* Centers image vertically with text */
}

.about-text {
  margin-bottom: 8em;
}

.about-image-wrapper {
  text-align: center;
}

.about-image-wrapper img {
  width: 100%;
  max-width: 300px; /* Keeps it "smaller" on desktop */
  height: auto;
  border-radius: 15px; /* Rounded corners for a friendly look */
  border: 5px solid var(--secondary);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  /* Slight rotation for a "photo-on-desk" feel */
  transform: rotate(-2deg);
}

/* 1. Center the button and add spacing inside the parent wrapper div */
.button-wrapper-div {
  display: flex;
  justify-content: center; /* Centers the button horizontally */
  align-items: center; /* Centers it vertically if the div has height */
  padding: 40px 20px; /* Generous breathing room above/below and on the sides */
  width: 100%;
  box-sizing: border-box;
}

/* 2. The Updated Gold Button using your theme variable */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* Uses your electric gold variable as the primary background anchor */
  background: var(--electric-gold);

  color: #1e1e1e !important; /* Bold dark text so it stands out cleanly against the gold */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.95rem;
  padding: 14px 36px; /* Clean, modern wider padding footprint */
  border-radius: 8px;
  text-decoration: none;

  /* Soft shadow matches your theme hue */
  box-shadow: 0 4px 15px rgba(251, 188, 5, 0.25);
  transition: all 0.2s ease-in-out;
  border: none;
  cursor: pointer;
}

/* Elegant lift animation on hover */
.btn-gold:hover {
  transform: translateY(-2px);
  filter: brightness(
    1.08
  ); /* Automatically brightens your theme gold cleanly without needing hex math */
  box-shadow: 0 6px 20px rgba(251, 188, 5, 0.4);
}

/* Snappy feedback state when clicked */
.btn-gold:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(251, 188, 5, 0.15);
}
@media (max-width: 1200px) {
  .info-split {
    padding: 3em;
  }
}

@media (max-width: 900px) {
  .info-split {
    grid-template-columns: 1fr;
  }
  .info-split {
    padding: 1em;
  }
}

/* -----------------------------------------------------------------
Jobs Section
--------------------------------------------------------------------*/
.jobs-section img {
  display: block;
  width: 100%; /* Takes up the full width of the screen */
  max-width: 100%; /* Absolutely forbids it from going wider than its container */
  height: auto; /* Keeps the aspect ratio perfect so it doesn't distort */
  margin: 0 auto; /* Centers it */
}

/* 3. Clean up the section container */
.jobs-section {
  background: #fff;
  text-align: center;
  width: 100%;
}

/* -----------------------------------------------------------------
 COntact Section
--------------------------------------------------------------------*/

.contact-section {
  padding: 10em;
  background: url(../media/banner.webp) center/cover;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center; /* Centers the card horizontally */
  align-items: center; /* Centers the card vertically */
}

.direct-contact-card {
  background: rgba(255, 255, 255, 0.9);
  padding: 1em 8em 1em 1em;
  border-radius: 12px;
  border-left: 4px solid var(--electric-gold);
  min-width: 0;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 15px;
  padding-left: 2em;
  margin-bottom: 25px;
  text-decoration: none;
  transition: 0.2s;
}

.contact-method:hover {
  transform: translateX(5px);
}

.contact-method div span {
  display: block;
  font-size: 0.8rem;
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.contact-method a {
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-weight: 600;
}

.contact .contact-method div strong {
  font-size: 1.1rem;
}

.response-tag {
  margin-top: 10px;
  display: inline-block;
  font-size: 0.85rem;
  padding: 5px 12px;
  color: var(--text-dark);
  border-radius: 4px;
}

@media (max-width: 768px) {
  .contact-section {
    /* 1. Smash down the massive outer padding so the card has room to breathe */
    padding: 4em 15px;
  }

  .direct-contact-card {
    /* 3. Kill that giant 8em right padding which is crushing your text on mobile */
    padding: 25px 20px;
    width: 100%;
    max-width: 450px; /* Prevents the card from stretching too wide on tablet sizes */
  }

  .contact-method {
    /* 4. Tweak internal alignment so things stack or sit cleanly */
    padding-left: 0; /* Remove the desktop left shift */
    margin-bottom: 20px;
  }

  .contact-method:last-child {
    margin-bottom: 0; /* Cleans up spacing at the very bottom of the card */
  }
}

/* -----------------------------------------------------------------
Google Reviews Section
--------------------------------------------------------------------*/
/* -----------------------------------------------------------------
Google Review Static Card Styles
--------------------------------------------------------------------*/
.google-review-card {
  display: block;
  background: var(--white);
  padding: 24px;
  border-radius: 10px;
  border: 1px solid #e0e0e0;
  text-decoration: none; /* Strip out basic link line */
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  box-sizing: border-box;
}

/* Give it a crisp interaction hint when hovered */
.google-review-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  border-color: #ccc;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.reviewer-meta {
  display: flex;
  flex-direction: column;
}

.reviewer-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-dark);
}

.google-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.star-rating-row {
  display: flex;
  gap: 4px; /* Slight horizontal space between star panels */
  margin-bottom: 14px;
}

.star-icon {
  width: 18px;
  height: 18px;
  display: block;
}
.review-body-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #3c4043; /* Standard Google Text Colour */
  margin: 0 0 16px 0;
  font-style: normal; /* Removes the cheap placeholder italic look */
}

.review-footer {
  display: flex;
  align-items: center;
  border-top: 1px solid #f1f3f4;
  padding-top: 12px;
}

.verified-text {
  font-size: 0.8rem;
  color: #1a73e8; /* Google Link Blue */
  font-weight: 600;
}

/* map */
/* 1. Make the map container a flexible box wrapper */
.map {
  position: relative;
  width: 100%;
  height: 300px; /* Controls how tall you want the map to sit */
  margin: 15px 0 25px 0;
  border-radius: 8px;
  overflow: hidden; /* Keeps the map corners cleanly rounded */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 2. Force the embedded iframe to scale completely to its parent boundaries */
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important; /* Overrides the hardcoded width="600" attribute */
  height: 100% !important; /* Overrides the hardcoded height="300" attribute */
  border: 0;
}