/* ******************************************** */
/* HEADER */
/* ******************************************** */

.header {
  position: absolute; /* anchors to page top (no positioned ancestor) */

  top: 0;
  left: 0;
  padding: 0 4.8rem;
  height: 9.6rem;
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;

  z-index: 10;
  background-color: transparent;
  transition:
    background-color 0.3s,
    box-shadow 0.3s;
}

.logo {
  /* height: 4.8rem; */
  width: 12.8rem;
}

/* Default state (over hero) — show light logo, hide dark */
.logo--dark {
  display: none;
}
.logo--light {
  display: block;
}

/* Sticky state — flip them */
.sticky .logo--dark {
  display: block;
}
.sticky .logo--light {
  display: none;
}

.subheadline {
  /* font-size: 2rem; */

  font-size: clamp(17px, 15.6px + 0.36vw, 20px);

  line-height: 1.6;
  margin-bottom: 4.8rem;
  /* color: #ced4da; */
  color: #f5f5f4;
}

/* ******************************************** */
/* NAVIGATION */
/********************************************** */

.main-nav-list {
  list-style: none;
  display: flex;
  gap: 3.2rem;
  align-items: center;

  transition: background-color 0.2s;
}

.main-nav-link:link,
.main-nav-link:visited {
  display: inline-block;
  padding: 1.2rem 2.4rem;
  text-decoration: none;
  /* color: #3a3d42; */
  color: #ced4da;
  /* color: red; */
  font-weight: 500;
  font-size: 1.8rem;
  border-radius: 9px;
  transition: all 0.3s;
}

.main-nav-link:hover,
.main-nav-link:active {
  color: #f1f3f5;
  background-color: #1a1a1c;
}

.main-nav-link.nav-cta:link,
.main-nav-link.nav-cta:visited {
  padding: 1.2rem 2.4rem;
  border-radius: 9px;
  color: #f1f3f5;
  background-color: #2a9d8f;
}

.main-nav-link.nav-cta:hover,
.main-nav-link.nav-cta:active {
  background-color: #238478;
}

/* MOBILE */

.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;

  display: none;
}

.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  color: #f1f3f5;
  /* color: inherit; */
}

.icon-mobile-nav[name="close-outline"] {
  display: none;
}

/* STICKY NAVIGATION */
.sticky .header {
  position: fixed;
  top: 0;
  /* bottom: 0; */
  width: 100%;
  height: 8rem;

  padding-top: 0;
  padding-bottom: 0;
  background-color: #f1f3f5;
  z-index: 999;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
}

.sticky .main-nav-link:not(.nav-cta):link,
.sticky .main-nav-link:not(.nav-cta):visited,
.sticky .icon-mobile-nav,
.nav-open .main-nav-link:not(.nav-cta) {
  color: #3a3d42;
}

.sticky .main-nav-link:not(.nav-cta):hover,
.sticky .main-nav-link:not(.nav-cta):active {
  background-color: #1a1a1c;
  color: #f1f3f5;
}

/* ******************************************** */
/* HERO SECTION */
/* ******************************************** */

.section-hero {
  background-color: #f1f3f5;
  padding: 0rem 0 9.6rem 0;
}

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 9.6rem;
  position: relative; /* KEEP — the img and ::before position against this */
  color: #fff;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* above img (0), below content (2) */
  background:
    linear-gradient(to bottom, rgba(13, 13, 14, 0.7) 0%, transparent 15%),
    linear-gradient(to top, rgba(13, 13, 14, 0.95) 0%, transparent 20%),
    linear-gradient(90deg, rgba(13, 13, 14, 0.85) 0%, rgba(13, 13, 14, 0.2) 30%);
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center; /* default, overridden by the media queries above */
  z-index: 0;
}

.hero-content {
  max-width: 65rem;
  margin-left: 8rem;
  z-index: 2; /* above img (0) and ::before (1) */
}

.hero-buttons {
  display: flex;
  justify-content: flex-start;
  gap: 1.6rem;
}

/* ******************************************** */
/* ABOUT COACH SECTION */
/* ******************************************** */

/* Section = full-width band */
.section-about-coach {
  background-color: #f1f3f5;
  padding: 6.4rem 0 9.6rem 0;
  position: relative;
}

