/*-------------------------------

    Custom stylesheet (custom.css)

    Project: Eight Template
    Version: 1.0
    Author: By Themanoid
    Last change: 31 July 2016

    --

    This stylesheet is meant for
    your own custom styles, on
    top of The Eight Template

    Happy styling!
    - Themanoid

----------------------------*/

:root {
  /* Font families */
  --font-sans: 'Montserrat', sans-serif;
  --font-serif: 'Merriweather', serif;
  --font-heading: 'Russo One', sans-serif;

  /* Base sizing */
  --fs-base: 1rem;        /* 16px */
  --lh-base: 1.6;

  /* Modular scale ratio (≈ perfect fourth) */
  --scale: 1.333;

  /* Heading sizes */
  --fs-h1: calc(var(--fs-base) * var(--scale) * var(--scale) * var(--scale)); /* ~42px */
  --fs-h2: calc(var(--fs-base) * var(--scale) * var(--scale));                 /* ~32px */
  --fs-h3: calc(var(--fs-base) * var(--scale));                                /* ~21px */
  --fs-h4: var(--fs-base);                                                     /* 16px */
}

/* Apply across all pages */
body {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: #333;
}

h1, .hero h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  line-height: 1.1;
  margin: 0 0 0.75em;
	 margin-bottom: 0.5rem !important; /* pull up the copy that follows */
  line-height: 1.25 !important;     /* tighten any wraps in the headline */
}

h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  margin: 1.5em 0 0.5em;
}

h3, .service-category h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  margin: 1em 0 0.5em;
}

h4 {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  margin: 1em 0 0.25em;
}

p {
  margin: 0 0 1em;
}

.tagline-large {
  font-size: calc(var(--fs-base) * var(--scale));
  font-style: italic;
  color: #555;
  margin-bottom: 0.1rem;
}



/* 1) Remove that pt-xs padding on the right-hand header column */
header .pt-xs {
  padding-top: 0 !important;
}

/* 2) Shrink the hero section’s top padding */
section.hero {
  padding-top: 10px !important;   /* play with this value */
	  margin-bottom: 0.5rem !important;
}

/* Reduce hero bottom padding */
section.hero {
  /* instead of 100px, pick something smaller */
  padding: 10px 0 20px !important;
}

/* Tighter bottom margin on the tagline paragraph */
section.hero p {
  margin-bottom: 0.5em !important;   /* or even 0.25em if you like */
}

/* 3) Remove any default <h1> top margin */
section.hero h1 {
  margin-top: 0 !important;
}

.services-overview {
  padding: 4rem 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 2rem 1.5rem;
}


.service-category h3::after {
  content: '';
  display: block;
  width: 2rem;
  height: 2px;
  background: currentColor;
  margin-top: 0.5rem;
}

.service-category ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-intro img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* Values grid */
.our-values .values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 2rem;
  margin: 3rem 0;
}


/* ────────────────────────────────────────────────────────────
   REVERT: About-Intro two-column w/ larger text
   ──────────────────────────────────────────────────────────── */
.about-intro .about-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 4rem auto;
  gap: 2rem;                    /* space between columns */
}
.about-intro .about-grid > div {
  flex: 1 1 50%;                /* two equal halves */
  min-width: 280px;
}
.about-intro h2 {
  font-size: 2.75rem;           /* extra-big heading */
  line-height: 1.2;
  margin-bottom: 1rem;
}
.about-intro p {
  font-size: 1.25rem;           /* larger body text */
  line-height: 1.6;
  color: #444;
}

/* ────────────────────────────────────────────────────────────
   REVERT: Hero tagline bigger
   ──────────────────────────────────────────────────────────── */
.hero p {
  font-size: 1.75rem !important;
  line-height: 1.3;
  margin-top: 0.5em;
}

/* ────────────────────────────────────────────────────────────
   REVERT: Values section in three columns, larger copy
   ──────────────────────────────────────────────────────────── */
.our-values {
  padding: 4rem 0;
}
.our-values h2 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
}
.our-values .values-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.our-values .values-grid > div {
  flex: 1 1 calc(33.333% - 2rem);
  min-width: 250px;
  background: none;             /* remove gray background if you added one */
  padding: 0;                   /* remove extra padding */
}
.our-values h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.our-values p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: #555;
}

/* ──────────────────────────────────────────────────────────
   About-Intro two-column layout (text + image), original copy
   ────────────────────────────────────────────────────────── */
.about-intro .about-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3rem;             /* space between columns */
  max-width: 1200px;     /* cap overall width */
  margin: 4rem auto;     /* center + vertical spacing */
}

.about-intro .about-text {
  flex: 1 1 450px;       /* roughly half the width */
  min-width: 300px;
}



.about-intro .about-image {
  flex: 1 1 450px;
  min-width: 300px;
  text-align: center;
}

.about-intro .about-image img {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: inline-block;
  border-radius: 4px;
}


/* Team Section: Responsive 3-column grid */
.team-section .team-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  justify-items: center;
  margin: 4rem 0;
}
@media (max-width: 992px) {
  .team-section .team-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .team-section .team-list {
    grid-template-columns: 1fr;
  }
}

/* Team Member Card Styles */
.team-section .team-member {
  text-align: center;
  max-width: 300px;
}
.team-section .team-member .headshot {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 1rem;
}
.team-section .team-member h4 {
  font-family: 'Merriweather', serif;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: #2C55D5;
}
.team-section .team-member .bio {
  font-family: 'Merriweather', serif;
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
  margin: 0 auto;
  max-width: 280px;
}

/* in custom.css */
.about-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}
.about-intro__copy p {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* nav pills below hero */
.cap-pillars {
  margin: 2rem 0 1rem;
}
.cap-pillars .pill {
  display: inline-block;
  margin: 0 .75rem;
  padding: .5rem 1rem;
  border-radius: 2rem;
  background: #f0f0f0;
  color: #333;
  font-family: 'Merriweather', serif;
  text-decoration: none;
}
.cap-pillars .pill:hover {
  background: #2C55D5;
  color: #fff;
}

/* section headings */
.capabilities-overview h3 {
  font-family: 'Merriweather', serif;
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: .5rem;
}

/* list items */
.capabilities-overview ul {
  list-style: none;
  padding: 0;
}
.capabilities-overview li {
  margin-bottom: .35rem;
  color: #555;
  font-family: 'Merriweather', serif;
  font-size: .95rem;
}

/* make all portfolio thumbs grayscale by default */
.grid.classic .item .thumb img,
.grid.masonry .item .thumb img {
  filter: grayscale(100%);
  transition: filter 0.4s ease, opacity 0.4s ease;
}

/* on hover, remove the grayscale filter */
.grid.classic .item:hover .thumb img,
.grid.masonry .item:hover .thumb img {
  filter: grayscale(0%);
}

/* optionally, you can also fade up the brightness slightly */
.grid.classic .item:hover .thumb img,
.grid.masonry .item:hover .thumb img {
  /* uncomment if you like a slight pop in brightness too */
  /* filter: grayscale(0%) brightness(1.05); */
}