/**
 * Home About Section Styles
 * ------------------------------------------------------------
 * This file is loaded only by index.html and is scoped to:
 * .index-page .home-about-section
 *
 * Keep all homepage About CSS here so it does not mix with:
 * - hero styles in home-sections.css
 * - shared website styles in main.css
 * - inner about.html page styles
 */

/* ============================================================
   Home About Section Shell
   Purpose:
   - Provides the clean white section layout from the supplied reference.
   - Keeps the section compact under the home hero.
============================================================ */

/* Section wrapper:
   Bottom padding stays zero because the next section owns the single-line gap.
   This keeps the About section from adding hidden extra space after the list. */
.index-page .home-about-section {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  padding-top: clamp(32px, 3.8vw, 54px) !important;
  padding-bottom: 0 !important;
}

/* Container: sets the same readable width used by the reference layout. */
.index-page .home-about-container {
  max-width: 1240px;
}

/* Main grid: text on the left, visual on the right. */
.index-page .home-about-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
  gap: clamp(30px, 4vw, 58px);
  align-items: center;
}

/* ============================================================
   Home About Text Column
   Purpose:
   - Matches the orange kicker, navy headline, and readable paragraph style.
============================================================ */

/* Text column: keeps headings and paragraphs aligned flush left. */
.index-page .home-about-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  background: #ffffff;
}

/* Kicker row: orange label plus short orange line. */
.index-page .home-about-kicker {
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

/* Kicker text: scoped override for the old .about h5 rule in main.css. */
.index-page .home-about-kicker h5 {
  margin: 0;
  color: #e67e1f;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
}

/* Kicker line: visual divider shown after the orange label. */
.index-page .home-about-kicker span {
  width: 104px;
  height: 2px;
  flex: 0 0 126px;
  background: #e67e1f;
}

/* Main heading: large navy title like the reference screenshot. */
.index-page .home-about-content h3 {
  max-width: 620px;
  margin: 0 0 32px;
  color: #282d63;
  font-size: clamp(34px, 2.8vw, 44px);
  font-weight: 800;
  line-height: 1.2;
}

/* Overview label: black section cue above the two text groups. */
.index-page .home-about-overview-title {
  margin: 0 0 14px;
  color: #050505;
  font-size: 23px;
  font-weight: 800;
}

/* Subheadings: orange "Who we are" and "What we do" labels. */
.index-page .home-about-content h4:not(.home-about-overview-title) {
  margin: 0 0 8px;
  color: #e67e1f;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.25;
}

/* Paragraphs: navy copy with comfortable line spacing and reference-style measure. */
.index-page .home-about-content p {
  max-width: 640px;
  margin: 0 0 20px;
  color: #282d63;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.58;
}

/* ============================================================
   Home About Image Column
   Purpose:
   - Uses the existing 18+ years artwork.
   - Animates the image from the left side into its final right-column place.
============================================================ */

/* Image wrapper: gives the visual a stable frame for animation and responsive scaling. */
.index-page .home-about-visual-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 470px;
  animation: homeAboutImageFromLeft 2.8s ease-out both;
}

/* Image: shows the reference graphic without extra card styles. */
.index-page .home-about-visual-img {
  display: block;
  width: min(100%, 520px);
  max-height: none;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(15, 23, 42, 0.12));
}

/* Image entrance:
   - Starts from the far left edge of the browser window.
   - Moves slowly enough for visitors to see the left-to-right travel.
   - Travels behind the text layer so paragraphs stay readable.
   - Becomes fully visible only as it reaches the right-side image column.
*/
@keyframes homeAboutImageFromLeft {
  0% {
    opacity: 0;
    transform: translateX(calc(-100vw + 120px));
  }

  42% {
    opacity: 0.12;
    transform: translateX(calc(-48vw + 80px));
  }

  72% {
    opacity: 0.72;
    transform: translateX(-90px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Accessibility: disable the image motion for users who prefer reduced animation. */
@media (prefers-reduced-motion: reduce) {
  .index-page .home-about-visual-wrap {
    animation: none;
  }
}

/* ============================================================
   Home About Benefits
   Purpose:
   - Styles the "What You Get ?" list as a separate block below the intro.
   - Keeps all list CSS scoped to this home About section.
============================================================ */

/* Benefits wrapper:
   This is the final block before Services.
   Bottom spacing is intentionally zero; the Services section adds exactly one line gap. */
.index-page .home-about-benefits {
  margin-top: clamp(16px, 2.5vw, 34px);
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Benefits title: orange heading aligned with the left text column. */
.index-page .home-about-benefits h4 {
  margin: 0 0 18px;
  color: #e67e1f;
  font-size: 23px;
  font-weight: 800;
}

/* Benefits grid: two equal columns on desktop. */
.index-page .home-about-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 72px);
}

/* Benefits list reset: removes browser spacing while keeping readable rhythm. */
.index-page .home-about-benefits ul {
  display: grid;
  gap: 16px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

/* Benefits item:
   Overrides the older .about .what-you-get li margins from main.css.
   Without this reset, every list item adds hidden bottom space before Services. */
.index-page .home-about-benefits li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 0 !important;
  color: #111111;
  font-size: 17px;
  line-height: 1.5;
}

/* Last benefit item: explicit zero margin to remove the exact marked blank space. */
.index-page .home-about-benefits li:last-child {
  margin-bottom: 0 !important;
}

/* Benefits icon: navy circle with white check mark, matching the reference accent. */
.index-page .home-about-benefits li i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #ffffff;
  background: #282d63;
  font-size: 18px;
  line-height: 1;
}

/* ============================================================
   Home About Responsive Rules
   Purpose:
   - Keeps the same design readable on tablet and mobile.
============================================================ */

/* Tablet:
   The 18+ years artwork is decorative beside the desktop copy. On tablets and
   narrow browser windows it can crop down to only the orange frame area, so the
   whole visual column is hidden and the About text becomes the first content. */
@media (max-width: 1199px) {
  .index-page .home-about-grid {
    grid-template-columns: 1fr;
  }

  .index-page .home-about-content {
    max-width: 100%;
  }

  .index-page .home-about-visual-wrap {
    display: none !important;
    min-height: 0;
  }
}

/* Mobile and small screens:
   Keep this explicit mobile rule for clarity. It protects the layout if a
   future tablet rule is changed, and makes the "no orange image box on mobile"
   requirement easy to find in this file.
*/
@media (max-width: 991px) {
  .index-page .home-about-visual-wrap {
    display: none !important;
  }
}

/* Small tablet: reduce type scale and benefits columns. */
@media (max-width: 767px) {
  .index-page .home-about-kicker {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .index-page .home-about-kicker h5 {
    font-size: 20px;
  }

  .index-page .home-about-content h3 {
    margin-bottom: 30px;
    font-size: 34px;
  }

  .index-page .home-about-overview-title,
  .index-page .home-about-content h4:not(.home-about-overview-title),
  .index-page .home-about-benefits h4 {
    font-size: 21px;
  }

  .index-page .home-about-content p,
  .index-page .home-about-benefits li {
    font-size: 16px;
  }

  .index-page .home-about-benefits-grid {
    grid-template-columns: 1fr;
  }
}

/* Mobile: tighten spacing and icon sizes for narrow screens. */
@media (max-width: 575px) {
  .index-page .home-about-content h3 {
    font-size: 30px;
  }

  .index-page .home-about-benefits li {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
  }

  .index-page .home-about-benefits li i {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
}