.about-coach-container {
  display: grid;
  column-gap: 6.4rem;
  row-gap: 9.6rem;

  grid-template-columns: repeat(2, 1fr);
}

/* spacing between sections */
.about-coach-container:not(:last-child) {
  margin-bottom: 9.6rem;
}

/* Flow utility — top direction */
.flow > * + * {
  margin-top: 3.2rem;
}

.about-text {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.6;
  color: #495057;
}

/* Image treatment: B&W + shadow for that editorial, industrial feel */
.about-img-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* .about-coach-img this was before, now its this: */
.about-coach-video {
  width: 100%;
  border-radius: 8px;
  overflow: hidden; /* clips image to rounded corners */
  box-shadow: 0 20px 40px rgba(26, 26, 28, 0.3); /*soft dark shadow, lifts it off the page */
  display: block; /* removes phantom gap below img */
  /* B&W + slight contrast punch */
  filter: grayscale(25%) contrast(0.9); /* grayscale(15%) contrast(1.1)   */
}

.quote-text {
  font-style: italic;
  font-size: 1.6rem;
  color: #3a3d42; /* softer than pure black, still readable */
  border-left: 3px solid #2a9d8f; /* teal accent bar on the side */
  padding-left: 1.5rem;
  margin-top: 6.4rem; /* override — also top, no collision */
}

.quote-author {
  color: #6b7177; /* muted grey for the attribution */
  font-size: 1.6rem;
  margin-top: 0.6rem; /* override — also top, no collision */
}

/* ABOUT TEXT AND VIDEO OF THE COACH CINEMATIC EFFECT */

.about-text-box .about-text,
.about-text-box .quote-text,
.about-text-box .quote-author,
.about-text-box .heading-secondary {
  opacity: 0;
  transform: translateY(2rem); /* start slightly lower, slides up on reveal */
  transition:
    opacity 8s ease,
    transform 8s ease;
}

/* When the section is in view, 
reveal each with a staggered delay */
.about-visible .heading-secondary {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}
.about-visible .about-text:nth-of-type(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}
.about-visible .about-text:nth-of-type(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}
.about-visible .about-text:nth-of-type(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s;
}
.about-visible .about-text:nth-of-type(4) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s;
}
.about-visible .quote-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.2s;
}
.about-visible .quote-author {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.4s;
}

/* Fade effect on the top and bottom of the section */

/* TOP seam — reaches up into the lighter section above */
.section-about-coach::before {
  content: "";
  position: absolute;
  top: -10rem;
  left: 0;
  width: 100%;
  height: 10rem;
  background:
    radial-gradient(
      /* concave shape — on top */ ellipse 140% 100% at 50% 100%,
      transparent 50%,
      rgb(13, 13, 14) 93%
    ),
    linear-gradient(
      /* coverage blanket — under, ensures the line is never bare */ to bottom,
      rgb(13, 13, 14) 0%,
      transparent 50%
    );
}

.section-about-coach::after {
  content: "";
  position: absolute;
  bottom: -3rem; /* hangs DOWN, half in about / half in testimonials */
  left: 0;
  width: 100%;
  height: 4rem; /* tall strip straddling the seam */
  z-index: 1; /* paints over testimonials + its smoke */
  background: radial-gradient(
    ellipse 160% 123% at 50% 0%,
    #f1f3f5 30%,
    /* light, arcing down in the middle */ #1a1a1c 90%
      /* dark at the bottom/edges */
  );
}

/* ******************************************** */
/* TESTIMONIALS SECTION */
/* ******************************************** */
.section-testimonials {
  isolation: isolate; /*bundle smoke so the fade can sit above it */
  position: relative;
  overflow: hidden;
  background-color: #1a1a1c;
  padding: 12rem 0;
}

/* TESTIMONIALS CINEMATIC EFFECT */

/* CONTENT */

.testimonials--container {
  position: relative;
  z-index: 10;

  /* fade-in via scroll trigger */
  opacity: 0;

  transition: opacity 1s ease 0.2s;

  /* animation: textFadeIn 1.8s ease forwards;
  animation-delay: 0.6s; */

  padding: 10rem 2rem; /* internal spacing: 100px top/bottom, 20px sides */
  text-align: center;

  color: #f1f3f5;
}

/* SMOKE LAYER 1 */

