/* ==========================================
SERVICES PAGE
Conscious Systems Design
========================================== */

/* Intro Section */

.services-intro {
padding-top: 2rem;
padding-bottom: 1rem;
}

.services-intro h2 {
text-align: center;
font-size: 2.8rem;
margin-bottom: 1rem;
}

.services-intro p {
max-width: 900px;
margin: 0 auto;
text-align: center;
font-size: 1.15rem;
}

/* ==========================================
SERVICES GRID
========================================== */

.services-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 2rem;

  margin-top: 2rem;
  margin-bottom: 4rem;
}


/* ==========================================
SERVICE CARDS
========================================== */

.service-card {
  flex: 1 1 320px;
  max-width: 340px;

  display: flex;
  flex-direction: column;

  background: white;
  border-radius: 0.5rem;
  padding: 1.5rem;

  box-shadow:
    0 2px 5px rgba(0,0,0,0.08);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.service-card h3 {
text-align: center;
font-size: 1.7rem;
margin-bottom: 0.75rem;
min-height: 5rem;
}

/* Duration */

.service-duration {
text-align: center;
font-weight: 600;
color: #555;
margin-bottom: 1rem;
}

/* Description */

.service-card p {
margin-bottom: 1rem;
}

/* Feature List */

.service-card ul {
padding-left: 1.25rem;
margin-bottom: 1.5rem;
flex-grow: 1;
}

.service-card li {
margin-bottom: 0.4rem;
}

/* Pricing */

.service-price {
text-align: center;
font-size: 1.3rem;
font-weight: 700;
color: var(--green);
margin-bottom: 1rem;
}

/* ==========================================
BUTTONS
========================================== */

.service-button {
  display: block;
  text-align: center;
  width: 100%;
  margin-top: auto;
}

.service-button:hover {
opacity: 0.95;
}

/* ==========================================
DISCOVERY CTA
========================================== */

.discovery-section {
text-align: center;
padding-bottom: 3rem;
}

.discovery-section h2 {
font-size: 2rem;
margin-bottom: 1rem;
}

.discovery-section p {
max-width: 800px;
margin: 0 auto 2rem auto;
}

.discovery-button {
  display: inline-block;
  margin-bottom: 2.5rem;
  font-family: "Source Sans 3", sans-serif;
  letter-spacing: 0.03em;
}

/* ==========================================
"FLAGSHIP SERVICE"
========================================== */

.service-card.featured {
border: 3px solid var(--green);
position: relative;
}

.service-card.featured::before {
content: "Flagship Service";

position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);

background: var(--green);
color: white;

padding: 0.25rem 0.75rem;
border-radius: 999px;

font-size: 0.8rem;
font-weight: 700;
}

/* ==========================================
INDIVIDUAL SERVICE PAGE
========================================== */

.service-hero {
  text-align: center;
  padding: 2rem 0 1rem;
}

.service-hero h2 {
  font-size: 3rem;
}

.service-subtitle {
  max-width: 850px;
  margin: 0 auto;
  font-size: 1.15rem;
}

.service-content {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 1.25rem 0 0;
}

.service-content.reverse {
  flex-direction: row-reverse;
}

.service-text,
.service-image {
  flex: 1;
}

.service-image img {
  display: block;
  margin: 0 auto;

  max-width: 100%;
  height: auto;

  border-radius: 0.5rem;
  box-shadow: 0 2px 5px rgba(0,0,0,.08);
}

.service-highlight {
  text-align: center;
  padding: 2.5rem 0 1.5rem;
}

.service-highlight ul {
  list-style: disc;
  list-style-position: outside;
  padding-left: 1.5rem;
  margin-top: 0rem;
  display: inline-block;
  text-align: left;
}

.service-highlight li {
  margin-bottom: 0.1rem;
  line-height: 1.3;
}

.service-results {
  text-align: center;
  padding: 2rem 0 3rem;

  width: 100%;
  max-width: 825px;
  margin-left: auto;
  margin-right: auto;
}

.service-text h3,
.service-highlight h3,
.service-results h3 {
  font-size: 1.8rem;
}

.payment-asst {
  text-align: center;
  padding-bottom: 1.5rem;
}

.payment-asst p {
  max-width: 700px;
  margin: 0 auto;
}

@media (max-width: 900px) {

  .service-content,
  .service-content.reverse {
    flex-direction: column;
    gap: 2rem;
  }

  .service-text,
  .service-image {
    width: 100%;
  }
}

.service-text ul {
  padding-left: 1.25rem;
  margin-left: 0;
}

/* ==========================================
CONTACT MODAL
========================================== */

.contact-modal {
  position: fixed;
  inset: 0;

  display: none;
  justify-content: center;
  align-items: center;

  padding: 120px 2rem 2rem;

  background: rgba(0, 0, 0, 0.45);

  z-index: 5000;
}

.contact-modal.active {
  display: flex;
}

.contact-modal-content {
  position: relative;

  width: 100%;
  max-width: 700px;

  max-height: 90vh;
  overflow-y: auto;

  background: white;

  border-radius: 0.75rem;

  padding: 1.25rem 2rem;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.25),
    0 0 15px rgba(0,0,0,0.10);
}

.contact-modal-content h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}

.modal-close {
  position: absolute;

  top: 1rem;
  right: 1rem;

  width: 40px;
  height: 40px;

  padding: 0;

  font-size: 1.2rem;
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-modal fieldset {
  margin-bottom: .75rem;
}

.contact-modal fieldset label {
  display: block;
  text-align: left;
  margin-bottom: 0.25rem;
}

.contact-modal input,
.contact-modal textarea {
  width: 100%;
}

.contact-modal .button[type="submit"] {
  display: block;
  margin-top: 1rem;
  margin-left: auto;
}

main .service-content,
main .service-hero,
main .service-highlight,
main .service-results {
  padding-left: 2rem;
  padding-right: 2rem;
}