.section-testimonials::before {
  content: "";

  position: absolute;
  /* its top, bottom,left,right, all in one keyword
  we use it bcz: Make this smoke layer bigger than 
  the section so animations look smooth and natural and doesnt
  accidentaly show image edges if they are rough or something */
  inset: -10%;

  z-index: 1;

  background-image: url("../img/smoke-1.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  /* opacity: 0.22; */
  opacity: 0;

  /* transition: opacity 40s ease 0.3s; */

  filter: blur(10px);

  mix-blend-mode: screen;

  will-change: transform, opacity;

  animation: smokeFloat1 26s ease-in-out infinite;
  /* smokeOpacity1 12s ease-in-out infinite; */
}

/* SMOKE LAYER 2 */

.section-testimonials::after {
  content: "";

  position: absolute;
  inset: -15%;

  z-index: 2;

  background-image: url("../img/smoke-2.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  opacity: 0;

  /* this is for simple opacity animation, for a bit more complex
  i decided to use keyframes, yes I, not the AI xddd */
  /* transition: opacity 40s ease 0.6s; */

  filter: blur(14px);

  /* we use this bcz: it'll drop that black background 
to transparent and blend the light smoke as a glow.
 Without it, you'd see the black rectangle edges.; */
  mix-blend-mode: screen;

  /* we optimize browser, tell him like prepare for this */
  will-change: transform, opacity;

  animation: smokeFloat2 34s ease-in-out infinite;
  /* smokeOpacity2 16s ease-in-out infinite; */
}

/* TEXT */

@keyframes textFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* SMOKE MOVEMENT */

@keyframes smokeFloat1 {
  0% {
    transform: scale(1.08) translate3d(-2%, 0, 0);
  }

  50% {
    transform: scale(1.14) translate3d(2%, -1%, 0);
  }

  100% {
    transform: scale(1.08) translate3d(-2%, 0, 0);
  }
}

@keyframes smokeFloat2 {
  0% {
    transform: scale(1.12) translate3d(2%, 1%, 0);
  }

  50% {
    transform: scale(1.18) translate3d(-2%, -1%, 0);
  }

  100% {
    transform: scale(1.12) translate3d(2%, 1%, 0);
  }
}

/* OPACITY PULSING */

@keyframes smokeOpacity1 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.16;
  } /* fade-in completes by 20% of the cycle */
  60% {
    opacity: 0.2;
  }
  100% {
    opacity: 0.16;
  }
}

@keyframes smokeOpacity2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.22;
  } /* fade-in completes by 20% of the cycle */
  60% {
    opacity: 0.26;
  }
  100% {
    opacity: 0.22;
  }
}

/* container handles text only */
.section-testimonials.smoke-visible .testimonials--container {
  opacity: 1;
}

.section-testimonials.smoke-visible::before {
  opacity: 0.22;
  animation:
    smokeFloat1 26s ease-in-out infinite,
    smokeOpacity1 12s ease-in-out forwards;
}

.section-testimonials.smoke-visible::after {
  opacity: 0.16;
  animation:
    smokeFloat2 34s ease-in-out infinite,
    smokeOpacity2 16s ease-in-out forwards;
}

/* Blur effect */
.testimonials--container .section-label,
.testimonials--heading,
.testimonial-blockquote,
.testimonial-figcaption {
  filter: blur(8px);
  transition: filter 1.8s ease 1.2s;
}

.section-testimonials.smoke-visible .section-label,
.section-testimonials.smoke-visible .testimonials--heading,
.section-testimonials.smoke-visible .testimonial-blockquote,
.section-testimonials.smoke-visible .testimonial-figcaption {
  filter: blur(0);
}

/* //////////////////////////////////////////////////////////// */

.section-testimonials .section-label {
  color: #f1f3f5;
}

.testimonials--heading {
  color: #f1f3f5;
}

.testimonials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10rem;
  row-gap: 10rem;
}

.testimonial-blockquote {
  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 2rem;
}

.testimonial-figcaption {
  font-size: 1.6rem;
  font-weight: 400;
}

/* ******************************************** */
/* THE PROCESS SECTION */
/* ******************************************** */

.section-journey {
  background-color: #f1f3f5;
  padding: 9.6rem 0;
  position: relative;
  /* z-index: 2; */
}

.journey-container {
  max-width: 90rem; /* narrower than other sections — timelines read better in a column */
  margin: 0 auto;
  padding: 0 3.2rem;
}

.section-journey .section-label {
  color: #2a9d8f;
  text-align: center;
}

.journey-phase {
  position: relative;
  /* display: flex; */
  /* gap: 1rem; */
  padding-left: 3rem;
  max-width: 80rem;

  margin-bottom: 4.4rem;
  z-index: 2;
}

.journey-phase:last-child {
  margin-bottom: 0;
}
/* Marker positioned relative to the timeline, not the phase */
.journey-marker {
  position: absolute;
  top: -0.6rem;
  left: -10rem; /* relative to .journey-phase parent — pulls marker leftward */
  transform: translateX(-50%); /* centers marker on the line */
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  padding: 1.5rem;
  border-radius: 5px;

  color: #f1f3f5;
  background-color: #2a9d8f;

  opacity: 0;

  /* prevents text from wrapping to a new line.
        Useful for labels, buttons, badges where you want text on one line always. */
  white-space: nowrap;

  /* controls stacking order on positioned elements.
         The marker uses it to sit on top of the timeline line where they overlap. */
  z-index: 2;
}

.journey-phase::before {
  content: "";
  position: absolute;
  /* match the marker's position so it sits right behind it */
  top: -0.6rem;
  left: -14.5rem;
  /* transform: translateX(-50%); */
  width: 9rem; /* ~marker width — tune to fully cover */
  height: 5rem; /* ~marker height — tune */
  background-color: #f1f3f5;
  border-radius: 5px;
  z-index: -1; /* above the line... */
  opacity: 1;
}
/* 
.journey-phase:nth-child(1) .journey-marker {
  opacity: calc((var(--progress-linear, 0) - 0.15) * 10);
}
.journey-phase:nth-child(2) .journey-marker {
  opacity: calc((var(--progress-linear, 0) - 0.3) * 10);
}
.journey-phase:nth-child(3) .journey-marker {
  opacity: calc((var(--progress-linear, 0) - 0.5) * 10);
}
.journey-phase:nth-child(4) .journey-marker {
  opacity: calc((var(--progress-linear, 0) - 0.7) * 10);
} */

.journey-content {
  padding-right: 10rem;
}

.journey-content-text {
  color: #495057;
  font-size: 1.8rem;
  line-height: 1.2;
  font-weight: 400;
  padding: 0.2rem 0.2rem;
  margin-bottom: 0.2rem;
}

/* The timeline — left-aligned vertical line + content blocks */
.journey-timeline {
  position: relative;
  padding-left: 18rem; /* room for the line and markers */
  margin-bottom: 12.8rem;
}

/* The vertical line — pseudo-element on the timeline */
.journey-timeline::after {
  content: "";
  position: absolute;
  /* line sits 12rem from timeline left edge */
  left: 8rem;
  top: 0;
  bottom: -20vh;
  width: 2px;
  /* background-color: #ced4da; */

  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(42, 157, 143, 0.3) 15%,
    rgba(42, 157, 143, 0.8) 50%,
    rgba(42, 157, 143, 0.3) 85%,
    transparent 100%
  );

  transform: scaleY(var(--progress, 0)); /*  this is the magic */
  transform-origin: top;

  z-index: 0;
}

.section-journey::before {
  content: "";
  position: absolute;
  top: -3rem;
  left: 0;
  width: 100%;
  height: 4rem;
  z-index: 1;
  background: radial-gradient(
    ellipse 160% 123% at 50% 100%,
    #f1f3f5 30%,
    #1a1a1c 90%
  );
}

.section-journey::after {
  content: "";
  position: absolute;
  bottom: -3rem;
  left: 0;
  width: 100%;
  height: 4rem;
  z-index: 1;
  background: radial-gradient(
    ellipse 160% 123% at 50% 0%,
    #f1f3f5 30%,
    #1a1a1c 90%
  );
}

/* ******************************************** */
/* FAQ SECTION */
/* ******************************************** */

.section-faq {
  background-color: #1a1a1c;
  padding: 9.6rem 0;
}

.faq--container {
  color: #f1f3f5;
}

.faq--heading {
  color: #f1f3f5;
}

.faq-list {
  max-width: 80rem;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid #ced4da;
}

.faq-item:first-child {
  border-top: 1px solid #ced4da;
}

/* the clickable question row */
.faq-question {
  list-style: none; /* removes default triangle (Firefox/standard) */
  cursor: pointer;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.6rem;

  font-size: 2rem;
  font-weight: 600;

  padding: 2.4rem 0.4rem;
}

/* removes default triangle (Safari/WebKit) */
.faq-question::-webkit-details-marker {
  display: none;
}

/* your own + indicator on the right */
.faq-question::after {
  content: "+";
  font-size: 2.8rem;
  font-weight: 400;
  color: #2a9d8f;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

/* rotate + into × when open */
.faq-item[open] .faq-question::after {
  transform: rotate(45deg);
}

/* the answer — height animated by JS */
.faq-answer {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

.faq-answer p {
  font-size: 1.8rem;
  line-height: 1.6;
  color: #f1f3f5;
  padding: 0 0.4rem 2.4rem 0.4rem;
  margin: 0;
}

/* ******************************************** */
/* CONTACT SECTION */
/* ******************************************** */

.section-contact {
  background-color: #f1f3f5;
  padding: 9.6rem 0;
  /* border-top: 1px solid #ced4da; */
  position: relative;
  /* z-index: 2; */
}

.contact-columns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.8rem;
}

.socials-btn-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-icon {
  width: 3.2rem;
  height: 3.2rem;
  flex-shrink: 0;
}

/* .form-group-container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 3.2rem;
  margin: 0 auto;
} */

/* .form-group-container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr; 
  justify-items: center;
  row-gap: 1.6rem; 
  max-width: 48rem;
  margin: 0 auto;
} */

.contact-form-container {
  max-width: 64rem;
  width: 100%;
  padding: 0 3.2rem;
}

.form-group-container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: 3.2rem;
  /* max-width: 160rem; */
  margin: 0 auto;
}

.form-label {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
}

.form-group {
  width: 100%;
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 1.2rem;
  font-size: 1.8rem;
  font-family: inherit;
  color: inherit;
  border: none;
  background-color: #ced4da;
  border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  /* margin-bottom: 1.6rem; */
}

.form-textarea {
  min-height: 12rem;
  resize: vertical;
  /* grid-row: 2 / -1; */
}

/* .btn--email {
  position: absolute;
  top: 72%;
  left: 4%;
} */

.btn-icon {
  height: 24px;
  width: 24px;
  stroke: #f1f3f5;
  background-color: #f1f3f5;
  text-align: start;
}

.section-contact::before {
  content: "";
  position: absolute;
  top: -3rem;
  left: 0;
  width: 100%;
  height: 4rem;
  z-index: 1;
  background: radial-gradient(
    ellipse 160% 123% at 50% 100%,
    #f1f3f5 30%,
    #1a1a1c 90%
  );
}

.section-contact::after {
  content: "";
  position: absolute;
  bottom: -3rem;
  left: 0;
  width: 100%;
  height: 4rem;
  z-index: 1;
  background: radial-gradient(
    ellipse 160% 123% at 50% 0%,
    #f1f3f5 30%,
    #1a1a1c 90%
  );
}

/* ******************************************** */
/* FOOTER */
/* ******************************************** */

.footer {
  padding: 4.8rem 0;
  /* border-top: 1px solid #eee; */
  background-color: #1a1a1c;
  color: #f1f3f5;
}

.grid--footer {
  grid-template-columns: 1.5fr 1.5fr 1fr 1fr 1fr;
}

.logo-col {
  display: flex;
  flex-direction: column;
}
.footer-logo {
  display: block;
  margin-bottom: 3.2rem;
}

.social-links {
  list-style: none;
  display: flex;
  gap: 2.4rem;
}

.social-icon {
  height: 2.4rem;
  width: 2.4rem;
}

.copyright {
  font-size: 1.4rem;
  line-height: 1.6rem;
  color: #6b7177;
  margin-top: auto;
}

.footer-heading {
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 4rem;
}

.contacts {
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1.6;
}

.address {
  margin-bottom: 2.4rem;
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem;
  border-radius: 9px;
}

.footer-link:link,
.footer-link:visited {
  text-decoration: none;
  font-size: 1.6rem;
  color: #6b7177;
  transition: all 0.3s;
}

.footer-link:hover,
.footer-link:active {
  color: #ced4da;
}